サムネイルの表示

最終更新: 2017/5

第4回では、FlashAirのコンテンツのサムネイルを表示するアプリを作成します。 thumbnail.cgiを使用します。

事前準備

1. プロジェクトを作成する

まずは作成するアプリのプロジェクトを作成します。 前回までと同じく、プロジェクトを作成したいディレクトリへ移動し、以下のコマンドを実行します。

> cordova create cordovatutorial4 com.fixstars.flashair.tutorial CordovaTutorial4

また、プロジェクト作成後、 browserプラットフォーム及び以下のプラグインの追加を行ってください。

2. 第3回で使用したファイルを追加する

第3回で使用したファイルを以下のようにコピーして追加します。

cordovatutorial4
├─ hooks
├─ platforms
├─ plugins
├─ www
│   ├─ css
│   │   └─ load.css(上書きコピー)
│   ├─ img
│   │   └─ logo.png
│   ├─ js
│   │   ├─ jquery-3.1.1.min.js(上書きコピー)
│   │   ├─ load.js(上書きコピー)
│   │   ├─ tutorial2.js(上書きコピー)
│   │   └─ tutorial3.js(上書きコピー)
│   ├─ index.html(上書きコピー)
│   ├─ tutorial2.html(上書きコピー)
│   └─ tutorial3.html(上書きコピー)
└─ config.xml

アプリのトップ画面作成

1. index.htmlを編集する

アプリのトップ画面である index.htmlを編集します。 第3回の36~40行目を、以下のように変更してください。

/www/index.html

<p class="pos-center"><button type="button" onclick="location.href='tutorial2.html'">2.コンテンツリストの取得</button></p>
<p class="pos-center"><button type="button" onclick="location.href='tutorial3.html'">3.コンテンツのダウンロード</button></p>
<p class="pos-center"><button type="button" onclick="location.href='tutorial4.html'">4.サムネイルの表示</button></p>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/load.js"></script>
</body>
  • 38行目
    タップされたら tutorial4.htmlの画面へ遷移するボタンを追加しています。サムネイルの表示は tutorial4.htmlの画面で行います。

2. 実行結果

上記の編集が完了したら、ビルドを行い、出来上がったアプリのインストールを行ってください。 第3回と比べて、「4.サムネイルの表示」ボタンを追加しています。

Androidデバイスの場合

Androidデバイスのトップ画面

iOSデバイスの場合

iOSデバイスのトップ画面

サムネイルの表示画面の作成

1. tutorial4.htmlを作成する

続いて、サムネイルの表示画面を作成します。 tutorial3.htmlとの共通部分が多いので、コピーしたファイルを tutorial4.htmlとして保存して、9~24行目を以下のように変更してください。

/www/tutorial4.html

<title>Tutorial4</title>
<link rel="stylesheet" type="text/css" href="css/load.css">
</head>
<body onload="onLoad()">
<div id="header" class="pos-center">
<div id="head-left">&lt;<br>Back</div>
<h1 id="head-center">Thumbnail</h1>
<div id="head-right"></div>
</div>
<div id="list"></div>
<hr>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tutorial4.js"></script>
</body>
</html>
  • 9行目
    画面のタイトルを Tutorial4に変更しています。
  • 15行目
    ヘッダーのタイトルを Thumbnailに変更しています。
  • 22行目
    ロードするJavaScriptの内、 tutorial3.jstutorial4.jsへ変更しています。

2. tutorial4.jsを作成する

コンテンツのダウンロード画面でロードする tutorial4.jsを作成していきます。 tutorial3.jsとの共通部分が多いので、コピーしたファイルを tutorial4.jsとして保存して、93~120行目を以下のように変更してください。

/www/js/tutorial4.js

// Show the content list.
function showFileList(){
    $("#list").html("");
    $.each(wlansd, function(){
        var file = this;
        var filelink = $("<a href='javascript:void(0)'></a>");
        var caption = file["fname"];
        var faDir = file["r_uri"];
        var fileobj = $("<div></div>");
        var img = $("<img>");
        // Skip hidden file.
        if(file["attr"] & 0x02){
            return;
        }
        // Make a link to directories and files.
        if(file["attr"] & 0x10){
            img.attr("src", "img/folder.png");
            filelink.addClass("dir");
        } else {
            var array = file["fname"].split(".");
            var ext = array.length >=2 ? array[array.length-1] : "";
            // Check a file extension.
            if( ext.toUpperCase() == "JPG"){
                img.attr("src", "http://flashair/thumbnail.cgi?" + faDir + "/" + caption);
            } else {
                img.attr("src", "img/flashair.png");
            }
            filelink.addClass("file");
        }
        $("#list").append(
            fileobj.append(
                filelink.append(
                    img
                ).append(
                    caption
                )
            )
        );
    });
}
  • 102行目
    サムネイル画像を表示させる imgタグの変数を宣言しています。
  • 109行目
    コンテンツがディレクトリの場合、サムネイル画像の代わりに img/folder.pngを指定して表示させます。
  • 112-119行目
    コンテンツがファイルで拡張子が JPGの場合は、サムネイル画像を thumbnail.cgiで取得して表示させます。 また、拡張子が JPG以外の場合は、サムネイル画像の代わりに img/flashair.pngを指定して表示させます。
  • 124-128行目
    サムネイル画像をコンテンツ名( caption)の前に表示させます。

3. tutorial4.jsで指定している画像を追加する

tutorial4.jsで指定した以下の画像を /www/img以下に保存します。

folder.png

folder.png

flashair.png

flashair.png

4. 実行結果

上記のの編集が完了したら、ビルドを行い、アプリのインストールを行います。 アプリインストール後、FlashAirへ無線LAN接続していれば、トップ画面の「4.サムネイルの表示」ボタンをタップすることで、サムネイル画像付きのコンテンツリストが表示されます。 (以下の左側の画面は /ディレクトリ、右側の画面は /DCIM/100_TSBディレクトリを表示させたときの画面です。)

Androidデバイスの場合

androidデバイスのルートディレクトリの表示画面
androidデバイスの/DCIM/100_TSBディレクトリの表示画面

iOSデバイスの場合

iOSデバイスのルートディレクトリの表示画面
iOSデバイスの/DCIM/100_TSBディレクトリの表示画面

サンプルコード

リポジトリを見る(GitHub)

  • このサンプルコードは Apache License, Version 2.0 で提供されています。
  • 「cordova_tutorial_04」ディレクトリは、zipファイルで圧縮して PhoneGap Build へアップロードすることでビルドできます。 ビルド方法は HelloWorldアプリをビルドするをご確認ください。
  • Cordovaプロジェクトで確認する場合は、「cordova_tutorial_04」ディレクトリ内のデータをプロジェクト内へ上書きコピーしてください。