O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
2014.07.09
WordPressサイトをiPhoneアプリにしてみた
―構築事例の紹介―
Kiharu Sasaki
Introduction
Kiharu Sasaki
Web Designer
System Engineer
https://www.facebook.com/
kiharu.sasaki
@bump_of_kiharu
http://bum...
Overview 今回お話する内容
WordPressで構築した
NAZOPLA(謎プラ)という
クイズのポータルサイトを
iPhoneアプリにしました。
アプリ化した際の色々を
今回お話します。
NAZOPLA – 謎プラ –
http://...
経緯や背景
How it started ?
Site overview
自作クイズを1枚の画像にして投稿する、画像
投稿サイト。
投稿されたクイズに対して、回答したり、ヒ
ントを見たり、評価を付けてランキングを楽
しむことが出来ます。
NAZOPLA :
クイズを投稿したり、クイズに回
...
Site overview
ソーシャルログイン
評価
クイズの投稿 クイズの回答
Facebook / Twitter
アカウントでの会員登録・
ログイン
投稿されたクイズに対して
「難易度」「面白さ」を評価
クイズ画像の投稿、
ヒントや回答期...
Site overview
モバイル(タブレット含)のア
クセスは50%、内60%がiOSデバ
イスからのアクセス
サービス開始1年半で、会員
数・PVともに順調に伸びている
が、更なる向上を目指したい
Year-
Month
PV
2014 ...
Conclusion
スマホアプリ化の検討
モバイルからのアクセスが5割を占めるが、モバイルに最適化
したページ表示が出来ていない。
ページ数が膨大で、レスポンシブ対応に工数がかかる。
モバイルの特生を活用した新たな利用法を模索し、サービスの
...
As for mobile app
アプリ化について
Point of difference Webとの違い
オフラインでも
利用可能
モバイル特有の機能
(GPS / 傾き・近接センサーなど)
マネタイズ
(有料公開・アプリ内課金)
Webクリエイターが、つい見落としがちな
モバイルアプリとWe...
プッシュ通知を利用して、ユーザーの能動的アク
セスを促せる
モバイルに特化したユーザビリティを提供すること
でUXを高め、回遊率・連続利用時間の向上や、サ
ービス自体の継続利用が見込める
検索エンジンからだけでなく、App Store / Go...
iOS / Android / WindowMobile など、プラットフォーム別に開発が必要。(※)
さらにバージョン別に継続したエンハンスも必要。
(※ハイブリッドアプリという選択肢もある)
ユーザーニーズを把握できるという良い面もあります...
ハイブリッドアプリ
アプリ化する方法
ネイティブコードによる開発
HTML5 / CSS / JavaScriptを利用した
フレームワークでの開発
ネイティブアプリ
Android Java (C / C++ 他)
iOS
Objective...
ハイブリッド
アプリ
• デバイスの機能を最大限に利用可能
• 処理速度が早い
• ワンソース・マルチデバイスのため
保守性が良い
• 学習コストが低い
• プラットフォームごとの開発が必要な
ため、学習コスト・開発コストが高い
• OSごとに...
WebViewベースアプリ
• アプリ内にブラウザを埋め込んで表示させる
• メインコンテンツはアプリ内ブラウザでWebページを表示
• デバイス機能の呼び出しなど、一部ネイティブで実装
WebView-based app
• WebView部...
iOSっぽくないアプリ
それウェブでいいじゃん、
なアプリ
有用性や独自性がないアプリ
単にウェブサイトをバンドルしたもの
デバイスの機能を活かしていないもの
機能が単純、コンテンツが少ないもの
永続した価値を提供しないと判断されるもの
UIが...
実装編
Start making app
App overview アプリ紹介
Native
WebView
Native
WebView
Native /Webview ネイティブの範囲 / Webの 範囲
Native
Webで実現している機能
• メインコンテンツの表示全般
• サーバーへのデータアクセス
Native
WebView
Nativeで実現している機能
• 箱の外側(ナビゲーションバー / タブバー)
• オフライン状態の検知と通知
• デバイ...
ネイティブから、WordPressページに実装された
JavaScriptファンクションをコールしている部分。
ネイティブ側でメソッドが用意されており、簡単に
実現できる。
Native → Web(JS)
Native /Webview ネイ...
メニューアイコンをクリックした時の動作。
CSS3のアニメーション機能を利用することで
アプリっぽい動きを演出することも可能。
(タップイベント検知のみJavaScriptを使用)
Webからネイティブをコールしている部分。
タップすると、デバ...
Twitter Bootstrap
http://getbootstrap.com/
レスポンシブデザインを簡単に実装できる、CSSフレームワーク。
お世話になったものたち
compass
http://compass-style.org/
S...
WebViewベースのアプリの場合、「ネットワークに接続されていないと利用が出
来ない」ことを明確に通知し、オフライン状態を常時検知するようにする。
オフライン時の考慮
実装時に考慮すべき点
Native
PCと違い、通信環境・速度が頻繁に変化...
WebViewで表示した画面のキャッシュはなかなか消えない。
ネイティブ側で画面読み込み前にクリアする、元々キャッシュさせないようにする
など考慮が必要。
スタイルシートやJSの変更反映のためには、読み込み時にバージョン情報を付加し
たURLに...
さくらインターネットの
「国外IPのアクセス制限」について
この設定が有効になっていると、WordPressのロ
グイン処理部分で、国外からのアクセス時に404
エラーが発生します。
初期設定が「有効」となっているため、
WordPressで会...
Próximos SlideShares
Carregando em…5
×

WordPressサイトをiPhoneアプリにしてみた

11.030 visualizações

Publicada em

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

Publicada em: Celular
  • Seja o primeiro a comentar

WordPressサイトをiPhoneアプリにしてみた

  1. 1. 2014.07.09 WordPressサイトをiPhoneアプリにしてみた ―構築事例の紹介― Kiharu Sasaki
  2. 2. Introduction Kiharu Sasaki Web Designer System Engineer https://www.facebook.com/ kiharu.sasaki @bump_of_kiharu http://bump.hatenablog.com/ 自己紹介 フリーランスでウェブデザインや システム開発のお仕事をしています。
  3. 3. Overview 今回お話する内容 WordPressで構築した NAZOPLA(謎プラ)という クイズのポータルサイトを iPhoneアプリにしました。 アプリ化した際の色々を 今回お話します。 NAZOPLA – 謎プラ – http://nazopla.jp
  4. 4. 経緯や背景 How it started ?
  5. 5. Site overview 自作クイズを1枚の画像にして投稿する、画像 投稿サイト。 投稿されたクイズに対して、回答したり、ヒ ントを見たり、評価を付けてランキングを楽 しむことが出来ます。 NAZOPLA : クイズを投稿したり、クイズに回 答できる謎のプラットフォーム。 サイトの紹介
  6. 6. Site overview ソーシャルログイン 評価 クイズの投稿 クイズの回答 Facebook / Twitter アカウントでの会員登録・ ログイン 投稿されたクイズに対して 「難易度」「面白さ」を評価 クイズ画像の投稿、 ヒントや回答期限の設定など • 回答者ランキング • 人気クイズランキング 正解することでポイント獲得 正解順によって獲得ポイント が変動 週1回のメルマガ発行 NAZOPLAの主な機能 ランキング メールマガジン サイトの紹介
  7. 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. 8. Conclusion スマホアプリ化の検討 モバイルからのアクセスが5割を占めるが、モバイルに最適化 したページ表示が出来ていない。 ページ数が膨大で、レスポンシブ対応に工数がかかる。 モバイルの特生を活用した新たな利用法を模索し、サービスの 拡充をはかりたい。 What is the problem? モバイル対応の課題
  9. 9. As for mobile app アプリ化について
  10. 10. Point of difference Webとの違い オフラインでも 利用可能 モバイル特有の機能 (GPS / 傾き・近接センサーなど) マネタイズ (有料公開・アプリ内課金) Webクリエイターが、つい見落としがちな モバイルアプリとWebアプリの大きな違い。
  11. 11. プッシュ通知を利用して、ユーザーの能動的アク セスを促せる モバイルに特化したユーザビリティを提供すること でUXを高め、回遊率・連続利用時間の向上や、サ ービス自体の継続利用が見込める 検索エンジンからだけでなく、App Store / Google Playからの流入が期待できる 新規ユーザーの獲得 アクセス頻度の向上 継続利用の促進 アプリ化のメリットMerit
  12. 12. iOS / Android / WindowMobile など、プラットフォーム別に開発が必要。(※) さらにバージョン別に継続したエンハンスも必要。 (※ハイブリッドアプリという選択肢もある) ユーザーニーズを把握できるという良い面もありますが… アプリの公開・更新には審査が必要。 また、バージョンアップの反映はユーザー次第なので、変更を完全にコントロ ール出来ない。 公開・更新タイミング 開発コスト ユーザーによる評価制度 アプリ化のデメリットDemerit
  13. 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. 14. ハイブリッド アプリ • デバイスの機能を最大限に利用可能 • 処理速度が早い • ワンソース・マルチデバイスのため 保守性が良い • 学習コストが低い • プラットフォームごとの開発が必要な ため、学習コスト・開発コストが高い • OSごとに異なるエンハンスが必要なた め保守性が悪い • 処理速度やレンダリングなどでネイテ ィブに劣る • フレームワークによっては、利用でき ないデバイスの機能や制限がある メリット デメリット メリット デメリット アプリ化する方法Development ネイティブ アプリ
  15. 15. WebViewベースアプリ • アプリ内にブラウザを埋め込んで表示させる • メインコンテンツはアプリ内ブラウザでWebページを表示 • デバイス機能の呼び出しなど、一部ネイティブで実装 WebView-based app • WebView部分は即時反映できる。 審査も不要なので、更新の反映とタイ ミングを完全にコントロールできる • ネイティブでは表現出来ない、細かい デザインの実現が可能になる メリット 【参考】http://el.jibun.atmarkit.co.jp/rails/2012/10/html5-d1ba.html 第3の選択肢: WebView • オフラインでは使えない • Appleの審査が厳しくなる (かもしれない) デメリット クックパッドアプリ(Andoroid版)など最近は多い
  16. 16. iOSっぽくないアプリ それウェブでいいじゃん、 なアプリ 有用性や独自性がないアプリ 単にウェブサイトをバンドルしたもの デバイスの機能を活かしていないもの 機能が単純、コンテンツが少ないもの 永続した価値を提供しないと判断されるもの UIがガイドラインに従っていないもの (ボタンの高さなど細かく指定あり) WebViewベースのアプリにする場合に 審査が厳しいAppleを基準にして、 アプリ化が不適切なケースを考える。 アプリ化に向かないケースNot suitable case
  17. 17. 実装編 Start making app
  18. 18. App overview アプリ紹介
  19. 19. Native WebView Native WebView Native /Webview ネイティブの範囲 / Webの 範囲 Native
  20. 20. Webで実現している機能 • メインコンテンツの表示全般 • サーバーへのデータアクセス Native WebView Nativeで実現している機能 • 箱の外側(ナビゲーションバー / タブバー) • オフライン状態の検知と通知 • デバイス機能の呼び出し (メーラーの起動、SNSへのポスト) • Cookieの保存 / 破棄 • UserAgentの追加 • 広告表示(今回は iAd を利用) Native /Webview ネイティブの範囲 / Webの 範囲
  21. 21. ネイティブから、WordPressページに実装された JavaScriptファンクションをコールしている部分。 ネイティブ側でメソッドが用意されており、簡単に 実現できる。 Native → Web(JS) Native /Webview ネイティブの範囲 / Webの 範囲
  22. 22. メニューアイコンをクリックした時の動作。 CSS3のアニメーション機能を利用することで アプリっぽい動きを演出することも可能。 (タップイベント検知のみJavaScriptを使用) Webからネイティブをコールしている部分。 タップすると、デバイスのメーラーが起動する。 リンク先にカスタムスキームを指定する方法で実現。 CSS3 Animation Web → Native ※カスタムURLスキームとは “mailto:” や “tel:” など一般的にもよく使われる Native /Webview ネイティブの範囲 / Webの 範囲
  23. 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. 24. WebViewベースのアプリの場合、「ネットワークに接続されていないと利用が出 来ない」ことを明確に通知し、オフライン状態を常時検知するようにする。 オフライン時の考慮 実装時に考慮すべき点 Native PCと違い、通信環境・速度が頻繁に変化するため、画面遷移などサーバーとの通 信が発生する時は、ローダーを表示し「処理している感」を示すようにする。 ローダーの表示 Native URLのリクエスト時はネイティブ側でオンライン状況を確認するが、Web側で完結 するAjaxやAPIなどの通信処理時は、オフライン時の考慮(タイムアウト等のエラー ハンドリング)を忘れずに行う。 AjaxやAPIコール時の考慮 Web Attention
  25. 25. WebViewで表示した画面のキャッシュはなかなか消えない。 ネイティブ側で画面読み込み前にクリアする、元々キャッシュさせないようにする など考慮が必要。 スタイルシートやJSの変更反映のためには、読み込み時にバージョン情報を付加し たURLにするなどの対応が必須。 キャッシュ問題 WebNative ユーザー登録して利用するアプリの場合、そのままではアプリを終了するとログ イン状態が保持されない。WordPressのログイン状態を保持するためには、ネイテ ィブ側でCookieの保存を行う。(ログアウト時には破棄することも忘れずに) 【参考】http://tech-gym.com/2011/10/objective-c/506.html ログイン状態の保持 Native 実装時に考慮すべき点Attention
  26. 26. さくらインターネットの 「国外IPのアクセス制限」について この設定が有効になっていると、WordPressのロ グイン処理部分で、国外からのアクセス時に404 エラーが発生します。 初期設定が「有効」となっているため、 WordPressで会員制サイトにしている方は、無効 にしましょう。 ※Appleのレビュアーは国外です!! おまけPostscript

×