<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>畠田 喜丈 &#8211; HTML5Experts.jp</title>
	<atom:link href="/htpboost/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>PhoneGapとは一味違う！純国産ハイブリッドアプリフレームワーク、「アプリカン」事始め</title>
		<link>/htpboost/8318/</link>
		<pubDate>Fri, 25 Jul 2014 00:00:15 +0000</pubDate>
		<dc:creator><![CDATA[畠田 喜丈]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[PhoneGap]]></category>
		<category><![CDATA[ハイブリッド]]></category>
		<category><![CDATA[モバイル]]></category>

		<guid isPermaLink="false">/?p=8318</guid>
		<description><![CDATA[連載： ハイブリッドアプリ開発最前線 (7)アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。 アプリカンは2013年末に公開され、...]]></description>
				<content:encoded><![CDATA[<div class="seriesmeta">連載： <a href="https://html5experts.jp/series/hybrid-special/" class="series-181" title="ハイブリッドアプリ開発最前線" data-wpel-link="internal">ハイブリッドアプリ開発最前線</a> (7)</div><p>アプリカンは、純国産のハイブリッドアプリフレームワークです。いつも使っているエディタだけでアプリが作れるので、開発環境のOSも選びません。</p>

<p>アプリカンは2013年末に公開され、ハイブリッドアプリフレームワークとしては後発ですが、他のフレームワークとは異なるアプローチとして、様々なパートナー企業のサービスのSDKを組み込み、AR機能や、位置情報連動サービスなど複雑なサービスオプション機能を JavaScriptから簡単に呼び出せるようになっています。</p>

<p>基本は無料で利用できますが、前述の高機能なオプションを使ったり、無料ビルドしたアプリに表示される広告バナーを外す場合には有料となります。</p>

<h2>アプリカンの開発に必要なもの</h2>

<ul>
<li>エディタ</li>
<li>好奇心</li>
</ul>

<p>アプリカンの開発には、IDEを用意する必要はありません。
テンプレートとなる <code>web.zip</code> をアプリカンのサイトからダウンロードして開発マシン上で解凍し、そのフォルダの中に HTML5、JavaScript、CSSを作り込んでいき、できあがったものを zipで圧縮して、サーバーにアップロードするだけです。</p>

<p>デバッグは、iOS、Androidそれぞれのアプリマーケットからダウンロードできる アプリカンシミュレータで行います。</p>

<h2>Hello アプリカン World</h2>

<p>それでは実際にアプリカンでお約束のHello Worldを作ってみましょう。</p>

<p>アプリカンでのアプリ作成は3ステップ</p>

<ol>
<li>アプリカンサイトにユーザ登録</li>
<li>HTML5、CSS、JavaScriptでコンテンツを作成</li>
<li>ZIP圧縮して、アプリカンサイトにアップロード</li>
</ol>

<p>この3ステップで、iOSアプリとAndroidアプリを同時に開発することが可能です。</p>

<h3>1. アプリカンにユーザ登録を行う。</h3>

<p>アプリカンサイトにユーザ登録します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/Capture_1.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/Capture_1-300x178.png" alt="Capture_1" width="300" height="178" class="aligncenter size-medium wp-image-8319" srcset="/wp-content/uploads/2014/07/Capture_1-300x178.png 300w, /wp-content/uploads/2014/07/Capture_1-1024x609.png 1024w, /wp-content/uploads/2014/07/Capture_1-207x122.png 207w, /wp-content/uploads/2014/07/Capture_1.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>ユーザー登録、ログインが完了したら、基本になるテンプレートをダウンロードしましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_2.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_2-300x214.png" alt="capture_2" width="300" height="214" class="aligncenter size-medium wp-image-8320" srcset="/wp-content/uploads/2014/07/capture_2-300x214.png 300w, /wp-content/uploads/2014/07/capture_2-1024x733.png 1024w, /wp-content/uploads/2014/07/capture_2-207x148.png 207w, /wp-content/uploads/2014/07/capture_2.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>ユーザー画面の左サイドバーのメニューから各種ライブラリをクリックし、新しく開いたウィンドウから【シンプル】をダウンロードしましょう。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_3.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_3-300x200.png" alt="capture_3" width="300" height="200" class="aligncenter size-medium wp-image-8321" srcset="/wp-content/uploads/2014/07/capture_3-300x200.png 300w, /wp-content/uploads/2014/07/capture_3-207x137.png 207w, /wp-content/uploads/2014/07/capture_3.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<h3>2.HTML5、CSS、JavaScriptでコンテンツを作成</h3>

<p>ダウンロードした<code>web.zip</code>を解凍すると、<code>index.html</code>、<code>applican-config.xml</code>、jsフォルダの中には <code>applican-1.5.js</code>が出てきます。</p>

<p>今回はHello Worldを表示するだけなので、 <code>index.html</code>を編集します。いつもお使いのエディタで <code>index.html</code>を開き、&#8220;タグの中の&#8221;SAMPLE&#8221;を &#8220;Hello World&#8221;に書き換え保存して終了します。</p>

<h3>3.ZIP圧縮して、アプリカンサイトにアップロード</h3>

<p>webディレクトリごと ZIPファイルに圧縮できたら、それをサイトにアップロードします。先ほどのアプリカンサイトにログインした状態から、プロジェクトを作成します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_4.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_4-300x185.png" alt="capture_4" width="300" height="185" class="aligncenter size-medium wp-image-8322" srcset="/wp-content/uploads/2014/07/capture_4-300x185.png 300w, /wp-content/uploads/2014/07/capture_4-1024x632.png 1024w, /wp-content/uploads/2014/07/capture_4-207x127.png 207w, /wp-content/uploads/2014/07/capture_4.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>[新しいプロジェクトを作成]をクリックし、プロジェクト名、対象デバイス、プロジェクトの説明を入力し、作成ボタンをクリックします。</p>

<p>プロジェクト一覧に先ほど作成したプロジェクトができているので【選択】ボタンをクリックします。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_5.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_5-300x235.png" alt="capture_5" width="300" height="235" class="aligncenter size-medium wp-image-8323" srcset="/wp-content/uploads/2014/07/capture_5-300x235.png 300w, /wp-content/uploads/2014/07/capture_5-1024x802.png 1024w, /wp-content/uploads/2014/07/capture_5-207x162.png 207w, /wp-content/uploads/2014/07/capture_5.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>プロジェクト画面で【アップロードへ】を選択し、画面の指示に従って先ほど作成した ZIPファイルをサーバにアップロードします。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_6.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_6-300x216.png" alt="capture_6" width="300" height="216" class="aligncenter size-medium wp-image-8324" srcset="/wp-content/uploads/2014/07/capture_6-300x216.png 300w, /wp-content/uploads/2014/07/capture_6-1024x738.png 1024w, /wp-content/uploads/2014/07/capture_6-207x149.png 207w, /wp-content/uploads/2014/07/capture_6.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>アプリカンで作成したアプリは、本番ビルドをかける前に、シミュレータ上で動作確認を行うことができます。iOS端末、Android端末でそれぞれのストアを開き、「アプリカンシミュレータ」を検索しインストールしてください。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/capture_sim.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/capture_sim-300x127.png" alt="capture_sim" width="300" height="127" class="aligncenter size-medium wp-image-8325" srcset="/wp-content/uploads/2014/07/capture_sim-300x127.png 300w, /wp-content/uploads/2014/07/capture_sim-207x87.png 207w, /wp-content/uploads/2014/07/capture_sim.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>アプリカンサイトに登録したユーザー名、パスワードを入力すると、先ほど作成したプロジェクト名が表示されるのでそれをタップし、Hello Worldが表示されることを確認してください。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/ss_1.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/ss_1-168x300.png" alt="ss_1" width="168" height="300" class="aligncenter size-medium wp-image-8326" srcset="/wp-content/uploads/2014/07/ss_1-168x300.png 168w, /wp-content/uploads/2014/07/ss_1-576x1024.png 576w, /wp-content/uploads/2014/07/ss_1-116x207.png 116w, /wp-content/uploads/2014/07/ss_1.png 360w" sizes="(max-width: 168px) 100vw, 168px" /></a>
<a href="https://html5experts.jp/wp-content/uploads/2014/07/ss_2.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/ss_2-168x300.png" alt="ss_2" width="168" height="300" class="aligncenter size-medium wp-image-8327" srcset="/wp-content/uploads/2014/07/ss_2-168x300.png 168w, /wp-content/uploads/2014/07/ss_2-576x1024.png 576w, /wp-content/uploads/2014/07/ss_2-116x207.png 116w, /wp-content/uploads/2014/07/ss_2.png 360w" sizes="(max-width: 168px) 100vw, 168px" /></a>
<a href="https://html5experts.jp/wp-content/uploads/2014/07/ss_3.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/ss_3-168x300.png" alt="ss_3" width="168" height="300" class="aligncenter size-medium wp-image-8328" srcset="/wp-content/uploads/2014/07/ss_3-168x300.png 168w, /wp-content/uploads/2014/07/ss_3-576x1024.png 576w, /wp-content/uploads/2014/07/ss_3-116x207.png 116w, /wp-content/uploads/2014/07/ss_3.png 360w" sizes="(max-width: 168px) 100vw, 168px" /></a></p>

<h2>アプリカンならではの魅力</h2>

<p>アプリカンには、オプションサービス（有料）として、パートナー企業の提供するサービスのSDKを組み込んだベースアプリが用意されています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2014/07/applican_options.png" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer"><img src="/wp-content/uploads/2014/07/applican_options-300x73.png" alt="applican_options" width="300" height="73" class="alignnone size-medium wp-image-9105" srcset="/wp-content/uploads/2014/07/applican_options-300x73.png 300w, /wp-content/uploads/2014/07/applican_options-207x50.png 207w, /wp-content/uploads/2014/07/applican_options.png 640w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>

<p>現在用意されているサービスには、
&#8211; Remote TestKit (アプリ検証サービス)
&#8211; app C cloud (CPI広告)
&#8211; ARAPPLI PLUS (ARアプリ開発)
&#8211; popinfo (PUSH通知サービス)
があります。
これ以外にも、高速なデータ転送を実現するプロトコルスタックオプションや、OCR機能を実現するオプションなどが順次リリースされる予定です。</p>
]]></content:encoded>
		
		<series:name><![CDATA[ハイブリッドアプリ開発最前線]]></series:name>
	</item>
	</channel>
</rss>
