Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Bower + WebComponents
Search
mex-ichikawa
October 24, 2014
Programming
0
38
Bower + WebComponents
WebComponentsのパッケージ化について。。。
mex-ichikawa
October 24, 2014
Tweet
Share
More Decks by mex-ichikawa
See All by mex-ichikawa
Three.js vs Unity5
mex_ichikawa
0
57
WebAudioAPIで(目的の)SE作れなかった話
mex_ichikawa
0
34
gulp + React
mex_ichikawa
2
420
Blob URL Scheme
mex_ichikawa
0
550
Other Decks in Programming
See All in Programming
Le côté obscur des IA génératives
pascallemerrer
0
140
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
Cursorハンズオン実践!
eltociear
2
1.1k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
1k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
ALL CODE BASE ARE BELONG TO STUDY
uzulla
18
3.4k
Software Architecture
hschwentner
6
2.3k
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
Swift Concurrency - 状態監視の罠
objectiveaudio
2
520
Go言語はstack overflowの夢を見るか?
logica0419
0
270
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
350
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Gamification - CAS2011
davidbonilla
81
5.5k
Designing for Performance
lara
610
69k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Docker and Python
trallard
46
3.6k
Bash Introduction
62gerente
615
210k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Optimizing for Happiness
mojombo
379
70k
Code Reviewing Like a Champion
maltzj
526
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
Bower + WebComponents @ichikawa Tsukiji.front - 2014/10/24
パッケージ管理ツール
• Component - https://github.com/componentjs/component • Bower - http://bower.io/ • RequireJS
- http://requirejs.org/ • Browserify - http://browserify.org/
• Component - https://github.com/componentjs/component • Bower - http://bower.io/ • RequireJS
- http://requirejs.org/ • Browserify - http://browserify.org/
普段使ってるBowerで!
とりあえずColorPickerを作る
ソースをコンポーネント化
ソースをコンポーネント化
まずは、 シンプルなテンプレコード で実行
createdCallback: { value: function(){ var shadowRoot = this.createShadowRoot(); var template
= document.querySelector('#nameOfTemplate'); shadowRoot.appendChild(template.content.cloneNode(true)); } }
templateが読めない。。。
//global var currentDocument = document.currentScript.ownerDocument; ... createdCallback: { value: function(){
var shadowRoot = this.createShadowRoot(); var template = currentDocument.querySelector('#nameOfTemplate'); shadowRoot.appendChild(template.content.cloneNode(true)); } }
読めるようになった!
作成コードをはめ込む
• テンプレートがShadowRoot内に入るのでセレクタ注意 • 画像などのアセットパスの扱いをどうするか、今回は埋め込んだ
githubにpush
bowerに登録 bower register [パッケージ名] [パッケージリポジトリパス ]
別プロジェクトで利用 DEMO
ホントは配置までやりたかった 次の機会に。。。
おわり