ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

gyazo_logo

Labels:  DevOps 投稿者:satoshi

[Gyazo] 今更聞けない?簡単画像共有アプリ Gyazo のプライベート環境構築方法

こんにちわ!ランサーズのsatoshiです。

今回は、ランサーズの開発メンバーがスクリーンショットの共有に利用している Gyazo という技術についてご紹介したいと思います。

Gyazo とは?

gyazo_logo_large

Gyazo とはもともと、「スクリーンショットの瞬間共有」というキャッチフレーズで知られる無料の画像アップロードサービスのことです。ユーザーは Gyazo に画像を投稿するための専用のクライアントをダウンロードする必要があります。このクライアントを起動すると、すぐにマウスが画面キャプチャモードになります。この状態でスクリーンショットを撮影する範囲を指定すると、すぐにアップロードが始まります。アップロードが完了すると、その画像 URL がアップロードした人の手元に返ってきます。

Gyazo は、このように少ない手数でスクリーンショットを「瞬間共有」できるため、便利なツールとして人気を博しています。

そんな便利な Gyazo ですが、弱点もあります。それは、一度 Gyazo のサーバーにアップロードしてしまった画像は一般に公開されてしまうほか、削除が困難だといった点です。こうした理由から、機密情報や開発中の製品・サービスに関わるスクリーンショットは、あまり Gyazo に向いているとはいえません。

Gyazo
https://gyazo.com/ja

Gyazo の弱点を補うプライベート Gyazo

そこで登場するのが、プライベート Gyazo という運用です。プライベート Gyazo の詳細に入る前に、もう一度 Gyazo の機能をサーバー側・クライアント側に分けておさらいしておきましょう。

  • クライアント: 指定された範囲の画面キャプチャを撮影し、特定のサーバーに対して POST 形式で画像を送信する
  • サーバー: クライアントが送信した画像のデータを保存し、その URL をクライアントに返却する

こうしたサーバー・クライアントの機能ですが、実はこれらは両方ともソースコードが公開されています。特に、Ruby で書かれているサーバー側の CGI スクリプトは非常に簡素なものに鳴っています。クライアント側についても、Gyazo 公式のアプリケーションでは Gyazo のサーバーにしかアップロードができませんが、指定したサーバーにアップロードを実行できるようなクライアントを有志の方が作成されています。

これらの公開されたコードを使って、社内専用のサーバーに Gyazo 環境を構築できれば、先述した機密性に関する問題は解決できます。また、サーバーに FTP や SSH でアクセスできるような環境と知識さえあれば、誰でもアップロードした画像を削除できるようになります。

社内 Gyazo のコード例

以上を踏まえて、社内 Gyazo 環境を構築してみましょう。前提として、以下の様な環境を想定します。ここで、dev.xxx.net は社内からのみアクセス可能な開発環境とします。

  • アップロード用スクリプトを配置するサーバー: upload.dev.xxx.net
  • CGI スクリプトへのパス: upload.dev.xxx.net/upload.cgi
  • アップロードされた画像を格納するサーバー: gyazo.dev.xxx.net
  • 利用する HTTP サーバー: Apache 2.2.x
  • Ruby のバージョン: 1.9.x
  • Git のバージョン: 1.8.x

まずは、サーバーが上記のリクエストを上記設定のように捌くことができるように、httpd.conf を編集します。同時に、Gyazo を Ruby の CGI モードで動作させるための設定も書き加えます。

$ vi /etc/httpd/conf/httpd.conf

<VirtualHost :80>
    ServerName upload.dev.xxx.net
    DocumentRoot /var/www/gyazo/
</virtualHost>
<VirtualHost :80>
    ServerName gyazo.dev.xxx.net
    DocumentRoot /var/www/gyazo/img/
</virtualHost>
<IfModule mime_module>
    TypesConfig /etc/mime.types
    AddHandler cgi-script .cgi .rb
</IfModule>

続いて、Gyazo 関連のファイルを格納するディレクトリを以下のように作成し、Apache を再起動します。

$ mkdir /var/www/gyazo
$ mkdir /var/www/gyazo/img
$ sudo chown -R apache:apache /var/www/gyazo/img
$ sudo service httpd restart

次に、アップロード用のスクリプトを /var/www/gyazo/ 内に作成しましょう。スクリプトは GitHub にて公開されているので、それを利用しましょう。upload.cgi 以外は今回は必要ないので、コピー後は削除します。

$ git clone git@github.com:gyazo/Gyazo.git
$ cp Gyazo/Server/upload.cgi /var/www/gyazo/upload.cgi
$ rm -r Gyazo

最後に、クライアントを準備します。Windows からアップロードするのであれば、Gyazowin+ を利用しましょう。

gyazowin改造版 gyazowin+公開 – NV’s Blog
http://d.hatena.ne.jp/nvsofts/20090321/1237619040

ダウンロードしたら、gyazowin+.ini を以下のように編集します。

[gyazowin+]
upload_server=upload.dev.xxx.net
upload_path=/upload.cgi

use_ssl=no
ssl_check_cert=yes

use_auth=no
auth_id=
auth_pw=

up_dialog=yes
copy_url=yes
copy_dialog=yes
open_browser=no

以上までの設定が済んだら、gyazowin+.exe を起動してみましょう。マウスカーソルが十字型に変わります。この状態で画面の範囲を指定すると、該当箇所のスクリーンショットが瞬時にアップロードされます!

これまで Snipping Tools などを使っていた場合には、スクリーンショットの共有にかかる手間が飛躍的に削減できるはずです。社内サーバーをお持ちの方は、ぜひ導入を考えてみてください!

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
フロントエンドエンジニア
サーバーサイドエンジニア
コーポレートエンジニア
SREエンジニア

【新卒採用・その他】
21・22新卒
その他採用情報

関連記事

私はデジタルノマドです。世界中を旅しながらソフトエンジニアとして働いています。

日本語訳は後半に掲載しています :) I am digital nomad. I work as software engineer while traveling around the world. Yes, it is true! I work as so …

ハイパフォーマンスな開発合宿をする3つの秘訣

  おはこんにちばんは!ランサーズエンジニアの satoshi です。 今回は開発合宿のすすめ的記事を共有させていただきます。 はじめに ランサーズ開発チームでは年に一度、日頃の業務から身を置き、技術やサービスに向き合うために、都会の喧騒から離れ、自 …

Ruby Mechanize によるサービス監視のすすめ

こんにちわ。エンジニアの こじま です。 今回は,ランサーズのサービス品質を支える サービス監視システムのご紹介をします。 弊社プラットフォームは,複数の監視システムを導入して運用を実施しています。 システム 用途 (自社製)サービス監視システム サービス稼働 …