
前の記事でShareHtmlのサムネイル作成に”HeartRails Capture”を使うデメリットについて書きました。
で、”HeartRails Capture”を使わずに同じような事はできないかぁと試行錯誤した結果、少なくとも自分で使う分には問題ないレベルの代替案が出来たので公開してみます。
目次
どんな代替案ができたのか?
どんなものができたのか書いてみます。

▲このはみでるカルビの記事すごいわーうまそうだわー。リンク貼りたいわーマジ貼りたいわー。
と思ったとします。

▲サムネイルにしたい箇所をみんな大好きskitchでキャプチャします。

▲キャプチャした画像をとあるフォルダに放り込みます。

▲すると、こんな感じでクリップボードにコピーしたというメッセージが出ます。

▲クリップボードにはこんな文字列がコピーされています。

▲ブラウザから見るとどうなるか、MarsEditのプレビュー画面で見てみるとこうなってます。
…あれ?フォルダに画像を放り込んだだけで、サムネイル付きの外部リンクができちゃったの!?これはもしやめっちゃ便利なのでは!?(自画自賛)
どうやってこんな簡単にサムネイル付きの画像リンクを作っているのか?
仕組みとしてはMacのフォルダアクションという機能を使っています。フォルダアクションというのはフォルダに何かファイルが入ったタイミングで自動的に何かしらの処理を行ってくれるというものです。
それを使って、フォルダに画像を放り込んだら自分のサーバーに画像をアップロードして、さらにリンクまで作ってくれる処理を作ってみました。
簡単にサムネイル付きの画像リンクを作るフォルダアクションの作り方
さて、実際の作り方です。作成にはMac標準のアプリ、Automatorを使います。ロボットみたいなアイコンのあいつです。

▲こいつ↑
さて、どんな処理を使っているかですが、少ないです。

▲「イメージをサイズ調整」と「AppleScriptを実行」の2つだけですね。
メインの処理はほぼAppleScriptでやっています。
AppleScriptのコードはこちらのリンクで公開しておきます。
簡単に流れを説明します。
フォルダに画像が放りこまれたら、まず「イメージをサイズ調整」を行います。この場合150ピクセルにしていますがそこはお好みで変更してください。
「イメージをサイズ調整」が終わると画像ファイルのパスがAppleScriptの処理に渡されて処理が始まります。
AppleScriptの中の流れをざっくり言うと、Chromeで開いているページのURLとタイトルを取得。この時取得したURLをサーバーに上げる時のファイル名として使っています。
ただ、ファイル名がやたらと長くなるのは嫌だったので適当に削っています(20行目くらい)。
あと、Chromeから取得したURLに日本語が含まれているとURLエンコードされたものが取れちゃって、それをサーバーにアップするとファイル名がおかしくなったので、わざと一度URLデコードしています(17行目くらいでJavaScript呼んでるところ)。
更に更に、サーバーにアップしたファイルに”/”とかhttpとか入るのが嫌だったのでそれも削っています(24行目から33行目くらい)。”/”はハイフンに置換しています。ハイフンが嫌な方は好きなように変えれば良いと思います。
サーバーにアップするファイル名が完成したら、Macの”curl”というコマンドを使ってftpでサーバーに上げています。
サーバーに上げたら、今度はクリップボードにHTMLのコードをコピーします。
コードの中にあるcreateHtml1〜6までの変数にセットしてるやつ(43行目から48行目くらい)とリンクしたいページのURLやタイトル、アップロード先のURLをがっちゃんこして、set the clipboardでクリップボードにコピーしています。
するともうクリップボードの中にHTMLが入っているので、貼りつけるだけでリンクの完成!まぁ便利!
使う前の下準備
使う前の下準備として、AppleScriptの先頭の所にある”property”って書いてあるやつに設定をしないといけません。
“user”にサーバーのftpのユーザー名。
“passwd”にサーバーのftpのパスワード。
“server”にftpサーバーのアクセス先。
“uploadDir”にftpサーバー内の、画像をアップロードしたいディレクトリ。ここで指定するディレクトリは先に作っておいてくださいね。
“myBlog”に自分のブログのURL。
これらはダブルクオテーション(“)で挟んでおいて下さいね。
画像をアップロードするディレクトリは/wp/から始まるものにしていますがご自身の環境に合わせたものに変えてください。
これがちゃんと設定出来ればうまく動くはずです。動かない場合はおそらくどっかの設定が間違ってます。
どこが間違っているか調べやすくなるように、デバッグ用のコード入れときました(親切!)。
41行目にdisplay dialogと書いてあります。今はハイフン2つでコメントアウトしていますが、ハイフンを消すと、ダイアログとして、”curl”コマンドの内容が表示されるので、ファイルパスとかおかしくなってないか確認できます。
他にも値をチェックしたいところではとりあえずdisplay dialogを突っ込んで値を確認すればいいんじゃないかと思います。
このツールのいいと思ってるところ
まずは楽ちん。一回作っちゃえばこんな簡単にサムネイル付きの外部リンクが作れるなんて!
次に、人によって好きに生成するHTMLを作れるところ。
createHtmlに設定している値を変えれば好きな様に見た目をいじれるのでどうぞお好きな様に変えちゃってください。わかる人ならすぐ自分のブログにマッチする様にカスタマイズできると思います。
あと画像だったら別にキャプチャした物じゃなくても好きな物を設定出来ること。例えばだけど、自分のTwitterのページを開いておいて、フォルダアクションを設定したフォルダにTwitterアイコンの画像を放り込んだら、簡単にTwitterアイコンに自分のTwitterページのリンクをくっつけたり出来るってわけです。
上記の例ではskitch使ってますけど、別に画像をキャプチャするアプリならなんでもいいわけで、もっというとキャプチャしなくても既に持ってる画像をフォルダに放り込むだけでいいわけです。あら便利。
制限事項などなど
Macのフォルダアクションを使っているのでWindowsユーザーには使えないです。当たり前だけど。
今、画像ファイルはjpg固定にしています。pngが良いよう!っていう方はScript内のjpgってところをpngに変えればいいと思います。
ChromeのアクティブなページのタイトルとURLを取得するので、フォルダに画像を放り込んでからScriptが動き出すまではタブを変えたり別のページを開いたりしないでください。目的のページをアクティブにしておくこと。これ大事。
また、ブラウザChrome使ってないっていう人はページのタイトルとURL取得するところの処理を変える必要があります。ここでは書きませんが、需要があるなら他のブラウザ版も公開するかもしれない。しないかもしれない。
あとftpで画像を上げるので、使えるのはftpに対応したサーバーを使っている人だけですね。まぁWordPress使っている人なら大体はftp使えるサーバーだと思います。
気に入った方はご自由に使っていただいて構いませんが、動作保証はしません。自己責任の上ご利用下さい。一応の動作確認は行っています。動作確認を行った私の環境はMac OS X 10.9.2です。
AppleScriptを初めて書いたので書ける人から見たらおかしいところがあるかもしれません。ご指摘いただけるとうれしいです。よろしくお願いします。
ダウンロードはこちらから
上でソースを公開しているので、ご自身で作れる方は作っていただいて構わないのですが、それすらめんどくせえって言う人のためにまるっとダウンロードできるリンクを公開します。100円で。
noteで公開するので、「おお兄ちゃん面白い物つくったやんけ!」などと思っていただけた方は100円投げ銭していただければ、僕が今後おんなじ様な便利ツールを作るモチベーションになるかもしれません。よろしくお願いします。