Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
半自動で写真をアップロードしたい俺達は
Search
Yoshihiro WADA
July 15, 2018
Programming
0
2.4k
半自動で写真をアップロードしたい俺達は
2018/7/15に開催された高専カンファレンス in 東京 2018にて発表した「半自動で写真をアップロードしたい俺達は」のスライドになります
Yoshihiro WADA
July 15, 2018
Tweet
Share
More Decks by Yoshihiro WADA
See All by Yoshihiro WADA
AndroidデバイスにFTPサーバを建立する
e10dokup
0
250
Gradleの実行環境設定を見直す
e10dokup
0
850
Firebase App Distributionのテストアプリ配信を試しやすくする
e10dokup
0
560
アプリに署名する 〜GitHub ActionsでのCIも見据えて〜
e10dokup
0
1.1k
Profileable buildでより正確なパフォーマンスを掴む
e10dokup
0
710
[DroidKaigi 2021] メディアアクセス古今東西 / Now and Future of Media Access
e10dokup
0
3.4k
今更「dp」を考える / Let's think about "dp" now
e10dokup
0
5.5k
1から学ぶAndroidアプリデバッグ - アプリの動作を追いかけよう / Learn Android application debugging from the scratch - track apps' behaviors
e10dokup
10
3.1k
Guide to background processingを読んでみる / Reading "Guide to background processing"
e10dokup
0
250
Other Decks in Programming
See All in Programming
Spring gRPC について / About Spring gRPC
mackey0225
0
220
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
310
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
ソフトウェアエンジニアの成長
masuda220
PRO
10
1.1k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
140
Formの複雑さに立ち向かう
bmthd
1
840
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.2k
もう僕は OpenAPI を書きたくない
sgash708
4
1.4k
Lottieアニメーションをカスタマイズしてみた
tahia910
0
130
CI改善もDatadogとともに
taumu
0
110
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Designing for Performance
lara
604
68k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Transcript
半⾃動で写真をアップロード したい俺たちは どくぴー @e10dokup ⾼専カンファレンス in 東京 2018 (2018/7/15) @
DMM.com
突然ですが本⽇1時頃の画像を御覧ください
突然ですが本⽇1時頃の画像を御覧ください 時間がな…⾜りなかったんや…
• 和⽥ 佳⼤ / どくぴー / @e10dokup • みぎの へんなのが
めじるしだ ! • 明⽯⾼専 → 神⼾⼤学 → サイバーエージェント(今) • kosen10s っていう変な集団にいます • イベント運営巻き込まれおじさん • DroidKaigi • 情報科学若⼿の会 • etc. • 趣味:カメラ、ガジェット、レース観戦、レースゲーム ⾃⼰紹介 ʗΒʔΜʘ
• 和⽥ 佳⼤ / どくぴー / @e10dokup • みぎの へんなのが
めじるしだ ! • 明⽯⾼専 → 神⼾⼤学 → サイバーエージェント(今) • kosen10s っていう変な集団にいます • イベント運営巻き込まれおじさん • DroidKaigi • 情報科学若⼿の会 • etc. • 趣味:カメラ、ガジェット、レース観戦、レースゲーム ⾃⼰紹介 ʗΒʔΜʘ
None
カメラ
• PENTAX K-S2を買っただけだと思っていた2年前 • 気付いたらレンズが3本増え • Sony α7IIが増えレンズの価格に震えおののき • 社内では広報なの?って⾔われるように
沼にハマった
不注意で機材が 多様化してしまった
None
楽しい!!
でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったし アップロードしちゃうぞ〜〜
でもいろいろやっていると問題も… よ〜〜〜し、いっぱい撮ったし アップロードしちゃうぞ〜〜
でもいろいろやっていると問題も… おおん
アップロード 割とダルい問題
• いっぱい撮った写真のアップロード⽅法 • (厳選する) • 今回はここには⽬をつむることとする • Google PhotosやFlickrにD&Dして上がるのを待つ •
稀によく途中で失敗して悲しい気持ちになる • イベントなんかで写真をとる⼈になるとその⽇のうちに上げ ろ!とか⾔われる • 正直帰ってきたら眠くてそれどころではない アップロード割とダルい問題
我々は半⾃動で アップロードを したいのだ
考えていきましょう
• SDカードからPC等のデバイスに持っていきたい • カメラについてきているWi-Fi機能を使う • カメラがアクセスポイントにしかならないやつもあるので なんか微妙 • そもそも各社の連携アプリが… :thinking_face:
• PCにマウントしたら撮った写真を捜索するスクリプトを書く • えっ、PC⽴ち上げるの…? 撮影写真取得の部
今回は…
• みんな「使える!!」「これは遊べる!!」って思って買った もののあまり使っていないおもちゃ個⼈的第1位 今回思いついた作戦
• みんな「使える!!」「これは遊べる!!」って思って買った もののあまり使っていないおもちゃ個⼈的第1位 今回思いついた作戦 東芝 FlashAir
• Wi-Fiにつながったり、Luaでスクリプトを組めたり、GPIOが 喋れたりする不思議なSDカード • 今だと64GBが6000円くらい • ⼦機としてルータにぶら下げられるので、FlashAirから写真を 取得する端末はネットに繋がったままにしていられる • FlashAirの死活管理(?)的なことをしつつ、LAN内にFlashAir
が⾒つかったらFlashAirから写真をもらってくると⾏けそう FlashAir is
• 取得した写真を即座にアップロードしたい • 可能ならばPCを起動させずに • そこらへんの⼩型端末を使うのが⼀番良さそう • Android端末 • どうせ古い端末がいっぱい余っている
• Raspberry Pi • みんな買ったけど積んでいるのがありそう 撮影写真アップロードの部
• ではどこにアップロードしよう…? • Google Photos • API経由でのオリジナル画質でのアップロードが不能 • Picassa Web
APIで圧縮画質なら上げられはするが… • Flickr • APIはちゃんとある、オリジナル画質でも⼤丈夫 • JavaのWrapperがあるにはあるが最終更新が2014年… 撮影写真アップロードの部 ところが
きちゃった♡
• Google I/O 2018でロンチ • Google OAuth2によるユーザ認証 • AndroidならTokenがスパッともらえる、楽 •
Picasa APIでは出来なかったオリジナル画質アップロードに ようやく対応 • もはや個⼈的にこれを使いたい • 使いたいドリブン • 割とみんなGoogle Photosだし… Google Photos API爆誕
APIも多様化 するのだ
• FlashAirがLAN内で⾒つかったらファイル⼀覧を取得 • ファイル⼀覧をたどってFlashAirから端末にファイルを取得 • 取得したファイルをGoogle PhotosにAPI経由でアップロード というわけで作戦 ϧʔλ
FlashAir ↓ 端末
• FlashAirのIPアドレス以降にパスをつなげてHTTP GETすること でファイルを取得できる • ファイル⼀覧は…? • FlashAirにはデフォルトで command.cgi というCGIが装備さ
れており、このCGIにリクエストを送ることでいろいろな情報 が得られる • ファイル⼀覧が欲しい場合はクエリパラメータとして op=100 を、参照ディレクトリに dir=<ディレクトリ> を与える FlashAirからファイルを取得する
• 例: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
• 例: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
• ファイル⼀覧が取得できたらレスポンスからパスとファイル名 を組み合わせればそのまま画像が取得できる • 「ここまではすでに取得したし…」みたいなことをやるには • dateとtimeがあるので⼀番最後に取得したファイルについて これを保持して、古いと判断できるものは無視する • 詳しくはFlashAir
Developersに書いてあるので検索だ! FlashAirからファイルを取得する
端末 ↓ Google Photos
• Google Photos APIはGoogle APIの1つなのでGoogle Cloud Consoleから有効にする必要がある • AndroidアプリかWebアプリかでOAuthのやり⽅が違うので 注意
• 今回はAndroidなのでGoogle Play Servicesで楽にやったよ • ただしAccess Tokenを引き出す処理を追加で書く必要あり Google APIを使えるようにする
• https://photoslibrary.googleapis.com/v1/uploads にPOSTで 次のデータを送りつける • Authorization: Bearer <Token> • Content-Type:
application/octet-stream •X-Goog-Upload-File-Name: <ファイル名> •画像のバイナリ(body) • 成功するとアップロードトークンがもらえる • この時点でアップロードは未完了 取得した写真をアップロードする
• https://photoslibrary.googleapis.com/v1/ mediaItems:batchCreate に次のデータをPOST • Authorization: Bearer <Token> • Content-Type:
application/json •先程のアップロードトークンを含めた次のJSON 取得した写真をアップロードする {“newMediaItems”:[ { “simpleMediaItem":{ “uploadToken":"CAIS6QIApKFirX....." } } ]}
アップロードできているか確認する ඇѹॖ &9*'ͬͯΔ
• いっぱい画像があるとキューイングとかしないと⾏けない • たくさんダウンロードしてメモリにいっぱい展開して端末が 爆発して死んでいってしまう • 結論スマホになってしまっている • ちゃんとアプリ開発してビューアにするなら良いが… •
⾃動アップロード中は煌々と画⾯が光る。邪魔。 抱えた問題点
そこで
Android Things
• 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
• 画⾯が存在しない状態にできる! • GPIOが読める! • FlashAirのGPIOの出⼒をトリガにActivityに通知して FlashAirの画像を取得できる! • どこのご家庭にでもある! •
iなんとかPhoneしか持たないそこの貴⽅も きっと⼀台はRPiを持っているハズ Android Thingsならば…! ʘͲʁʗ
• Android Thingsは「単⼀Activity」のアプリのみ許容するはず • そもそもOAuthさせる時点で別のActivityが起動する… • OAuth認証で失敗しそう • Access Tokenをよそから流し込まないといけない
• ダサい • とはいえAndroidと同じ雰囲気で開発できるのは Android開発者としては嬉しい Android Things特有の制限があります ʘ͢·Μͷʗ
• ついにGoogle Photosに⾮圧縮で画像をAPI経由でぶん投げられ るようになりました • FlashAirと組み合わせてラクラク半⾃動アップロードマシン • ただなんとなく仕組みを⽤意しただけなのでちゃんと使えるも のにしたい •
現状のコードと仕組みを⾒たければこの後のお時間で… • FlashAirの設定がめんどくさいのでデモはつらい • 忙しさの⽬測を⾒誤った結果地獄になったので気をつけよう まとめに
おわり