メディア技術基礎（ネットワーク・画像処理）最終課題

いよいよ、メディア技術基礎（ネットワーク・画像処理）最終課題について記入させていただきます。

まず、最終課題制作にあたって、私は以下のような設計図を提出しました。

正面図や断面図はこちらをご覧ください。

はじめにこの設計図に基づいて制作した改造FlickrViewerについて説明したいと思います。

改造FlickrViewerの概要について

デバッグした直後に表示されるウィンドウは以下になります。

デバッグ直後に表示されるウィンドウ

ほぼ、設計図と同様のレイアウト、機能を持った形を実現することができました。

撮影された年を指定することが出来るフォーム

左上には、撮影された年を指定することのできる入力フォームを設置。

画面をクリアするボタン

右上には、表示された画像をクリアするためのボタンを設置しました。

このFlickrViewerでは、撮影年を入力しても、しなくても検索が可能です。
撮影年はデフォルトの状態で、「Japan」というキーワードで検索すると、以下のように写真を取得、表示できます。

撮影年は表示されたものから変えずに、「Japan」で検索した。

設計図通りに、取得した画像はタイル状に表示させています。
では次に、撮影年を指定した状態で画像を検索することにします。

撮影年を2000年に指定した。

「Japan」というタグがついた、2000年に撮影された画像を取得します。
これによって、

2000年 1月1日 00:00:00〜2000年 12月31日 23:59:59

の間に撮影された写真を手に入れることが出来ます。
この結果、以下のように写真を手に入れることが出来ました。新たに検索をすると、先ほど検索して表示した画像の上に上書きされる形で表示されます。

撮影年を2000年に指定した上で、「Japan」タグのついた画像を検索

そして、表示された画像は、右上のCLEARボタンを押すことでクリアすることができます。

クリアボタンを押すことで、画面をクリアする。

以上が、改造したFLickrViewerの概要になります。

ソースコード、工夫した点

続いて、実装する上でのソースコードや工夫した点について説明したいと思います。

1. 写真をタイル状に並べる
　授業テキストでは、円状に写真を表示していましたが、シンプルに画面いっぱいにタイル状に表示されるように改造しました。画像の描画についてプログラムをしている「FlickrPhotoPanel.java」内を改造しました。

//取得した写真の枚数を格納
int photoNum = photoImgList.size();
if(0 < photoNum){
    for(int i=0; i<photoNum; i++){
        //写真の番号を9で割った際の余りの数で、列を指定する
        int amari = i%9;
        int x = (int)(0 + 75*amari);
        //写真の番号を9で割ることで行を指定する
        int count = i/9;
        int y = (int)(0 + 75*count);
    }
}

FlickrPhotoPanel.java

描画できるウィンドウは、横675px、縦300pxと指定しました。
また、Flickrから取得する画像のサイズは、縦横75pxです。このサイズの画像がウィンドウに隙間なくぴったりと埋まるためには、ちょうど54枚の画像を必要とする計算になります。
よって、FlickrAPIへパラメータ指定する際にこのサイズにぴったり画像が埋まるように、最大54枚を取得するよう設定しました。
そこで、取得した画像54枚を左上から順にタイル状に埋めていくわけですが、上から何枚目の写真であるかによって、描画する位置を指定するプログラムを書きました。(上記プログラム参照)

2. 描画されている画像をクリアする
　次に、一度描画した画像をクリアする機能について説明します。クリアといっても、実際に行っているのは"強制的に取得した画像を0枚としたこととして、画面上を再描画する"ということです。
この際にポイントとなるのは、".clear()"というメソッドです。

photoImgList.clear();

　photoImgListは、取得した画像の配列をリストとして格納している変数なので、上記のプログラムによって格納している画像のリストをすべて消してしまいます。
　この".clear()"を生かし、FlickrPhotoPanel.javaの中に、photsClear()というメソッドを用意しておきます。これを後からCLEARボタンと結びつけるのです。

public void photosClear(){
	//画像のリストデータをここでリセットする。
	photoImgList.clear();
} 

FlickrPhotoPanel.java内に、以下のメソッドをセットしておく

　一方で、CLEARボタンの描画については、以前授業でも登場したJButtonクラスを利用します。後で、このボタンに対応したイベントを発生させることが出来るよう、setActionCommandメソッドを用いて、アクションコマンドを登録しておきます。

clearButton = new JButton("CLEAR");
clearButton.addActionListener(this);
//CLEARボタンにアクションコマンドを登録しておく
clearButton.setActionCommand("CLEAR");

FlickrViewer.java内に、ボタンの描画などをセット

ボタンの描画が完了したら、CLEARボタンが押された際のイベントを設定します。

public void actionPerformed(ActionEvent e){
    //どのボタンが押されたかを確認する
    String cmd = e.getActionCommand();
    //もしCLEARボタンが押されていたら、以下を実行
    if(cmd.equals("CLEAR")){
        //先ほど作成したphotsClear()メソッドを呼び出して画像の配列リストをクリアする
        this.flickrPhotoPanel.photosClear();
    }else{
        ここでは省略
    }
    //セットした画像のリストデータに基づいて再描画する。
    this.flickrPhotoPanel.repaint();
}

FlickrViewer.java内に、CLEARボタンのイベントをセット

これで、クリアボタンが上手く動きます。ちなみに、改めて検索する場合に再描画するときも"photoImgList.clear();"を用いて一度画像の配列を空にしています。

3.撮影年指定部分の実装について
　続いて、左上のフォームで撮影年を指定する部分の実装について説明します。
フォームは、以下のようにJTextFieldを用いて作成し、描画しています。

takenYear = new JTextField("ここに撮影年を指定");

FlickrViewer.java内に、撮影年を指定するフォームをセット

デバッグした時点でフォームが出るだけでは、何を入力してよいものかわからないため、デフォルトで「ここに撮影年を指定」という文字がフォームに入るように指定しておきます。

デフォルトで、フォームの説明文を表示する

ウィンドウの立ち上げから、タグのみをフォームに入れて画像の取得を行うユーザーもいると想定されるため、画像を検索する際のイベント処理は、以下のように条件分岐しました。

public void actionPerformed(ActionEvent e){
    String cmd = e.getActionCommand();
    if(cmd.equals("CLEAR")){
        //CLEARボタンを押した際のイベント処理
    }else{
        //撮影年を入力するフォームの中の文字列を取得
        String year = takenYear.getText();
        //"撮影年フォームの中が空"または、"defaultの文字列"であるとき
        if(year.equals("") || year.equals("ここに撮影年を指定")){
            撮影年を指定しない際のイベントについて
        }else{//撮影年が入力されているとき
            撮影年を指定した際のイベントについて
        }
    }
}

撮影年が指定されていない際と、指定した際では、FlickrAPIに問い合わせるURLが異なります。
指定しない際は、撮影年フォームの文字列内容は無視し、タグ入力フォームに記入された文字列のみをパラメータとしてURLに組み込みます。

String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword);
this.flickrREST.sendRequestAndSetObj(request2flickr);

撮影年が指定されていない際のイベント処理

撮影年が指定されている時は、入力された値を、max_taken_date,min_taken_dateに引き渡し、パラメータとしてURLを作成します。

String keyword = addrField.getText();
String request2flickr = new String(
"http://flickr.com/services/rest/?method=flickr.photos.search&per_page=54&api_key="+ 
flickrApiKey +
"&tags="+
keyword +
"&max_taken_date="+
year + "-12-31 23:59:59" +
"&min_taken_date=" +
year + "-01-01 00:00:00");
this.flickrREST.sendRequestAndSetObj(request2flickr);

撮影年を指定した際のイベント処理

4.ウィンドウレイアウトの実装について
　ウィンドウレイアウトは、先日提出した断面図通りに作成しました。

ウィンドウレイアウトの断面図

//FlickrPhotoPanelインスタンスを生成
this.flickrPhotoPanel = new FlickrPhotoPanel();

//JPanelインスタンスを生成。
//topContainerの中身について
JPanel topContainer = new JPanel();
    topContainer.setLayout(new GridLayout(1,2));
    topContainer.add(takenYear);
    topContainer.add(clearButton);

//bottomContainerの中身について
JPanel bottomContainer = new JPanel();
    bottomContainer.setLayout(new BorderLayout());
    bottomContainer.add(addrField, BorderLayout.NORTH);
    bottomContainer.add(this.flickrPhotoPanel, BorderLayout.CENTER);

//topContainerとbottomContainerをBorderLayoutで上下に配置
this.getContentPane().add(topContainer, BorderLayout.NORTH );
this.getContentPane().add(bottomContainer, BorderLayout.CENTER );

レイアウトのコードについて

topContainerの中は、GridLayoutを用いることで、要素を横並びに表示しました。あとは、BorderLayoutを用いて上下に配置しました。


以上が、私が最終課題として制作した改造FlickrViewerです。長くなりましたが、よろしくお願いします。