Tweet

Twitter のログをブログに表示してみた記録。基本的には簡単。ジェネレータで生成した HTML を貼り付けるだけだ。

[Movable Type] Twitterウィジェットをサイドバーに追加してみた – No Second Life
http://www.ttcbn.net/no_second_life/2009/02/movable-type-twitter.html

だけどそのままでは味も素っ気もない。読み込みが終わるまで空欄のままだし、表示も白黒になってしまう。ある程度整形して表示するようにしてみた。

テンプレートの作成

例によって、このブログで使っている mt.Vicuna テーマにあわせた設定なのでよろしく。まずは、ウィジェットのテンプレートを作成する。コード内の“delphinus35”は各自のアカウント名に変えること。以下同様。

<dt>twitter updates</dt>
<dd>
    <div id="twitter-link-wrapper">
        <a href="http://twitter.com/delphinus35" id="twitter-link"
            class="small button orange">follow me on twitter</a>
    </div>
    <div id="twitter_div">
        <ul id="twitter_update_list">
            <li>読み込み中です……</li>
        </ul>
    </div>
</dd>

“follow me on Twitter”ボタンに設定している“small button orange”というクラスは「【MovableType】Twitter のつぶやきをサイドバーに表示する」で説明したものだ。きれいなボタンが簡単に作成できるのでおすすめ。

次にテンプレートモジュールを作成する。アカウント名は変えること。

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/delphinus35.json?callback=twitterCallback2&count=10"></script>
<script type="text/javascript" src="/js/minmax.js"></script>

2 行目の URL の最後にある“count=10”というのが表示するつぶやきの数になる。3 行目については後述。

このコードは、本当は上述のウィジェットに含めてしまってもいいのだが、Javascript はなるべくページの最後に読み込むようにした方がよい。“フッター”テンプレートに一行追加して、ページの読み込みが終わる直前にスクリプトを動作させる。

<div id="footer">
    <ul class="support">
        <li>Powered by <a href="http://www.sixapart.jp/movabletype/"><$mt:ProductName version="1"$></a></li>
        <li class="template"><a href="http://vicuna.jp/">vicuna CMS</a> - <a href="http://mt.vicuna.jp/" title="ver.2.3">Movable Type Template</a></li>
    </ul>
    <address>Copyright © <$mt:BlogName encode_html="1"$> All Rights Reserved.</address>
<$mt:Include module="Twitter Updates Javascript"$>
</div>

スタイルシートの設定

後はスタイルシートの設定だ。次の CSS を用意する。

/* Twitter Updates */
#twitter_update_list {
    width: 208px;
    max-height: 40em;
    overflow: scroll;
    overflow-x: hidden;
}
#twitter_update_list li {
    width: 161px;
    overflow-x: hidden;
    margin-bottom: 1em;
    padding: 0.5em;
    background-color: #cee4ae;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}
#twitter-link-wrapper {
    padding: 6px 5px 0 15px;
}
#twitter-link {
    display: block;
    width: 10em;
    margin-left: 1em;
}

今回は“max-height”プロパティを使って表示域の高さを可変にして、スクロールバーを付けてみた。だが、このプロパティは IE で使えない（またか……）。そこで、先ほどコードに書いた“minmax.js”の出番だ。

min-width、min-height、max-width、max-heightをIE6でも実装する方法 | CSS Lecture
http://www.css-lecture.com/log/css/038.html

doxdesk.com: software: minmax.js
http://www.doxdesk.com/software/js/minmax.html

かなり古い（2003 年と書いてあってビックリ）スクリプトだがきちんと動作する。これで IE でも何とか見れる体裁になった。角丸だけはどうしようもないけど……まあいいや。