昨日Twitterで興奮してTweetしてた件。今日も興奮冷めやらず。
きっかけを与えて下さったのは、またしてもdonpyさん。彼と話をするとアイデアがたくさん出てきます。ありがたいお話です。いつもいつも感謝してますm(_ _)m
さて本題へ。
今日は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を作ってます。
ということで興奮冷めやらぬまんま駆け足でお伝えしました。ご質問等々、ご興味ある方がいらっしゃいましたら、Twitterで聞いて下さい。分かる範囲でお答えします。
自動で流れてくるRSSを情報のPushと捉えるならば、今回は自ら情報を取りに行くPullの効率化のお話でした。皆さま、良きiPhoneライフ、Blogライフを！
-
タグ: AppStore, Bookmarklet, Dapper, Google, hiroスタイル, HTML, iTunes, Linkshare, Yahoo!Pipes
全くエントリーと関係ないコメントで申し訳ないのですが、エントリー中に使用しているキャプチャーに文字やアンダーラインをいれてますけど、とてもPOPな感じに見えます。
なにかフリーソフトとか使っているんですか？
[...] る、はてなブックマーク新着情報です。 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 すごいなぁ。 [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
ステキBookmarklet！！！すごいです！早速イロイロ試してみます！
ところで、リンクシェアIDというのは、サイトコードのことかなと思ったんですが、どうでしょうか？
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] Turn it on in Settings › Safari to view this website. 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 9月 8th, 2010 @ 10:01 am › admin 選択した文字 [...]
[...] [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 そうです。気になったサイトを見ていてアプリ名を選んで起動するだけで、すぐに自分のサイトで [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記. [...]
[...] bookmarkletの詳細はこちらをご覧下さい。 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 今日はiPhone系のBlog書く方々にとって、凄くお手軽なBookmarkletをご紹介します。自分でも良く作れた [...]
参考にさせていただきます＾＾
[...] @hiro45jpさんの選択した文字からApp紹介のHTMLを自動生成するBookmarkletというエントリ…すごすぎるブックマークレットです。早く試してみたいのですが、お仕事等、諸々あってお預け状態です。iPhoneやiPad関連のブログを書かれる方は、ぜひ試してみて下さいませ！ [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] sさんの記事と下記の記事で。 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] ※今回の更新では、@hiro45jp様の「普通のサラリーマンのiPhone日記」より、「選択した文字からApp紹介のHTMLを自動生成するBookmarklet」ならびに 「検索文字から複数のApp紹介のHTMLを自動生成するBookmarklet 2.0」の記事を参考にさせていただきました。 ブラウザ上でアプリ名を選択、クリックするだけで様々な情報をブログに貼り付けるためのHTMLを取得してくれるこのBookmarklet。 素敵すぎます。あんまりネットスラングは好きじゃないけど、まさに「神」。 素晴らしい記事大変にありがとうございました！！ [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 ブラウザ上で文字を選択して、このbookmarkletを起動すると以下のことを自動でやってくれちゃいま [...]
素晴らしいBookmarkletですね!! 使わせていただきます!!
ありがとうございました。
I owned an iPhone 3GS and it truly does wonder. I like it from the icons to how the transition functions. Considering of altering to iPhone four soon after my subsequent month’s salary.
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
stryhさん＞
コメントありがとうございます。
これは「Skitch」というWebサービス（無料）で作った画像なんですー。
このサービスを使ってらっしゃるブロガーさん、多いみたいですね(^^)
モケコさん＞
返信遅くなってしまってすみません。
その通りです。サイトコードです。
まだまだ進化しますので、これからも見て下さいましm(_ _)m
IKE-Tさん＞
コメントありがとうです。
PipesもBookmarkletもいろいろ進化してますが、
全て見れますので、参考にして下さいまし。
Hachiさん＞
コメントどもです。
是非、是非、使って下さいまし。
要望などありましたら遠慮無く言って下さいm(_ _)m
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 [...]
[...] このページは、選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 を使って作成した。 このブックマークレットもすばらしい。 [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
[...] Similar Posts: 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
[...] [...]
[...] に当たってとても便利なブックマークレットを公開してくださっていた「普通のサラリーマンのiPhone日記」さんに感謝です。（選択した文字からApp紹介のHTMLを自動生成するBookmarklet ） [...]
素晴らしいです。
ものすごく便利ですね。
ありがたく使わせていただきます。
queazar5さん、
コメントありがとうございます。
こちらこそ使って下さってありがとうございます。
ご要望などありましたら遠慮なく言って下さいまし。
今後とも宜しくお願いします。
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 これはすごい！アプリ名を選択するもよし、直接打ち込んでもよし！これはすごい！ なによりア [...]
[...] [...]
[...] Similar Posts: 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
[...] [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 簡単にいうとiPhone/iPadアプリ紹介記事作成支援のブックマークレットです。もしかしたら、ブロガ [...]
[...] 選択した文字からApp紹介のHTMLを自動生成するBookmarklet [...]
[...] [...]
[...] 「選択した文字からApp紹介のHTMLを自動生成するBookmarklet」です。 [...]
[…] その日の事を今でも覚えている。 選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記 […]