FlashAirTMのアプリ開発セミナー

Oct/20/2013

OSC2013@Tokyo/Fall 土居 意弘（株式会社フィックスターズ）

Last Modified on 2013-10-24 FlashAir is a trademark of Toshiba Corporation.

本日の内容

FlashAirとは

FlashAirアプリを開発しよう

FlashAir開発者サイトのご紹介

アプリ事例

–スマホ×Flashair

– Raspberry Pi×FlashAir

アプリストアへの公開

Q&A

1

FLASHAIRとは FlashAirとは

FlashAirのさまざまな使い方

FlashAirにアクセスしてみる

2

FlashAirとは

FlashAir = メモリ + Webサーバ + 無線LAN AP

3

IEEE802.11b/g/n (2.4GHz, SISO, 20MHz)

アクセスポイント

– 他の無線LAN機器から、FlashAirに保存された写真などをケーブルレスで取得することができます。

– 3G通信網や別のWi-Fiアクセスポイントは不要です

• FlashAirと他の無線LAN機器の間でローカルなネットワークを形成します。

FlashAirの利用シーン例

デジカメと組み合わせて 資料の配布に

4

電源があれば簡単なNASとして使えます。 受信は、Wi-Fiを切り換え、ブラウザを開くだけです。 その時、その場だけの資料を配るのに便利です。 データ形式も問いません。

AC adopter / Battery

USB card adopter

Web Browser

パソコンが必要がないから いつでもどこでも、空いた時間に、さっと送れます。 ケーブルレスだから、 一度にたくさんの人ともシェアできます。

FlashAirにアクセスしてみる

会場のFlashAirにつないでみましょう

– 1. FlashAirのSSIDにWi-Fiを切り換え

• 設定アプリを開いて、以下のネットワークに接続

• ネットワーク名(SSID): flashair_dev

• Password: なし

– 2. Webブラウザで、http://flashair/を開く

• 最後のスラッシュ大事！

– 3. これだけ！

• 写真以外もOK

• 今日の資料も

ダウンロードできます

5

FLASHAIRアプリを開発しよう FlashAir API

無線LAN側のAPI

スロット側のAPI

付録： API一覧

6

FlashAirアプリを開発するとは？

次の3つの動作を組み合わせればいろいろなことに使えません？

– (1) FlashAirにデータを置く • 普通のSDカードと同じ方法

• 秘密の方法もあり

– (2) FlashAirからデータを取り出す • 内蔵Webサーバーを通じて可能

– (3) FlashAirの設定を変える • 専用のコマンドが用意されています

方法 (API) はすべて一般公開されています

–開発者情報サイト「FlashAirTM Developers」

– API利用料なし、有料アプリ作ってもOK!

7

(1)

(2)

(3)

FlashAir API

FlashAirでは外部機器からの無線LAN経由およびSDカードスロットからのアクセス方法を、APIとして公開しています。

8

• ファイルの取得 • ファイル一覧の取得 • 各種情報取得 • 設定変更 • 画像サムネイル取得 • ファイル変更

• ファイル読み書き • CONFIGファイル • ブラウザユーティリティ • 無線LAN ON/OFF

スロット側API 無線LAN側API

無線LAN側のAPI

ファイルを取得する – URLにファイルを指定してGETコマンド

フォルダ内のファイル一覧を取得する – URLにフォルダに指定してGETコマンド

– 出力されるHTMLのテンプレート（＝ブラウザユーティリティ）はカスタマイズできます

設定を変更する – CGI (Common Gateway Interface)を使用して行います

– command.cgi : FlashAirの情報を取得するためのAPIです。

– config.cgi : FlashAirの設定を変更するためのAPIです。

– thumbnail.cgi : 画像のサムネイルを取得するためのAPIです。

– upload.cgi : ネットワーク越しにSDカードの中身を変更するためのAPIです。

9

スロット側のAPI

通常のファイルアクセス – データファイルを読み書きできます

– CONFIGファイルの変更を行えます。

– ブラウザユーティリティのカスタマイズを行えます。

iSDIO規格に準拠したアクセス – 無線LANのON/OFFができます。

– 機能詳細はiSDIO規格書を参照ください。 • https://www.sdcard.org/jp/developers/overview/isdio/

10

無線LAN側のAPI一覧

機能 (ファームウェアバージョン) パラメータ例

ファイルリストの取得 (1.00.00+) op=100&DIR=/DCIM

ファイル数の取得(1.00.00+) op=101&DIR=/DCIM

アップデート情報の取得(1.00.00+) op=102

SSIDの取得(1.00.00+) op=104

ネットワークパスワードの取得(1.00.00+) op=105

MACアドレスの取得(1.00.00+) op=106

ブラウザ言語の取得(1.00.00+) op=107

ファームウェアバージョン情報の取得(1.00.00+)

op=108

制御イメージの取得(2.00.00+) op=109

無線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

空セクター数の取得(1.00.03+) op=140

フォトシェアモードの有効化(2.00.00+) op=200&DIR=/DCIM/100__TSB&DATE=17

153

機能 (ファームウェアバージョン) パラメータ例

接続タイムアウト時間の設定(1.00.00+)

MASTERCODE=0123456789AB&APPAUTOTIME=

3000000&APPMODE=4

アプリケーション独自情報の設定(1.00.00+)

MASTERCODE=0123456789AB&APPINFO=0123A

BCD4567EFGH

無線LANモードの設定(1.00.00+) MASTERCODE=0123456789AB&APPMODE=4

ネットワークセキュリティキーの設定(1.00.00+)

MASTERCODE=0123456789AB&APPNETWORKK

EY=12345678

SSIDの設定(1.00.00+) MASTERCODE=0123456789AB&APPSSID=flashai

r

WiFI起動画面パスの設定(1.00.00+) MASTERCODE=0123456789AB&CIPATH=/DCIM/1

00__TSB/FA000001.jpg

マスターコードの設定(1.00.00+) MASTERCODE=0123456789AB

機能(ファームウェアバージョン) パラメータ例

ファイルのアップロード画面(1.00.00+) なし (※?も不要です)

ファイルの削除(1.00.00+) DEL=/DCIM/100__TSB/DSC_100.JPG

アップロード先ディレクトリの設定(1.00.00+)

UPDIR=/DCIM/101__TSB

システム時間の設定(1.00.00+) FTIME=0x00210000

ホスト機器からの書き込み禁止(1.00.00+) WRITEPROTECT=ON

http://flashair/command.cgi?<パラメータ> http://flashair/config.cgi?<パラメータ>

http://flashair/thumbnail.cgi?<フォルダパス>

http://flashair/upload.cgi?<パラメータ>

command.cgi config.cgi

upload.cgi

thumbnail.cgi

11

スロット側のAPI一覧

パラメータ名 説明 例

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

/SD_WLAN/CONFIG ブラウザユーティリティ

ブラウザユーティリティは、 FlashAirのコンテンツをウェブブラウザで見る場合に表示される画面のことです。 List.htmというHTMLファイルがその実体で、 これを変更することで、コンテンツの表示方法をカスタマイズすることができます。 例えば、JavaScriptを使ったユーザーインターフェースを作ったり、 背景写真を組み合わせてフォトフレームのような見た目にすることもできます。

List.htm

ディレクトリパスに対するGETリクエストが発行された場合、 FlashAirはこのファイルを読み込んでレスポンスとして返します。 その際、ファイル内に <!--WLANSDJLST--> というタグがあった場合、 下記のような対象ディレクトリのコンテンツリストに置き換えを行います。

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});

/DCIM,100__TSB,0,16,9944,129

/DCIM,0126_1.jpg,70408,32,17071,28040

12

FLASHAIR アプリ開発者サイト FlashAir アプリ開発者情報サイトとは

FlashAir アプリ開発者情報サイトの狙い

アプリショーケース

APIガイド

チュートリアル

ビデオチュートリアル

開発者フォーラム

ビジネス情報

13

FlashAir アプリ開発者サイトとは

技術情報

– FlashAirでできること

– APIドキュメント

– チュートリアル（サンプルコードあり）

• iOS / Android / Web Browser

– すべて無償

アプリショーケース

– Apple AppStore、Google Play、Windows

– アプリの他、ライブラリも

開発者サポート

– FAQ

– フォーラム

ビジネス情報

– 応用アプリケーションの事例紹介、提案

情報発信

– Twitter, Facebook

全ページ 日本語、英語対応

14

flashair-developers.com

FlashAir アプリ開発者サイトの狙い

エンドユーザの要望への対応

– 様々な要求ごとに、適したアプリが登場することへの期待

アプリ開発者のサポート

– 個人開発者への直接対応は困難だが、サイトを通じた開発者相互でサポートしあう環境を整備

15

アプリショーケース

FlashAir対応の各種アプリを紹介しています

– 日本語: 16 (iOS:11, Android:7, Windows:1)

– 英語: 10 (iOS:8, Android:4)

16

APIガイド

APIのリファレンスマニュアル、解説 – CGIコマンド、設定ファイル (CONFIG)、ブラウザユーティリティ

合計 48 項目

日本語、英語

17

APIガイド例

パラメータ例付一覧表と、詳細解説

18

チュートリアル

FlashAirアプリのサンプルアプリ作成を解説

– iOS, Android, ウェブブラウザ, 上級者向け情報

合計 21 記事

日本語、英語

19

チュートリアル例

コードを示して丁寧に解説

サンプルプログラムもダウンロード可能

20

ビデオチュートリアル公開中

9月に実施したFlashAir x Android アプリ開発ワークショップのビデオを公開しています

21

00. オープニング/FlashAirに接続する

01. プロジェクトの準備

02. FlashAirにアクセスする

03. ファイル一覧を表示する

04. 画像ファイルのサムネイルを表示する1

05. 画像ファイルのサムネイルを表示する2

06. 画像ファイルをダウンロードする1

07. 画像ファイルをダウンロードする2

08. ロゴの使用について/質疑応答

デベロッパーフォーラム

開発者同士の情報交換、Q&Aサイト

フィックスターズ技術者も参加

日本語、英語

22

ビジネス情報

応用ビジネスの事例紹介、ご提案

23

FLASHAIRアプリ事例

スマホ × FlashAir

Raspberry Pi × FlashAir

24

スマホ × FlashAir (1)

フォルダ表示 サムネイル表示

シェア 他のアプリケーションで開く

プレビュー

Twitter, Facebook, 微博

動画, 音声, PDF, Word, Excel, など多様な種類に対応

よりiOSらしい操作感 素早い反応を追求 日付、名前などでの整列 iPad専用画面レイアウト 充実したヘルプ ・・・

カメラロールにダウンロード

25

スマホ × FlashAir (2)

Thumbnail view サムネイル表示に切り替えます

Folder view フォルダ表示に切り替えます

Auto reload ONの場合、FlashAir内のデータが変更 された場合に、自動的に再読み込みします

FlashAir card setting SSIDとネットワークパスワードを確認、 編集します 初期化に使った管理者デバイスでない場合 は、この項目は表示されません

Help ヘルプ画面を表示します

Rate this app iTunesのFlashAirアプリのページを表示します

FlashAirの設定変更もサポート

26

Raspberry Pi × FlashAir

Raspberry Piに接続した「USB Webカメラ」でキャプチャ

– キャプチャー・アプリ ”Motion”を実行

「USB SDカードR/W」に挿したFlashAirへ書込む

書込まれた画像ファイルを、FlashAirの無線LAN機能を介してスマホで見る

– ブラウザでも

– 前述のアプリでも

27

アプリストアで公開する

FlashAir Developersでのご紹介

商標について

28

FlashAir Developersでのご紹介

アプリを作ったらぜひFlashAir Developersまで！ – support@flashair-developers.com

ショーケースにてご紹介いたします – iOS, Android, Windows, Mac どれでもOK

– アプリだけでなく、ライブラリ等でも構いません

29

Windows, Mac アプリ 大募集中!!

商標について

FlashAir、FlashAirロゴは株式会社東芝の商標です

– 未許諾での使用は法律で禁じられています

現状では以下の指針がよいでしょう

– アプリ名にはFlashAirを入れない

– 説明文中で以下のように使う • FlashAir用です (for)

• FlashAirと互換性があります (compatible with)

• FlashAirに対応しています (compatible with)

• FlashAirと共に使用できます (for use with)

– ロゴは使わない • 使わずに、っぽく描いている例がありますのでご参考まで

30

http://www.photosync-app.com/

ありがとうございました

Enjoy !!

31