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

2018/7/15に開催された高専カンファレンス in 東京 2018にて発表した「半自動で写真をアップロードしたい俺達は」のスライドになります

Transcript

1. 半⾃動で写真をアップロード したい俺たちは どくぴー @e10dokup ⾼専カンファレンス in 東京 2018 (2018/7/15) @ DMM.com
2. 突然ですが本⽇1時頃の画像を御覧ください
3. 突然ですが本⽇1時頃の画像を御覧ください 時間がな…⾜りなかったんや…
4. • 和⽥ 佳⼤ / どくぴー / @e10dokup • みぎの へんなのが めじるしだ ！ • 明⽯⾼専 → 神⼾⼤学 → サイバーエージェント（今） • kosen10s っていう変な集団にいます • イベント運営巻き込まれおじさん • DroidKaigi • 情報科学若⼿の会 • etc. • 趣味：カメラ、ガジェット、レース観戦、レースゲーム ⾃⼰紹介 ʗ΀ΒʔΜʘ
5. • 和⽥ 佳⼤ / どくぴー / @e10dokup • みぎの へんなのが めじるしだ ！ • 明⽯⾼専 → 神⼾⼤学 → サイバーエージェント（今） • kosen10s っていう変な集団にいます • イベント運営巻き込まれおじさん • DroidKaigi • 情報科学若⼿の会 • etc. • 趣味：カメラ、ガジェット、レース観戦、レースゲーム ⾃⼰紹介 ʗ΀ΒʔΜʘ
7. カメラ
8. • PENTAX K-S2を買っただけだと思っていた2年前 • 気付いたらレンズが3本増え • Sony α7IIが増えレンズの価格に震えおののき • 社内では広報なの？って⾔われるように 沼にハマった
9. 不注意で機材が 多様化してしまった
11. 楽しい！！
12. でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったし アップロードしちゃうぞ〜〜
13. でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったし アップロードしちゃうぞ〜〜
14. でもいろいろやっていると問題も… おおん
15. アップロード 割とダルい問題
16. • いっぱい撮った写真のアップロード⽅法 • （厳選する） • 今回はここには⽬をつむることとする • Google PhotosやFlickrにD&Dして上がるのを待つ • 稀によく途中で失敗して悲しい気持ちになる • イベントなんかで写真をとる⼈になるとその⽇のうちに上げ ろ！とか⾔われる • 正直帰ってきたら眠くてそれどころではない アップロード割とダルい問題
17. 我々は半⾃動で アップロードを したいのだ
18. 考えていきましょう
19. • SDカードからPC等のデバイスに持っていきたい • カメラについてきているWi-Fi機能を使う • カメラがアクセスポイントにしかならないやつもあるので なんか微妙 • そもそも各社の連携アプリが… :thinking_face: • PCにマウントしたら撮った写真を捜索するスクリプトを書く • えっ、PC⽴ち上げるの…？ 撮影写真取得の部
20. 今回は…
21. • みんな「使える！！」「これは遊べる！！」って思って買った もののあまり使っていないおもちゃ個⼈的第1位 今回思いついた作戦
22. • みんな「使える！！」「これは遊べる！！」って思って買った もののあまり使っていないおもちゃ個⼈的第1位 今回思いついた作戦 東芝 FlashAir
23. • Wi-Fiにつながったり、Luaでスクリプトを組めたり、GPIOが
 喋れたりする不思議なSDカード • 今だと64GBが6000円くらい • ⼦機としてルータにぶら下げられるので、FlashAirから写真を 取得する端末はネットに繋がったままにしていられる • FlashAirの死活管理（？）的なことをしつつ、LAN内にFlashAir が⾒つかったらFlashAirから写真をもらってくると⾏けそう FlashAir is
24. • 取得した写真を即座にアップロードしたい • 可能ならばPCを起動させずに • そこらへんの⼩型端末を使うのが⼀番良さそう • Android端末 • どうせ古い端末がいっぱい余っている • Raspberry Pi • みんな買ったけど積んでいるのがありそう 撮影写真アップロードの部
25. • ではどこにアップロードしよう…？ • Google Photos • API経由でのオリジナル画質でのアップロードが不能 • Picassa Web APIで圧縮画質なら上げられはするが… • Flickr • APIはちゃんとある、オリジナル画質でも⼤丈夫 • JavaのWrapperがあるにはあるが最終更新が2014年… 撮影写真アップロードの部 ところが
26. きちゃった♡
27. • Google I/O 2018でロンチ • Google OAuth2によるユーザ認証 • AndroidならTokenがスパッともらえる、楽 • Picasa APIでは出来なかったオリジナル画質アップロードに
 ようやく対応 • もはや個⼈的にこれを使いたい • 使いたいドリブン • 割とみんなGoogle Photosだし… Google Photos API爆誕
28. APIも多様化 するのだ
29. • FlashAirがLAN内で⾒つかったらファイル⼀覧を取得 • ファイル⼀覧をたどってFlashAirから端末にファイルを取得 • 取得したファイルをGoogle PhotosにAPI経由でアップロード というわけで作戦 ϧʔλ
30. FlashAir
 ↓
 端末
31. • FlashAirのIPアドレス以降にパスをつなげてHTTP GETすること でファイルを取得できる • ファイル⼀覧は…？ • FlashAirにはデフォルトで command.cgi というCGIが装備さ れており、このCGIにリクエストを送ることでいろいろな情報 が得られる • ファイル⼀覧が欲しい場合はクエリパラメータとして
 op=100 を、参照ディレクトリに dir=<ディレクトリ> 
 を与える FlashAirからファイルを取得する
32. • 例：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
33. • 例：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 QBUI pMFEJS EBUF UJNF
34. • ファイル⼀覧が取得できたらレスポンスからパスとファイル名 を組み合わせればそのまま画像が取得できる • 「ここまではすでに取得したし…」みたいなことをやるには • dateとtimeがあるので⼀番最後に取得したファイルについて これを保持して、古いと判断できるものは無視する • 詳しくはFlashAir Developersに書いてあるので検索だ！ FlashAirからファイルを取得する
35. 端末
 ↓
 Google Photos
36. • Google Photos APIはGoogle APIの1つなのでGoogle Cloud Consoleから有効にする必要がある • AndroidアプリかWebアプリかでOAuthのやり⽅が違うので
 注意 • 今回はAndroidなのでGoogle Play Servicesで楽にやったよ • ただしAccess Tokenを引き出す処理を追加で書く必要あり Google APIを使えるようにする
37. • https://photoslibrary.googleapis.com/v1/uploads にPOSTで 次のデータを送りつける • Authorization: Bearer <Token> • Content-Type: application/octet-stream •X-Goog-Upload-File-Name: <ファイル名> •画像のバイナリ（body） • 成功するとアップロードトークンがもらえる • この時点でアップロードは未完了 取得した写真をアップロードする
38. • https://photoslibrary.googleapis.com/v1/ mediaItems:batchCreate に次のデータをPOST • Authorization: Bearer <Token> • Content-Type: application/json •先程のアップロードトークンを含めた次のJSON 取得した写真をアップロードする {“newMediaItems”:[ { “simpleMediaItem":{ “uploadToken":"CAIS6QIApKFirX....." } } ]}
39. アップロードできているか確認する ඇѹॖ
    
    &9*'΋࢒ͬͯΔ
40. • いっぱい画像があるとキューイングとかしないと⾏けない • たくさんダウンロードしてメモリにいっぱい展開して端末が 爆発して死んでいってしまう • 結論スマホになってしまっている • ちゃんとアプリ開発してビューアにするなら良いが… • ⾃動アップロード中は煌々と画⾯が光る。邪魔。 抱えた問題点
41. そこで
42. Android Things
43. • 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
44. • 画⾯が存在しない状態にできる！ • GPIOが読める！ • FlashAirのGPIOの出⼒をトリガにActivityに通知して FlashAirの画像を取得できる！ • どこのご家庭にでもある！ • iなんとかPhoneしか持たないそこの貴⽅も
 きっと⼀台はRPiを持っているハズ Android Thingsならば…！ ʘͲ΍ʁʗ
45. • Android Thingsは「単⼀Activity」のアプリのみ許容するはず • そもそもOAuthさせる時点で別のActivityが起動する… • OAuth認証で失敗しそう • Access Tokenをよそから流し込まないといけない • ダサい • とはいえAndroidと同じ雰囲気で開発できるのは
 Android開発者としては嬉しい Android Things特有の制限があります ʘ͢·Μͷʗ
46. • ついにGoogle Photosに⾮圧縮で画像をAPI経由でぶん投げられ るようになりました • FlashAirと組み合わせてラクラク半⾃動アップロードマシン • ただなんとなく仕組みを⽤意しただけなのでちゃんと使えるも のにしたい • 現状のコードと仕組みを⾒たければこの後のお時間で… • FlashAirの設定がめんどくさいのでデモはつらい • 忙しさの⽬測を⾒誤った結果地獄になったので気をつけよう まとめに
47. おわり