プライベートGyazoサービスの構築

スクリーンショットをサーバにアップロードしてURLで共有できるGyazoというサービスがあります。
このOpen Source ClientのコードがGitHubにあるので、これでプライベートGyazoサービスを構築します。

今回の構成は

  • クライアント
    • Windows 10
    • gyazo/Gyazowinをもとにアップロード先URLを変更したものを作成
  • サーバー
    • Ubuntu 14.04
    • gyazo/GyazoのServerにあるRubyスクリプトを使う
    • Gyazoサーバプログラムはインストールから動作までDocker内で行う
    • アップロードされた画像、プログラム内部で利用するデータベースのような動的生成されるデータはdockerのマウント機能を使ってサーバ上に保存する

という形にしました。

サーバー側

必要なもの

  • Docker (記事執筆時に利用したのは1.7.1)
  • サービス用のドメイン

ドメインは http://~ でアクセスできるようにDNSで関連付けておいてください。

今回はgyazo.example.jpとしました。

  1. Gyazo用のディレクトリを作成
    mkdir gyazo
    cd gyazo
    
  2. Dockerfileを作成

    11行目の[SERVERDOMAIN]はサービス用のドメインに置き換えてください。

    例)

    RUN sed -i -e "s/gyazo.com/gyazo.example.jp\/data/" /usr/local/apache2/htdocs/upload.cgi
    
  3. イメージを作成

    docker buildでイメージを作成します。イメージにgyazoという名前を付けます。

    docker build --rm -t gyazo .
    
  4. gyazoイメージからgyazoという名前でコンテナを起動する
    docker run -d -p 80:80 --name gyazo -v `pwd`/data:/usr/local/apache2/htdocs/data -v `pwd`/db:/usr/local/apache2/htdocs/db gyazo
    
  5. http://gyazo.example.jp にアクセスして動作を確認

    「It’s works」がでればOK。

    Itsworks

クライアント側

必要なもの

  • Visual Studio 2015 Community (本記事ではインストール時に既定でインストールしています)
  1. ソースコードの取得

    gyazo/Gyazowinからソースコードをクローン、またはダウンロードします。今回はZIPでダウンロードしました。

  2. ZIPを展開して中にある、「gyazowin.sln」をダブルクリックで開く

    gyazowin.slnはVisual Studio 2015よりも古いフォーマットのファイルのため、アップグレード警告が表示されます。そのままアップグレードします。
    またVC++の開発環境がない場合、ここで追加インストールのウィザードが始まるのでインストールしたのち、gyazowin.slnを開きなおします。

    Upgrade_1Upgrade_2Upgrade_3

    InstallVC_2
    InstallVC_3

  3. コードの編集

    gyazowinはスクリーンショット画像をgyazoに送信する機能を持っていますが、送信先はソースコードにハードコーティングされているため、そこを今回用意したサーバへ変更します。

    gyazowin.cppの794行目のupload.gyazo.comgyazo.example.jpに変更します。

    Diff_gyazowin

  4. ビルドの実行

    1. メニュー「ビルド」の下にあるソリューション構成を「Debug」から「Release」に変更する
      Build Settings
    2. メニュー「ビルド」→「ソリューションのビルド」でビルドを実行

    正常に終了すれば、Releaseディレクトリが作成され、中にgyazowin.exeが生成されます。

  5. 実行確認

    1. gyazowin.exeを実行する
    2. カーソルが十字になる
    3. スクリーンショットを撮りたい範囲の左上をクリックしたまま、右下までドラッグ
    4. 指を話すと、スクリーンショットがgyazo.example.jpにアップロードされたのち、アップロード先URLで既定のブラウザが起動される。
      Gyazowinフォルダのエクスプローラをスクリーンショットしたもの
    5. サーバのdockerを起動したディレクトリの直下にdataディレクトリが作成され、そこにアップロードされた画像が配置する
      server_upload_images

備考

参考