phoenix-powerpopular_post.rbというものがありました。

はじめに

https://github.com/satooshi/octopress-plugins/blob/master/plugins/popular_post.rb

このプラグインは、 Google Analytics API を使って、記事のアクセス数を取得し、アクセス数が多い順に記事を表示することができるプラグインです。

以前書いた Google Analytics API - MBA-HACK2 の記事を理解されている場合は、大体の仕組みが把握できるものと思われます。当該プラグインの導入に困った場合は、読んでみると良いかもしれません。

このプラグインの導入で嵌りそうな箇所は、2つあります。一つは、バージョンの問題。もう一つは、環境変数の問題です。

Google Analytics APIを使ってOctopressで人気記事を表示するプラグインを書いた - satooshi@blog

Google Analytics API

Google Consoleを使って、APIを使えるようにしておき、JSONをダウンロードします。スクリプトディレクトリにclient_secrets.jsonとして保存します。

バージョンの問題

以下を追記してbundle installまたは、bundlerします。

octopress/Gemfile
1
gem "google-api-client", "0.6.4"

jwtは、0.1.5で動きました。これは、google-apiコマンドを実行するためのものです。

octopress/Gemfile.lock
1
jwt (0.1.5)

これで、以下のコマンドが実行できると思います。

1
2
3
4
5
6
7
# xxxxxx には client_secrets.json の情報を入れる
$ google-api oauth-2-login --client-id='xxxxxx' --client-secret='xxxxxx' --scope="https://www.googleapis.com/auth/analytics.readonly"

または、

# jq をインストールしている場合は、以下のコマンドにて自動で読み取れる。これは、 client_secrets.json がある場所で実行する
$ google-api oauth-2-login --client-id=`jq '.installed.client_id' ./client_secrets.json -r` --client-secret=`jq '.installed.client_secret' ./client_secrets.json -r` --scope="https://www.googleapis.com/auth/analytics.readonly"

ブラウザが開きますので、承認すると、~/.google-api.yamlが保存されます。

環境変数の問題

プラグインのコードを見てみると、環境変数は、ENVということで、シェルから代入されるみたいです。なので、シェルの設定ファイルに以下を追加します。

~/.zshrc
1
2
3
4
5
# Analytics profile ID.
# https://www.google.com/analytics/web/home/a42353636w43552078pXXXXXXXX/
# URLのpのあと数字がProfile ID
export GOOGLE_ANALYTICS_PROFILE="ga:XXXXXXXX"
export GOOGLE_API_HOME="${HOME}/.google-api.yaml"

必要なファイルの保存

1
2
3
4
5
6
7
$ cd ~/blog/octopress/plugins/

$ curl -O https://raw.githubusercontent.com/satooshi/octopress-plugins/master/plugins/popular_post.rb

$ cd ~/blog/octopress/source/_includes/custom/asides/

$ curl -O https://gist.githubusercontent.com/satooshi/5318094/raw/analytics_popular_posts.html

これで、rake generateが通るようになったかと思われますので、実行してみるのもよいでしょう。設定ファイルを書いてからでも構いませんが。

ちなみに、私の場合は、サイドバーを装飾しているので、以下のような感じで編集しています

octopres/source/_includes/custom/asides/analytics_popular_posts.html
1
2
3
4
5
6
7
8
9
10
<section class="panel panel-default">
  <div class="panel-heading">
    <div class="panel-title">Popular Posts</div>
  </div>
  <div id="recent_posts" class="list-group">
    {% for post in site.popular_posts limit: 10 %}
    <a class="list-group-item {% if post.url == page.url %}active{% endif %}" href="{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a>
    {% endfor %}
  </div>
</section>

プラグインの設定

_config.yml
1
2
3
4
5
# サイドバーに表示する
default_asides: [ custom/asides/analytics_popular_posts.html ]

# 人気記事を表示する数の指定
popular_posts: 10