タグ

webcomponentsに関するatm_09_tdのブックマーク (6)

  • Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう

    Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう 泉水翔吾 この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。 Web Componentsをより柔軟に、そして強力にするライブラリ Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。 Welcome

    Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう
  • DEFGHI1977のWEB技術まとめ・ツール等

    written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスはページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas

    DEFGHI1977のWEB技術まとめ・ツール等
  • Web Componentsが変えるWeb開発の未来

    Google I/O 2014でEric BidelmanがPolymer and Web Components change everything you know about Web developmentというタイトルで、Web Componentsおよびその補完・拡張ライブラリであるPolymerについてセッションが行われました。 「なぜWeb Componentsが生まれたのか」 「Web Componentsが何を解決してくれるか」 この2点を上記セッションに沿って解説していきます。 HTML/CSSが持つ弱点 Webを構成していくパーツを作る際、今まではどのように行っていたでしょうか。<div>や<textarea>といったようなネイティブで用意されているタグに、CSSで見た目で装飾し、JavaScriptからDOMのAPIを操作してインタラクションを付与してきました。 しか

    Web Componentsが変えるWeb開発の未来
  • Web ComponentsとHTMLのセマンティクスと自分の将来予測 - saneyuki_s log

    Custom Elements W3C Editor's Draft 18 June 2014を元に書いた。 昔、関連仕様のどこかで今回と似た話を見た記憶が有るんだけど、どこにあったか忘れたので、改めて自分の解釈として書いてみる。 Custom Elementで既存の要素を拡張する Web ComponentsのCustom Elementは独自の要素を定義することができるのだけど、新要素の導入以外にも、実際には既存の要素を拡張するという使い方ができる。 ElementRegistrationOptionsの、extendsプロパティというのがそう。 specの例では以下のようにp要素を拡張している(引用): document.registerElement('x-foo', { prototype: Object.create(HTMLParagraphElement.prototype

    Web ComponentsとHTMLのセマンティクスと自分の将来予測 - saneyuki_s log
  • 日本一手抜きなWeb Compornents入門

    Polymerを使ってWeb compornentsのShadowDOMを使い独自タグを作ってみます。 Polymerのサンプルをあさっていたのですが、わりとどれも多機能で大変だったので、機能をごっそり削り、どうやって使うかのわかりやすさを優先しました。 環境構築を含めて極力シンプルな手段によってmy-elementタグを作ってみようとおもいます。 Polymerのダウンロード公式のチュートリアルではPolymerを取得するのにBowerを使っています。 しかしBowerを使っていない人も多いと思うので今回はgit-hubから直接ダウンロードします。 もちろん、GitやBowerを使ったほうが後々は楽なので、ちゃんとやりたい人はGitなりBowerなりを使って下さい。 Polymerをダウンロードするには https://github.com/polymer/polymerにアクセスしDo

    日本一手抜きなWeb Compornents入門
  • Web開発者に革命をもたらす!「Web Components」超入門 | 株式会社LIG

    こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSSHTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一

    Web開発者に革命をもたらす!「Web Components」超入門 | 株式会社LIG
  • 1