実践スマートフォン、iPhone/Android対応を加速させるHTML5によるアプリ開発とその事例

株式会社ロフトワーク 代表取締役　諏訪 光洋

諏訪 光洋ロフトワーク代表取締役

twitter ID: suwaws

花粉症の季節が過ぎ、今は生きてて幸せです。

2001

GARTNER

“PDA + PHONE?”

2001

35.7%

3.6%60.7%

使ってみたい

いらない

よくわからない

“PDA + PHONE?”

「PalmやVisorを携帯電話に変身させるというあの手の新製品は　どうなんだろう？ あんな形の物体に話しかけろと言うのだろうか。」

David Coursey

2000 9月 Cnet

2011

Cisco Visual Networking Index

0

1500000

3000000

4500000

6000000

2010 2011 2012 2013 2014 2015

Cisco VNI Mobile 2011

全世界のモバイル データ トラフィック2010 >> 2015 26 - fold

• Smartphones represent only 13% of total global handsets ‒ but 78% of total handset traffic.

• In 2010, 3 million tablets were connected to the mobile network, each generating 5 times more traffic than the average smartphone.

• The iPhone and Android platforms generate most of the smartphone data use.

• Mobile data traffic will increase 26-fold between 2010 and 2015.

• Two-thirds of the world‘s mobile data traffic will be video by 2015.

• There will be 788 million mobile-only Internet users by 2015.

MOBILE APP SALES AND REVENUS

2010/12/1 mediba

過去半年間にモバイルECサイトで商品を購入したことがあるか

41.6％「利用経験者」は54.4％

「直近1年以内」が半数以上モバイルECサイトで買うようになった時期

2013年までに、全世界を通じ、携帯電話がPCに代わってインターネット・アクセスの最も一般的なデバイスになる

「Twitter、うちはやってるのか？」

2010

「それは非論理的です」

「iPhoneに対応できているか？」

20122011-

「 ..... 」

iPhoneで企業サイト見る？

何故？

FLASHガジェット

Promotion

83,000KmOil, Filter!

toyota.jptoyota apps

成功するアプリは既に

・固定のWEBユーザーを持っているもの

・固定のサービスを持っているもの(EC等)

参加できる仕掛け／対話の構造

UserConsumerTwitterFacebook

mixi

GrouponKakaku.comFoursquare

TwitterFacebook

mixi

GrouponKakaku.comFoursquare

Company UserConsumer

UserConsumer

Company

Engagementオープンで継続的な対話

成功するアプリは既に

・固定のWEBユーザーを持っているもの

・固定のサービスを持っているもの(EC等)

参加できる仕掛け／対話の構造

企業サイト

ソーシャル

サービス, アプリ

ブログ, ポータル, 会員サイト, メルマガ

Owned Media

MediaTriple Earned MediaPaid Media Owned Media

x

エースホーム株式会社

x

エースホーム株式会社

•ハウスメーカーのエス・バイ・エルと、住宅建材No.1メーカーであるトステムが共同出資して設立

•2001年11月 後発のスタート

•住宅フランチャイズ企業、全国に50の加盟店

•地域密着型、加盟店ではイベントや見学会を開催

2007年 8月サイトフルリニューアルCMS導入

x

HTML5＋JSでぬりえアプリを作ってみた

小野村 香里

小野村　香里部署・役職：　システムDiv.　テクニカルディレクター主な役割：　CMS導入サポート（仕様設計、テンプレート確認など）これまでの経験：• VB、C言語でのプログラム開発• HTML、CSS、JSでのWeb制作

プログラミングの知識はありますがアプリ開発者ではありません

自己紹介

作成したアプリ

HTML5＋JS(jQuery)で制作※ネイティブアプリへの変換は　APPLIYA社のOEMサービスを利用

2010/09/26リリース

背景エースホーム株式会社• 住宅フランチャイズ企業• 全国に加盟店を展開•「ちびっこ一級建築士」キャンペーンを開催

まだ絵が描けない未就学児童にも楽しんでもらいたい

加盟店を訪れた子供に絵を描いてもらう

ぬりえアプリを提案

制作の流れ

START 1week 2week 3week 4week 5week OPEN!

仕様策定 デザイン作成HTML実装・検証

ビルド作業

Apple登録・申請・審査

実質的な制作期間は1週間程度

Appleへの会社情報登録、申請等に時間がかかった。。

全体は約2ヶ月キックオフが8/3、アプリリリースが9/26

6week 7week

画面遷移ローディング メニュー

キャンペーン紹介 ヘルプ キャラクター選択

説明なしで操作できる、シンプルなデザインに

メニュー画面に戻る キャラクター選択画面に戻る

ヘルプを表示する

クレヨン（色選択）と消しゴム（白色）

ぬりえ領域は画面全体

画面の端や、アイコン・パレットの裏まで色をつけられる

ぬりえ画面

canvas要素

メインはHTML5のcanvascanvasの上に各レイヤーが重なる構造

キャラクター線画

ボタンやクレヨン

フェードイン/アウト用レイヤー

canvasを使ったお絵描きツールを参考にiPhone用にカスタマイズ

deviantART murohttp://muro.deviantart.com/

CanvasPainthttp://canvaspaint.org/

Sketchpadhttp://mugtug.com/sketchpad/

✓touchstart（PCではmousedown）document.addEventListener("touchstart", function(e){ oldX = e.touches[0].pageX;　// タッチした座標(x)取得 oldY = e.touches[0].pageY;　// タッチした座標(y)取得 　　～～ ［クレヨン選択時の処理など］ ～～}, true);

タッチ、スライドした時の処理

✓touchmove（PCではmousemove）document.addEventListener("touchmove", draw, true);function draw(e){ x = e.touches[0].pageX;　// 移動した座標(x)取得 y = e.touches[0].pageY;　// 移動した座標(y)取得 　　～～ ［oldX、oldYからx、yへ線を描画］ ～～ oldX = x;　// 次の描画開始位置にxを代入 oldY = y;　// 次の描画開始位置にyを代入

e.preventDefault();　// スクロール抑止}

線の描画

開始地点Aから、終了地点Bへ、指定した色・太さ・形状で線を引く

座標A

座標B

これが繰り返されて、線が描かれる

続けて描く場合、Bを開始地点とし、開始地点Bから終了地点Cへ線を引く

座標A

座標B

座標C

チャレンジポイント

HTML+JSで

いかにアプリらしさを出せるか

技術的には難しいことをしていない

ページの移動はリンク

ページ遷移をなめらかに見せたい

ページ表示時、リンククリック時にフェードイン／フェードアウト効果$(function(){ $('#fade').fadeOut(1000);　// ページ表示時にフェードイン効果 $('a').click(function() {　// リンククリック時にフェードアウト効果 var url = $(this).attr("href"); $('#fade').fadeIn("fast", function(){ location.href = url; }); return false; });});

select.html <div id=”fade”> chara.html

ヘルプ表示／非表示時にフェードイン／フェードアウト効果// help表示$('#helpBtn').click(function() { $('#help').fadeIn("fast");});// help閉じる$('#help .closeBtn').click(function() { $('#help').fadeOut("fast");});

パレット表示／非表示時にアニメーション効果

$('#hideBtn > img').click(function() { if($('#palet').offset().top == 341) { $('#palet').animate({ top: 397 }, 600);　// パレットを隠す $('#homeBtn, #selectBtn, #helpBtn').fadeOut(600);　// ボタン類をフェードアウト } else { $('#palet').animate({ top: 341 }, 600);　// パレットを表示 $('#homeBtn, #selectBtn, #helpBtn').fadeIn(600);　// ボタン類をフェードイン }});

•クレヨンの太さを選べるようにしたい•やりなおし機能が欲しい

実機での検証と修正を繰り返す中お客様からは以下の要望も・・

•未就学児童でも遊べること•高機能なぬりえを作ることではなく、ユーザー体験度の高いプロモーションを実施すること

当初の目的を大事に

結果・・・

実際に子供が簡単に遊べるアプリに仕上がった

ある日の加盟店店員さんの呟き

利用したサービスAPPLIYA社のサービスを利用することで

HTMLを差換えてページを更新することが可能

クライアント・開発者

HTMLファイル等納品

アプリをビルドして納品

アップデート（自動）

クライアント自社サーバ

ユーザ サーバにHTMLをアップすると

アプリが自動アップデート

アップデート後リリース時

キャンペーン終了後は簡単アップデート

※大幅な機能変更の場合は、申請が必要

更新ファイルアップ

サーバにHTMLをアップするとNEWマークが表示され、

クリックするとアップデートされる

HTML＋JSで作るメリット•Objective-CやJavaという新しい言語を習得する必要がない

•一つのソースで、iPhoneでもAndroidでも動く

•開発環境やライブラリが増えて来ている

➡ HTML, CSS, JSでアプリを開発するためのフレームワークWebアプリのイメージ

PhoneGap

http://www.phonegap.com/

➡ JSでアプリを開発するためのフレームワーク完全にネイティブアプリに変換される

Titanium Mobile

http://www.appcelerator.com/products/titanium-mobile-application-development/

➡ スマートフォン用ライブラリ（jQueryのプラグインとして動作）マークアップのみでスマートフォン特有のUIを実装

jQuery Mobile

http://jquerymobile.com/

http://mogsnap.jp/

Titanium Mobileで作られたアプリMogSnap

Titanium Mobileでここまで作れる

食べ物の写真でつながるソーシャルな機能

デザインの可愛さ

•開発環境や開発手法の多様化によるアプリ開発者の増加

•Dreamweaver CS5.5がjQuery MobileとPhoneGapに対応

今後はどうなる？

➡HTMLコーダーやデザイナーでもアプリを作れるようになる可能性がある

？HTML5とかJSで何か作ってみたい、だと結局良く分からないアプリになってしまう

ますます内容が重要に

ますます需要の高まるスマートフォンアプリは

各種サービス・フレームワークの活用次第で

Webエンジニアにも参戦可能！

ただし、良いアプリを作るには目的が大事

まとめ

ご清聴ありがとうございました

数多くのメディア・ブログに掲載

•お客様はお子様と来客たいくつするお子様に、「iPhone+アプリ＋ちびっこ一級建築士」キャンペーンを提供

•「免許書をゲット！」再度の来客

•現場見学でより深い「対話」が可能に

対話に参加してもらうには

基本

WEB が重要

を起点とした情報発信とコミュニケーション

2011

WEBとWEBサービス が重要

を起点とした情報発信とコミュニケーション

2012～

スマートフォンにも対応した

データがHTML

CMS

CMS(DB)に格納、モバイルを中心としたさまざまなデバイス、アプリ、トレンドに対応できるように

顧客向けのサービスは？

潜在顧客向けの情報発信

顧客向けのサービスは？

は？

顧客向けのサービス

・EC

・サポート情報

・再訪を促すキャンペーン

・販売代理店向けの製品カタログアプリ　見積もり依頼アプリ

・担当者のプレゼンス情報

潜在顧客向けの情報発信

顧客向けのサービスは？

は？

潜在顧客向けの情報発信

・時間やエリアに限定した情報は出せない？　タイムセール、エリアセール

・企業サイト以外のオウンドメディアの構築

+http://wellnesslink.jp/

Service

http://wellnesslink.jp/

測ったデータをもとに、あなただけの健康アドバイスが受けられる！

http://wellnesslink.jp/

月に１回、あなたのカラダの状態が定期レポートとして届く！

モバイルサービス

WellnessLINKポータル

企業サイト

参加, サービス

使ってみて欲しいユーザー

現ユーザー

検索, プル型

既存顧客向けのサービス

潜在顧客向けの情報発信

企業サイト

参加, サービス

使ってみて欲しいユーザー

現ユーザー

検索, プル型

既存顧客向けのサービス

潜在顧客向けの情報発信

企業サイト

参加, サービス

使ってみて欲しいユーザー

現ユーザー

検索, プル型

既存顧客向けのサービス

潜在顧客向けの情報発信

Owned Media Owned Service

Owned Media

Owned Service

Web

- HTML5/XML

- PDCA

- Analitics

- CMS

Speed

“ROI !!”

PDCA

Engagement Cycle

Analytics

Execution

ContentMail Magazine

CMS

Site Analytics

OptimizationBlog

Campaign Analytics

Form

CampaignCRM

継続し、成果をあげられるプラットフォームの整備をスマートフォンにも(WEBがまだの場合は早急に)

PDCA

OwnedMedia/Service

Engagement

定量データ, 売上げ, 登録者数, UniqueUserROI

定性データ, ユーザーの声Balanced Score Card

財務の視点：顧客の視点：業務プロセスの視点：学習と成長の視点

loftwork.com

15,000Creators

日本最大のオンラインクリエイターコミュニティ

loftwork.jp

あらゆるクリエイティブを制作する総合制作代理店

CMS, WEB,Mobile, Print,Big Project

Client

loftwork

Creators

国内外にちらばっているクリエイターと協業。大規模な制作をベストなクリエイティブチーム＋高度なディレクションとプロジェクトマネジメントで提供

CMS導入, オウンドメディア,EC, 大規模サイト構築,モバイルコンテンツ

300を超える実績

Big Project

変化に対応できる組織は

「異端者(heretics) 」「ヒーロー(heroes)」「無法者 (outlaws) 」「空想家(visionaries)」

を有しなければならない。

Art Kleiner

-1996 　

Thank you

Mitsuhiro Suwa