だるろぐ

明日できることは、今日しない。

Twitter の埋め込みタイムラインを WebMatrix で利用する

ASP.net Web Pages WebMatrix Twitter

f:id:daruyanagi:20120907205420p:plain

サイトの上に簡単にTwitterのタイムラインを表示できるツール「埋め込みタイムライン」の提供を始めました。ブログの隣に表示したり、＃ハッシュタグを使ったイベントのページに表示したり、スポーツの試合ページに参加選手のリストを使って選手のツイートを表示するなど、サイト上にリアルタイムのツイートを加えることができます。

http://blog.jp.twitter.com/2012/09/blog-post.html

f:id:daruyanagi:20120907205552p:plain

さっそく WebMatrix 2 RC版（！）で試してみよう。Login on Twitter でウィジェットを作って cshtml へ貼り付けてみる。

ちょっとした注意

f:id:daruyanagi:20120907205557p:plain

ガッデム／(^o^)＼

貼りつけたスクリプトに @ が含まれているときは注意だね。 Razor はこれを処理すべき変数・メソッドと解釈するので、当然エラーになる。 @ をそのまま出力したい場合は、

@@daruyanagi    // -> "@daruyanagi"

と @ を重ねて書けばいい。

もちろんヘルパーにしてみる……

と思ったけれど、結局わざわざウィジェットページへ行かなければならないので、ヘルパーにしてもあまり美味しくないと思った。

# ~/App_Code/Twitter.EmbededTimeline.chtml

@helper GetHtml(
    string id, string url, string text = null,
    int? width = null, int? height = null, string lang = null,
    string theme = null, string link_color = null,
    string[] related = null, string aria_polite = null)
{
    if (string.IsNullOrEmpty(text))
    {
        // URL を解析して適当なテキストを生成する処理
        // たとえば、
        // twitter.com/daruyanagi -> @daruyanagi からのツイート
    }

    <a class="twitter-timeline" href="@url"
       data-widget-id="@id"
       data-theme="@theme"
       data-link-color=@link_color
       data-related="@string.Join(", @related)"
       data-aria-polite="@aria_polite"
       width="@width" height="@height" lang="@lang">@text</a>
}

こんな感じで書いておいて、

<!DOCTYPE html>

<html lang="ja">
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>マイ サイトのタイトル</title>

        // これを挿入しておく
        // Assets か RenderSection() でやるとよいけどこれはまた後ほど
        <script id="twitter-wjs"
                src="//platform.twitter.com/widgets.js"></script>
    </head>
    <body>
        @Twitter_EmbededTimeline.GetHtml(
            "244022447123333120",
            @"http://twitter.com/daruyanagi")
        @Twitter_EmbededTimeline.GetHtml(
            "244027379142492160",
            @"http://twitter.com/daruyanagi/favorites")
        @Twitter_EmbededTimeline.GetHtml(
            "244027809108987904",
            @"http://twitter.com/search?q=#corgi")
    </body>
</html>

と使うんだけど、まぁ、結構微妙だよね。ウィジェット ID と URL の最低2つをコピってこなければならない。それだったら、何も考えずに*1吐かれた公式のコードを張ったほうがマシだ。

f:id:daruyanagi:20120907212725p:plain

試しにウィジェット ID を使いまわしていろんなパラメーターを入れると、 IE がなにかお世話をしてくれるみたい。このメッセージは初めてみたかも。

おまけ

ちなみに Twitter.EmbededTimeline.chtml のクラス名は、 . が _ に置き換えられて Twitter_EmbededTimeline になる。Visual Studio なんかの IntelliSense でみてみればわかるけど、これはほかの WebPage クラス（cshtml ファイル）でも同じみたい。

@Twitter_EmbededTimeline.GetHtml()

これをちゃんと（？）

@Twitter.EmbededTimeline.GetHtml()

みたいに呼びたい場合は、 ~/App_Code/Twitter/EmbededTimeline.chtml ってな感じにサブフォルダーへ分けてしまえば OK 。一手間かかるからちょっと面倒だけどね。

<?xml version="1.0"?>
<configuration>
    <system.web>
      <compilation>
         <codeSubDirectories>
           <add directoryName="Twitter"/>
         </codeSubDirectories>
      </compilation>
   </system.web>
</configuration>

試してはないけど、こんな感じで動くんじゃないかな。

*1:@ のエスケープはしなきゃだけど