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

ゲームのスクリプト

　［Create Game（ゲーム作成）］タイルをタップすると、ゲーム開発の機能をいくつか使ったスクリプトができるから、これをちょっと見てみよう。

　スクリプトを新しく作ったら、とりあえず実行してみよう♪　このスクリプトはどんなスクリプトかというと、タップしたところにボールを表示するっていうもの。重力と画面はじに「壁」を設定しているから、落ちたボールはバウンドするよ。あ、もしかすると、あなたがこれを読んでいるときは、TouchDevelopがアップデートされてスクリプトの内容が変わってるかもしれないけど、そのときは臨機応変に対応してね！

　TouchDevelopは、簡易的な2Dの物理エンジンも搭載してるんだよ！　いいでしょこれ！　だからこの重力や、弾力性の設定、障害物の設置とか、もともとできるようになってるんだよね。だけど、ボール同士の衝突処理まではできなくて、そこは自力でコードを書く必要があるんだけどね。

mainアクション

　コードはこんな感じだね。ちょっと読み進めてみよっか。このスクリプトは、3カ所にコードが書いてあるの。ひとつは、mainアクション。

　覚えてるかな？　mainアクションは、いちばん最初に実行されるんだったよね。ここで最初に1回だけ行う処理を書いてるよ。いわゆる初期化処理ね。普段の暮らしで言うと、朝、目が覚めたら歯を磨いて顔を洗って……みたいなね。え？　違う？　まあそこは雰囲気ってことでね♪

　TouchDevelopでは、画像なんかを自由に画面に配置するには、「Board（ボード）」っていうオブジェクトを使うんだ。コードにもあちこち「board」の単語があるでしょ？　boardで、ボールを作って表示したり、重力の設定なんかもできるの。で、wallにboardを送って（post to wall）表示するってわけ。

　mainアクションでしてる内容は次の通りだよ。私なりに説明を入れてみたから、見てみてねー。

　「board」の文字の左に何か四角いのがついてるって？　さすが、よく見てるよねー。うん。これはね、グローバル変数っていうやつなんだけど、ちょっと待ってて。後で説明するから！

イベント

　あと2か所あるコードは、events（イベント）にあるよ。［gameloop］と［tap board: board］ってところをタップすると出てくるよ。このふたつは、イベントを起点にして呼び出されるコードのカタマリだね。

　boardをタップしたらっていうイベントが「tap board: board」ってわけ。つまり、ここにはボールを新しく表示するってコードが書かれているはずっ！　「tap board: board」のイベントを見てみて。ここで［create ellipse］っていうコマンドを使ってboardにボールを作ってるの。ボールじゃなくて実際は、楕円（ellipse）だったってことだね！　ここでは、縦と横の幅が100と100だから円ってこと。

　コードでは、circleっていう名前の変数を作って、位置と色と摩擦を設定してるね。試しにいろいろいじってみて！

　もうひとつの「gameloop」は、特別なゲーム向けのイベントで、約50ミリ秒おきにイベントが発生するの。このイベントで何をしているかというと……、boradのコマンドをふたつ実行してるよね。

　board上のelipseなどのオブジェクトは、重力の作用なんかによって移動するわけだけど、evolve（進化させるとかって意味だよ）コマンドを実行したときに移動が反映されるの。それだけだと、まだ画面には反映されなくて、update on wall（更新）コマンドで表示を更新する……っていうお決まりのコードだよ。それを、gameloopイベントを使って、ずっと、何回も、えんえんと、表示を更新し続けるって感じね。

データ

　さて、アクションでもイベントでも、ふつーに「board」を使ってたけど、ふつーは別々のアクションやイベントで同じオブジェクト（ここではboardのこと）を使えないの。そこで、どこでも使えるようにしておく必要があるんだよ。

　というわけで、さっきmainアクションの説明してるときに、四角が気になってた人！　おまたせしました！　どこでも使えるオブジェクトをTouchDevelopでは、「data（データ）」って呼んでるよ。一般のプログラミング言語でいうところのグローバル変数ね。dataのところに［board: Board］ってあるでしょ？　これがそれ。こういうふうにdataだけをまとめて管理できるの。

　dataは、丸い「+」の［new（新規）］ボタンから作ってもいいんだけど、コードの入力中に、［promote to data］ってボタンが出てくるから、これを使えば便利だよ。普通の変数をdataにpromote（昇格）するってことだね。

　ちょっと駆け足だったけど、ゲームのスクリプトはこんな感じだよ。説明不足なところは実際にいろいろいじってみて感触をつかめば、だいたいわかると思うよ！ だからあんまり細かいことは気にせずに、どんどん触ってみてね！

Windows ストアアプリの開発環境

　さっそくエクスポートしたいところだけど、ちょっとまったー！　Windows ストアアプリの開発は、実はけっこうハードル高いんだよね、残念ながら……ユーザーが少なそうとか、流行ってなさそうとか、そういうのじゃなくて、開発の条件がそんなにゆるくないんだよね。

　まず、Windows 8が必要だよ。そして、Visual Studio 2012もね。Visual Studioは、Visual Studio Express 2012 for Windows 8っていう無償のが使えるから、持ってない人は、これインストールしてね。

　そして、Windows ストアアプリを公開するためには、Windows ストア開発者アカウントの登録が要るの。年間の登録料が4,900円で、クレジットカードが必須……ってこれ、私できないじゃん！　クレジットカード持ってないし！　とりあえず、私はお父さんを巻き込んで、一緒にアプリ作って公開するっていう手口でいこうかな？

　Visual Studioの使い方や、アカウントの登録については、ここで詳しい内容は説明できないから、デベロッパーセンターを見たり、ほかのサイトを検索してみたりしてね。リンク貼っといたよ。ばばーん！

エクスポート方法

　それじゃ、エクスポート方法ね。スクリプトの編集画面で、スクリプト名をタップして。［create Windows Store app（Windows ストア アプリの作成）］ボタンをタップすれば、zipファイルがダウンロードできるよ。簡単でしょ？

　ただし条件として、公開したスクリプトであること。自分のスクリプトであることが必要だよ。

　確認ダイアログにさっき言ったVisual Studioと開発者アカウントのことが書いてあるね。［download app（アプリのダウンロード）］をタップ！

エクスポートしたファイルの修正

　でね、Windows ストアアプリは、公開するときに、認定っていってアプリの審査があるから、これに合格するようにアプリを作らないといけないんだよね。TouchDevelopでエクスポートしたアプリは、合格するために少しだけ手を入れないといけない所があるの。その手順を説明するよ。

　別にこれしたから必ず合格できる方法ってわけじゃないから注意してね。合格できるかどうかは、みんなのアプリ次第だよ！　あと、TouchDevelopはバリバリ開発中のサービスだから、頻繁にアップデートされてるんだよ。だから、ちょっと内容が違うところがあるかもしれないけど……いま！　まさに！　進化の過程に立ち会ってる私たちっ！　っていう感じで、そういう変化も楽しみたいよね♪

　じゃあ、エクスポートしたzipファイルを展開して、Visual Studioで開いてみよう！　TouchDevelopで作ったスクリプトは、JavaScript/HTML5/CSSで書かれたアプリにエクスポートされてるよ。

　［F5］キー、または［Ctrl］+［F5］キーで実行だよ。とりあえず動かしてみよう！　ストア アプリとしてちゃんと動いたかな？　もし動かなかったら、あきらめよう！　うん、あきらめも肝心！

画像の変更

　きちんと動くの確認できたら、画像を変更してみようかな？　ストア アプリには、スプラッシュ画面とかロゴ画像をいくつか用意しないといけないの。imagesフォルダーにあるPNG画像をアプリにあった画像に差し替えてね。大きさや名前は、変えちゃダメだよ！

設定の修正

　修正が必要なところなんだけど、アプリの説明や、プライバシーポリシーについてなの。アプリを実行して、設定チャームを見てみて。About（アプリについて）、Feedback（フィードバック）、Terms of Use（利用規約）、Privacy Statement（プライバシーポリシー）の4箇所を、適切な内容に書き換えないといけないわけ。Settings（設定）も、このアプリで作られてる項目だよ。

　htmlフォルダーにHTMLファイルが4個あるから、これらを修正すればOKだよ。HTMLだし、編集はわかるかな？　コード中の最初の <div class="win-settings-section"> から </div> までの中身を書き換えるよ。

それぞれのファイルで、編集する内容を説明するね。

about.html
アプリについて書くところ。はじめからスクリプト名やあなたのユーザー名が書いてあるけど、自由に変更しても大丈夫だよ。

feedback.html
ユーザーがアプリのサポートを受けたいときの項目だから、アプリのWebサイトへのリンクを追加したり、メールアドレスを載せたりするよ。

termsofuse.html
利用規約を書くところ。直接ここに書いてもいいし、リンクを追加してもいいよ。

privacystatement.html
プライバシーポリシーについての項目だよ。はじめから、TouchDevelopのポリシーが書いてあるけど、それとは別にアプリのプライバシーポリシーが必要だよ。プライバシーポリシーが書いてあるWebページにリンクするのがお手軽かな？

　いろいろ項目があるんだけど、絶対必要なのは、プライバシーポリシー！　これがないと認定でリジェクトされちゃうよ。リジェクトっていうのはようするに認定が通らない、つまりアプリが公開できないってこと！　プライバシーポリシーを作るのってたいへんそうだけど、プライバシーポリシーが用意されていることが重要なの。だから、個人なら簡素な内容でも問題ないと思うよ。個人情報を収集しないことや問い合わせ先を書いたWebページを作るのが手っ取り早いかな。

　あってもなくてもいい項目を表示しない方法は、次の日本語化であわせて説明するね。

日本語化

　エクスポートしてできたアプリって英語だよね。日本語にする方法も説明しておくね。これは、TouchDevelopで想定されてない修正だから、やり方は今後のアップデートで変わっちゃうかもだけど……。

　まず、HTMLファイルの内容を日本語にするのは簡単だよね？　日本語で書いちゃえばいいんだから。コード中の「About」や「Terms Of Use」部分も日本語で表記しておこうね。ちょっとした罠なんだけど、日本語で編集したら、ファイルを「名前を付けて保存」で「エンコード付きで保存」する必要があるの。「Unicode（UTF-8 シグネチャ付）」を選ぶよ。

　次は、設定チャームの表示の変更！　これがTouchDevelopでは想定されてない編集だよ～。jsフォルダーのruntime.jsに次のコードからあるから、これを直接編集するよ。すごい長いコードだから「about.html」とかで検索してみて。

　ここが、設定チャームに表示する項目を決めてるところだね。ここの”About”とかを日本語に変えちゃおう。表示したくない項目は、ここで消しちゃえばいいんだよ。あと、TouchDevelopでは、settings.htmlの修正も想定されてないんだけど、日本語にするにはここも修正しなきゃね。

　そして、最後。これはWindows ストアアプリ共通だよ。package.appxmanifestファイルを開いて、既定の言語ってあるでしょ？ これを「en」から「ja」、説明の項目も日本語にしようね。