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

Google Sites における HTML の不要なタグや属性を一括で削除 - 正規表現を使って

1. フォントの装飾だけ取り除きたい

Google Sites は、Google ドキュメントのように文字に色を付けたり、サイズを変更することが簡単にできる。

しかし、お手軽さが災いし、文字の装飾を繰り返すと、元の状態に戻したくても修正するのが面倒になる。(+_+)

メニューより、

「書式 > 書式をクリア」

により、文字の装飾を削除することはできる。しかし、「見出し」や「リスト」を適用した段落設定も消えてしまう。

 

2. エディタを使い正規表現で一括削除

Google Site では、ツールバーの右端にある

• 「HTML ソースを編集」ボタン

を選択し、フォントの装飾情報を直接削除することができる。しかし、一々手作業で削除するのは気が遠くなる。そこで、正規表現で文字列を置換できるエディタを使い、フォント情報を削除することにした。

ここではエディタとして Aptana を利用する。

 

a. Firefox のアドオン It’s All Text! で HTML を編集

Firefox のアドオン It's All Text! を使うと、ブラウザのテキストエリアをエディタで編集できる。

• cf. Blogger の投稿した記事を編集

It's All Text! をインストールし、エディタを Aptana に設定した。

次に、Google Sites で、メニューボタンの右端にある HTML を編集するボタンをクリック。

It’s All Text! がインストールされていると、右端に「編集」ボタンが表示される。これを右クリックし、

「.html」として編集

を選択する。

 

b. 正規表現で置換

Aptana で編集対象の HTML が開かれたら、メニューより

• Edit > Find/Replace

を選択する (Ctrl + F)。

ダイアログの Options で Regular expressions にチェックを入れる。 

例えば、 HTML における style 属性と Font タグを削除したいとする。

style 属性を正規表現で指定するには、

style=(.+?)"

Font タグを指定するには、

<font(.+?)>|</font>

• cf. JavaScript で正規表現 の最左最短一致, Eclipse で正規表現によるテキストの置換

よって、Find: フィールドには

style=(.+?)"|<font(.+?)>|</font>

と指定すれば良い。Replace With: フィールドは空にしておく。

後は、Replace/Find ボタンで確認しながら除去する。

ついでに、メニューより Edit > Format を適用しておくと、見やすくなる。

Aptana で編集したファイルを保存し、Google Site に戻り、HTML が更新されたのを確認したら、更新ボタンを押す。

Google map を範囲指定して、Google Sites に埋め込む

1. Google map を Google Sites に埋め込みたい

Google map で マイマップ を作成し、いくつかの地点にアイコンを付けた。このマップの中の一部の範囲を限定して Google Sites に貼り付けたい。

 

2. マイマップの全体を表示させる場合

マップ全体を埋め込みたい場合は、Google Sites の編集モードにおいて、

• メニューより「挿入 > マップ」を選択し、

「マイマップ」において作成したマップを名前で選択する。

 

3. 特定の範囲だけ表示させたい場合

マップの一部のみ表示させたい場合は、予め Google Map で範囲をしてしておく。

例えば、下図の駅の周辺だけを表示させたいとする。

Google map 上で マイマップ を表示し、表示させたい範囲を拡大する。地図右上の「リンク」をクリックし URL をコピーする。

Google Sites の編集モードにおいて、メニューより「挿入 > マップ」を選択。「マップ」において、下部にあるテキストフィールドに先ほどコピーしたマップの URL を貼り付ける。

Google Sites をウェブマスターツールに登録

友人も Google Sites を使ってサイトを作ってみた。しかし、一ヶ月以上経っても Google のインデックスに登録される気配がない。おかしいなぁ (@_@;) Google に認識されるようにウェブマスターツールを使ってみようか。

 

サイトの登録

ウェブマスターツールを使う前に、まずは基本の Google に URL を追加 。

 

ウェブマスター ツール

Google Sites で作成されたサイトの確認 - ウェブマスター向けヘルプ センター の説明に従った。

ウェブマスター ツール において、Google Sites で作成したサイトの URL を入力し、「サイトを追加」ボタンを押す。

「サイトを確認」において、セレクトボックスより「メタ タグを追加」を選択し、表示されたメタタグをコピー。

 

 Google Sites において、 Site settings > Other Stuff の「Google Webmaster Tools verification」に上記でコピーしたメタタグを入力し、設定を保存する。

 

ウェブマスター ツールにおいて、「確認」ボタンを押して、Google Sites を確認する。

Google Sites で Google マップを埋め込む

Google Sites ではガジェットをページに埋め込むことができる。

1. edit page ボタンを押す
2. Insert > More… を選択

「公式 Google ガジェット」として、「地図」があったので、Google マップを表示させるために利用しようと思ったが、設定しても地図が表示されなかった。 (+_+)

Google Sites Help Group で map について調べたら、Putting Google map on the site via api + .js - How-to for End Users でマップを埋め込んでいる方がいた。

 

方法

以下、Inserting custom gadgets in Google Sites. (grinsted) の説明に従った。まず、上記に書いたように Google Sites においてガジェットを埋め込む手順を行う。 「URL を指定して追加」のリンクをクリックすると、URL を入力するためのフィールドが表示されるので、以下の URL を入力する。

http://grinsted.googlepages.com/flexiblegadget.xml

 

Setup your gadget ダイアログが表示されるので、表示したい地図の iframe url を入力して OK ボタンを押す。

 

ただし、 ifarme url は次のように取得した。

まず、Firefox 上で Google マップを右クリックしたときに、コンテキストメニューが表示されるように設定を変更。「ツール > オプション > コンテンツ」 において、JavaScritpt の「詳細設定」のボタンを押す。「コンテキストメニューを無効化または変更する」のチェックをはずす。

 

Google マップにおいて、表示したい位置を特定する。地図の右上、「リンク」をクリックし、「埋め込み地図のカスタマイズとプレビュー」を選択。

 

表示された地図の上で右クリック > 「このフレーム > このフレームだけを表示」を選択する。これにより地図だけがウィンドウいっぱいに表示されるので、このときの URL をコピーし、上記の iframe url に設定する。

追記(2008.8.24) : 上記の「このフレーム > このフレームだけを表示」では URL が表示されなくなってしまった。そこで「このフレーム > フレームを新しいウィンドウで開く」を選択することによって URL を表示させるようにした。

追記 2 (2008.8.24) : Google マップのマイマップを Firefox で開き、上記の通りの操作をしようとしたが、マイマップで使用したアイコンが表示されるのが非常に遅かった。そこで、マイマップの URL を控えておき、Google からサインアウトした後に、再度マイマップを開くと今度はスムーズにアイコンを含めて開くことができた。

関連サイト

• Flexible Gadget

Google Sites を Blogger のまとめ用の Wiki として活用 - 一時的にアクセス不能になる

フローとしてのブログ

2,3 年前に、次の文をを読んだことがある。

「ブログはフロー、Wikiはストック」  (Zopeジャンキー日記 より)

当時、ブログのことを「フロー」と表現していたことが新鮮であり、言い得て妙だったので、今でもずっと印象に残っている。そのときに「フローテキスト」という言葉にも出会った。

大雑把に言って、単位となるテキストのまとまりが、時系列で書かれ、管理されるのフロー・テキスト、そうではなく、テーマ志向で、いわば空間的に、ディレクトリ的、非時間的に管理されるのを、ストック・テキストと呼びたいと思います。

(ストックとフロー、blogとwiki あるいは。 より)

ブログはそのとき思い付いたことをなるべく早くチャチャとまとめて書きだしている。後で振り返ってみると、「こんなの書いたっけ？」 (@_@;) と思うこともしばしば。書きっぱなしで「流れていく」。まさにフローという言葉が自分にはぴったりとくる。

このブログのタイトルにあるように、「すぐに忘れる脳みそ」というのは伊達じゃない。自分の関心のあることを忘れないようにとの思いからメモ書きをしているのだけれど、その対象となるテーマが複数存在するので、あるテーマについて期間をあけるとすぐに前にやっていたことを忘れてしまう。本当に自分の脳みその容量の小ささと、作業領域の狭さについては辟易してしまうのだけれど、それについて文句ばかりを言っても、悲しいかな自分に返ってくるだけ。やり方を工夫をするしかない。人それぞれ能力も違えば与えられている環境も違う。ネットの世界を見ていると、自分との差に鬱々とすること多々あるけれど、上と比べず自分なりの方法で楽しく知識を伸ばしていきたいものだなぁ。 (+_+)

で、いろいろと考え、学習環境としてのブログを考える (2)  で述べたように、ブログの機能として以下のような構造を実装してくれるとありがたいのだけれど、さすがに既存のブログシステムを自分の都合のいいように変更することは望むべくもなく、ブログを効率的に振り返ることができる代替手段として、「ストックとしての Wiki 」 を利用することを考えていた。

 

Google の Wiki

「ITmedia News：Google、WikiツールのJotSpotを買収」 という記事を 2006/11 に目にして以来、非常にワクワクとした気分で首を長くして Wiki の登場を待っていた。他にも Wiki のサービスはたくさんあるけれど、 Blogger を利用している身にとってみれば、 Google が参入してくるという意味は大きい。そして、2008/6 「Wiki以上! 『Google Sites』は情報統合プラットフォームだ」で、一般ユーザも無料で使えるということを知ってすぐに飛び付いた。試してみると、以前の Wiki のように独自の文法を覚えなくてすみ、 Google ドキュメントのようにブラウザ上でワープロ感覚で使うことができるという機能は、「まとめる」ために同じページを何度も更新する作業と相性が良く、自分の使う目的を十分に満たしていた。

少し前から、ブログの中で特に関心のあるテーマで、後で順を追って読み返したいものに限って Google Sites を使って記事を並べている。また、ブログの記事にするほどのことでもないこともメモっている。特にパソコンが壊れたときなどに、再びアプリをすぐにインストールするできるように、今使っているアプリを羅列してある。それが 「すぐに忘れる脳みそのための Wiki 」 。

 

Google Sites が表示されない

さて、すぐに忘れる脳みそのための Wiki を使うようになってからしばらく経ち、つい先日アクセスしたら、次のような表示がされるようになった。

 

あわわわわ (@_@;) 何も悪いことしてないはずなのに... 規約に違反しているみたいなことが書かれているけれど、どの項目に違反しているのか何も通知されずにバスンと閉じられてしまった。急いで上記に書かれていた連絡先に投稿して様子を見た。

今や一日のうちで Google を使わない日はない。完全に自分の生活は Google に依存してしまっている。他のサービスにしても、その安定性から Google ならば安心という意識がいつの間にか形成されている。そのため、今回の事態はびっくりしてしまった。

ちにみに同じような状態になっている人が Site Disabled - How-to for End Users | Google グループ に投稿していた。

連絡をして、2、3 日経って Google からメールが届いた。

 

あ～ よかったぁ～ ^^ サイトが復活してる！

 

関連サイト

• Google Sites
• すぐに忘れる脳みそのための Wiki