Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう

130 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう

  1. 1. © Opt, Inc. All Rights Reserved. フレームワークも使っていない WebアプリをLaravel+PWAで モバイルアプリっぽくしてみちゃう PHPカンファレンス仙台 2019
  2. 2. © Opt, Inc. All Rights Reserved. 自己紹介 萩野 輝(はぎの あきら) 株式会社オプト 仙台テクノロジー開発部 普段の業務: 広告運用の自動化・効率化を図る社内プロダクトを開発 メインスキルセット: PHP(FuelPHP)、jQuery、MySQL
  3. 3. © Opt, Inc. All Rights Reserved. 自己紹介 その2 勉強中!: インフラ関連、フロント関連、Kotlin、PHP 好フレーズ: 大盛、無料、クーポン、キャンペーン、API
  4. 4. © Opt, Inc. All Rights Reserved. 自己紹介 その3 クーポンサイト 情報ポータル 記念日管理 複数ショップサイト まとめて検索 宿簡易検索 店舗検索& マッピング 高ポイントおむつ 販売情報ブログ投稿 豚肉レシピツイート BOT
  5. 5. © Opt, Inc. All Rights Reserved. © Opt, Inc. All Rights Reserved. 目次 ● はじめに ● PWAとは ● 昔作ったWebアプリについて ● 今回のGOAL ● 対応概要 ● 対応実施
  6. 6. © Opt, Inc. All Rights Reserved. はじめに
  7. 7. © Opt, Inc. All Rights Reserved. 昔作った愛着のあるWebアプリを、 Laravel+PWAを組み込みつつ モバイルアプリ風に仕上げた過程の話 はじめに
  8. 8. © Opt, Inc. All Rights Reserved. 私自身、初の試み ベストプラクティスではないものの、 手段の1つとして参考になれば はじめに
  9. 9. © Opt, Inc. All Rights Reserved. PWAとは
  10. 10. © Opt, Inc. All Rights Reserved. 「Progressive Web Apps」の略称 ざっくりというとWebサイトを GooglePlayストアで提供されている モバイルアプリのようにする仕組み PWAとは
  11. 11. © Opt, Inc. All Rights Reserved. PWAの詳細は、 タガヤスというIT勉強会にて、 グレープシティ株式会社の瀬川様が 発表されていました PWAとは http://bit.ly/2U9GJg4
  12. 12. © Opt, Inc. All Rights Reserved. 昔作ったWebアプリについて
  13. 13. © Opt, Inc. All Rights Reserved. [ アプリ機能概要 ] ・店舗の情報を検索 ・店舗位置を地図へマッピング ・店舗間の距離&移動時間表示 ・作成した地図の共有 昔作ったWebアプリについて
  14. 14. © Opt, Inc. All Rights Reserved. [ 環境 ] ・サーバ:無料レンタルサーバ ・SSL:なし ・PHP:5.6 ・DB:MySQL(5.7.22) ・フレームワーク:なし ・その他:Smarty 昔作ったWebアプリについて
  15. 15. © Opt, Inc. All Rights Reserved. [ 利用API ] ・Yahoo!ローカルサーチAPI   (全国の店舗、イベント、クチコミ情報などの地域・拠点情報を検索) ・Yahoo!ジオコーダAPI   (住所をキーワードとして検索し、その位置情報取得) ・GoogleMapsAPI   (距離&時間を取得)   (地図へのマッピングおよび表示) 昔作ったWebアプリについて
  16. 16. © Opt, Inc. All Rights Reserved. ちょっと紹介 (デモ) 昔作ったWebアプリについて
  17. 17. © Opt, Inc. All Rights Reserved. 今回のGOAL
  18. 18. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 今回のGOAL
  19. 19. © Opt, Inc. All Rights Reserved. 対応概要
  20. 20. © Opt, Inc. All Rights Reserved. 対応内容は3点 対応概要
  21. 21. © Opt, Inc. All Rights Reserved. 1. Laravelインストール 2. PWA化 3. IndexedDB導入 対応概要
  22. 22. © Opt, Inc. All Rights Reserved. Laravelインストール ⇓ URLからファイル名を消す 対応概要
  23. 23. © Opt, Inc. All Rights Reserved. PWA化 ⇓ ネイティブアプリのように インストールできるように する 対応概要
  24. 24. © Opt, Inc. All Rights Reserved. IndexedDB導入 ⇓ サーバアクセス頻度を減らす 対応概要
  25. 25. © Opt, Inc. All Rights Reserved. 対応実施
  26. 26. © Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
  27. 27. © Opt, Inc. All Rights Reserved. なぜLaravelなのか? 対応実施:Laravelインストール
  28. 28. © Opt, Inc. All Rights Reserved. Laravelには、routeヘルパがある!! 対応実施:Laravelインストール
  29. 29. © Opt, Inc. All Rights Reserved. https://{ドメイン}/XXX/XXX/login.php        ↓↓↓  https://{ドメイン}/login 対応実施:Laravelインストール
  30. 30. © Opt, Inc. All Rights Reserved. 開発環境構築も含め、Laravelが公式公 開しているHomeSteadを利用 対応実施:Laravelインストール
  31. 31. © Opt, Inc. All Rights Reserved. ・各種必要ソフトウェアインストール ・HomeSteadインストール ・composerでプロジェクト作成 対応実施:Laravelインストール
  32. 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. 33. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:Laravelインストール
  34. 34. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:Laravelインストール
  35. 35. © Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
  36. 36. © Opt, Inc. All Rights Reserved. PWAを進めるにあたり 必須となってくるのが SSL 対応実施:PWA化
  37. 37. © Opt, Inc. All Rights Reserved. [ 環境 ] ・サーバ:無料レンタルサーバ ・SSL:なし ・PHP:5.6 ・DB:MySQL(5.7.22) ・フレームワーク:なし ・その他:Smarty 対応実施:PWA化
  38. 38. © Opt, Inc. All Rights Reserved. [ 環境 ] ・サーバ:無料レンタルサーバ ・SSL:なし ・PHP:5.6 ・DB:MySQL(5.7.22) ・フレームワーク:なし ・その他:Smarty 対応実施:PWA化
  39. 39. © Opt, Inc. All Rights Reserved. 2018年 借りていた無料レンタルサーバにて無 料SSL開始していた!! 対応実施:PWA化
  40. 40. © Opt, Inc. All Rights Reserved. 1.マニフェストファイル作成 (アイコンなど各種設定を記載した JSON形式のファイル) 2.ServiceWorkerの設置 (キャッシュのコントロール処理を記載した jsファイル) (制御しないのなら適当な fetchイベントくらい) 3.1と2の読み込み記述追加 (マニフェストファイルは全ページの headerにてリンク記載) 対応実施:PWA化
  41. 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. 42. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 self.addEventListener('fetch', function(event) { }); (例)serviceworker.js
  43. 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. 44. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 ホーム画面に追加 の表記がぬるっと
  45. 45. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 追加確認の表示
  46. 46. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 マニフェストファイル で指定した 画像とアプリ名
  47. 47. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 通常のWeb画面
  48. 48. © Opt, Inc. All Rights Reserved. 対応実施:PWA化 PWA版の画面
  49. 49. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:PWA化
  50. 50. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:PWA化
  51. 51. © Opt, Inc. All Rights Reserved. 対応実施 1. Laravelインストール 2. PWA化 3. IndexedDB導入
  52. 52. © Opt, Inc. All Rights Reserved. IndexedDBとは
  53. 53. © Opt, Inc. All Rights Reserved. ウィキペディアによると 値とオブジェクトをローカルデータベー スに保持するウェブブラウザの標準イ ンターフェース 対応実施:IndexedDB導入 参照:https://ja.wikipedia.org/wiki/Indexed_Database_API
  54. 54. © Opt, Inc. All Rights Reserved. オンライン時にログイン/閲覧した情 報を保持しておき、サーバ(DB)アクセ スの頻度を減らす 対応実施:IndexedDB導入
  55. 55. © Opt, Inc. All Rights Reserved. 1.ログイン情報保持 (最後にログインしたユーザならログインをスキップする) 2.対象ユーザのスポット情報保持 (サーバリクエストすることなく、ロケーション一覧の閲覧を可能に) 対応実施:IndexedDB導入
  56. 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. 57. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:IndexedDB導入
  58. 58. © Opt, Inc. All Rights Reserved. ・URLからファイル名を消す ・ネイティブアプリのようにインストール できるようにする ・サーバアクセス頻度を減らす 対応実施:IndexedDB導入
  59. 59. © Opt, Inc. All Rights Reserved. 総括
  60. 60. © Opt, Inc. All Rights Reserved. ファイル名が含まれないURLは、 スマートで良い (萩野の所感)
  61. 61. © Opt, Inc. All Rights Reserved. 最小限のPWA化だけでも、Webアプリがイ ンストールできるというのは新鮮 かつ 配布用途には良さげ (萩野の所感)
  62. 62. © Opt, Inc. All Rights Reserved. APIを多用している場合、その点の高速化 は望めず通信も発生してしまう (萩野の所感)
  63. 63. © Opt, Inc. All Rights Reserved. 全体最適はできずとも、 部分最適で使い勝手は向上する。 他のアプリも対応させない手はない (萩野の所感)
  64. 64. © Opt, Inc. All Rights Reserved. 皆さんも、ぜひお試しください!
  65. 65. © Opt, Inc. All Rights Reserved. ご清聴 ありがとうございました

×