MSaiSai's Blog

Don't cry over spilled milk.

OctopressのサイドバーにTwitterのタイムラインを埋め込む

突然Octopressのサイドバーに置いておいたTwitterのプラグインが動作しなくなったので、その理由や対策をメモしておく。今思うと突然でもなんでもなく、自分の油断みたいなものだったのだけれど、まあ外部のサービス利用してるなら変更やその影響範囲にはよく注意しないと駄目ってことだね。気をつけます…。

旧APIの廃止、新APIへの移行、Octopressへの影響

6月11日にTwitterのAPI v1が廃止され、API v1.1に完全に移行した。(API v1 Retirement is Complete - Use API v1.1) APIの変更点や注意点はあまり詳しくないのでとくに触れるつもりはないけど、ウェブサイト向けのプラグインみたいな物はほとんど使えなくなったのではないだろうか。この変更の影響範囲は相当広いということは十分に分かっていたつもりなんだけど、先週くらいまでは自分とは全然関係ないだろーとか思ってた。タイムラインが表示されなくなって、なんで表示されないんだろう…っていうのを調べていたら、TwitterのAPIが変更され非認証のJSON APIは利用できないから、Octopressの次期リリースではTwitterプラグインを削除するという情報があった。

埋め込みタイムライン

ではどうすればタイムラインを取得できるかというと、Twitterでは公式に「埋めこみタイムライン」を提供している。埋め込みタイムラインを利用すればユーザー、お気に入り、リスト、検索結果(ハッシュタグ含む)のタイムラインを取得することができる。

埋め込みタイムラインの作成と利用

埋め込みタイムラインを利用するにはウィジェットを作成する必要がある。ウィジェットのページの新規作成から作成できる。タイムラインのソースには、任意ユーザーのタイムライン、任意ユーザーのお気に入り、自分で作成または保存したリスト、検索結果(ハッシュタグも含む)の4種類を選択可能だ。ただし、非公開の物は見られない。ウィジェットを作成すると以下のようなコードを得る。

widgetのコード
1
2
<a class="twitter-timeline" href="https://twitter.com/mndsaisai" data-widget-id="WIDGET-ID">@mndsaisai からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これをHTMLに埋め込むと以下のようになる。

これでタイムラインを埋め込むことができるようになった。

埋め込みタイムラインのカスタマイズ

埋め込みタイムラインはデザインをある程度カスタマイズできる。デフォルトのデザインのままだとブログのデザインと合わない可能性があるためある程度変更できるのだろう。コード(aタグの属性)にパラメータを指定することで、カスタマイズすることができる。カスタマイズしたコードと、その表示例を以下に示す。

カスタマイズしたwidgetのコード
1
2
<a class="twitter-timeline" href="https://twitter.com/mndsaisai" data-widget-id="WIDGET-ID" height="400" data-chrome="noheader nofooter noscrollbar transparent" lang="ja">@mndsaisai からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

上記のコードはヘッダー、フッター、スクロールバーを削除し、背景を透明化している。また、ウィジェットの高さを400pxにし、言語設定を日本語化している。ちなみに幅は自動的に調整されるのでほとんどの場合で変更しなくてもいいと思う。見た目は以下の通り。

カスタマイズでコードに設定できるパラメータは以下の通りである。

  • テーマ:data-theme属性で、基調となる色の指定
  • リンクの色:data-link-color属性で、リンクの色を指定
  • 幅:width属性でウィジェットの幅を指定(幅の最大値は520px、最小値は180px)
  • 高さ:height属性でウィジェットの高さ指定(高さの最小値は200px)
  • インターフェース:data-chrome属性で、スペース区切りで以下のオプションを指定。
    • noheader:ヘッダーを削除
    • nofooter:フッターを削除
    • noborder:境界線を削除
    • noscrollbar:スクロールバーを削除(スクロールバーが見えなくなるだけで、スクロール自体は可能)
    • transparent:背景を透過
  • ボーダー(境界線の色):data-border-color属性で、境界線の色を指定
  • 言語:lang属性で言語指定(HTML上のlang属性で推定される)
  • ツイート数の固定:data-tweet-limit属性で、ツイート数を固定(ツイートが自動で更新されなくなる)
  • おすすめしたいユーザー:data-related属性で、おすすめしたいユーザーを指定(コンマ区切りで複数指定可能)
  • ARIA politeness:障害を持つ人のためのシステムとあるが詳細不明。これに詳しく書いてあるらしい。

Octopressのサイドバーに配置

さて、タイムラインを取得できるようになったのでサイドバーに配置する。基本的なやり方はDisqusの最新コメントをOctopressで表示するのOctopressのサイドバーについての項目を参考にしてもらえばいい。今までOctopressデフォルトのTwitterのプラグインを利用していれば通常だとsource/_includes/asides/twitter.htmlを利用していると思うのでこれを以下のように変更すればいいと思う。

source/_includes/asides/twitter.html
1
2
3
4
5
<section>
  <h1>Latest Tweets</h1>
  <a class="twitter-timeline" href="https://twitter.com/mndsaisai" data-widget-id="WIDGET-ID" width="auto" height="400" data-chrome="noheader nofooter noscrollbar transparent" lang="ja">@mndsaisai からのツイート</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</section>

または、新規にsource/_includes/custom/asides/twitter.htmlのようなファイルを作成し上記のコードを書いて、_config.ymldefault_asidesに追加するといいだろう。もしかしたら、Octopressの次期アップデートでsource/_includes/asides/twitter.htmlは削除されるかもしれないので、アップデートした時にコンフリクトすると面倒だと思うので新しく作ったほうがいいかなと思う。しないかもしれないけど。

他のウェブサイトで配置

補足的な感じだけど、埋め込みタイムラインはHTMLで埋め込んでいるだけなので他のブログサービス的なのでも、空のウィジェットとかそういう感じのものにコードを貼り付ければタイムラインを表示することができるようになる。

参考サイト

Octopress

« さいさいのアトリエ

Comments