Google+ もご覧ください
ユーザーアイコン

ピックアップ

[PR] 10分で試すHerlockゲームアプリ。ねこ穴でHerlockアプリの作り方を知る!

[PR] 10分で試すHerlockゲームアプリ。ねこ穴でHerlockアプリの作り方を知る!

前回はHerlockがどんなサービスであるか、どんなゲームが作れるかを紹介しました。OpenGLを使うことでJavaScriptを使ってパフォーマンスの高いiOSゲームが開発できるようになります。

しかし、実際のところゲームを開発する上でどれくらいの労力がかかるのかはやってみなければ分からないと思います。簡易的なチュートリアルは用意されていますが、実際にApp Storeに申請できるレベルのゲームをどう作ったらいいかは分からないでしょう。

そこで今回はApp Storeに公開されているHerlockアプリである ねこ穴App Store/Google Play)の開発版を使って実機で試すまでを紹介します。

実際に動かした時の動画は下記になります。なお新規登録からここまで10分程度で終わります。

ソースコードの場所

ねこ穴は元々Herlockのサンプルとしてソースコードが公開されています。そこでは音声ファイルが含まれていませんので、Creative Commonsな音声ファイルを追加した版を筆者の方で作成してあります(ライセンスはBSD Licenseです)。

Gitリポジトリ

今回は上記リポジトリをベースに進めていきます。

まずは新規登録、ログインから

今回はまずこの開発版のねこ穴を自分のiOS/Androidで動かしてみましょう。そこで、最初にHerlockのサイトへいきます。

Herlockトップページ
Herlockトップページ

まずSign-inボタンを押します。

Sign-in
Sign-in

まだアカウントを持っていない場合は、新規登録してください。Facebook/Google+/Twitter/GitHub/BitBucketのアカウントを使うことができます。

プロジェクトを作成する

ユーザ登録が完了するとダッシュボードに入ります。

ダッシュボード
ダッシュボード

まずは新規プロジェクト作成ボタンを押します。

ハイライト部分が作成ボタン
ハイライト部分が作成ボタン

プロジェクト作成画面では、例えば次のように入力します。

  • プロジェクト名:ch.mobiletou.nekoana
  • テンプレート:デフォルトのまま
  • プロジェクト概要:空のまま

プロジェクト作成画面
プロジェクト作成画面

入力が終わったら作成ボタンを押します。そうするとプロジェクトのIDE画面に移動します。

プロジェクトIDE
プロジェクトIDE

WebDAVを使ってみよう

今回はHerlockの新機能であるWebDAVを使ってみます。WebDAVを使うことでWeb IDEに頼らないファイルのアップロード、編集ができます。ただし速度的に快適な開発ができるとは言いがたいので、ファイルアップロード用と考えるのが良さそうです。

先ほどのWeb IDE画面から一旦ダッシュボードに戻ります。左上にあるHerlockアイコンをクリックします。

青いHerlockアイコンをクリック
青いHerlockアイコンをクリック

ダッシュボードに戻るとプロジェクトが追加されており、その中にWebDAVのURLが確認できると思います。これをコピーします。

WebDAVのURL
WebDAVのURL

ここからWebDAVの設定を行っていきます。Mac OSXで試していますがWindowsでもエクスプローラからWebDAVを使えるはずです。

移動 メニューから サーバへ接続 を選びます。

サーバへ接続を選択
サーバへ接続を選択

そして先ほどのWebDAV URLを入力して接続ボタンを押すと認証が出ると思いますので、HerlockのID/パスワードを入力します。

認証
認証

認証が通ると先ほどWeb IDEで見ていた内容がそのままドライブとしてマウントされます。

WebDAVマウント後
WebDAVマウント後

GitHubからねこ穴を取得する

次にアプリのベースをダウンロードします。リポジトリはGitHubに公開してありますので、cloneするか、Zipでダウンロードして解凍してください。

$ git clone git@github.com:moongift/nekoana.git
# または
$ wget https://github.com/moongift/nekoana/archive/master.zip
$ unzip nekoana-master.zip

clone/解凍が終わったら、内容を全て先ほどマウントしたWebDAVドライブに入れ替えてしまいます。

元々あった内容を全て削除
元々あった内容を全て削除

WebDAVへコピー
WebDAVへコピー

なお、このねこ穴のソースはHerlockのGitHubリポジトリでも公開されているものをベースに著作権フリーの音声ファイルを追加したものになります。そのため実際のアプリとは音が違いますのでご注意ください。

コピーが完了したら、再度HerlockのWeb IDEを開いてみましょう。アップロードした内容が反映されているのが分かるかと思います。

アップロード後
アップロード後

大量のリソースをアップロードする際などはWebDAVを使うのが良さそうですね。なおファイルの編集もできますが、一つ一つの動作(開く、保存するなど)に時間を要するのでご注意ください。

なおアップロードしたファイル構成と大まかな内容は次のようになります。

$ tree .
├── libs                          // サードパーティのライブラリやよく使う関数があります
│   ├── common.js
│   └── require.min.js
├── main.js                       // 一番最初に読み込まれるスクリプトです
└── nekoana
    ├── config.js                 // 設定、定数などが指定されています
    ├── images                    // ゲーム中で使われる画像リソースです
    │   ├── game_black.png
    │   │      :
    │   └── game_top_bg.png
    ├── lib.js                     // ゲームやステージの管理、猫画像の表示処理などを行います
    ├── main.js                    // ゲームの初期化処理やプリロードを行います
    ├── scene
    │   ├── game.js               // ゲーム画面での処理を取り回します
    │   ├── result.js             // 結果画面での処理を取り回します
    │   └── top.js                // トップ画面での処理を取り回します
    └── sounds                     // サウンドファイル
        ├── README.txt
        │      :
        └── cat3.wav

5 directories, 36 files

リソースファイルを除けば9つのJavaScriptファイルで構成されているだけです。全体を把握するのもさほど難しくないでしょう(こちらは次回になります)。

実機でテストしてみる!

ではいよいよ実機でテストしてみましょう。まずデバッグアプリをインストールします。iOS用Android用がありますので必要な方をダウンロードしてください。

インストールが終わったらそれぞれデバッグアプリを立ち上げます。

Android版
Android版

iOS版
iOS版

ユーザ名、パスワードは登録時のものを入力してください。認証が通ると登録済みのプロジェクトが一覧化されます。

Android版
Android版

iOS版
iOS版

ここでは筆者の登録した ch.mobiletou.nekoana を選択します。

Android版
Android版

iOS版
iOS版

Android/iOSのプラットフォームで遜色なく遊ぶことができます。サウンドも鳴りますのでぜひ試してみてください。


Herlockの利点の一つであるコンパイルレスというのはとても素晴らしく、コードの変更から実機での確認までがとてもスムーズです。トライ&エラーの感覚でどんどん開発ができるでしょう。一つのソースからAndroid、iOS双方で動作するアプリが作れるというのもお分かりいただけたかと思います。

HerlockではOpenGLを使っていますが、JavaScriptでコードを書いて開発している限りはそれを意識することはまずありません。UIを作ることも殆どないので(ボタンの位置指定くらいでしょうか)、これまで培ってきたJavaScriptの開発スキルがそのまま活かせるでしょう。

今回はまずねこ穴をダウンロードし、動かすところまで解説しました。次回は先ほど挙げた9つのJavaScriptファイルについて、どういった処理を行っているのかを解説していきたいと思います。


Herlockに興味を持たれた方は、3月20日(木)に行われるセミナーにご参加ください!

3月20日(木)にニフティ株式会社にて行われるセミナー エンジニア交流会「ニフティクラウド meet-up!」 にてHerlock開発企業のソニックムーブ社が 楽々、お手軽スマホアプリ開発のススメ! と題してお話されます。

アプリを開発する際に良くありがちな、Webアプリの開発と違う面倒な点、勝手が違う部分が多いですが、Herlockの紹介や裏話等を交えつつ、Web開発ライクなアプリ開発フローでその部分を解消しようというお話とのことです。気になる方はぜひ下記URLよりお申し込みください!

http://www.zusaar.com/event/4017005

Cover

記事をリクエストする

関連記事

コメント