Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Bookmarklet 開発実績

ミイル(miil)にアップロードした写真をブログに貼り付けるためのHTMLをコピーするブックマークレット

投稿日:


20121228_copy_miil_tag_00
みなさん、お料理写真をおいしそうに写すことができてTwitterやFacebookに共有できるミイル(miil)は使っていますでしょうか?ボクは外食したときにスマホで写真を撮ることが多いのですが、自分で作った料理をシェアしている奥様がたも多いと聞きました♪で、もし自分のmiil写真をブログに貼り付けたい場合にどうしたらいいか考えたんですが、いまのところ有効な方法が見つからなかったのでブックマークレットを作ってみました。
ブックマークレットの登録及び、使い方は続きへどうぞ。

ブックマークレットの登録

画像のみと、画像+テキストのパターンを作ってみました。
上記リンクをブックマークバーにドラッグ&ドロップするか、リンクを右クリックして「リンクをブックマーク」などで登録してください。

ブックマークレットの使い方

20121228_copy_miil_tag_01
miilの写真ページをブラウザで開いてブックマークレットを実行するだけです。
20121228_copy_miil_tag_02
ブックマークレットを実行するとHTMLタグのダイアログが表示されますので、コピーします。
で、ブログの記事投稿画面に貼り付けるだけ。
yager:麺処 ほん田(ラーメン)の写真 - ミイル(miil)
こんな、表示になります。
yager:つけ麺屋 やすべえ 渋谷店(ラーメン)の写真 - ミイル(miil)
yager:つけ麺屋 やすべえ 渋谷店(ラーメン)の写真 – ミイル(miil)
画像+テキストリンクの場合はこんな感じ。

ブックマークレットのカスタマイズ

ブックマークレットのコードは下記のようになっております。

javascript:window.prompt('Copy miil tag','<a href="'+location.href+'" target="_blank" title="'+document.title+'"><img src="'+location.href+'.jpeg?size=480" alt="'+document.title+'" /></a>');void(0);

色付けした部分が出力されるHTMLを成形していますが、ここを変更すれば自分用のテンプレートにできます。

画像サイズを変更する

こちらで紹介したブックマークレットでは480pxの画像を出力するようにしています。
miilでは612pxが最大サイズのようですので、それ以下で好みの画像サイズにしたい場合はsizeパラメータを変更します。
※画像表示は公式APIを使わせていただいております
miil-apis/Japanese at master · FrogAppsDev/miil-apis · GitHub
320pxにしたい場合のHTML部分のみ抜粋(改行・インデント付き。実際には1行で書く)

<a href="'+location.href+'" target="_blank" title="'+document.title+'">
<img src="'+location.href+'.jpeg?size=320" alt="'+document.title+'" />
</a>

他、固定のテキストを追加したりすす場合もこのHTML部分を書き換えればOKです。

まとめ

スマホで完結することができるサービスなのでブログに貼り付ける需要がどのくらいあるのか分かりませんが、ユーザーページもできたことですし、PCで閲覧する人も増えるんじゃないかと思います。
ま、ボクはラーメンばっかりなのであまりブログに貼ることはなさそうですがww
※ブログに貼り付けるのは自分で投稿した写真だけにしましょう。→miilの利用規約

-Bookmarklet, 開発実績

執筆者:

関連記事

no image

第15回:見ているページをAnother HTML-lintで文法チェックするブックマークレット

サイトを作ったら、見た目の確認も重要ですがマークアップの文法チェックも重要です。別にW3C信者という訳ではありませんがSEOの面でもstrictなHTMLの方が良さそうなのでできる限り対応した方が良い …

「TwitGIF」TwitterのつぶやきをアニメーションGIF画像にしてくれるジェネレーター

TwitGIF という Twitter Badge Generator を作りましたので公開します。 ・TwitGIF : Generate a GIF Animation Image Badge F …

「AmaQuick」が価格取得を強化!Amazon価格表示についての注意事項まとめ

大きなデザイン変更を行い、Chrome拡張機能として復活したAmaQuickですが、その後も細かいアップデート対応を行っています。このブログで紹介していなかったのですが、v1.0.2では価格取得に対応 …

Twitterを使ったテキスト中継を強力にサポートする「TweetTheMinutes」がChrome拡張で復活

もう3年も前の話になりますが、セミナー・勉強会などの内容をハッシュタグとともにTwitterに実況中継する手法が確立し始めたころに、「TweetTheMinutes」というGreasemonkeyスク …

「Ust DL」アップデートと公式ページ公開

少し前から、Ust DLが使えなくなったという報告があり、とりあえずuserscripts.orgのソースはアップデートしたりしていたのですが、ブログではとくに報告できていませんでしたのであらためてア …

スポンサードリンク

スポンサードリンク