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
Gradleの実行環境設定を見直す
e10dokup
0
720
Firebase App Distributionのテストアプリ配信を試しやすくする
e10dokup
0
500
アプリに署名する 〜GitHub ActionsでのCIも見据えて〜
e10dokup
0
1.1k
Profileable buildでより正確なパフォーマンスを掴む
e10dokup
0
680
[DroidKaigi 2021] メディアアクセス古今東西 / Now and Future of Media Access
e10dokup
0
3.3k
今更「dp」を考える / Let's think about "dp" now
e10dokup
0
5.4k
1から学ぶAndroidアプリデバッグ - アプリの動作を追いかけよう / Learn Android application debugging from the scratch - track apps' behaviors
e10dokup
10
3k
Guide to background processingを読んでみる / Reading "Guide to background processing"
e10dokup
0
250
よしなに頑張る画像ロードの話 / image load mettya tsurai
e10dokup
2
470
Other Decks in Programming
See All in Programming
Figma Dev Modeで変わる!Flutterの開発体験
watanave
0
140
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
CSC509 Lecture 13
javiergs
PRO
0
110
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
190
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
120
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Click-free releases & the making of a CLI app
oheyadam
2
120
みんなでプロポーザルを書いてみた
yuriko1211
0
280
C++でシェーダを書く
fadis
6
4.1k
Better Code Design in PHP
afilina
PRO
0
130
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
Featured
See All Featured
Designing Experiences People Love
moore
138
23k
Thoughts on Productivity
jonyablonski
67
4.3k
KATA
mclloyd
29
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Embracing the Ebb and Flow
colly
84
4.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
The Cult of Friendly URLs
andyhume
78
6k
The Language of Interfaces
destraynor
154
24k
Building Adaptive Systems
keathley
38
2.3k
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の設定がめんどくさいのでデモはつらい • 忙しさの⽬測を⾒誤った結果地獄になったので気をつけよう まとめに
おわり