検索
連載

TouchDevelopでプログラミングを始めるための基礎知識iPad上でアプリ開発は、どこまでできるのか(2)(2/4 ページ)

タッチデバイスで手軽にアプリを作れる新しい開発ツ−ルの概要や使い方を解説。プログラミングの基本も学べる連載です。今回は、文字列の色の変更、入力プロンプトの出現、タップした後の動きの設定、プログラムの再利用方法、グローバル変数の作り方などを解説します。

PC用表示 関連情報
Share
Tweet
LINE
Hatena

イベントを利用してタップした後の動きを設定する

 次にイベントを利用してみましょう。イベントを付けると、「TextBox」「Camera」をタップしたときの動きや、端末を振ったときの動き、さらにはゲームループまで実行できます。

 今回は、text boxをタップして、プロンプトを表示、プロンプトに入力した文字列をtext boxにセットするという流れで、編集可能なtext boxを実装してみましょう。

イベントを作るには

 初めに、text boxを作成します。コードが書けたら、「events」にある「new」ボタンをタップします。


eventを新しく作成する

 eventには多くの種類があり、適切なものを選択します。今回は「tap wall TextBox」を選択します。


TouchDevelopで利用できるevent

 すると、eventのひな型ができます。

タップした後の動きを設定するには

 タップしたtext boxは「item」という名前で「do」以下で扱えます。今回はitemのテキストをプロンプトから入力したものに変更するため、do以下に以下を追記します。

item → set text(wall → ask string(""))


タップしたときにどうするか、を記述する

 実行してみましょう。初めに「てきすとぼっくす」と表示されます。


「てきすとぼっくす」が表示される

 「てきすとぼっくす」をタップすると、プロンプトが表示されます。プロンプトに任意の文字列を入力して、「go」をタップします。


「go」をタップ

 すると、text boxのtextが「てきすとぼっくす」からプロンプトに入力した文字列に変更されます。


文字列が変更されたtext box

itemを指定してプロパティを変更するには

 しかし、これではすべてのtext boxが編集可能になってしまいます。また、どのtext boxか見た目の区別が付きません。そこで、「border」などのプロパティを使って判別するようにします。

 以下のようにtext boxを2つ表示します。1つはborderの色が赤色、もう1つはbackground colorになるように記述しています。この時、background colorの色は白になります。background colorに設定する理由は後述します。


border colorの違った2つのtext boxを表示

 次に、eventも以下のように書き換えます。


borderが赤のtext boxにのみ編集可能にする

 itemの文字列を変更するまえにborderが赤色かどうか判別します。このとき、itemのborderが未定義の場合、実行するとエラーになってしまうため、編集しないtext boxに対してborderにbackground colorを設定しています。

 実行してみましょう。下の赤枠でくくられたtext boxは編集できますが、上のtext boxは編集できないようになりました。


編集可能なtext boxと編集不可能なtext box

グレーの枠と背景に、白字のtext boxを表示するには

 赤枠で囲っただけだと、なかなか編集可能には見えません。もう少しデザインにこだわってみましょう。

 例えばグレーの枠と背景に、白字のtext boxを表示したい場合、以下のように記述します。


編集できそうなtext boxを実装する

 実行すると、このように表示されます。少しtext boxらしくなりました。


編集できそうなtext boxと普通のtext box

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る