Polymer
Polymer Summit 2016のCodelabsの一番大きい課題をやってみた．「Build a Progressive Web App with Firebase, Polymerfire and Polymer Components」というタイトルのやつです．タイトルに含まれているキーワードをピックアップしてみる． Progressive Web …
Polymerを使うときの現状 例えば、Polymerを用いて作ったカスタムエレメントを使うことを考えます。どのようなカスタムタグを使う場合であっても、HTMLの中で<link rel="import" href="">を書いて、Polymerやmy-elementのコードを読み込む必要があります。以下のように書きます。 <html> <head> <meta charset="utf-8"> <title>Demo</title></meta></head></html></link>…
JavaScriptに<polymer-element>タグをReactのJSX記法で書ける便利スクリプトを書きました。babelと一緒に使います。 babelは、次世代のJavaScriptを今のJavaScriptに変換してくれるトランスパイラです。 babelではReact.jsのJSXも展開することができます。 JSXとは、JavaScrip</polymer-element>…
この記事は、以下の2つの記事の続きです。 前回までは、新しくなったPolymerの様子を少しだけ観察して、オリジナルなHTMLタグを作るところまでやっていました。 目次 【復習】作ったHTMLタグのデモを開く 商品名に下線を引いてみる 商品名を太字にしてみる …
昨日の記事に引き続き、Polymerの話です。今日は以下のPolymer公式ページ Publish an element - Polymer Project を読みながら、reusableなelementをつくります。ブログを書きながらプログラムを書いていきます。ブログ駆動開発!!! 初回のみ npmでpolyserve…
Polymer 1.0 の勉強を始めてみようと思う。 最近触っていなかったから、ひとまず思い出すために古いバージョン（v0.5）のPolymerで書いたscrollHeaderPanelと、新バージョン（v1.0）のものを見比べてみた。 名称が変わっていた バージョンが変わっても、ほぼ…
コマンド一発で.html、.cssや.jsなどの雛形を一斉に用意してくれるスクリプトを書きました。また、さきほどGitHubに公開しました。是非ご利用ください。 準備編 ~/tools/ 内などの、自作のコマンドを置けるようにパスが通っている場所で、以下のコマンドを実…
昨日、タリーズでコーヒーで飲みながらMacBook Airでネットサーフィンしていたところ、とても興味深い記事に出会いました。id:paiza さんのJavaScriptのフレームワークの書き比べの記事です。 Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを…
Web Component制作におけるcontentタグの使い方について勉強しました。
Polymerで提供されている「core-scroll-header-panel」エレメントのヘッダ背景画像を動的に変更する方法についての記事です。
カードUIテンプレート「griddlesJS」の最新版「griddles-ui-card」を公開しました。
作成した Web Components を公開するためのリポジトリをGitHubに開設しました。
Chrome Dev Editor の 'Refactor for CSP' では何が行われているのか。このステップの前後のコードを比べることで調べてみました。
Chrome Dev EditorでPolymerを用いたChromeアプリを作成できるようになったようです。
初めてのカスタムエレメント作りに挑戦します。Polymerを用いてコンポーネントを作製する過程を紹介しています。
Chrome Dev Editor でお手製Polymerコンポーネントを作製するための準備を紹介しています。
Polymerを使えば、「既存のコンポーネントを使う」・「自分のお手製のコンポーネントを作る」といったWeb Componentsライフを手軽に体験できるようになりそうです。
Web Componentsの勉強をはじめました。Custom Elements、Template Tag、Shadow DOM、HTML Importsについて基本的な部分を調べました。
