Google Gadgetの作成時の注意点

Twitterのつぶやきを表示させるGoogle Gadget

いろいろな目的があって、時間をかけて、役に立たないGoogle Gadgetを作ってしまいました。ですが、いろいろな目的は、達成されました。そのいろいろな目的は、こんなんです。

  • JavaScriptを覚えたい(JSONPとか)
  • TwitterAPIを使ってみたい
  • はてなで、きれいにTwitterのつぶやきを表示させたい

Google Gadgetを作成する

Google Gadgetを作るのは意外と簡単。HTMLとJavaScriptの知識があればできます。

  1. 作り方を解説しているページを熟読します(超重要)
  2. HTML+JavaScriptで実装して、ブラウザで動作確認
  3. HTML+JavaScriptで実装したものをGadget用XMLに移植

Google Gadgetを作成する際に気をつける点

Userprefのlistデータ型

開発の基礎 – Gadgets API – Google CodeのUserprefのlistデータ型。このリストの中身は、追加された順ではないです。なので、順番が重要なリストを用意したい時は、listデータ型は使えません。

Google Gadgets Editorの動作

デベロッパー ツール – Gadgets API – Google Codeの注意事項にもありますが、すべてのAPIをサポートしていません。makeRequest()をサポートしていないので、リモートコンテンツの確認ができません。

Gadgetの高さの自動調整

gadgets.window.adjustHeight();で、自動調整ができるはずですが、ブラウザによって挙動が異なります。いろいろなブラウザでテストしましょう。

ポイントは、Gadgetの最後にsetTimeoutで呼び出すこと。

setTimeout(function() {gadgets.window.adjustHeight();}, 2000);
カテゴリー: Web

はてなでTwitterのつぶやきを表示させる(Google Gadget)

前回、作成したGoogle Gadget。はてなでは、ブログパーツが使えないとのことで、Google Gadgetを作成しました。

こんな感じで書いています。

<script src="http://gmodules.com/ig/ifr?url=http://eikatou0.appspot.com/gadets/tweet01/tweetGadgets.xml&up_tweetTitle=%E4%BB%8A%E6%97%A5%E3%81%AE%E6%B3%A8%E7%9B%AETweet%21%21&up_tweetIds=12279963640,12269816963,12258327892&synd=open&w=400&h=700&title=&border=%23e5ecf9&output=js"></script>

タイトルと、表示させるTweetを変える時は、以下の手順を行います。

  1. タイトルを入れます。”&up_tweetTitle=title“のところに、タイトルを入力。日本語の場合はURLエンコードします。URL エンコード/デコードフォーム
  2. つぶやきIDを調べます。
    1. Twitterのホーム画面を開きます
    2. 気になるtweetの時間のリンクをクリックします
    3. URLの”http://twitter.com/user/status/11223344556“の数字部分(“11223344556”)
  3. “&up_tweetIds=id1,id2“のところに、表示させたいつぶやきIDを並べます*1
  4. “&w=400&h=700″で高さと幅を調整します

その他のパラーメータについては、ウノウラボ by Zynga Japan: ブログパーツ貼り付けタグのまとめ+Googleガジェット@はてなが詳しいです。外枠の色とかサイズが変えられます。

*1:カンマ区切りで複数並べられます

カテゴリー: Web

就職しない生き方 ネットで「好き」を仕事にする10人の方法

今、この本の一部を読んでいます。内容も面白いですが、宣伝(?)の方法も面白いです。

下のページから、各章のPDFを無料でダウンロード出来ます。毎週木曜日に、ダウンロードできる章が変わっていくとの事。10週間で、全ページが無料でダウンロードできるらしい。で、今は第4回目のダウンロード期間中です!!今週は、株式会社paperboy&co. 創業者 家入一真さんです。

しまった、もっと早くに知っておけば、全部無料で読めたのに・・。というか、無料で配ってしまっていいの?って聞きたくなる。立ち読みと変わらんって事なのかな!?

Yahoo Pipes使ってみたよ

Pipes: Rewire the web


いまさらながら、数年前にはやったYahoo Pipesを始めて見ました。

Yahoo Pipesとは

何ができるかというと、入力されたXMLやCSVを加工して、RSSやJSON形式のデータを出力する事が出来ます。例えば、「とあるサイトのRSSで、[Apple]という文字が含まれている記事のみを抽出して、RSS形式で出力する」とかが簡単にできます。

サンプル

今回、作成したのは、「はてなブックマーク数が一定以上の記事のみを配信するRSS」です。

Pipes: Hatena Bookmark Filter

  1. siteURLの入力欄に、RSSを配信しているサイトのURLを入れます。
  2. その下の入力欄には、はてなブックマーク数の最低値をいれます。
  3. Run Pipeボタンを押すと出力されます。
  4. RSSボタンを押すとRSSが取得できますヽ(´▽`)/

感想

Yahoo検索の結果を組み合わせたり、画像検索で画像を挿入したり、いろいろな使い方ができそうです。ポイントは、技術者でなくても、簡単にデータを加工できる点です。正規表現は知っていると便利に使えますが、それ以外はHTML程度の知識があれば使えます。

Yahoo.com、素敵過ぎます!!

Mixiの更新情報をRSSで取得するPipeがあれば便利そうだなと感じています。

参考

カテゴリー: Web