FlashAirファーム縦位置改造パッチ

FlashAirの内蔵写真ビュアをEXIF情報による縦位置写真対応にするパッチです。

はじめに

ご注意: 本ウェブページの内容は独自に調査・解析を行なったものを元に,独自の判断により掲載しているものです.したがって,(株)東芝等への問い合わせ等はご遠慮ください.元ネタ

新発売の、いわゆる第3世代(マーキングが「W-03」のモデル)での対応状況は不明です。先日イベントで入手しましたが予定は未定(ぉ

動作などについて

「W-02」というマーキングがある第2世代FlashAirの、ファームウェアバージョンV2.00.03にしたものを用意してください(容量は問いません)。

ブラウザの画像表示がEXIFによる回転に対応していない環境のために、JPEGデータ全体を別個に取得してEXIF情報を解析し、±90度の回転となっている画像の表示を回転させるものです。データ転送量が2倍になりますので、proof of concept以上のものではありません。あまり期待はしないでください。

(理想を言うと、thumbnail.cgi のようなAPIで必要な情報のみ取得できると望ましい感じになります。ページの最後に簡単な検討を付けています)

筆者の手元で確認に使った環境以外での動作は不明です。もしうまく動かない環境がありましたら(Twitter: @ksmakoto、などまで)ご連絡いただければ対応できるかもしれませんし、できないかもしれません。

デフォルトの List.htm と general.js の入手

まず、FlashAirの内蔵の写真ビュアクライアントアプリをファイルとして取得します。

List.htm の入手

FlashAirの SD_WLAN ディレクトリの中に List.htm を置いてカスタマイズしている場合は、まずそれを必要であればリネームするなどして、List.htm というファイルが無いようにしてください。

その上で、FlashAirにWiFiで接続しているマシンから、たとえばwgetなどで wget -O List.htm http://flashair/ のようにして内蔵の List.htm (相当のHTMLファイル)を入手します。

general.js の入手

開発者サイトのドキュメントなどでの説明はありませんが、上記の内蔵 List.htm を調べると317行目に、

<script type="text/javascript" src="/~/general.js"></script>

という記述があり、この general.js がFlashAir内蔵写真ビュアの本体です。他にもこの /~/ というパスの下には「設定メニュー」の Set.htm などがありますが(省略されました

ともあれ general.js を入手するには、List.htm の場合と同様に wget http://flashair/~/general.js などとします。

改造

List.htm の改造

diffファイルではうまくpatchが当たらない可能性があるため、以下を参考に手作業でパッチを当ててください。

--- List_wget.htm	2015-02-12 15:57:26.000000000 +0900
+++ List.htm	2015-02-09 17:58:43.000000000 +0900
@@ -314,13 +314,11 @@
 <title>FlashAir</title>
 
 <script type="text/javascript" src="/~/lang.js"></script>
-<script type="text/javascript" src="/~/general.js"></script>
+<script type="text/javascript" src="/JS/general.js"></script>
 <script type="text/javascript">
 
 wlansd = new Array();
-wlansd.push({"r_uri":"", "fname":"DCIM", "fsize":0,"attr":16,"fdate":17181,"ftime":18432});
+<!--WLANSDJLST-->
 
 wlansd.sort(cmptime);
 function cmptime(a, b){

ひとつめの変更点は general.js の場所を /~/ という(謎の?)パスの下から、何らかの既存ディレクトリにするものです。なんでも構いませんが、次のパッチを当てた general.js を置く場所と一致させてください。ここでは /JS というパスにしています。

ふたつめはFlashAirの内蔵HTTPサーバによりディレクトリエントリのリストに展開された場所を、もとのマジックコメントに戻すものです(おそらくこの部分はFlashAirの個体により内容が少しずつ違うので、機械的にはパッチが当たらないはず)。

以上のように改造した List.htm を SD_WLAN ディレクトリの中に置きます。

general.js の改造

以下のパッチを当ててください。環境等によっては改行コードに注意してください。

以下、内容を簡単に解説します。

まず一番下の getOrientation は、えがしらさんによる http://www.egashira.jp/2013/03/obtain-orientation-from-jpeg-exif のコードを元にPC上のブラウザでの動作を考慮して改造したものです。

続いて上の2つですが、動作としてはどちらも同じになりますのでまとめて説明します。window が名前に付いてるほうはブラウザ上の表示サイズに合わせて縮小した表示の場合のコード、zoom が名前に付いてるほうは拡大ボタンを押した、いわゆるピクセル等倍表示の場合のコードです。

コードを追加してあるのは Image オブジェクトの onload ハンドラの先頭の部分で、それぞれの場合で画像ファイルの画像としてのロードが終わったタイミングで呼ばれます。まず、EXIF情報を取得して画像の方向を得ています。このとき、環境が対応していればコンテンツにキャッシュが効く可能性があるはずなのですが、FlashAir内蔵のHTTPサーバが時刻情報に対応してないのかもしれませんがキャッシュは効かないようです。

続いて、回転が必要な場合は画像にCSSによるスタイルを追加して回転させます。この時、単に回転させただけでは、要素のボックスサイズが変化しないため、表示上不都合が出ます。ですのでwidthとheightを入れ替えるのですが、そうするとまずそれに合わせて画像のアスペクト比が変更されてしまいます。なので、その逆変換を掛けて画像のアスペクト比を元に戻してから回転させます。以上のようにすれば、正しく回転された画像が表示されます(はずです)。

以上のように改造した general.js を、HTTPサーバ経由でアクセスできる場所に置きます。おすすめとしてはルートディレクトリの直下に /JS というようなディレクトリを作って、そこを置き場所にします。前述のように、この場所に合わせて List.htm 内の記述を調整します。

動作確認

FlashAirをディジタルカメラに入れ、縦位置の写真を撮影して(機種によってはEXIF情報が縦になるように回転の操作をして)、ブラウザからアクセスしてみてください。サムネイル画像は対応していませんので、サムネイル画像の表示は横位置のままです。個別表示やピクセル等倍表示で正しく縦に表示されるか確認してください。

おわりに

簡単なCSSのトリックにより、FlashAir内蔵の写真ビュアクライアントアプリを縦位置写真対応にできることを確認しました。

以下、追加APIについての検討です。

(このパッチでやっているように)EXIF情報を得るためだけに画像データ全体を取得するのは無駄であり好ましくない。従ってAPIが追加されたらうれしい。

現状のAPIで、既に thumbnail.cgi がEXIFデータにアクセスしている。従って(FlashAir開発側としては)サムネイル以外のEXIFデータの情報を得る機能を追加することは大きな困難ではないだろうと思われる。

EXIFデータ全般にアクセスする機能のデザインはひと仕事となると考えられ、さらなるユースケースの検討が必要だろう。従ってここでは方向の情報のみを取得するAPIである orientation.cgi(仮称)を考える。

情報はEXIFのOrientation Tagの情報(1〜8)をそのまま伝えるものとする。具体的な表現フォーマットは要検討。

Orientation Tagには裏返しなどの特殊な場合を含む全変換パターンが定義されているが、それらにどの程度対応するかはクライアントに任せる。

サムネイルについては、既存資産等を考え既存の thumbnail.cgi の動作はそのままとする。

サムネイルは多数を一度に表示することもあり、それぞれ別個にFlashAirにアクセスするのは良くないと考える。そこでOrientation Tagの情報にもとづく変換に対応した thumbnail2.cgi(名前は要検討)を新たに追加する(EXIFの規格上サムネイルの縦横は規定されているという話もあるようなので、さらに検討が必要かもしれない)。