読者です 読者をやめる 読者になる 読者になる

Intelligent Technology's Technical Blog

株式会社インテリジェントテクノロジーの技術情報ブログです。

クロスプラットフォーム開発環境「Herlock」を使ってみました

こんにちは、石尾です。

間藤からMonacaPhoneGapBuildを投稿していますが、
石尾は、Herlockについて投稿していこうと思います。

※ホームページでは「Herlock.」となっていますが、「Herlock」と記載します。

Herlockは、株式会社ソニックムーブが提供するAndroidiOSネイティブアプリのクロスプラットフォーム開発環境です。JavaObjective-Cを知らない方でもJavaScriptを知っていれば、アプリ開発が可能です。コーディングは、Monacaと同様に、ブラウザ上で開発、デバッグからビルドまでを行います。特徴は、JavaScript(Flashライクなコード)でOpenGLによる実装ができ、ゲームのような高精度なグラフィックが求められるアプリを作成することが可能なところです。

今回は、Herlockを利用した開発の流れと少し触った感想をレポートします。
※現在公開されているバージョンは、クローズドベータ版です。
※ブラウザは、SafariGoogleChromeを推奨しています。
※対応デバイスOSは、Android2.3以降、iOS6.x以上を推奨しています。


利用開始

Herlockのトップ画面より、

メールアドレスを登録すると、数日後に利用開始のメールが届きます。

メール本文のサインアップリンクより

ユーザー名、メールアドレス、パスワードを登録すると利用開始です。
次回からログイン画面からユーザー名、パスワードで利用できます。

開発の流れ

ログイン後、ダッシュボード画面が開きます。

右のオレンジ背景[GettingStarted]欄に開発の流れが記載されています。
この流れに沿って、進めてみます。
※ブラウザの横幅を狭くしている場合、[GettingStarted]欄が表示されないので注意してください。
※右上のヘルプからもう少し詳しい開発の流れを参照することもできます。

1)プロジェクトの作成

[新規プロジェクト作成]ボタンをクリックすると、プロジェクト画面が開きます。

プロジェクト名:「herlock.test.sample1」
テンプレート:「default」
 ※テンプレートは、[各テンプレートの説明]リンクをクリックすると説明が表示されます。defaultは、ゼロから開発する時の最低限のテンプレートです。
プロジェクト概要:「サンプル1」
と設定し、[作成]ボタンをクリックすると、次のような画面に遷移します。

2)デバッグアプリのダウンロード

メニュー[デバッグ][デバッグアプリダウンロード]をクリックすると、ダウンロード画面が表示されます。

[ダウンロード]ボタンをクリックすると、GooglePlayへ遷移します。

Herlockは、実機でのデバッグ用アプリHerlockViewerを提供しています。
HerlockViewerは、Herlockで開発中のアプリを実機で簡単に確認することができます。
※アプリをビルドしていない場合は、HerlockViewerでアプリを確認できないため、下記の4-1)4-2)を実施する必要があります。
※画面上はAndroidだけですが、iOSアプリも提供しています。

3)プログラムの編集

生成したプログラムの編集は、WebIDEというブラウザ上で行います。
メニュー[ヘルプ][IDEの使い方]をクリックすると、[IDEの使い方]欄が表示されるため、参照しながら、覚えることが可能です。また、ブラウザ上でなくローカルPC上で編集し、アップロードすることも可能です。

4-1)プログラムの確認(ビルド)

次に、アプリをビルドしてみます。
メニュー[プロジェクト][ビルド設定]をクリックすると、ビルド設定ポップアップが開きます。

はじめは、iOSタブが表示されています。
※ポップアップは、右上の[×]ボタンをクリックすると閉じます。

今回、Androidを試してみます。Androidタブをクリックします。
アプリケーション情報設定では、アプリケーションの設定を行います。
アプリケーション名:「サンプル1」
プロダクト名:「herlock.test.sample1」
を設定します。

画像設定では、アイコン画像とスプラッシュ画像の設定を行います。

キーストアでは、リリース時に署名するためのキーストアを登録します。

メニュー[プロジェクト][ビルド]をクリックすると、ビルドポップアップが開きます。
[デバッグビルドを実行する]ボタンをクリックすると、ビルドが開始されます。
クラウド上で、ビルドを行うため、ちょっと待ちます。

すると、ビルドが完了したステータスになり、[ダウンロード]リンクが表示されます。
[ダウンロード]リンクからは、作成されたapkファイルがダウンロードできます。
上記のHerlockViewerを利用せずに、Androidエミュレータにインストールすることも可能です。

4-2)プログラムの確認(実行)

Android実機にHerlockViewerをインストールして、sample1を実行してみました。Herlockのログイン画面が表示され、ユーザー名とパスワードを入力しログインします。

先程、ビルドしたプロジェクト「herlock.test.sample1」が表示されているので、タップします。

「herlock.test.sample1」(何も実装していないので真白い画面)が表示されました。

右のページタグをスライドすると、デバッグ画面が表示されました。
メモリ使用量が表示されています。

感想

Herlockをほんとにちょっとだけ触った感想です。
・ブラウザ上のクリック後読み込みなど、少し待ち時間がある。
・HerlockViewerのデバッグ画面は、実機でのデバッグに利用しやすい。
Androidエミュレータの場合、apkファイルを自分でインストールするしかないことが不便。
・ブラウザ上IDE開発について、ただ、複数人での開発となった場合、ソース管理やこのHerlockユーザー管理など考慮する必要がある。

次回は、Herlockによるアプリの実装についてレポートしていこうと思います。