Herlockで作るiOSアプリ(もちろんAndroidも!) – 準備編 –

Herlockが前から気になっていたのですが、試してみる時間が取れずにいました。
相変わらず忙しいですが、週末を利用してチャレンジしてみます。
本記事は導入までの説明が多少長くなるのでサンプルアプリ動作確認までを2回に分けてまとめる予定です。
ただし、初めて利用するサービスなのでシリーズ化せずに2回で終わる可能性もあります。

また、サンプルアプリはiOSで書き出します。
iOS Developer Programの登録が必須となりますので、事前に登録して下さい。

Herlockとは

Herlock = ハーロックと呼びます。
WebViewではなく「国内初のネイティブアプリクラスプラットフォーム開発環境」です。
ユーティリティ系はPhonegap、ゲーム系はHerlockと使い分け出来そうな雰囲気を醸しだしてます。

利用可能な範囲について

2014年3月9日時点の情報ですが、
現在ベータ版で提供されているため、公開されている機能は無料で利用することが可能です。
一般公開された後でも基本的な機能は無料で利用できる予定なので、今のうちに試してみましょう！
もちろん商用利用も可能です。

開発環境について

Cloud9があればIDEいらず？で紹介したCloud9と同じようにWeb上のIDEを利用して開発を進めて行きます。
FAQだと開発推奨ブラウザはSafari、Google Chromeの2つです。
ただし、SafariだとIDEの動きがおかしいのでGoogle Chromeで開発するほうが良いでしょう。

制作事例「それゆけ！ヤンキッキー」の紹介動画です。
なんだかワクワクしてきましたね。

アカウントとプロジェクトの登録

さっそくアカウント登録をしましょう！

• ユーザー名
• メールアドレス
• ログインパスワード

を入力して利用規約とプライバシーポリシーに同意して登録ボタンを押して下さい。
ソーシャルアカウントでの登録(ログイン)にも対応しています。

登録が完了するとプロジェクトのダッシュボードに遷移します。
さっそくプロジェクトを作成しましょう。

プロジェクト作成に必要な情報は3つです。

• プロジェクト名
• プロジェクト概要
• テンプレートの選択(任意)

を入力してプロジェクトを登録して下さい。
デフォルトテンプレート以外の情報は後から変更可能です。

プロジェクトを登録するとIDEが起動した状態になりますが、通常はダッシュボードから該当するプロジェクトの「IDEを起動」ボタンをクリックしIDEを起動させて下さい。

IDEメニューについて

1.ライブラリ

HerlockのIDEでは準備されている外部ライブラリを簡単に読み込むことが可能です。
メニューのライブラリから必要なライブラリを選択してプロジェクトへ読み込んでみましょう。

2.プロジェクト

プロジェクトのダウンロードやビルドを行います。
ベータ版の無料クラウドサービスなので頻繁にビルドを行うのは避けたほうが良さそうです。
また、ビルドを行うためには事前に証明書の登録などが必要になります。

3.デバック

Herlockはデバッグ用のアプリを別途端末にインストールしてデバッグを行います。
事前にデバッグアプリをダウンロードしておきましょう。

4.ビルド設定

iOSとAndroidそれぞれで設定する必要があります。
基本的な情報は2つです。

• アプリ名などのアプリケーション情報の設定
• アイコンなどの画像の設定

その他、iOSはビルド用の証明書設定、Androidはキーストア設定を行う必要があります。

iOS用のビルド設定を行う

iOSのアプリにチャレンジしてみるので、iOSのビルド設定を行います。
アプリケーション名などの基本設定を先に行って下さい。
画像はなくてもビルド出来るので、とりあえず後回しにします。
＊リリースする場合は必須です。

証明書についてはHerlockで作るiOSアプリ(もちろんAndroidも!) – 修正 証明書の設定 –を参照して下さい。

動作確認を行ってみる

正しく動作するか確認しておきましょう。
main.jsに簡単なテキストメッセージを表示するコードを記述してビルドしてみます。

var stage = new Stage( 320, 640 );
addLayer( new Layer( stage ) );
var textField = new TextField();
textField.autoSize = "center";
textField.defaultTextFormat = new TextFormat( null, 36, 0xffffff );
textField.text = "Hollo World.";
stage.addChild( textField );

ビルドを実行すると待ち状態になります。
しばらくするとダウンロード出来るのでipaファイルがダウンロードしましょう。

ipaファイルはiTunes経由でインストールします。

ここまで準備出来たらあとはデバック環境を整えて開発を進めていきましょう！

「Herlockで作るiOSアプリ(もちろんAndroidも!) – デバック編 -」はまとめ中です書きました!