Download as PDF, PPTX
Uploaded byGIG inc.
LT.20 Wordpress x nuxt.jsで実現するSPA
※ 株式会社GIGでは毎月社内勉強会を実施しています GIG inc. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする。小さなチームからスタートした多くの先人達が、世界をより豊かなモノに変革してきました。通信、UX、デバイス、技術の変化と共に世界はまだまだ加速度的に変わります。 Good is good. いいものはいい。GIGは、関わったユーザーやクライアントが前に進める"きっかけ"をつくりつづけます。 ■ お問い合せ https://giginc.co.jp/contact/
LT.20 Wordpress x nuxt.jsで実現するSPA
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. Gutenbergと 2カラム（画像と本文を横に並べる）や YouTube 埋め込み等 お手物だわ！ HTMLとして挿入する機能も備わっている で HTMLべた書きできる！ やったー！！！ ん？（こいつ何 ために CMS使っているんだろう・・・
- 11.
- 12. 顧客体験 向上 ● インタラクティブなサイトが作りやすい （表現自由度が向上） ● 少ない通信でコンテンツを読むことができる（滞在 時間 長いサイトに 最適） SPAにするメリット そ １
- 13. 表示速度 高速化 ● キャッシュを最大限使用することができる ●離脱率 低下を防ぐことができる (表示速度が1秒遅れるとコンバージョンが7%低 下する) SPAにするメリット そ ２
- 14. インフラ・エンジニア コスト削減 ● 従量課金系クラウドサービス 費用を 抑えることができる ● Nuxt.jsを使用することでSPA 実装工数 比較的少なく実現できる SPAにするメリット そ ３
- 15.
- 16. 全Webサイト 3分 1でWordPressを 使用されていると言われている 即ち、3分1 サイトがコンテンツ という資産をWordPress上に蓄えられている そもそもなぜWordPress? - そ １
- 17. コンテンツを運用される方に WordPressで 運用ノウハウがある 最近話題 HeadlessCMSで 運用するに 結構障壁がある そもそもなぜWordPress? - そ ２
- 18. そもそもなぜWordPress? - そ３ 単純に WordPressが 好きだから
- 19.
- 20. WP REST APIを非同期で取得 ·記事一覧データ or 記事データをWP REST APIから 取得し、Nuxt.jsで描画する · 一番実装 工数が少なく実現できる · SEO的な課題 ある SPA化へ 道 そ ①
- 21. アクションフックで静的にしてしまう · 記事やメニュー等各種変更時、アクションフックで JSON等にしてしまい、S3等に配置 · おそらく最速で表示することができるし、CDNとかに おけさらにすごいことになる · WordPressに障害が発生してもとりあえずコンテンツ 見れる SPA化へ 道 そ ②
- 22. 今回 WP RESTAPIを非同期で取得する 方法でやっていきたいと思います☺ SPA化へ 道
- 23.
- 24.
- 25. 主なパラメータ（記事一覧） · per_page=(n) ：n件を一覧で取得することができる · page=(n) ： nページ目 一覧を取得することができる （per_pageとセットで使う） · _embed ： カテゴリー名を含めることができる · context=embed： 一覧 データ内にpost_contentを含めない WP REST APIと ？
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. Good is good. Weprovide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする こと