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.

LT.20 Wordpress x nuxt.jsで実現するSPA

551 views

Published on

※ 株式会社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/

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

LT.20 Wordpress x nuxt.jsで実現するSPA

  1. 1. GIGLT.20 JUST HACK IT
  2. 2. WordPressとNuxt.jsで実現する SPA Ryuichi Kataoka
  3. 3. 突然ですが こんなサイトないですか?
  4. 4. ローディングが長く読む気をなくすサイト
  5. 5. 本文にHTMLべた書きで運用しづらいサイト
  6. 6. WordPress + Gutenberg と Nuxt.jsで SPA化してしまおう!
  7. 7. Gutenbergと ?
  8. 8. WordPress 新しいエディタ。 とても編集しやすい。 Gutenbergと
  9. 9. 実際に使ってみましょう! Gutenbergと
  10. 10. Gutenbergと 2カラム(画像と本文を横に並べる)や YouTube 埋め込み等 お手 物だわ! HTMLとして挿入する機能も備わっている で HTMLべた書きできる! やったー!!! ん?(こいつ何 ために CMS使っているんだろう・・・
  11. 11. SPAにする メリット
  12. 12. 顧客体験 向上 ● インタラクティブなサイトが作りやすい (表現 自由度が向上) ● 少ない通信でコンテンツを読むことができる(滞在 時間 長いサイトに 最適) SPAにするメリット そ 1
  13. 13. 表示速度 高速化 ● キャッシュを最大限使用することができる ● 離脱率 低下を防ぐことができる (表示速度が1秒遅れるとコンバージョンが7%低 下する) SPAにするメリット そ 2
  14. 14. インフラ・エンジニア コスト削減 ● 従量課金系 クラウドサービス 費用を 抑えることができる ● Nuxt.jsを使用することでSPA 実装工数 比較的少なく実現できる SPAにするメリット そ 3
  15. 15. そもそもなぜ WordPress?
  16. 16. 全Webサイト 3分 1でWordPressを 使用されていると言われている 即ち、3分 1 サイトがコンテンツ という資産をWordPress上に蓄えられている そもそもなぜWordPress? - そ 1
  17. 17. コンテンツを運用される方に WordPressで 運用ノウハウがある 最近話題 Headless CMSで 運用するに 結構障壁がある そもそもなぜWordPress? - そ 2
  18. 18. そもそもなぜWordPress? - そ 3 単純に WordPressが 好きだから
  19. 19. SPA化へ 道
  20. 20. WP REST APIを非同期で取得 · 記事一覧データ or 記事データをWP REST APIから 取得し、Nuxt.jsで描画する · 一番実装 工数が少なく実現できる · SEO的な課題 ある SPA化へ 道 そ ①
  21. 21. アクションフックで静的にしてしまう · 記事やメニュー等各種変更時、アクションフックで JSON等にしてしまい、S3等に配置 · おそらく最速で表示することができるし、CDNとかに おけ さらにすごいことになる · WordPressに障害が発生してもとりあえずコンテンツ 見れる SPA化へ 道 そ ②
  22. 22. 今回 WP REST APIを非同期で取得する 方法でやっていきたいと思います☺ SPA化へ 道
  23. 23. WP REST API と ?
  24. 24. (例) 記事一覧を取得する場合 {site_url}/wp-json/wp/v2/posts  にアクセスするとJSONでデータが返ってくる WP REST APIと ?
  25. 25. 主なパラメータ(記事一覧) · per_page=(n) : n件を一覧で取得することができる · page=(n)  : nページ目 一覧を取得することができる         (per_pageとセットで使う) · _embed    : カテゴリー名を含めることができる · context=embed: 一覧 データ内にpost_contentを含めない WP REST APIと ?
  26. 26. 実際にみてみましょう! WP REST APIと ?
  27. 27. 実際に作って みよう!
  28. 28. 実際に作ってみよう! nuxt.config.jsに axiosを導入し、envにサイト URLを追加
 ← 非同期でデータ取ってくるすごいやつ ← 日付を扱いやすくしてくれる   すごいやつ 追加
  29. 29. 実際に作ってみよう! storeにindex.jsを追加
 これから作成するファ イルを読み込む Storeに登録
  30. 30. 実際に作ってみよう! storeにstate.jsを追加 state ページ間等で使える便利な変数 ← 投稿一覧データが入る ← ページャー 番号が入る ← 最初に一覧に訪れたかどうか   判別する
  31. 31. 実際に作ってみよう! storeにmutations.jsを追加 主に同期処理を担当しています ← 取得した記事一覧を登録 ← ページャー番号を登録 ← ページャー番号1つ次に送る(インクリメント) ← 記事一覧へ アクセスが初回かどうか
  32. 32. 実際に作ってみよう! storeにactions.jsを追加 主に非同期処理を担当しています
  33. 33. 実際に作ってみよう! pages/index.vueで実際に使ってみよう!
  34. 34. 実際に作ってみよう! データがセットされていることが確認できました!
  35. 35. 実際に作ってみよう! pages/index.vueに記事一覧を表示してみよう!
  36. 36. 実際に作ってみよう! 記事一覧が表示されました!
  37. 37. 実際に作ってみよう! pages/_postSlug/index.vueで詳細ページを作ろう!
  38. 38. 実際に作ってみよう! pages/_postSlug/index.vueで詳細ページを作ろう! ↓ タイトル ↑ 本文
  39. 39. 実際にみてみましょう! 実際に作ってみよう!
  40. 40. One more thing...
  41. 41. うち メディアを SPA化してみた
  42. 42. 実際にみてみましょう! うち メディアをSPA化してみた
  43. 43. 有難うございました🙏
  44. 44. Good is good. We provide opportunities to the SEKAI by fusing technology and ideas. テクノロジーとクリエイティブでセカイをより良くする        こと


×