PHPカンファレンス仙台2019 登壇資料

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.
ご清聴
ありがとうございました