yaakaito.org

OctopressでAngularJSを使う

AngularJS, JavaScript, Octopress

こんにちは!Octopress、カスタマイズしてますか? えっ、テンプレートを変えただけ???自分で書きましょう!!!!

AngularJS使えば夢が広がるんじゃね?

というわけでOctopressでAngularJS使ってみよう的な話です。 まあ別にjQueryでもいいんですけど、Octopressは静的ページですし、 検索なんかもデフォルトはgoogleに飛ぶだけとか、結構貧相じゃないですか。 結局のところ単純に使いたかったのが大きいんですが、 データさえ埋め込んでおけば楽にいろいろ作れる感じがしたので、AngularJS使ってみることにしました。

そもそもシンタックスがぶつかるんですけど

Handlebars.jsなんかでもそうですが {{ hoge }} というシンタックスがぶつかりますね。 これはJekyllのプラグインにrawプラグインというのがあるのでそれを使うと解決できます。 ただ、よくみたらOctopressには最初からrawプラグインがついていたので、ありがたくこれを使わせてもらいましょう。 AngularJSの対象になるところは、(ネストできなくて外側でお茶を濁してるので\は外してくださいね)

1
2
3
{\% raw %}
  {{ hoge.fuga }}
{\% endraw %}

とか書けばよいです。簡単ですね。

AngularJSを読みこむ

問題も解決できましたし、とりあえずAngularJSを読み込みましょうか。 source/custom/head.html をいじります。 適当な場所で

1
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

とかいて、AngularJSを読み込みます、あとはhtmlにng-appを付けましょう。

1
2
3
<!--[if IEMobile 7 ]><html class="no-js iem7" ng-app><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8" ng-app><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en" ng-app><!--<![endif]-->

これでAngularJSを使う準備ができました!めっちゃ簡単ですね!: )

Githubのリポジトリを取ってみる

今作っているテンプレート(このテンプレートですね)では下の方にgithubのリポジトリが何個かでるので、これを作ってみましょう 。_include/asides/github.html をこんな感じにします。

1
2
3
4
5
6
7
8
9
<div ng-controller="githubCtlr">
  <ul class="repositories">
    {\% raw %}
      <li ng-repeat="repo in repos" data-lang="{{ repo.language | lowercase }}">
        <a href="{{ repo.html_url }}">{{ repo.full_name }}</a>
      </li>
    {\% endraw %}
  </ul>
</div>

これにあわせたJSを書きます。

1
2
3
4
5
6
7
8
9
10
11
<script>
  function githubCtlr($scope, $http) {
    $scope.repos = [];
    $http.jsonp("https://api.github.com/users/{{ site.github_user }}/repos?page=1&per_page=20&sort=pushed&callback=JSON_CALLBACK").success(function(data,status,header,config){
      var count = {\{ site.github_repo_count }} || 5;
      for(var i = 0; i < count; i++) {
        $scope.repos.push(data.data[i]);
      }
    });
  }
</script>

_config.yml はちゃんと生かしたいのでちょっと面倒くさい感じになってますね。 まあ20件くらい取ってこれば大丈夫やろ、的なザツい感じになってます。 ともかくこれでリポジトリを取ってくることができました!やりましたね!

デモはページの下の方をみてください!

エントリ本文もAngularされちゃう!

で、ここまではいいんです。 けどAngularJS弄ってみたりしたらまあそれをブログに書くのは当然だよねーみたいなところで少し困ったことになります。 なんとブログ本文もAngularJSの実行対象になってしまいました!やりましたね!!!

raw使って生の {{ hoge }} にしても、 Angularでその表示はなかったことにされるので、何が起こったのか一瞬分からなくなります。 これは困るので解決しましょう、AngularJSを使う場所をそもそも絞ってしまうのがよいですが、 面倒なので ng-non-bindable を使いましょう。 ng-non-bindable で囲まれた中はAngularJSの対象外になるので、何が起こったのか分かるようになります。

_include/article.html なんかで {{ content }} の周りをガッツリ囲んでしまうのが楽です。

1
<section><div ng-non-bindable>{{ content }}</div></section>

これでブログが書けるようになりました!やりましたね! Octopress自体のことを書くときも同じことなので気をつけましょう。

デモはこのエントリです。

できた!

これで夢が広がりましたね!!!!

全然関係ないですが

githubAPIでリポジトリ引いてくるみたいなコードよく見ますけど、 クエリーなしだと30件しか帰ってこなくて全部みれないし、ソートが単なる名前順で微妙なので、 page + per_pagesort くらいは指定した方がいいと思いますよ。