web-components
単一行テキストをコピーしやすい文字列パレット「tBoard」を作った．Polymer 2.0 のPWA (Progressive Web Apps) として出来上がっている．必要なPolymerコンポーネントを組み合わせていくと画面デザインが仕上がる．今回自作したコンポーネントは，テキスト…
Chrome v54になったので最新仕様の Shadow DOM と Custom Elements が使えるようになった．HTMLの大進化に向けた第一歩になると思う．これらの機能を活用することにより，独自のHTML要素を定義できるようになる． いくつもの<div>や<iframe>を組み合わせて作られた「アナ</iframe></div>…
img-view ウェブページで写真を表示したい場合は<img>タグを使って <img src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg"> とすれば良いのですが，Chromeアプリではセキュリティ上の理由でこのような方法で外部（アプリパッケージ外）の画像を読み込むことができません．読み込みエラーになってしまいます． 公式のド…
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）のものを見比べてみた。 名称が変わっていた バージョンが変わっても、ほぼ…
Web Componentsを作成していると、いろいろと読み込むファイルが大きくなり、これをそのままGitHubにアップしてしまうとCloneするときの時間がやばいことになるので、パッケージマネージャー Bower を使うことにしました。（はじめから使うべきでした。）
HTMLのカスタムエレメント「griddles-ui-card」の最新バージョン（version 0.3.0）とデモアプリをGitHubにてリリースしました。
Web Component制作におけるcontentタグの使い方について勉強しました。
Polymerで提供されている「core-scroll-header-panel」エレメントのヘッダ背景画像を動的に変更する方法についての記事です。
chromeではaタグのdownload属性を用いてファイルをダウンロードさせることができるようです。これをより簡単に扱うために、Web Component「a-download」をつくりました。
作成した Web Components を公開するためのリポジトリをGitHubに開設しました。
初めてのカスタムエレメント作りに挑戦します。Polymerを用いてコンポーネントを作製する過程を紹介しています。
Chrome Dev Editor でお手製Polymerコンポーネントを作製するための準備を紹介しています。
Polymerを使えば、「既存のコンポーネントを使う」・「自分のお手製のコンポーネントを作る」といったWeb Componentsライフを手軽に体験できるようになりそうです。
Web Componentsの勉強をはじめました。Custom Elements、Template Tag、Shadow DOM、HTML Importsについて基本的な部分を調べました。
