フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう

© Opt, Inc. All Rights Reserved.
フレームワークも使っていない
WebアプリをLaravel+PWAで
モバイルアプリっぽくしてみちゃう
PHPカンファレンス仙台 2019

自己紹介
萩野　輝（はぎの　あきら）
株式会社オプト
仙台テクノロジー開発部
普段の業務：
広告運用の自動化・効率化を図る社内プロダクトを開発
メインスキルセット：
PHP（FuelPHP）、jQuery、MySQL

自己紹介その2
勉強中！：
インフラ関連、フロント関連、Kotlin、PHP
好フレーズ：
大盛、無料、クーポン、キャンペーン、API

自己紹介その3
クーポンサイト
情報ポータル
記念日管理
複数ショップサイト
まとめて検索
宿簡易検索
店舗検索＆
マッピング
高ポイントおむつ
販売情報ブログ投稿
豚肉レシピツイート
BOT

目次
● はじめに
● PWAとは
● 昔作ったWebアプリについて
● 今回のGOAL
● 対応概要
● 対応実施

はじめに

昔作った愛着のあるWebアプリを、
Laravel+PWAを組み込みつつ
モバイルアプリ風に仕上げた過程の話
はじめに

私自身、初の試み
ベストプラクティスではないものの、
手段の1つとして参考になれば
はじめに

PWAとは

「Progressive Web Apps」の略称
ざっくりというとWebサイトを
GooglePlayストアで提供されている
モバイルアプリのようにする仕組み
PWAとは

PWAの詳細は、
タガヤスというIT勉強会にて、
グレープシティ株式会社の瀬川様が
発表されていました
PWAとは
http://bit.ly/2U9GJg4

昔作ったWebアプリについて

[ アプリ機能概要 ]
・店舗の情報を検索
・店舗位置を地図へマッピング
・店舗間の距離＆移動時間表示
・作成した地図の共有

[ 環境 ]
・サーバ：無料レンタルサーバ
・SSL：なし
・PHP：5.6
・DB：MySQL（5.7.22）
・フレームワーク：なし
・その他：Smarty

[ 利用API ]
・Yahoo!ローカルサーチAPI
　　（全国の店舗、イベント、クチコミ情報などの地域・拠点情報を検索）
・Yahoo!ジオコーダAPI
　　（住所をキーワードとして検索し、その位置情報取得）
・GoogleMapsAPI
　　（距離＆時間を取得）
　　（地図へのマッピングおよび表示）

ちょっと紹介
（デモ）

今回のGOAL

・URLからファイル名を消す
・ネイティブアプリのようにインストール
できるようにする
・サーバアクセス頻度を減らす
今回のGOAL

対応概要

対応内容は3点
対応概要

1. Laravelインストール
2. PWA化
3. IndexedDB導入
対応概要

Laravelインストール
⇓
URLからファイル名を消す
対応概要

PWA化
⇓
ネイティブアプリのように
インストールできるように
する
対応概要

IndexedDB導入
⇓
サーバアクセス頻度を減らす
対応概要

対応実施

対応実施
1. Laravelインストール
2. PWA化
3. IndexedDB導入

なぜLaravelなのか？
対応実施：Laravelインストール

Laravelには、routeヘルパがある！！

https://{ドメイン}/XXX/XXX/login.php
　　　　　　　↓↓↓　
https://{ドメイン}/login

開発環境構築も含め、Laravelが公式公
開しているHomeSteadを利用

・各種必要ソフトウェアインストール
・HomeSteadインストール
・composerでプロジェクト作成

正常起動に至った各種バージョン
・Windows10 Pro(64bit)
・Git：2.20
・VirtualBox：6.0
・Vagrant：2.2.2
・Laravel：5.5.44

PWAを進めるにあたり
必須となってくるのが
SSL
対応実施：PWA化

[ 環境 ]
・サーバ：無料レンタルサーバ
・SSL：なし
・PHP：5.6
・DB：MySQL（5.7.22）
・フレームワーク：なし
・その他：Smarty

2018年
借りていた無料レンタルサーバにて無
料SSL開始していた！！

1．マニフェストファイル作成
（アイコンなど各種設定を記載した JSON形式のファイル）
2．ServiceWorkerの設置
（キャッシュのコントロール処理を記載した jsファイル）
（制御しないのなら適当な fetchイベントくらい）
3．1と2の読み込み記述追加
（マニフェストファイルは全ページの headerにてリンク記載）

(例)manifest.json
{
"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"
}]
}

self.addEventListener('fetch', function(event) {
});
(例)serviceworker.js

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

ホーム画面に追加
の表記がぬるっと

追加確認の表示

マニフェストファイル
で指定した
画像とアプリ名

通常のWeb画面

PWA版の画面

IndexedDBとは

ウィキペディアによると
値とオブジェクトをローカルデータベー
スに保持するウェブブラウザの標準イ
ンターフェース
対応実施：IndexedDB導入
参照：https://ja.wikipedia.org/wiki/Indexed_Database_API

オンライン時にログイン／閲覧した情
報を保持しておき、サーバ（DB）アクセ
スの頻度を減らす

1．ログイン情報保持
（最後にログインしたユーザならログインをスキップする）
2．対象ユーザのスポット情報保持
（サーバリクエストすることなく、ロケーション一覧の閲覧を可能に）

総括

ファイル名が含まれないURLは、
スマートで良い
（萩野の所感）

最小限のPWA化だけでも、Webアプリがイ
ンストールできるというのは新鮮
かつ
配布用途には良さげ

APIを多用している場合、その点の高速化
は望めず通信も発生してしまう

全体最適はできずとも、
部分最適で使い勝手は向上する。
他のアプリも対応させない手はない

皆さんも、ぜひお試しください！

ご清聴
ありがとうございました

フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう

Similar to フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう (20)

More from 株式会社オプト　仙台ラボラトリ

More from 株式会社オプト　仙台ラボラトリ (10)

Recently uploaded

Recently uploaded (10)