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

執筆者:

関連記事

Facebookにいいね!されたリンク先に長いパラメータが追加されるのを自動で短縮する方法

Facebookにいいね!された投稿などリンク先に遷移すると、上の画像のようにものすごく長いURLになってしまいますよね。Facebookのインサイト(解析)に使われているものと思われますが、このパラ …

no image

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

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

Gmailを固定ピッチの等幅フォント(MonoSpace)で表示する方法(2009年03月版)

以前作ったGmailを固定ピッチの等幅フォント(MonoSpace)で表示する方法(新Gmail対応)が動かなくなっていたので、修正版を作りました。以前のエントリーではユーザースタイル(userCon …

「Gyazo on Twitter RSS」TwitterにGyazoを張り付けているPostをダラ見するpipes

またまた、サクッとPipes作りました。 ・Pipes: Gyazo on Twitter RSS Twitterに貼られているGyazo画像ってかなり個人的なものが多い気がするので、他人のデスクトッ …

livedoor Readerにソーシャルメディアのカウンターを表示するUserScript「LDR with Social Media Counter」

ボク自身ツイッターツイッター言ってますが、情報集めとしてはいまだにRSSリーダーも使っています。で、前にlivedoor Reader に色んなSBMのブックマーク数を表示するGreasemonkey …

スポンサードリンク

スポンサードリンク