ウェブブラウザ向けFlashAirアプリ開発の概要

最終更新: 2013/7

FlashAirに保存されているファイルを、そのFlashAirに無線LAN接続された PC、スマートフォンなどから、ウェブブラウザで見ることができます。 ウェブブラウザに表示される画面は、ブラウザユーティリティというプログラムがFlashAir APIなどを使って生成したものです。 ブラウザユーティリティを作成する方法を学びましょう。

ブラウザユーティリティ

ブラウザユーティリティとは、FlashAirに接続したPCやスマートフォンから、 ウェブブラウザでFlashAirのコンテンツを見る場合に表示される画面のことで、 HTML、CSS、JavaScriptの各ファイルから構成されています。

独自のブラウザユーティリティを作成することで、 ウェブブラウザでFlashAirコンテンツを見る場合のデザインを変えたり、 画像処理などの独自の機能を追加することができます。

本チュートリアルでは、ブラウザユーティリティの作成する方法を解説していきます。

ブラウザユーティリティについては APIガイド | ブラウザユーティリティもご覧ください。

Browser Utility Example 1

準備

1. 開発環境の準備

ブラウザユーティリティの開発では、HTML、JavaScript、CSSを編集して、結果をウェブブラウザで確認することが主な作業となります。 使いやすいテキストエディタとウェブブラウザを用意しましょう。 それ以外に、特別な開発用ソフトウェアは必要ありません。

本チュートリアルでは、人気のあるWebコンテンツ用ライブラリである jQuery Bootstrap を使っていきます。詳しい情報は、それぞれのサイトなどをご覧ください。

JavaScriptが動作している様子を確認できるFirefoxのウェブ開発ツールがあると非常に便利です。 開発中は開発者ツールを備えた本格的なウェブブラウザが使えるPCを、無線LANでFlashAirに接続して使用すると効率的でしょう。

作ったプログラムを実行するには、PCなどのSDメモリカードスロットを持つ機器(SDメモリカードホスト機器)を用いて、FlashAirにプログラムを書き込む必要があります。 開発中は頻繁に行うことになりますので、編集する機器とSDメモリカードホスト機器は同じ方がよいでしょう。

注意: iOSやAndroidのアプリ開発では、作成したプログラムを実行するには、iOSまたはAndroidのデバイス実機にインストールします。 しかし、ブラウザユーティリティの場合、作成したプログラムを実行するには、FlashAirに書き込む点に注意しましょう。 これは、ブラウザがFlashAirからブラウザユーティリティを都度取得して実行する仕組みであるからです。

2. FlashAir実機の入手

作ったユーティリティを動かしてみるには、FlashAir SDメモリカードが必要になります。 家電量販店やネット通販で購入できます。

3. バックアップの作成

最初にバックアップを取っておきましょう。 FlashAirの /SD_WLAN/フォルダ以下のファイルをすべて保存します。 ブラウザユーティリティがうまく動かなくなっても、バックアップした状態に戻せば、いつでももとの状態に戻せます。 このフォルダは隠しフォルダとなっていますので、隠しフォルダを扱う事が出来るツールを使いましょう。

4. 補足: 開発をよりスムーズにするために

ステーションモード
デバイスがFlashAirと通信中の場合、無線LAN経由でインターネットへアクセスすることはできなくなるため、調べものなどが不便になります。 通常、FlashAirは無線LAN親機(アクセスポイント)として動作していますが、 FlashAirをステーション(STAモード)に設定すると、FlashAirは無線LAN子機(ステーション)として、他の無線LAN親機(アクセスポイント)に接続することができるようになります。 開発に使用しているマシンとFlashAirを同じ無線LAN親機に接続すると、 FlashAirにアクセスしながらインターネットへアクセスすることも出来るので、開発中はSTAモードが便利です。
詳しくは 上級者向けチュートリアル / ステーションモードを参照してください。
無線LAN接続タイムアウト時間の変更
FlashAirは電力節約のため、しばらく通信がないと無線LANの電源を停止します。 開発中はしばしばそのようなことが発生するため、接続タイムアウトを大きな値に変更しておくと便利です。
詳しくは CONFIGリファレンス / 接続タイムアウト時間の設定を参照してください。

開発に必要な知識

FlashAirとの通信は、すべてHTTP通信によるCGIコマンドで行います。 そのため、HTTP通信とCGIの基礎、およびFlashAir CGIの挙動を理解していることが必要です。 また、デザインのためのHTML、CSS、Javascriptなどの知識も必要になります。

本チュートリアルでは、FlashAirのCGIコマンドについて解説しながら簡単なブラウザユーティリティを作っていきます。 チュートリアルを終えたら、あとは開発者の皆さんのアイデア次第です。 クールなブラウザユーティリティを作成し、友達にも使ってもらいましょう!