犬でもできる！　杏子とわんこのAIRNovel講座　第4回

　誰でも無償で使えて、マルチプラットフォームのノベルゲームを開発できる「AIRNovel」。本企画では全4回にわたり、AIRNovelでのゲーム制作の基本から、制作したゲームを実際に公開したり、Web上でプレイできるようにするまでを対話形式で解説します。

　前回まで、ゲーム制作の基本からちょっとした応用、制作したゲームを配布する方法などを解説してきたAIRNovel講座もついに最終回。今回はWebブラウザーからクリックでインストールできるようにする方法や、Webブラウザー上で動作させる方法、モバイル端末上で動作するAndroid版の作り方について解説していきます。

• 第1回：ANBooksから始めよう　～サンプルゲームのセリフや背景を変更～
• 第2回：もっともっと作り込もう　～立ち絵、BGM、タイトル画面について～
• 第3回：作ったノベルゲームを配布しよう　～インストーラーの作成について～

森里 杏子（もりさと あんこ）　ハンドルネーム：AN子

日本一のあんずの生産地、千曲市に住んでいる14歳。友人とゲームを作るためAIRNovelによるゲーム制作を勉強している。ハンドルネームはAIRNovelから。弦蔵（げんぞう）という珍妙な柴犬を飼っている。

「あんずの実は、そのまま食べても美味しいよ☆　しかも、ジャムにしても美味しいし、干してもいいし、お酒にもできるし……いろんな食べ方ができるんだ。AIRNovelも、PCだけじゃなくてAndroidでも動かせるし、Webブラウザーでも遊べるんだよ。まるで千曲市特産の杏みたいだねっ☆」

弦蔵（げんぞう）

杏子が飼っている、なぜか人語をしゃべる、マニアックで非常識な黒い柴犬。

「わんこの常識非常識！　男なんだワン！　ぐずぐずせずに胸のエンジンに火をつけて、スマホでもブラウザーでもプレイできるゲームを作るワン！！」

4-1　『ブラウザーからAIRとゲームをインストールできるようにしよう』

改めて聞くけど、ご主人、光学ドライブがついてないイマドキのノートPCでもゲームをプレイしてもらうためには、どんな工夫が必要なのかワン？

方法はふたつあるよ。
方法1：インストーラーをネットからダウンロードできるようにする
方法2：Webブラウザーでプレイできるようにする

方法1は、フリーゲームやシェアウェア、体験版をダウンロードできるようにしているゲーム作者さんのWebサイトをみかけるワン。

最近はダウンロード販売も増えてるね。個別のオンラインストアへの登録の仕方は、自分で調べてね。

ご主人、ゲームをダウンロードできるようにするのはいいけど、ゲームをプレイするためにAdobe AIRのランタイムをインストールするのは面倒に思われそうで心配だワン。

それもそうだね。じゃあ、Webブラウザー上で数回クリックするだけで、両方ともインストールしてもらう方法を教えてあげるよ。AIRNovelの公式サイトに実際に試せるサンプルもあるから、見てみてね。

WebブラウザーからAdobe AIRとゲームをいっしょにインストールする機能

ページ上のボタンをクリックしたらゲームがインストールできたワン。AIRが既に入っている場合は、ゲームだけインストールできるんだワン？

そうだよ～☆
じゃあ、このインストールボタンを作る方法を教えてあげるね。
まずはここから素材ファイルをダウンロードしてね。

「badge.swf」「test.htm」「test.jpg」、3つのファイルが入っているワン。

全部Webサーバーにアップロードして、「test.htm」をブラウザーで見てみようか。こんな風になったかな？　ならない場合はファイルやフォルダの読み取り権限などを確認してね。

濃い灰色の四角が表示された

濃い灰色の四角が表示されたワン。

その四角が表示されたらおっけーだよ！　次はさっきアップロードしたHTMLファイル、「test.htm」をテキストエディターで開いて。中のコメントにある通り、設定の一部を自分が作ったゲームの.airファイルや用意したサーバーのURLに書き換えるの。色々なブラウザーに対応するために、同じ設定が2箇所づつ存在するから気を付けてね。

修正したファイルと作ったゲームの.airファイルをアップロードして、ブラウザーでもう1回見てみたら……お、今度は画像が表示されたワン！

画像が表示された

これでクリックすれば、AIRのランタイムとゲームのインストールがいっしょに出来るようになるよ！

おお、これなら簡単だワン！

ちゃんと動くことが確認できたら、画像を自分のゲームに差し替えたり、自分のサイトに組み込んだりして使ってね。

4-2　『Web上で実行出来るブラウザー版を作ろう』

ご主人、「方法2：Webブラウザーでプレイできるようにする」はどうやったらいいのか教えてほしいワン。

いいよ～☆　と言ってもそんなに難しくないんだよ。コマンドプロンプトでプロジェクトフォルダに移動して、「ant local」を実行してみて。

ええと、前回と同じように、プロジェクトの詳細画面でプロジェクトフォルダのパスをクリップボードにコピーして、コマンドプロンプトで「cd」とスペースを入力した後に張り付けて、Enterキーを押せばいいのかワン？

そうそう、ちゃんと覚えてたね、わんこちゃん。後は、「ant local」と入力してEnterキーを押せばいいんだよ。

「ant local」を実行

何かファイルが増えたワン！

「ant local」を実行する前

「ant local」を実行した後

「path.txt」や「(プロジェクト名)_l.swf」などのファイルが出来たね。「path.txt」はゲームで使うファイルのパスが記述されたファイルで、ブラウザー上でAIRNovelが動作する時に必要なの。「(プロジェクト名)_l.swf」はネットを使わず、デスクトップ上で動作確認する時に使うんだ。

「path.txt」や「～.swf」についても、わんこの方で設定しなくちゃあいけないのかワン？

ううん、「path.txt」とか「～.swf」はプロジェクトフォルダの直下に自動で生成されるから、そのまま利用すればいいんだよ。実際見てみるのが早いかな、「index_l.htm」をWebブラウザーで開いてみて。

それじゃあ、ネットスケープナビゲーターで動作確認するワン☆

ねえ、わんこちゃん？　まずは、いま使っている人の多いブラウザーで確認しようよ。

……この間までは、ネスケが一番使っている人が多かったワン？

この間って、いつ…？　できるだけいろんなブラウザーで動作確認を取った方がいいけど、インターネットエクスプローラーでの動作確認は重要かな。ほかのブラウザーは、インターネットエクスプローラーのあとね。

じゃあ、インターネットエクスプローラー9で開くワン！　……あれ？ブロックされてるワン？

ブラウザーでブロックされている

Webブラウザーによってはコンテンツの実行がブロックされるから、こんなメッセージが出たら実行を許可してあげてね。

［ブロックされているコンテンツを許可］のボタンをポチっとな。
……ワォーン！　ブラウザー上で動いたワン！　右クリックやマウスホイールも効くワン！　世界中の人々や犬たちに見てもらえるワン！

ブラウザー上でゲームが動いた

ええと、これはわんこちゃんのパソコン内にあるファイルをブラウザーで開いただけだから、まだ誰にも見てもらえないよ。

キャイーン!?

みんなに見てもらうためには、下の画像で選択しているファイルをWebサーバーにアップロードしてね。あ、.swfファイルのファイル名はプロジェクトによって異なるので注意だよ。
Webサーバーにアップロードしたときには、「読み取り権限」を設定するように気を付けてね。フォルダやファイルに、「誰でも読み取りできる権限」がないと、ゲームが正しく動かないよ。

この画像で選択しているファイル・フォルダをWebサーバーにアップすれば動作する

ん？　さっきブラウザーで開いたのは「index_l.htm」なのに、Webサーバーにアップするのは「index.htm」なのかワン？　「_l」がついているのとついていないのと、なにか違うのかワン？

「_l（エル）」は、「ローカルテスト（local test）」のlなのよ。つまり「sora_l.swf」や「index_l.htm」は、わんこちゃんのパソコン内でテストするために使うものだから、アップロードしなくていいの。

なるほどワン。それにしても、Web版は思ったより簡単だったワン！

ただし1つだけ注意してほしいのが、設定画面なの。

どういう事だワン？　……あ、設定画面を開いたら止まってしまったワン！

ANBooksから新規作成したプロジェクトの設定画面は、アプリに内蔵した「小さなブラウザー」で表示しているの。プロジェクトの「config」フォルダの中に入ってるHTMLファイルやCSS、JavaScriptファイルが素材なんだ。
試しに「config」フォルダの中にある「_config.htm」をブラウザーで開いてみて？

「config」フォルダの中

_config.htmをブラウザーで開いたら、設定画面のスライダーとかが表示されたワン！

まるでWebページのような設定画面の素材が表示される

Adobe AIRの制限で、「Webブラウザーで表示したコンテンツの中で、Webブラウザーの機能を使う」のは禁止されてるの。だから、Web上ではこの設定画面は使えないんだ。これはセキュリティ的な理由だから、仕方ないのよ。

それは困るワン！　設定画面が使えないと音量や文字表示速度が変更出来ないワン！

なので、AIRNovelではそのまま使えるブラウザー版用の設定画面も用意しているよ☆
プロジェクトフォルダ以下の「Work\システム\plgConfig\差し替えconfig」フォルダの中にFlashで作られた設定画面があるんだ。
「差し替えconfig」フォルダを丸々「config」フォルダに差し替えればちゃんと動くようになるよ！

「差し替えconfig」フォルダの中にFlash製の設定画面の素材がある

PC版とブラウザー版で違う設定画面を用意するのは面倒だワン。

ううん、この設定画面はPC版でも動くから、PC版とブラウザー版で設定画面を共有したいなら、こっちのFlash版だけを利用すればいいからね。
設定画面の背景を変えたい場合は、「_config.jpg」っていう画像ファイルを差し替えればいいよ。スライダーとか色んな部品を変更したくなったら「plgConfig.swf」っていうFlashのファイルを自分で作らないといけないけど……

.swfファイルの作り方はわんこには難しそうだから、いまは背景の変え方だけ覚えておくワン。

じゃあ、とりあえず今の「config」フォルダは削除しちゃって、「差し替えconfig」フォルダを「config」フォルダにリネームして、プロジェクトフォルダのトップにコピーしてね。
そこまでできたら、もう一度コマンドプロンプトで「ant local」してね。
ゲームに使う素材が変わったら、そのたびに忘れずに「ant local」だよ。ファイル名は同じままで内容を差し替えただけだったら「ant local」を実行しなくてもいいけど……

「ant local」を実行した時に生成される「path.txt」の中に素材の名前が記述されている必要があるから、素材を追加するたびに「ant local」を実行しないといけない、ということかワン？

そのとおりだよ。じゃあ、ゲームを起動してみて？

おお、設定画面が表示されたワン！　スライダーとか音量調整つまみとかも揃っているワン！

Flash製の設定画面をブラウザーで実行

これでFlashさえ入っていれば、ブラウザー上でゲームを遊んでもらえるよ！　セーブもできるようになってるんだ。無料で遊んでもらう時にもいいし、有料でも体験版だけこうやって手軽に遊んでもらって、どんなゲームか知ってもらうにはいいんじゃないかな？

4-3　『Android版を作ろう』

ご主人！　わんこもスマホ買ったワン！　Android搭載の「Nexus S」だワン！
強敵（とも）と呼べる犬友達にゲームを配布する前に、自分で検証するんだワン！

すごいしっぽ振って……スマホ、よっぽど嬉しかったんだね、わんこちゃん。
機種は、Androidのバージョンが2.2以上で、Adobe AIRの必要システム構成を満たしているのが必須だよ。あんまり古いAndroidデバイスだと動かないから気を付けて。

OSは最新にしてるし、システム構成も確認済みだワン。というわけで動くかどうか確かめたいワン。

まずはサンプルゲームを動かしてみるのがわかりやすいよ。ここからダウンロードしてね。

おお、これは第1回でちょこっと紹介したもう1つのサンプルゲームのAndroid版だワン。ところでAndroidの場合は、AIRのランタイムは要らないのかワン？

AIR SDKの最近の更新で、Android版インストーラーは必ずランタイムを内蔵するようになったの。過去に公開されたアプリだとランタイムが必要になることもあるけど、これから作るアプリはランタイム不要で実行できるよ。

プレイヤーの手間が減ってうれしいワン！

さて、無事にプレイできたかな？

（肉球でパネルをタップして）ちっちゃいスマホの画面でもちゃんと動いてて、なかなかいい感じだワン。
わんこのゲームも早くスマホで動くようにしたいけど……PCとAndroidじゃあOSごと違うけど、わんこはどうやって実装したらいいのかワン？

他のデバイス向けのゲームを作る時も、ANBooksを使うんだよ！
Windows PC向けと同じように作っていけるんだよ。

それならわんこにもできそうだワン！

ただ、画面サイズが違うから、これまで作ったPC版をそのまま流用するのは無理なの。新たにプロジェクトを作るのが基本だね。

ちょっと大変だけど、シナリオや素材を流用して、がんばって作るワン！

それじゃあまず「Android SDK」をダウンロードして、解凍したらどこか適当なフォルダにコピーしてね。32bit版と64bit版があるから、開発するPCに合わせて選んでね。

Android SDKをダウンロード

わんこはCドライブの直下にコピーしたワン。操作に悩みたくない人はわんこと同じように設定するのがいいいと思うワン。
次はどうするのかワン？

次はANBooksの「ビルド環境設定」画面に［Android SDK環境］というボタンがあるからクリックして、「Android SDKを置いたフォルダパス」＋「\sdk」を指定してね。

Android SDKのパスを指定

Cドライブ直下に解凍したわんこの場合は、こういうパスになったワン。
C:\adt-bundle-windows-x86-20130219\sdk
32bit版と64bit版で少しフォルダ名が違うし、数字の部分はAndoroid SDKがアップデートされると変わるから、そこは気を付けないとだワン。

じゃあ、Android版のプロジェクトを作るよ。ANBooksのメイン画面から［メニュー］-［新規作成］で、プロジェクト名を入力したら［〃「Android版」を元に作成］ボタンをクリックだよ。

ポチッとな。
おや？　何かダウンロードされてきたみたいだワン？　……しばらく待つと、プロジェクトが出来たので実行してみるワン。

……あれ、詳細画面にPC版のプロジェクトのような［最初から読む］ボタンが無くて、「コマンドライン実行のみ可能です」と書いてあるけどクリックできないワン？

そうなの。.air配布形式を作った時のように、「ant」コマンドで実行するんだよ。

ということは、コマンドプロンプトを起動して、プロジェクトフォルダにカレントディレクトリを移動してから、「ant」って入力してEnterキーを押す、ってことだワン。
（肉球でキーボードをカチャカチャ……）
お、サンプルゲームが起動したワン。……PC版のサンプルゲームより画面が小さいワン？

デスクトップ上でAndroid版を実行

Androidスマホの解像度はまちまちだけど、ANBooksで作成するプロジェクトは、幅広い端末に対応できるよう800×480ドットサイズになってるんだよ。タイトル画面からゲーム中の素材まで、この画面に合った大きさにしてあげる必要があるんだ。

開発の仕方はPCもAndroidも同じで違和感はないけど、素材はAndroid用に調整しないといけないということかワン？

そうだね、PCとスマホは画面のサイズが違うから、そこは別々に用意してあげないといけないね。

ともかく、このサンプルゲームを改造してわんこのゲームにしていくやり方は、おなじみのPC版と同じみたいでよかったワン！

そうだよ！　で、とりあえずこの状態のまま実機で動くことを確認してみようか。
コマンドプロンプトを起動して、コマンドラインで「ant apk」ってやってみて。

……今度はプロジェクトフォルダに「(プロジェクト名).apk」ってファイルが出来たワン？

そう、これがAndroid向けの配布ファイル。端末上で実行すればゲームをインストールできるよ。

じゃあ、これを配布すればいいのかワン？

そうよ、.apkファイルをGoogle PlayなどのAndroidアプリストアにアップロードすれば、みんなにダウンロードしてもらえるようになるってわけ。

なるほどだワン！

まずは手元のAndroid実機で動作確認してみようね。デバッグに使うためにちょっとした設定をするよ。Android端末の設定画面を開いて、メニューから［セキュリティ］を選択。［提供元不明のアプリ］というチェックボックスにチェックを入れるの。項目名は端末によって多少異なることもあるので、注意してね。

できたワン。

そうしたら.apkファイルを端末にコピーして、端末上で実行すればインストールできるよ。端末へのファイルコピーの方法とかは、Androidの基本的な使い方だから説明は省略するね。

クラウドもばっちりのわんこは「Dropbox」で転送したワン。
.apkファイルを開いたらゲームがインストールできたワン！

Android端末で.apkファイルを開いてインストール

よくできました☆
ただ、毎回.apkファイルを手動で転送するのは大変だから、Android端末をUSBでPCに繋いで、ビルドと転送を同時に行えるようになっているんだよ。この方法も教えてあげるね。
Androidの設定画面で、今度は［開発］-［USBデバッグ］にチェックを入れて、PCとAndroid端末をUSBケーブルで繋いでね。

スマホとPCを繋いだワン。

これで準備完了！　コマンドプロンプトから「ant ir」を実行すると、ビルドとUSBケーブルを通じたインストールまでやってくれるの。「Success」って出たら完了だよ。

むむ、「error: device not found」って出て止まってしまうワン！

AndroidをPCに接続するUSBドライバーを更新しないといけないね……。
Windowsの「デバイスマネージャ」を開いてみて。黄色のビックリマーク「！」になっているデバイスがあるから、メニューから［ドライバ ソフトウェアの更新］をするんだよ。

デバイスマネージャーでドライバーを更新

更新対象のドライバー、どこを探したらいいのかわからないワン。

Android SDKに付属しているダウンローダーを使うんだよ。
まずはAndroid SDKをインストールしたフォルダに「SDK Manager.exe」っていう実行ファイルがあるから実行して、「Android SDK Manager」を起動してね。

Android SDKをインストールしたフォルダにある「SDK Manager.exe」を実行して「Android SDK Manager」を起動

いっぱい項目が並んでるワン！

一番下までスクロールすると、［Google USB Driver］っていう項目があるから、これのチェックをONにして［Install 1 packege］ボタンを押してね。
そしたら、Android SDKをインストールしたフォルダ以下の「\extras\google\usb_driver」フォルダにドライバーがダウンロードされるから、このフォルダをドライバーの更新画面で選択すればいいんだよ。

「Android SDK Manager」で［Google USB Driver］を選択してダウンロード

ドライバーがあるフォルダを指定する

インストールされたみたいだワン。

ビックリマークが無くなって、正常に認識されたみたいだね。もう一度コマンドプロンプトから「ant ir」してみようか。

「！」マークが消えた

「Success」！　やったワン！　アプリ一覧にアイコンがあるワン！

ホーム画面にショートカットを移動しておくと楽ちんだね。アイコンをタップすれば起動するよ。

Androidで動いたワン！　これならわんこでも開発できるワン！

ゲームの作り込みは「ant」を使ってWindows上で実行して、節目節目や完成しそうになったら「ant ir」で実機テストをするのがおすすめだね。

ようやく完成までの道が見えたワン。ところで完成したあと、どうやって公開するワン？

Androidアプリストアに登録すると手軽にネットからダウンロードしてもらえるね。ストアはGoogle Playだけじゃないけど、Google Playはオフィシャルだからなにかと安心だね。でもここで公開するには、開発者として登録するための手数料25米ドルを支払う必要があるの。

25米ドルっていくらだワン？　1ドルって360円固定だったから、えーと……

1ドルが360円固定だったのは歴史の教科書に載ってるくらい昔の話だよ？　為替は日々変動するけど、今だと2,400円ぐらいかな。

なんとか用意するワン！

最初に一度だけ支払えば、あとは何作品でも登録出来るからね。

4-3　『おしまい！』

杏の花が散り、桜の花も潔く散ったワン……。信州の遅い春もいよいよ終わり、そしてこの連載もエンディングだワン。

わんこちゃん、力作が出来上ってどうだった？

力作というか、力石の気分だワン。……燃え尽きたワン、真っ白にだワン。わんこ、白じゃあなくて、黒柴だけど。

燃え尽きたのは力石じゃなくて、ジョーのほうね。でも、燃え尽きるくらい頑張ったんだねー、えらいねわんこちゃん ♪

多少無茶もしたけど、がんばった甲斐があったワン！　作ったゲーム、犬友達の好敵手（ライバル）たちに楽しんでもらえたワン！　わんこ、ゲーム作って本当によかったと 思うワン！　我がワン生に一片の悔いなし、だワン！

元気があれば、柴犬のわんこちゃんでもゲームを作れるってことがわかったよね～☆

わんこ、実際に作ってみてノベルゲームのいいところのひとつを知ったワン。ノベルゲームは、1つの素材を膨らませて、いろんな演出をつけることができるから、長編の物語を紡ぎやすいんだワン！

書きたい物語があるとか、描きたいキャラクターがいるけれども、長編だから難しいなあ、って思ってる人は、ぜひノベルゲームの制作を検討してほしいね♪

もちろん短編だってノベルゲームにできるワン！　ノベルゲームはシナリオ、イラスト、音楽を合わせて一度にプレイヤーにお届けできる、闘魂あふれる表現手段なんだワン！

やる気元気だねわんこちゃん！　ゲーム作りって楽しいよねっ☆
あたしもわんこちゃんを見習って、素敵なゲームを作ろうっと！

みなさん、わんこのゲーム作りに付き合ってくれてありがとうだワン！

次回作の構想を語りながらお散歩中の杏子ちゃんとわんこさん

わんこのおすすめAIRNovelゲーム

「ノベルゲーム部おまけゲーム」

　AIRNovelで作られた素敵なゲームをわんこが紹介するワン！

　今回は、記事でも作り方を紹介した、ブラウザーで遊べるゲームを紹介するワン。

　今回紹介する「ノベルゲーム部おまけゲーム」を公開しているのは「ノベルゲーム部」というノベルゲーム制作サークルさん集まり。ゲームはノベルゲーム部参加サークルの作品がクロスオーバーして、各々の作品とキャラクターを紹介しあうというもの。

　体験版をダウンロードできる作品のホームページや、購入サイトへのリンクも張られていて、興味をもってくれた人が作品にアクセスしやすい工夫がみられるワン。

　ゲームを作っていて、「体験版を公開してもなかなかダウンロードしてもらえない」って思った人、いないかワン？　実は、サイズの大きな体験版をダウンロードしてインストールするというのは、プレイヤーにとってちょっとしたハードルなんだワン。

　ブラウザー上で遊べるゲームなら、インストール不要で気軽に触れることができるので作品を知ってもらいやすいし、ファイルを配布することなく随時作品を発表・更新できるのは、プレイヤーにとっても作り手にとっても魅力があると思うワン。

　「おまけゲーム」も、この記事が掲載されるときはちょっとのシナリオしかないのだけど、ゴールデンウイーク中に新シナリオが追加されるそうだワン！　ブラウザー版の特性が活きているワン！

　ちなみに、ノベルゲーム部は2013年5月5日にコミティアという同人誌即売会に参加するので、そちらもチェックしてほしいワンワン☆

ノベルゲーム部公式ページ

http://novelgame-club.com/

製作スタッフ

原作・監修

夕街昇雪（活動漫画屋）

シナリオ

ぢょほほん（黒柴亭）

イラスト

与根金次（The Dungeon In Yarn）

ロゴデザイン

せっつ（ROUND WORKS）

協力

瀬戸愛羅（AIRNovelをさわろう！）

ノベルゲーム部