HTMLで作成したギャルゲーをiPhoneやiPadでプレイできるノベルゲームプレイヤー『XNovel』登場！: PureWhite

外部データを読み込んでゲームとしてプレイできるノベルゲームプレイヤーアプリが登場！その名は『XNOVEL』

XNovel 1.00
カテゴリ: ブック
価格: 無料

このアプリの制作者ふぁみべぇ様のサイトはこちら。

■　XNovelってどんなアプリ？

htmlで書いたシナリオファイルと素材画像や音声などを元にiPhoneやiPadでギャルゲー風に表示する為のプレイヤー的なアプリです！ゲームデータをWebからダウンロードして遊べます。

こんなゲームが作れるよダウンロードリンク　 xnhttp://homepage1.nifty.com/vaio_hig/XNovel/main.epub

とりあえず作ってみたカオスなサンプル。XNovelで何が出来るのかはこれを見ればわかると思います。１８歳以下閲覧禁止（笑）XNovelをダウンロード後にiPhoneやiPadのSafariからこのリンクをクリックするとXNovelが起動してダウンロードできます。とりあえず作ってみたサンプル。

■　XNovelを利用することで出来ること

・HTMLを使って簡単にギャルゲー風ノベルゲームを作成出来る。
・外部データを取り込む方式なのでアップルの審査は必要なく誰でも気軽にゲームを公開できる。
・アップルの審査を通さないのでiPadやiPhone用のエロゲーが作成できる（これ重要！）
・BGMが鳴らせれる
・効果音や声も入れられる。
・キャラ３人と背景を表示できる。キャラはちゃんと透過PNGで透過します。
　（イベントCGはキャラを非表示にして背景に1枚絵を入れればOK）
・選択肢による条件分岐（選択肢が使えるので簡単なクイズゲームも作れます！）
・進行状態のセーブ＆ロード（何個でも可能）
・メッセージ領域の一時消去（フルスクリーンモード、PCゲームで言う右クリックのやつ、Xnovelでは２本指タップで出来ます。）
・イベントCGのギャラリービュー

次期バージョンではさらに
・ムービーの再生
・変数の利用
も出来るようになるとか。本格的にゲームが作れますよ〜。

と言った感じに一通りギャルゲーに必要な要素を兼ね備えています！

※XNovelのアプリ自体はエディタではなくプレイヤーなのでこのアプリの中でゲームが作れるわけではないのでその点はお間違えなく。作るのはあくまでパソコンです。

■　XNovelの可能性について

このアプリは何がすごいのか？なぜ、外部データであることが重要なのか。ということを説明したいと思います。

現状においてiPhoneでもギャルゲーは特に珍しいものではない。だが、そのギャルゲーをiPhoneアプリとして開発・販売するにはMacの購入→Obejective-Cによるプログラミングの習得→iOS DeveloperProgramへの１万円の支払い→厳しいAppleの審査と多くの壁が立ちはだかっている。Appleの審査をくぐり抜けられなければそれまで開発に費やした労力は無駄になるのだ。

しかし、このアプリは外部データを読み込むことでゲームとしてプレイ出来るためAppleの審査も必要なし。HTMLで記述したHTMLファイルとその他素材画像や音声の添付ファイルを元にゲームを作成出来るのでMacもobjective-Cによるプログラミングも必要なく簡単にギャルゲーを作成・配布ができるのだ！

つまりiPhone用のギャルゲープラットフォームなのである。

一般的に絵描きさんや物書きさんはプログラムには明るくない為、同人ゲームを作成する際にはゲーム制作ツールを用いることが多い。それらのGUIなツールと比べるとHTML記述は難解かもしれないが、プログラミングをするよりも何百倍も簡単に済ませることができるのである。何もHTML5でゲームを作れと言っている訳ではない。このアプリの仕様に沿った簡単なHTMLでいいのだ。作者様のサイトにサンプルのHTMLファイルへのリンクがあるのでそのソースを表示していただければいかに簡単にゲームが作成できるかがわかると思う。

まぁ、つまるところ何が言いたいのかというとAppleの審査もなく比較的簡単にギャルゲー・エロゲーの作成・配布を可能とした画期的なアプリなのであるw

なぜ、このアプリ自身がAppleの審査を通ったかというとこのアプリ自体はエロゲーでもなんでもないのだ、いわゆるブラウザや電子書籍プラットフォームと同じようにアプリを通して閲覧することができるデータ自体にはAppleは何ら関与することはないのである。

ゲーム用のHTMLの記述規則や素材ファイルの仕様等の情報についてはアプリ作者様のサイトに載ってますのでちょっと試しに作ってみよっかな〜って人はこちらのサイトを参照です。この記事の下部にも簡単なTIPSを載せてあります。

このアプリ、サンプルシナリオを見ればわかるがiPhoneの特性を活かして縦・横両表示に対応、縦書き表示もできます。タップやスワイプによるページ送りなど操作性も良いです！

iPadのHD表示やiPhone4のRetinaディスプレイにも対応、自分で制作したオリジナル画像や音声ファイルも素材として使用出来ます！

現行版ではゲームの進行状態のセーブ＆ロード、選択肢等には非対応ですが、こちらも今後のアップデートで対応したいとのこと。

データの読み込みはHTML形式なのでWebから直接読み込みが可能。なので作ったゲームをWeb上に公開するだけで誰でも簡単にゲームの配布が出来ます。また、前記事で紹介した機能、URLスキームにも対応なのでURLリンクから直接アプリを起動できます。その他DropboxやiTunesからのインポートにも対応とのことでオフラインでもプレイ可能です。

っというわけで期待が膨らみますw是非IOSギャルゲープラットフォームとしてがんばってほしいです。セキュアな課金モデルが実現できれば同人とかで制作サイドの人も増えて対応ゲームが増えそうですね。

私も作ってみたいなって思ってたアプリなのでつい熱く語ってしまいましたw

iPhoneやiPadでギャルゲー、エロゲーを作りたいと思ってる人、このプラットフォームを利用して制作してみませんか？

■　雑感

実際サンプルを作成してみて素材さえあればすごく簡単にギャルゲー作れるな～って実感しました！Flashで作るよりもラク！今までAppleの審査のせいで難しかったギャルゲーもこういったツールがあればもっと盛り上がりそうな気がするです！

■　XNOVELでiPad用ギャルゲーを作ってみよう！

どこまで出来るか試してみたいってことで試しにサンプルのソースファイルをいじってみることにしました。それでなんとなくイメージはつかめたので作り方を紹介。ふぁみべぇ様のサイトのこちらの記事に解説されているタグの解説を元に作成してみました。これで一人でも同志が増えれば嬉しい！

http://homepage1.nifty.com/vaio_hig/XNovel/main.html

今回改変してみたファイル。とりあえずこのHTMLファイルを改変するのが手っ取り早いかも。編集にはHTMLエディタやメモ帳等を使用します。メモ帳は改行されないので注意。

今回、HTMLファイルの編集には振り＾ウェアの『ez-HTML』ってソフト使ってみました。

ez-HTMLのダウンロードはこちら

・フォルダ構成

main.html	HTML構文を記述するソースファイル
bgフォルダ	背景画像を入れるフォルダファイルはJPG or PNG形式で。画面が回転するのでサイズは1024*1024が良いと思います。画面を縦と横に固定した場合はそれに合わせて。
fgフォルダ	キャラクタ画像を入れるフォルダ透過PNGファイルで、アルファ値が反映されるので綺麗に透けます。
bgmフォルダ	音楽や効果音を入れるフォルダ　音楽はMP3ファイルで制限なし。効果音や音声は３０秒以内のAIFFファイルで

このフォルダ名は特に何でもいいですが、変更した際はHTML側でも対応しましょう。よくわからない人は変更しないほうがいいです。

※画像についてはキャラクター、背景共にファイル名に@2xと付けるとRetinaディスプレイ対応、@xgaって付けるとiPad用になるようです。

iPhone3/3G 旧Touch用	usagi.png 画像サイズは320480もしくは480320を基準に
iPhone4 iPodTouch(gen4)用	usagi@2x.png 画像サイズは640960もしくは960640を基準に
iPad用	usagi@xga.png 画像サイズは7681024もしくは1024768を基準に

これがXNovelのソースコード、行いたいことを簡単に時系列に書くだけの簡単なスクリプトみたいなものです。

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>famibee XNovel紹介</title> </head> <body> <h1 class="title">XNovel紹介</h1> <h2 class="author">famibee</h2> <div class="main_text" id="contents"> <img id="bg" src="bg/machi.jpg" /> <fg id="0" src="fg/usagi01.png" tate_pos="2" yoko_pos="8" /> <audio src="bgm/music.mp3" loop="true" autoplay="false" /> うさぎちゃん「このアプリはどんなアプリなの？」 <fg id="0" src="fg/usagi02.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「あっ、こんな感じで表示されるんだ～。」 <fg id="0" src="fg/usagifull.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「縦と横、どっちでも表示できるんだね。縦だと全身入るよー。横だとPCのゲームみたいだね。」 うさぎちゃん「本みたいに縦書きもできるよー。」 <fg id="0" src="fg/usagi03.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「う～んと、このアプリは美少女ゲームをするアプリってことなのかな？」 <fg id="0" src="fg/usagifull02.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「アップルの審査も関係ないのでこんなこともできちゃいます。って、ちょっと何させるんですかっ！？」 <fg id="0" src="fg/usagifull03.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「うう、恥ずかしいよぅ…。」 <fg id="0" src="fg/usagifull04.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「もうっ！iPadでこんな格好してたらアップルにリジェクトされちゃいますよ！」 <fg id="0" src="fg/usagifull05.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「えっ！？大丈夫…なの…？」 <fg id="0" src="fg/usagifull06.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「えっと、何なに…？このアプリはブラウザと一緒でアプリの中で何を見ても構わないのでアップルとはなんら関係ありません？」 <fg id="0" src="fg/usagifull06.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「そうなんだ…。」 <fg id="0" src="fg/usagifull04.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「もうっ、サンプルだからって調子に乗らないのっ！！」 <fg id="0" src="fg/usagi01.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「はい、元に戻りましたー。お外で服脱がさないでよ～。」 <fg id="0" src="fg/usagi01.png" tate_pos="2" yoko_pos="8" /> うさぎちゃん「他にはこんなことができるそうです♪」 <fg id="1" src="fg/usagi01.png" tate_pos="1" yoko_pos="7"/> <fg id="2" src="fg/usagi01.png" tate_pos="3" yoko_pos="9"/> うさぎちゃん「分身の術～♪画面には同時に3人までキャラクタの表示ができます♪」 <audio src="bgm/voice.aiff" loop="false" autoplay="false" /> <fg id="1" src="" tate_pos="1" yoko_pos="8" /> <fg id="2" src="" tate_pos="3" yoko_pos="8" /> うさぎちゃん「声も出せるよ♪」 <audio src="bgm/ev.mp3" loop="true" autoplay="false" /> <fg id="0" src="" tate_pos="2" yoko_pos="8" /> <img id="bg" src="bg/event.jpg" /> うさぎちゃん「イベントCG～♪斜めにしただけじゃ…、ってまた脱がさないで～っていうか音楽までそれっぽい音楽に変えないのっ！」 うさぎちゃん「これはキャラクタを消して、背景に一枚絵を貼ってるそうです♪」 <fg id="0" src="fg/shiomi3b.png" tate_pos="1,-30" yoko_pos="7" /> 「ノベルゲーム的って？」 <fg id="1" src="fg/ayame1a.png" tate_pos="3,60" yoko_pos="9" /> 「まぁざっくりと云えば、こうやってタップで文章を読み進め、画面に人物や背景が出るものだ」 <fg id="0" src="fg/shiomi3f.png" tate_pos="1,-30" yoko_pos="7" /> 「成程成程」 <fg id="1" src="fg/ayame1b.png" tate_pos="3,60" yoko_pos="9" /> 「あとモバイルに特化した機能として、縦横に変更すると人物レイアウトが変わるんだ」 <fg id="0" src="fg/shiomi3g.png" tate_pos="1,-30" yoko_pos="7" /> 「やってみようかな……おお、縦画面だと近いけど、横画面だと間隔開く」 <fg id="1" src="fg/ayame1f.png" tate_pos="3,60" yoko_pos="9" /> 「縦画面は人物の身体が広く入るし、多くの人はモバイルを縦で持つので、縦画面にも意義がある。読み方によって表現が変化するわけだな」 <fg id="0" src="fg/shiomi3b.png" tate_pos="1,-30" yoko_pos="7" /> 「どんなＨＴＭＬでもいいの？」 <fg id="1" src="fg/ayame1d.png" tate_pos="3,60" yoko_pos="9" /> 「そうはいかないのが世知辛い世の中だな。立ち絵と背景、ＢＧＭや効果音はＨＴＭＬに無いタグを記述する必要もある」 <fg id="0" src="fg/shiomi3c.png" tate_pos="1,-30" yoko_pos="7" /> 「全部自動というわけにはいかないんだね」 <fg id="1" src="fg/ayame1e.png" tate_pos="3,60" yoko_pos="9" /> 「ＨＴＭＬを拡張するものと考えてくれていい。そして立ち絵や背景・ＢＧＭや効果音は、現段階ではアプリに組み込まれた素材しか使えない」 <fg id="0" src="fg/shiomi3b.png" tate_pos="1,-30" yoko_pos="7" /> 「えっ、そうなの？」 <fg id="1" src="fg/ayame1c.png" tate_pos="3,60" yoko_pos="9" /> 「まぁ今後反響によっては考えるという段階だ。ふぁみべぇサイトで仕様を公開する予定なので、ぜひ自分で作ったＨＴＭＬで動作させてみて欲しい」 <fg id="0" src="fg/shiomi3f.png" tate_pos="1,-30" yoko_pos="7" /> 「自分で作ったＨＴＭＬって、どうやって読み込ませるんです？」 <fg id="1" src="fg/ayame1b.png" tate_pos="3,60" yoko_pos="9" /> 「ｉＴｕｎｅｓ経由でアプリに渡す事が出来る。又は【書類一覧】にて、Webからダウンロードするも良し」 <fg id="0" src="fg/shiomi3c.png" tate_pos="1,-30" yoko_pos="7" /> 「よし……！　じゃあ彩女さんをものすっごい腰が低くておしとやかなキャラに出来るんだね！」 <fg id="1" src="fg/ayame1g.png" tate_pos="3,60" yoko_pos="9" /> 「そ……それはなるべく勘弁して欲しいなぁ」 <fg id="0" src="fg/shiomi3f.png" tate_pos="1,-30" yoko_pos="7" /> 「というわけでアプリの紹介は以上です！　色々試してみてね！」 <fg id="1" src="fg/ayame1c.png" tate_pos="3,60" yoko_pos="9" /> 「次は読んでいるキミ自身の脚本で──また会おう！」 <stopbgm /> </div> </body> </html>

・背景の指定

<img id="bg" src="bg/machi.jpg" />

　今回はきまぐれアフター素材置き場様からお借りしたこの背景画像を使ってみます。
　ファイル名：machi.jpg

　（解説）
　 src="bg/machi.jpg"赤字の部分に背景画像のファイル名を記述。

・キャラクタの指定

<fg id="0" src="fg/usagi01.png" tate_pos="2" yoko_pos="8" />

　このキャラクタ画像を使ってみます　ファイル名：usagi01.png
　ちなみにこのキャラの名前がなぜうさぎちゃんなのかはこことここをを見てくれると嬉しいです。

　（解説）
　XNovelではキャラクタを3人同時表示できます。
　fgid="0"というのがキャラクタ1
　fgid="1"というのはキャラクタ2
　fgid="2"というのはキャラクタ3
　になります。

　src="fg/usagi01.png" 赤字の部分にキャラクタ画像ファイル名を記述。

　tate_pos="2" yoko_pos="8"
　ってのはキャラを画面のどこに出すかっていう位置のことです。
　tate_pos="2" というのはiPadを縦向きにに表示させてる時の表示位置。
　７８９
　４５６
　１２３
　PCのテンキーの位置に対応しています。つまり２ってことは画面の下にくっつけて真ん中に表示という意味

　yoko_pos="8"はiPadを横向きに表示させてる時の表示位置です。
　つまり8は上にくっつけて真ん中ということ。横画面は縦幅が狭いので顔を優先しないといけなから上なんです。

　細かく座標を指定したい人はyoko_pos="2,10,30"というように記述すれば座標を細かく設定できます。yoko_pos="ポジション値,X座標(横位置)の微調整用の増加値,Y座標（縦位置の微調整用の増加値）"

・BGMの指定

<audio src="bgm/music.mp3" loop="true" autoplay="false" />

　（解説）
　audio src="bgm/music.mp3" 赤字の部分に音楽ファイル名を記述。
　loop="true"ループし続ける音楽をならす場合はtrue。

　autoplay="false"は関係ないのでこのままにしておいてください。

・効果音、声の指定

<audio src="bgm/voice.aiff" loop="false" autoplay="false" />

（解説）
　audio src="bgm/voice.aiff" 赤字の部分に音楽ファイル名を記述。
　loop="false"なら効果音として再生されます。効果音や声をしゃべらせたい時はこちら。
音楽と同時に音を鳴らす場合はAIFF、又はwavファイルで３０秒以内
という制限がありますので要注意。

　autoplay="false"は関係ないのでこのままにしておいてください

・セリフの指定

うさぎちゃん「こんな感じで表示されるんだよ～。」 

（解説）
　ここは普通に書くだけです。 は改行コードなんだけどこれを書くと次のセリフへセリフ送りします。

・全部できたらePub形式に変換してWebサイトにアップするだけ！iTunesから直接ファイルを入れてもよし

main.htmlを編集したらふぁみべぇ様のサイトにあるePub変換ツール『Pack ePub』にてePub形式へ変換します。変換時にゲームのタイトルと製作者名、組織名を入力できます。変換の仕方は、htmlファイルをこのソフトにドロップするだけでhtmlファイルと同じフォルダにepubファイルが保存されます。

『Pack ePub』のダウンロードはこちら

尚ePub変換ツールは最新のAdobeAirがインストールされた環境でないと動作しませんのでAdobeAirもインストールしておきましょう。

AdobeAirのダウンロードはこちら

ePubファイルが出来たら、ホームページを持ってる人はそのファイルをWEBサーバーにアップロードしましょう。持ってない人はDropBoxに入れてDropboxのURLを打ち込みでダウンロードするか、iTuneからファイル登録しましょう。

今回作ってみたePubファイル http://homepage1.nifty.com/vaio_hig/XNovel/main.epub
今回作成してみたカオスなXNovelのサンプルシナリオです。いろいろ試してるのでその名残がいっぱいｗ18歳以下の人は閲覧禁止です（笑）XNOVELから上のURLを打ち込めばダウンロードできます。このファイルの拡張子.epubをzipに変換すればそのまま使えるサンプルコードになります。いろいろ改変しながら覚えましょう～。

URLスキームを利用したダウンロードリンク　 xnhttp://homepage1.nifty.com/vaio_hig/XNovel/main.epub

iPhoneやiPadのSafariからこのリンクをクリックするとXNovelが起動して自動的にダウンロードできます。webでシナリオファイルを公開する際はこんな感じでファイルのURLにxnをつけましょう。