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.

アイスタイル特設サイトにおけるVue.jsの導入事例

3,346 views

Published on

Laravel/Vue.js勉強会 #8 オールスターズ

Published in: Software
  • Be the first to comment

アイスタイル特設サイトにおけるVue.jsの導入事例

  1. 1. アイスタイル特設サイトにおける Vue.jsの導入事例 Laravel/Vue.js勉強会#8 オールスターズ @KenjiroKubota
  2. 2. Profile. ~ 2015/08 istyle.inc 久保田 賢二朗 ● PHP(Laravel/Phalcon) ● JavaScript(Vue.js/Svelte) ● Scala kenjiro kubota @kubotak_public テクノロジー本部 R&D 部技術開発部 チーフエンジニア Laravel JP Conference 2019 副実行委員長 / RoppongiDesignersメンバー
  3. 3. PR. 株式会社アイスタイル istyle Inc. インターネットのコスメ情報ポータルサイト 「@cosme(アットコスメ)」 の開発・運営 コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty" に係る人や企業、個人事業主が活躍できるプラットフォームを作る。 アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。
  4. 4. Laravelの話題はありません。 sorry...
  5. 5. @cosme Beauty Day 2018 特設サイトでVue.jsを導入 国内最大級 1,900ブランド 35,000アイテム 20%ポイント還元 1日限りのキャンペーン 全国58局に対して 11/27-12/4まで CM放送
  6. 6. Why Vue.js ● 弊社での導入実績があった ● VueCLIでの開発環境構築のDXが良かった ● 社内的に横断して使えるVue.jsのコンポーネントライブラリ があること
  7. 7. 要件 ● CMによるスパイクアクセスが見込まれる ● ティザーサイトは11/1から公開 19日からは事前予約が可能 (当日商品販売が一部公開され、予約購入 すると当日以降に配送) ● 19日以降はキャンペーンページに表示され るアイテムが変化 ● 12/3-4(当日)は数時間置きにアイテム が変わる ● レスポンシブなサイトではないのでPC/SP テンプレートが別れる
  8. 8. Lambda REST API S3 EC2 Elasticsearch Vue.js/static CloudFront
  9. 9. ということは
  10. 10. 静的ファイル・HTMLの殆どに予めページ要素を入れて おく必要がある。 (目玉商品ページ・著名人のインタビューページ) そして、日時によって表示させるページ・要素は変わる
  11. 11. なるほど?
  12. 12. 日時をトリガーに日時別のディレクトリ をpublicディレクトリに格納する (上書き) 配信されるのはpublicディレクトリのみ
  13. 13. /201811191600 /201811191700 /201811201800 時間毎に似たようなデータが重複
  14. 14. 開発時にすべてのディレクトリを持つのは大変なので... <%=EJS%> パーツのテンプレート化をEJSで行い、gulpで日時ディレクトリ毎に配置されるようにタスク化
  15. 15. 苦労の跡
  16. 16. Vue.jsは・・・?
  17. 17. 検索ページ 商品詳細 ページ
  18. 18. 1. URLクエリパラメータから Lambdaで用意した商品検 索APIをコール 2. 検索一覧を表示 3. ページネーションあり
  19. 19. 1. URLクエリパラメータからLambdaで 用意した商品詳細APIをコール 2. カートに入れるボタンなどを生成
  20. 20. コンポーネント単位でインスタンス化
  21. 21. カートに入れる click 社内カートインAPI cookie token ロジックのあるボタンをVue.jsで楽々コンポーネント化
  22. 22. Desktop SmartPhone 表示(HTML構造)は異なるが出している内容はほぼ同じ -> ロジックをmixinにして共通化
  23. 23. 各デバイス別に書き出し package.json ※HTMLでは別途vue.runtime.jsを読み込む必要がある
  24. 24. トラブルなく無事終了...
  25. 25. 特設サイトは落ちてないよ!
  26. 26. まとめ ● Laravelの話がなくてすみません ● Vueの話もたいしてなくて更にすみません ● VueCLIでの開発環境構築のDXが高い。ESLint,Prettier,Jestなど も簡単に導入できて質の高いコンポーネント開発が行えた。 ● Vue.jsは大規模なNuxtからWebComponentsのようなパーツ単位 の使い方もできる幅広いFW
  27. 27. おまけ Vue.jsを利用した箇所はSPAっぽい使い方をしたのでmetaタグ周りの対 処ができなくてOGPの設定ができませんでした。 Lambdaでうまいこと対処できたかもしれません・・・
  28. 28. thanks:)

×