Blog

@hiro45jp さんのブックマークレットをカスタマイズ

このところ、普通のサラリーマン @hiro45jp さんが公開してくださっているブックマークレットをカスタマイズして使わせていただいています。今日は、hiro45jpさんが作られたブックマークレットをほんの少しだけカスタマイズしたので、その内容をフィードバックさせてもらおうと思います。
hiro45jp さんのブックマークレットについては、ご本人が素晴らしいまとめをされているので、以下を参照してください。ちなみに以下の記事紹介も hiro45jp さんのブックマークレットをカスタマイズさせてもらっています。

アプリ紹介とBlog紹介の自動HTML生成 – 派生まとめ | 普通のサラリーマンのiPhone日記
以下、Bookmarkletを紹介していきます。「そのまんま登録版」は、お気に入りにドラッグするだけ。「iPhone登録版」は、リンクをブックマークしてから中身を編集。アドレスの「javascript:〜」よりも前(http://iphone-diary.com/?まで)を削除して下さい。

今回ご紹介するのは Yahoo Pipes! で指定しているHTMLテンプレートです。hiro45jpさんのPipesのCloneを作って、その中に指定されているHTMLテンプレートをカスタマイズすることで、自分好みの出力をさせることができます。私の場合はBloggerのテンプレートとの相性や背景色が白ではないという問題がありカスタマイズが必須です。そこで、カスタマイズしたHTMLテンプレートを以下で公開しようと思います。

具体的なカスタマイズ方法については、これまたご本人が詳細にご説明されていますので割愛(手抜き ^^;)。

選択した文字からApp紹介のHTMLを自動生成するBookmarklet | 普通のサラリーマンのiPhone日記
カスタマイズ方法(HTML)
Bookmarkletで吐き出すHTMLに関しても、自分好みのものにカスタマイズ出来るようにしました。紹介したベースとなるBookmarkletのはその一例でしかありません。

まずはAppHtmlから。今のBloggerのデザインは横幅が少ないので「AppHtml 小アイコン付のサンプル」をベースにさせていただき、情報量を少なめにしてアイコンとアプリケーション名をリンクシェアへのリンクに、画像のborderをstyle=”border: 0;” としました。

${appname} ${version}
${category}
価格: ${price}
${pubdate}

このテンプレートだとこんな感じに表示されます。

AppBank for iPhone 1.53
カテゴリ: 仕事効率化
価格: 無料
更新:2010/10/11

次にShareHtmlです。「ShareHtml Tableタグ+サムネイル右のサンプル」をベースにさせていただき、情報量を減らしたのと、サムネイルのサイズとスタイル変更(影を無くす)、引用にするようにblockquoteタグを設定、Borderの設定がStyleにしないと効かないので変更しました。

${posttitle}
${postselect}

${memo}

このテンプレートを使うと、先ほどのhiro45jpさんのサイトへのリンクのようなイメージになります。このようにちょっとしたカスタマイズで自分仕様にできる、これもhiro45jpさんが最初から公開・カスタマイズを念頭において作っていたからであり、本当に素晴らしいブックマークレットです。
こんな素晴らしいブックマークレットを公開してくれたhiro45jpさんに恩返しをすることはなかなか難しいけれど、テンプレートのカスタマイズ例など、この周辺で情報発信をすることが恩返しに成れば良いな、と思ったエントリでした。hiro45jpさん、ありがとう。



最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top