azucky824 
どうも。大したことはできませんが、たまにプログラミング熱が爆発することがある、あずき （@azucky824 ）です。
みなさんはブログ記事ってどれくらい読みますか？まぁそもそもここに来てくださっているくらいなので、日頃からブログを読まれる方なのかもしれませんね。
さて、ブログを読んだ時、TwitterやFacebookでシェアをされる方もいらっしゃることと思います。実は最近僕がちょっと不便に思っていたことがありました。それは、ブログには「アイキャッチ画像」っていう、その記事のテーマを端的に表すような写真なり画像が設定されています。
誰かにシェアするときに、それも一緒にできないかなって。
んで、こんなアプリがあったので試してみたんです。
確かに凄く便利だったんだけど、アイキャッチ画像に辿り着くまでにいくつかの操作が必要なケースがあったり、パソコンからだと使えなかったり、個人的にiPhoneアプリじゃ対応しきれないくらいの要望というか「ちょっと欲しいものと違う感」がでちゃったわけで。
ないなら自分で作ればいいんじゃね？ってことで、ブックマークレットで作ることにしました。
TweetBotを使うことにした
まず、モバイル端末でもパソコンでも使えるようにしたかったので、URLスキームが使える上に愛用しているTweetBotへ送るブックマークレットにすることにしました。
価格: ￥600
カテゴリ: ソーシャルネットワーキング, ユーティリティ
App Storeで詳細を見る
△iOS版
△こちらはMac版。
作ったブックマークレット
んで、実際に完成したものはこちら↓↓
△もし改行が入っていたら消して下さい。
ブックマークレットの登録の仕方はこちらの記事がわかりやすくてオススメです。
何をしているのか、ざっくりと解説
このブックマークレットがなにをしているかというと、表示しているページの「OGP情報」というものを読み取っています。
OGPというのはThe Open Graph protocolの略でフェイスブックを始めmixiやGoogle＋等のSNSとウェブページを連携させるための情報をコンピュータが読めるように記述したものです。
△上記サイトではこのように説明されています。つまり、SNSにシェアする時にどの画像を表示するか、どのタイトルで表示するか、そんなことを定義してくれている、というわけ。
アイキャッチ画像として設定されていること自体は、ブックマークレットから調べようがなかったのですが、このOGP情報で設定されている画像ならば、ほぼ１００％アイキャッチとして使われている画像だろうと考えました。
その情報はHTMLコード内の＜meta＞というコードに記述されているので、そのタグを探して読み込んでいます。
今回は画像のURLだけを使っていますが、概要やタイトルなども同じ方法で取得できるので色々と応用出来そうです。
そこで取得した画像のURLと記事タイトルおよびリンクをTweetBotアプリにスキームを使って渡しているという仕組みです。
もしOGPの設定がされていなかった場合は、タイトルとリンクのみになっていますので、一応どのページでも使えるはずです。このへんは試してみて動作報告してもらえると助かります。
注意点
色々と環境を変えてテストをしていたのですが、今のところiPhoneのGoogle Chromeではブックマークレットが使えないようになっているようです。そもそも対応していないという情報もありました。
なので、URLスキームの引数に、コールバックといってツイートが終わるとSafariに戻ってくるように設定してあります。この設定が要らないって方は下のを使って下さい。
まとめ
ブックマークレットで使うJavascriptは比較的取っ付き易いプログラミング言語だと聞きますが、独学の僕でも調べればやりたいことが出来ます。頭の体操がてらちょこちょこ弄くるのは楽しいので、未経験の方でもちょっと勉強してみたらいいんじゃないでしょうか。
今回作ったブックマークレットは使って頂いて構いませんし、なにか改造して自分なりに使って頂いてもOKです。もっと良い書き方や方法があったら是非教えて下さい。
それではこのへんで！あずき （@azucky824 ）でしたー。