Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

FlashAirのアプリ開発セミナー@OSC2013Tokyo/Fall 2013-10-24

21,540 views

Published on

OSC2013@Tokyo/Fall で開催した、FlashAir向けアプリ開発セミナーの資料です。

・FlashAirとは
・FlashAirアプリを開発しよう
・FlashAir開発者サイトのご紹介
・アプリ事例
 ・スマホ×Flashair
 ・Raspberry Pi×FlashAir
・アプリストアへの公開
・Q&A

See also https://flashair-developers.com/

Published in: Technology

FlashAirのアプリ開発セミナー@OSC2013Tokyo/Fall 2013-10-24

  1. 1. FlashAirTMのアプリ開発セミナー Oct/20/2013 OSC2013@Tokyo/Fall 土居 意弘(株式会社フィックスターズ) FlashAir is a trademark of Toshiba Corporation. Last Modified on 2013-10-24
  2. 2. 本日の内容 FlashAirとは FlashAirアプリを開発しよう FlashAir開発者サイトのご紹介 アプリ事例 – スマホ×Flashair – Raspberry Pi×FlashAir アプリストアへの公開 Q&A 1
  3. 3. 2 FLASHAIRとは FlashAirとは FlashAirのさまざまな使い方 FlashAirにアクセスしてみる
  4. 4. 3 FlashAirとは アクセスポイント  FlashAir = メモリ + Webサーバ + 無線LAN AP IEEE802.11b/g/n (2.4GHz, SISO, 20MHz) – 他の無線LAN機器から、FlashAirに保存された写真などを ケーブルレスで取得することができます。 – 3G通信網や別のWi-Fiアクセスポイントは不要です • FlashAirと他の無線LAN機器の間でローカルなネットワークを形 成します。
  5. 5. 4 FlashAirの利用シーン例 デジカメと組み合わせて 資料の配布に パソコンが必要がないから いつでもどこでも、空いた時間に、さっと送れます。 電源があれば簡単なNASとして使えます。 受信は、Wi-Fiを切り換え、ブラウザを開くだけです。 ケーブルレスだから、 一度にたくさんの人ともシェアできます。 その時、その場だけの資料を配るのに便利です。 データ形式も問いません。 USB card adopter AC adopter / Battery Web Browser
  6. 6. FlashAirにアクセスしてみる 会場のFlashAirにつないでみましょう – 1. FlashAirのSSIDにWi-Fiを切り換え • 設定アプリを開いて、以下のネットワークに接続 • ネットワーク名(SSID): flashair_dev • Password: なし – 2. Webブラウザで、http://flashair/を開く • 最後のスラッシュ大事! – 3. これだけ! • 写真以外もOK • 今日の資料も ダウンロードできます 5
  7. 7. 6 FLASHAIRアプリを開発しよう FlashAir API 無線LAN側のAPI スロット側のAPI 付録: API一覧
  8. 8. FlashAirアプリを開発するとは? 次の3つの動作を組み合わせればいろいろ なことに使えません? – (1) FlashAirにデータを置く (1) • 普通のSDカードと同じ方法 • 秘密の方法もあり (2) – (2) FlashAirからデータを取り出す • 内蔵Webサーバーを通じて可能 – (3) FlashAirの設定を変える (3) • 専用のコマンドが用意されています 方法 (API) はすべて一般公開されています – 開発者情報サイト「FlashAirTM Developers」 – API利用料なし、有料アプリ作ってもOK! 7
  9. 9. 8 FlashAir API FlashAirでは外部機器からの無線LAN経由お よびSDカードスロットからのアクセス方法 を、APIとして公開しています。 スロット側API • • • • ファイル読み書き CONFIGファイル ブラウザユーティリティ 無線LAN ON/OFF 無線LAN側API • • • • • • ファイルの取得 ファイル一覧の取得 各種情報取得 設定変更 画像サムネイル取得 ファイル変更
  10. 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. 11. スロット側のAPI  通常のファイルアクセス – データファイルを読み書きできます – CONFIGファイルの変更を行えます。 – ブラウザユーティリティのカスタマイズを行えます。  iSDIO規格に準拠したアクセス – 無線LANのON/OFFができます。 – 機能詳細はiSDIO規格書を参照ください。 • https://www.sdcard.org/jp/developers/overview/isdio/ 10
  12. 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. 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. 14. 13 FLASHAIR アプリ開発者サイト FlashAir アプリ開発者情報サイトとは FlashAir アプリ開発者情報サイトの狙い アプリショーケース APIガイド チュートリアル ビデオチュートリアル 開発者フォーラム ビジネス情報
  15. 15. FlashAir アプリ開発者サイトとは flashair-developers.com 技術情報 – FlashAirでできること – APIドキュメント – チュートリアル(サンプルコードあり) • iOS / Android / Web Browser – すべて無償 アプリショーケース – Apple AppStore、Google Play、Windows – アプリの他、ライブラリも 開発者サポート – FAQ – フォーラム ビジネス情報 – 応用アプリケーションの事例紹介、提案 情報発信 – Twitter, Facebook 全ページ 日本語、英語対応 14
  16. 16. FlashAir アプリ開発者サイトの狙い 15 エンドユーザの要望への対応 – 様々な要求ごとに、適したアプリが登場することへの期待 アプリ開発者のサポート – 個人開発者への直接対応は困難だが、サイトを通じた開発者相 互でサポートしあう環境を整備
  17. 17. アプリショーケース FlashAir対応の各種アプリを紹介しています – 日本語: 16 – 英語: 10 (iOS:11, Android:7, Windows:1) (iOS:8, Android:4) 16
  18. 18. APIガイド APIのリファレンスマニュアル、解説 – CGIコマンド、設定ファイル (CONFIG)、ブラウザユーティリティ 合計 48 項目 日本語、英語 17
  19. 19. APIガイド例 パラメータ例付一覧表と、詳細解説 18
  20. 20. チュートリアル 19 FlashAirアプリのサンプルアプリ作成を解説 – iOS, Android, ウェブブラウザ, 上級者向け情報 合計 21 記事 日本語、英語
  21. 21. チュートリアル例 コードを示して丁寧に解説 サンプルプログラムもダウンロード可能 20
  22. 22. ビデオチュートリアル公開中 21  9月に実施したFlashAir x Android アプリ開発 ワークショップのビデオを公開しています 00. オープニング/FlashAirに接続する 01. プロジェクトの準備 02. FlashAirにアクセスする 03. ファイル一覧を表示する 04. 画像ファイルのサムネイルを表示する1 05. 画像ファイルのサムネイルを表示する2 06. 画像ファイルをダウンロードする1 07. 画像ファイルをダウンロードする2 08. ロゴの使用について/質疑応答
  23. 23. デベロッパーフォーラム 開発者同士の情報交換、Q&Aサイト フィックスターズ技術者も参加 日本語、英語 22
  24. 24. ビジネス情報 応用ビジネスの事例紹介、ご提案 23
  25. 25. 24 FLASHAIRアプリ事例 スマホ × FlashAir Raspberry Pi × FlashAir
  26. 26. スマホ × FlashAir (1) サムネイル表示 25 プレビュー フォルダ表示 動画, 音声, PDF, Word, Excel, など多様な種類に対応 シェア カメラロールにダウンロード Twitter, Facebook, 微博 他のアプリケーションで開く       よりiOSらしい操作感 素早い反応を追求 日付、名前などでの整列 iPad専用画面レイアウト 充実したヘルプ ・・・
  27. 27. スマホ × FlashAir (2)  FlashAirの設定変更もサポート Thumbnail view サムネイル表示に切り替えます Folder view フォルダ表示に切り替えます Auto reload ONの場合、FlashAir内のデータが変更 された場合に、自動的に再読み込みします FlashAir card setting SSIDとネットワークパスワードを確認、 編集します 初期化に使った管理者デバイスでない場合 は、この項目は表示されません Help ヘルプ画面を表示します Rate this app iTunesのFlashAirアプリのページを表示します 26
  28. 28. Raspberry Pi × FlashAir  Raspberry Piに接続した 「USB Webカメラ」で キャプチャ – キャプチャー・アプ リ ”Motion”を実行  「USB SDカードR/W」に 挿したFlashAirへ書込む  書込まれた画像ファイル を、FlashAirの無線LAN機 能を介してスマホで見る – ブラウザでも – 前述のアプリでも 27
  29. 29. 28 アプリストアで公開する FlashAir Developersでのご紹介 商標について
  30. 30. FlashAir Developersでのご紹介 29  アプリを作ったらぜひFlashAir Developersまで! – support@flashair-developers.com  ショーケースにてご紹介いたします – iOS, Android, Windows, Mac どれでもOK – アプリだけでなく、ライブラリ等でも構いません Windows, Mac アプリ 大募集中!!
  31. 31. 商標について 30  FlashAir、FlashAirロゴは株式会社東芝の商標です – 未許諾での使用は法律で禁じられています  現状では以下の指針がよいでしょう – アプリ名にはFlashAirを入れない – 説明文中で以下のように使う • • • • FlashAir用です (for) FlashAirと互換性があります (compatible with) FlashAirに対応しています (compatible with) FlashAirと共に使用できます (for use with) – ロゴは使わない http://www.photosync-app.com/ • 使わずに、っぽく描いている例がありますのでご参考まで
  32. 32. 31 ありがとうございました Enjoy !!

×