Gyazo + Amazon CloudFront で簡単☆高速スクリーンショット共有

確かに Dropbox にファイルを保存して public url だとちょっと遅い。自分は Gyazo で撮ったスクリーンショットを dropbox に放り込んで blog に貼る、というのを一時やってたけど GET が遅いので結局やめてしまった。

Gyazo x Dropboxで簡単スクリーンショット共有 - プログラミングノート

ここにやり方がある。相当に便利なんですけどね。

さて、「遅いのがリージョンのせいなら速いリージョンにして更にCDNを挟めばいいじゃない」ということでちょこっと Quick Hack してみるとしましょう。Gyazo の画像保存先を Amazon S3 にして、S3 に保存された画像を CloudFront (AWS の CDN) で配信するように変更してみます。あらやだ便利･･･！でも従量課金＼(＾o＾)／

ちなみにわざわざ CloudFront を使わなくても Tokyo リージョンの S3 を選択して S3 で直接配信する、クラウドデザインパターンで言うところの Direct Hostingパターンでも国内からなら十分速い。

必要なもの

AWS のアカウント
Amazon S3
Amazon Cloud Front (オプション)
OSX
OSX版の Gyazo

下準備

S3
- files.bloghackers.net とか適当な Bucket を作る
- AWS Policy Generator か何かで GetObject * なポリシーを作って適用しておく
- (CloudFront を使わない場合: Permission で "Enable website hosting" を設定する)

CloudFront を使う場合
- CloudFront で前述の Bucket を向くように設定する
- cdn.bloghackers.net でアクセスしたかったので、DNS Alias を設定

ちなみにこの辺の設定方法は Amazon Web Services クラウドデザインパターン実装ガイドなんかで詳しく解説されてる。

Gyazo を hack する

Gyazo のスクリプトは /Applications/Gyazo.app/Contents/Resources/script に ruby で書かれたものがある。これを書き換えます。http://d.hatena.ne.jp/ntaku/20111114/1321238135 にあったスクリプトで Dropbox に保存している箇所を、 S3 に保存するように変更する。

自分は AWS のキーとかをあちこちのスクリプトにハードコードしなくていいように pit で保存してるので、アクセスキーと秘密鍵は pit から引っ張ってくるようにしてある。

aws-sdk
pit

を gem で入れておきます。

#!/usr/bin/env ruby

require 'aws-sdk'
require 'pit'

## capture png file
tmpfile = "/tmp/image_upload#{$$}.png"
imagefile = ARGV[1]

if imagefile && File.exist?(imagefile) then
  system "sips -s format png \"#{imagefile}\" --out \"#{tmpfile}\""
else
  system "screencapture -i \"#{tmpfile}\""
  if File.exist?(tmpfile) then
    system "sips -d profile --deleteColorManagementProperties \"#{tmpfile}\""
  end
end

if !File.exist?(tmpfile) then
  exit
end

## Upload to Amazon S3
config    = Pit.get('www.amazlet.com')
s3_bucket = 'files.bloghackers.net'
endpoint  = 'http://cdn.bloghackers.net/'
path      = "images/#{Time.now.strftime("%Y%m%d_%H%M%S")}.png"
url       = endpoint + path

s3 = AWS::S3.new(
  :access_key_id     => config['aws_access_key'],
  :secret_access_key => config['aws_secret_access_key'],
  :s3_endpoint       => 's3-ap-northeast-1.amazonaws.com', # 東京リージョン
)

bucket = s3.buckets[s3_bucket]
unless bucket.exists?
  s3.buckets.create(s3_bucket)
end

bucket.objects[path].write(:file => tmpfile, :content_type => 'image/png')
system "echo #{url} | pbcopy"
system "open #{url}"

File.delete(tmpfile)

ちなみに Gyazo は ruby をシステムのそれを使おうとするので、rbenv なものに切り替えるのに、AppSettings.plist を書き換えています。

diff --git a/Contents/Resources/AppSettings.plist b/Contents/Resources/AppSettings.plist
index 73716be..f3de0e6 100644
--- a/Contents/Resources/AppSettings.plist
+++ b/Contents/Resources/AppSettings.plist
@@ -15,6 +15,7 @@
        <key>RequiresAdminPrivileges</key>
        <false/>
        <key>ScriptInterpreter</key>
-       <string>/usr/bin/ruby</string>
+       <!-- <string>/usr/bin/ruby</string> -->
+  <string>/Users/naoya/.rbenv/shims/ruby</string>
 </dict>
 </plist>

以上で、Gyazo アプリを起動してスクリーンショットを撮るとブラウザが開いて CloudFront 経由 S3 の URL で画像がオープンされます。クリップボードには画像の URL が入ってるので、blog に貼るときはそのままペーストすればおｋ。万歳！

Gyazo 以外のファイルも同じ経由で公開したいときは適当な S3 クライアントで同バケットに放り込めば ok。自分は 3Hub というのを使ってます。