libro
www.tuyano.com
DashcodeによるiPhone用Webアプリ作成入門

リストとデータソース (1/8)

作成:2011-05-16 08:08
更新:2011-05-16 08:08

■リストとは?

Dashcodeには、「リスト」と呼ばれるGUI部品があります。といっても、これはHTMLの<select>タグで作られるものではありません。前回、各種のインジケータを使いましたが、それらと同様に複数のタグを組み合わせて作り出した、独自のGUI部品です。

iPhoneのアプリでは、いくつかの項目がずらっと並び、その中から一つをタッチするとその画面に進む、といったインターフェイスがよく用いられます(「設定」アプリの表示などはまさにこのスタイルですね)。この項目表示に相当するGUIを提供するのが、Dashcodeの「リスト」なのです。

このリストは、ライブラリパレットの「部品」に2種類用意されています。それぞれ以下のような違いがあります。

エッジ・トゥ・エッジリスト――画面の端から端までぴったり広がって表示されるタイプのリストです。
角の丸い長方形リスト――画面内に角の丸い四角形を表示し、その中にリストを表示するものです。

エッジ・トゥ・エッジリストも、大きさを調整して画面内に小さく嵌めこむことはできますが、インターフェイスとしてはあまりいい使い方ではないでしょう。iPhoneのアプリを想い出せば、リストというのは「画面全体に一覧で表示されるもの」か、「角の丸い四角形の形で表示されるもの」のどちらかであることがわかります。

これらのリストは、配置後、表示される項目を設定して使います。属性インスペクタのパレットを見ると、リストに表示する項目に関する以下のような属性が用意されていることがわかります。

データのタイプ――どのような形でデータを用意するかです。「静的」「動的」があります。静的は、あらかじめ表示する項目を設定しておくもので、動的は外部から必要に応じてデータを受け取るやり方です。

ラベル要素――項目に表示されるラベルに関するものです。各項目のどの部分にラベルを表示するかを指定します。Labelは、ラベルの部分(項目に普通に表示されているテキスト部分)で、Arrowを選ぶと矢印部分(右側の>部分)にラベルのテキストが表示されます。

項目の設定欄――静的データタイプの場合、その下にリストの項目を設定するための欄が表示されます。ここに表示する項目のラベル(実際にリストに表示されるテキスト)と値(項目の値としてプログラム内から得られるもの)を設定できます。また「」と「」ボタンで項目の増減を行えます。

とりあえず、リストを配置し、項目を設定すれば、リストそのものは使えるようになります。ただし、これはHTMLのタグをそのまま使っているわけではなく、独自に作り出したGUIですから、当然ですが複数のタグの組み合わせによって構成されていますので、JavaScript内から利用するためには独自の仕組みについて理解しなければいけません。

とりあえず、プログラム内の処理については後回しにして、続いて表示に関するもう1つのやり方について説明をしていきましょう。それは「動的」に項目を作成し表示する方法です。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。


※関連コンテンツ

「DashcodeによるiPhone用Webアプリ作成入門」に戻る