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

第13回:URLエンコードとURLデコードを簡単にするブックマークレット

URLエンコードとURLデコードって頻繁には使わないけど、いざ使う時は適当にGoogleで検索して出てきた変換サイトを使っていたりしました。 この辺とか、 URLエンコードとデコードが行えるフォームで …

Twitterテキスト中継のサポート「TweetTheMinutes」のUserScript更新

先週公開しましたTweetTheMinutesのChrome拡張がそこそこ反応があって嬉しいですw てか、まだ「tsudaる」って言葉って使ってるんですかね?自分がChromeをメインブラウザとして使 …

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

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

YouTube HD Suite を修正しました(2009-02-13)

YouTubeをとにかく最高画質のHDで楽しみたい人のためのGreaseMonkeyスクリプト「YouTube HD Suite」を更新しました。 主な変更点は下記の通りです。 1)修正:再生ページ( …

「Hatebu Entry List」でサイト内はてブ一覧をまとめて確認

「はてブ Fans Ranking」の拡張版を作ろうと思ってゴニョゴニョしてたら思わぬ副産物ができてしまったので、これも公開しちゃいます。 調べたいURLを入れて「調べる」をクリックすると、そのサイト …

スポンサードリンク

スポンサードリンク