なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

神ブックマークレット ShareHtml , AppHtml の導入&使用方法(作者 @hiro45jp さん)

IMG 8754


先日ブログのお問い合わせフォームからこのような質問をいただきました。

本文中によく出てくる、参考になったページヘの画像、題名のリンク、はてなブックマーク数がセットで表示されているもの(わかりにくいですよね。)はなにかのプラグインなのでしょうか。
他のブロガーの方も同様な記述をしているので真似してみたいと思ったのですが、わかりませんでした。
もしよろしければ、導入方法を教えていただけますでしょうか。

質問内容わかりやすいです!これは、ShareHtmlのことですね!!
教えましょう教えましょう!
いや、むしろ教えさせてください!(笑)

これはブックマークレットというもので参考になった記事を自分のブログに簡単に掲載できるスクリプトです。
作成されたのは @hiro45jp さんで、iPhone系ブロガーの師匠と呼ばれる方ですw
こちらがヒロさんのブログです。

普通のサラリーマンのiPhone日記
本当にいつもいつも重宝しています!ありがとうございます!


Sponsored Links



ってことで今まで当たり前のように便利に使わせていただいていたブックマークレットですが、もう一度導入方法と使用方法を振り返ってみたいと思います。

ShareHtmlの導入方法

ShreHtmlを使ってブログ記事を紹介したものが上記の「普通のサラリーマンのiPhone日記」となります。
ブログ画像、題名、コメント、はてブ数付きのリンクが一瞬で作成できる神ブックマークレットです。
このブックマークレットの作成は以下のリンクから行います。


ShreHtmlメーカー


スクリーンショット 2012 06 08 11 59 23 1


リンクを開くと上記のような画面となりますので、自分用にカスタマイズして「Bookmarkletを生成する」をクリックします。
(初めは特にいじらずにテンプレートを左サムネイル大にして作成してみるといいと思います)

スクリーンショット 2012 06 08 12 11 33


Bokkmarkletを生成するをクリックすると上記画面になりブックマークレットが作成されています。
登録用のリンクをブックマークバーにDrag&Dropして登録してしましましょう。

ShareHtmlの使用方法



スクリーンショット 2012 06 08 12 30 33


ブラウザ上でブックマークレットを起動するとこのようにポップアップが表示されるのでコメントしたい場合はコメントしてみましょう。
このブックマークレットの特に素晴らしいことはコメントも簡単に残せることだと思っています。

スクリーンショット 2012 06 08 12 34 51


ここで作成されたHTMLをブログ(エディタ)に貼り付けると完成です。
ShareHtmlの導入は以上です。
ご質問いただいた こもえさたす さん、いかがでしたでしょうか?
私にとって今やこのブックマークレット無しというのは考えられないほど依存しているものです。
おそらく使ってみたらその便利さに悶絶すると思いますので、ご自分のお好きなテンプレートでブックマークレットを作成してみてください。
またアプリ紹介リンクも超簡単に作成できる AppHtml というブックマークレットもあるのでそちらもご説明します。

AppHtmlの導入方法

AppHtmlとはリンクシェア(アフィリエイトプログラム)のIDを植えこみながら簡単にアプリ紹介のリンクを作成できるプログラムでこちらも @hiro45jp さんが作成されたものです。
導入方法はほとんどShareHtmlと同様ですが一応記しておきます。


AppHtmlメーカー

スクリーンショット 2012 06 08 14 38 54


リンクを開くと上記のような画面になるのでShareHtmlの時と同様にブックマーク名やテンプレートを決めて「Bookmarkletを生成する」をクリックします。
ちなみにiPhone,iPad,Macのそれぞれのアプリを選択できますのでそれぞれのブックマークレットを生成しておくと便利です。
リンクシェアのIDはなくても使えますが今後アプリレビューが増えそうであれば早めに取得しておくといいことがあると思います。

スクリーンショット 2012 06 08 14 42 38


ShareHtmlと同様にブックマークレットが生成されます。
ブックマークバーなどに登録して使いやすくしましょう。

AppHtmlの使用方法



スクリーンショット 2012 06 08 14 53 58


ブックマークレットを起動させるとポップアップウィンドウが開きますので紹介したいアプリ名を入力します。
デフォルトでは8個のアプリをサーチしてきますので自分のお目当てのアプリがあったところキャンセルをクリックします。
O.Kを押すと次にヒットしたアプリが表示されます。

スクリーンショット 2012 06 08 14 57 31


実際に使うとShareHtmlと同様に画面上部にプレビューが表示されます(プレビュー設定にしている場合)。
このコードを張り付ければブログに掲載されることになります。


にほんのあらそい 1.0(無料)
カテゴリ: ゲーム, シミュレーション, ストラテジー
販売元: RucKyGAMES – Kazuaki Honma(サイズ: 5.3 MB)
全てのバージョンの評価: (623件の評価)




こうして作成されたのが上記のアプリ紹介リンクです。
以上でAppHtmlが導入できました。

iPhoneにブックマークレットを設定する方法

iPhoneでもブックマークレットは利用することができます。
設定方法はこちらの記事がわかりやすいです。


iPhoneのSafariで使う便利なBookmarklet集について – ツインズパパの徒然日記
iPhoneにブックマークレットを登録する方法がわかりやすいです!


iPhoneでも使えるようになるとiPhoneだけでブログも書けるようになるので便利です。

Macでの私のブックマークレットの使い方



SpellBook 右クリックからブックマークレットを起動できる拡張 | fladdict
いつも便利に使わせていただいております!


最初はブックマークバーにフォルダを作成してそこからブックマークレットを利用していたのですが、ブラウザがChromeなら上記のSpellBookという超便利な拡張機能が利用できます。
カーソルがブラウザのどの部分にあっても右クリック(ダブルタップ)でブックマークレットを起動できるのでめっちゃ便利です。

スクリーンショット 2012 06 08 15 00 18



以上、 @hiro45jp さん作の神ブックマークレットの導入方法と使い方を書いてみました。
もしこれからブログを始めたいと思っている人や始めたばかりの人はこのブックマークレットを使ってみるといいと思います。
書きはじめの頃には他の人の記事リンク作成やアプリ紹介リンクを作成するのが一番苦痛でした。
紹介したいのにうまくできないもどかしさ。
それを打破してくれたブログのインフラとなったこの神ブックマークレット。
なまらおすすめ&なまら感謝です。
ってことで、みんなで楽に楽しくブログ書きましょう!!w

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top