AngularJSやプログラミングの基礎知識の部分で色々ハマりました。　(ハッカー養成塾第4回)

ギークオフィス恵比寿のハッカー養成塾４回目です。Vimやキータイプの訓練も結構進みましたが、今回はAngularのタスクが思ったよりも進んだので自分の中で整理しときます。

投稿者のFacebookのプロフィール画像を表示する。

投稿者のFacebookプロフィール写真を表示するようにします。標準でFacebookログイン機能があり、名前も引っ張ってきてるということはIDも取得できるはず！となんとなく見立てを立てて臨みます。

Facebookのプロフィール画像はどうやって表示できるのか

ググってみるとFacebook APIでプロフィール画像を色々な大きさで取得する方法というドンピシャな記事があったので参照。

https://graph.facebook.com/ユーザーID/picture

というシンプルな方法で引っ張ってこれる事がわかります。ユーザーIDの部分を投稿者IDに動的に当てはめてあげるようにすればよさげ。

ユーザーIDの取得、とりあえず探してみる

index.jadeを眺めてjavascriptファイルの場所を探す。 script(src=\"javascripts/main.js\")とあるので、main.jsに記述して有りそう。

message: message,
from: {
  id: $scope.myself.facebook_user_id, // jshint ignore:line
  name: $scope.myself.fullname
}

それっぽいの見つけました。{{post.from.name}}で投稿者名を引っ張ってきてるので{{post.from.id}}でfacebookのユーザーIDを取得できそうです。試しにテキストに吐き出させるとしっかりIDっぽい文字列が表示されているので正解。

Jade記法でタグで表示させる

あとはHTMLで表示させるだけなので簡単です。Jade記法で書くので

img(src=\"https://graph.facebook.com/{{post.from.id}}/picture\")

としてあげれば正解！のはずだったのですが・・・。

ハマりポイント！Angularマークアップを使用するときはngSrcディレクティブを使う

srcで指定した場合、{{post.from.id}}をそのままURLとして処理してしまい、正しく動作しない場合があるのでsrc指定には必ずng-srcで指定します。参考URL：AngularJS API : ngSrc

プロフィール写真を一時的に非表示にするボタンを一つつける

Facebookのプロフィール画像の表示と非表示を切り替えるボタンを一つつけます。toggleみたいな感じの処理をするにはどうすればいいか。

とりあえずググる。

先人の知恵は偉大ということで、「Angular 表示　非表示　切り替え」でググってみます。まさしく欲しいものが出てきたのでこれがどういう仕組なのかを調べます。参考URL：AngularJSマニュアル：表示の切替えをする

ngShowディレクティブ

ngShowディレクティブがどうやら鍵のようです。値がfalseのときにCSSクラスの.ng-hide(display:none;)が適用され非表示になる仕組み。つまり上の参考サイトはngClickディレクティブで切り替えたtrue or falseの値を、ngShowに渡してあげているということをやっているわけですね。参考URL：AngularJS API : ngShow

switching=switching?false:true;  ナニコレ？

プログラミング知識のある方はもうクリアなんですけど、初心者の僕ははこの魔法の呪文が意味するところがわかりませんでした。

 ＝は左辺に右辺を代入する

数学が苦手な僕でもa = bというのは「aとbは等しい」と意味することくらいはわかります。でもプログラミングは違うんです。a = b はaにbを代入するという意味らしいです。つまり a = a + bが成り立ちます。

三項演算子

そういやこれ、ドットインストールでやってたんですよね。使い道もよくわからなくてわかりにくかったので軽く読み飛ばしてたんですが、感動の再開です。

条件式 ? 式1 : 式2

という書き方で、条件式がtrueの時は式1を返し、falseの時は式2を返すという仕組みです。参考URL：条件演算子(三項演算子)

AngularJSは定義されてない文字列はfalseとみなす

switchingというオブジェクトは定義されていないのでfalseです。

一心不乱にカチカチすると何が起きるのか

これをクリックした時に、まずswitchingは定義されていないのでfalseなので、式2の値trueが帰ってきます。switchingにtrueが代入され、ngShowはtrueとなります。もう１度クリックすると、今度はswitchingはtrueなので式1の値falseが帰ってきて、switchingはfalseになります。ngShowにfalseが渡され、.ng-hideのCSSクラスが適用され非表示になります。クリックするたびにtrueとfalseが切り替わるトグルスイッチができました！というわけですね。面白い。

論理演算子を使えばもっとシンプルにできる

switching = !switching

論理演算子！をつけることによって、switchingがtrueだった場合はfalseを、falseだった場合はtrueを返すことができます。いや、面白いですねほんと。

キーワードで投稿をフィルタリングする

入力フォームに文字列を入力したら、当てはまる投稿だけを抽出して表示してくれる感じにします。即座に反映されるとこがAngularっぽい！

ループ処理にフィルターを加えればできそう

進研ゼミよろしく、これドットインストールでみたやつだ！ってやつです。ドキュメント見たら答えがそのまま書いてありました。参考URL：AngularJS API : filter

入力フォームにngModelディレクティブを使ってデータを紐付けする。

<input ng-model=\"searchText\">

入力された値はsearchTextで宣言します。（っていう表現でいいのか）ViewとModelを紐付けするっていう感じの説明なので、MVCってどんなモノなのか理解しないとアレですね。よく分かんないので次回。ともかく入力した値をsearchTextで引っ張ってこれそうみたいな感覚で使ってみます。

filterを使う

(ng-repeat=\"post in posts\")

の部分で投稿を引っ張ってきているのでここにsearchTextのフィルターを加えます。

(ng-repeat=\"post in posts | filter : searchText\")

これで動きました。公式ドキュメント通りです。

次回のタスクに絶賛ハマり中

投稿にURLがあったら自動でリンクを貼るというタスクなのですが、linkyを使うんだろうな―ってとこまでは分かって、実際タグも吐き出させるところまで行ったのですが、プレーンテキストとして出ちゃうんですよね。Jadeの書き方の問題なのかどうなのか。とりあえず次回に回しておきます。