Submit Search
Upload
WordPressサイトをiPhoneアプリにしてみた
•
33 likes
•
12,786 views
Kiharu Sasaki
Follow
WordBench TOKYO 2014.07に発表した内容です。
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 26
Recommended
【de:code 2020】 Power Platform いまさら聞けないモデル駆動型アプリケーション
【de:code 2020】 Power Platform いまさら聞けないモデル駆動型アプリケーション
日本マイクロソフト株式会社
【NGINXセミナー】 NGINXのWAFとは?その使い方と設定方法 解説セミナー
【NGINXセミナー】 NGINXのWAFとは?その使い方と設定方法 解説セミナー
NGINX, Inc.
Power BI - 概要と 新しい機能など
Power BI - 概要と 新しい機能など
Takeshi Kagata
Open Liberty / WebSphere Liberty
Open Liberty / WebSphere Liberty
Takakiyo Tanaka
第14回しゃちほこオラクル俱楽部
第14回しゃちほこオラクル俱楽部
オラクルエンジニア通信
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
Hideaki Tokida
EC2でkeepalived+LVS(DSR)
EC2でkeepalived+LVS(DSR)
Sugawara Genki
GCP・GKEで作るスケーラブルなゲーム開発環境
GCP・GKEで作るスケーラブルなゲーム開発環境
Yasutomo Uemori
Recommended
【de:code 2020】 Power Platform いまさら聞けないモデル駆動型アプリケーション
【de:code 2020】 Power Platform いまさら聞けないモデル駆動型アプリケーション
日本マイクロソフト株式会社
【NGINXセミナー】 NGINXのWAFとは?その使い方と設定方法 解説セミナー
【NGINXセミナー】 NGINXのWAFとは?その使い方と設定方法 解説セミナー
NGINX, Inc.
Power BI - 概要と 新しい機能など
Power BI - 概要と 新しい機能など
Takeshi Kagata
Open Liberty / WebSphere Liberty
Open Liberty / WebSphere Liberty
Takakiyo Tanaka
第14回しゃちほこオラクル俱楽部
第14回しゃちほこオラクル俱楽部
オラクルエンジニア通信
今更ながらの「マイクロサービス」
今更ながらの「マイクロサービス」
Hideaki Tokida
EC2でkeepalived+LVS(DSR)
EC2でkeepalived+LVS(DSR)
Sugawara Genki
GCP・GKEで作るスケーラブルなゲーム開発環境
GCP・GKEで作るスケーラブルなゲーム開発環境
Yasutomo Uemori
L2延伸を利用したクラウド移行とクラウド活用術
L2延伸を利用したクラウド移行とクラウド活用術
富士通クラウドテクノロジーズ株式会社
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Hinemos
Black Belt Online Seminar Amazon Cognito
Black Belt Online Seminar Amazon Cognito
Amazon Web Services Japan
Hyper-V、オンプレミスでもコンテナを
Hyper-V、オンプレミスでもコンテナを
Tetsuya Yokoyama
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
NATASHYA AYUNIE
超高速!実践MaaSアプリ開発講座
超高速!実践MaaSアプリ開発講座
Masaki Ito
Chapter 7 Sukuk and Securitisation
Chapter 7 Sukuk and Securitisation
Mahyuddin Khalid
React+TypeScriptと格闘して得た知見
React+TypeScriptと格闘して得た知見
iPride Co., Ltd.
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
AWS Black Belt Online Seminar Amazon Aurora
AWS Black Belt Online Seminar Amazon Aurora
Amazon Web Services Japan
Practices of financing in if is
Practices of financing in if is
an nur
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
Akira Inoue
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
NATASHYA AYUNIE
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
Typhon 666
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
Ijara & istisna
Ijara & istisna
GroupOne2
開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話
Ryou Soda
よくある質問と対策 2015
よくある質問と対策 2015
Atsushi Tanaka
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
VMware ESXi トラブルシューティング
VMware ESXi トラブルシューティング
Kazuhito Ohkawa
More Related Content
What's hot
L2延伸を利用したクラウド移行とクラウド活用術
L2延伸を利用したクラウド移行とクラウド活用術
富士通クラウドテクノロジーズ株式会社
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Hinemos
Black Belt Online Seminar Amazon Cognito
Black Belt Online Seminar Amazon Cognito
Amazon Web Services Japan
Hyper-V、オンプレミスでもコンテナを
Hyper-V、オンプレミスでもコンテナを
Tetsuya Yokoyama
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
NATASHYA AYUNIE
超高速!実践MaaSアプリ開発講座
超高速!実践MaaSアプリ開発講座
Masaki Ito
Chapter 7 Sukuk and Securitisation
Chapter 7 Sukuk and Securitisation
Mahyuddin Khalid
React+TypeScriptと格闘して得た知見
React+TypeScriptと格闘して得た知見
iPride Co., Ltd.
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
AWS Black Belt Online Seminar Amazon Aurora
AWS Black Belt Online Seminar Amazon Aurora
Amazon Web Services Japan
Practices of financing in if is
Practices of financing in if is
an nur
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
Akira Inoue
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
NATASHYA AYUNIE
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
Typhon 666
はじめてのAWS CLI
はじめてのAWS CLI
Nobuhiro Nakayama
Ijara & istisna
Ijara & istisna
GroupOne2
開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話
Ryou Soda
よくある質問と対策 2015
よくある質問と対策 2015
Atsushi Tanaka
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
Masayuki Kato
VMware ESXi トラブルシューティング
VMware ESXi トラブルシューティング
Kazuhito Ohkawa
What's hot
(20)
L2延伸を利用したクラウド移行とクラウド活用術
L2延伸を利用したクラウド移行とクラウド活用術
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Hinemosによる初期構築~障害検知自動復旧システムの実現について
Black Belt Online Seminar Amazon Cognito
Black Belt Online Seminar Amazon Cognito
Hyper-V、オンプレミスでもコンテナを
Hyper-V、オンプレミスでもコンテナを
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
INTERNATIONAL ISLAMIC FINANCIAL MARKET (IIFM)
超高速!実践MaaSアプリ開発講座
超高速!実践MaaSアプリ開発講座
Chapter 7 Sukuk and Securitisation
Chapter 7 Sukuk and Securitisation
React+TypeScriptと格闘して得た知見
React+TypeScriptと格闘して得た知見
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
AWS Black Belt Online Seminar Amazon Aurora
AWS Black Belt Online Seminar Amazon Aurora
Practices of financing in if is
Practices of financing in if is
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
.NET の過去、現在、そして未来 ~ .NET 最新アップデート
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
DIFFERENCES BETWEEN ISLAMIC BANKING SYSTEM AND CONVENTIONAL SYSTEM
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
20240207 Comparison of AWS Security Hub and 3rd party CSPM, consideration of...
はじめてのAWS CLI
はじめてのAWS CLI
Ijara & istisna
Ijara & istisna
開発環境の認証を改善して Redmineを社内標準にした話
開発環境の認証を改善して Redmineを社内標準にした話
よくある質問と対策 2015
よくある質問と対策 2015
Serverless AWS構成でセキュアなSPAを目指す
Serverless AWS構成でセキュアなSPAを目指す
VMware ESXi トラブルシューティング
VMware ESXi トラブルシューティング
WordPressサイトをiPhoneアプリにしてみた
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
Editor's Notes
http://matome.naver.jp/odai/2133818932667927201 単純にHTMLアプリとしたのでは実現できない機能があります。例えば画像を編集した上でアップロードする仕組みや、カメラ機能の利用などです。Androidの音声検索APIもそうですが、ネイティブアプリとして実装しないと呼び出せないAPIがあります。
http://matome.naver.jp/odai/2133818932667927201 単純にHTMLアプリとしたのでは実現できない機能があります。例えば画像を編集した上でアップロードする仕組みや、カメラ機能の利用などです。Androidの音声検索APIもそうですが、ネイティブアプリとして実装しないと呼び出せないAPIがあります。
単純にHTMLアプリとしたのでは実現できない機能があります。例えば画像を編集した上でアップロードする仕組みや、カメラ機能の利用などです。Androidの音声検索APIもそうですが、ネイティブアプリとして実装しないと呼び出せないAPIがあります。
https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/DesigningForiOS7/DesigningForiOS7.html http://www.sirochro.com/note/app-store-review-guidelines/