the study guide Photo by Nadiaux

告白します。

Apphtmlが公開されたのが確か2010年の9月。

私@feelingplace、@hiro45jpさんのApphtmlを知るまでBookmarkletというものを全く知りませんでした！

こんな便利なものがあるんだぁと感動しつつ、解説文を読みながらフツフツと沸き上がる（ほぼ無謀にも思える）思いが1つ出てきました。

それが、自分でもBookmarkletを作ってみたいということでした。

最初に作りたいと思ったのはiPhoneでも使えるFlickrの画像を取ってくるBookmarklet。

Macでブログを書く時にはecto3を使っていたんですが、アップデートがほとんどされなくなってイラっとしていたのも思いが高まった要因の1つかも知れません。

とにかく、知識ゼロから作るにはかなりハードルが高いのでApphtmlを参考にして作ることにしましたが、それでも知らないことばかりだったのでいろいろとググって参考になったサイトをまとめておきたいと思います。

まずはBookmarkletとは何かから始まったんです。

ここでBookmarkletがJavascriptで書いてあるってのを改めて知った訳です。

続いて@hiro45さんのこのTweet。

[blackbirdpie id=”23191297498″]

最初はまったく意味が分からなかったんですが、自動整形のほうはURLエンコードされたJavascriptをデコードした上でインデントしてくれる優れもの。

ブックマークレット化のほうは上のテキストボックスに入力すると下のテキストボックスにURLデコードしたBookmarkletが表示されて、なおかつその下にはBookmarkletのリンクも貼ってくれる優れものです。

次に出てきた疑問がURLのエンコードとデコード。

ブログにアップする際に文字化けで困って、@ma2marsさんや@cotetsさんにいろいろと教えていただきながら解決した際に最終的にURLエンコード・デコードとわかり解決に至りました。

続いてはApphtmlの肝の部分、Yahoo!Pipesに関すること。

pipesでググって上のほうに出てくるのがこちら。

モジュールの説明が簡潔にされているのでわかりやすいと思います。

Pipesをいじっていく上で必ず必要になってくるのが正規表現です。

ここのサンプルを参考にしながらJavascriptで取得するURLを編集してIDだけ抜き取るようにしました。

Flickr2HTML作った時はFlickrのAPIのことを調べるのにここを見ました。

いろいろ試していくうちにflickr.photos.searchではうまくいかないことに気づき、flickr.photos.getInfoに辿り着いた訳です。

次にYouTube2HTMLを作るのに調べたサイトです。

まずはYouTubeのAPI。

ただ、Data APIだと動画の縦・横サイズが取得できないってことがわかったんですね。

別の手段がないかなぁって探してた時に見つけたのがこちらのoEmbed。

仕様に関してはこちらのサイトが参考になると思います。

10のサイトを見ていただきましたが、いかがでしたでしょうか？

ボクの頭の中にもまだしっかり情報が落ちている訳ではないので、これからもこのサイト達を参考にBookmarkletの作成・修正をしていきたいと思います。

これをきっかけにBookmarkletを作ってみよう・公開してみようと思ってもらえる人が1人でもいると嬉しいですね♪