コンテンツリストの取得

このチュートリアルではコンテンツリストの取得方法について学びます。使用するCGIは command.cgi です。

GetList ボタンをクリック（タップ）すると、FlashAirの現在のコンテンツがリストに表示されるように作成します。

このようにレイアウトを設定します:

display empty list

重要: Android application は、デフォルトの状態ではインターネットにアクセスすることができません。そのため、設定ファイル AndroidManifest.xml を変更し、権限を与える必要があります。
パス: [Project_Folder]/AndroidManifest.xml
AndroidManifest.xml に以下のコードを追加してください:

<uses-permission android:name="android.permission.INTERNET" />

ここでは、説明のために _AndroidManifest.xml_の内容を記していますが、追加は Permissionsタブの画面から行うようにしてください。

ではまず、 activity_main.xml を記述して、レイアウトを決定します。このファイルは、layout フォルダに配置されています。パス: [Project_Folder]/res/layout/activity_main.xml

レイアウトの作成

Button を１つと、 TextView を２つ設定します。 TextView の text要素には、デフォルト値を設定しておきます。 FlashAir のコンテンツを取得したら内容を置き換えます。

activity_main.xml に以下のように記述してください:

activity_main.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="vertical"
        tools:context=".MainActivity" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:cacheColorHint="#00000000"
            android:text="Get List"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/textView0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:scaleType="centerInside"
            android:text="# of items will be here"
            android:textAlignment="center"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:text="List of contents will be here"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textSize="20sp" />

    </LinearLayout>

コンテンツリストの作成

次に、 MainActivity.java を修正します。自動生成された直後は、このように記述されています:

MainActivity.java

    import android.os.Bundle;
    import android.app.Activity;
    import android.view.Menu;

    public class MainActivity extends Activity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }
    }

初期化

ボタンがクリックされた場合の処理を行うため、OnClickListenerインターフェースをクラス宣言に追加します。以降、必要になったImport文は、適宜追加してください。

MainActivity.java (1)

    public class MainActivity extends Activity implements OnClickListener {

ボタンの定義

onCreate(Bundle savedInstanceState) を編集します。 Buttonがクリックされたらコンテンツリストを取得するように、以下のように設定します:

MainActivity.java (2)

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            Button button = (Button)findViewById(R.id.button1);
            getWindow().setTitleColor(Color.rgb(65, 183, 216));
            button.getBackground().setColorFilter(Color.rgb(65, 183, 216), PorterDuff.Mode.SRC_IN);
            button.setOnClickListener(this);
        }

onCreateOptionsMenu(Menu menu) の関数はそのまま残します:

MainActivity.java (3)

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // Inflate the menu; this adds items to the action bar if it is present
            getMenuInflater().inflate(R.menu.main, menu);
            return true;
        }

ファイル数の取得・表示

前の手順で作成したクリックリスナーを Buttonに設定し、 Buttonがタップされた際に、ファイル数とファイルリストを取得し表示するようにします。

ファイル数を取得するためには、以下のコマンドを使用します。

ファイル数は、command.cgiにop=101 とフォルダパスを指定することで取得できます。
- コマンド: http://flashair/command.cgi?op=101&DIR=/DCIM
- コマンドが返す情報: <NumberofItems>

コマンドの実行には、URLConnectionを使用しています。 URLConnectionを使用する一連の処理は、 FlashAirRequest.java にまとめます。 CGIコマンドを実行し結果の文字列を返す、 getString()を作成します。

FlashAirRequest.java

    public class FlashAirRequest {    
        static public String getString(String command) {    
            String result = "";
            try{
                URL url = new URL(command);
                URLConnection urlCon = url.openConnection();
                urlCon.connect();
                InputStream inputStream = urlCon.getInputStream();         
                BufferedReader bufreader = new BufferedReader(new InputStreamReader(inputStream, "UTF-8"));
                StringBuffer strbuf = new StringBuffer();
                String str;
                while ((str = bufreader.readLine()) != null) {
                    if(strbuf.toString() != "") strbuf.append("\n");
                    strbuf.append(str);
                }
                result =  strbuf.toString();
            }catch(MalformedURLException e) {
                Log.e("ERROR", "ERROR: " + e.toString());
                e.printStackTrace();
            }
            catch(IOException e) {
                Log.e("ERROR", "ERROR: " + e.toString());
                e.printStackTrace();
            }
            return result;
        }
    }

次に、 FlashAirRequest.java を使用する側の処理を作成します。 UIが長い間操作を受け付けない状態にならない（ブロックしない）よう、通信処理は AsyncTaskを使用して別スレッドで行います。

MainActivity.java (4)

        @Override
        public void onClick(View view) {
            switch ( view.getId() ) {
            case R.id.button1 :            
                // Fetch number of items in directory and display in a TextView
                new AsyncTask<String, Void, String>(){
                    @Override
                    protected String doInBackground(String... params) {
                        return FlashAirRequest.getString(params[0]);                
                    }
                    @Override
                    protected void onPostExecute(String fileCount) {
                        TextView textView = (TextView)findViewById(R.id.textView0);                    
                        textView.setText("Items Found: " + fileCount);        
                    }
                }.execute("http://flashair/command.cgi?op=101&DIR=/DCIM");

9行目
FlashAirRequest.java に実装したgetString()を使用してCGIコマンドを実行し、その結果を返しています。
13-14行目
doInBackground()の戻り値をonPostExecute()で受け取り、前の手順で設定した_activity_main.xml_ のTextView のうちの１つ目にファイル数を表示しています。

ファイルリストの取得・表示

ファイルリストを取得するためには、以下のコマンドを使用します。

ファイルリストは、command.cgi にop=100 とフォルダパスを指定することで取得できます。
- コマンド: http://flashair/command.cgi?op=100&DIR=/DCIM
- コマンドが返す情報:<Directory>,<Filename>,<Size>,<Attribute>,<Date>,<Time>

同じく、作成した FlashAirRequest.java を使用してコマンドを実行します。

MainActivity.java (5)

                // Get a file list from FlashAir
                new AsyncTask<String, Void, String>(){
                    @Override
                    protected String doInBackground(String... params) {    
                        return FlashAirRequest.getString(params[0]);
                    }
                    @Override
                    protected void onPostExecute(String text) {
                        TextView textView1 = (TextView)findViewById(R.id.textView1);
                        textView1.setText(text);
                    }
                }.execute("http://flashair/command.cgi?op=100&DIR=/DCIM");
                break;
            }
        }
    } // End MainActivity class

5行目
FlashAirRequest.java に実装したgetString()を使用してCGIコマンドを実行し、その結果を返しています。
9-10行目
doInBackgroundの戻り値をonPostExecute()で受け取り、前の手順で設定した_activity_main.xml_ のTextView のうちの2つ目にファイルリストを表示しています。

実行結果

command.cgi の op=100 は指定したフォルダの以下の情報を返します:
<Directory>,<Filename>,<Size>,<Attribute>,<Date>,<Time>

作成したリストでは、コマンドが返す情報すべてを表示しています:

displayed content list

サンプルコード

android_tutorial_02.zip (528KB)

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