選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記

今日はiPhone系のBlog書く方々にとって、凄くお手軽なBookmarkletをご紹介します。自分でも良く作れたなって思います…。ブラウザ上で文字を選択して、このbookmarkletを起動すると以下のことを自動でやってくれちゃいます!!

  • 選択した文字+「iTunes」でGoogle検索(日本語検索)
  • 検索結果から、JP版のiTunesウェブの結果を取得(最初の1個目のみ)
  • iTunesウェブのHTMLから必要情報を根こそぎゲット
  • アプリリンクを自分のLinkshareのURLに置き換える
  • 自分好みのHTMLに整形してアウトプット

そうです。気になったサイトを見ていてアプリ名を選んで起動するだけで、すぐに自分のサイトで使えるHTMLが出来上がっちゃうんです。検索にヒットしないと変な結果を返すので、そうなってしまったら妥当なキーワードにして再挑戦してみてください。

これが出来るとiPhoneやiPadでますますBlogが書きやすくなります。

FirefoxにMakelinkってアドオンがありますが、それ以上。ウェブから情報を取ってきて整形してくれるんですから。今回は、誰でもカスタマイズしやすいようにLinkshareのIDを外出しにしました。HTML書式も出来るだけ簡単に修正出来るようにしてます。

もちろん、Linkshare無しの純粋なHTMLを作ることも可能です。

カスタマイズの方法は後で述べるとして、まずは動きを見てみましょう。

Blogで使えるHTMLを吐く(デモ)

ブラウザ上で気になる文字を選択。その後、Bookmarkletを起動します。

すると…。

こんなダイアログボックスが出てくるんで中身をコピー。

コピーされた中身のHTMLを下書きにペースト。

Blogで見るとこんな感じ。お手軽すぎです。

カスタマイズ方法(Linkshare)

とりあえずベースとなるbookmarkletはこちら。

ツールバーとかにそのまんまドラッグすればお気に入りに追加されるはずです。

このBookmarkletですが、まだ私のLinkshareのIDが入ってます。後からBookmarkletを編集して自分用にしていきます。ちなみにHTMLも私の好みになってるんですけど、こちらのカスタマイズは別の方法で変更出来るので後ほど説明します。

上記がBookmarkletの中身ですが、注目は「l=’Rfg6nizvNEs’」のところ。

「i=’Rfg6nizvNEs’」のRfg6nizvNEsには、自分のLinkshareのIDを入れます。入れたら、Bookmarkletを更新。それだけで自分のLinkshareバージョンになります。

ご確認下さいまし。

カスタマイズ方法(HTML)

Bookmarkletで吐き出すHTMLに関しても、自分好みのものにカスタマイズ出来るようにしました。紹介したベースとなるBookmarkletのはその一例でしかありません。

以下、手順は面倒なんですが、ひとつずつ進めれば悩まないはず。前提としてyahoo.comにアカウントが無いと駄目。アカウントがあると無料でYahoo!Pipesが使えます。

1. ベースとなるPipesのクローンを作る

こちらがベースとなるPipes。

画面に従ってクローンを作ると、自分のMyPipesにクローンが作られます。

2. Pipesを編集し、HTMLテンプレートを変更する

画面に従って編集モードに入ります。

編集モードに入ったら、以下の図の左上のString Builderのボックスの中を自分好みに変えていきます。中身を変更し「Save」するだけで自分用のPipesが完成です。

中身ですが、HTMLの知識が必要です。自由に組めますが、本PipesではHTMLの中で以下の予約語が使えます。これらを駆使してテンプレートを作っていきます。

  • ${iconurl}(アプリアイコンの画像リンク)
  • ${appname}(アプリ名)
  • ${version}(アプリのバージョン)
  • ${seller}(開発元)
  • ${price}(価格)
  • ${category}(カテゴリ名)
  • ${title}(「アプリ名 バージョン (価格)」の書式)
  • ${url}(アフィリエイトの無い純粋なアプリリンク)
  • ${linkshareurl}(リンクシェアを噛ましたアプリリンク)
  • ${linkname}(「アプリ名 – 開発元」の書式)
  • ${pubdate}(更新日)
  • ${moveos}(対応してるOSやハードの条件)

実はPipes内では、他にもスクリーンショットやアプリ説明等々、全てを取ってきてるんですが、まだ予約語の設定をしてません。次のバージョンにご期待下さい(;^ω^)

HTMLのテンプレートを参考としていくつかご紹介します。まずは私のやつ。

テンプレートは上記な感じ。

Blog上だと上記のように見えます。スタイルシートによって見え方が違うんで私のHTMLが必ずしも皆さんにマッチするとも限りません。色々試してみて下さい。

次に、私の敬愛するdonpyさんのアプリ紹介のHTML。HTML解析しちゃってすみません。これをテンプレート化します。

上記な感じになります。

donpyさんバージョンのBookmarkletは以下の通り。
良かったら使って下さいまし m(_ _)m

自分の好きな形に書き終えたら、Pipesを「Save」します。

3. PipesのURLに合わせてBookmarkletを変更する

先ほどのBookmakletは、私のPipesを見に行くようになってますんで、自分で作ったPipesを見るようにBookmarkletを変更しないといけません。

手順は、LinkshareのIDを変えた手順と一緒。今度は「p=’http://pipes.yahoo.com/hiro45jp/apphtml’」の部分を変更します。

自分のYahoo!Pipesの上記の部分に注目して下さい。これが作ったPipesのURLです。こいつをコピー。そしてBookmarkletの「p=’xxxxx’」のxxxxxの部分にペーストして保存します。これで終わり。自分用のBookmarkletが出来上がりました!

私自身もビックリなんですが、何でも出来ちゃう世の中になりましたね。
凄い世界だ (´∀`)

Bookarkletの中身ってどうなってる?

ここからはマニアック路線が更に進みます。興味ある方々だけどうぞ。

今回、Yahoo!PipesをAPIちっくに呼び出す方法を採用してます。

Bookmarkletの中でPipesに渡すパラメータをセットし、結果のみJSON形式で取得。それをダイアログボックスで表示するという流れです。PipesってRSSだけだと思ってたんですが、こういう使い方もできるんですねー。改めて感動しちゃいました(´∀`)

Pipesの中の挙動ですが今回はGoogle検索を噛まし、その中でiTunesのリンクだけを抜き出す….ということをしてます。このやり方を知っておくと後々役に立ちそうです。

後、iTunesの情報ですが、Pipesだけでやると複雑だし、文字化けもするんで、Dapperというサービスを使ってます。Dapperは、既存サイトのHTMLから必要要素だけ抜き出し、自分好みのHTMLにしてくれる便利なWebサービスです。無料。

図解すると以下な感じ。

BookmarkletからPipesを呼び出してキーワードを渡す、
PipesからキーワードでGoogleの検索をしてiTunesウェブのLinkを取得し、
取得したLinkを使ってDapperを呼び出し、iTunesウェブ情報を取得、
取得した情報をDapperの戻り値でPipesに返し、
そして最後はHTML作成、Bookmarkletに戻ってくる…。

上記の流れで情報をかき集めて最後にHTMLを作ってます。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中