Twitter の リストウィジェット を、Google サイト にガジェットとして貼り付ける

1. Twitter のリストをサイトに埋め込みたい

Twitter / @SoftBank/sb2009
via kwout

Twitter では、特定のユーザをまとめたリストを作成できる。作成したリストは、公開可能。

この機能を上手く利用しているのがソフトバンクの Twitter 。

• cf. [N] ソフトバンク新製品発表会でツイッター・リスト機能の便利な使い方を見た！

Twitter / @SoftBank/sb2009 を見ると、複数のアカウントでキャラクターを使い分け、文章を読みやすくしている。

このようなリスト表示は、仲間内でサイトを運営している場合に便利。メンバーをリストに登録し、それをサイトに埋め込みたい。

「Twitter、「リスト」機能の可能性を示す新ウィジェットを公開」 によると

Twitterが発表したList Widgetは、こうしたものがあれば良いのにと、まさに思っていたものだ。これを使えばお気に入りのリストをブログに貼り付けることができる。自分で作ったリストはもちろん、人の作ったリスト（公開リストに限る）でも使うことができるのだ。

 

2. Twitter でリストウィジェットの作成

前提 : Twitter でリストを作成していること。

List Widget に直接アクセス。もしくは、設定画面から辿りたい場合は以下の手順。

Twitter における、

• 設定 > プロフィール > Web

の `あなたのWEBサイトにもTwitterを表示させよう’ をクリック。

自分のサイト > List Widget を選択。

ユーザ名を入力して、隣の find lists ボタンを押す。

List Name を選択。

下部の Test settings ボタンを押すと、右側に表示したいリストが表示される。

後は左のメニューにある項目を適当に設定し、コードを取得し、サイトに貼り付ける。

※ サイズにおいて、横幅の auto width にチェックを入れておくと、幅一杯に広がってくれるので、後の扱いが楽かも。

 

3. Google Gadget Editor によるガジェットの作成

上記の手順で取得したコードは、JavaScript で記述されている。これを Google サイトに貼り付けたい。しかし、直接 JavaScript のコードを、Google サイトに埋め込むことはできない。そのため、JavaScript のコードを、ガジェットにする必要がある。

Gadgets API - Google Code によると、

ガジェットは、HTML と JavaScript で作成されたシンプルなアプリケーションで、ウェブページや他のアプリケーションに埋め込むことができます。…

作成したガジェットは、iGoogle、Google マップ、orkut など、多数のサイトや製品上で動作します。

 

Google Gadget Editor

Google Gadget Editor (GGE) を使うと、ガジェットを簡単に作成できる。

Google Gadget Editor (GGE)  にアクセスすると Hello, world! の雛形が表示される。

Twitter で作成したリストウィジェットから、ガジェットを作成するには、

Hello, world

と書かれた部分を、List Widget で取得したコードで置き換える。

ModulePrefes の tilte 属性の値で、ガジェットのタイトルも変更しておく。

エディタ上部の Preview タブに切り替えると、twitter のリストウィジェットが Google のガジェットとして表示される。

エディタ左上の File > Save で、作成したガジェットを保存。予め Google アカウントでログンインしておくこと。これにより作成したガジェットを Goolge がホストしてくれるようだ。

エディタ右隅のガジェットの名前をクリックして URL をコピーしておく。

 

4. Google サイトにガジェットを挿入

Google サイトで、ページの編集モードにして、メニューより

• 「挿入 > その他のガジェット」

を選択。

左側のメニューにある 「URL を指定してガジェットを追加」 を選択。右側の URL を入力するフィールドに、先ほどコピーしておいたガジェットの URL を入力して追加。

ガジェットのプロパティで 「高さ」 を指定する。おおよその目安として、Twitter のリストウジェットで指定した高さに +100 かな。

※ 予めガジェットで高さの初期設定をしたい場合は、「ガジェットの高さの管理」を参照。

 

参考サイト

• Gadgets API - Google Code
  • Google Gadget Editor (GGE) ： ガジェットを作成するためのエディタ
• Building Gadgets for Google Sites (Unofficial Google Sites Help)
• iGoogle ガジェットの作り方 : まずは作ってみる - WebOS Goodies