#daiizメモ

Cosenseに夢中

トップ > web-components

web-components

コピーしやすい短文テキストパレットをつくった

作品 web-components

単一行テキストをコピーしやすい文字列パレット「tBoard」を作った．Polymer 2.0 のPWA (Progressive Web Apps) として出来上がっている．必要なPolymerコンポーネントを組み合わせていくと画面デザインが仕上がる．今回自作したコンポーネントは，テキスト…

Hello, Shadow DOM & Custom Elements!

web-components tech

Chrome v54になったので最新仕様の Shadow DOM と Custom Elements が使えるようになった．HTMLの大進化に向けた第一歩になると思う．これらの機能を活用することにより，独自のHTML要素を定義できるようになる． いくつもの<div>や<iframe>を組み合わせて作られた「アナ</iframe></div>…

Chromeアプリで簡単に画像を表示するためのHTMLタグをつくりました

web-components 作品 tech

img-view ウェブページで写真を表示したい場合は<img>タグを使って <img src="http://images.miil.me/j/1c3b3f42-c0c0-11e5-a6e4-22000aba146f.jpg"> とすれば良いのですが，Chromeアプリではセキュリティ上の理由でこのような方法で外部（アプリパッケージ外）の画像を読み込むことができません．読み込みエラーになってしまいます． 公式のド…

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

Polymer web-components tech

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で書こう

Polymer web-components 作品 tech

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

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

Polymer web-components tech

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

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

Polymer web-components tech

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

Polymer 1.0 の Shady DOM を覗いた

Polymer web-components tech

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

Bower 導入作戦

web-components chrome-dev-editor tech

Web Componentsを作成していると、いろいろと読み込むファイルが大きくなり、これをそのままGitHubにアップしてしまうとCloneするときの時間がやばいことになるので、パッケージマネージャー Bower を使うことにしました。（はじめから使うべきでした。）

マテリアルデザインのカードUIを実現するHTMLタグ「griddles-ui-card」の新バージョンをリリースしました

作品 web-components tech

HTMLのカスタムエレメント「griddles-ui-card」の最新バージョン（version 0.3.0）とデモアプリをGitHubにてリリースしました。

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

web-components Polymer tech

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

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

web-components Polymer chrome-dev-editor tech

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

aタグでファイルをdownloadする

chrome web-components tech

chromeではaタグのdownload属性を用いてファイルをダウンロードさせることができるようです。これをより簡単に扱うために、Web Component「a-download」をつくりました。

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

web-components Polymer tech

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

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

web-components Polymer chrome-dev-editor 作品 tech

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

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

web-components Polymer chrome-dev-editor tech

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

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

web-components Polymer chrome-dev-editor tech イベント

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

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

web-components Polymer tech

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