サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
中東情勢
watanabeyu.blogspot.com
fuelphpでsessionの保存先をDBに変更する的なお話でDBにセッションを保存するといいよ的なお話を書いたけれども、 Twitter CardsやFacebook OGPなどのクローラーがアクセスした際に、そのセッション情報も保存してしまうということがある。 特にTwitterは中々の数クロールされるので、いらないデータがDB内に多くたまってしまう。 ということで今回はそのいらないセッションデータを溜まらないようにするにはという方法をば。 /fuel/core/classes/session/db.php // do we need to create a new session? if (is_null($this->record)) { // create the new session record if(!preg_match("/Twitterbot|facebookex
新サービスの開発にて、Facebook認証を用いるために色々とやっているわけだけれども、 an active access token must be used to query information about the current userが出てしまった。 以前書いたfacebook APIで「an active access token must be used to query information about the current user」が出てしまう原因の解決方法のものについてはもちろん解決してるんだけど、 また新たな問題が発生してしまった的な感じ。 ということで今回も諸々これらを解決するためにどうしたかということを書いていこうと思う。 ■環境 ・EC2 micro ・Route53 ・Apache 2.4.6 ・PHP 5.5.7 ・fuelphp 1.7 ・fac
fuelphpを使ってサイトを構築するってなると、ある程度の規模のwebサイトやアプリだったりするわけで。 大体会員登録だとかなんだとかでメールを送る必要があったりする。 サーバーをレンタルサーバーとかでやっていれば何も関係ないんだけど、 AWSでサーバーを構築する場合はサーバーリソースを考えると、webサーバー・DBサーバー・メールサーバーと分けたいわけで。 postfixを入れたサーバーを立ててもいいけど、それだと値段的なものとか考えても無駄だし、 SESを使うことによって節約になったりそもそもメールサーバーを立てないでいいというなんという便利な感じ。 ということで今日はSESをfuelphpで使うには的な話をば。 ちなみに以前アップした記事でほんのちょこっとだけfuelphpでSESを使うには的なことを触れたわけだけど、 今日はがっつりSESの設定からfuelphpでうんちゃら的なと
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 AWSのmicroインスタンスは時間当たりの金額が安いし、 linuxだしで中々便利なインスタンスだけれども、 メモリが613MBぐらいとメモリ量が少ないという問題を抱えていたりする。 ぶっちゃけあまり気にするほどの少なさではないけども、 でも意外と油断してしまうと的な感じの量なんじゃないかと個人的に思う。 大体microを使う理由ってサービスを新しく作ったとかそういうときや、 開発用って感じのときではあるのだけれども、 ここで気をつけておきたいのがメモリが少ないからクラッシュしやすいということ。 ということでmicroインスタンスを立ち上げたときにまず設定することを書いてみた。 ■swap領域の確保 613MBで足りなくなったときに、swap領域に逃がしたい。 なのでそのためにswap
コロコロ仕様が変わって大変面倒なFacebook API。 今までは内部的なところだったりなどして、APIを使うエンジニア側としてはそんなでもなかったけど、 ここにきて遂にFacebookが本気出したのかGraph APIをv2.0にアップデートさせてきた。 これによって何か変わるかというと、/meでやっていたものをv2.0/meにしないといけないみたいな。 もちろんこれだけではないんだけど細々と取り方とかが色々と変わり、 さらにSDKのメジャーアップデートがなされてPHPはv4になったという。 で、PHP SDK v4を使ってログインとか自分のデータを取り出すとかやってみたので、今日はその話をば。 ちなみにちょっと長いので要注意的な。 ■大きな変更点 ・PHP5.4以上が必要 ・namespaceが使える ・$facebook->api()みたいな呼び出し方じゃない ・クラス数が半端ない
なぜかPaginationを二回呼び出してることになってるっぽい fuelphp1.7を使ってwebアプリやサービスを作ってる際に、 Controllerが汚れるのが面倒だし、可読性やらなんやらとかを考えた際に、 Modelを使うのは当然だけどModelよりもViewModelを使ってあげると色々とはかどる。 ViewModelはViewに対して諸々処理をしてあげるって感じで、 ControllerがModelからデータを引っ張って来て、そのデータをViewModelで処理してViewに表示するといった流れ。 ということでかなりいい感じで分離させることが出来るのでよかったりする。 ってことで今日はViewModelのサンプル的なものと、ViewModelを1.7で使うとバグがあるのでその対処法的なお話をば。 ■ViewModelの使い方 // classes/controller/hoge
fuelphpはフレームワークなだけあって中々便利なもので、 Controllerには通常のものやRest、Templateなんてものがある。 Ruby on Railsに似てるからRoutesなんてものもあったりで、 軽量で自由も聞くしCodeigniter使ってた人もよく使っていたりする。 で、今回はそんなfuelphpにてContoller_Templateを継承したBaseコントローラーを継承した404コントローラーにて、 どうやって404のレスポンスコードを返すかというお話。 ちゃんと404のレスポンスコードを返さないとSEO的なお話であまりよくないとかもあるし、 ちょっとこれを応用すれば他のページで独自のレスポンスコードを返したりも出来るという。 ということでざくっと解説をば。 とりあえずContoller_Templateを継承したController_Baseを用意 cla
■index.php(キーワードを投げて結果を取得) //index.php <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> $(document).ready(function(){ $("#getTweet").on("click",function(e){ e.preventDefault(); $.ajax({ url:"searchTweet.php", type:"POST", dataType:"json", data:{ keyword:$("#keyword").val() }, beforeSend:function(){ $
まんまタイトル通り。 AWSでRoute53+ELBでやっている際に、 http→httpsと強制的にプロトコルを変更したい的なときのお話。 htaccessでやっちゃおう的な。 fuelphpの場合でも基本的に変わらないんだけど、AWSでELB(Elastic Load Balancing)を通すとちょっと違うので、 そうなった場合にどこを弄ればよいのか的な感じ。 publicフォルダ内にある.htaccessに3行追加してあげればよい。 // public/.htaccess # Make sure directory listing is disabled Options +FollowSymLinks -Indexes RewriteEngine on RewriteCond %{HTTP:X-Forwarded-Port} !^443$ RewriteCond %{HTTP_US
fuelphpとAmazon SESを使ってメールを送信する際に、なぜか文字化けをしてしまうという問題が発生してしまった。 諸々解決策を練ってみるけど何も原因がわからんとかヤバい感じ。 けどまぁ何回目かのトライによってついに解決がしたので、どうやって問題を発見したのかなどをば。 ■そもそもfuelphpでAmazon SESを使うには? 方法としては2種類あり、packageを使うかAWS SDK for PHPを使うかって感じ。 AWS SDK for PHPを使うとなると余計なクラスがあったりもそうだし、 ドライバというかクラスというかコントローラーというかそこら辺作らないといけないというめんどくさい感じだったので、 packageを使おうということでgithubで探してみたらあった。 rob-mccann/fuel-amazon-ses これをダウンロードしてpackageに入れてう
一般的にhtaccessでアクセス制限を行うときは下記の2種類に別れる。 ・ユーザーエージェントで携帯を弾きたい ・特定のIPアドレスからのアクセスを弾きたい だけどまぁ時代的に今はスマフォでPCサイトを見れたりもするわけで。 元上司のブログにいやなコメントを残していくスマフォユーザーがいたらしい。 なのでユーザーエージェントだけで弾くのはまずいし、 もちろんIPアドレスで弾くのもまずい。 だけど「かつ」条件を使ったやり方がわからないとのことだったので、書いてみた。 #弾きたい機種の場合、deny_uaとして変数を作成 SetEnvIf User-Agent "機種名" deny_ua #正規表現を用いてIPアドレスを判別し、指定のIPならばdenyに SetEnvIf Remote_Addr ".*" addr=allow SetEnvIf Remote_Addr "^(xxx\.xxx
facebookのページタブを読み込んで、その中でHTMLを表示したいとか、 アプリ的な事をやりたいとかそういうときに、 同時にスマホ対応もしたいときにどう書いたらいいのか的なお話。 ちなみにスマホではページタブは表示する事が出来ないので、 読み込まれる側のURLにまずはアクセスさせて、PCだったらページタブに遷移させるのがよい。 ということで今日はページタブで読み込まれるURLにアクセスしたら、 PCかどうかで判別してページタブに遷移させるかどうかという方法を書いてみる。 ■読み込まれるURLにアクセスした際にユーザーエージェント判別 PHPで作成してもいいけど、諸々の関係上jsでこれは判別した方がよい。 以前書いたJavaScriptによるUserAgent判別を使えば判別は容易になる。 実際はちょこっと改造してあげる必要があり、 iPhoneだけでなく、iPad・iPodもiPhon
先日アップしたMusic Hack Day Tokyo 2014に、エンジニアとして参加してきて賞が取れた的なお話で、 自分たちが作った「chaos animals」の技術的な解説をしようかと。 Echo NestとSoundCloudを使ったけど、SendGridやSpotifyなども使いたかったなぁーと思った。 ちなみに技術的にはそんな難しい事はしていなかったりもしたり。 ということで解説は以下から。 ちなみにソースはこちらから(githubに上げるのは面倒なので上げてません)。 ■環境 サーバー:heteml フレームワーク:fuelphp 1.6、bootstrap3 使用言語:PHP、JavaScript、HTML5 API:Echo Nest、SoundCloud ■機能 ・SoundCloudから音源を引っ張ってくる ・引っ張ってきた音源をEcho Nestで拍に分解 ・分解
原宿のTHE TERMINALで開催された「Music Hack Day Tokyo 2014」に参加してきた。 Music Hack Dayは海外で毎年行われていて、日本初上陸みたいな感じ。 Spotifyがどうなるの?とかもあって中々注目がされていたりもしていたり。 ちなみに自分は元々出る気はなくてレセプションだけ見ようかなと思ってたけど、 紆余曲折があって土日使って24時間で何か作るハッカソンを頑張ってきた。 ということで今回はこのハッカソンのレポート的な事を書きたいなと思う。 ちなみに自分たちのチームが作った「chaos animals」はこちらから。 ※chromeでしか対応していないので要注意 ■2014/02/21(金) レセプションパーティー いろんな人が来てた。 エンジニアとかデザイナーも入れば、普通の人もいたり、出版とかそういった関係の人も。 とりあえず音楽が好きだって
今はどのサイトいってもいいねボタンやらはてぶのボタン、ツイートするボタンなど、 そういったソーシャルボタンがいっぱいちまたにはあふれている。 jsで簡単に入れたいとかwordpressのプラグインで用意されてるとかもあったりする。 で、今回はそんなソーシャルプラグインでいいねボタンがSafariでは表示されないという現象に見舞われた。 IEやFirefox、ましては同じwebkitブラウザであるChromeでは表示されているのに。。。という感じ。 もちろんiPhoneやiPadでも表示されず。 原因なりを自分的に追求してみたのでつらつらと書いてみたいと思う。 1:iframeで埋め込んでたのが原因なのか? いいねボタンを埋め込むには3種類ぐらい方法がある。 「HTML5」形式、「xfbml」形式、「irame」形式とある。 xhtmlで作っているサイトだったのでhtml5形式は無理なのでi
webサイトを作っていて画像をアップする際に、その場でプレビューしたいとかそういう場合がある。 で、そのためにjquery.upload.jsを使って出来るようにしていたんだが、 なぜかIEでは画像がアップロードできずエラーが出てしまうといった現象が。 そもそもjquery.upload.jsはIEに対応していないのか? なんて思ったけど全然そんな事は無く他に要因があるのではないかと思って色々と調べてみた。 http://lagoscript.org/jquery/upload?locale=ja http://blog.futuresoftware.jp/?p=99 http://eastpoint.biz/2012/07/31/ie9%E3%81%A7json-parse%E3%81%8C%E4%BE%8B%E5%A4%96%E3%82%92%E5%90%90%E3%81%8F/ ht
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 前回JavascriptによるUserAgent判別という記事を書いたけれども、 今回はガラケーの振り分けも行わないといけないとのこと。 ガラケーではjsは使えないし、phpを使わないサイトであるので、 .htaccessを使って振り分けをしようと思った。 ということで書いたものはこんな感じ。 ちなみに今回のサイト構成は下記のような感じ。 hogehoge.com/test/ hogehoge.com ∟hogehoge.com/m/ ∟hogehoge.com/m/test/ ∟hogehoge.com/sp/ ∟hogehoge.com/sp/test/ hogehoge.com上におく.htaccess SetEnvIf User-Agent "DoCoMo" UA=mobile
現在Macbook Pro Retina15を使っていて、起動ディスクの容量が足りないよってたまに怒られてたので、 どうにか容量を確保出来たりしないかなとか諸々とやってみたけど、全然効果がなかった。 けど原因としてはMacのノートPC特有のものであるsleepimageだと判明。 これを二度と生成しないように設定をしてみた。 ■sleepimageについて Appleのサポートにも書いてあるけど、 開いてたウィンドウとかそういったメモリに書き込んでた内容を保存するためのものらしい。 なので積んでるメモリ分だけ容量を食うとのことなので、16GBくらいも容量を食っていた。。。 で、これがMacのノートPCだけに存在する理由はスリープ時に電源が切れてしまったら。というためとのこと。 とりあえず自分はスリープ時に電源が切れる事が無いからこの機能いらないなって感じなので諸々設定することにした。 ■s
TitaniumでTableViewを使ってデータを入れていたときに、 なぜかテーブル内のrowが若干右にずれてしまうという問題が発生してしまった。 rowの中にviewとかimgを入れているからかとかって考えたけど、 全然そんな事は無くて原因はよくわからなかった。 色々と方法を試してみたところなんとか解決したので何をしたかとか書いてみようと思う。 上のような感じ。 とりあえずどうしてなのか頑張ってみたのは下記になる。 1:editableとかが原因なのか、画像を表示しているからなのかなどで判別 2:空のデータをテーブルに20個入れてみて、その後テーブルを空にしてからちゃんとしたデータを入れる 3:データの入れ方をappendRow()ではなくて、table.data = []としてまとめて入れる ■1:editableとか画像があるからなのかとか 全然そんな事は無くてとりあえず何も変わら
最近流行りのbootstrapを使うとすごく簡単にレスポンシブルなサイトを作る事が出来る。 特に自分みたいなエンジニア系のweb制作者にとってはbootstrap使う事によってデザインを整えられるし、 何よりも最大12カラムのグリッドシステムがすごく便利。 だけどグリッドシステムを使ってサムネイルを並べたときなどにそれぞれの高さが変わってしまうと不格好になってしまう。 なのでこれを解決するためにmasonryを使ってグリッドシステムをさらに綺麗に表示することにしてみた。 // html <script src="/js/jquery-1.8.2.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/jquery.masonry.min.js"></script> <ul class="
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 パララックスサイトを最近作る機会があり、 普通にjsでscrollを取って諸々計算する方法でもいいかなと思ってたんだけど、 メンテナンスとかを考えると面倒だと思ってScrollTween.jsというのを使った。 もちろんパララックス系のライブラリはいくつもあったりはするんだけれども、 自由度が低いというかシーンが限られてるというか…みたいな感じであった。 その点ScrollTween.jsは直感的にいける感じのライブラリで中々良い。 ちなみにダウンロードはこちらから。 <script src="js/jquery-1.8.1.min.js"></script> <script src="js/ScrollTween.js"></script> <script src="js/jquery
例えばフォーム入力中だとか、 ショートカットを押し間違えたとか、 意図しないタイミングでブラウザ閉じてしまうとか色々とあるわけで。 そういうときってあぁ〜って感じでちょっとがっかりしたりする。 でもGmailみたいに本当に閉じますか?みたいな感じでアラート出してくれると助かるわけで。 というわけで今日はその組み方的なお話。 //jQuery $(document).ready(function(){ $(window).on("beforeunload",function(e){ return "本当に離れますか?"; }); }); //javascriptで普通に書く場合 window.onbeforeunload = function(){ return "本当に離れますか?"; } っていう感じ。 要注意なのは何があっても最後に行われるイベントであるので、 これを書いているとどうや
TitaniumでTableViewを普通に使っていれば問題はないんだけど、 データベースに入っているデータを全て取り出して、 行としてどんどん追加する場合、行数によっては表示まですごく時間がかかってしまう。 そこで改善策を!と言いたいところだけど、 劇的な改善については今のTitaniumの仕様だと無理だった。。。 とりあえず色々と調べた結果を書いていこうと思う。 ■appendRowを使わずにsetDataでまとめて行を追加 //駄目な書き方 var table = Ti.UI.createTableView(); for(var i = 0;i < 2000;i++){ var row = Ti.UI.createTableViewRow({ height:40 }); row.add(Ti.UI.createLabel({ text:i })); table.appendRow(r
Titaniumで色んなデータを扱う際にデータをサーバに入れておくけど、 アプリを使っているユーザのデータだけは端末に格納して、 サーバとの通信を抑えて高速化したいといったことがある。 (他のユーザのデータはwindowをopenした際に都度取得してくる) じゃあそうする場合はどうしたら良いのかっていうのが今回のお話。 そういった場合はSQLiteを使ってデータを格納しておくんだが、 既に存在しているidに対して挿入(INSERT)することは出来ないので、 下記みたいな形で一般的にデータを確認して、挿入もしくは書き換えを行う。 var r = db.execute("SELECT COUNT(id) FROM table1 WHERE id = 1"); if(!r.field(0)){ //存在していない db.execute("INSERT INTO table1 (id,name)
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 JavaScriptでのUserAgent判別を行う案件があるので、 先にちょろっと判別式だけ書いてみようと思う。 基本的には既存のブラウザしか判別できないので、 後々追加していく必要があったり。 function getUA(){ var ua = navigator.userAgent; var agent = ""; if(ua.match(/msie/i)){ if(ua.match(/msie 9/i)) agent = "IE9"; else if(ua.match(/msie 8/i)) agent = "IE8"; else if(ua.match(/msie 7/i)) agent = "IE7"; } else if(ua.match(/firefox/i)) age
Titaniumでアプリ開発をする際にネックとなるところとしては、 iPhoneの場合とAndroidの場合で見た目が変わってしまう部分があるところ。 特にtabGroupがAndroidの場合では上部に表示がされ、デザイン的にもなんだかなってなってしまう。 そこで今回はそのなんだかなを解消するための方法。 Android開発をしたことがあるならばわかるけれども、 基本的なパーツの配置というのはxmlで制御が可能。 Titaniumもその機能をカバーしてるのでそれを使ってあげればよいだけ。 ■手順 1:(projectフォルダ)/platform/android/res/layout/というフォルダを作成。 2:(projectフォルダ)/build/android/res/layout/titanium_tabgroup.xmlを1のlayoutフォルダに入れる。 3:titanium_
jquery.mousewheel.jsを使ってのマウスホイールイベントの取得をやってみた。 プラグインは今現在ダウンロードが出来ない?ので、 過去に使った案件より流用。 $(window).bind("mousewheel",function(event,delta){ switch(delta){ case 1: //ホイールを上に回転させた場合 alert("上に回転させました"); break; case -1: //ホイールを下に回転させた場合 alert("下に回転させました"); break; } }); こんな感じで記述すれば大丈夫! と思ったけどホイールの回転が0となってしまい、 うまく取得出来なかった。 原因としてはjquery.mousewheel.jsだったので、 handlerをちょこっと改造。 ソースを貼りつけられないのでざくっと書くとこんな感じ↓ (52行目辺
phpとかjavascriptとかgolangとかreactを中心につらつら適当に書いてたりなんだり。 会社のお仕事でたまにFBアプリを作ることがある。 大体そういう時はGraph APIを使って処理をする形にしてるんだけど、 今回のアプリは女性をランダムに5人とかそういった感じ。 だからそういう場合はFQLの方がAPI叩く数も少ないし処理も楽だったりする。 ということでいくつかサンプルを載せておく。 そもそものFQLの使い方 require_once('facebook.php'); $app_id = "アプリのID"; $app_secret = "アプリのシークレットキー"; $facebook = new Facebook(array( 'appId' => $app_id, 'secret' => $app_secret, 'fileUpload' => true )); $u
react-navigationを使って様々な組み方をすると思うんだけど、よくあるのがネストして複雑なnavigationを作るという感じ。 stackNavigatorをネストしまくるとか、TabNavigatorの中にStackNavigatorとか、DrawerNavigatorの中にStackNavigatorとか。 で、今回はDrawerNavigatorについて。 スワイプしたらDrawerが出てきてしまうので、スワイプで戻りたい時にも出てきてしまう。 ということで今日はDrawerのスワイプを一時的にオフにするお話をば。
このページを最初にブックマークしてみませんか?
『適当な感じでプログラミングとか!』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く