カテゴリ:Webサービス

Googleガジェットを作ってみる

皆さんはブラウザのスタートページを何にしていますか? 
私は以前MyYahoo!を使っていましたが、最近はiGoogleを利用しています。
iGoogleは「ガジェット」と呼ばれるブラウザ上で動作するミニアプリケーションをWebページ上に配置し、自分好みのページに仕立て上げることができます。

また、作成したガジェットは、以下のように簡単にブログに貼付けることができます。
今回はそのガジェットの作り方を書いていきます。


まずは環境を整えましょう。

iGoogle上に、GGE(Google Gadget Editor)と呼ばれるガジェット開発用ガジェットを登録します。

ここのページ下部の、「To add GGE to your iGoogle page, click here:」下部のボタンを押せば完了です。

gge.png
おおお、追加されました。ただし、iGoogle上のガジェットは領域が狭いので好みに応じて使い分けましょう。

追加されたGGEを見ると、Hello Worldサンプルコードが登録されています。Previewタブをクリックするときちんと表示されるのが分かりますね。

Editorタブに戻ってソースを見ると、シンプルなXMLで記述されています。基本は下記のCDATA部分に処理を記述していきます。

<Content type="html"><![CDATA[
** ここにHTMLとCSSとJavascriptを記述する **
]]></Content>


では簡単なガジェットを作ってみましょう。自分のはてなブックマークの最新5件を表示することにします。

下記のソースをeditor部分にコピペしてみてください。
ソース中の*****部分はご自分のものにするのをお忘れなく。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs
     title="マイハテブ"
     author="***** 自分の名前 *****"
     author_email="***** メールアドレス *****" />
    <Content type="html">
        <![CDATA[
        <style> #content_div { font-size: 90%;  margin: 5px; background-color: #FFFFBF;} </style>
        <div id=content_div></div>
        <script type="text/javascript">
            // _IG_で始まる関数がGoogleガジェットAPIです。
            _IG_FetchFeedAsJSON("***** ここに自分のはてブRSS *****",
                    function(feed) {
                        if (feed == null){
                            alert("There is no data.");
                        return;
                    }
                    // タイトル部分
                    var html = "<div><b>マイハテブ</b></div>";
                    // ブックマークリストを作成
                    if (feed.Entry) {
                        html += '<ul>';
                        for (var i = 0; i < feed.Entry.length; i++) {
                            html += '<li><a href="' + feed.Entry[i].Link + '" target="_blank">'
                                   + feed.Entry[i].Title + '</a></li>';
                        }
                        html += "</ul>";
                    }
                    _gel("content_div").innerHTML = html;
            // ブックマーク取得件数
            }, 5);
        </script>
        ]]>
    </Content>
</Module>

Editorに貼付けたら、Previewタブで確認してみましょう。はてなブックマークのRSSから、最新の5件取得されたと思います。うまく取得できない場合は、はてなブックマーク側で、公開設定が「パブリック」になっているかご確認ください。


では、このガジェットをiGoogleに登録してみましょう。

まずはFileプルダウン>Save asをクリックして、名前を付けて保存します。
save_as.png

次に、Fileプルダウン>Publish をクリックし、ダイアログから「Add to my iGoogle page」をクリック。
publish.png

次の画面で「Googleに追加」をクリック。
add_my_iGoogle.png
追加されましたね!(見栄えはよろしくないですが)
igoogle.png

思ったより簡単に作ることができました(かなり端折ってますが)。まだGoogleガジェットAPIのほんの一部しか使ってないので、もっと複雑な処理やUIを作ることができそうです。また、作成したガジェットは自分のブログにも簡単に貼付けることができます。

次は、このガジェットでGoogle Open Social APIを使ってみたいと思います。

Yahoo! JAPAN IDをOpenID化

数回に渡りOpenIDに関するエントリが続いていますが、今最も旬な話題だと思うので今回もこれでいきます。2008/1/30に、ヤフーがOpenID発行サービスのベータ版を開始しました。手持ちのYahoo! JAPAN ID(以下Y!ID)をOpenID化することにより、OpenIDに対応したサービスにログインすることができます。


今回は僕のY!IDを実際にOpenID化してみようと思います。


ヤフーにログインし、http://openid.yahoo.co.jp/ にアクセスします。右上の「取得する」をクリック。
get_openid.png

パスワード再確認画面で、パスワード入力。
auth_passwd.jpg

画像認証と注意事項に同意し、OpenIDを取得します。
3.jpg
すると、、

openid.jpg
おおお、発行されました! Openid.ne.jpで取得できるURL形式とは異なり、やたらと長い文字列が続いています。


さて、毎度のことながら、取得したOpenIDで対応サービスにログインできるかどうか検証してみましょう。
もちろんアバウトミーで。


ヤフーの利用方法によると、ログインの際はテキストエリアに「yahoo.co.jp」と入力せよとのこと。
login.png

いざログイン!
error.png
なんと!エラーになってしまいました。。

アバウトミーのOpenIDに関するヘルプによると、まだヤフー発行のものには対応していないようです。また、ヤフーが発行するOpenIDは、OpenID2.0仕様に準拠しているため、おそらくサービス側もそれに準ずる実装をしなければならないようです。


まとめ

まだベータ版ですが、ヤフーがOpenIDに対応したことで2000万ID以上のアクティブユーザーに向けた開発が可能になります。

Web業界全体がオープン化に向かっている昨今、このOpenID化がその第一ステップなのかもしれません。

独自ドメインのIdentityを利用する -openid.delegate-

前回のOpenIDネタの続きです。
今回は、openid.delegateという仕組みについてです。

前回は、Openid.ne.jpというプロバイダ(OpenIDの発行サービス)で「http://xxxx.openid.ne.jp」というIDを取得しました。xxxx部分が自分で決められる部分ですが、自前でドメインを取得されている方や、別のURLをOpenIDにしたいという方のために、openid.delegateという仕組みがあります。

やりかたはとっても簡単です。
詳しい解説は、こちらを参照していただくとして、実際にやってみましょう。


私のOpenIDは http://mrsy.openid.ne.jp ですが、
http://mrsy.synapz.jp に変更してみます。


http://mrsy.synapz.jp/index.html に、以下の2行を記載します。

    <link rel="openid.server" href="http://www.openid.ne.jp/user/auth" />
    <link rel="openid.delegate" href="http://mrsy.openid.ne.jp" />
ボールドイタリック部分はご自身で取得したOpenIDのプロバイダと、OpenIDのIdentityを記載してください。
たったこれだけで http://mrsy.synapz.jp が http://mrsy.openid.ne.jp の代わりになります。


では実際にsynapzドメインのIdentityが機能するかどうか検証してみましょう。
前回と同様、利用するサービスはアバウトミーにします。


ID部分にsynapzドメインのOpenIDを入力して、ログイン。
login.png

OpenID側にリダイレクトされ、ログイン催促がでました。パスワードを入力します。
openid_login.png

おおおお、できましたね!

aboutme.png

さて、もう前述のhtmlに埋め込むlinkタグの意味がお分かりかと思いますが、単純にOpenIDの認証サーバとIdentityの委譲先(delegate)を指定しているだけです。


delegateの利用シチュエーション

  • OpenIDプロバイダで気に入ったIDが取得できなかった場合
    別途簡潔なURLを準備して、本来のIdentityにdelegateします。
  • 自分のblogのURLをIDにしたい場合
Page 2 of 3123