小粋空間  -  a cheap joke and a play on words site

Twitterのリニューアルに伴い、公式Twitterボタン（旧ツイートボタン）の機能とデザインが変更されたようです。Twitterボタン作成ページもリニューアルされています。

新しい作成ページでは、これまでの「リンクを共有する」ボタンの他に「ハッシュタグ」「フォロー」「@ツイート」が作れるようになりました。

Twitterボタン

これにより、これまでブログに設置していた公式Twitterボタンのデザインも変わっています。

本エントリーではデザインを修正する方法をいくつか紹介します。レイアウトの崩れ具合によっては他の修正が必要かもしれませんので予めご了承ください。

１．ボックスタイプの幅を修正する（その1）

リニューアル前からブログなどに設定しているボックスタイプ（垂直タイプ）はリニューアル後に次のような表示になっています。

これを次のようにコンパクトなサイズに修正します。

修正するには次のCSSを利用します。

iframe.twitter-share-button {
    width: 65px!important;
}

デフォルトの幅は55px、高さは62pxになっているようです。ブラウザによって見え方が異なるかもしれないので、適切な値に適宜修正してください。

２．ボックスタイプの幅を修正する（その2）

もうひとつの方法として、Twitterボタンのマークアップに含まれる、「data-lang="ja"」を「data-lang="en"」に変更して英語表記にします。英語表記にすることで、さらに幅の縮小が可能です。

ブラウザによってテキストが見切れている場合、先程と同じセレクタで調整します。

iframe.twitter-share-button {
    width: 60px!important;
}

これで綺麗に表示されます。

３．水平タイプの幅を修正する

水平タイプの幅は130pxにひろがったようで、当ブログに設置している表示を見ると、右側に無駄な空白ができてました。

こちらも先程と同じセレクタで幅を調整します。

iframe.twitter-share-button {
    width: 105px!important;
}

105pxにするとこのようになります。

大量のツイートがあると、はみ出すかもしれませんが、9999までは大丈夫みたいです。というか、そもそも大量のツイートはないでしょう（笑）。

４．ボックスタイプと水平タイプを両方使っている場合

サイト内でボックスタイプと水平タイプを両方使っている場合、個別にスタイルを調整する必要があります。

ボックスタイプはclass属性に「twitter-count-vertical」水平タイプは「twitter-count-horizontal」が与えられるので、次のようにセレクタを指定します。

iframe.twitter-share-button.twitter-count-vertical {
    width: 65px!important;
}
iframe.twitter-share-button.twitter-count-horizontal {
    width: 105px!important;
}

「twitter-share-button」は省略しても大丈夫だと思います。

iframe.twitter-count-vertical {
    width: 65px!important;
}
iframe.twitter-count-horizontal {
    width: 105px!important;
}

５．作成ページでボックスタイプを作る

新しいTwitterボタン作成ページではボックスタイプを作るフォームがなくなっています。

ボックスタイプを作るには、Twitterボタンのマークアップに赤色の「data-count="vertical"」を追加します。

<a href="https://twitter.com/share"
  class="twitter-share-button"
  data-via="yujiro"
  data-lang="ja"
  data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

設置したあと、１項の対処を適宜行ってください。

もしかしたら今後ボックスタイプはサポートしなくなるかもしれません。

Movable TypeのTwitter公式アカウント@movabletypeについてのお知らせです。

Movable TypeのTwitter公式アカウント@movabletypeは、2009年に米国シックスアパートで取得されましたが、現在は日本シックスアパートがMovable Typeのアカウントを引き継いで運営しています。

で、現在のフォロワー数は130（2011年9月14日現在）と、かなり少ないです。

理由は、アカウントを引き継いだ際、Twitterの規約上、フォロワー数が「0」にリセットされてしまったためらしいです。フォローが切れてしまっていることに気がついていないMTユーザーも少なくないのではないでしょうか。

ということで、フォローが切れたMTユーザーの皆様、Movable TypeのTwitter公式アカウント@movabletypeを再度フォローしましょう。フォローしていなかった方もこの機会にフォローしてみてはいかがでしょうか。

ちなみに日英両言語で運営しています。

TwitterのユーザータイムラインのフィードURL取得用ツールを作成しました。よければご活用ください。

TwitterユーザータイムラインフィードURL取得ツール

１．作成の経緯

私の場合、Twitterの特定ユーザーのタイムラインを追う場合、ユーザータイムラインのフィードURLをフィードリーダー（Googleリーダー）に登録しています。

新画面でTwitterを始めた方は存在すらご存知ないと思われますが、旧Twitter画面にはRSSフィードのリンクが掲載されていました。新画面になってからフィードリンクが掲載されなくなりました。

旧画面（表示されていませんがフィードリンクは右下に掲載）

新画面

ちなみに、次の2つのAPIを叩けばフィードURLは取得できます。

http://api.twitter.com/1/users/show/アカウント名.xml

上記で取得したデータにあるidを次のURLの「id」に設定

http://api.twitter.com/1/statuses/user_timeline.rss?user=id

が、ちょっと面倒です。ということで自分用に簡単にフィードURLを取得できるツールを作ってみました。

２．機能

ツールの名前のとおり、テキストフィールドにTwitterのユーザー名を入力して「Get」をクリックすれば、そのユーザーのタイムラインを表示するフィードURLを返却します。

私のユーザー名は「yujiro」なので、次のようなフィード用URLを返却します。

返却されたURLをコピーしてGoogleリーダーなどに登録すれば、特定ユーザーのタイムラインをフィードリーダーで読むことができます。

ちなみにXMLをサポートしているブラウザであれば、表示されたリンクをクリックするとフィードをそのまま表示します。下のスクリーンショットはFirefox5で表示した例です。

３．注意事項

何人かのユーザーを実験したところ、ブラウザで表示できてもGoogleリーダーで登録エラーになる場合がありました（原因不明）。

以下のURLで登録成功する場合もあるので、「id」の部分を取得したURLの数字に置き換えて登録してみてください。

http://twitter.com/statuses/user_timeline/id.rss

また、取得URLはRSS形式に固定しています。Atom形式で取得したい場合は、以下の赤色部分を「atom」に変更してください。

http://api.twitter.com/1/statuses/user_timeline.rss?user=xxxxxxxx

Twitterの公式ツイートボタンのページで作成したボタン（下）を、ブログなどに表示しているサイトが増えてきました。当サイトも表示しています。公式ツイートボタンの設置方法は「WordPress/Movable Typeに公式ツイートボタンを設置する」で詳しく紹介しています。

ところで、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなる場合があります。

本エントリーでは、問題点の簡単な解説と、設置したTwitterの公式ツイートボタンを(X)HTML validにする方法を紹介します。

１．問題点

公式ツイートボタンのページでは、公式ツイートボタンを表示するために、次のようなコードを生成します。

このコードを埋め込んだ、DOCTYPEがXHTML1.0のページをThe W3C Markup Validation Serviceでチェックすると、次のようなエラーが表示されます。

Another HTML-lint gatewayでも、次のようなエラーになります。

エラーになる理由は、貼り付けたコードのa要素に含まれる「data-*」という属性が、不明な属性として扱われるためです。

<a href="http://twitter.com/share"
 class="twitter-share-button"
 data-count="vertical"
 data-via="yujiro"
 data-lang="ja">Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

この「data-*」という属性は、HTML5のCustom Data Attributeに該当します。つまり、HTML5ではvalidとなりますが、それ以外のDOCTYPEではエラーとなります。

２．対処方法

HTML5以外のページで公式ツイートボタンのコードを埋め込む場合、コードに含まれている「data-*」属性をすべて削除し、その属性値をa要素のhref属性のクエリーに設定し直すことで、(X)HTML validになり、変更前と同じボタンを表示することができます。変更前後のサンプルは３項をご覧ください。

「data-*」属性名とクエリーのマッピングは下表の通りです。Movable Typeのテンプレートタグを設定する場合は、escapeモディファイアを使って出力内容をURLエンコードします。

クエリー（あるいは属性名）とボタンの機能の対応は次の通りです。

３．対処サンプル

２項のマッピング表に従って変換したサンプルを示します。

変換前

<a href="http://twitter.com/share"
 class="twitter-share-button"
 data-count="vertical"
 data-via="yujiro"
 data-lang="ja">Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

変換後

<a href="http://twitter.com/share?count=vertical&amp;via=yujiro&amp;lang=ja"
 class="twitter-share-button">Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

４．参考

参考サイトは下記です。

• dev.twitter.com - Tweet Buton
• ハブろぐ - HTML5では、data-* の書式でカスタム属性 ( Custom Data Attribute )を定義できるらしい
• Publickey - HTML5のCustom Data Attributeは、Microdataよりも気軽にデータを埋め込める

Twitterの公式ツイートボタンをWordPressやMovable Typeに設置する方法を紹介します。当サイトでも次のように設置してみることにしました。

公式ツイートボタンは、ブログなどの記事に生成したコードを貼り付けることで、記事のツイートなどが簡単に行えるようにするためのものです。

数字の部分をクリックすると、該当記事の検索結果画面を表示します。また、「ツイートする」をクリックすれば、ポストに記事タイトルとユーザー名が埋め込まれたツイート画面が表示されます。

ということで今更な感がありますが、設置方法を紹介します。ツイートボタンは公式ツイートボタンのページで作成します。

公式ツイートボタンのページ

１．ボタンの形式選択

まず、ボタンの形式を選択します。

選択した形式は、ブログにコードに含まれるa要素のクラス属性「data-count」の値となります。それぞれの値は次の通りです。

• 垂直方向にカウント数を表示 ：vertical
• 水平方向にカウント数を表示：horizontal
• カウント数の表示なし：none

２．ツイート内テキストの形式選択

ツイートボタンを押してツイートするときに、ポストに埋め込みたいテキストを設定します。通常は、ツイートボタンを設置した記事の記事タイトルなどを表示するようにします。

メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを（記事毎に）貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_title(); ?>を設定します。

Movable Typeの場合、<$mt:EntryTitle$>を設定します。

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのタイトル。」を選択すれば、ツイート時にtitle要素の内容をそのまま埋め込みます。title要素の内容を使いたくない場合は前述のテンプレートタグを設定しても構いません。

設定した内容は、テンプレートタグのまま、クラス属性「data-text」の値となります。「ボタンが表示されるページのタイトル。」を選択したときは、クラス属性「data-text」は設定されません。

４．URLの設定

ツイートボタンを押してツイートするときに、ポストに埋め込みたいURLを設定します。通常は、ツイートボタンを設置した記事のURLを表示するようにします。URLは、TwitterのURL短縮サービスt.coによって自動的に短縮表示されます。

３項と同様、メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを（記事毎に）貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_permalink(); ?>を設定します。

Movable Typeの場合、<$mt:EntryPermalink$>を設定します。

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのURL」を選択すれば、ツイート時にページのURLをそのまま埋め込みます。前述のテンプレートタグを設定しても構いません。

選択した形式は、コードに含まれるa要素のクラス属性「data-url」の値となります。「ボタンが表示されるページのURL」を選択したときは、クラス属性「data-url」は設定されません。

５．言語選択

表示するツイートボタンの言語を選択します。

選択言語によってツイートボタンの表示が変わります。選択した形式は、コードに含まれるa要素のクラス属性「data-lang」の値となります。それぞれの値は次の通りです。

• 日本語：ja
• フランス：fr
• ドイツ：de
• スペイン：es

「英語」を選択した場合は、クラス属性「data-lang」は設定されません。

６．フォローユーザーの設定

ポストに、フォローを促すユーザー名を設定します。設定したユーザー名は「via @ユーザー名」と表示されます。

例えば、次のように設定しておけば、

ツイート後の画面で次のようなフォローを促すメッセージが表示されます。

1に設定したデータは、コードに含まれるa要素のクラス属性「data-via」の値となります。2の「関連アカウント」に設定したデータは、クラス属性「data-related」の値となります（関連アカウントと関連アカウントの説明はコロンで区切られます）。

７．コード

１～６項までを設定すれば、画面の一番下にツイートボタン生成用のコードが表示されるので、ブログの任意の位置に埋め込みます。

WordPressの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Movable Typeの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<$mt:EntryPermalink$>"
  data-text="<$mt:EntryTitle$>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Twitterの検索エンジン、Topsyが提供するTopsy Retweet Button for Web Sitesを使って、ブログなどの記事にRT数とretweetボタン（Topsy Retweet Button）を表示する方法を紹介します。

このブログでも各記事ページの右上に表示しています（2010年6月現在）。

１．Topsy Retweet Buttonの機能

数字の部分をクリックすれば、記事のRT一覧を表示します。

「retweet」をクリックすれば、その記事のretweet用の記事タイトル・URLをTwitterのページに表示します。

以下、一般的な設定方法と、Movable Typeに設置する場合の設定例の2つを紹介します。

２．基本設定

まず、次のスクリプトを、<head>～</head>の間に設定します。

<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

次に、各記事ページの任意の位置に以下のスクリプトを設定します。class名が「topsy_widget_data」のdiv要素の中にHTMLコメントをつけたJSONデータ形式で、url（記事のURL）とtitle（記事のタイトル）を設定します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事のタイトル"
    }
--></div>

Movable Type の場合は、ブログ記事アーカイブテンプレートに次の内容で設定します。

<div class="topsy_widget_data"><!--
    {
        "url": "<mt:EntryPermalink />",
        "title": "<mt:EntryTitle />"
    }
--></div>

このような表示になります。

３．RTをクリックしたときのユーザ名を変更する

２項で設定したボタンの「retweet」をクリックすると、Twitterに次のようなRTが表示されます。

ただし、これではユーザー名が「@TopsyRT」になっているので、これを自ユーザー名に変更します。ユーザー名を変更するには、JSONデータに「nick」を追加します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名"
    }
--></div>

「@yujiro」を表示させたい場合は

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "yujiro"
    }
--></div>

とします。これで次のような表示に変更されます。

４．ボタンのスタイルを変更する

ボタンを大きくする場合は、JSONデータに「style」を追加します。値は「big」です。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big"
    }
--></div>

これで次のようなスタイルに変更されます。

５．ボタンのテーマを変更する

ボタンのテーマ（配色）を変更するには、JSONデータに「theme」を追加します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big",
        "theme": "テーマ名"
    }
--></div>

テーマ名は「Topsy Retweet Button for Web Sites」にある次の一覧を参考にしてください。

６．アーカイブページに表示する

アーカイブページなど、1つのページに複数の記事があり、その記事ごとにボタンを表示する場合、<head>～</head>の間に次のように記述することで、nick、style、themeをひとまとめに定義することができます。変数名は変更しないでそのまま使ってください。

<script type="text/javascript" id="topsy_global_settings">
     var topsy_theme = "テーマ名";
     var topsy_style = "big";
     var topsy_nick = "Twitterのユーザ名";
</script>

こうしておけば、記事別の設定は次の内容だけでOKです。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル"
    }
--></div>

７．注意事項

JSONデータの、途中のデータの末尾にカンマを付け忘れると正常に表示されないので注意しましょう。また、最後のデータにカンマをつけるとIEで正常に動作しません。

2010.06.17
IEで正常に動作するよう、各サンプルを修正し、７項の記述を修正しました。

Twitterの1日分のツイートをブログに投稿してくれる、loudtwitterの紹介です。以下、設定方法です。設定内容は後で変更することができます。

loudtwitterのページにアクセスし、ブログのURLを入力して、「Yes, this is my blog」をクリックします。

文章の右下にある「signup!」のリンクをクリックします。

「Atom API endpoint url:」にAtom APIのエンドポイントURIを入力します。Movable Typeであれば、

http://user-domain/mt/mt-atom.cgi/weblog/blog_id=1

のようになります。キャプチャ画面は「weblog」の部分が「1.0」になっていますがWSSE認証が必要となるので、レガシーなエンドポイントの「weblog」の方がよいかもしれません。

また、数字の部分はブログIDになるので、投稿したいブログのブログIDを設定します。「Username」「Password」は、Atom APIを利用するユーザーとパスワードを設定します。Movable Typeであれば、パスワードは、ユーザー情報編集画面にある「Webサービスパスワード」が該当します。

「Twitter name:」に投稿したいTwitterのユーザー名を入力します。

各種情報を設定します。設定項目の意味は次の通りです。

• your name: 名前を入力します（必須ではありません）。
• post time: Twitterのツイートをブログに投稿する時間を設定します。
• post title: 投稿時のブログ記事タイトルを設定します。
• Style of post: 投稿したときのツイートのスタイルです。「Bullet list」はul要素/li要素、「Paragraph」はp要素で投稿します。チェックボックスで各情報の表示・非表示を決めます。
• text to add at the beginning of the post: ブログ記事の先頭に挿入するテキストがあれば設定します。
• text to add at the end of the post: ブログ記事の最後に挿入するテキストがあれば設定します。

メールアドレスとログイン時のパスワードを入力します。OpenIDでログインしたい場合は、右側の「click-here」をクリックします。

OpenIDでログインする場合の設定画面です。入力は必須ではありません。

設定したメールアドレスに確認メールが届くので、そこに記述されたactivation codeを次の画面に入力するか、メールに表示されたURLをクリックします。

これで設定完了です。「Try it out, now」のリンクをクリックすれば、テスト投稿を行う画面に遷移するので、すぐに確認することができるようです。

2007年に取得していた Twitter（ツイッター）のアカウントで、今年の7月からようやくつぶやき始め、先日 1000 フォロワーになりました。フォローくださった皆さん、ありがとうございます。

yujiro

Twitter のプロフィールにはこのブログのことしか書いていないので、このブログをやっているおかげでフォローしてくれる方が大勢いらっしゃると思います。

ということで、フォローしてもらう秘訣とかアドバイスはできないのですが、フォローを頂いたときにフォロー返しする・しないを決めるための私なりのポイントを紹介します。参考になれば幸いです。

つぶやき

フォローしてくれた方のつぶやきをみて、日常のつぶやきが普通に並んでいれば即フォローしています。始めたばっかりの方で、つぶやきが2つか3つあれば多分フォローしていると思います。全然つぶやきがない場合はフォローはしていません。

つまり、Twitter を始めてフォローを開始するときには、多少自分のつぶやきが並んでいる方がフォローしてもらいやすいかもしれません。

アイコン

つぶやきの内容ほど重要ではありませんが、「このアイコンがタイムラインに表示されているとちょっと…」といったもの以外は基本的にフォローしています。

ちなみに、私のアイコンは猫を使っているのですが、このアイコンでフォローしてくれている方もいらっしゃるかもしれません（他のアイコンに変えたときにフォローが減ったとか、猫のリストを作っている方もいるので）。

ブロフィール

Web 制作関係のプロフィールが書かれている場合は即フォローしています。MT や WordPress 関連のつぶやきがあるとなおさら反応早いです（TL をみたときにそのつぶやきが視界に入っていればですが）。

そういう意味では、プロフィールには色々と書いておいた方がフォローしてもらいやすいかもしれません。

Movalbe Type のブログ記事に Twitter の Retweet 用のリンクを表示する「ReTweet プラグイン」を紹介します。例えば「Movable Type 4.31 リリース」の記事にある Retweet 用のリンクをクリックすれば、次のような画面に移動します。

ここでは、プラグイン配布元の「BSDあれこれ」さんの記事を参考に、以下カスタマイズ方法を紹介します。

１．プラグインのダウンロード

下記のページの後方にある「ReTweetMaker 0.2 (WWW::Shorten::Bitlyなし）」のすぐ下にあるリンクからプラグインアーカイブをダウンロードし、任意のフォルダに保存してください。

BSDあれこれ - ReTweetをプラグイン対応アプリケーションReTweetMaker Movable type用

２．プラグインのインストール

プラグインアーカイブを解凍し、それぞれのファイルを次のようにアップロードしてください。

• retweetmaker.cgi をアプリケーションディレクトリにアップロードし、ファイルのパーミッションに実行権を付与
• lib フォルダ配下の ReTweetMaker.pm だけをアプリケーションディレクトリの lib にアップロード
• plugins フォルダ配下の ReTweet フォルダを丸ごと plugins ディレクトリにアップロード

ブログ管理画面より「システム」→「プラグイン」でプラグイン一覧を表示し、次のように表示されればOKです。

３．プラグインの設定

ブログ管理画面（システム管理画面ではありません）の「ツール」→「プラグイン」でプラグイン一覧画面を表示し、「Retweet」→「設定」をクリックして、プラグインの設定を行ないます。

設定項目の意味はそれぞれ次の通りです。

Your Twitter name

Twitter のユーザー名

Your bit.ly name

bit.ly のユーザー名（アカウントを持っていない場合はbit.lyの右上にある Sign Up をクリックして、次の画面（下）でアカウントを作成してください）

Your bit.ly API

bit.ly の API Key を設定します（API Key は bit.ly にサインイン後、画面右上の account をクリックした次の画面（下）に表示されます）

参考：bit.lyサインアップ画面

参考：bit.ly API Key

４．動作確認

ここまでの設定で、プラグインが正常に動作する（=記事冒頭の画面に遷移する）ことを確認します（必須の作業ではありません）。

Twitter にログイン後、アプリケーションディレクトリにアップロードした retweetmaker.cgi に、任意のブログ記事番号（公開されているもの）を付与した URL でアクセスします。

http://<アプリケーションディレクトリURL>/retweetmaker.cgi/<ブログ記事ID>

当サイトの例：

http://www.koikikukan.com/cgi-bin/koikikukan/retweetmaker.cgi/2822

アクセスした後、Twitter の力フォームに、

RT @<Twitterのユーザー名> "<ブログ記事タイトル>" <bit.lyのURL>

が表示されればOKです。

私の場合は、最初の設定で「bit.ly のURL」が表示されなかったので、API Key を一度Reset したら正常に表示されるようになりました。

５．テンプレートの修正

ブログ記事ページに Retweet 用リンクを表示するため、テンプレートの修正を行ないます。

「既定のブログ」であれば、ブログ記事管理画面の「デザイン」→「テンプレート」をクリックし、アーカイブテンプレートの「ブログ記事」をクリックし、青色の部分を追加します。

...前略...
        <span class="separator">|</span> <a href="<$mt:EntryPermalink$>#trackbacks"><$mt:EntryTrackbackCount singular="トラックバック(1)" plural="トラックバック(#)" none="トラックバック(0)"$></a>
</mt:IfPingsActive>
| <a href="<mt:CGIPath />retweetmaker.cgi/<mt:EntryID />" target="_blank" title="この記事をretweetする">ReTweet This!</a>
    </div>
</div>
...後略...

これで次のように表示されます。

あとはブログ記事を再構築すれば完成です。メインページやアーカイブページに表示する場合も同じテンプレートタグで大丈夫です。

ネットで大盛り上がりの Twitter について、Google トレンドでどのくらい検索数の推移があったのか、調べてみました。

本題に入る前の宣伝で恐縮ですが、私もつぶやいてますのでフォローお待ちしています。

http://twitter.com/yujiro

１．全世界のTwitter

まずは全世界です。掲載しているグラフはクリックしたら拡大し、もう一度クリックすると元に戻ります。拡大した画像はドラッグすることもできます（以下同様）。

[全世界]

Twitter が始まったのは2006年7月ですが、2007年3月、米国で開催されたイベントSouth by Southwest（SXSW）でのブログ関連の賞の受賞をきっかけに注目されるようになり、2007年の前半から検索が上昇し始めているのが分かります。

そして、今年初めからのユーザーの増加（米国発のマイクロブログサービス「Twitter」の利用者が日本でも順調に増加）とともに、2009年前半から急上昇しているのが分かります。

旗が立っているところのニュースは次のようになっています。

全世界で調べて国内のニュースしか表示されないのは設定不足でしょうか（http://www.google.com/trends で調べても同じ結果でしたが、「その他のニュース記事」をクリックすると海外のニュースも表示されました）。

２．国内のTwitter

次は日本です。

[日本]

全世界とほぼ同じカーブを描いてますが、2007年の第2四半期に検索数がググッと上がるも、一旦落ち着いてしまったのが分かります。また、この初期のヒットに乗じて Twitter 関連書籍が何冊か出版されました。

また、グラフの推移が全世界より1～2ヶ月ほど遅れていることも分かります。

３．地域別のTwitter

地域別も調べてみました。

[東京]

東京は日本の検索数を反映しているといっても過言ではないでしょう。

[大阪]

大阪も東京に近い推移を示していますが、検索の有無の時期がはっきりと分かれています。大阪人気質なんでしょうか（冗談です）。

以下、グラフが生成できた都道府県をずらっと並べました。検索ボリュームが不足しているためか、多くの地域では東京のような2007年からの検索数は出ておらず、ここ最近の流行でようやく上昇してきているのが如実に分かります。

個人的には千葉県だけ大都市と肩を並べて2007年に突出しているのが特筆すべき点と思います。

[北海道]

[宮城]

[群馬]

[茨城]

[千葉]

[埼玉]

[神奈川]

[長野]

[新潟]

[静岡]

[愛知]

[京都]

[兵庫]

[広島]

[福岡]

Twitter!―Twitter APIガイドブック（1,995円）

Twitter!―Twitter APIガイドブック 九天社 2007-09 売り上げランキング : 208452 Amazonで詳しく見る by G-Tools

twitterコミュニケーション・バイブル（1,260円）

twitterコミュニケーション・バイブル 秀和システム 2007-11 売り上げランキング : 107511 Amazonで詳しく見る by G-Tools

Twitter活用ガイド

Twitter活用ガイド 河出書房新社 2008-02 売り上げランキング : 49647 Amazonで詳しく見る by G-Tools

Twitterの本

Twitterの本 インプレスジャパン 2009-02-26 売り上げランキング : 107979 Amazonで詳しく見る by G-Tools

Twitter を始めました。

といっても、Twitter がローンチされたときにアカウントだけ取得して、書籍のテスト用などに使ってました。ということで、フォローお待ちしています。

とりあえず、Twitterfeed を使って、当ブログのエントリーを投稿する設定を行ってみました（下）。

Twitterfeed は、ブログ等のフィードを取得して、Twitterに更新情報をポストしてくれるサービスです。

Twitter は初心者なのでよく知りませんが、Twitterfeed は最近リニューアルされたようで、リニューアル後から動作が不安定になっているようです。また、OpenID よりメールアドレスでのサインアップの方が安定しているという記事もあったので、以下、メールアドレスを使った設定方法を紹介します。

Twitterfeed のページにある「Register Now」をクリック。

メールアドレスとパスワードを入力して「Create Account」をクリック。

次の画面でフィードのURLを設定します。Step1の「Create new feed to」で「twitter」を選択して、「Connect your feed to your Twitter Account」をクリックします（この段階ではStep2のテキストフィールドには文字を入力できません）。

Twitterの画面に移動するので「Allow」をクリック（Twitter にログインしていない場合はログイン画面が表示されると思います）。

次の画面が表示されるのでしばらく待ちます。

元の画面に戻って「You have successfully linked the twitter account 'xxx' to this feed.」が表示されれば、Twitter へのポスト設定の事前準備はOKです。

Step2で「Feed Name」と「RSS Feed URL」を入力します。

テキストフィールド右にある「test rss feed」をクリックすればフィードの正常性をテストでき、OKであれば「Feed parsed OK」が表示されます。

「Advanced Settings」をクリックすれば詳細設定が行なえるようです。設定は後で変更することができます。設定が完了したら「Create Feed」をクリックします。

これで登録されました。右側の「Edit Feed」をクリックすれば詳細設定を変更できます。