sekaie engineers' blog

セカイエ株式会社が主催するエンジニア勉強会について

社内での画像やりとりについて

まいどどうも中島です。
この記事は「セカイエ Advent Calendar 2015」の10日目の記事です。

Advent Calendarに参加するにあたってネタがなかったので、社内の問題をあげて解決していければなと思います。AdventCalendar駆動開発です。

今回は、社内での画像やりとりについて書きたいと思います。
ちょっとした画面の共有したいときなどに、スクリーンショット撮ると思います。
MacWindows も デフォルトの機能でキャプチャすることができますね。
個人だけで使うならこれで問題ありませんが、共有したいとなると、どこかのストレージにアップロードしなければなりません。

セカイエでは、ConfluenceGoogleDriveBox などにアップロードして共有したり、ChatWork で直接送り合ったりしています。

もっと手軽にやりとりしたいので、解決策をあげてみます。

案1. Gyazo Teamsを導入する

Gyazo Teams - 公式の「社内Gyazo」をクラウド上に一瞬で構築

¥500 /ユーザー/月
Gyazo Teams は、人数に比例してお金がかかるのでちょっと厳しいかもしれません。
(機能豊富でとても使いやすそうです。)

案2. 社内Gyazo を構築・運用する

オープンソースでも公開されている Gyazo を修正して 社内Gyazo を構築してみたいと思います。

OS XGyazo の中身は Ruby で書かれています。
クライアントは、HOST と CGI の部分を変更するだけでよさそうです。

HOST = 'upload.gyazo.com'
CGI = '/upload.cgi'

あとは、s3 などのストレージに渡してあげれば良いですね。
Sinatra で実装。

require 'aws-sdk-core'
require 'dotenv'
require 'tilt/erb'
require 'pp'

class App < Sinatra::Base
  Dotenv.load
  register Sinatra::Reloader
  $stdout.sync = true

  post '/' do
    object = s3_bucket.object(filename(params))
    object.upload_file(params[:imagedata][:tempfile], acl: acl)
    object.public_url
  end

  get '/' do
    erb :index
  end

  private

  def s3
    @s3 ||= Aws::S3::Resource.new(region: 'ap-northeast-1',
                                  credentials: Aws::Credentials.new(ENV['AWS_ACCESS_KEY_ID'], ENV['AWS_SECRET_ACCESS_KEY']))
  end

  def s3_bucket
    @s3_bucket ||= begin
      s3_bucket = s3.bucket(ENV['S3_BUCKET'])
      s3_bucket = s3.create_bucket(bucket: ENV['S3_BUCKET']) unless s3_bucket.exists?
      s3_bucket
    end
  end

  def filename(params)
    if  from_gyazo_app?
      extname = '.png'
    else
      extname = File.extname(params[:imagedata][:filename])
    end
    Time.now.to_f.to_s.delete('.') + extname
  end

  def acl
    'public-read'
  end

  def from_gyazo_app?
    params[:imagedata][:filename] == 'gyazo.com'
  end
end

Gyazo.app デフォルトの filename は、gyazo.com で POST されるので注意が必要です。

AWS などの設定はよしなに。 *1

Mac ユーザ以外をどうする問題

  • Windows アプリを開発(コンパイル)する環境がない。。。
  • Electron を用いて簡易的なクライアントを作ってみてもいいかもしれません。 (Windows, Mac 対応)

案3. 他のツールを導入する

Monosnap monosnap.com

特徴

  • Mac, Windows もアプリがある(サーバ、クライアントをメンテする必要ない)
  • ストレージを選べる(WebDAV, s3, box, Evernote, Dropbox, Box など)
  • キャプチャの機能が豊富(コメント、矢印、ぼかしなど)

機能も豊富で、とてもヨサソウですが、ストレージ先の鍵などを、ユーザ自身が設定しなければならなく、社内全員が使うとなると運用難しそうです。

今後

今回は、社内での画像のやりとりについて、紹介しました。
まだ案を挙げただけで、根本的なところは解決できていませんが、

  • クライアントアプリがあること
  • 管理(運用)を楽にすること
  • お金のこと

などを考慮すると案2 の社内Gyazo を導入していくのがヨサソウです。 現状は、Windows のクライアントが用意できてないので Electron を用いて簡易的なクライアントをつくっていきたいと考えています。 ※ Windows 環境用意してもらった方が早いかも!?

次回は、Electron 実装や全体的な構成も含めて紹介できればなと思います。(できるかな)

あしたは、田中さんによる Gulp.js どうするんだい! です!
楽しみですね。

ほな。

REF

*1:s3のACL。CDN(CloudFront, Fastly)などを用いてキャッシュなどなど。