集中企画

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

「TouchDevelop」で、どこでも・どのデバイスでもアプリ開発! 前編

 こんにちは~! はじめましての人は、はじめまして! おひさしぶりの人は、おひさしぶり! 夏以来の再登場だよ~。また、よろしくね!

 今日は、タッチ操作でプログラミングできる「TouchDevelop」を使ってみるよ。ん? 前にもやったよねって? そうなんだけど、今回のはWebアプリ版の新しいやつ。ほら、窓の杜のニュースでもあったでしょ? 前はWindows Phone専用だったんだけど、今度はいろんな端末でアプリが作れるんだよ。おもしろいアプリだから、みんなで触ってみようよ!  プログラミングやったことがない人にも最適なアプリだよ。

暮井 慧(くれい けい) 17歳

都内の公立高校に通う女子高生。部活は、情報処理研究会。身体を動かすのも好きで、気が向いたときはなぜか体育会系の部活に混ぜてもらっていろんなスポーツをすることも。IT・開発系コミュニティ“プログラミング生放送”のマスコットキャラクターとして活動中。

「おひさしぶり~! みんなの応援のおかげで再登場! ついこの間までは、まだまだ暑かったのに急に冬が来た感じだよ。冬といえば、導電手袋だよね。これで寒い外でもスマホやタブレット操作ができるんだけど、手袋してるとすべって端末を落っことしそうになっちゃわない? 私は何度か危ない目にあったよ~。何か良い解決策があったら教えてね!」

Twitter:@pronama

TouchDevelopの世界

 TouchDevelopを使うと、タッチ操作でプログラミングできて、簡単にアプリを作れるの!

 夏に紹介したときは、Windows Phoneアプリしかなかったんだけど、Webアプリとして新しく登場したんだよ。こっちの方を「Touch Develop Web App」って呼ぶの。まだプレビュー版で、動作や機能が「あれっ?」ってところもあるけど、そこはご愛嬌ってことでね。

 まずはじめに。TouchDevelopは開発ツールでもあるんだけど、TouchDevelopの中で、アプリの開発(プログラミング)、アプリを動かす実行環境、そしてアプリを公開・共有する仕組み、全部がそろってるの。みんなが作ったアプリをインストールすることもできるし、レビューやフォーラムの機能もあって、ひとつの世界ができてるんだよ。

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を作ってるのは、マイクロソフトだよ。

TouchDevelop

 TouchDevelopは、Microsoft Reserchっていうマイクロソフトの研究部門が開発してるの。Windows Phone版は、2011年からリリースしていて現在のバージョンは、2.11だよ。20万以上ダウンロードされてるみたい。そして、Web Appは2012年10月にプレビュー版として公開されたよ。

 教育目的の色がちょっと強いけど、開発者の人も十分楽しめると思うんだよね。あと、Web Appは、TypeScriptで作られてるの。ちょっと気になるでしょ? Windows PhoneアプリはC#で作られてるんだけど、Web Appを作るにあたってJavaScriptのスーパーセットになるTypeScriptを使ったんだって。TouchDevelopとTypeScriptの話は、Build 2012のセッション動画が公開されてるから、見てみるといいかもね。

TouchDevelopにタッチ!

 じゃあ、使ってみよっか。https://www.touchdevelop.com/app/にアクセスしてみて。

 最初はこんな感じの画面かな? 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"」ボタンで今度は「しゃぶしゃぶ」って文字を表示するように書いてみよう。

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

次回予告!

 はい、今回はここまで! なんとなくTouchDevelopについてわかったでしょ? でも、紹介しきれてないことたくさんだから来週も続けます! 次回は、ゲーム関連の機能とWindowsストア アプリについてとかかな~。内容について何かあったら、いつでもTwitterで聞いてね!

(暮井 慧)