コンテンツリストの取得1 テンプレート埋め込みを使う方法

最終更新: 2013/7

FlashAirに保存されたコンテンツのリストを取得する方法について学びます。 このチュートリアルでは、FlashAirのウェブサーバーから、HTMLに埋め込まれた形でリストを返す方法を使ってみましょう。

リストは、HTMLに埋め込まれたJavaScriptプログラムとして埋め込まれています。 画面に表示するにはそのデータを、別のJavaScriptでHTMLに加工する必要があります。
今回はjQueryを利用してJavaScriptのコード量を減らし、お手軽に作成しましょう。

コンテンツリストの埋め込み

ブラウザのURL欄に、FlashAirのフォルダへのパスを入力すると、 FlashAirのウェブサーバーはHTML文書を返します。 このHTML文書は、SDメモリカードに保存されている /SD_WLAN/List.htmというファイルを元に生成されたものです。 このとき、 /SD_WLAN/List.htmにコメント文として埋め込まれた <!--WLANSDJLST-->が、 そのフォルダの内容を配列 wlansdに代入するJavaScriptのコードで置き換えられます。

http://flashair/ にアクセスした場合の結果は、例えば次のようになります。

置き換え前の /SD_WLAN/List.htmの一部

wlansd = new Array();
<!--WLANSDJLST-->

置き換え後 (ファームウェアバージョン1.xの場合)

wlansd = new Array();
wlansd[0]=",DCIM,0,16,16602,18432";
wlansd[1]=",FLASHAIR.EXE,7711563,32,16602,18432";
wlansd[2]=",PRIVATE,0,16,17034,34163";

置き換え後 (ファームウェアバージョン2.0以上の場合)

wlansd = new Array();
wlansd.push({"r_uri":"/", "fname":"DCIM", "fsize:":0,"attr":16,"fdate":16602,"ftime":18432});
wlansd.push({"r_uri":"/", "fname":"FLASHAIR.EXE", "fsize:":7711563,"attr":32,"fdate":16602,"ftime":18432});
wlansd.push({"r_uri":"/", "fname":"PRIVATE", "fsize:":0,"attr":16,"fdate":17034,"ftime":34163});

/SD_WLAN/List.htmに、このコメント文を含むJavaScriptのコードを挿入し、 ファイルのリストを表示させてみましょう。

事前準備

jQueryを ダウンロード します。

ダウンロードしたファイルは jquery-x.yy.z,min.jsxyyzには数字が入ります)というファイル名になっています。 しかし、FlashAirのファームウェアがバージョン1.00系の場合、長いファイル名を使用できませんので、 バージョン名部分を省略して短い名前に変更し、 /SD_WLAN/js/jquery.jsとして保存しましょう。

画面レイアウトの作成

ブラウザユーティリティ本体となるHTMLファイルを作成します。 画面に表示される要素はほとんどありませんが、重要な2つの仕事をしています。 1つは別のファイルとして作成されたJavaScriptをロードすること、 もう1つは、そのJavaScriptが画面要素を書き込むための <div>タグを用意することです。

作成したファイルは必ず、FlashAirの /SD_WLAN/List.htmに保存してください。

/SD_WLAN/List.htm

<!doctype html>
<html>
<head>
<title>FlashAir</title>
<meta charset="UTF-8">
<script type="text/javascript" src="/SD_WLAN/js/jquery.js"></script>
<script type="text/javascript" src="/SD_WLAN/js/main.js"></script>
<script type="text/javascript">
wlansd = new Array();
<!--WLANSDJLST-->
</script>
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<hr>
<div id="list">
</div>
<hr>
<div id="footer">
footer
</div>
</body>
</html>
  • 6,7行目
    jquery.jsと、次に作成する main.jsをロードしています。
  • 9行目
    配列を宣言し、10行目のコメント文で差し込まれる代入文に備えます。
  • 18行目
    listという id属性を持つ divタグを宣言しています。この中にフォルダのファイルリストが挿入されます。

コードの作成

差し込まれたフォルダリストを解析して、読みやすい形でHTMLに挿入する作業を、JavaScriptで記述します。

FlashAirのファームウェアバージョンによってデータの差し込み方法が異なるため、 バージョンを判定して、バージョン2の形式に統一するヘルパー関数( isV1()convertFileList())を使用しています。

作成したファイルは好きな名前をつけて構いません。 本チュートリアルではFlashAirの /SD_WLAN/js/main.jsというファイルとして作成することにします。

/SD_WLAN/js/main.js

// JavaScript Document

// Judge the card is V1 or V2.
function isV1(wlansd) {
    if ( wlansd.length == undefined || wlansd.length == 0 ) {
        // List is empty so the card version is not detectable. Assumes as V2.
        return false;
    } else if ( wlansd[0].length != undefined ) {
        // Each row in the list is array. V1.
        return true;
    } else {
        // Otherwise V2.
        return false;
    }
}
// Convert data format from V1 to V2.
function convertFileList(wlansd) {
    for (var i = 0; i < wlansd.length; i++) {
        var elements = wlansd[i].split(",");
        wlansd[i] = new Array();
        wlansd[i]["r_uri"] = elements[0];
        wlansd[i]["fname"] = elements[1];
        wlansd[i]["fsize"] = Number(elements[2]);
        wlansd[i]["attr"]  = Number(elements[3]);
        wlansd[i]["fdate"] = Number(elements[4]);
        wlansd[i]["ftime"] = Number(elements[5]);
    }
}
// Callback Function for sort()
function cmptime(a, b) {
    if( a["fdate"] == b["fdate"] ) {
        return a["ftime"] - b["ftime"];
    }else{
        return a["fdate"] - b["fdate"];
    }
}
// Show file list
function showFileList(path) {
    // Clear box.
    $("#list").html('');
    // Output a link to the parent directory if it is not the root directory.
    if ( path != "/" ) {
        // Make parent path
        var parentpath = path;
        if ( parentpath[parentpath.length - 1] != '/' ) {
            parentpath += '/';
        }
        parentpath += '..';
        // Make a link to the parent path.
        $("#list").append(
            $("<div></div>").append(
                $('<a href="' + parentpath + '" class="dir">..</a>')
            )
        );
    }
    $.each(wlansd, function() {
        var file = this;
        // Skip hidden file.
        if( file["attr"] & 0x02 ) {
            return;
        }
        // Make a link to directories and files.
        var filelink = $('<a></a>').attr('href',file["r_uri"]+'/'+file["fname"]);
        var caption = file["fname"];
        var fileobj = $("<div></div>");
        // Append a file entry or directory to the end of the list.
        $("#list").append(
            fileobj.append(
                filelink.append(
                    caption
                )
            )
        );
    });     
}
// Document Ready
$(function() {
    if ( isV1(wlansd) ) {
        convertFileList(wlansd);
    }
    wlansd.sort(cmptime);
    showFileList(location.pathname);
});
  • 4-15行目
    データ形式がV1かどうかを判定するヘルパー関数です。V1であればtrueを返します。
  • 17-28行目
    データ形式を、V1形式からV2形式に変換するヘルパー関数です。
  • 30-36行目
    データを日付と時間で整列するための関数です。
  • 38-69行目
    差し込まれたファイルリストの各行に対して、アンカー( <a>)とボックス( <div>)を生成し、 HTML中に用意した表示位置( $("#list"))に追加しています。
  • 71-77行目
    本ファイルが読み込まれたときに自動的に呼び出されて、処理を実行する部分です。 V1だった場合はデータ形式を変換し (72-74行目)、日付でリストをソートして(75行目)、 ファイルリストを表示する関数 (76行目) を呼び出しています。

実行結果

コードをFlashAirに置いたら、FlashAirに無線LAN接続したPCまたはスマートフォンのブラウザで確認してみましょう。 例えば、以下のような画面が表示されるでしょう。 文字の大きさなどはCSSなどで工夫してみてください。

Browser Utility Tutorial 2 Result

サンプルコード

web_tutorial_02.zip (4KB)

このサイトのサンプルコードは 二条項BSDライセンスで提供されています。