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

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

アプリカンを使ったアプリ開発の流れ

前回の記事ではアプリカンというサービスがどういったものか紹介しました。今回はそのアプリカンを使ってハイブリッドアプリを開発する方法について紹介します。

ユーザ登録

まずはユーザ登録を行います。ユーザ登録は無料で、こちらから行えます。

f:id:moongift:20141127171433p:plain

管理画面

ユーザ登録またはログインを実行すると、管理画面に入ります。こちらがその画面です。

f:id:moongift:20141127171448p:plain

プロジェクトを作成

まずは新しいプロジェクトを作成してみましょう。

f:id:moongift:20141127171505p:plain

プロジェクト名は任意の名称が利用できます。対象デバイスは、

  • iPhone
  • iPad
  • Universal(iPhone/iPad両方)
  • Android

から選択できます(複数選択も可能です)。

最後に説明を入力して、作成するボタンを押します。

f:id:moongift:20141127171521p:plain

作成されるとプロジェクト一覧ページに戻りますので、下の方にあるプロジェクト名の選択ボタンをクリックします。

f:id:moongift:20141127171536p:plain

こちらがプロジェクト詳細画面です。まずは下の方にある各種ライブラリボタンをクリックします。

f:id:moongift:20141127171551p:plain

f:id:moongift:20141127171608p:plain

ライブラリダウンロードが開きますので、シンプルをダウンロードしましょう。

f:id:moongift:20141127171625p:plain

web.zipの構造

ダウンロードされたweb.zipというファイルを解凍すると、次のような構造になっているのが確認できます。

$ tree web
web
├── applican-config.xml
├── index.html
├── js
│   └── applican.js
└── whitelist.xml

1 directory, 4 files

こちらがアプリカンの基本構造になります。

applican-config.xml : アプリカンの基本設定ファイルです。

index.html : アプリを起動すると読み込まれるHTMLファイルです。

applican.js : アプリカンAPIを利用するために必要な制御ファイルです。

whitelist.xml : アプリケーションからURL・ファイルのアクセス制御をする際に必要なファイルです。

となります。

このindex.htmlを自由に編集してもらい、アプリを開発していきます。

アップロード

編集が終わったらアプリカンシミュレータで確認を行います。iOS用Android用が用意してありますので、必要な方を実機にインストールしてください。

f:id:moongift:20141127171650p:plain

編集したファイルはZip圧縮して、アプリカンの管理画面でアップロードします。なお、その際にはWebアプリケーションの構造に注意してください。webというフォルダがルートにある形でZip圧縮されている必要があります。

f:id:moongift:20141127171704p:plain

f:id:moongift:20141127171725p:plain

f:id:moongift:20141127171739p:plain

f:id:moongift:20141127171757p:plain

アップロードが終わるとコンテンツのアップロード履歴に戻ります。

シミュレータで確認

アップロードが終わったらシミュレータを立ち上げます。最初に登録してあるアプリカンのユーザID、パスワードでログインしてください。

f:id:moongift:20141127171816p:plain

ログインすると作成済みのプロジェクトが一覧になっていますので、表示確認したいプロジェクトをタップします。

f:id:moongift:20141127171834p:plain

そうするとコンテンツをアプリカンのサイトからダウンロードして実行されます。

f:id:moongift:20141127171849p:plain

f:id:moongift:20141127171905p:plain

まとめ

アプリカンの開発フローは以上です。ローカルでHTML/JavaScript/スタイルシートファイルを編集し、それを圧縮してアップロードという流れになります。シミュレータは最新のコンテンツを使って動作確認ができますので実機のためにコンパイルすると言った手間はいりません。

開発時は使い慣れたデスクトップブラウザを使って行えますので、これまでのWeb開発のスタイルを維持したままハイブリッドアプリ開発が行えるようになります。ぜひアプリカンをお試しください!

アプリカン | アプリ開発支援プラットフォーム