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
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
120
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
Amazon Bedrock Multi Agentsを試してきた
tm2
1
280
第3回 Snowflake 中部ユーザ会- dbt × Snowflake ハンズオン
hoto17296
4
370
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
120
SpringBoot3.4の構造化ログ #kanjava
irof
2
990
Conform を推す - Advocating for Conform
mizoguchicoji
3
690
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.4k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
220
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
6
4k
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A Tale of Four Properties
chriscoyier
158
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Cult of Friendly URLs
andyhume
78
6.2k
It's Worth the Effort
3n
184
28k
A Modern Web Designer's Workflow
chriscoyier
693
190k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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の設定がめんどくさいのでデモはつらい • 忙しさの⽬測を⾒誤った結果地獄になったので気をつけよう まとめに
おわり