FlashAirのアプリ開発セミナー@OSC2013Tokyo/Fall 2013-10-24
-
Upload
flashair -
Category
Technology
-
view
14.453 -
download
7
Transcript of FlashAirのアプリ開発セミナー@OSC2013Tokyo/Fall 2013-10-24
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まで! – [email protected]
ショーケースにてご紹介いたします – 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