yuiseki: gyazo hackathon 2020

経緯 | Background
衝撃の事実 | Shocking facts

rakusai, CEO of Nota Inc. says "yuiseki, You have discretion to giving Gyazo Pro to someone"
というわけで面白くて流行りそうなGyazo対応アプリケーションを作った人にGyazo Pro 1年分あげちゃおうと思います
So I will gift 1 year licence of Gyazo Pro for Developer who create useful application that supports Gyazo
怒られたらやめます
This campaign will stop If I get angry from colleague

先着10名!!!!ってことにしておきます
This campaign will finish first 10 person
GyazoAPI開発相談用のSlackがあります!!このハッカソンへの参加を検討している方はぜひ入ってください!!
There is slack for Developer of Gyazo Application!
レギュレーション
GyazoのAPIを使ってGyazoに画像をアップロードするアプリケーションであること
Application must be support Gyazo API and support upload to Gyazo
ブラウザエクステンションでもネイティブアプリでもターミナルで動くスクリプトでもOK
Any of Browser Extention, Native application or terminal script is OK
GitHub等を使って開発を進める、オープンソースなアプリケーションであること
Application must be opensource, for example, using GitHub platform
=個人専用ではなく、ある程度誰でも使えるようなアプリケーションであること
Application must not working only your account, must working for other Gyazo users.
ソースコードのクオリティをyuisekiがレビューできること
Application must allow to review source code by yuiseki
要望があったり問題があったら改善できること
Application shoud accept issues and improvements
そうきたか!と唸るような独創的なものであること
Application must be creative like shouts "Wow!! Very creative!!"
ウオー便利!!と叫んでしまうような実用的なものであること
Application must be practical like shouts "Wow!!! Very convenient!!"
yuisekiにTwitterのDMで連絡を取って作ってるぞ!!/作ったぞ!!と知らせること
Developer must contact twitter account yuiseki by direct message.
yuisekiのTwitterは引用RTもメンションもすべて無視しているので絶対にDMで連絡するべし!
yuiseki does not check any notification of Reply and Quote RT, so developer must contact direct message!
趣旨&備考
これまで想像もしていない面白くて便利でニッチなユースケースに特化したようなアプリケーションが現れれば、そのアプリを使いたいという理由で結果的にGyazoユーザーが増える……といいな!!と思っています
一日1000枚とかアップロードしても問題ないので、負荷とか気にせずGyazoを使いまくる面白い方法を考えてほしい
公式の実装例
gyazo official browser extention
https://github.com/gyazo/gyazo-browser-extension
https://chrome.google.com/webstore/detail/gyazo/ffdaeeijbbijklfcpahbghahojgfgebo?hl=ja
gyazo official linux client
https://github.com/gyazo/Gyazo-for-Linux
Gyazo Pro 授与された人々
ssig33 video-capture
https://github.com/ssig33/video-capture
ショートカットキー一発で、あらゆる動画をキャプチャしてGyazoにアップロードできる
Gyazoへのアップロードを実装する方法
DeviceIDが未知の場合の静止画のアップロードAPI
gyazo.comのeasy_auth apiを使うのが最も簡単
アップロード後にブラウザでGyazoを開いたタイミングでそのユーザーが所有する画像になるしくみ
公式ドキュメント
https://gyazo.com/api/docs/image
Gyazoアプリケーションを申請する必要がある
https://gyazo.com/oauth/applications
New Applicationをクリックしてフォームを適当に埋める

ここをクリック

ここの画面のclient_idをメモする!

実装例
https://github.com/gyazo/gyazo-browser-extension/blob/master/src/libs/postToGyazo.js
https://github.com/ssig33/video-capture/blob/master/src/pages/Background/gyazo.js
Content-Type
multipart/form-data
POST https://upload.gyazo.com/api/upload/easy_auth
client_id
required
string
エンコーディング:ASCII
image_url
required
string
エンコーディング:base64 ASCII
画像バイナリをbase64エンコードしたものをdata:スキームでURL文字列にしたもの
https://ja.wikipedia.org/wiki/Data_URI_scheme
例
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==referer_url
required
string
エンコーディング:ASCII
キャプチャしたWebサイトのURL
title
optional
string
エンコーディング:UTF8
キャプチャしたWebサイトのタイトル
DeviceIDが既知の場合の静止画のアップロードAPI
macOSの場合
~/Library/Gyazo/id にDeviceIDがある
Windowsの場合
%APPDATA%\Roaming\Gyazo\id.txt にDeviceIDがある
実装例
https://github.com/gyazo/Gyazo-for-Linux/blob/master/src/gyazo.rb
Content-Type
multipart/form-data
POST https://upload.gyazo.com/upload.cgi
id
required
string
エンコーディング:ASCII
DeviceIDを指定する
file_name
required
string
エンコーディング:UTF8
ファイル名を指定する
面倒だったら空文字でもOK
検索とかに使えるので便利
imagedata
required
string
エンコーディング:base64 ASCII
画像バイナリをbase64エンコードしたものをdata:スキームでURL文字列にしたもの
scale
requied
float
エンコーディング:ASCII
画面のDPI Scaleを指定する
たとえば4Kのディスプレイで150%表示にしてるときは1.5を指定する
created_at
optional
string
エンコーディング:ASCII
ファイルの作成日時にしたいunixtimeを指定する
Gyazo内では作成日時順に並ぶのでそれをコントロールしたければ必要
このフィールドを指定しないと、アップロードした日時がcreated_atになる
metadata
optional
string
エンコーディング:UTF8 JSON
検索とかに使えるので便利
以下のKey-Valueをjsonでシリアライズした文字列
app
アプリケーション名
title
画面/画像のタイトル
url
リファラーURL
desc
その他description
ここに #hoge とか書いておくとGyazo内検索用のハッシュタグになるので便利