Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。

| 60 Comments

SPONSORED LINK

Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。

the study guide
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。

昨日はこれ使いまくり。 [share] JavaScript自動整形 ←→ ブックマークレット化 - by edvakf in hatena - B! http://j.mp/9lReVX
@hiro45jp
hiro45jp

JavaScript自動整形 ←→ ブックマークレット化 – by edvakf in hatena
JavaScript自動整形 ←→ ブックマークレット化

JavaScript自動整形 ←→ ブックマークレット化


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

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

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

Web便利ツール/URLエンコード・デコードフォーム – TAG index Webサイト
URLエンコード・デコードフォーム

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人でもいると嬉しいですね♪


関連がありそうなエントリー:

  1. forYou,inc.さんからLCD Clockのプロモーションコードをいただきました。
  2. forYou,inc.さんのクリスマスプレゼント、iTunes Card ?500に当たりました。
  3. 2010/12/19から2010/12/25のRSSチェック。
  4. Textforce用Bookmarkletまとめに掲載していただきました。
  5. Macとの出会い

SPONSORED LINK


60 Comments

  1. Pingback: 0から始めるiPhoneからのWordPress更新術。第7回 画像・動画素材のHTMLタグを取得しよう。 | Feelingplace

  2. Pingback: 2010年のAppleを振り返るのに最適なムービー〜 D’s Focus【20101225版】 | iPhone 研究室(iPadもね)

  3. Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することできたお世話になった10のサイト。 | Feelingplace http://htn.to/mWDfx

  4. 過去記事紹介: Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。 http://bit.ly/ee7dVB

  5. 【過去記事紹介】: Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。 http://t.co/VdtAiSF

  6. [JavaScript] / “Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することできたお世話になった10のサイト。 | Feelingplace” http://t.co/ZWWCRYJ6

  7. Pingback: Evernote自動化AppleScriptがアツイ! 今週のまとめ ~12/24 | iPhone 研究室(iPadもね)

  8. 【過去記事紹介】: Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することができるまでにお世話になった10のサイト。 http://t.co/d5DFzVtj

  9. こじんてきに / “Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することできたお世話になった10のサイト。 | Feelingplace” http://t.co/51eQkUGE

  10. 個人的にアツいのがブックマークレット。 / “Bookmarkletの存在を知らなかったボクが1ヶ月半でBookmarkletを公開することできたお世話になった10のサイト。 | Feelingplace” http://t.co/51eQkUGE

コメントを残す

Required fields are marked *.

*