集中企画

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

作ったノベルゲームを配布しよう ~インストーラーの作成について~

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

 前回まででAIRNovelによるゲーム制作の基本は理解できたのではないでしょうか。ところで作ったゲームは、どうすればみんなにプレイしてもらえるのでしょう? プレイしてもらうためには、配布するための段取りが必要です。今回はその方法を杏子ちゃんに教えてもらいましょう。

森里 杏子(もりさと あんこ) ハンドルネーム:AN子

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

「あんずの花は、散ったあとに美味しい実がなるんだよ☆ だからお花見の季節が過ぎてからも大事な時期なんだ……。ゲームも同じで、実装が終わった後の段取りが大事なんだよ、わんこちゃん?」

弦蔵(げんぞう)

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

「わんこの常識非常識! 元気があれば、わんこだってゲームつくれるワン! 今日はわんこの力作を配布する、わんこ記念日になりそうだワン!」

3-1 『完成したゲームを配布するには?』

ご主人!ついにゲームが完成したワン! わんこ仲間にただちに配りたいワン!

そうだねー、頑張って作ったんだから、みんなに遊んでもらいたいよね。
それじゃあAIRNovelのインストーラーをどうやって作るか説明するね。ゲームが完成する前でも、どんなモノかやってみるのもお勧めだよ☆

「AIRNovelのインストーラー」ってなんだワン? インストールシールドで.exe形式にするんじゃないのかワン?

AIRNovelで制作したゲームは「Adobe AIR」のアプリになるから、インストーラーは.exeじゃなくて.airだよ。.air形式のアプリをインストールしたい人は、「Adobe AIR」のランタイムをインストールしておく必要があるのよ。

そういえば、わんこも開発を始めるときにAIRをインストールしたのを思い出したワン。
すると、開発者だけじゃあなくて、プレイヤーもAIRをインストールしないといけないということかワン?

そうなの。でもAdobe AIRアプリなら、Webブラウザー上からランタイムとアプリを一緒にインストールしてもらう方法もあるんだよ。これは次回教えてあげるね。
ランタイムは次のURLからインストールしてもらうこともできるから、配布するReadmeとかにアドレスを書くならここね。

わんこのまとめ

  • AIRNovel(Adobe AIRアプリ)のインストーラーは.air。
  • 開発者だけではなく、プレイヤー側にもAdobe AIRのインストールが必要。

3-2 『ANBooksでビルド体制を整えよう!』

それじゃあ、.airファイルをビルドする準備をしていこうね。
ビルド(build)は「(家を)建てる」などの意味だけど、ここではスクリプトや素材などを取りまとめて、.airファイルを作るってことだよ。

ビルドの準備ってどんな事をするのかワン?

ゲーム制作にも使った「ANBooks」でほとんど出来るんだよ。
ANBooksを起動して、左上の[メニュー]をクリックしてから、[ビルド環境設定]をクリックしてね。

ANBooksの[メニュー]-[ビルド環境設定]をクリック

何か色々書いてあるけど、わんこにはよくわからないワン。

ビルド環境設定画面


Flex SDKの設定

ボタンは作業順に並んでいるから、上から順番にやっていけばきっと大丈夫だよ。まずは[Flex SDK設定]をクリックしてね。

[Flex SDK パス]というテキストボックスと、[Flex SDKをネットからダウンロード]というボタンがあるけど、Flex SDKってなんだワン?

Fles SDKの設定

.airファイルをビルドするのに必要なものなのよ。
「Flex SDK パス」に「C:\FlexSDK」ってキーボードで入力して、[Flex SDKをネットからダウンロード]ボタンをクリックしてね。

ダウンロードの進捗は表示されているけど……全部終わるまでちょっと時間がかかりそうだワン。

環境によって違うんだけど、数十分待つこともあるかな? この作業をするときは少し気長に待ってね。ここではFlex SDKとAIR SDKをダウンロードしてるんだけど、ダウンロードしたファイルはさっき指定した「C:\FlexSDK」に置かれるよ。

杏子からひとこと

 ANBooksからFlex SDKのダウンロードができない場合は、以下のAdobe AIRアプリを使って「C:\FlexSDK」にインストールしてください。

 インストール先の指定(Select installation directory)には「C:\FlexSDK」と入力し、途中に表示される、インストールするものを選ぶチェックボックスはすべてONにしてください。

ダウンロードが終わったみたいなので、エクスプローラで「C:\FlexSDK」を開いて見てみるワン。お、色々ファイルが出来てるワン。



AIRlibの設定

じゃあ次の作業に行ってみようか。
ビルド環境設定画面の上から2つ目のボタン、[AIRlib設定]をクリックして画面を開いて、Flex SDKのときと同じように進めてね。
「AIRlib パス」を入力するところでは「C:\AIRlib」って入力、その後[AIRlibをネットからダウンロード]ボタンを押すんだよ。

AIRLibの設定

杏子からひとこと

 ANBooksでAIRlibのダウンロードができない場合は以下から最新バージョンの「AIRlib.zip」をダウンロードして解凍し、「C:\AIRlib」というフォルダを作成してコピーしてください。



JDKの設定

AIRlibも終わったので次行くワン!
ボタンの並び順通りなら、次は[JDK / Ant環境]だワンっと……
おや? 今度は2つの黒いボタンが出てきたけど、どっちを選べばいいのかワン?
あ、上から順にクリックしていくのだから、まず[JDKのインストール(ブラウザを開きます)]のほうかワン?

そうだよ。ここでは、JDK(Java Development Kit)とAntという環境を設定するの。ここ書いてある通りに進めればOKだよ。

JDK / Ant環境の設定

じゃあ順番に説明するね。
[JDKのインストール(ブラウザを開きます)]をクリックすると開くページから辿ってJDKをインストールするの。直接アクセスするなら以下のURLだよ。

Webページが開いたら、下に「Java Plaform(JDK)」と書いてある「DOWNLOAD」のリンクをクリックしてダウンロードページに移動してね。

Webブラウザーで開いたJDKのページで「Java Plaform(JDK)」の「DOWNLOAD」リンクをクリック

……ご主人、わんこ、アメリカ語は苦手だワン。Sorry, Japanese only.だワン。なにしろ日本犬だし。

アメリカ語? まあ、じっくり手順を説明していくから大丈夫だよ。説明画面を見ながら一緒にやってみようね。

まずはライセンスを確認して、同意するなら[Accept License Agreement]をクリック。Windowsが32bitか64bitか、開発するPCによってどちらかをダウンロード&インストールするの。
32bitなら「Windows x86」、64 bitなら「Windows x64」をそれぞれ選択するんだよ。

ライセンスを確認してダウンロード

インストーラーは日本語だから、わんこでも出来そうだワン。

インストーラーで表示される「インストールするオプション機能」は全部入れてね。
あと、インストールするオプション機能の選択画面に表示される、「開発ツール」の「インストール先」をきちんと控えておいてね。
インストール先のパスはバージョンによって少し変わっちゃうから、ここの画面のスクリーンショットを撮っておくといいよ。

JDKをインストール

パスが変わると何か問題があるのかワン?

JDKのインストールが終わったら、ユーザー環境変数を設定する必要があるの。「Path」と「JAVA_HOME」の2つなんだけど、ここに設定する文字列も変わるのよ。

環境変数って難しそうでよくわからないワン……。ここは間違えたら大変そうだし、操作手順を詳しく教えてほしいワン!

じゃあ、画面で説明するね。これはWindows Vistaの画面だけど、Windows 7でも基本的に同じだよ。
まずはエクスプローラを開いて[コンピュータ]をクリック。
続いてウインドウの上の方にある[システムのプロパティ]をクリックしてね。

エクスプローラの「コンピュータ」上で[システムのプロパティ]をクリック

コントロールパネルの「システム」設定画面が開いたら、[システムの詳細設定]をクリック。

[システムの詳細設定]をクリック

「システムのプロパティ」ウインドウの[詳細設定]タブを選択して、[環境変数]をクリック。

[環境変数]をクリック

「環境変数」のダイアログが開くから、ここで2つの環境変数を設定していくね。まずは「システム環境変数」の「Path」を選択し、[編集]をクリック。

環境変数「Path」を選択して[編集]をクリック

わんこのPCには「Path」がないワン!

環境変数「Path」が項目ごとない場合は[編集]ボタンの左横にある[新規]ボタンをクリックして、新たに「Path」を作ってね。それから、[変数値]テキストボックスを編集するんだけど、直接テキストを編集するんじゃなくて、テキストエディターに文字列をコピー&ペーストしてから編集すると楽だよ。

「Path」環境変数の編集画面

編集内容だけど、今ある文字列の末尾に「;」+「インストール先」+「\bin」って文字列をつなげるの。元々テキストボックスの中が空っぽなら「;」はいらないけどね。編集例はこんな感じだよ。

追加前(例)%SystemRoot%\system32
追加後(例)%SystemRoot%\system32;C:\Program Files\Java\jdk1.7.0_21\bin

つまり、元々文字列があったら、一番最後に半角セミコロンを入れて、その後ろに
C:\Program Files\Java\jdk1.7.0_21\bin
って書く。
JDKのバージョンが上がってJDKのインストール先のパスが変わったらそれに合わせた表記にする。
その時は間違えないように、保存しておいたJDKインストール先のスナップショットを確認しながら編集する……ってことかワン?

わんこちゃんよくできました☆
編集が終わったら[OK]ボタンを2回押して「システムのプロパティ」画面まで戻れば、環境変数「Path」にJDKのインストールパスが追加されるよ。

わんこ、うまく編集できたか自信がないワン。

じゃあ、コマンドプロンプトを開いて、「javac -version」って入力して、Enterキーを押してみて。

「javac 1.7.0_21」と出たワン。

コマンドプロンプトでJDKのバージョンを確認

ここでバージョン確認ができたら、うまく設定できたってことよ!

同じ感じで、続いて環境変数「JAVA_HOME」も追加するのかワン?

そうそう。環境変数「JAVA_HOME」はこれまで設定していなければ存在しないので、新規作成してね。
環境変数「JAVA_HOME」に設定する文字列は環境変数「Path」と同じで、今回の場合は「C:\Program Files\Java\jdk1.7.0_21\bin」だよ。
うまく設定できたかどうかを確認するときは、コマンドプロンプトで「set JAVA_HOME」って入力してEnterキーを押してね。

今入力したのがちゃんと表示されたワン!

コマンドプロンプトでJAVA_HOME環境変数の中身を確認

杏子からひとこと

 環境変数を変更する専用のフリーソフトもあるので、Windows標準の設定方法はよくわからない……という場合は試してみてくださいね。



Antの設定

次はAntをインストールするよ。
ANBooksの環境設定画面の中の、[Antのインストール(ブラウザを開きます)]ボタンをクリックすると開くページから辿ってダウンロードするの。直接ダウンロードページを表示するなら以下のURLだよ。

ページを開いたら、左メニューの[Binary Distributions]をクリックしてね。

[Binary Distributions]をクリックする

「Current Release of Ant」の中にZIPファイルへのリンクがあるから、クリックするとファイルをダウンロードできるよ。ダウンロードが終わったら解凍してね。

ZIPファイルへのリンクをクリックしてダウンロード

解凍したファイルはフォルダごと、「C:\Program Files」の下にコピーしてね。ここもバージョンによってパスが変わるけど、今回はこうなったよ。
C:\Program Files\apache-ant-1.9.0
繰り返して言うけど、数字はバージョンによって変わるから、バージョンアップしていたら読み替えてね。

「apache-ant-1.9.1」「apache-ant-1.9.2」って感じで変わっていくのかワン?

たぶんそんな感じだろうね~☆
JDKと同じようにAntも環境変数を設定するよ。まずは環境変数「Path」に「%ANT_HOME%\bin」を追加。あとは環境変数「ANT_HOME」を新規作成して、「C:\Program Files\apache-ant-1.9.0」を入力してね。

これも設定できたかどうかをMS-DOS画面で確認できるのかワン?

今はMS-DOSとは言わないよ、「コマンドプロンプト」だよわんこちゃん。
またコマンドプロンプトを起動して……あ、前に開いたのが開いたままならいったん閉じて開き直してね。
今度は「ant -version」と入力してEnterキーを押したときに、バージョンが表示されればOKだよ!

コマンドプロンプトでAntのバージョンを確認

わんこのまとめ

  • ANBooksを使って、Flex SDKをダウンロードする。数十分かかることもある。
  • Flex SDKのパスには「C:\FlexSDK」を指定。ここにFlex SDKが展開される。
  • ANBooksを使って、AIRlibをダウンロードする。
  • 「AIRlib パス」は「C:\AIRlib」。
  • WebブラウザーでJDK(Java Development Kit)をダウンロードしてインストールする。
  • JDKのユーザー環境変数をPathに設定する。
  • JDKのユーザー環境変数をJAVA_HOMEに設定する。
  • WebブラウザーでAntをダウンロードしてインストールする。
  • Antもユーザー環境変数PathとANT_HOMEを設定する。

3-3 『コマンドラインでインストーラーを作ろう!』


インストーラーの作成

なるほど、これは大変だワン……。初心者がつまづく理由もよくわかるワン。
でも設定箇所をきちんとお手本通りに設定すればわんこだってなんとかなったワン。
これからゲームを作りたいと思っている人の役に立ったかもしれないワン。

きっとお役に立ったと思うよ♪
じゃあ、わんこちゃん、いよいよビルドをするよ。ここまでがちゃんと出来ていればあとは簡単だよ!

わんこ、いつ何時、どんな挑戦でも受けるワン!

ANBooksでわんこちゃんが作ったゲームのプロジェクトの詳細画面を開いてくれる? そしたら[ツール]ボタンをクリックしてサブメニューを開いて、[フォルダ絶対パスをクリップボードへ]ボタンをクリックしてね。

プロジェクトのフォルダパスをクリップボードへコピー

クリックしたワン。

そしたらコマンドプロンプトを起動して、半角で「cd」とスペースを入力して、右クリックメニューからコピーしたパスを[貼り付け]して、Enterキーを押してくれる?

押したワン。

そしたら「ant」と入力して、Enterキーを押して?

カレントパスの移動とAntの実行

むむ、なんだか横文字がいっぱい出てきたワン! ……あ! わんこのゲームが起動したワン!

おめでとう! それが「ビルドによる起動」だよ。じゃあ、今度は.airのインストーラーを作ろうか。
起動したゲームをいったん閉じたら、今度はコマンドプロンプトに「ant air」って入力してEnterキーを押して!

肉球タイピングッ!! ……む、「BUILD SUCCESSFUL」って表示されたワン!?

.airインストーラーを生成

「ビルドに成功しましたよ」って意味だよ☆ つまり.air形式のファイルが出来たってこと! 試しにプロジェクトフォルダにある、拡張子が.airのファイルを開いてみて。

「アプリケーションのインストール」が始まったワン! ANBooksをインストールしたときもこんな感じのを見た覚えがあるワン!

インストールダイアログ

インストールが完了したら、スタートメニューからゲームを起動して遊ぶことができるようになるよ!

設定が大変だったけど、ちゃんとしたゲームになってよかったワン!



自己署名ファイルの作成

最後に、作ったゲームを一般に配布する場合は、自分で作った「自己署名ファイル」を用意してほしいの。もう一息で完成だから、あと少しだけだけがんばってね、わんこちゃん?

「自己署名ファイル」というのは必ず必要なのかワン?

ANBooksが標準でダミーの「自己署名ファイル」を用意しているから、ないと絶対に動かないというものではないよ。でも、これだとANBooksを使っている人みんなで同じ設定だから、ファイルの改ざんされていないことを保証できないの。

なるほど……それは困るワン。もう少しがんばるワン。

まずはANBooksのビルド環境設定画面の[自己署名設定(.air、.apk作成に必要)]ボタンを押して、[自己署名ファイル]の欄にあるパスの末尾のファイル名だけを「dummy_store.p12」から任意のファイル名に書き換えてね。同じように[自己署名パスワード]も「dummy_password」から任意の英数字に変更するんだよ。

自己署名ファイルのファイル名やパスワードを自分用に書き換え

ファイル名やパスワードは何でもいいのかワン?

基本的に英数字がいいね。あと、パスワードは他人に知られないものにしてね?
書き換え終わったら、入力欄の下にある[自己署名ファイルの作成方法]ボタンを押してね。そうしたら[現在の環境を反映してクリップボードへコピー]ボタンがあるから、これを押して、コマンドプロンプトに貼り付けて実行してね。コマンドはこんな感じになるはずだよ。

"C:/FlexSDK/bin/adt" -certificate -cn SelfSigned -validityPeriod 20 1024-RSA "C:/Users/(ユーザー名)/AppData/Roaming/com.fc2.blog38.famibee.ANBooks/Local Store/(設定したファイル名).p12" (設定したパスワード)

自己署名ファイル生成用のコマンドをクリップボードにコピー

コマンドプロンプトに貼り付けて自己署名ファイルを生成

自己署名ファイルが生成された

これであらためてインストーラーを生成すれば、今度こそ完成だワン?

うん、これでいよいよ、どこに出しても恥ずかしくないインストーラーの完成だよ☆
第1回で言ったけど、サンプルゲームをテンプレートにした場合は、公開前にサンプルゲームの立ち絵・背景・BGM・効果音がプロジェクトのフォルダに残っていないか気を付けてね。

わんこのまとめ

  • コマンドプロンプトでプロジェクトのあるパスに移動後、「ant」と入力してEnterキーを押すとゲームをビルドして起動できる。
  • コマンドプロンプトでカレントパスに移動後、「ant air」と入力してEnterキーを押すと.air形式のファイルが作成できる。
  • 一般公開するには自己署名ファイルを作成し、ダミーのものと差し替える必要がある。
  • サンプルゲームに付属していた立ち絵・背景・BGM・効果音は削除してから配布する。

3-4 『マニュアルを整えてゲームを配布しよう!』

それじゃあわんこの犬友達にさっそく送付するワン!

ネットに公開したり、メディアに焼いたりする前に、もう一度ちゃんと動作確認を取らないとダメだよ?
もしバグが残っているものを量産したり配布しちゃったら、あとが大変だからねぇ……。

確かに。メディアに焼いたりプレスしたりするなら、マスターメディアを作った時に、インストールからゲームの最後までいったん見直すぐらいのことはやった方が良さそうだワン。

それから、メディアのルートフォルダに.airファイルだけが置いてあっても、どうやってインストールしたらいいのかよくわからない人もたくさんいるよね。
だからネットで配布するなら公開するページに、メディアで配布するならReadmeをつけて案内してあげてね。

具体的にどのあたりに注意したらいいのかワン?

まず、「Adobe AIR ランタイムが未インストールの場合はインストールする必要がある」事を書いてあげてね。
あとはAdobe AIRの必要システム構成ね。第1回のときも紹介したけど、以下のページに書いてあるよ。

とくにサポートするOSのバージョンやサービスパックは、うまく動作しないときのチェックポイントだから明記するのがお勧めだよ。

ほかのゲームのReadmeを読んで、参考にしてみるワン。

わんこのまとめ

  • 公開前に最後の動作確認をしよう。
  • メディアで配布する場合は、マスターメディアからインストールしてプレイするまで検証するのがおすすめ。
  • Readmeには、Adobe AIRの配布先URLと必要システム構成を記載することが望ましい。

3-5 『次回予告!』

(……数日後!)

で、犬友達に送ったゲームの感想はもらえたの?

それが予想外の返事が返ってきたんだワン……。
まずは山形の弟分、竹千代号なんだけど……

山形市在住:わんこの弟分、竹千代号 ハッピー☆ナイスくん

弦蔵アニキー、おつー!
ゲーム届いたよ!
でもごめんねー、ボクの業務用の個人PC、SSD壊れてOSから再インストール中なんだよー。
それまではとりあえず支給されたAndroid携帯でどーにかやりくりしてるんだ。
スマホでもプレイできるバージョン、リリースしないの?

スマホかあ、最近増えたし、世の中の流れだから仕方ない気もするけど、ちょっとがっかりだワン。

……え? ちょ、ちょっと待って、なにこの子犬?

名前がハンドルネームっぽくないってことかワン? 血統書の登録名をそのままハンドルネームにしてるだけだと思うワン?

いやそこじゃなくて、えっと……業務でPC使ってて、スマホが支給される子犬って、いったいどんな仕事なのかなって。

次はわんこの兄貴分、さいたま市のケンシロウさんなんだけど……

さいたま市在住:わんこの兄貴分、ケンシロウさん

いよう弦蔵! お前のゲーム届いたぜ!
でも悪いなあ、俺のノートPC、光学ドライブついてないからインストールできないんだよ。

サーバー機にはブルーレイのドライブがあるんだけどよ、サーバー機にソフトをインストールするときは申請いるんだわ。
上長印もらうまで、ちっと待っててくれ。
あ、そういえば、Windows Server 2012で動作確認取ってんの?

確かに、最近は光学ドライブの付いてないPCが増えてきたワン……しかし、サーバーOSでの動作検証は、ちょっと負担が重いワン。

ねえ? わんこちゃんの犬友達って、こんな子ばっかりなの?

草の根BBSで知り合った強敵(とも)と呼べるライバルたちだワン。

いまどきパソ通!? スマホが使えて、サーバー管理できるスキルがあるのにパソ通!? ……もうどこから突っ込んだらいいのかわからないよ、あたし。

というわけで、次回はケンシロウさんのために、Hyper-Vで仮想化クライアントOSの環境を構築して、AIRNovelをプレイできるようにするやり方を教えてほしいワン! Windows Server 2012で強化されたマイクロソフト渾身の目玉機能を使いこなすんだワン!

いやいや! それ間違ってるから! 仮想化したら何でも解決するわけじゃないよ!

じゃあ次回は、まず竹千代号のためにスマホに対応したAndoroid版の開発&発表の仕方と……

ケンシロウ君のためには、……ノートPC、ネットにはつながるんでしょ? じゃあWebブラウザーで遊べるゲームの作り方を教えよっか。

読者のみなさんとわんこの犬友達! 次回も楽しみに待っててほしいワン!

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

「LiLyE~狭界図書館~ a Reporter's PocketBook」

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

 今回おすすめするのは、ゲーム制作サークルwysさんが公開している「LiLyE~狭界図書館~ a Reporter's PocketBook」。

 祖父の遺品を整理していた主人公が、不思議な世界の、不思議な図書館に迷い込むというお話。短編のシナリオをそれぞれ読んで、それまでの出来事を「まとめ」ていくことで、祖父の残したメッセージは何だったのか、過去に一体に何が起こったのかが明らかになっていくんだワン。

 もし、「ノベルゲームってクリックするだけでゲーム性に乏しい」ってイメージを持っている同志諸兄が居たとしても、この作品をプレイしたらそんなネガティブなイメージは吹き飛ぶはず!「ノベルゲームって、アイデアをこういう風に活かせるのか!」「AIRNovelってこんなこともできるのか!」……きっとそう思ってくれること間違いなし。

 あと、わんこ的にはマスコットの獣(?)が可愛いのがお気に入りだワン☆

 ノベルゲームというジャンルと、AIRNovelのエンジンの可能性を感じてほしい至高の逸品。フリーで公開されているゲームだから、気軽にプレイしてみてほしいワンワン。

(ぢょほほん@黒柴亭/ふぁみべぇ@電子演劇部)