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

豊田正史さんとTwitterと「SL.JS」

なぜか、部屋とYシャツと私風のタイトルになっている点はスルーして下さいw SL.JSの評判を確認していると、な、なんとSLコマンドの生みの親である豊田正史さんがTwitter上で言及して下さっているの …

「ツイッター 会社と仕事はこう変わる」でツイポーートが掲載されました

全然知らなかったのですが、今月1日に発売のムックでツイポーートを紹介していただきました。ありがとうございます!

no image

はてブ200users超え!やまざきメソッドの反響多数頂きました

先日ほってんとり入りした「やまざきメソッド ジェネレーター」ですが、夏休み(前半)を過ごしているうちにたくさんのはてなブックマークとブログでのご紹介を頂いていました。はてブ数もさることながらやっぱりブ …

ツイポーート、リニューアル後1ヶ月の利用状況

GW前に「ツイポーート/twport」のversion3を公開してから、早くも1ヶ月経過しました。大幅なインターフェイス変更をしているので使って頂いている方たちの反応が気になっていましたが、ある意味予 …

no image

やまざきメソッドに学ぶ「制限によって生まれる使いやすさ」

実は、やまざきメソッド ジェネレーターのα版を社内公開した当初は登録できる項目数は任意でした。始めに項目数を自分で設定してフォームを出力、それから項目を入力みたいな。つまり、100項目とかもやろうと思 …

スポンサードリンク

スポンサードリンク