Create reusable elements with ease -- Polycasts #14YouTube↗  IA↗(long shot)
Science & Technology  17.7K views 149 likes 1 dislikes   21 Apr 2015
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
[MÜZİK ÇALIYOR]
やあ お元気ですか？ ロブ・ドッドソンです
Herkese merhaba.
今日の Polycast では 再利用要素の記述で
Nasılsınız? Ben, Rob Dodson. Bugün, Polycast'ta tekrar kullanılabilir öğeler için
とても重要なテクニックをお見せします
çok önemli bir teknik göstereceğim.
Polymer の便利な点についても 沢山やりますよ
Ayrıca yanımda bir sürü hediye Polymer ürünü var.
でも それらに触れて理解するように 最後までそのまま見ていて下さいね
Bölümün sonuna kadar bir yere ayrılmayın.
まず 最初に 再利用コンポーネント についてお話ししましょう
Böylece, bu hediyeleri nasıl alabileceğinizi öğrenebilirsiniz. Şimdi konumuz dönelim
本日お話しするのは Polymer 0.8 と 0.5 の両方に適用される―
ve tekrar kullanılabilir bileşenler hakkında konuşalım. Pekala. Bugün, hakkında konuşacağım teknik, hem Polymer 0.8 hem de 0.5'e
とても重要なテクニックです
uygulanabiliyor.
これは 初心者が 間違いやすいことの１つです
Bu teknik, yeni başlayanların çoğu tarafından yanlış anlaşılıyor.
なぜなら 本当に紛らわしいからです
Bu doğal aslında, çünkü gerçekten karışık bir teknik.
たとえ話としてですが フォルダー構成があって
Size bir senaryo sunayım.
仲間と共有したい１つの要素を 作成しているとします
Elimizde bir dosya yapısı var diyelim. Arkadaşlarla paylaşmak için bir öğe yaratmak istiyoruz.
そして これまでで プロジェクトはこんな風です
Şu ana kadar projemizin görünümü de bu.
まず tiny-badge.html があり
Elimizde tiny.badge.html var.
これが作ろうとしているタグです
Bu, oluşturmak istediğimiz etiket.
この中に bower_components の ディレクトリがあります
Buranın içinde, bower_components rehberi var.
その中には polymer.html が入っています
Şuranın içinde de polymer.html var.
さて tiny-badge.html の定義を開くと
Eğer tiny.badge.html tanımını açarsam,
上のここで
bunu yukarıda göreceksiniz. İlk yapacağım şey,
最初に行なうのは polymer.html のインポートです
polymer.html'yi içe aktarmak olacak.
それを bower_components ディレクトリからインポートします
bower_components rehberinden içe aktarıyorum.
ですから 基本的には 要素の定義中で
Esas olarak, bower_component yolunu, elemanlar tanımıma
bower_components パスを ハードコードしています
gömüyorum.
私は tiny-badge の見た目が好きで 皆と共有したいとします
Diyelim ki "tiny-badge"in görünüşünde memnunum.
ですから tiny-padge を Bower レジストリに公開し
Bunu dünya ile paylaşmak istiyorum. Bunun için, Bower kayıt defterinde bunu yayınlıyorum.
そのカッコよさを宣伝すると 皆がインストールします
Herkese ne kadar harika olduğunu anlatıyorum
では 彼らのプロジェクトが どう見えるか見てみましょう
ve tüm arkadaşlarım gidip bunu kuruyor. Arkadaşlarımın projelerinin neye benzediğine bakalım.
友達が tiny-badge をインストールすると
Arkadaşım tiny-badge'yi kurdu.
それは bower_components ディレクトリの中に行き着きます
Kendi bower_components rehberinin içinde yerini alıyor.
ですから polymer と tiny-badge は兄弟として
Şimdi Polymer'e ve tiny-badge'ye
bower_components ディレクトリに 入っています
bower_components rehberinde kardeşler olarak sahipler.
でも 待てよ
Fakat bir saniye!
tiny-badge.html 定義を開くと
tiny_badge.html tanımını açarsam,
ハードコードされた bower_components パスは
gömülü bower_components yolunu
ここにした筈ですよね
tekrar çağıracak.
ですから この要素は兄弟を― bower_components ディレクトリ の中に 予定して
Yani bu öğe bir kardeşi, yani, bower_components
このレベルと同等に存在していると 予想していますが
Bu aşamada var olan bir şeyi bekliyor.
実は違いますよね？
Ama bunu yapamaz, değil mi?
友人は私たちのコンポーネントを インストールしたので
Şimdi arkadaşımın bower_components yapısı içerisindeyiz
これは友人の bower_components 構成の中なのです
çünkü bizim bileşenlerimiz yükledi.
ですから ここにあるパスは 404 を返してきます
Buradaki yol, bize kocaman bir 404 verecek.
そして 友人は超嫌な気分になります
Arkadaşımız da baya bir hayal kırıklığına uğrayacak.
さて これを変えられます
Bunu değiştirebiliriz.
完璧に修正できます
Tamamen düzeltebiliriz.
このパスを相対パスに変えれば いいだけです
Bu yolu, göreli bir yola çevirebiliriz.
私たちはこれを canonical パスと呼んでいます
Buna bazen kanonik yol deriz.
この考えはこうです もし フロントエンド パッケージマネージャーを使ったら
Ön uç paket yöneticisi kullanıyorsanız,
全てのパッケージは兄弟になるのです
tüm paketleriniz kardeş olacaktır.
そこで ../ の相対パスを使うと
Yani nokta-nokta-kesme işareti göreli yolu kullanırsak,
基本的に「 私は兄弟ディレクトリの１つの 中のものを参照してるよ 」となります
kardeş rehberlerden birindeki bir şeye başvurduğum anlamına gelir.
それが これを canonical と呼ぶ理由です
Bu yüzden, buna kanonik yol diyoruz
なぜなら あなたは いつも 依存性にとってある種の兄弟ですから
çünkü her zaman bağımlılarınızı kardeş haline getiriyorsunuz.
でも ちょっと待って
Fakat bir saniye durun.
少し 巻き戻しましょう
Biraz geri saralım.
これは私たちオリジナルの プロジェクト構造です
Bu, orijinal proje yapımız.
これが コンポーネントを 開発していった方法です
Bileşenlerimizi böyle geliştiriyorduk.
そして ハードコードされた bower_components パスを
bower_components yolunu gömmemizin nedeni,
採用した全理由は
üzerinde çalışırken,
作業中にこれを プレビューする必要があるからです
bu şeyin ön görüntülemesini yapmaya ihtiyacımız olmasıydı.
もし これを ここの canonical パスに変えると
Bunu kanonik yola çevirirsek,
要素をプレビューできません
elemanımızın ön görüntülemesini yapamayız.
ですから 今度は 実に奇妙なジレンマに陥ります
Burada bir ikilemle karşı karşıya kaldık.
つまり 作業中にコンポーネントを プレビューできるようにするか
Ya çalışırken bileşenimizin ön görüntülemesini yapacağız
一度 作業を終わらせてから他の人と それを共有できるようにするかとね
ya da bittiğinde insanlarla paylaşabilecek durumda olacağız.
そして これはあまりよくないジレンマです
Bu da aslında pek hoş bir ikilem değil.
なので 昨年は 記事にまとめて
Geçen yıl, akıllı rehber yapısını
実に巧妙なディレクトリ構造と Bower 設定を説明し
ve paylaşılabilir bir eleman geliştirmek ve ön görüntülemesini
共有可能な要素を開発とプレビューに 使えるようにしました
yapmak için kullanabileceğiniz, Bower konfigürasyonu hackini
これからお見せするのは
açıklayan bir makale yayınladık.
Polymer チームの一員によって 作成された新ツールで
Şimdi göstereceğim şey, birçok zorluğu ortadan kaldıran ve öğenizi akıllı bir şekilde
そういった不具合を取り除き まともに要素を開発できるものです
geliştirmenize imkan verecek, Polymer ekibinin bir üyesinin geliştirdiği yeni bir araç.
では 見てみましょう
Haydi bir bakalım.
これが 作成する要素です
Oluşturacağımız öğe bu.
再び 一種の tiny-badge 要素ですね
Bu da bir çeşit tiny-badge öğesidir.
これはプロジェクトにリストのように 一線に投げ込み
Bunu da, projenize ekleyeceğiniz, e-mail geldiğinde vb. uyarı gönderen
email や注意事項が 積み重なっているのを知らせるものだと
bir liste gibi ya da ona benzer bir şey gibi
思ってください
düşünebilirsiniz.
そして 最初に行うことは bower.json ファイルを作ることです
Yapacağım ilk şey, bir bower.json dosyası oluşturmak olacak.
要素に名前を付けます
Buradaki öğeye bir ad vereceğim.
そして いくつかの 依存性を入れ
Bazı bağımlıları dahil edeceğim.
webcomponents.js と polymer を 求めます
Çünkü webcomponentsjs ve polymeri istiyorum.
ターミナルで Bower のインストールを実行し
Terminalde, tüm bu bağımlıları çekmek için
これらの依存性を全て取り込みます
bower kurulumunu yürüteceğim.
次にすることは polyserve という ライブラリをインストールすることです
Sonra, polyserve adlı kütüphaneyi kuracağım.
ですから npm コマンドを使います
Bu yüzden "npm" komutunu kullanıyorum.
polyserve を取り込むために グローバルインストールを行います
Polyserve'yi çekmek için küresel kurulum yapacağım.
polyserve とは基本的に canonical パスの URL を使って 要素を書くことができるサーバーです
Polyserve, kanonik URL'lerini kullanarak öğenizi yazmanızı sağlayan
また それらの URL を傍受し ローカルの
bir sunucudur. URL'leri keser ve bunları yerel
bower_components ディレクトリから その URL を配信します
bower_components rehberinden sunar.
それは Polymer チームの一員が 作成したもので
Bu, Polymer ekibinin bir üyesi tarafından yaratıldı.
同じコンポーネントのプレビューと共有が できないジレンマを
Amaç, aynı bileşkeyi ön görüntüleyememe ve paylaşmama
回避しようとするものです
sorununa çare bulmak.
では polyserve サーバーを 起動しましょう
Polyserve sunucusunu çalıştıracağım.
すると この port 8080 の 画面から始まります
8080 portunda başladığını göreceksiniz.
localhost:8080/ components/tinybadge というパスから
Tiny-badge'yi sunduğu yol ise:
tiny-badge を配信していますね
localhost:8080/components/tinybadge.
プロジェクトで まず tiny-badge.html ファイルを作成します
Projemde, bir tiny-badge HTML dosyası yaratacağım.
最初に行うことは Polymer 用の定義をインポートすることです
İlk yapacağım şey, Polymer tanımını içe aktarmak olacak.
それを行う時私が canonical パスを 使うのに注意してください
Bunu yaparken kanonik yolu kullandığıma
それから tiny-badge の
dikkat edin. Kaydettiğim isim ile eşleşen bir ID ile birlikte
dom-module に 登録した名前と 一致する ID をつけます
tiny-badge'ye bir dom-modülü vereceğim.
それから content 要素を ここのテンプレートの中に入れます
Şablonun içine bir içerim elemanı atacağım.
最後に Polymer コンストラクタを 呼び出して
Son olarak da Polymer kurucusunu çağıracağım
tiny-badge の名前の中に渡します
ve tiny-badge'yi geçireceğim.
style タグも入れます
Bir tarz etiketi de dahil edeceğim.
これで tiny-badge に ちょっとした見た目と雰囲気をつけます
Bu, tiny-badge'ye biraz görünüm ve his katacak.
前回お話したように host セレクタを
Önceki bölümlerde söz ettiğim host seçiciyi
使っていますよ
kullandığımı göreceksiniz.
この方法だと要素自身を対象にできます
Böylece, elemanın kendisini hedef alıyorum.
demo.html ファイルに移って まず webcomponents-lite.js 用の script タグを入れます
Demo HTML dosyamda, webcomponents-lite.js için bir betik etiketi dahil ederek başlayacağım.
それから tiny-badge 要素の定義用に import の HTML を記述します
Sonra, tiny-badge elemanı tanımı için, bir HTML aktarımı dahil edeceğim.
最後に style タグを入れます
Son olarak, bir tarz etiketi dahil edeceğim.
また ページに もっとステキなフォント書体を使って
Sayfada daha güzel bir font türü kullanacağım.
バッジの見映えを良くします
Böylece, tiny-badge daha güzel görünecek.
それから下の body 要素の中に リストを作ります
Ve bu gövde içerisinde bir liste oluşturacağım.
そのリストの中に tiny-badge 要素を 並べて入れます
Bu liste içine bir tane tiny-badge elemanı bırakacağım. Böylece, taklit bir gelen kutusu
すると 疑似 Inbox が 作れるようになります
yaratabileceğiz.
では Chrome に行き プレビューしましょう
Eğer Chrome'a gider ve her şeyin ön görünümünü yaparsam,
私の作った小バッジが 表示されていますね
tiny-badge'nin ortaya çıktığını görebilirsiniz.
ここで使っている URL を見ると
Eğer kullandığım URL'ye bakarsınız,
localhost:8080/components/tiny badge/demo.html です
localhost:8080/componentstinybadg /demo.html olduğunu görürsünüz.
この良いところは このコンポーネントを開発できることです
Güzel olan şey ise, bu bileşeni geliştirebiliyor olmam.
プレビューもできます
Ön görünümünü de yapabilirim.
しかし この依存性は canonical パスの URL で書かれたものです
Bağımlılarını, kanonik URL yolu kullanarak yazdım.
なので このコンポーネントも Bower レジストリに発表可能です
Bu bileşen, Brower kayıt defterinde yayınlanmaya hazır.
これは世界中で共有できます
Tüm dünya ile paylaşılmaya hazır.
分かりましたね
Artık biliyorsunuz.
Polymer 要素の開発は ずっとシンプルになりました
Polymer elemanı geliştirmek artık daha kolay.
ここで私のチャンネルは 通常 終わって
Normalde burada bitirmem
チャンネル登録をお願いするんですが
ve abone olmayı unutmamanızı söylemem gerekiyor.
本日は特別なお知らせがあります
Fakat bugün özel bir duyurum var.
少数のラッキーな視聴者へ
Şanslı takipçilerimize vermek istediğimiz,
Polymer の最高のプレゼントがあります
bir sürü Polymer hediyeleri var.
これがその流れです
Şöyle olacak:
Polymer に関する質問は 下のコメント欄に残してください
Yorumlar kısmına Polymer ile ilgili soru yazacaksınız.
そして 毎回 オンエアでは 新たなコードを取り上げたり
Her bölüm çektiğimizde, en iyi soruları bölümde
おさらいをしたり いくつか良い質問を取り上げてお答えします
yayınlamak için seçeceğim.
もしも あなたの質問が採用されたら ステキなものがもらえます
Eğer sorunuz seçilirse, bazı ödüller kazanabilirsiniz.
フードや シールやおもちゃ ノート PC のカバーを指名して下さい
Elimizde kapüşonlar, etiketler, oyuncaklar laptop kaplamaları ve fazlası var.
もしも コーギーやセイウチと一緒の 僕の写真が欲しかったら
Eğer benim bir gal köpeği ya da deniz aygırı ile fotoğrafımı isterseniz,
それもできますよ
bunu da yapabiliriz.
考えをまとめて コメント欄に記入していってください
İyice düşünün.
ご覧いただいてありがとうございました またお会いしましょう
Yorum kısmına yazmayı unutmayın. Her zaman olduğu gibi, izlediğiniz için çok teşekkürler.
やあ 皆さん ロブです
Görüşmek üzere.
LazyWeb という 新チャンネルをお知らせします
Merhaba Polycastercılar. Ben Rob. Sizi "LazyWeb" adlı yeni programımdan haberdar etmek istiyorum.
これは全て閲覧評価に入っている 先週のウェブニュースからハイライトされます
Geçen haftanın web haberlerini bu programda izleyebileceksiniz.
リンクをたどって確認できます 登録を忘れずにね
Bir göz atmak için buradaki bağlantıya tıklayın.
思いは Twitter で教えて下さい ご覧いただきありがとうございました
Abone olmayı unutmayın. Ne düşündüğünüzü Twitter'dan bize bildirin. Her zaman olduğu gibi, izlediğiniz için teşekkürler.
Similar videos:

Unit Testing with Web Component Tester -- Polycasts #36
Chrome for Developers
17K views 127 likes 5 dislikes 03 Dec 201567% match

Extending Native Elements -- Polycasts #15
Google for Developers
18.6K views 164 likes 3 dislikes 04 May 201557% match

Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201547% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201541% match

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201541% match

Core Iconset -- Polycasts #02
Google for Developers
24.6K views 171 likes 2 dislikes 06 Oct 201438% match


Moar routing with... more-routing -- Polycasts #11
Google for Developers
22.9K views 206 likes 4 dislikes 09 Mar 201537% match

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201536% match

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201536% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201435% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201534% match

Core Header Panel -- Polycasts #04
Google for Developers
25.8K views 190 likes 1 dislikes 05 Nov 201433% match

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201532% match


Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201432% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201432% match

Go Offline -- Polycasts #19
Google for Developers
26.4K views 354 likes 8 dislikes 29 Jun 201531% match

What Deep Dream sees -- LazyWeb #12
Google for Developers
51.6K views 413 likes 27 dislikes 07 Jul 201526% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201425% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201424% match

Google I/O 2014 - Unlock the next era of UI development with Polymer
Google for Developers
100.5K views 971 likes 26 dislikes 26 Jun 201424% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201524% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201422% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201422% match

DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201422% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201421% match

Introduction to Polymer: The Next Generation of Web Development - Matthew McNulty
Google for Developers
64.8K views 417 likes 16 dislikes 12 May 201421% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201421% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201621% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201621% match

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201421% match


Settings Privacy About Contact Donate