TypePad.comのWidgetの作り方

BlogPeopleや、ブログパーツを作っている人向けに。

Widgetとは (一般ブログユーザー向け)

TypePad - Widgets

What's a Widget? A widget is a piece of content or functionality provided by a third party that you can place in the siderail of your TypePad blog. Technically, it's a snippet of HTML and/or JavaScript that you can manage like any other sidebar content module on your blog.

簡単にいうと、従来サイドバーテンプレートの中にHTMLやJavaScriptを貼付けていたものを、TypePad側で簡単に登録することができる仕組みのことです。

日本では「ブログパーツ」という言い方が一般的かも知れません。従来ブログパーツの場合、HTMLの入手、HTMLをコピー&ペーストして自分のブログのサイドバーテンプレートに貼付ける必要がありました。

これに対してWidgetの場合

1)HTMLの入手
2)サイドバーテンプレートへの貼付け

が大幅に簡略化されます。ボタンひとつで(1)、(2)が行われてTypePadの一つのサイドバーモジュールとして扱われるようになります。

いったんサイドバーモジュールとなれば、他のものと扱いは同じです。デザイン画面で自由にチェックボックスでon/offしたり、ドラッグ&ドロップで位置を変更することができるようになります。

Widgetを作る (開発者向け)

開発者にとってのメリットは、敷居が下がることでユーザーを多く獲得する機会が得られることでしょう。ボタンひとつでユーザーのブログに貼付けてもらえるのは魅力です。

またすでにブログパーツを作っている開発者にとっては簡単なformを自分のHPに設置するだけの追加開発でこのメリットが享受できます。具体的にはBlogPeopleやトラックバックピープルなどを貼付けるのがきっと便利になるでしょうね。

TypePad Widget Installボタンの作り方(すでにブログパーツを提供している開発者向け)

TypePad - Widgets - Become a Widget Developer

Become a TypePad Widget Developer We're excited to work with new widget developers, and it's easy to become one!

TypePad - Widgets

Example Web Form The following is an example web form utilizing the fields discussed above:


<form action="https://www.typepad.com/t/app/weblog/design/widgets" method="post">
  <input type="hidden" name="service_key" value="YOUR API KEY HERE" />

  <input type="hidden" name="service_name" value="Six Apart" />
  <input type="hidden" name="service_url" value="http://www.sixapart.com/" />
  <input type="hidden" name="long_name" value="I love Six Apart" />
  <input type="hidden" name="short_name" value="i_heart_6a" />
  <input type="hidden" name="content" value=" <img alt=&quot;I Love 6A&quot; 
           src=&quot;http://www.sixapart.com/pronet/i/I-heart-6a-horizontal.gif&quot; 
           width=&quot;150&quot; height=&quot;63&quot; />" />

  <input type="hidden" name="return_url" value="http://www.sixapart.com/" />
  <input type="submit" name="submit" value="Install Widget on TypePad" />
</form>

たったこれだけのformをあなたのHPに設置するだけでOKです。ここで新しく必要なのはAPI KEYと呼ばれるservice_keyに記述するための文字列です。これは簡単にHP上で申請することができますが、申請にはTypeKey ID(登録無料)でのログインが必要です。MTユーザーならTypeKeyをすでに持っている方も多いでしょうから、そのTypeKey IDが利用可能です。

こちらで申請します。

TypePad - Widgets

Get a TypePad Widget API Key Welcome to the TypePad Widget Developer Program. To begin developing your own widgets, sign into TypeKey using your TypePad username and password and we will provision you a TypePad Widget API key. This key will allow you to begin developing widgets immediately.

  • service_keyへここで得られた長い文字列をそのままコピー&ペーストします。
  • service_nameは好きな名前をつけましょう。インストール時に表示されます。
  • service_urlにはHPのURLを記述します。
  • long_nameにはあなたのウィジェットの名前を好きにつけましょう。表示に利用されます。
  • short_nameには64文字以下、英文字でつけてください。表示されません。
  • contentには従来ユーザーに「コピー&ペースト」させるHTMLをそのまま入れます。
  • return_urlにはインストール時にキャンセルした場合の戻り先を設定します。
  • formはボタン、イメージともに利用可能です。

これでformが出来ました。これをHPに設置すればもう準備完了です。

Widgetの例

試しにこんなものを作ってみました。
dotart.jpg

これは共有ホワイトボードみたいなもので、EDITをクリックすると編集画面へとジャンプします。16色のパレットから色を選択し、クリックでドットを打ちます。SAVEすればそれがサーバーに保存され、次回表示されます。wikiのドット版だと思えば理解は早いと思います。SAVEせずにLOADすると現在サーバーに保存されているデータが読み込まれます。RESETすると真っ黒に塗りつぶされますので、お気をつけて。

TypePad.comユーザーであれば以下のボタンでインストールが可能ですので、試してみてください。まだユーザーでない方もTypePad.comは30日間無料で利用可能なのでこれを機会にちょっと試してみてはいかがでしょう。しかもTypeKeyのIDを持っている人はそのまま使え、ブログの設定を少しするだけでブログが使えるようになります。

何か質問などあればお気軽にどうぞ。

参考にしたエントリー:

暴想: Blog Tattooをリリース!

Blog Tattooをリリース! TypepadでTypePad - Widgetsというサービスがリリースされた。 そこで、今日突然「よっしゃ、ここはいっぱつ、米国人にバカウケするようなWigetsを作ってやろう」と思い立った。

啓発されたエントリー:

暴想: ブログに、お絵かき掲示板みたいな機能がついたら凄く楽しいと思うよ。

ブログに、お絵かき掲示板みたいな機能がついたら凄く楽しいと思うよ。

ようはこれを作ってみようとして、ちょっと(かなり)違うものになってしまったというお話。