半自動で写真をアップロードしたい俺達は

by Yoshihiro WADA

Slide 1

Slide 1 text

半⾃動で写真をアップロードしたい俺たちはどくぴー @e10dokup ⾼専カンファレンス in 東京 2018 (2018/7/15) @ DMM.com

Slide 2

Slide 2 text

突然ですが本⽇1時頃の画像を御覧ください

Slide 3

Slide 3 text

突然ですが本⽇1時頃の画像を御覧ください時間がな…⾜りなかったんや…

Slide 4

Slide 4 text

• 和⽥佳⼤ / どくぴー / @e10dokup • みぎのへんなのがめじるしだ！ • 明⽯⾼専 → 神⼾⼤学 → サイバーエージェント（今） • kosen10s っていう変な集団にいます • イベント運営巻き込まれおじさん • DroidKaigi • 情報科学若⼿の会 • etc. • 趣味：カメラ、ガジェット、レース観戦、レースゲーム⾃⼰紹介 ʗ΀ΒʔΜʘ

Slide 5

Slide 5 text

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

カメラ

Slide 8

Slide 8 text

• PENTAX K-S2を買っただけだと思っていた2年前 • 気付いたらレンズが3本増え • Sony α7IIが増えレンズの価格に震えおののき • 社内では広報なの？って⾔われるように沼にハマった

Slide 9

Slide 9 text

不注意で機材が多様化してしまった

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

楽しい！！

Slide 12

Slide 12 text

でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったしアップロードしちゃうぞ〜〜

Slide 13

Slide 13 text

でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったしアップロードしちゃうぞ〜〜

Slide 14

Slide 14 text

でもいろいろやっていると問題も… おおん

Slide 15

Slide 15 text

アップロード割とダルい問題

Slide 16

Slide 16 text

• いっぱい撮った写真のアップロード⽅法 • （厳選する） • 今回はここには⽬をつむることとする • Google PhotosやFlickrにD&Dして上がるのを待つ • 稀によく途中で失敗して悲しい気持ちになる • イベントなんかで写真をとる⼈になるとその⽇のうちに上げろ！とか⾔われる • 正直帰ってきたら眠くてそれどころではないアップロード割とダルい問題

Slide 17

Slide 17 text

我々は半⾃動でアップロードをしたいのだ

Slide 18

Slide 18 text

考えていきましょう

Slide 19

Slide 19 text

• SDカードからPC等のデバイスに持っていきたい • カメラについてきているWi-Fi機能を使う • カメラがアクセスポイントにしかならないやつもあるのでなんか微妙 • そもそも各社の連携アプリが… :thinking_face: • PCにマウントしたら撮った写真を捜索するスクリプトを書く • えっ、PC⽴ち上げるの…？撮影写真取得の部

Slide 20

Slide 20 text

今回は…

Slide 21

Slide 21 text

• みんな「使える！！」「これは遊べる！！」って思って買ったもののあまり使っていないおもちゃ個⼈的第1位今回思いついた作戦

Slide 22

Slide 22 text

• みんな「使える！！」「これは遊べる！！」って思って買ったもののあまり使っていないおもちゃ個⼈的第1位今回思いついた作戦東芝 FlashAir

Slide 23

Slide 23 text

• Wi-Fiにつながったり、Luaでスクリプトを組めたり、GPIOが  喋れたりする不思議なSDカード • 今だと64GBが6000円くらい • ⼦機としてルータにぶら下げられるので、FlashAirから写真を取得する端末はネットに繋がったままにしていられる • FlashAirの死活管理（？）的なことをしつつ、LAN内にFlashAir が⾒つかったらFlashAirから写真をもらってくると⾏けそう FlashAir is

Slide 24

Slide 24 text

• 取得した写真を即座にアップロードしたい • 可能ならばPCを起動させずに • そこらへんの⼩型端末を使うのが⼀番良さそう • Android端末 • どうせ古い端末がいっぱい余っている • Raspberry Pi • みんな買ったけど積んでいるのがありそう撮影写真アップロードの部

Slide 25

Slide 25 text

• ではどこにアップロードしよう…？ • Google Photos • API経由でのオリジナル画質でのアップロードが不能 • Picassa Web APIで圧縮画質なら上げられはするが… • Flickr • APIはちゃんとある、オリジナル画質でも⼤丈夫 • JavaのWrapperがあるにはあるが最終更新が2014年… 撮影写真アップロードの部ところが

Slide 26

Slide 26 text

きちゃった♡

Slide 27

Slide 27 text

• Google I/O 2018でロンチ • Google OAuth2によるユーザ認証 • AndroidならTokenがスパッともらえる、楽 • Picasa APIでは出来なかったオリジナル画質アップロードに  ようやく対応 • もはや個⼈的にこれを使いたい • 使いたいドリブン • 割とみんなGoogle Photosだし… Google Photos API爆誕

Slide 28

Slide 28 text

APIも多様化するのだ

Slide 29

Slide 29 text

• FlashAirがLAN内で⾒つかったらファイル⼀覧を取得 • ファイル⼀覧をたどってFlashAirから端末にファイルを取得 • 取得したファイルをGoogle PhotosにAPI経由でアップロードというわけで作戦 ϧʔλ

Slide 30

Slide 30 text

FlashAir  ↓  端末

Slide 31

Slide 31 text

• FlashAirのIPアドレス以降にパスをつなげてHTTP GETすることでファイルを取得できる • ファイル⼀覧は…？ • FlashAirにはデフォルトで command.cgi というCGIが装備されており、このCGIにリクエストを送ることでいろいろな情報が得られる • ファイル⼀覧が欲しい場合はクエリパラメータとして  op=100 を、参照ディレクトリに dir=<ディレクトリ>   を与える FlashAirからファイルを取得する

Slide 32

Slide 32 text

• 例：FlashAir直下のDCIMの中が⾒たい •/command.cgi?op=100&DIR=/DCIM FlashAirからファイルを取得する WLANSD_FILELIST /DCIM,100__TSB,0,16,19636,32038 /DCIM,101_0520,0,16,19636,32409 /DCIM,102_0521,0,16,19637,691 /DCIM,103_0523,0,16,19639,18575 /DCIM,104_0524,0,16,19640,35744 /DCIM,105_0525,0,16,19641,23418 /DCIM,106_0715,0,16,19695,2351

Slide 33

Slide 33 text

Slide 34

Slide 34 text

• ファイル⼀覧が取得できたらレスポンスからパスとファイル名を組み合わせればそのまま画像が取得できる • 「ここまではすでに取得したし…」みたいなことをやるには • dateとtimeがあるので⼀番最後に取得したファイルについてこれを保持して、古いと判断できるものは無視する • 詳しくはFlashAir Developersに書いてあるので検索だ！ FlashAirからファイルを取得する

Slide 35

Slide 35 text

端末  ↓  Google Photos

Slide 36

Slide 36 text

• Google Photos APIはGoogle APIの1つなのでGoogle Cloud Consoleから有効にする必要がある • AndroidアプリかWebアプリかでOAuthのやり⽅が違うので  注意 • 今回はAndroidなのでGoogle Play Servicesで楽にやったよ • ただしAccess Tokenを引き出す処理を追加で書く必要あり Google APIを使えるようにする

Slide 37

Slide 37 text

• https://photoslibrary.googleapis.com/v1/uploads にPOSTで次のデータを送りつける • Authorization: Bearer • Content-Type: application/octet-stream •X-Goog-Upload-File-Name: <ファイル名> •画像のバイナリ（body） • 成功するとアップロードトークンがもらえる • この時点でアップロードは未完了取得した写真をアップロードする

Slide 38

Slide 38 text

• https://photoslibrary.googleapis.com/v1/ mediaItems:batchCreate に次のデータをPOST • Authorization: Bearer • Content-Type: application/json •先程のアップロードトークンを含めた次のJSON 取得した写真をアップロードする {“newMediaItems”:[ { “simpleMediaItem":{ “uploadToken":"CAIS6QIApKFirX....." } } ]}

Slide 39

Slide 39 text

アップロードできているか確認する ඇѹॖ &9*'΋࢒ͬͯΔ

Slide 40

Slide 40 text

• いっぱい画像があるとキューイングとかしないと⾏けない • たくさんダウンロードしてメモリにいっぱい展開して端末が爆発して死んでいってしまう • 結論スマホになってしまっている • ちゃんとアプリ開発してビューアにするなら良いが… • ⾃動アップロード中は煌々と画⾯が光る。邪魔。抱えた問題点

Slide 41

Slide 41 text

そこで

Slide 42

Slide 42 text

Android Things

Slide 43

Slide 43 text

• AndroidベースのIoTプラットフォーム • Raspberry Pi 3やNXP i.MXシリーズで動作する • 新品フルキットだと199USDくらい • Google I/O 2018の前⽇に突如stableになった • 普段のAndroid開発とほぼ同じ⽂脈で開発できる • RPiならNetwork ADBでAPKをインストール • i.MXならUSB-CでADB Android Things

Slide 44

Slide 44 text

• 画⾯が存在しない状態にできる！ • GPIOが読める！ • FlashAirのGPIOの出⼒をトリガにActivityに通知して FlashAirの画像を取得できる！ • どこのご家庭にでもある！ • iなんとかPhoneしか持たないそこの貴⽅も  きっと⼀台はRPiを持っているハズ Android Thingsならば…！ ʘͲ΍ʁʗ

Slide 45

Slide 45 text

• Android Thingsは「単⼀Activity」のアプリのみ許容するはず • そもそもOAuthさせる時点で別のActivityが起動する… • OAuth認証で失敗しそう • Access Tokenをよそから流し込まないといけない • ダサい • とはいえAndroidと同じ雰囲気で開発できるのは  Android開発者としては嬉しい Android Things特有の制限があります ʘ͢·Μͷʗ

Slide 46

Slide 46 text

• ついにGoogle Photosに⾮圧縮で画像をAPI経由でぶん投げられるようになりました • FlashAirと組み合わせてラクラク半⾃動アップロードマシン • ただなんとなく仕組みを⽤意しただけなのでちゃんと使えるものにしたい • 現状のコードと仕組みを⾒たければこの後のお時間で… • FlashAirの設定がめんどくさいのでデモはつらい • 忙しさの⽬測を⾒誤った結果地獄になったので気をつけようまとめに

Slide 47

Slide 47 text

おわり