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, 開発実績

執筆者:

関連記事

祝!「やまざきメソッド ジェネレーター」でほってんとり!

一昨日公開した「やまざきメソッド ジェレネーター」がはてなブックマークの「ほってんとり」になりました。 そこでサクサクやまざきメソッドを作れるwebサービスをつくっちゃいました。 やまざきメソッド ジ …

JavaScriptでSLを走らせる「SL.JS」を作りました

開発に関わっていて、UNIX(Linux)を触った事のある人は「SLコマンド」をご存知の方が多いのではないでしょうか? lsを間違えてslと打つとこんなのが煙を吹きながら走る sl(1) コマンドを作 …

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

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

no image

「Topsy in Hatebu Entry」はてなブックマークのコメント一覧にTwitterでの言及を追加するGreaseMonkey

Twitterが着々と広まるにつれ、ソーシャルメディアでの人気度を図るための定番がソーシャルブックマークからTwitterに移行しているような気がします。とはいえ、いまだにはてブはチェックしたりするの …

no image

GYM Search を少し調整しました

少し前にGYM Searchというサービスを公開していました。 主要な検索エンジンとして知られている、Google、Yahoo!、MSN Live Search、から同時に検索結果を取得し一覧表示しま …

スポンサードリンク

スポンサードリンク