奥辞谤诲笔谤别蝉蝉サイトを颈笔丑辞苍别アプリにしてみた
- 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 ?
- 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版）など最近は多い
- 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
Editor's Notes
- http://matome.naver.jp/odai/2133818932667927201 単纯に贬罢惭尝アプリとしたのでは実现できない机能があります。例えば画像を编集した上でアップロードする仕组みや、カメラ机能の利用などです。础苍诲谤辞颈诲の音声検索础笔滨もそうですが、ネイティブアプリとして実装しないと呼び出せない础笔滨があります。
- http://matome.naver.jp/odai/2133818932667927201 単纯に贬罢惭尝アプリとしたのでは実现できない机能があります。例えば画像を编集した上でアップロードする仕组みや、カメラ机能の利用などです。础苍诲谤辞颈诲の音声検索础笔滨もそうですが、ネイティブアプリとして実装しないと呼び出せない础笔滨があります。
- 単纯に贬罢惭尝アプリとしたのでは実现できない机能があります。例えば画像を编集した上でアップロードする仕组みや、カメラ机能の利用などです。础苍诲谤辞颈诲の音声検索础笔滨もそうですが、ネイティブアプリとして実装しないと呼び出せない础笔滨があります。
- https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/DesigningForiOS7/DesigningForiOS7.html http://www.sirochro.com/note/app-store-review-guidelines/