暮井慧といっしょ♪　冬休みプログラミング！　第1回

Windows PhoneとWeb App

　Windows PhoneのTouchDevelopとWeb Appとでは、大きく違ってるってことはなくて、むしろ一緒なの。作ったアプリは、Windows PhoneでもWeb Appでも動かせるし、両方で共有できてるっていうか、区別されてない感じ。Web AppにログインしたらWindows Phoneで作ったアプリも見えるよ。まぁ、携帯電話の機能を使ったアプリは、Web Appでは動かないんだけどね。何が言いたいかというと！　前に私が紹介した記事も役に立つから、チラっとでもいいし見てみて♪

動作環境

　要するにね、Web AppはWebブラウザーで動くから、Windowsに限らず、ほかのプラットフォームでも動くってことなの。AndroidとかiOSとかね。ここだけの話、iOS 6のiPadでもOKだよ。現時点のサポートブラウザーはこんな感じみたい。

• Internet Explorer 10
• Chrome 22以上（Windows、Mac、Linux）
• Firefox 16以上（Windows、Mac、Linux）
• Safari 6以上（Mac）
• Mobile Safari（iOS6のiPhone、iPad）
• Chrome 18以上（Android）

　いいね！　幅広いねー！

　あ、ちょっと注意点なんだけど、Internet Explorerを使う場合、Windows 7の人は「Internet Explorer 10」をインストールしてないとダメだよ。今はプレビュー版が使えるね。

　あとね、名前の通りタッチに対応した端末で一回使ってみるのがおすすめ！　タッチでプログラミングっておもしろそうじゃない？　というか、私やってみたけど面白いんだよこれが！　名前や説明を入力するときなんかは、当然キーボードを使う必要があるんだけど、コードはタッチだけで組み立てられるようになってるんだよ。もちろん、マウスで開発もできるし、キーボード操作も考慮されてるよ。

Windowsストア アプリ形式でダウンロード

　TouchDevelopさえあれば、アプリの開発から公開までできるけど、Windows向けに違う形式でダウンロードもできるの。作ったアプリは、Windows ストア アプリとWindows PhoneアプリとしてVisual Studioのファイルや、xapっていうWindows Phoneで動かせる形式でダウンロードもできるの。Windows Phoneは、以前の記事でちらっと紹介してるよ。あ、そうそう。このTouchDevelopを作ってるのは、マイクロソフトだよ。

ログイン

　そして、ログイン画面。Microsoftアカウント（Windows Live ID）、Facebook、Googleのアカウントのどれかを使ってログインできるよ。作ったアプリは、クラウド上に保存するからログインしないとダメで、クラウドサービスの利用規約に同意しないと使えないよ。

ホーム画面

　ログインした画面がこちら！　Windows 8のスタート画面っぽくなってて、Windows 8と同じようにタッチで左右にスクロールできるようになってるの。　　これがWebブラウザーで動いてるんだよ？　結構すごくない？　タブレット端末持ってる人は試したくなるでしょ？

　見てわかるように、Windows 8っぽいタイルベースのUIが使われてて、別の画面に出てくるボタンなんかもWindows 8風になってるよ。

　このホーム画面に用意されているグループを紹介するね。

my scripts（マイ スクリプト）

　自分で作ったアプリと、インストールしたアプリがここにまとまってるよ。タイルをタップしたら、一覧で見られて、コードの編集画面にも移動できるの。TouchDevelopは、アプリとして動作するコードのカタマリを「script（スクリプト）」って呼ぶからね。ここからはスクリプトって用語も使っていくよ。

chat & lean（チャット＆ラーン）

　まず、TouchDevelopのForum（フォーラム）があるね。Notifications（通知）は、公開したスクリプトにコメントがついたりしたとき、その内容が見られるよ。Settings（設定）からは、ユーザー設定とログアウト。

　ユーザー設定は、Webページとして用意されてるから、ここでnickname（ニックネーム）設定や、通知を受け取る場合は、「push notifications（プッシュ通知）」の項目にチェックを入れてね。

　あとは、Watch Videoって小さく書いてあるタイルは学習用のビデオ。Live Tutorialって書いてあるのはチュートリアルだね。これが面白いんだよ！　ビデオでしてる操作に従って、実際にスクリプト編集画面で、スクリプトが自動で組みあがっていくんだよー♪　ちなみにチュートリアルのスクリプトは、タップしたところにボールを表示するっていうもの。重力を設定するからボールは下に落っこちていくよ。

showcase（ショーケース）、tags（タグ）、games（ゲーム）、new（新着）

　これらは、公開されているスクリプトだね。showcase（ショーケース）は、選ばれたアプリだけ、tags（タグ）とgames（ゲーム）は、スクリプトについているタグで分類されてて、それぞれのスクリプトにアクセスできるよ。new（新着）は、新しく公開されたスクリプトだね。

art（アート）

　そして、もうひとつ。「art（アート）」って用語は、TouchDevelopの場合、スクリプトで使うサウンドと画像、色データのことなんだ。このグループでは、みんながartとしてアップロードした画像が見られるようになってるよ。

MEMO

　連載中にホーム画面に追加のグループができたから、そっちも紹介するね。

　libraries（ライブラリ）、top（上位）、featured（特集）のグループが追加されてるよ。いずれも、みんなが公開したスクリプトだね。ライブラリは、これだけでは使えなくて、スクリプトから使うスクリプトなの。便利機能なんかをまとめて、この「ライブラリ」形式のスクリプトも公開もできるんだよね。

　Users（ユーザー）グループは、TouchDevelopユーザーのみんなが見られるよ。ユーザーを「subscribe（購読）」する機能もあって、新しいスクリプトの公開なんかを知らせてくれるよ。

スクリプトのインストール

　ではでは、とりあえずどれかインストールしてみよっか。公開されているスクリプトの出来・不出来はさまざまだから、動くかどうかは見極める必要があるよ。Windows Phone向けのスクリプトはブラウザーで動かないこともあるから、注意だね。

　私が選んだのは、「CloudHopper」っていうゲーム。showcaseにあると思う。「See More」タイルをタップしたら一覧が見られるからね。もし、見当たらない場合は「/wbxsa」で検索してみて。このIDはスクリプトやユーザーについているIDだよ。それでも見つからない場合は、あきらめてほかのスクリプトで試してみてね。

　インストールは、右上の「install（インストール）」ボタンをタップ！

スクリプトの実行

　インストールしたら、次のような画面になるから「run（実行）」をタップすれば、いつでも遊べるよ。ゲーム自体の遊び方は、実行すればわかるかな？　ということで省略っ！

　実はこれ、Windows Phoneの加速度センサーを使ったゲームで、電話を左右に傾けてキャラクターを操作するの。だけど、Web Appでは、マウスの移動で加速度センサーの動きをシミュレートしてるから遊べちゃうの！

　あと、このゲームはね、ネットランキング機能もあって、これもTouchDevelopで提供されてる機能だよ。ランキングで競えるとか、ソーシャルゲームっぽいよね！

　run（実行）やedit（編集）タイルのある画面が、スクリプトごとのホーム画面ね。author（作者）や、comments（コメント）、このスクリプトをもとにして作られたスクリプト一覧のvariations（バリエーション）など、いろいろな情報にアクセスできるの。editをタップすると、このスクリプトの改造もできちゃうよ。改造マニアにはうってつけだね。

　ところで、夏に私がWindows Phoneで作ったスクリプトはWeb Appでもちゃんと動くから、こっちも試してみてね。IDは「/hchv」だよ。

スクリプトの作成

　スクリプトを作り始めるには、my scriptsにある「Create Script（スクリプト作成）」タイルをタップ！　もしくは「Create Game（ゲーム作成）」タイルだよ。こっちの方は、ゲーム向けにちょっとだけコードが書かれたスクリプトが作られるよ。今は「Create Script」をタップしてね。

　こんな画面が出たでしょ？　最初にスクリプトの名前を決めるよ。アプリの名前だね。これはいつでも変更できるから、とりあえずOKしとけば問題なし！

　スクリプトの編集画面がこっち！　ちなみに、画面サイズによって見え方が異なるよ。紹介していくスクリーンショットは横長画面の場合ね。

　「run（実行）」でスクリプトを実行するよ（2カ所あるね）。スクリプトのアイコンはランダムで決まるから、これも私の場合とは違ってるかもね。アイコンは、いつでも変えられるからアプリの内容にあったのを選ぶとわかりやすいかも。

Hello worldスクリプト

　画面右の「action main」って書いてるところが、このスクリプトのコード。TouchDevelopではコードのカタマリを「action（アクション）」って呼んで、mainっていう名前のアクションは、スクリプト実行したとき最初に動くコードになるの。

　1行だけの このコードは、いわゆる「ハローワールド」だね。「”Hello world!”→post to wall」で、”Hello world!“っていう文字列をwallに送る（表示する）ってこと。TouchDevelopでは画面のことをwallっていって、文字列だけじゃなく地図とか、いろいろなんでも表示できるの。コードの「→」は、左にあるオブジェクト（文字列だったり、地図だったり）の情報を取り出したり、何かコマンドを実行するときに使うTouchDevelopの文法だよ。文法っていうとなんかお堅い感じがするけど、簡単に言っちゃえば「そういうルールになってる」ってことね。気楽に行こう♪

　というわけで、なにはともあれ、実行！　「run」ボタンをタップしてみて！　「Hello world!」って表示されたでしょ？

編集画面

　「←」ボタンをタップしてさっきの画面に戻るよ（ブラウザーの戻るでもいいけど）。コードの部分を見てみてよ！　コードをタップして選択すると下にボタンがいろいろ出てくるでしょ？　このボタンをタップしていくとコードが入力できるってわけ。

　あとコードの部分にも丸いボタンがあって、「add（追加）」ボタンで行の追加や、「paste（貼り付け）」「copy（コピー）」「cut（切り取り）」の編集機能もそろってるね。ボタンは入力中のコードに応じて、適したものに変わるんだよ。自動で。かしこいんだよね～。

コードの編集

　じゃあせっかくだし、少しだけコードを書いてスクリプトを作ってみよっか！　ここからは、ぱっぱといくよ～。Hello worldの行は使わないから「cut（切り取り）」で消しちゃってOK。これから言う通りに、ボタンをタップしてコードを編集してね。ボタンがめんどうなときは、キーボードで入力もできるから、うまく使い分けて！

　最初に、「math」、「random」ボタンを順にタップ。ほら、コードによってボタンの内容が変わるでしょ？　randomは、ランダムに数値を作るコマンドだよ。

　「backspace」、「2」ボタンを使ってコードを次のように変更してね。これで「2」を超えない0以上の整数を作るってこと。つまり、0または1だよ。

　次、「store in var」ボタン。ランダムに作った数値を「変数」に入れるってこと。これしないと、randomコマンドで作った数値を使えないからね。コードは次のようになって、xっていう名前の変数にランダムな数値、ここで言うと0か1のどちらかがが入ることになるよ。

丸い「+」ボタンで下に行を追加しよう。続いて「if」「x」「=」「0」ボタンを順にタップ！　これは、いわゆる条件分岐だね。ランダムな値「x」が0になった場合と、それ以外の場合で違う処理をするよ。

　ifの下の「do nothing」部分をタップして、「"abc"」ボタンをタップ。これは文字列を入力するボタンだよ。「すきやき」って入力しよう（なんでもいいんだけど！）。入力を終えるときは、入力欄外をタップすればOKだよ。そして、「post to wall」をタップ。これはHello worldのスクリプトで出てきたね！

　続いて、elseの下の「do nothing」をタップして、同じように「"abc"」ボタンで今度は「しゃぶしゃぶ」って文字を表示するように書いてみよう。

　はい、これで完成!!　 「寒い季節だし鍋料理を食べたいけど、どっち食べればいいか迷ってるときに決めちゃうスクリプト」でした～。すきやきかしゃぶしゃぶがランダムで表示されるよ。何回か実行して確認してみてね。そして鍋料理を食べて温まってね。