Suche senden
Hochladen
比較サイトの検索改善(SPA から SSR に変換)
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
767 views
gree_tech
Folgen
GREE Tech Conference 2021 で発表された資料です。 https://techcon.gree.jp/2021/session/Session-3
Weniger lesen
Mehr lesen
Ingenieurwesen
Melden
Teilen
Melden
Teilen
1 von 42
Jetzt herunterladen
Empfohlen
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
増田 亨
[AC05] マイクロサービスは分割がキモ!基幹システムのためのドメイン駆動設計
[AC05] マイクロサービスは分割がキモ!基幹システムのためのドメイン駆動設計
de:code 2017
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
Empfohlen
マイクロにしすぎた結果がこれだよ!
マイクロにしすぎた結果がこれだよ!
mosa siru
Redisの特徴と活用方法について
Redisの特徴と活用方法について
Yuji Otani
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
CEDEC2019 大規模モバイルゲーム運用におけるマスタデータ管理事例
sairoutine
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
エンジニアの個人ブランディングと技術組織
エンジニアの個人ブランディングと技術組織
Takafumi ONAKA
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
増田 亨
[AC05] マイクロサービスは分割がキモ!基幹システムのためのドメイン駆動設計
[AC05] マイクロサービスは分割がキモ!基幹システムのためのドメイン駆動設計
de:code 2017
ふつうのRailsアプリケーション開発
ふつうのRailsアプリケーション開発
Takafumi ONAKA
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
Minoru Yokomichi
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容
sairoutine
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
Yusuke Suzuki
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
NTT Communications Technology Development
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
dena_study
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
Microsoft MVP が語る Azure 移行の勘所
Microsoft MVP が語る Azure 移行の勘所
Tetsuya Odashima
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
理弘 山崎
Weitere ähnliche Inhalte
Was ist angesagt?
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
Minoru Yokomichi
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
mosa siru
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容
sairoutine
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
Yusuke Suzuki
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
onozaty
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
dcubeio
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
Go Miyasaka
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
NTT Communications Technology Development
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
toshihiro ichitani
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
dena_study
Docker Tokyo
Docker Tokyo
cyberblack28 Ichikawa
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
Yoshitaka Kawashima
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
sairoutine
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
NTT DATA Technology & Innovation
脱RESTful API設計の提案
脱RESTful API設計の提案
樽八 仲川
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Amazon Web Services Japan
Was ist angesagt?
(20)
あなたのチームの「いい人」は機能していますか?
あなたのチームの「いい人」は機能していますか?
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
DeNAの最新のマスタデータ管理システム Oyakata の全容
DeNAの最新のマスタデータ管理システム Oyakata の全容
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
アーキテクチャの進化から学ぶ、プラットフォームエンジニアリングへのアプローチ
40歳過ぎてもエンジニアでいるためにやっていること
40歳過ぎてもエンジニアでいるためにやっていること
こんなに使える!今どきのAPIドキュメンテーションツール
こんなに使える!今どきのAPIドキュメンテーションツール
Spring Boot × Vue.jsでSPAを作る
Spring Boot × Vue.jsでSPAを作る
イケてない開発チームがイケてる開発を始めようとする軌跡
イケてない開発チームがイケてる開発を始めようとする軌跡
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
ユーザーストーリー駆動開発で行こう。
ユーザーストーリー駆動開発で行こう。
FINAL FANTASY Record Keeperのマスターデータを支える技術
FINAL FANTASY Record Keeperのマスターデータを支える技術
Docker Tokyo
Docker Tokyo
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
それはYAGNIか? それとも思考停止か?
それはYAGNIか? それとも思考停止か?
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
ゲームエンジニアのためのデータベース設計
ゲームエンジニアのためのデータベース設計
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
今こそ知りたいSpring Batch(Spring Fest 2020講演資料)
脱RESTful API設計の提案
脱RESTful API設計の提案
マルチテナント化で知っておきたいデータベースのこと
マルチテナント化で知っておきたいデータベースのこと
Ähnlich wie 比較サイトの検索改善(SPA から SSR に変換)
Microsoft MVP が語る Azure 移行の勘所
Microsoft MVP が語る Azure 移行の勘所
Tetsuya Odashima
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
理弘 山崎
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
Akira Inoue
サーバーレスの今とこれから
サーバーレスの今とこれから
真吾 吉田
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
Shuji Watanabe
CSP パートナー向け向け Azure マネージド サービス プレイブック
CSP パートナー向け向け Azure マネージド サービス プレイブック
MPN Japan
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
gree_tech
BPStudy20121221
BPStudy20121221
Shinichiro Takezaki
開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリング
Amazon Web Services Japan
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
Keiichi Hashimoto
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Akira Inoue
タグ管理のススメ
タグ管理のススメ
Makoto Shimizu
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Hiromasa Oka
Interoperability of webassembly with javascript
Interoperability of webassembly with javascript
Takao Tetsuro
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築
sato165 @delab
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Shotaro Suzuki
Azure Search クックブック
Azure Search クックブック
Kazuyuki Miyake
Web App for Containers + MySQLでコンテナ対応したPHPアプリを作ろう!
Web App for Containers + MySQLでコンテナ対応したPHPアプリを作ろう!
Yoichi Kawasaki
Web App for Containers + MySQLでコンテナ対応したRailsアプリを作ろう!
Web App for Containers + MySQLでコンテナ対応したRailsアプリを作ろう!
Yoichi Kawasaki
Ähnlich wie 比較サイトの検索改善(SPA から SSR に変換)
(20)
Microsoft MVP が語る Azure 移行の勘所
Microsoft MVP が語る Azure 移行の勘所
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
Amazon EKS上の開発体験を最大化するプレビュー環境の作り方
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
.NET 6 と Blazor で作るクロスプラットフォームアプリ概要
サーバーレスの今とこれから
サーバーレスの今とこれから
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
プロビジョニングの今 ーフルマネージド・サービスを目指してー #cmdevio2016 #E
CSP パートナー向け向け Azure マネージド サービス プレイブック
CSP パートナー向け向け Azure マネージド サービス プレイブック
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
NuxtJS + REST APIで運用中サービスをNuxtJS + GraphQLに変更したことによる光と影
BPStudy20121221
BPStudy20121221
開発者におくるサーバーレスモニタリング
開発者におくるサーバーレスモニタリング
現場開発者視点で答えるWindows Azure
現場開発者視点で答えるWindows Azure
ASP.NET シングル ページ アプリケーション (SPA) 詳説
ASP.NET シングル ページ アプリケーション (SPA) 詳説
タグ管理のススメ
タグ管理のススメ
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Azure 高速サイトソリューション
Azure 高速サイトソリューション
Interoperability of webassembly with javascript
Interoperability of webassembly with javascript
検索エンジンを有効利用するWEBサイト構築
検索エンジンを有効利用するWEBサイト構築
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Application development with c#, .net 6, blazor web assembly, asp.net web api...
Azure Search クックブック
Azure Search クックブック
Web App for Containers + MySQLでコンテナ対応したPHPアプリを作ろう!
Web App for Containers + MySQLでコンテナ対応したPHPアプリを作ろう!
Web App for Containers + MySQLでコンテナ対応したRailsアプリを作ろう!
Web App for Containers + MySQLでコンテナ対応したRailsアプリを作ろう!
Mehr von gree_tech
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
gree_tech
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
gree_tech
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
gree_tech
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
gree_tech
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
gree_tech
Cloud Spanner をより便利にする運用支援ツールの紹介
Cloud Spanner をより便利にする運用支援ツールの紹介
gree_tech
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
gree_tech
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
gree_tech
海外展開と負荷試験
海外展開と負荷試験
gree_tech
翻訳QAでのテスト自動化の取り組み
翻訳QAでのテスト自動化の取り組み
gree_tech
組み込み開発のテストとゲーム開発のテストの違い
組み込み開発のテストとゲーム開発のテストの違い
gree_tech
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
gree_tech
データエンジニアとアナリストチーム兼務になった件について
データエンジニアとアナリストチーム兼務になった件について
gree_tech
シェアドサービスとしてのデータテクノロジー
シェアドサービスとしてのデータテクノロジー
gree_tech
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
gree_tech
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
gree_tech
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
gree_tech
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
gree_tech
基調講演 -グリーが目指すエンジニアのあり方、チームのあり方-
基調講演 -グリーが目指すエンジニアのあり方、チームのあり方-
gree_tech
Mehr von gree_tech
(20)
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
アナザーエデンPC版リリースへの道のり 〜WFSにおけるマルチプラットフォーム対応の取り組み〜
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表
アプリ起動時間高速化 ~推測するな、計測せよ~
アプリ起動時間高速化 ~推測するな、計測せよ~
長寿なゲーム事業におけるアプリビルドの効率化
長寿なゲーム事業におけるアプリビルドの効率化
Cloud Spanner をより便利にする運用支援ツールの紹介
Cloud Spanner をより便利にする運用支援ツールの紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現について
海外展開と負荷試験
海外展開と負荷試験
翻訳QAでのテスト自動化の取り組み
翻訳QAでのテスト自動化の取り組み
組み込み開発のテストとゲーム開発のテストの違い
組み込み開発のテストとゲーム開発のテストの違い
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
サーバーフレームワークに潜んでる脆弱性検知ツール紹介
データエンジニアとアナリストチーム兼務になった件について
データエンジニアとアナリストチーム兼務になった件について
シェアドサービスとしてのデータテクノロジー
シェアドサービスとしてのデータテクノロジー
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
「やんちゃ、足りてる?」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
法人向けメタバースプラットフォームの開発の裏側をのぞいてみた(仮)
基調講演 -グリーが目指すエンジニアのあり方、チームのあり方-
基調講演 -グリーが目指すエンジニアのあり方、チームのあり方-
比較サイトの検索改善(SPA から SSR に変換)
1.
比較サイトの検索改善 (SPAからSSRに変換) アウモ株式会社 サーバーサイドエンジニア 天野桂輔
2.
• 名前 • 天野
桂輔 • 担当 • サーバーサイドエンジニア • Ruby on Rails、Nuxt.js • 経歴 • 2013- グリー株式会社 • GREE Platform 部に所属 • 2020- アウモ株式会社 • 比較サイト、aRM※の開発担当 ※CRMツール 自己紹介 2
3.
aumoはご存知ですか? ⓘ Start presenting
to display the poll results on this slide.
4.
4 aumoってどんなサービス? 国内最大級のおでかけ情報サービス 1300万 500万 月間ユーザー数 アプリDL数 50万 掲載記事数
総口コミ数 50万 掲載メディア数 500
5.
5 aumoってどんなサービス? Web記事 SEOに最適化された コンテンツ制作 Web記事 Web記事 Web記事 位置情報、閲覧傾向を利用 レコメンドシステム App ユーザーの口コミを活用 おでかけCGM Web施設
6.
6 Web記事 カテゴリ 技術スタック プログラム言語 /
FW Ruby / Ruby on Rails インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web記事 SEOに最適化された コンテンツ制作 Web記事
7.
7 App Web記事 カテゴリ 技術スタック プログラム言語 /
FW Ruby / Ruby on Rails, Swift, Kotlin, Python インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB, FireStore Database 監視 Datadog, Papertrail, PagerDuty, Firebase 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch 機械学習 SageMaker, fastText コード管理 GitHub 位置情報、閲覧傾向を利用 レコメンドシステム App
8.
8 Web施設 Web記事 カテゴリ 技術スタック プログラム言語 /
FW Ruby / Ruby on Rails, Vue.js, Nuxt.js インフラ AWS データベース MySQL, Redis, Memcached, DynamoDB 監視 Datadog, Papertrail, PagerDuty, Sentry 分析 Bigquery, PoT ※社内分析ツール 検索エンジン ElasticSearch コード管理 GitHub Web施設 ユーザーの口コミを活用 おでかけCGM
9.
9 比較サイトとは? Web記事 Web記事 位置情報、閲覧傾向を利用 レコメンドシステム App ユーザーの口コミを活用 おでかけCGM Web施設 Web記事 SEOに最適化された コンテンツ制作 Web記事
10.
10 施設情報を提供するサービス 比較サイトとは? • 施設 • 基本情報、写真、口コミ •
検索 • ジャンル×エリア×カテゴリで施設を検索 ホテル グルメ レジャー・観光 チラシ・ショッピング
11.
11 構成 フロントエンド バックエンド ELB 同一インスタンスに搭載 サブドメイン
12.
12 当初のフロントエンド設計 UXを優先したSPAという方法を採用
13.
13 Single Page Application SPA ページ遷移することなく同一のページ内でコンテンツのみ切り替 え
サーバー ELB クライアント ①リクエスト ③レスポンス ②コンテンツ生 成 ④JSをブラウザで実行 ※2回目以降は差分のみリクエスト するため処理が早い
14.
14 SPA • メリット • 2回目以降は差分のデータのみを要求するため早い •
デメリット • 初回のページ読み込みが遅い Single Page Application
15.
15 比較サイトの成長に伴い、初回読み込みの遅延が顕著に。。。
16.
16 特に、施設の検索が遅い
17.
17 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
18.
18 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
19.
19 コンテンツ表示までの速度 検索の課題 • コンテンツ生成が非同期 • レンダリングに時間がかかる
20.
20 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
21.
21 検索エンジン最適化(SEO)対策 検索の課題 • コンテンツ生成が非同期で評価できない • Web記事はSEOに強い •
ノウハウを共有したい Web記事 SEOに最適化された コンテンツ制作 Web記事
22.
22 検索の課題 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 解決策:SPAからSSR(同期生成)に仕様変更
23.
23 Server Side Rendering SSR Webページのレンダリングをブラウザの代わりにサーバ上で行う サーバー ELB クライアント ①リクエスト ③レスポンス ②コンテンツ生 成 ・HTML生成 ・JS実行 ※
Node.js必要 ④コンテンツ表 示 ※画面の表示において有用な アプリケーションの機能
24.
24 SSR • メリット • 画面の表示が早い •
デメリット • サーバー側の負荷が高い • Node.js サーバー環境が必要 Server Side Rendering
25.
25 つまり
26.
26 SPAからSSR(同期生成)に仕様を変更することで • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 を改善できる
27.
27 仕様変更 • 検索処理 • Vue
components 内 mounted 時に実行 • しかも、ジャンル毎に似たような処理がある... mounted () { return this.search() }, search () { const page = this.$route.query.page || 1 : 検索パラメータ設定 : this.searchGourmetAction({ searchQuery, page }) // store経由でAPIリクエスト } 変更前
28.
28 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData() created() fetch() mounted() validate() ・初回アクセス時に実行される ・ストアに事前にデータを格納する ☆
page components のみ利用可能 ★ 全ての Vue components で利用可能 ・条件の設定やチェックを行う ・page リダイレクトに利用 ☆ 動的ルーティングのパラメータを検証 Vuex store component data ☆ page レンダリング前にデータを取得 ★ Vue インスタンスが生成されたときに呼び出される ★ Vue インスタンスが生成された後に呼び出される ★ DOM がレンダリングされたときに呼び出される
29.
29 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData() created() fetch() mounted() validate() DOM
がレンダリングされた後に検索
30.
30 Life Cycle NuxtJS nuxt ServerInit Route Middleware fetch() asyncData() created() fetch() mounted() validate() page
レンダリング前に検 索
31.
31 ① 検索処理の移行 仕様変更 • 検索処理 •
page components 内 fetch 時に実行 • page 全てに同様の処理を置くのは微妙なので... async fetch ({ app, route }) { return await Promise.all([ app.$categorySearch({ route }) ]) },
32.
32 ② 検索処理の共通化 仕様変更 • plugin
利用 • ジャンル毎の検索処理を共通化 export default ({ store, req }, inject) => { inject('categorySearch', async ({ route }) => { const page = route.query.page || 1 switch (process.host) { case process.env.GOURMET_DOMAIN: : 検索パラメータ設置 : await store.dispatch('gourmetSearch/searchGourmetAction', { searchQuery, page }) break : } }) } ※ ブラウザ環境に帰属するオブジェクト(window, document)にはアクセス不可
33.
33 ③ 検索ページ導線を変更 仕様変更 • 検索ページへの遷移処理を修正 •
<NuxtLink>によるページ遷移はクライアント側で実行 • ブラウザをハード再読み込みしてサーバーへリクエスト
34.
34 まとめ
35.
35 改善項目 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策
36.
36 改善項目 • コンテンツ表示までの速度 • リクエストからコンテンツ表示までの速度:55~62%⬇️ •
検索エンジン最適化(SEO)対策
37.
37 改善項目 • コンテンツ表示までの速度 • 検索エンジン最適化(SEO)対策 •
初回読み込み時に全てのコンテンツを生成
38.
38 改善項目 • コンテンツ表示までの速度 • リクエストからコンテンツ表示までの速度:55~62%⬇️ •
検索エンジン最適化(SEO)対策 • 初回読み込み時に全てのコンテンツを生成
39.
39 学び
40.
40 NuxtJS • SSR導入は困難ではない • Node.js
サーバー環境を準備 • Nuxt Life Cycle 理解 ※クライアント、サーバーの処理 • 同様の課題があるサービスに有用 • ページ単位で導入も可能
41.
41 引き続きより良いサービス作りを心掛けていきます これからもaumoを宜しくお願いしますmm
42.
42
Jetzt herunterladen