オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』（ソシム刊）発売中（→本のサポートページ）

テキスト版のTwitterブログパーツをはてなダイアリーのサイドバー向けに書き換える

hatena web
【元記事：テキスト版のTwitterブログパーツをはてなダイアリーのサイドバー向けに書き換える：d:id:manpukuya:20070820:twit_on_hatena】

本日、はてなダイアリーに貼り付け可能なブログパーツに、ALPSLABおよびTwitterを追加いたしました。

（中略）

Twitterは「今していること」を登録できるコミュニケーションサービスで、自分の投稿したメッセージなどを日記に貼り付けることが可能です。

はてなダイアリー日記 - ALPSLABおよびTwitterのブログパーツに対応しました

ということで、Twitterの書き込み内容をはてなダイアリー内に表示させることができるようになった。

Twitterでは、書き込みの内容を表示できるブログパーツのことを「Badge（バッジ）」と呼んでいる。貼り付け用のコードを得るには、Twitterにログオンした状態で「http://twitter.com/badges/which_badge」へアクセスすればよい（ここへはログオン時に右上のメニュー、「Badges」から「Other」をたどっても行ける）。

で、ここでは3種類のバッジから選べるようになっている。

  1. 「Flash, Just Me」（Flash利用、自分の書き込みのみ表示）
  2. 「Flash, With Friends」（Flash利用、ほかの人の書き込みも表示）
  3. 「HTML/JavaScript」（HTMLとJavaScriptを使い、自分の書き込みのみ表示）

3つめの「HTML/JavaScript」はシンプルでなかなかよい。このHTMLを、はてなダイアリーのサイドバーに入れやすいはてなモジュールの書式に書き換えてみた。こんな感じでいかがでしょう。

<div class="hatena-module">
<div class="hatena-moduletitle">Twitter Updates</div>
<div class="hatena-modulebody">
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザーID.json?callback=twitterCallback2&count=■"></script>></div><></div><

6行目、「ユーザーID」の部分は自分のユーザーIDにし、「■」の部分は表示したい書き込み件数を半角数字で指定。

また、2行目の「<div class="hatena-moduletitle">Twitter Updates</div>」の部分はモジュールのタイトルとして表示されるので、自分のTwitterのページのリンクにしてもよい。

たとえば「<div class="hatena-moduletitle"><a href="http://twitter.com/ユーザーID">my Twitter</a></div>」のような感じに書き換えてみてもよいと思う（「ユーザーID」の部分は自分のユーザーIDに書き換えて）。

そうするとこんな感じに（日記本文とサイドバー内でCSSが違うので、見た目はちょっと異なります）。

my Twitter

    どうぞご利用ください。

    追記：ほかの人の書き込みも含めて、はてなモジュール式に表示する方法

    ※追記の追記：Twitterの仕様変更にともない、以下は使えなくなりました

    上の「HTML/JavaScript」では、自分の書き込みだけが表示される。ほかの人の書き込みも含めて、はてなモジュールの見栄えで表示させることもできる。

    こちらはRSSが提供されているので、それをはてなモジュールで表示させればよい。

    1. 自分のTwitterの「Home」を開く
    2. ページ最下部の「RSS」のURLを取得（右クリックして「ショートカットをコピー」「リンクのURLをコピー」といったメニューを選択）する。
    3. 以下のように書く。「url="〜"」の部分は、先ほどコピーしたURLをペーストする
    <hatena name="rss" url="http://twitter.com/statuses/friends_timeline/0000000.rss" template="hatena-module">

    こんな感じになる。

    Error : RSSが取得できませんでした。

    ※↑「Error : RSSが取得できませんでした。」が出ることがあります。書き方が間違っているわけではなく、twitterかRSSモジュールの問題です

    ここでは、属性として「moduletitle="my Twitter"」（タイトル部分の文字列）や「listlimit="5"」（表示件数）などを指定してある。

    （rssモジュールについて詳しくは→「はてなダイアリーのヘルプ - RSSを使った最新情報を表示する（rssモジュール）」）

    どうぞご利用ください。

    Twitter社会論 ~新たなリアルタイム・ウェブの潮流 (新書y)

    Twitter社会論 ~新たなリアルタイム・ウェブの潮流 (新書y)


    トラックバック