cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

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

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

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

Herlockとは

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

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も!) – 修正 証明書の設定 –を参照して下さい。

証明書の設定を行いましょう。
IDEメニューのビルド設定を選択して、iOSの証明書の設定をクリックして設定画面を開いて下さい。

ビルド設定の選択

Herlockでは秘密鍵の登録が行えないのでiOS Developer Programに新規で証明書を登録する必要があります。

1.秘密鍵の作成

複数プロジェクトで利用する事が可能な証明書情報です。
既に作成済みの場合は削除されるようなので、1回作成してちゃんとビルド出来た場合は間違ってクリックしないようにして下さい!
「秘密鍵の作成」をクリックして秘密鍵を作成しましょう。

秘密鍵の作成

2.CSRダウンロード

iOS Developer Programに登録したアカウント情報を入力します。
Herlockの情報では無いので気をつけましょう。

CSRのダウンロード

3.iOS Developer Programで証明書、AppIDプロビジョニングの作成

デベロッパー証明書とプロビジョニングを作成します。
開発用なのでApp IDsは「*」を利用しますが、Herlockで設定したbundle IDで作成しても問題はありません。

** 注意 ** この作業はiOS Developer Programで行います!
iOS Developer ProgramにログインしてCertificates,Identifiers & Profiles画面を開いて下さい。

IOSデベロッパーセンター
Certificate
Certificatesの追加

iOS App Developmentを選択してContinueをクリックして下さい。

証明書作成1

CSRを作成して下さい的なメッセージが表示されますが、既に作成済なのでContinueをクリックして下さい。

証明書作成2

ファイル選択画面へ遷移するので、HerlockからダウンロードしたCSRをアップロードして下さい。

証明書作成3

しばらくすると証明書がダウンロード出来るのでHerlockへ登録用にダウンロードしておきます。

証明書作成4

AppIDを登録します。
AppID作成画面を開いて下さい。

AppIdの作成1

Wildcard App IDを選択して、BundleIDにワイルドカード「*」を入力して登録を行って下さい。
例)jp.hogehoge.*

AppIdの作成2

Provisioningを作成します。

プロビジョニングの追加1

iOS App Developmentを選択してContinueをクリックして下さい。

プロビジョニング作成1

AppIDを選択します。
「*」を選択してContinueをクリックして下さい。

プロビジョニングの作成2

証明書の選択を行います。
先ほど作成した証明書を選択してContinueをクリックして下さい。
既に開発用の証明書を持っていた方は同じ名前が並んでいると思いますが、下の方を選択して下さい。

プロビジョニングの作成3

デバイスの選択を行います。
開発用なので全て選択で問題無いと思います。
選択したらContinueをクリックして下さい。

プロビジョニングの作成4

Profileの名前を入力します。
分かりやすい名前を入力して下さい。
入力したらGenerateをクリックして下さい。

プロビジョニングの作成5

しばらくするとProvisioningが作成出来るのでHerlock登録用にダウンロードしておきます。

プロビジョニングの作成6

4.HerlockへiOS Developer Programの証明書とプロビジョニングを登録

ビルド設定を開いて下さい。
証明書のアップロードをクリックしてiOS App Developmentからダウンロードした証明書を登録します。
ディストリビューション証明書も同じように登録できますが、今回はお試しなのでデベロッパー用のみ登録しておきます。
作成する方は証明書作成時に「App Store and Ad Hoc」を選択して証明書を作成して下さい。

証明書のアップロード

正しく登録できた場合は「登録されています」のメッセージが表示されます。

証明書のアップロード完了

プロビジョニングの登録を行います。
今回は開発用なのでデバックビルド用をクリックします。
アドホックビルドとリリースビルドはリリース用の証明書でプロビジョニングを作成して下さい。

プロビジョニングの登録

正しく登録できた場合は「登録されています」のメッセージが表示されます。

プロビジョニングの登録後

動作確認を行ってみる

正しく動作するか確認しておきましょう。
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も!) – デバック編 -」はまとめ中です書きました!

Add a Comment

メールアドレスが公開されることはありません。