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
EMこそClaude Codeでコード調査しよう
shibayu36
0
440
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Cursorハンズオン実践!
eltociear
2
1.2k
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
マンガアプリViewerの大画面対応を考える
kk__777
0
330
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
860
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Why Our Code Smells
bkeepers
PRO
340
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Docker and Python
trallard
46
3.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
2
62
Embracing the Ebb and Flow
colly
88
4.9k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
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
ホントは配置までやりたかった 次の機会に。。。
おわり