R&Dトレンドレポート

第24回 マッシュアップ開発のススメ[その10:モバイル版アプリケーションを作ろう④]

この記事を読むのに必要な時間:およそ 3.5 分

今回は,リストから動画を選択した後の動画の詳細ページと,グラフ表示機能の実装を見てみましょう。

どんな画面?

動画のリストから動画の詳細ページに遷移しますが,以下のようなレイアウトで作成してみたいと思います。

図1 動画選択後のページのイメージ

図1 動画選択後のページのイメージ

画面レイアウトの構築

基本的にビューを定義し,そのビューに部品をアドしていくのがTitaniumの画面作成の方法です。それでは上記画面をどのように構築するかをご紹介します。

レイアウトは大きく3つの要素(ヘッダ部分,ボディ部分,グラフ部分)に分かれますが,ヘッダ部分は大きさは固定です。が,ボディ部分は不定の長さで番組によってはないものもあります。ボディ部分が長い場合はiphoneの画面長を超えて表示されるため,全体をスクロールさせる必要があります。ということで,ここでは全体をスクロールビューの上にアドしていくことにします。

リスト1 スクロールビューの作成

my scrv = Ti.UI.createScrollView({
  contentWidth:'auto',
  contentHeight:'auto',
  top:0,
  showVerticalScrollIndicator:true,
  showHorizontalScrollIndicator:false,
});

スクロールビューは縦横のビューサイズが画面を超えたときにスクロールが可能な状態にしてくれますが,今回は縦スクロールのイメージですので,showHorizontalScrollIndicatorはfalseに設定しておきます。

さて,ヘッダ部分,ボディ部分,グラフ部分もそれぞれをビューとして定義しておきましょう。ある程度の要素の集合として扱える要素についてはその固まりについてビューとして定義しておくのが便利です。

リスト2 ヘッダビューの作成

my v1 = Ti.UI.createView({
  backgroundcolor:"#e0ffff",
  top: 5,
  width:316,
  height:60,
  borderradius:5,
  bordercolor: "#d3d3d3",
})

ヘッダに表示する要素は,番組画面のアイコン,タイトル,日時などなど……。が想定されますが,ここではアイコン,タイトル,日時を表示してみます。

リスト3 アイコン(+再生ボタン画像)⁠タイトル,日付の作成

var iconImage =  Titanium.UI.createImageView({
  image:myData.iconurl,
  width:96,
  height:50,
  left:0,
  top:5
});

var saiseiImage = Ti.UI.createImageView({
  image: "avsdvdicon.png",
  width: 26,
  height: 26,
  top: 20,
  left: 35,
});

var titleLabel = Titanium.UI.createLabel({
  text:myData.title,
  font: {
      fontSize: (myData.title.length > 48)? 10: 12,
      fontWeight:'bold'
    },
  color: "#000080",
  width:'auto',
  textAlign:'left',
  top:1,
  left:98,
  height:34
});

var ymd = myData.note.startdate.split(" ")[0];
var dateLabel =  Titanium.UI.createLabel({
  text: ymd,
  font:
    {
      fontSize:10,
    },
  width:'auto',
  textAlign:'right',
  bottom:5,
  right:8,
  height:16
});

v1.add(iconImage);
v1.add(saiseiImage);
v1.add(titleLabel);
v1.add(dateLabel);

以上のようにそれぞれの部品を構築し,アドしたいビューに対する座標値を設定します。topやleft, rightはv1上の座標値となります。

※:ここでは固定値をプログラム内に書き込んでいますが,たとえばアイコンの画像サイズを変更したらすべての部品サイズが動的に変更されるように書いておくべきでしょう。

同様にボディ部分のビューの構築です。

リスト4 ボディビューの作成

var v2 = Ti.UI.createView({
  top: 70,
  width:300,
  height:"auto",
  borderRadius:5,
});

if ( myData.note.desc != null && myData.note.desc.length > 0 )
{
  var desc = Ti.UI.createLabel({
    text:myData.note.desc,
    top:3,
    height:"auto",
    color:"#576c89",
    font:{fontSize:12},
    shadowColor:"#999",
    shadowOffset:{x:0,y:1}
  });

  v2.add(desc);
}

ここでのdesc(説明)は存在しないことがあるため,上記のように無い場合はビューにテキストラベルを追加していません。ヘッダ部分では存在することが明らかな部品に対しての構築であったためこのような処理は不要でしたが,ないかもしれない部品を扱うには必要な処理となります。

それでは最後にグラフビューの構築ですが,Titaniumにはグラフ描画用のライブラリは用意されていませんでした。グラフィックライブラリを駆使すればできなくもないですが,ここではもっと簡単な方法で実現したいと思います。

著者プロフィール

脇本武士(わきもとたけし)

都内中小IT企業(メイサンソフト(株))に所属。某大手自動車会社でのシステム開発,運用を経て,現在は研究開発部署に席をお借りしています。DB周りの保守サポート,ウェブ技術開発を主に手がけてきました。現在は大規模計算フレームワークの活用とKVSに注目しています。普段はOS Xを使用していますが一番よく使うアプリはTerminalです(笑)。

R&Dトレンドレポート(てくらぼ)

コメント

コメントの記入