2015
10/21
07:22

[斜め読み] GoバイナリのDockerイメージを作るもっと簡単な方法Latest!

[斜め読み][Go言語][golang][docker]

https://medium.com/iron-io-blog/an-easier-way-to-create-tiny-golang-docker-images-7ba2893b160 * 2015年7月の記事 * [最近アトラシアンが同じ話題について記事を出した](https://developer.atlassian.com/blog/2015/07/osx-static-golang-binaries-with-docker/?utm_source=golangweekly&utm_medium=email)けど、内容が複雑すぎると思ったのでこの記事を書いた * GorillaMuxを使った単純なWebサーバプログラムを用意する * やること 1. Godepなどを使って依存モジュールを固定する 2. Dockerコンテナ内でバイナリをビルドする 3. 可能な限り小さいDockerイメージ(例えば`scratch`など)を探して、それにバイナリを埋め込む 4. 最終的にイメージファイルのサイズは4MBになった * サンプルコード一式はここにある https://github.com/treeder/tiny-golang-docker

2015
10/07
05:38

Material Design LiteのBEM命名規約について

[MDL][Material-design-lite]

MDLを触り始めてBEMという命名規約について知りました。 最初は--や__を何のことやらと思っていましたが、調べてみると簡単なルールで、ブロックをWebComponentに置き換えて考えると、自分でカスタムタグを作るときにもCSSクラス名に悩まずに済むので大変便利だと思います。 * 参照: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ * MDLではCSSクラスの命名にBEM(Block Element Modifier)というルールが使われている。 * 採用されているのはオリジナルのBEMではなく、[Nicolas Gallagher](http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)による改良版。 * Block ・・・ ブロックはそれ自体でページ内の一つの要素になるもの。MDLだと ``mdl-grid``とか``mdl-layout``とか。 * Element ・・・ エレメントはブロック内に置かれるもので、ブロックとは切り離せないもの。ブロックとの関係性を **__**

2015
10/06
07:04

[斜め読み] Polymer1.0のドキュメントを読む - Data Binding

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html * データバインディングはカスタムエレメントのプロパティをlocalDOMのプロパティや属性に割り当てる * バインディングは ``{{}}`` か ``[[]]`` で表される * 角括弧は単方向バインディング、データはホストから子要素へ流れるが、逆はない * 波括弧は自動バインディング、双方向か単方向かは対象プロパティがの設定による * 属性名とプロパティ名のマッピングについては[Property name to attribute name mapping](https://www.polymer-project.org/1.0/docs/devguide/properties.html#property-name-mapping)を読む * style, href, class, data-* の4つの属性については特別扱いで、[attribute binding書式](https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding)を使う

2015
10/06
07:03

[斜め読み] Polymer1.0のドキュメントを読む - Events

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/events.html * エレメントにイベントハンドラを追加するには、イベント名とハンドラ名の対応関係を格納した`listener`オブジェクトを追加する * 個別に`this.$.nodeId.eventName`を使うこともできる * ローカルDOMテンプレートでイベントを指定するには `on-event-name`属性を使う。こうすることでイベントの割り当てのためだけに`id`を指定する必要がなくなる * **イベント名は常に小文字に変換される。**イベントハンドラ名は大文字小文字が区別される * 0.5ではイベントハンドラ名を{{}}で囲む必要があったが、これは必要なくなった * 独自イベントを発行するには`fire`メソッドを使う * Polymerにはカスタムイベント群として、gestureイベントが実装されており、タッチ操作とマウス操作の両方に対応している。異なるデバイスで同じ操作性を提供するため、gestureイベントを利用することが推奨される。 * gestureイベント

2015
10/06
07:03

[斜め読み] Polymer1.0のドキュメントを読む - Styling local DOM

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/styling.html * Polymerではスコープ付きCSSを提供するため[Shadow DOM styling rules](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/) というのを使っている * `<style>`タグはローカルDOM`<template>`の内側に置く必要がある * `<content>`タグの代わりに配置された要素にスタイルを適用するには * `::content`セレクタの左にセレクタが必要 * `<content>`タグ内の要素だけにスタイルを適用するには`<content>`タグの外にラッパを付け足す * スコープをまたいだスタイルについては良い方法を模索中、`/deep/`と`::shadow`を廃止にする方法を提供予定 * PolymerにはW3Cで検討中のCSSカスタムプロパティを使えるようにするライブラリが含まれている * カスタムプロパティは定義した場所から下へ継承される

2015
10/06
07:03

[斜め読み] Polymer1.0のドキュメントを読む - Local DOM Basics and API

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/local-dom.html * ここでいうDOMとはエレメントのローカルDOMを構成する要素のこと。カスタムタグ内に配置された子要素はlightDOMと呼ばれて厳密に区別される。 * いまのところPolymerはローカルDOMをshadyDOMという機能で提供する。shadowDOMをネイティブ実装しているブラウザでもshadyDOMが使われる。 * エレメントにテンプレートを追加するには、`<dom-module>`タグ内に`<template>`追加する。Polymerは`<template>`タグ内の内容を自動的にコピーしてローカルDOMに追加する * `<script>`タグは`<dom-module>`の中にあっても外にあってもどちらでも良い * idをもつローカルDOM内のエレメントは`this.$.id`でアクセスできる。ただし`dom-repeat`や`dom-if`で動的に作成されるノードは対象にならない。 * 動的に作成されるノードを見つけるには `this.$$(selector)` を使う

2015
09/18
12:13

[斜め読み] Polymer1.0のドキュメントを読む - Declared Properties

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/properties.html * カスタムエレメントのプロパティは、プロトタイプの `properties` オブジェクトに定義する * `properties` で定義したプロパティは属性から値を設定できる * カスタムエレメントの公開APIに含まれるプロパティは `properties` に含まれていなければならない * `properties`は以下の設定が利用できる * プロパティの型 `type` * デフォルト値 `value` * プロパティの変更監視 `observer` * 読み出し専用指定 `readOnly` * 双方向データバインディング `notify` * 計算済みプロパティ `computed` * プロパティの属性への反映 `reflectToAttribute` * 型は `Boolean` `Date` `Number` `String` `Array` `Object`のいずれか * `notify` が `true`だと双方向データバインディングが有効になり、`propertyName-changed`というイベントが発行される

2015
09/14
08:08

[斜め読み] Polymerユニットテストの書き方

[Polymer][WebComponents][斜め読み]

https://medium.com/@granze/polymer-unit-testing-d6a69910dc31 * 2015年8月の記事 * web-component-tester(WCT)というツールを使う * 中身はMochaとChai * インストール * ``npm install -g web-component-tester`` * 訳者注: `bower`も利用できる、その場合wctコマンドはインストールされないので自前でサーバを立ち上げてブラウザでテストを開くことになる * メインドキュメントで`web-component-tester/browser.js`を読み込む * テスト対象のエレメントをimportする * fixtureを使うために、`<text-fixture>` エレメントをインストールする * ``bower install --save PolymerElements/test-fixture`` * `test-fixture`をインポートする * テスト対象のエレメントを``<template>``と``<test-fixture>``で囲む

2015
09/12
07:35

[斜め読み] Polymer1.0のドキュメントを読む - Registration and lifecycle

[Polymer][WebComponents][斜め読み]

https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html * カスタムエレメントの登録方法 * Polymer()関数を呼び出す * 引数にはエレメントのプロトタイプを渡す * プロトタイプにはカスタムエレメントのタグ名を示す`is`プロパティを含める * 仕様上カスタムエレメントの名前には`-`を含める必要がある * Polymer()の呼び出しはカスタムエレメントのコンストラクタを返す * 引数に渡されたプロトタイプはPolymerの`Base`プロトタイプに連結される * カスタムコンストラクタの定義 * カスタムエレメントのコンストラクタに引数を渡したい場合は、`factoryImpl`関数をプロトタイプで指定する * `factoryImpl`メソッドはコンストラクタを使ってエレメントを生成した時のみ実行される。マークアップや`document.createElement`でつくった場合は呼び出されない * `factoryImpl`メソッドはエレメントの初期化が終わったあとに呼び出される

2015
09/11
07:40

[斜め読み] Goでテーブル駆動テストを書く方法

[斜め読み][Go言語][golang]

Writing table driven tests in Go http://dave.cheney.net/2013/06/09/writing-table-driven-tests-in-go * 2013年6月の記事 * Goでテーブル駆動テストを書くのは楽しい * コンポジットリテラルや無名構造体といった機能がテストを簡潔に書くのに便利 * テストの入力と出力を定義する無名構造体を作る * 無名構造体のスライスを作る * コンポジットリテラルでテストケースの入力と出力を与える * テーブルの完成 * 別に構造体に名前をつけても良い * range でテーブルから順に値を取り出し、対象の関数をテストする * 他にも色々やり方があるので、mathパッケージやtimeパッケージを参考にすることをすすめる この記事は元記事のライセンスを継承し、Attribution-NonCommercial-ShareAlike 4.0 International [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) となります。

2015
09/08
23:38

[斜め読み] エラー処理とGo

[斜め読み][Go言語][golang]

Error handling and Go http://blog.golang.org/error-handling-and-go * 2011年7月の記事 * Goでは異常な状態を表すのにerror型を使う * error型はインターフェイスで、Error()の実装を定義している * 文字列をerrorにするには error.New("文字列")が使える * エラーの文字列を得るには error.Error() * fmtパッケージのメソッドにerrorを渡すと自動でError()が呼ばれる * fmt.Errorf() を使うと文字列のフォーマットをしてerrorが得られる * Goの言語デザインではエラーが起こった時点で明示的にチェックすることを推奨している * エラー処理の繰り返しを避けるには、ラッパ関数を作れば良い。http.Handlerの例 * http.Error(ResponseWriter, エラーメッセージ, エラーコード) でhttpエラーを返せる