Soumettre la recherche
Mettre en ligne
アイスタイル特設サイトにおけるVue.jsの導入事例
•
3 j'aime
•
5,382 vues
K
Kenjiro Kubota
Suivre
Laravel/Vue.js勉強会 #8 オールスターズ
Lire moins
Lire la suite
Logiciels
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
Kenjiro Kubota
アイスタイル特設サイトにおけるVue.js導入事例(再演)
アイスタイル特設サイトにおけるVue.js導入事例(再演)
Kenjiro Kubota
いまどき(これから)のPHP開発
いまどき(これから)のPHP開発
Kenjiro Kubota
カメラを利用したアプリを作って約1000人で遊んだ話
カメラを利用したアプリを作って約1000人で遊んだ話
Kenjiro Kubota
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
Kenjiro Kubota
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Takuya Tejima
Rpa community shizuoka lt daisuke hayashi
Rpa community shizuoka lt daisuke hayashi
Yoshihiro Suzuki
Recommandé
フロントエンドエンジニアが知るべきFirebaseの世界
フロントエンドエンジニアが知るべきFirebaseの世界
Kenjiro Kubota
アイスタイル特設サイトにおけるVue.js導入事例(再演)
アイスタイル特設サイトにおけるVue.js導入事例(再演)
Kenjiro Kubota
いまどき(これから)のPHP開発
いまどき(これから)のPHP開発
Kenjiro Kubota
カメラを利用したアプリを作って約1000人で遊んだ話
カメラを利用したアプリを作って約1000人で遊んだ話
Kenjiro Kubota
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
Kenjiro Kubota
Laravel管理画面ジェネレーター
Laravel管理画面ジェネレーター
Takuya Tejima
Next.js Storybook Driven Development
Next.js Storybook Driven Development
Takuya Tejima
Rpa community shizuoka lt daisuke hayashi
Rpa community shizuoka lt daisuke hayashi
Yoshihiro Suzuki
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
Pepperで翻訳ソフトを作ってみた
Pepperで翻訳ソフトを作ってみた
Forex Robotics Co., Ltd.
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
Hack+FuelPHPによるWebサービス開発
Hack+FuelPHPによるWebサービス開発
Yuji Otani
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
日常使っているツールを調べる ー Visual Studio Code について ー
日常使っているツールを調べる ー Visual Studio Code について ー
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
UiPath Test Suite の魅力とは?
UiPath Test Suite の魅力とは?
JunShiomi
Google VR - Google I/O Extended 報告会 2016 in 関西 -
Google VR - Google I/O Extended 報告会 2016 in 関西 -
Satoshi Noda
GovTechを加速させるAWS
GovTechを加速させるAWS
TomomiTakei
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Self-Driving System with IoT
Self-Driving System with IoT
Tier_IV
2012 09-26-scala
2012 09-26-scala
Taisuke Oe
DaydreamではじめるVR
DaydreamではじめるVR
Satoshi Noda
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
RLSにおけるプロダクト:プロジェクトマネジメント
RLSにおけるプロダクト:プロジェクトマネジメント
Itsuki Sakitsu
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
Contenu connexe
Tendances
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
PIXTA Inc.
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
PIXTA Inc.
Pepperで翻訳ソフトを作ってみた
Pepperで翻訳ソフトを作ってみた
Forex Robotics Co., Ltd.
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Monaca
Hack+FuelPHPによるWebサービス開発
Hack+FuelPHPによるWebサービス開発
Yuji Otani
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
Takao Sumitomo
日常使っているツールを調べる ー Visual Studio Code について ー
日常使っているツールを調べる ー Visual Studio Code について ー
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
UiPath Test Suite の魅力とは?
UiPath Test Suite の魅力とは?
JunShiomi
Google VR - Google I/O Extended 報告会 2016 in 関西 -
Google VR - Google I/O Extended 報告会 2016 in 関西 -
Satoshi Noda
GovTechを加速させるAWS
GovTechを加速させるAWS
TomomiTakei
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Kenichi Inoue
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Masakazu Muraoka
Self-Driving System with IoT
Self-Driving System with IoT
Tier_IV
2012 09-26-scala
2012 09-26-scala
Taisuke Oe
DaydreamではじめるVR
DaydreamではじめるVR
Satoshi Noda
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fumiya Sakai
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
Takashi Okamoto
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
Tendances
(20)
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
Pepperで翻訳ソフトを作ってみた
Pepperで翻訳ソフトを作ってみた
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
HTML5ハイブリッド アプリ開発の実践〜開発現場ですぐに活かせるコツを伝授〜
Hack+FuelPHPによるWebサービス開発
Hack+FuelPHPによるWebサービス開発
開発を効率的に進めるられるまでの道程
開発を効率的に進めるられるまでの道程
日常使っているツールを調べる ー Visual Studio Code について ー
日常使っているツールを調べる ー Visual Studio Code について ー
UiPath Test Suite の魅力とは?
UiPath Test Suite の魅力とは?
Google VR - Google I/O Extended 報告会 2016 in 関西 -
Google VR - Google I/O Extended 報告会 2016 in 関西 -
GovTechを加速させるAWS
GovTechを加速させるAWS
Monaca+Onsen UIで作るアプリ事始め
Monaca+Onsen UIで作るアプリ事始め
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Self-Driving System with IoT
Self-Driving System with IoT
2012 09-26-scala
2012 09-26-scala
DaydreamではじめるVR
DaydreamではじめるVR
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Fundamentals of Swift & Redux (ReduxとSwiftの組み合わせ)
Angularおじさんの1年
Angularおじさんの1年
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
PhoneGapでWebアプリをスマホアプリ化
PhoneGapでWebアプリをスマホアプリ化
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Similaire à アイスタイル特設サイトにおけるVue.jsの導入事例
RLSにおけるプロダクト:プロジェクトマネジメント
RLSにおけるプロダクト:プロジェクトマネジメント
Itsuki Sakitsu
Gartner summit 2016
Gartner summit 2016
アシアル株式会社
明快!Drupal と Acquia の強み
明快!Drupal と Acquia の強み
Masahiro Nishio
LaravelとNuxt.jsを業務で取り入れる際に得た知見
LaravelとNuxt.jsを業務で取り入れる際に得た知見
ssuserb6dacf
Dive into Origami Studio
Dive into Origami Studio
Hirokazu Egashira
デザイナーといい感じに プロトタイピング on Rails
デザイナーといい感じに プロトタイピング on Rails
Hisatake Ishibashi
LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
Isao Ebisujima
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
Kento Yoshimura
20191228_jaws-ug_okayama-2019_winter
20191228_jaws-ug_okayama-2019_winter
Takeshi Furusato
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
Nobuyasu Seki
Drupal 最新事情 June 2019
Drupal 最新事情 June 2019
Masahiro Nishio
VueとAWSAppSyncで始めるチャットアプリ開発
VueとAWSAppSyncで始めるチャットアプリ開発
Ryosuke Izumi
Smfl20201001
Smfl20201001
三井住友ファイナンス&リース デジタル開発室
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Kenji Hiranabe
Webアプリを公開するまで
Webアプリを公開するまで
SosukeYamada
Sparkコミュニティに飛び込もう!(Spark Meetup Tokyo 2015 講演資料、NTTデータ 猿田 浩輔)
Sparkコミュニティに飛び込もう!(Spark Meetup Tokyo 2015 講演資料、NTTデータ 猿田 浩輔)
NTT DATA OSS Professional Services
LODEO開発ストーリー
LODEO開発ストーリー
Tomohiro Shinden
Sap inside track2019tokyo_d3-caa-dev04_sap-graph
Sap inside track2019tokyo_d3-caa-dev04_sap-graph
Osamu TAMAKI
190717meetalive_vol10_session
190717meetalive_vol10_session
Kazuha Ogura
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Recruit Lifestyle Co., Ltd.
Similaire à アイスタイル特設サイトにおけるVue.jsの導入事例
(20)
RLSにおけるプロダクト:プロジェクトマネジメント
RLSにおけるプロダクト:プロジェクトマネジメント
Gartner summit 2016
Gartner summit 2016
明快!Drupal と Acquia の強み
明快!Drupal と Acquia の強み
LaravelとNuxt.jsを業務で取り入れる際に得た知見
LaravelとNuxt.jsを業務で取り入れる際に得た知見
Dive into Origami Studio
Dive into Origami Studio
デザイナーといい感じに プロトタイピング on Rails
デザイナーといい感じに プロトタイピング on Rails
LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
20191228_jaws-ug_okayama-2019_winter
20191228_jaws-ug_okayama-2019_winter
アジャイル開発のためのDatadog
アジャイル開発のためのDatadog
Drupal 最新事情 June 2019
Drupal 最新事情 June 2019
VueとAWSAppSyncで始めるチャットアプリ開発
VueとAWSAppSyncで始めるチャットアプリ開発
Smfl20201001
Smfl20201001
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Scrum-Fest-Sapporo-2021-Keynote-Our-Journey
Webアプリを公開するまで
Webアプリを公開するまで
Sparkコミュニティに飛び込もう!(Spark Meetup Tokyo 2015 講演資料、NTTデータ 猿田 浩輔)
Sparkコミュニティに飛び込もう!(Spark Meetup Tokyo 2015 講演資料、NTTデータ 猿田 浩輔)
LODEO開発ストーリー
LODEO開発ストーリー
Sap inside track2019tokyo_d3-caa-dev04_sap-graph
Sap inside track2019tokyo_d3-caa-dev04_sap-graph
190717meetalive_vol10_session
190717meetalive_vol10_session
「進化し続けるインフラ」のためのマルチアカウント管理
「進化し続けるインフラ」のためのマルチアカウント管理
Plus de Kenjiro Kubota
gRPC入門
gRPC入門
Kenjiro Kubota
Akkaとは。アクターモデル とは。
Akkaとは。アクターモデル とは。
Kenjiro Kubota
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
Kenjiro Kubota
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
Kenjiro Kubota
introducing vue-wait-component
introducing vue-wait-component
Kenjiro Kubota
HHVM/Hackを本番投入した話
HHVM/Hackを本番投入した話
Kenjiro Kubota
HackのAsyncCurlで死んだ話
HackのAsyncCurlで死んだ話
Kenjiro Kubota
LaravelでAPI定義を管理する
LaravelでAPI定義を管理する
Kenjiro Kubota
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
Kenjiro Kubota
Introducing hhvm hack-async
Introducing hhvm hack-async
Kenjiro Kubota
Responsableを使ったadr実装
Responsableを使ったadr実装
Kenjiro Kubota
土日でLineみたいなチャット作ってきた!
土日でLineみたいなチャット作ってきた!
Kenjiro Kubota
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
Kenjiro Kubota
Laravel aspectで関心の分離
Laravel aspectで関心の分離
Kenjiro Kubota
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
Kenjiro Kubota
Plus de Kenjiro Kubota
(15)
gRPC入門
gRPC入門
Akkaとは。アクターモデル とは。
Akkaとは。アクターモデル とは。
中・大規模でLaravelを導入するTips
中・大規模でLaravelを導入するTips
FirebaseとNuxtでLPを作って見た
FirebaseとNuxtでLPを作って見た
introducing vue-wait-component
introducing vue-wait-component
HHVM/Hackを本番投入した話
HHVM/Hackを本番投入した話
HackのAsyncCurlで死んだ話
HackのAsyncCurlで死んだ話
LaravelでAPI定義を管理する
LaravelでAPI定義を管理する
2017: A CSS Design Odyssey
2017: A CSS Design Odyssey
Introducing hhvm hack-async
Introducing hhvm hack-async
Responsableを使ったadr実装
Responsableを使ったadr実装
土日でLineみたいなチャット作ってきた!
土日でLineみたいなチャット作ってきた!
Viewを活用して複雑化と戦う
Viewを活用して複雑化と戦う
Laravel aspectで関心の分離
Laravel aspectで関心の分離
Laravelでfacadeを使わない開発
Laravelでfacadeを使わない開発
アイスタイル特設サイトにおけるVue.jsの導入事例
1.
アイスタイル特設サイトにおける Vue.jsの導入事例 Laravel/Vue.js勉強会#8 オールスターズ @KenjiroKubota
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.
PR. 株式会社アイスタイル istyle Inc. インターネットのコスメ情報ポータルサイト 「@cosme(アットコスメ)」 の開発・運営 コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty" に係る人や企業、個人事業主が活躍できるプラットフォームを作る。 アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。
4.
Laravelの話題はありません。 sorry...
5.
@cosme Beauty Day
2018 特設サイトでVue.jsを導入 国内最大級 1,900ブランド 35,000アイテム 20%ポイント還元 1日限りのキャンペーン 全国58局に対して 11/27-12/4まで CM放送
6.
Why Vue.js ● 弊社での導入実績があった ●
VueCLIでの開発環境構築のDXが良かった ● 社内的に横断して使えるVue.jsのコンポーネントライブラリ があること
7.
要件 ● CMによるスパイクアクセスが見込まれる ● ティザーサイトは11/1から公開 19日からは事前予約が可能 (当日商品販売が一部公開され、予約購入 すると当日以降に配送) ●
19日以降はキャンペーンページに表示され るアイテムが変化 ● 12/3-4(当日)は数時間置きにアイテム が変わる ● レスポンシブなサイトではないのでPC/SP テンプレートが別れる
8.
Lambda REST API S3 EC2 Elasticsearch Vue.js/static CloudFront
9.
ということは
10.
静的ファイル・HTMLの殆どに予めページ要素を入れて おく必要がある。 (目玉商品ページ・著名人のインタビューページ) そして、日時によって表示させるページ・要素は変わる
11.
なるほど?
12.
日時をトリガーに日時別のディレクトリ をpublicディレクトリに格納する (上書き) 配信されるのはpublicディレクトリのみ
13.
/201811191600 /201811191700 /201811201800 時間毎に似たようなデータが重複
14.
開発時にすべてのディレクトリを持つのは大変なので... <%=EJS%> パーツのテンプレート化をEJSで行い、gulpで日時ディレクトリ毎に配置されるようにタスク化
15.
苦労の跡
16.
Vue.jsは・・・?
17.
検索ページ 商品詳細 ページ
18.
1. URLクエリパラメータから Lambdaで用意した商品検 索APIをコール 2. 検索一覧を表示 3.
ページネーションあり
19.
1. URLクエリパラメータからLambdaで 用意した商品詳細APIをコール 2. カートに入れるボタンなどを生成
20.
コンポーネント単位でインスタンス化
21.
カートに入れる click 社内カートインAPI cookie token ロジックのあるボタンをVue.jsで楽々コンポーネント化
22.
Desktop SmartPhone 表示(HTML構造)は異なるが出している内容はほぼ同じ ->
ロジックをmixinにして共通化
23.
各デバイス別に書き出し package.json ※HTMLでは別途vue.runtime.jsを読み込む必要がある
24.
トラブルなく無事終了...
25.
26.
特設サイトは落ちてないよ!
27.
まとめ ● Laravelの話がなくてすみません ● Vueの話もたいしてなくて更にすみません ●
VueCLIでの開発環境構築のDXが高い。ESLint,Prettier,Jestなど も簡単に導入できて質の高いコンポーネント開発が行えた。 ● Vue.jsは大規模なNuxtからWebComponentsのようなパーツ単位 の使い方もできる幅広いFW
28.
おまけ Vue.jsを利用した箇所はSPAっぽい使い方をしたのでmetaタグ周りの対 処ができなくてOGPの設定ができませんでした。 Lambdaでうまいこと対処できたかもしれません・・・
29.
thanks:)
Télécharger maintenant