![? Opt, Inc. All Rights Reserved.
[ アプリ機能概要 ]
?店舗の情報を検索
?店舗位置を地図へマッピング
?店舗間の距離＆移動時間表示
?作成した地図の共有
昔作ったWebアプリについて](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-13-320.jpg)
![? Opt, Inc. All Rights Reserved.
[ 環境 ]
?サーバ：無料レンタルサーバ
?SSL：なし
?PHP：5.6
?DB：MySQL（5.7.22）
?フレームワーク：なし
?その他：Smarty
昔作ったWebアプリについて](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-14-320.jpg)
![? Opt, Inc. All Rights Reserved.
[ 利用API ]
?Yahoo!ローカルサーチAPI
（全国の店舗、イベント、クチコミ情報などの地域?拠点情報を検索）
?Yahoo!ジオコーダAPI
（住所をキーワードとして検索し、その位置情報取得）
?GoogleMapsAPI
（距離＆時間を取得）
（地図へのマッピングおよび表示）
昔作ったWebアプリについて](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-15-320.jpg)
![? Opt, Inc. All Rights Reserved.
[ 環境 ]
?サーバ：無料レンタルサーバ
?SSL：なし
?PHP：5.6
?DB：MySQL（5.7.22）
?フレームワーク：なし
?その他：Smarty
対応実施：PWA化](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-37-320.jpg)
![? Opt, Inc. All Rights Reserved.
[ 環境 ]
?サーバ：無料レンタルサーバ
?SSL：なし
?PHP：5.6
?DB：MySQL（5.7.22）
?フレームワーク：なし
?その他：Smarty
対応実施：PWA化](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-38-320.jpg)
![? Opt, Inc. All Rights Reserved.
(例)manifest.json
対応実施：PWA化
{
"name" : "location plan",
"short_name" : "LocationPlan",
"description" : "make your travel plan",
"start_url" : "/m_mail_pwa/php/login.php",
"display" : "standalone",
"orientation" : "any",
"background_color" : "#ACE",
"theme_color" : "#ACE",
"icons": [
{
"src" : "/m_mail_pwa/map_book.png",
"sizes" : "144x144",
"type" : "image/png"
}]
}](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-41-320.jpg)
![? Opt, Inc. All Rights Reserved.
対応実施：PWA化
var CACHE_NAME = "lp-cache-v1";
var urlsToCache = [
"https://tokyo2020.world/m_mail_pwa/docroot/js/commonFunc.js"
, “XXXXXXXXX”
];
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open(CACHE_NAME )
.then(
function(cache){
return cache.addAll(urlsToCache);
})
);
});
(例)serviceworker.js](https://image.slidesharecdn.com/a-190126141505/85/Web-Laravel-PWA-43-320.jpg)
フレームワークも使っていない奥别产アフ?リを尝补谤补惫别濒+笔奥础て?モハ?イルアフ?リっほ?くしてみちゃう
- 1. ? Opt, Inc. All Rights Reserved. フレームワークも使っていない WebアプリをLaravel+PWAで モバイルアプリっぽくしてみちゃう PHPカンファレンス仙台 2019
- 2. ? Opt, Inc. All Rights Reserved. 自己紹介 萩野 輝（はぎの あきら） 株式会社オプト 仙台テクノロジー開発部 普段の業務： 広告運用の自動化?効率化を図る社内プロダクトを開発 メインスキルセット： PHP（FuelPHP）、jQuery、MySQL
- 3. ? Opt, Inc. All Rights Reserved. 自己紹介 その2 勉強中！： インフラ関連、フロント関連、Kotlin、PHP 好フレーズ： 大盛、無料、クーポン、キャンペーン、API
- 4. ? Opt, Inc. All Rights Reserved. 自己紹介 その3 クーポンサイト 情報ポータル 記念日管理 複数ショップサイト まとめて検索 宿簡易検索 店舗検索＆ マッピング 高ポイントおむつ 販売情報ブログ投稿 豚肉レシピツイート BOT
- 5. ? Opt, Inc. All Rights Reserved. ? Opt, Inc. All Rights Reserved. 目次 ● はじめに ● PWAとは ● 昔作ったWebアプリについて ● 今回のGOAL ● 対応概要 ● 対応実施
- 6. ? Opt, Inc. All Rights Reserved. はじめに
- 7. ? Opt, Inc. All Rights Reserved. 昔作った愛着のあるWebアプリを、 Laravel+PWAを組み込みつつ モバイルアプリ風に仕上げた過程の話 はじめに
- 8. ? Opt, Inc. All Rights Reserved. 私自身、初の試み ベストプラクティスではないものの、 手段の1つとして参考になれば はじめに
- 9. ? Opt, Inc. All Rights Reserved. PWAとは
- 10. ? Opt, Inc. All Rights Reserved. 「Progressive Web Apps」の略称 ざっくりというとWebサイトを GooglePlayストアで提供されている モバイルアプリのようにする仕組み PWAとは
- 11. ? Opt, Inc. All Rights Reserved. PWAの詳細は、 タガヤスというIT勉強会にて、 グレープシティ株式会社の瀬川様が 発表されていました PWAとは http://bit.ly/2U9GJg4
- 12. ? Opt, Inc. All Rights Reserved. 昔作ったWebアプリについて
- 13. ? Opt, Inc. All Rights Reserved. [ アプリ機能概要 ] ?店舗の情報を検索 ?店舗位置を地図へマッピング ?店舗間の距離＆移動時間表示 ?作成した地図の共有 昔作ったWebアプリについて
- 14. ? Opt, Inc. All Rights Reserved. [ 環境 ] ?サーバ：無料レンタルサーバ ?SSL：なし ?PHP：5.6 ?DB：MySQL（5.7.22） ?フレームワーク：なし ?その他：Smarty 昔作ったWebアプリについて
- 15. ? Opt, Inc. All Rights Reserved. [ 利用API ] ?Yahoo!ローカルサーチAPI （全国の店舗、イベント、クチコミ情報などの地域?拠点情報を検索） ?Yahoo!ジオコーダAPI （住所をキーワードとして検索し、その位置情報取得） ?GoogleMapsAPI （距離＆時間を取得） （地図へのマッピングおよび表示） 昔作ったWebアプリについて
- 16. ? Opt, Inc. All Rights Reserved. ちょっと紹介 （デモ） 昔作ったWebアプリについて
- 17. ? Opt, Inc. All Rights Reserved. 今回のGOAL
- 18. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 今回のGOAL
- 19. ? Opt, Inc. All Rights Reserved. 対応概要
- 20. ? Opt, Inc. All Rights Reserved. 対応内容は3点 対応概要
- 21. ? Opt, Inc. All Rights Reserved. 1. Laravelインストール 2. PWA化 3. IndexedDB導入 対応概要
- 22. ? Opt, Inc. All Rights Reserved. Laravelインストール ? URLからファイル名を消す 対応概要
- 23. ? Opt, Inc. All Rights Reserved. PWA化 ? ネイティブアプリのように インストールできるように する 対応概要
- 24. ? Opt, Inc. All Rights Reserved. IndexedDB導入 ? サーバアクセス頻度を減らす 対応概要
- 25. ? Opt, Inc. All Rights Reserved. 対応実施
- 26. ? Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
- 27. ? Opt, Inc. All Rights Reserved. なぜLaravelなのか？ 対応実施：Laravelインストール
- 28. ? Opt, Inc. All Rights Reserved. Laravelには、routeヘルパがある！！ 対応実施：Laravelインストール
- 29. ? Opt, Inc. All Rights Reserved. https://{ドメイン}/XXX/XXX/login.php ↓↓↓ https://{ドメイン}/login 対応実施：Laravelインストール
- 30. ? Opt, Inc. All Rights Reserved. 開発環境構築も含め、Laravelが公式公 開しているHomeSteadを利用 対応実施：Laravelインストール
- 31. ? Opt, Inc. All Rights Reserved. ?各種必要ソフトウェアインストール ?HomeSteadインストール ?composerでプロジェクト作成 対応実施：Laravelインストール
- 32. ? Opt, Inc. All Rights Reserved. 正常起動に至った各種バージョン ?Windows10 Pro(64bit) ?Git：2.20 ?VirtualBox：6.0 ?Vagrant：2.2.2 ?Laravel：5.5.44 対応実施：Laravelインストール
- 33. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：Laravelインストール
- 34. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：Laravelインストール
- 35. ? Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
- 36. ? Opt, Inc. All Rights Reserved. PWAを進めるにあたり 必須となってくるのが SSL 対応実施：PWA化
- 37. ? Opt, Inc. All Rights Reserved. [ 環境 ] ?サーバ：無料レンタルサーバ ?SSL：なし ?PHP：5.6 ?DB：MySQL（5.7.22） ?フレームワーク：なし ?その他：Smarty 対応実施：PWA化
- 38. ? Opt, Inc. All Rights Reserved. [ 環境 ] ?サーバ：無料レンタルサーバ ?SSL：なし ?PHP：5.6 ?DB：MySQL（5.7.22） ?フレームワーク：なし ?その他：Smarty 対応実施：PWA化
- 39. ? Opt, Inc. All Rights Reserved. 2018年 借りていた無料レンタルサーバにて無 料SSL開始していた！！ 対応実施：PWA化
- 40. ? Opt, Inc. All Rights Reserved. 1．マニフェストファイル作成 （アイコンなど各種設定を記載した JSON形式のファイル） 2．ServiceWorkerの設置 （キャッシュのコントロール処理を記載した jsファイル） （制御しないのなら適当な fetchイベントくらい） 3．1と2の読み込み記述追加 （マニフェストファイルは全ページの headerにてリンク記載） 対応実施：PWA化
- 41. ? Opt, Inc. All Rights Reserved. (例)manifest.json 対応実施：PWA化 { "name" : "location plan", "short_name" : "LocationPlan", "description" : "make your travel plan", "start_url" : "/m_mail_pwa/php/login.php", "display" : "standalone", "orientation" : "any", "background_color" : "#ACE", "theme_color" : "#ACE", "icons": [ { "src" : "/m_mail_pwa/map_book.png", "sizes" : "144x144", "type" : "image/png" }] }
- 42. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 self.addEventListener('fetch', function(event) { }); (例)serviceworker.js
- 43. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 var CACHE_NAME = "lp-cache-v1"; var urlsToCache = [ "https://tokyo2020.world/m_mail_pwa/docroot/js/commonFunc.js" , “XXXXXXXXX” ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open(CACHE_NAME ) .then( function(cache){ return cache.addAll(urlsToCache); }) ); }); (例)serviceworker.js
- 44. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 ホーム画面に追加 の表記がぬるっと
- 45. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 追加確認の表示
- 46. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 マニフェストファイル で指定した 画像とアプリ名
- 47. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 通常のWeb画面
- 48. ? Opt, Inc. All Rights Reserved. 対応実施：PWA化 PWA版の画面
- 49. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：PWA化
- 50. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：PWA化
- 51. ? Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
- 52. ? Opt, Inc. All Rights Reserved. IndexedDBとは
- 53. ? Opt, Inc. All Rights Reserved. ウィキペディアによると 値とオブジェクトをローカルデータベー スに保持するウェブブラウザの標準イ ンターフェース 対応実施：IndexedDB導入 参照：https://ja.wikipedia.org/wiki/Indexed_Database_API
- 54. ? Opt, Inc. All Rights Reserved. オンライン時にログイン／閲覧した情 報を保持しておき、サーバ（DB）アクセ スの頻度を減らす 対応実施：IndexedDB導入
- 55. ? Opt, Inc. All Rights Reserved. 1．ログイン情報保持 （最後にログインしたユーザならログインをスキップする） 2．対象ユーザのスポット情報保持 （サーバリクエストすることなく、ロケーション一覧の閲覧を可能に） 対応実施：IndexedDB導入
- 56. ? Opt, Inc. All Rights Reserved. 対応実施：IndexedDB導入 function initIDPW(){ // DBに接続(新規作成) var openReq = indexedDB.open(‘userDB’, 1); openReq.onupgradeneeded = function (event) { var db = event.target.result; const objectStore = db.createObjectStore(‘user’, {keyPath : 'id'}) objectStore.createIndex("id", "id", { unique: true }); objectStore.createIndex("onflg", "onflg", { unique: false }); objectStore.createIndex("userid", "userid", { unique: true }); objectStore.createIndex("password", "password", { unique: true }); } }; (例)indexecDBの初期化
- 57. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：IndexedDB導入
- 58. ? Opt, Inc. All Rights Reserved. ?URLからファイル名を消す ?ネイティブアプリのようにインストール できるようにする ?サーバアクセス頻度を減らす 対応実施：IndexedDB導入
- 59. ? Opt, Inc. All Rights Reserved. 総括
- 60. ? Opt, Inc. All Rights Reserved. ファイル名が含まれないURLは、 スマートで良い （萩野の所感）
- 61. ? Opt, Inc. All Rights Reserved. 最小限のPWA化だけでも、Webアプリがイ ンストールできるというのは新鮮 かつ 配布用途には良さげ （萩野の所感）
- 62. ? Opt, Inc. All Rights Reserved. APIを多用している場合、その点の高速化 は望めず通信も発生してしまう （萩野の所感）
- 63. ? Opt, Inc. All Rights Reserved. 全体最適はできずとも、 部分最適で使い勝手は向上する。 他のアプリも対応させない手はない （萩野の所感）
- 64. ? Opt, Inc. All Rights Reserved. 皆さんも、ぜひお試しください！
- 65. ? Opt, Inc. All Rights Reserved. ご清聴 ありがとうございました