コラム一覧へ

2016年4月アーカイブ

ガワアプリの作り方

smp.jpg

【ガワアプリとは何か】

スマホやタブレットのアプリには、Webページを使って画面を実現する「ガワアプリ」と呼ばれるタイプが存在します。

ガワアプリの「ガワ」は少々俗な表現で、「外側」あるいは「何かを包む皮」の「ガワ」を指しています。ガワアプリとは、ブラウザ機能を内蔵して特定のWebサイトを表示することを主機能としているアプリのことです。逆に通常のアプリはネイティブアプリと呼ばれます。

ガワアプリの最大の特徴は開発費が安いことです。Webサイトがすでにある場合は、プログラムの開発対象が「ガワ」とその付加機能に限られるため、ごく少ない開発規模でアプリを作成できます。

ガワアプリであっても、アプリとしての体裁は普通のアプリと同じです。App StoreやGoogle Play等からスマホやタブレットにインストールし、アイコンをタップして起動、普通に操作できます。ユーザーインターフェイスはWebページなので、操作時のなめらかさや凝った操作性の画面は実現しにくいのですが、表示自体はWebコンテンツなので十分リッチです。細かな違いを気にしないユーザーは、アプリに表示されているのがWebであることに気づかないかも知れません。

【開発方法・作り方】

アプリでWebページを表示するには、「アプリ内ブラウザ」と呼ばれるブラウザ機能をアプリに組み込みます。ガワアプリでは、基本的なUIをこのアプリ内ブラウザで実現するため、ユーザー操作に対する反応の処理は、HTMLに組み込んだJava Scriptかサーバー上のプログラムで行います。

画面に表示されているのはWebページなのでサーバー上のプログラムは普通にPOSTで呼び出せますし、Ajaxの手法でHTMLの画面を切り替えること無く、バックグラウンドで呼び出すこともできます。

少々凝った実装だと、アプリ内ブラウザに表示したWebページと、ガワアプリ自体のネイティブコードを連携させることもできます。最も代表的なのはカスタムURLスキームと呼ばれる手法です。htmlやスクリプトから特殊なURLを指定することで、Webページからアプリのプログラムロジックを呼び出します。他にはアプリ内ブラウザのサーバーアクセスをアプリのネイティブコードから監視する方法もあります。

この連携によってWeb画面上のボタンのタップを起点に、Webでは実現できない機能、例えばスマホのカメラを使ってバーコードを読み取るなど、ブラウザだけでは不可能な機能を実現できます。

【アプリ審査】

開発したアプリを企業内のみで利用する場合は良いのですが、アプリを一般公開する場合、iPhone/iPadアプリはApp Storeに登録するための審査を受ける必要があります。ガワアプリを申請する場合は、Webサイトが単純すぎる場合は、単にWebページをアプリから表示するだけであると判断され、アプリとしての価値がないとして却下される可能性が高いです。

審査ではアプリのUIは常に「very good」のレベルが要求されるほか、様々な条件をクリアする必要があります。この審査対象はネイティブ実装かどうかは関係なく、アプリ内ブラウザに表示されるWebページもアプリの一部とみなされますので注意が必要です。

【ガワアプリの例】

例えば、自社専用のECサイトがある場合、次のようなガワアプリを安価に開発できます。

自社のECサイト専用のガワアプリを作成します。次の仕様を盛り込みます。
・自動でユーザーのログイン状態を維持します。
・ユーザーが希望するキャンペーン情報や、購入後の発送情報をプッシュ通知で伝えます。
・ECサイトには掲載していない新着商品や、店舗情報、店舗のスタッフブログを表示します。

【まとめ】

ガワアプリは安価に開発可能です。しかも表示するコンテンツ次第で素晴らしいアプリになります。またWebページを表示するだけではなく、プッシュ通知や地図表示などアプリならではの機能を組み合わせることで、さらに優れたユーザー価値を得ることができます。スマホやタブレットに最適化されたECなどのWebシステムをお持ちの企業は、一度ガワアプリの作成を検討してみると良いのではないでしょうか。


[inline]
<p>
最近の業務用のWebシステムではグラフ表示を取り入れる機会が増えてきました。
<br />
</p>
[script src="http://www.cmpd.jp/blog/Chart.min.js"][/script]
<style>
.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
#pieLegend {
padding: 10px;
overflow: hidden;
position: relative;
}
ul.pie-legend {
list-style: none outside none;
float: left;
margin: 0 0 0 0;
padding: 0;
position: relative;
left: 50%;
}
ul.pie-legend > li {
float: left;
margin-right: 5px;
padding: 5px;
position: relative;
left: -50%;
}
</style>
<div id="chartArea" class="center">
<canvas id="pieArea" height="260" width="260"></canvas>
<div id="pieLegend"></div>
</div>
[script]
var datasets = [
{
value: 30,
color:"#aaf2fb",
lineColor: "#aaf2fb",
label:"最初の分類"
},
{
value : 50,
color : "#ffb6b9",
lineColor : "#ffb6b9",
label:"次の分類"
},
{
value : 120,
color : "#ffe361",
lineColor : "#ffe361",
label:"3番目の分類"
},
{
value : 170,
color : "#fbaa6e",
lineColor : "#fbaa6e",
label:"4番目の分類"
}

];
var options = {
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\">&nbsp;&nbsp;&nbsp;</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var myPie = new Chart(document.getElementById("pieArea").getContext("2d")).Pie(datasets, options);
document.getElementById("pieLegend").innerHTML = myPie.generateLegend();
[/script]
<p> ほんの数年前はグラフ表示のライブラリは、高価だったり使いにくかったりと良いものが見当たらなかったのですが、現在は見た目も機能性も素晴らしいオープンソースのライブラリが多数登場してきています。</p>
<p> 私が最もWebの業務システムに適していると思うのはchart.jsと言うライブラリ。上のサンプルのとおり、デザイン性に優れています。グラフ表示の際のアニメーションも良好です。ライブラリ自体をサイトに配置するので、ライブラリのアップデートやサービス終了を気にすること無く運用できます。</p>
<p> 分析のためのグラフ描画は、どうしても大量のデータアクセスがついて回るので、設計には考慮が必要です。例えば、1年間の売上で商品種類毎の比率を見るには、1年間の全ての売上データにアクセスする必要があります。</p>
<p> データ量が多い場合や同時利用数が多い場合等、どうしても負荷が高い場合は、業務用のデータベースサーバーと分析用のデータベースサーバーを分離する方法が有効です。現状でデータ量が少なく、ビジネスの成長と合わせてデータ量が増えていくことが見込まれる場合は、論理的に別サーバーで動作するようにデータベースを設計しておき、当初は1台のサーバーに配置する方式をとります。</p>
[/inline]
<img src="http://www.cmpd.jp/sy/wp-content/uploads/2016/05/chart.png" alt="chart.jpサンプルグラフ" width="600" height="443" class="alignnone size-full wp-image-68" />


« 2015年12月 | メインページ

お問い合わせ

システムやアプリの開発のご相談、サービスに関するご質問など、どのようなことでもお気軽にお問い合わせください。