Submit Search
Upload
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
•
0 likes
•
3,068 views
株
株式会社オプト 仙台ラボラトリ
Follow
PHPカンファレンス仙台2019 登壇資料
Read less
Read more
Technology
Report
Share
Report
Share
1 of 65
Download now
Download to read offline
Recommended
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門
tsukasamannen
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
What's new in Spring Batch 5
What's new in Spring Batch 5
ikeyat
Recommended
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
BIGLOBE Inc.
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
境界付けられたコンテキスト 概念編 (ドメイン駆動設計用語解説シリーズ)
Koichiro Matsuoka
Spring Boot ユーザの方のための Quarkus 入門
Spring Boot ユーザの方のための Quarkus 入門
tsukasamannen
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
増田 亨
What's new in Spring Batch 5
What's new in Spring Batch 5
ikeyat
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
Shuji Kikuchi
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
BigQueryの課金、節約しませんか
BigQueryの課金、節約しませんか
Ryuji Tamagawa
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
JustSystems Corporation
REST API のコツ
REST API のコツ
pospome
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
Ryo Sasaki
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Yuta Hiroto
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Web Services Japan
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
Sho Okada
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
Yahoo!デベロッパーネットワーク
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
More Related Content
What's hot
SpringBootTest入門
SpringBootTest入門
Yahoo!デベロッパーネットワーク
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
Koichiro Matsuoka
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
Shuji Kikuchi
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
泰 増田
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
Reimi Kuramochi Chiba
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
BigQueryの課金、節約しませんか
BigQueryの課金、節約しませんか
Ryuji Tamagawa
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
gree_tech
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
増田 亨
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
JustSystems Corporation
REST API のコツ
REST API のコツ
pospome
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
Ryo Sasaki
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Yuta Hiroto
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Web Services Japan
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
Sho Okada
What's hot
(20)
SpringBootTest入門
SpringBootTest入門
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
PostgreSQLの行レベルセキュリティと SpringAOPでマルチテナントの ユーザー間情報漏洩を防止する (JJUG CCC 2021 Spring)
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
[AKIBA.AWS] EC2の基礎 - パフォーマンスを100%引き出すオプション設定 -
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
今こそ知りたいSpring Web(Spring Fest 2020講演資料)
PlaySQLAlchemy: SQLAlchemy入門
PlaySQLAlchemy: SQLAlchemy入門
エンジニアから飛んでくるマサカリを受け止める心得
エンジニアから飛んでくるマサカリを受け止める心得
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
BigQueryの課金、節約しませんか
BigQueryの課金、節約しませんか
PHPからgoへの移行で分かったこと
PHPからgoへの移行で分かったこと
リッチなドメインモデル 名前探し
リッチなドメインモデル 名前探し
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
DDDとクリーンアーキテクチャでサーバーアプリケーションを作っている話
REST API のコツ
REST API のコツ
DynamoDBの初心者に伝えたい初めて触るときの勘所
DynamoDBの初心者に伝えたい初めて触るときの勘所
ブラック企業から学ぶMVCモデル
ブラック企業から学ぶMVCモデル
Amazon Aurora - Auroraの止まらない進化とその中身
Amazon Aurora - Auroraの止まらない進化とその中身
WPF開発での陥りやすい罠
WPF開発での陥りやすい罠
Similar to フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
Yahoo!デベロッパーネットワーク
オフラインファーストの思想と実践
オフラインファーストの思想と実践
Shumpei Shiraishi
ヤフー発のメッセージキュー「Pulsar」のご紹介
ヤフー発のメッセージキュー「Pulsar」のご紹介
Yahoo!デベロッパーネットワーク
ヤフー発のメッセージキュー 「Pulsar」のご紹介@jjug ccc 20171118
ヤフー発のメッセージキュー 「Pulsar」のご紹介@jjug ccc 20171118
Nozomi Kurihara
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo!デベロッパーネットワーク
ログについて改めて考えてみた
ログについて改めて考えてみた
株式会社オプト 仙台ラボラトリ
概説 Data API v3
概説 Data API v3
Yuji Takayama
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
softlayerjp
Workshop1-01
Workshop1-01
mashimonator
リクルート式Hadoopの使い方
リクルート式Hadoopの使い方
Recruit Technologies
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
Rakuten Group, Inc.
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Masahiko Miyo
Hadoop ~Yahoo! JAPANの活用について~
Hadoop ~Yahoo! JAPANの活用について~
Yahoo!デベロッパーネットワーク
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
近藤 繁延
社内システムの構造と設計、実装のはなし(下書きバージョン)
社内システムの構造と設計、実装のはなし(下書きバージョン)
SATOSHI TAGOMORI
Unification of the middle scale services by Nuxt.js
Unification of the middle scale services by Nuxt.js
HajimeSasanuma
20130313 OSCA Hadoopセミナー
20130313 OSCA Hadoopセミナー
Ichiro Fukuda
Workshop1-02
Workshop1-02
mashimonator
Workshop1-03
Workshop1-03
mashimonator
Html5 seminar 1_pac
Html5 seminar 1_pac
1PAC. INC.
Similar to フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
(20)
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
Automation of Rolling Upgrade of Hadoop Cluster without Data Lost and Job Fai...
オフラインファーストの思想と実践
オフラインファーストの思想と実践
ヤフー発のメッセージキュー「Pulsar」のご紹介
ヤフー発のメッセージキュー「Pulsar」のご紹介
ヤフー発のメッセージキュー 「Pulsar」のご紹介@jjug ccc 20171118
ヤフー発のメッセージキュー 「Pulsar」のご紹介@jjug ccc 20171118
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
ログについて改めて考えてみた
ログについて改めて考えてみた
概説 Data API v3
概説 Data API v3
Automation with SoftLayer and Zabbix
Automation with SoftLayer and Zabbix
Workshop1-01
Workshop1-01
リクルート式Hadoopの使い方
リクルート式Hadoopの使い方
ネットワーク分散型フレームワークConView
ネットワーク分散型フレームワークConView
XPagesDay 2015 RESTの総復習
XPagesDay 2015 RESTの総復習
Hadoop ~Yahoo! JAPANの活用について~
Hadoop ~Yahoo! JAPANの活用について~
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
社内システムの構造と設計、実装のはなし(下書きバージョン)
社内システムの構造と設計、実装のはなし(下書きバージョン)
Unification of the middle scale services by Nuxt.js
Unification of the middle scale services by Nuxt.js
20130313 OSCA Hadoopセミナー
20130313 OSCA Hadoopセミナー
Workshop1-02
Workshop1-02
Workshop1-03
Workshop1-03
Html5 seminar 1_pac
Html5 seminar 1_pac
More from 株式会社オプト 仙台ラボラトリ
クラウド入門(AWS編)
クラウド入門(AWS編)
株式会社オプト 仙台ラボラトリ
失敗から学ぶAWSの監視
失敗から学ぶAWSの監視
株式会社オプト 仙台ラボラトリ
RPAって何、どんなことできるの
RPAって何、どんなことできるの
株式会社オプト 仙台ラボラトリ
業務の自動化をはじめよう!!
業務の自動化をはじめよう!!
株式会社オプト 仙台ラボラトリ
RPA(ロボティック・プロセ ス・オートメーション) 仮想労働者の雇い方
RPA(ロボティック・プロセ ス・オートメーション) 仮想労働者の雇い方
株式会社オプト 仙台ラボラトリ
データマート対応した話
データマート対応した話
株式会社オプト 仙台ラボラトリ
各種データベースの特徴とパフォーマンス比較
各種データベースの特徴とパフォーマンス比較
株式会社オプト 仙台ラボラトリ
ビッグデータ・データマートとは
ビッグデータ・データマートとは
株式会社オプト 仙台ラボラトリ
ビッグデータとデータマート
ビッグデータとデータマート
株式会社オプト 仙台ラボラトリ
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
株式会社オプト 仙台ラボラトリ
More from 株式会社オプト 仙台ラボラトリ
(10)
クラウド入門(AWS編)
クラウド入門(AWS編)
失敗から学ぶAWSの監視
失敗から学ぶAWSの監視
RPAって何、どんなことできるの
RPAって何、どんなことできるの
業務の自動化をはじめよう!!
業務の自動化をはじめよう!!
RPA(ロボティック・プロセ ス・オートメーション) 仮想労働者の雇い方
RPA(ロボティック・プロセ ス・オートメーション) 仮想労働者の雇い方
データマート対応した話
データマート対応した話
各種データベースの特徴とパフォーマンス比較
各種データベースの特徴とパフォーマンス比較
ビッグデータ・データマートとは
ビッグデータ・データマートとは
ビッグデータとデータマート
ビッグデータとデータマート
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
一歩前に進めるWeb開発のスパイス(仙台Geek★Night #1)
Recently uploaded
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
Recently uploaded
(9)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
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. ご清聴 ありがとうございました
Download now