OSC2013@Tokyo/Fall で開催した、FlashAir向けアプリ開発セミナーの資料です。 ・FlashAirとは ・FlashAirアプリを開発しよう ・FlashAir開発者サイトのご紹介 ・アプリ事例 　・スマホ×Flashair 　・Raspberry Pi×FlashAir ・アプリストアへの公開 ・Q&A See also https://flashair-developers.com/

1. FlashAirTMのアプリ開発セミナー
Oct/20/2013
OSC2013@Tokyo/Fall
土居 意弘（株式会社フィックスターズ）
FlashAir is a trademark of Toshiba Corporation.
Last Modified on 2013-10-24

2. 本日の内容
FlashAirとは
FlashAirアプリを開発しよう
FlashAir開発者サイトのご紹介
アプリ事例
– スマホ×Flashair
– Raspberry Pi×FlashAir
アプリストアへの公開
Q&A
1

3. 2
FLASHAIRとは
FlashAirとは
FlashAirのさまざまな使い方
FlashAirにアクセスしてみる

4. 3
FlashAirとは
アクセスポイント
 FlashAir = メモリ + Webサーバ + 無線LAN AP
IEEE802.11b/g/n
(2.4GHz, SISO, 20MHz)
– 他の無線LAN機器から、FlashAirに保存された写真などを
ケーブルレスで取得することができます。
– 3G通信網や別のWi-Fiアクセスポイントは不要です
• FlashAirと他の無線LAN機器の間でローカルなネットワークを形
成します。

5. 4
FlashAirの利用シーン例
デジカメと組み合わせて
資料の配布に
パソコンが必要がないから
いつでもどこでも、空いた時間に、さっと送れます。
電源があれば簡単なNASとして使えます。
受信は、Wi-Fiを切り換え、ブラウザを開くだけです。
ケーブルレスだから、
一度にたくさんの人ともシェアできます。
その時、その場だけの資料を配るのに便利です。
データ形式も問いません。
USB card adopter
AC adopter / Battery
Web Browser

6. FlashAirにアクセスしてみる
会場のFlashAirにつないでみましょう
– 1. FlashAirのSSIDにWi-Fiを切り換え
• 設定アプリを開いて、以下のネットワークに接続
• ネットワーク名(SSID): flashair_dev
• Password: なし
– 2. Webブラウザで、http://flashair/を開く
• 最後のスラッシュ大事！
– 3. これだけ！
• 写真以外もOK
• 今日の資料も
ダウンロードできます
5

7. 6
FLASHAIRアプリを開発しよう
FlashAir API
無線LAN側のAPI
スロット側のAPI
付録： API一覧

8. FlashAirアプリを開発するとは？
次の3つの動作を組み合わせればいろいろ
なことに使えません？
– (1) FlashAirにデータを置く
(1)
• 普通のSDカードと同じ方法
• 秘密の方法もあり
(2)
– (2) FlashAirからデータを取り出す
• 内蔵Webサーバーを通じて可能
– (3) FlashAirの設定を変える
(3)
• 専用のコマンドが用意されています
方法 (API) はすべて一般公開されています
– 開発者情報サイト「FlashAirTM Developers」
– API利用料なし、有料アプリ作ってもOK!
7

9. 8
FlashAir API
FlashAirでは外部機器からの無線LAN経由お
よびSDカードスロットからのアクセス方法
を、APIとして公開しています。
スロット側API
•
•
•
•
ファイル読み書き
CONFIGファイル
ブラウザユーティリティ
無線LAN ON/OFF
無線LAN側API
•
•
•
•
•
•
ファイルの取得
ファイル一覧の取得
各種情報取得
設定変更
画像サムネイル取得
ファイル変更

10. 無線LAN側のAPI
9
 ファイルを取得する
– URLにファイルを指定してGETコマンド
 フォルダ内のファイル一覧を取得する
– URLにフォルダに指定してGETコマンド
– 出力されるHTMLのテンプレート（＝ブラウザユーティリティ）はカスタマ
イズできます
 設定を変更する
–
–
–
–
–
CGI (Common Gateway Interface)を使用して行います
command.cgi : FlashAirの情報を取得するためのAPIです。
config.cgi : FlashAirの設定を変更するためのAPIです。
thumbnail.cgi : 画像のサムネイルを取得するためのAPIです。
upload.cgi : ネットワーク越しにSDカードの中身を変更するためのAPIです。

11. スロット側のAPI
 通常のファイルアクセス
– データファイルを読み書きできます
– CONFIGファイルの変更を行えます。
– ブラウザユーティリティのカスタマイズを行えます。
 iSDIO規格に準拠したアクセス
– 無線LANのON/OFFができます。
– 機能詳細はiSDIO規格書を参照ください。
• https://www.sdcard.org/jp/developers/overview/isdio/
10

12. 無線LAN側のAPI一覧
command.cgi
http://flashair/command.cgi?<パラメータ>
config.cgi
11
http://flashair/config.cgi?<パラメータ>
機能 (ファームウェアバージョン)
パラメータ例
機能 (ファームウェアバージョン)
パラメータ例
ファイルリストの取得 (1.00.00+)
op=100&DIR=/DCIM
接続タイムアウト時間の設定
(1.00.00+)
MASTERCODE=0123456789AB&APPAUTOTIME=
3000000&APPMODE=4
ファイル数の取得(1.00.00+)
op=101&DIR=/DCIM
アップデート情報の取得(1.00.00+)
op=102
アプリケーション独自情報の設定
(1.00.00+)
MASTERCODE=0123456789AB&APPINFO=0123A
BCD4567EFGH
SSIDの取得(1.00.00+)
op=104
無線LANモードの設定(1.00.00+)
MASTERCODE=0123456789AB&APPMODE=4
ネットワークパスワードの取得(1.00.00+)
op=105
ネットワークセキュリティキーの設
定(1.00.00+)
MASTERCODE=0123456789AB&APPNETWORKK
EY=12345678
MACアドレスの取得(1.00.00+)
op=106
SSIDの設定(1.00.00+)
ブラウザ言語の取得(1.00.00+)
op=107
MASTERCODE=0123456789AB&APPSSID=flashai
r
ファームウェアバージョン情報の取得
(1.00.00+)
op=108
WiFI起動画面パスの設定(1.00.00+)
MASTERCODE=0123456789AB&CIPATH=/DCIM/1
00__TSB/FA000001.jpg
制御イメージの取得(2.00.00+)
op=109
マスターコードの設定(1.00.00+)
MASTERCODE=0123456789AB
無線LANモードの取得(2.00.00+)
op=110
無線LANタイムアウト時間の設定(2.00.00+)
op=111
アプリケーション独自情報の取得(2.00.00+)
op=117
CIDの取得1.00.03+)
op=120
共有メモリからのデータの取得(2.00.00+)
op=130&ADDR=0&LEN=8
共有メモリへのデータの書き込み(2.00.00+)
op=131&ADDR=0&LEN=8&DATA=0123AB
CD
thumbnail.cgi
upload.cgi
http://flashair/thumbnail.cgi?<フォルダパス>
http://flashair/upload.cgi?<パラメータ>
機能(ファームウェアバージョン)
ファイルのアップロード画面(1.00.00+)
アップロード先ディレクトリの設定
(1.00.00+)
UPDIR=/DCIM/101__TSB
システム時間の設定(1.00.00+)
op=200&DIR=/DCIM/100__TSB&DATE=17
153
DEL=/DCIM/100__TSB/DSC_100.JPG
FTIME=0x00210000
ホスト機器からの書き込み禁止(1.00.00+)
WRITEPROTECT=ON
op=140
フォトシェアモードの有効化(2.00.00+)
なし (※?も不要です)
ファイルの削除(1.00.00+)
空セクター数の取得(1.00.03+)
パラメータ例

13. スロット側のAPI一覧
12
ブラウザユーティリティ
/SD_WLAN/CONFIG
パラメータ名
説明
例
APPAUTOTIME
接続タイムアウト時間の設定
APPAUTOTIME=3000000
APPINFO
アプリケーション独自情報
APPINFO=0123ABCD4567EFGH
APPMODE
無線LANモード
APPMODE=4
APPNAME
NETBIOS, Bonjour名称
APPNAME=myflashair
APPNETWORKKEY
ネットワークセキュリティーキー
APPNETWORKKEY=12345678
APPSSID
SSID
APPSSID=flashair
CID
カードID
CID=02544d53573038470750002a0200c201
CIPATH
無線起動画面のパス
CIPATH=/DCIM/100__TSB/FA000001.jpg
LOCK
初期設定済みフラグ
LOCK=1
MASTERCODE
マスターコード
MASTERCODE=0123456789AB
PRODUCT
製品コード
PRODUCT=FlashAir
UPLOAD
アップロード機能有効フラグ
UPLOAD=1
VENDOR
ベンダーコード
VENDOR=TOSHIBA
VERSION
ファームウェアバージョン
VERSION=F24A6W3AW1.00.03
ブラウザユーティリティは、 FlashAirのコンテンツをウェブブラ
ウザで見る場合に表示される画面のことです。
List.htmというHTMLファイルがその実体で、 これを変更するこ
とで、コンテンツの表示方法をカスタマイズすることができます。
例えば、JavaScriptを使ったユーザーインターフェースを作った
り、 背景写真を組み合わせてフォトフレームのような見た目にす
ることもできます。
List.htm
ディレクトリパスに対するGETリクエストが発行された場合、
FlashAirはこのファイルを読み込んでレスポンスとして返します。
その際、ファイル内に <!--WLANSDJLST--> というタグがあっ
た場合、 下記のような対象ディレクトリのコンテンツリストに置
き換えを行います。
/DCIM,100__TSB,0,16,9944,129
/DCIM,0126_1.jpg,70408,32,17071,28040
W-02カードでは, デフォルトではList.htm は存在せず、 ファー
ムウェアに内蔵されたブラウザユーティリティが使われますが、
List.htmを作成すれば上記の説明通りにカスタマイズができます。
ただし、<!--WLANSDJLST--> の置き換えルールが異なります。
wlansd.push({"r_uri":"/DCIM", "fname":"100__TSB",
"fsize":0,"attr":16,"fdate":9944,"ftime":129});
wlansd.push({"r_uri":"/DCIM", "fname":"0126_1.jpg
", "fsize":70408,"attr":32,"fdate":17071,"ftime":
28040});

14. 13
FLASHAIR アプリ開発者サイト
FlashAir アプリ開発者情報サイトとは
FlashAir アプリ開発者情報サイトの狙い
アプリショーケース
APIガイド
チュートリアル
ビデオチュートリアル
開発者フォーラム
ビジネス情報

15. FlashAir アプリ開発者サイトとは
flashair-developers.com
技術情報
– FlashAirでできること
– APIドキュメント
– チュートリアル（サンプルコードあり）
•
iOS / Android / Web Browser
– すべて無償
アプリショーケース
– Apple AppStore、Google Play、Windows
– アプリの他、ライブラリも
開発者サポート
– FAQ
– フォーラム
ビジネス情報
– 応用アプリケーションの事例紹介、提案
情報発信
– Twitter, Facebook
全ページ 日本語、英語対応
14

16. FlashAir アプリ開発者サイトの狙い
15
エンドユーザの要望への対応
– 様々な要求ごとに、適したアプリが登場することへの期待
アプリ開発者のサポート
– 個人開発者への直接対応は困難だが、サイトを通じた開発者相
互でサポートしあう環境を整備

17. アプリショーケース
FlashAir対応の各種アプリを紹介しています
– 日本語: 16
– 英語: 10
(iOS:11, Android:7, Windows:1)
(iOS:8, Android:4)
16

18. APIガイド
APIのリファレンスマニュアル、解説
– CGIコマンド、設定ファイル (CONFIG)、ブラウザユーティリティ
合計
48 項目
日本語、英語
17

19. APIガイド例
パラメータ例付一覧表と、詳細解説
18

20. チュートリアル
19
FlashAirアプリのサンプルアプリ作成を解説
– iOS, Android, ウェブブラウザ, 上級者向け情報
合計 21 記事
日本語、英語

21. チュートリアル例
コードを示して丁寧に解説
サンプルプログラムもダウンロード可能
20

22. ビデオチュートリアル公開中
21
 9月に実施したFlashAir x Android アプリ開発
ワークショップのビデオを公開しています
00. オープニング/FlashAirに接続する
01. プロジェクトの準備
02. FlashAirにアクセスする
03. ファイル一覧を表示する
04. 画像ファイルのサムネイルを表示する1
05. 画像ファイルのサムネイルを表示する2
06. 画像ファイルをダウンロードする1
07. 画像ファイルをダウンロードする2
08. ロゴの使用について/質疑応答

23. デベロッパーフォーラム
開発者同士の情報交換、Q&Aサイト
フィックスターズ技術者も参加
日本語、英語
22

24. ビジネス情報
応用ビジネスの事例紹介、ご提案
23

25. 24
FLASHAIRアプリ事例
スマホ × FlashAir
Raspberry Pi × FlashAir

26. スマホ × FlashAir (1)
サムネイル表示
25
プレビュー
フォルダ表示
動画, 音声, PDF, Word, Excel, など多様な種類に対応
シェア
カメラロールにダウンロード
Twitter, Facebook, 微博
他のアプリケーションで開く






よりiOSらしい操作感
素早い反応を追求
日付、名前などでの整列
iPad専用画面レイアウト
充実したヘルプ
・・・

27. スマホ × FlashAir (2)

FlashAirの設定変更もサポート
Thumbnail view
サムネイル表示に切り替えます
Folder view
フォルダ表示に切り替えます
Auto reload
ONの場合、FlashAir内のデータが変更
された場合に、自動的に再読み込みします
FlashAir card setting
SSIDとネットワークパスワードを確認、
編集します
初期化に使った管理者デバイスでない場合
は、この項目は表示されません
Help
ヘルプ画面を表示します
Rate this app
iTunesのFlashAirアプリのページを表示します
26

28. Raspberry Pi × FlashAir
 Raspberry Piに接続した
「USB Webカメラ」で
キャプチャ
– キャプチャー・アプ
リ ”Motion”を実行
 「USB SDカードR/W」に
挿したFlashAirへ書込む
 書込まれた画像ファイル
を、FlashAirの無線LAN機
能を介してスマホで見る
– ブラウザでも
– 前述のアプリでも
27

29. 28
アプリストアで公開する
FlashAir Developersでのご紹介
商標について

30. FlashAir Developersでのご紹介
29
 アプリを作ったらぜひFlashAir Developersまで！
– support@flashair-developers.com
 ショーケースにてご紹介いたします
– iOS, Android, Windows, Mac どれでもOK
– アプリだけでなく、ライブラリ等でも構いません
Windows,
Mac アプリ
大募集中!!

31. 商標について
30
 FlashAir、FlashAirロゴは株式会社東芝の商標です
– 未許諾での使用は法律で禁じられています
 現状では以下の指針がよいでしょう
– アプリ名にはFlashAirを入れない
– 説明文中で以下のように使う
•
•
•
•
FlashAir用です (for)
FlashAirと互換性があります (compatible with)
FlashAirに対応しています (compatible with)
FlashAirと共に使用できます (for use with)
– ロゴは使わない
http://www.photosync-app.com/
• 使わずに、っぽく描いている例がありますのでご参考まで

32. 31
ありがとうございました
Enjoy
!!