アニメのランキングサイト更新した　（AngularJSつかってみた）

プログラミング

仕事の納期がひしひしとせまってきているプレッシャーに押しつぶされて「そうだ、AngularJS一度使ってみよう」と思ったので、もはやただの遊び場となっているアニメランキングのサイトを更新しました。
http://niconico.anirank.info/anirank/

ニコ動の動画の再生数とかをアニメタイトルごとに集計してごにょごにょしてランキングで表示するアプリです。

フロント部分をいじりました。ちなみにレスポンシブデザインつくるのがつらかったので、スマホでアクセスした場合はbootstrapでなんちゃってレスポンシブになってた昔のデザインで表示されます。

構成

  • フロント
    • Twitter Bootstrap
    • AngularJS
    • MAXIMAGE2
  • サーバーサイド
  • ストレージ
    • H2 DB（設定情報）
    • Elasticsearch（コンテンツ情報）

やったこと

AngularJS使ってみた

今まではサーバーサイドでHTML作ったりしてたのをやめて、サーバーからは静的なコンテンツを返してクライアントサイドでAngularJSでごにょごにょして遊ぶ感じにしました。
AngularJS入門を一通り読んで、記載されてるサンプルコードを動かしてみたりするだけで、ランキングサイト作るくらいはすぐに出来るようになりました。

基本的にはcontrollerで変数に値を設定して、HTMLに{{変数名}}って書くと表示される感じです。このAngularJSのHTMLテンプレートが機能豊富で、テンプレートを利用するだけでほぼ簡潔しました。directiveという以下のような属性をHTMLに書く事でいろいろな処理をシンプルにテンプレート内に埋め込めて、標準で用意されてるdirectiveを使うだけでマジいろいろ作れそう。

  • ng-model
    • 入力フィールドの値を指定した変数へ格納
  • ng-repeat
    • 配列などのコレクションを指定すると、ng-repeatを指定した要素を配列要素数分だけ繰り返して生成
  • ng-click
    • 要素がクリックされた時の処理を指定
  • ng-style
    • 要素のstyleの設定を変数で動的に設定
  • ng-show
    • 要素の表示非表示を変数で動的に設定

などなど。たくさんあります→ディレクティブ。自分でオリジナルのdirectiveも作れるみたい。

Web APIからコンテンツの情報をとる時は「$http.jsonp」というサービスが用意されてるのでこれを叩くだけです。(AngularJS ver1.2.1までだとIE11で$http.jsonpが動かないみたいです、、、)
ページ内のコンテンツを動的に表示させる時、jQueryとかだとDOMをごにょごにょしてたのが、AngularJSだと変数に値を設定するだけなので、コードがすっきりするかもしれません。逆にスコープの変数が大量に出来てごちゃごちゃしてくる感じがしなくもないので、controllerは小分けにした方がいいのかも・・・？

MAXIMAGE2使ってみた

氷菓 京アニ公式で使ってるのをみかけてかっちょいいと思って以来、使ってみたかったので使いました。
MAXIMAGE2
背景に画像を設定した場合に、スクロールすると途切れちゃったり、ブラウザの画面サイズによって画像のはじっこしか表示されないなど、背景画像が変な表示のされ方しちゃいますよね。そんな時はMAXIMAGEがすごくよくて、画像のサイズをブラウザのサイズに合わせていい感じに調整してくれます。

使い方もとっても簡単で、

<div id="maximage">
    <img src="/anirank/images/back3.jpg" alt=""/>
</div>

とHTMLに書いて、

$(function () {
    $('#maximage').maximage({
        isBackground: true,
        overflow: 'auto',
        verticalAlign: 'top'
    });
});

とjavascriptを書くだけ。すごい！

今後

  • サーバーサイドをgolangにしたい
    • だがnico-api-clientのGo版を作るところからになったりH2も捨てないといけないかなぁというところで重い腰が上がらない
    • 検索なんとかしたい。一応Elasticsearchつかっているものの、もともとDBの代わりに使い始めた所存、スキーマ設計とかが適当すぎてあんまりよくない。
  • いいかげんランキングのやつ以外にも別のあそべるサービスつくりたい