WordBench TOKYO 2014.07に発表した内容です。

1. 2014.07.09
WordPressサイトをiPhoneアプリにしてみた
―構築事例の紹介―
Kiharu Sasaki

2. Introduction
Kiharu Sasaki
Web Designer
System Engineer
https://www.facebook.com/
kiharu.sasaki
@bump_of_kiharu
http://bump.hatenablog.com/
自己紹介
フリーランスでウェブデザインや
システム開発のお仕事をしています。

3. Overview 今回お話する内容
WordPressで構築した
NAZOPLA(謎プラ)という
クイズのポータルサイトを
iPhoneアプリにしました。
アプリ化した際の色々を
今回お話します。
NAZOPLA – 謎プラ –
http://nazopla.jp

4. 経緯や背景
How it started ?

5. Site overview
自作クイズを1枚の画像にして投稿する、画像
投稿サイト。
投稿されたクイズに対して、回答したり、ヒ
ントを見たり、評価を付けてランキングを楽
しむことが出来ます。
NAZOPLA :
クイズを投稿したり、クイズに回
答できる謎のプラットフォーム。
サイトの紹介

6. Site overview
ソーシャルログイン
評価
クイズの投稿 クイズの回答
Facebook / Twitter
アカウントでの会員登録・
ログイン
投稿されたクイズに対して
「難易度」「面白さ」を評価
クイズ画像の投稿、
ヒントや回答期限の設定など
• 回答者ランキング
• 人気クイズランキング
正解することでポイント獲得
正解順によって獲得ポイント
が変動
週1回のメルマガ発行
NAZOPLAの主な機能
ランキング メールマガジン
サイトの紹介

7. Site overview
モバイル（タブレット含）のア
クセスは50%、内60%がiOSデバ
イスからのアクセス
サービス開始1年半で、会員
数・PVともに順調に伸びている
が、更なる向上を目指したい
Year-
Month
PV
2014 – 01 130,000
2014 – 02 110,000
2014 – 03 130,000
2014 – 04 120,000
2014 – 05 150,000
2014 – 06 170,000
Mobile：
50%
iOS：
60%
平均月間PV
会員数
サービス期間
13万PV
7,000
16ヶ月
サイトの紹介

8. Conclusion
スマホアプリ化の検討
モバイルからのアクセスが5割を占めるが、モバイルに最適化
したページ表示が出来ていない。
ページ数が膨大で、レスポンシブ対応に工数がかかる。
モバイルの特生を活用した新たな利用法を模索し、サービスの
拡充をはかりたい。
What is the problem? モバイル対応の課題

9. As for mobile app
アプリ化について

10. Point of difference Webとの違い
オフラインでも
利用可能
モバイル特有の機能
（GPS / 傾き・近接センサーなど）
マネタイズ
（有料公開・アプリ内課金）
Webクリエイターが、つい見落としがちな
モバイルアプリとWebアプリの大きな違い。

11. プッシュ通知を利用して、ユーザーの能動的アク
セスを促せる
モバイルに特化したユーザビリティを提供すること
でUXを高め、回遊率・連続利用時間の向上や、サ
ービス自体の継続利用が見込める
検索エンジンからだけでなく、App Store / Google
Playからの流入が期待できる
新規ユーザーの獲得
アクセス頻度の向上
継続利用の促進
アプリ化のメリットMerit

12. iOS / Android / WindowMobile など、プラットフォーム別に開発が必要。(※)
さらにバージョン別に継続したエンハンスも必要。
（※ハイブリッドアプリという選択肢もある）
ユーザーニーズを把握できるという良い面もありますが…
アプリの公開・更新には審査が必要。
また、バージョンアップの反映はユーザー次第なので、変更を完全にコントロ
ール出来ない。
公開・更新タイミング
開発コスト
ユーザーによる評価制度
アプリ化のデメリットDemerit

13. ハイブリッドアプリ
アプリ化する方法
ネイティブコードによる開発
HTML5 / CSS / JavaScriptを利用した
フレームワークでの開発
ネイティブアプリ
Android Java (C / C++ 他)
iOS
Objective-c / Swift
(C / C++ 他)
Windows Mobile 7 XNA / Silverlight
BlackBerry Java
• PhoneGap
• Titanium Mobile
• Monaca など他多数
※その他ゲーム系のアプリ開発では
Unity / Cocos2d / Adobe Air などのフレームワークも有名
Development

14. ハイブリッド
アプリ
• デバイスの機能を最大限に利用可能
• 処理速度が早い
• ワンソース・マルチデバイスのため
保守性が良い
• 学習コストが低い
• プラットフォームごとの開発が必要な
ため、学習コスト・開発コストが高い
• OSごとに異なるエンハンスが必要なた
め保守性が悪い
• 処理速度やレンダリングなどでネイテ
ィブに劣る
• フレームワークによっては、利用でき
ないデバイスの機能や制限がある
メリット
デメリット
メリット
デメリット
アプリ化する方法Development
ネイティブ
アプリ

15. WebViewベースアプリ
• アプリ内にブラウザを埋め込んで表示させる
• メインコンテンツはアプリ内ブラウザでWebページを表示
• デバイス機能の呼び出しなど、一部ネイティブで実装
WebView-based app
• WebView部分は即時反映できる。
審査も不要なので、更新の反映とタイ
ミングを完全にコントロールできる
• ネイティブでは表現出来ない、細かい
デザインの実現が可能になる
メリット
【参考】http://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html
第3の選択肢: WebView
• オフラインでは使えない
• Appleの審査が厳しくなる
（かもしれない）
デメリット
クックパッドアプリ（Andoroid版）など最近は多い

16. iOSっぽくないアプリ
それウェブでいいじゃん、
なアプリ
有用性や独自性がないアプリ
単にウェブサイトをバンドルしたもの
デバイスの機能を活かしていないもの
機能が単純、コンテンツが少ないもの
永続した価値を提供しないと判断されるもの
UIがガイドラインに従っていないもの
（ボタンの高さなど細かく指定あり）
WebViewベースのアプリにする場合に
審査が厳しいAppleを基準にして、
アプリ化が不適切なケースを考える。
アプリ化に向かないケースNot suitable case

17. 実装編
Start making app

18. App overview アプリ紹介

19. Native
WebView
Native
WebView
Native /Webview ネイティブの範囲 / Webの 範囲
Native

20. Webで実現している機能
• メインコンテンツの表示全般
• サーバーへのデータアクセス
Native
WebView
Nativeで実現している機能
• 箱の外側（ナビゲーションバー / タブバー）
• オフライン状態の検知と通知
• デバイス機能の呼び出し
（メーラーの起動、SNSへのポスト）
• Cookieの保存 / 破棄
• UserAgentの追加
• 広告表示（今回は iAd を利用）
Native /Webview ネイティブの範囲 / Webの 範囲

21. ネイティブから、WordPressページに実装された
JavaScriptファンクションをコールしている部分。
ネイティブ側でメソッドが用意されており、簡単に
実現できる。
Native → Web(JS)
Native /Webview ネイティブの範囲 / Webの 範囲

22. メニューアイコンをクリックした時の動作。
CSS3のアニメーション機能を利用することで
アプリっぽい動きを演出することも可能。
（タップイベント検知のみJavaScriptを使用）
Webからネイティブをコールしている部分。
タップすると、デバイスのメーラーが起動する。
リンク先にカスタムスキームを指定する方法で実現。
CSS3 Animation
Web → Native
※カスタムURLスキームとは
“mailto:” や “tel:” など一般的にもよく使われる
Native /Webview ネイティブの範囲 / Webの 範囲

23. Twitter Bootstrap
http://getbootstrap.com/
レスポンシブデザインを簡単に実装できる、CSSフレームワーク。
お世話になったものたち
compass
http://compass-style.org/
SASS利用のほか、表示速度向上のため、画像のCSSスプライト化に利用。
Multi Device Switcher
http://wordpress.org/plugins/multi-device-switcher/
デバイスを判断して表示するテーマを切替えることが出来るプラグイン。
今回、PCサイトとはデザインがまったく異なるため、モバイル用に別テーマを作成。
アプリからのアクセスの判別のために独自のUserAgentを追加し、アプリの場合のみ該
当テーマを表示するよう設定した。
Plugin & more

24. WebViewベースのアプリの場合、「ネットワークに接続されていないと利用が出
来ない」ことを明確に通知し、オフライン状態を常時検知するようにする。
オフライン時の考慮
実装時に考慮すべき点
Native
PCと違い、通信環境・速度が頻繁に変化するため、画面遷移などサーバーとの通
信が発生する時は、ローダーを表示し「処理している感」を示すようにする。
ローダーの表示 Native
URLのリクエスト時はネイティブ側でオンライン状況を確認するが、Web側で完結
するAjaxやAPIなどの通信処理時は、オフライン時の考慮（タイムアウト等のエラー
ハンドリング）を忘れずに行う。
AjaxやAPIコール時の考慮 Web
Attention

25. WebViewで表示した画面のキャッシュはなかなか消えない。
ネイティブ側で画面読み込み前にクリアする、元々キャッシュさせないようにする
など考慮が必要。
スタイルシートやJSの変更反映のためには、読み込み時にバージョン情報を付加し
たURLにするなどの対応が必須。
キャッシュ問題 WebNative
ユーザー登録して利用するアプリの場合、そのままではアプリを終了するとログ
イン状態が保持されない。WordPressのログイン状態を保持するためには、ネイテ
ィブ側でCookieの保存を行う。（ログアウト時には破棄することも忘れずに）
【参考】http://tech-gym.com/2011/10/objective-c/506.html
ログイン状態の保持 Native
実装時に考慮すべき点Attention

26. さくらインターネットの
「国外IPのアクセス制限」について
この設定が有効になっていると、WordPressのロ
グイン処理部分で、国外からのアクセス時に404
エラーが発生します。
初期設定が「有効」となっているため、
WordPressで会員制サイトにしている方は、無効
にしましょう。
※Appleのレビュアーは国外です！！
おまけPostscript