#daiizメモ

Scrapboxに夢中

Polymer

Polymer Summit 2016 のCodelabをやっていく

Polymer Summit 2016のCodelabsの一番大きい課題をやってみた.「Build a Progressive Web App with Firebase, Polymerfire and Polymer Components」というタイトルのやつです.タイトルに含まれているキーワードをピックアップしてみる. Progressive Web …

Polymerをもっと格好良く使いたい

Polymerを使うときの現状 例えば、Polymerを用いて作ったカスタムエレメントを使うことを考えます。どのようなカスタムタグを使う場合であっても、HTMLの中で<link rel="import" href="">を書いて、Polymerやmy-elementのコードを読み込む必要があります。以下のように書きます。 <html> <head> <meta charset="utf-8"> <title>Demo</title></meta></head></html></link>…

polymer-elementタグをReactのJSXで書こう

JavaScriptに<polymer-element>タグをReactのJSX記法で書ける便利スクリプトを書きました。babelと一緒に使います。 babelは、次世代のJavaScriptを今のJavaScriptに変換してくれるトランスパイラです。 babelではReact.jsのJSXも展開することができます。 JSXとは、JavaScrip</polymer-element>…

Polymer 1.0 で作ったカスタムHTMLタグを使う

この記事は、以下の2つの記事の続きです。 前回までは、新しくなったPolymerの様子を少しだけ観察して、オリジナルなHTMLタグを作るところまでやっていました。 目次 【復習】作ったHTMLタグのデモを開く 商品名に下線を引いてみる 商品名を太字にしてみる …

Polymer 1.0 でカスタムHTMLタグをつくる

昨日の記事に引き続き、Polymerの話です。今日は以下のPolymer公式ページ Publish an element - Polymer Project を読みながら、reusableなelementをつくります。ブログを書きながらプログラムを書いていきます。ブログ駆動開発!!! 初回のみ npmでpolyserve…

Polymer 1.0 の Shady DOM を覗いた

Polymer 1.0 の勉強を始めてみようと思う。 最近触っていなかったから、ひとまず思い出すために古いバージョン(v0.5)のPolymerで書いたscrollHeaderPanelと、新バージョン(v1.0)のものを見比べてみた。 名称が変わっていた バージョンが変わっても、ほぼ…

お手軽にHTMLを書き始めるためのコマンドを作成しました

コマンド一発で.html、.cssや.jsなどの雛形を一斉に用意してくれるスクリプトを書きました。また、さきほどGitHubに公開しました。是非ご利用ください。 準備編 ~/tools/ 内などの、自作のコマンドを置けるようにパスが通っている場所で、以下のコマンドを実…

JavaScriptフレームワークへの興味が芽生えた

昨日、タリーズでコーヒーで飲みながらMacBook Airでネットサーフィンしていたところ、とても興味深い記事に出会いました。id:paiza さんのJavaScriptのフレームワークの書き比べの記事です。 Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを…

Web Components を学ぶ #6 「contentタグを使ってみる」

Web Component制作におけるcontentタグの使い方について勉強しました。

Web Components を学ぶ #5 「core-scroll-header-panel の背景画像を動的に変更する」

Polymerで提供されている「core-scroll-header-panel」エレメントのヘッダ背景画像を動的に変更する方法についての記事です。

<griddles-ui-card> を公開しました

カードUIテンプレート「griddlesJS」の最新版「griddles-ui-card」を公開しました。

My-Custom-Element 置き場を用意しました

作成した Web Components を公開するためのリポジトリをGitHubに開設しました。

Chrome Dev Editor の 'Refactor for CSP' で何が行われているのかを調べた

Chrome Dev Editor の 'Refactor for CSP' では何が行われているのか。このステップの前後のコードを比べることで調べてみました。

Chrome Dev Editor で Polymer を用いた Chromeアプリの開発

Chrome Dev EditorでPolymerを用いたChromeアプリを作成できるようになったようです。

Web Components を学ぶ #4 「Chrome Dev Editor でPolymerコンポーネントをつくる」

初めてのカスタムエレメント作りに挑戦します。Polymerを用いてコンポーネントを作製する過程を紹介しています。

Web Components を学ぶ #3 「Chrome Dev Editor を準備する」

Chrome Dev Editor でお手製Polymerコンポーネントを作製するための準備を紹介しています。

Web Components を学ぶ #2 「Polymerを知る」

Polymerを使えば、「既存のコンポーネントを使う」・「自分のお手製のコンポーネントを作る」といったWeb Componentsライフを手軽に体験できるようになりそうです。

Web Components を学ぶ #1 「Web Components とは」

Web Componentsの勉強をはじめました。Custom Elements、Template Tag、Shadow DOM、HTML Importsについて基本的な部分を調べました。