Movatterモバイル変換
[0]
ホーム
URL:
画像なし
夜間モード
Download free for 30 days
Sign in
Upload
Language (EN)
Support
Business
Mobile
Social Media
Marketing
Technology
Art & Photos
Career
Design
Education
Presentations & Public Speaking
Government & Nonprofit
Healthcare
Internet
Law
Leadership & Management
Automotive
Engineering
Software
Recruiting & HR
Retail
Sales
Services
Science
Small Business & Entrepreneurship
Food
Environment
Economy & Finance
Data & Analytics
Investor Relations
Sports
Spiritual
News & Politics
Travel
Self Improvement
Real Estate
Entertainment & Humor
Health & Medicine
Devices & Hardware
Lifestyle
Change Language
Language
English
Español
Português
Français
Deutsche
Cancel
Save
Submit search
EN
KK
Uploaded by
Kenjiro Kubota
PDF, PPTX
944 views
アイスタイル特設サイトにおけるVue.js導入事例(再演)
Business.vue vol.1
Engineering
◦
Read more
0
Save
Share
Embed
Embed presentation
Download
Download as PDF, PPTX
1
/ 36
2
/ 36
3
/ 36
4
/ 36
5
/ 36
6
/ 36
7
/ 36
8
/ 36
9
/ 36
10
/ 36
11
/ 36
12
/ 36
13
/ 36
14
/ 36
15
/ 36
16
/ 36
17
/ 36
18
/ 36
19
/ 36
20
/ 36
21
/ 36
22
/ 36
23
/ 36
24
/ 36
25
/ 36
26
/ 36
27
/ 36
28
/ 36
29
/ 36
30
/ 36
31
/ 36
32
/ 36
33
/ 36
34
/ 36
35
/ 36
36
/ 36
Recommended
PDF
フロントエンドエンジニアが知るべきFirebaseの世界
by
Kenjiro Kubota
PDF
アイスタイル特設サイトにおけるVue.jsの導入事例
by
Kenjiro Kubota
PDF
カメラを利用したアプリを作って約1000人で遊んだ話
by
Kenjiro Kubota
PDF
いまどき(これから)のPHP開発
by
Kenjiro Kubota
PDF
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
by
Kenjiro Kubota
PDF
Mobilitydev2019 10 31_slideshare
by
Tier_IV
PDF
GovTechを加速させるAWS
by
TomomiTakei
PDF
Pepperで翻訳ソフトを作ってみた
by
Forex Robotics Co., Ltd.
PPTX
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
by
Kento Yoshimura
PDF
GAOGAO事業のご紹介
by
Takuya Tejima
PDF
Self-Driving System with IoT
by
Tier_IV
PDF
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
by
Masayoshi Ootsuka
PDF
PepperとWatson音声関連API
by
Forex Robotics Co., Ltd.
PDF
日常使っているツールを調べる ー Visual Studio Code について ー
by
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
PDF
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
by
PIXTA Inc.
PDF
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
by
PIXTA Inc.
PDF
SoftLayerで始めるデジタルマーケティング
by
Kohei Nishikawa
PPTX
Rpa community shizuoka lt daisuke hayashi
by
Yoshihiro Suzuki
PDF
Monaca+Onsen UIで作るアプリ事始め
by
Kenichi Inoue
PDF
Val研究所
by
Nihei Tsukasa
PDF
Monacaソリューションセミナー20160621
by
アシアル株式会社
PDF
Google VR - Google I/O Extended 報告会 2016 in 関西 -
by
Satoshi Noda
PDF
Glit platform紹介資料 ver0.2
by
CaratInc
PPTX
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
by
Tier_IV
PDF
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
by
Tier_IV
PDF
GAOGAOゲート2期生サービス概要資料
by
Takuya Tejima
PPTX
rakumoソーシャルスケジューラーの紹介
by
Gigei rakumo
PPTX
自動運転技術を活用した運転技能教習システムのご紹介
by
Tier_IV
PDF
gRPC入門
by
Kenjiro Kubota
PDF
Akkaとは。アクターモデル とは。
by
Kenjiro Kubota
More Related Content
PDF
フロントエンドエンジニアが知るべきFirebaseの世界
by
Kenjiro Kubota
PDF
アイスタイル特設サイトにおけるVue.jsの導入事例
by
Kenjiro Kubota
PDF
カメラを利用したアプリを作って約1000人で遊んだ話
by
Kenjiro Kubota
PDF
いまどき(これから)のPHP開発
by
Kenjiro Kubota
PDF
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
by
Kenjiro Kubota
PDF
Mobilitydev2019 10 31_slideshare
by
Tier_IV
PDF
GovTechを加速させるAWS
by
TomomiTakei
PDF
Pepperで翻訳ソフトを作ってみた
by
Forex Robotics Co., Ltd.
フロントエンドエンジニアが知るべきFirebaseの世界
by
Kenjiro Kubota
アイスタイル特設サイトにおけるVue.jsの導入事例
by
Kenjiro Kubota
カメラを利用したアプリを作って約1000人で遊んだ話
by
Kenjiro Kubota
いまどき(これから)のPHP開発
by
Kenjiro Kubota
PHP,Go,Elasticsearchによる、@cosmeを5倍速くする取り組み
by
Kenjiro Kubota
Mobilitydev2019 10 31_slideshare
by
Tier_IV
GovTechを加速させるAWS
by
TomomiTakei
Pepperで翻訳ソフトを作ってみた
by
Forex Robotics Co., Ltd.
What's hot
PPTX
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
by
Kento Yoshimura
PDF
GAOGAO事業のご紹介
by
Takuya Tejima
PDF
Self-Driving System with IoT
by
Tier_IV
PDF
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
by
Masayoshi Ootsuka
PDF
PepperとWatson音声関連API
by
Forex Robotics Co., Ltd.
PDF
日常使っているツールを調べる ー Visual Studio Code について ー
by
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
PDF
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
by
PIXTA Inc.
PDF
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
by
PIXTA Inc.
PDF
SoftLayerで始めるデジタルマーケティング
by
Kohei Nishikawa
PPTX
Rpa community shizuoka lt daisuke hayashi
by
Yoshihiro Suzuki
PDF
Monaca+Onsen UIで作るアプリ事始め
by
Kenichi Inoue
PDF
Val研究所
by
Nihei Tsukasa
PDF
Monacaソリューションセミナー20160621
by
アシアル株式会社
PDF
Google VR - Google I/O Extended 報告会 2016 in 関西 -
by
Satoshi Noda
PDF
Glit platform紹介資料 ver0.2
by
CaratInc
PPTX
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
by
Tier_IV
PDF
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
by
Tier_IV
PDF
GAOGAOゲート2期生サービス概要資料
by
Takuya Tejima
PPTX
rakumoソーシャルスケジューラーの紹介
by
Gigei rakumo
PPTX
自動運転技術を活用した運転技能教習システムのご紹介
by
Tier_IV
Intelligent Enterprise 実現に向けた拡張開発の必要性 ~ SAP Cloud Platform Extension Factory ~
by
Kento Yoshimura
GAOGAO事業のご紹介
by
Takuya Tejima
Self-Driving System with IoT
by
Tier_IV
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
by
Masayoshi Ootsuka
PepperとWatson音声関連API
by
Forex Robotics Co., Ltd.
日常使っているツールを調べる ー Visual Studio Code について ー
by
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
SnapmartにおけるCameraRollから写真の複数枚アップロードの実装
by
PIXTA Inc.
新卒入社のみなさまへ30代が贈る20代のキャリア戦略入門
by
PIXTA Inc.
SoftLayerで始めるデジタルマーケティング
by
Kohei Nishikawa
Rpa community shizuoka lt daisuke hayashi
by
Yoshihiro Suzuki
Monaca+Onsen UIで作るアプリ事始め
by
Kenichi Inoue
Val研究所
by
Nihei Tsukasa
Monacaソリューションセミナー20160621
by
アシアル株式会社
Google VR - Google I/O Extended 報告会 2016 in 関西 -
by
Satoshi Noda
Glit platform紹介資料 ver0.2
by
CaratInc
自動運転の会社でなぜデータ基盤が必要なのか?そこで今やっていること
by
Tier_IV
Tier Ⅳ Tech Meetup #2 - 自動運転を作るのはCloudシステムの集合体?? 活用技術を大解剖 -
by
Tier_IV
GAOGAOゲート2期生サービス概要資料
by
Takuya Tejima
rakumoソーシャルスケジューラーの紹介
by
Gigei rakumo
自動運転技術を活用した運転技能教習システムのご紹介
by
Tier_IV
More from Kenjiro Kubota
PDF
gRPC入門
by
Kenjiro Kubota
PDF
Akkaとは。アクターモデル とは。
by
Kenjiro Kubota
PDF
中・大規模でLaravelを導入するTips
by
Kenjiro Kubota
PDF
FirebaseとNuxtでLPを作って見た
by
Kenjiro Kubota
PDF
introducing vue-wait-component
by
Kenjiro Kubota
PDF
HHVM/Hackを本番投入した話
by
Kenjiro Kubota
PDF
HackのAsyncCurlで死んだ話
by
Kenjiro Kubota
PDF
LaravelでAPI定義を管理する
by
Kenjiro Kubota
PDF
2017: A CSS Design Odyssey
by
Kenjiro Kubota
PDF
Introducing hhvm hack-async
by
Kenjiro Kubota
PDF
Responsableを使ったadr実装
by
Kenjiro Kubota
PDF
土日でLineみたいなチャット作ってきた!
by
Kenjiro Kubota
PDF
Viewを活用して複雑化と戦う
by
Kenjiro Kubota
PDF
Laravel aspectで関心の分離
by
Kenjiro Kubota
PDF
Laravelでfacadeを使わない開発
by
Kenjiro Kubota
gRPC入門
by
Kenjiro Kubota
Akkaとは。アクターモデル とは。
by
Kenjiro Kubota
中・大規模でLaravelを導入するTips
by
Kenjiro Kubota
FirebaseとNuxtでLPを作って見た
by
Kenjiro Kubota
introducing vue-wait-component
by
Kenjiro Kubota
HHVM/Hackを本番投入した話
by
Kenjiro Kubota
HackのAsyncCurlで死んだ話
by
Kenjiro Kubota
LaravelでAPI定義を管理する
by
Kenjiro Kubota
2017: A CSS Design Odyssey
by
Kenjiro Kubota
Introducing hhvm hack-async
by
Kenjiro Kubota
Responsableを使ったadr実装
by
Kenjiro Kubota
土日でLineみたいなチャット作ってきた!
by
Kenjiro Kubota
Viewを活用して複雑化と戦う
by
Kenjiro Kubota
Laravel aspectで関心の分離
by
Kenjiro Kubota
Laravelでfacadeを使わない開発
by
Kenjiro Kubota
アイスタイル特設サイトにおけるVue.js導入事例(再演)
1.
アイスタイル特設サイトにおけるVue.jsの導入事例(再演)Business.vue vol.1 @kubotak_public
2.
本日予定していた内容を変更してお届けしております。
3.
Profile. ~ 2015/08
istyle.inc久保田 賢二朗● PHP(Laravel/Phalcon)● JavaScript(Vue.js/Svelte)● Go● Scalakenjiro kubota @kubotak_publicテクノロジー本部 R&D 部技術開発部 チーフエンジニアLaravel JP Conference 2020 コアスタッフ / RoppongiDesignersメンバー
4.
PR.株式会社アイスタイルistyle Inc.インターネットのコスメ情報ポータルサイト「@cosme(アットコスメ)」の開発・運営コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty"に係る人や企業、個人事業主が活躍できるプラットフォームを作る。アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。
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+API GateWayS3EC2 ElasticsearchVue.js/staticCloudFront
9.
Lambda+API GateWayS3EC2 ElasticsearchVue.js/staticCloudFront
10.
静的ファイル・HTMLの殆どに予めページ要素を入れておく必要がある。(目玉商品ページ・著名人のインタビューページ)そして、日時によって表示させるページ・要素は変わる動的じゃないページがあり、かつ、各ページの公開日が違う
11.
なるほど?
12.
静的なページを動的に時限式に出し分けるためには?
13.
日時をトリガーに日時別のディレクトリをpublicディレクトリに格納する(上書き)配信されるのはpublicディレクトリのみ
14.
/201811191600 /201811191700 /201811201800時間毎に似たようなデータが重複
15.
開発時にすべてのディレクトリ、HTMLを持つのは大変なので...<%=EJS%>パーツのテンプレート化をEJSで行い、gulpで日時ディレクトリ毎に配置されるようにタスク化
16.
何日の何時に配信されるHTMLなのかを定義されたJSONファイル<%=EJS%> JSONJSON定義に基づいてディレクトリにHTMLを格納具体的なGulpタスクの処理の流れ
17.
苦労の跡
18.
Vue.jsは・・・?
19.
検索ページ 商品詳細ページ
20.
1. URLクエリパラメータからLambdaで用意した商品検索APIをコール2. 検索一覧を表示3.
ページネーションあり
21.
1. URLクエリパラメータからLambdaで用意した商品詳細APIをコール2. カートに入れるボタンなどを生成
22.
コンポーネント単位でインスタンス化
23.
カートに入れるclick社内カートインAPIcookietokenロジックのあるボタンをVue.jsで楽々コンポーネント化
24.
Desktop SmartPhone表示(HTML構造)は異なるが出している内容はほぼ同じ ->
ロジックをmixinにして共通化
25.
各デバイス別に書き出しpackage.json※HTMLでは別途vue.runtime.jsを読み込む必要がある
26.
コンポーネントのテスト
27.
APIのレスポンス内容に応じて表示文言が変わる1. まもなく販売開始!2. 予約する3.
ご好評につきご予約分は終了しました4. まもなく販売開始!5. 購入する6. 在庫残りわずか!! 購入する7. ご好評につき完売しました@vue/test-utilsを利用してコンポーネントの出し分けテストが出来た
28.
Jest Mockを利用してAPIレスポンスをモック
29.
コンポーネント生成(VuexがAPIフェッチを行い、モックレスポンスを取得)
30.
レスポンスによって画面の文字が正しく出し分けられるか確認
31.
トラブルなく無事終了...?
33.
特設サイトは落ちてないよ!
34.
まとめ● VueCLIでの開発環境構築のDXが高い。ESLint,Prettier,Jestなども簡単に導入できて質の高いコンポーネント開発が行えた。● Vue.jsは大規模なNuxtからWebComponentsのようなパーツ単位の使い方もできる幅広いFW
35.
おまけVue.jsを利用した箇所はSPAっぽい使い方をしたのでmetaタグ周りの対処ができなくてOGPの設定ができませんでした。Lambdaでうまいこと対処できたかもしれません・・・
36.
thanks:)
Download
[8]
ページ先頭
©2009-2025
Movatter.jp