Master PG

プログラムし続ける...

2015-01-01から1年間の記事一覧

Polymer 1.2 のリリース内容を加筆しました

【Polymer 1.0】目次へ 「Polymer 1.2」がリリースされたので、この内容をデベロッパーガイドに反映しました。追加された機能としては、バインディングと、DOM関連の機能です: データバインディング Compoundバインディング DOMの基本とAPI DOM API Distribu…

【Polymer + TypeScript】PolymerTSを使ってみる

【Polymer 1.0】目次へ 目次 概要 インストール PolymerTSの使い方 Decorator @component(tagName) @extend(tagName) @property(def) @observe(propList) @computed @listen(eventName) @behavior(className) @hostAttributes(attributesObject) コンストラ…

【Polymer Starter Kit】プロジェクトのビルドを行う (開発環境構築まとめ)

【Polymer 1.0】目次へ 目次 概要 統合された開発環境を確認してみる Starter Kitを起動する 動作確認 ProxyするWEBサーバーを変更する Sassを使用する プロジェクトのビルドタスクを見てみる copy-to-distタスク set-base-pathタスク polybuildタスク renam…

【Polymer Starter Kit】画像ファイルの圧縮を自動化する

【Polymer 1.0】目次へ 環境構築 できるだけサイト表示のパフォーマンスを向上させるため、画像ファイルの圧縮し、これを自動化する環境を整えます。まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の…

【Polymer Starter Kit】Sassの環境を整える

【Polymer 1.0】目次へ 環境構築 Sassの環境を整えるには、まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の環境へクローンしてください。 クローンを作成したら次のフォルダへ移動します: cd /【任…

【Polymer Starter Kit】ベンダープレフィックスを意識せずに開発するための環境を整える

【Polymer 1.0】目次へ 環境構築 ベンダープレフィックスを意識せずに開発するための環境を整えるには、まず「BrowsersyncでWEBサーバー環境を整える」を読んでおいてください。その後ここからリポジトリを自身の環境へクローンしてください。 クローンを作…

【Polymer Starter Kit】BrowsersyncでWEBサーバー環境を整える

【Polymer 1.0】目次へ 目次 概要 Browsersyncを利用する理由 追加フォルダのサーブ機能 proxy機能 Browsersyncの設定 gulpのインストール npmでプロジェクトに必要なライブラリをインストール bowerでクライアントライブラリをインストール WEBサーバーの構…

【Polymer Starter Kit】プロジェクトを作成してみよう

【Polymer 1.0】目次へ 目次 概要 環境設定 外部HTMLファイルのインポート アプリケーションのメインビュー ページ遷移 基本設定 基本的なページ遷移 遷移先ページにデータを渡すには <a>タグでページ遷移する hashbang有効/無効の切り替え hashbang有効時の動</a>…

【Polymer 1.0】フレキシブルレイアウト

【Polymer 1.0】目次へ 目次 概要 iron-flex-layout コンポーネントを使用する HorizontalレイアウトとVerticalレイアウト デフォルトで適用される幅と高さ Main-axis と Cross-axis 子エレメントのサイズをフレキシブルに制御する Cross-axisにエレメントを…

【Polymer 1.0】Behaviors

【Polymer 1.0】目次へ 目次 Bihaviorの定義 Bihaviorの継承 Bihaviorの定義 Polymerでは、カスタムエレメントはBehaviorと呼ばれるコードモジュールを継承することができます。 Behaviorは、Polymerエレメントのプロトタイプと似ており、ライフサイクルコー…

【Polymer 1.0】テンプレートエレメント

【Polymer 1.0】目次へ 目次 テンプレートリピーター (dom-repeat) テンプレートリピーターのイベントハンドリング リストのフィルタとソート ネストしたテンプレートリピーター 配列セレクタ (array-selector) 条件付きテンプレート (dom-if) 条件付きテン…

【Polymer 1.0】データバインディング

【Polymer 1.0】目次へ 目次 バインディングアノテーション テキストコンテンツへのバインディング Compoundバインディング サブプロパティのバインディング プロパティの変更通知とtwo-wayバインディング 変更通知の仕組み ネイティブエレメントのtwo-wayバ…

【Polymer 1.0】イベント

【Polymer 1.0】目次へ 目次 イベントリスナの設定 アノテーションによるイベントリスナの設定 カスタムイベント ジェスチャーイベント Eventの再標的化(Event retargeting)

【Polymer 1.0】スタイリング

【Polymer 1.0】目次へ 目次 導入 <content>タグに挿入されるエレメントのスタイリング スコープを横断するスタイリング カスタムCSSプロパティ カスタムCSSプロパティの値設定に関する制限 カスタムCSS Mixin カスタムCSSプロパティAPI メインドキュメントでのスタイ</content>…

【Polymer 1.0】DOMの基本とAPI

【Polymer 1.0】目次へ 目次 Shadow DOM と Shady DOM Local DOM と Light DOM <content>エレメント プログラムでLocal DOMとLight DOMにエレメントを追加する Local DOMテンプレート カスタムエレメント内のノード検索 DOM API Distributed children Effective child</content>…

【Polymer 1.0】宣言型プロパティ(Declared properties)

【Polymer 1.0】目次へ 目次 プロパティ名と属性名のマッピング 属性のデシリアライズ プロパティのデフォルト値設定 プロパティ変更の監視 複数のプロパティを監視 サブプロパティの監視 ワイルドカードによるサブプロパティの監視 配列の監視 配列をワイル…

【Polymer 1.0】カスタムエレメントの登録とライフサイクル

【Polymer 1.0】目次へ 目次 カスタムエレメントの登録 カスタムコンストラクタの定義 ネイティブHTMLエレメントの継承 ライフサイクルコールバック readyコールバックとLocal DOMの初期化 初期化の順序 カスタムエレメントの属性 Class-styleコンストラクタ

【Polymer 1.0】クイックツアー

【Polymer 1.0】目次へ 目次 エレメントの登録 Local DOMの追加 Local DOMを構成する データバインディング 宣言型プロパティ(Declared properties) プロパティのバインド

【Polymer 1.0】インストールしてPolymerを始めよう

【Polymer 1.0】目次へ Polymerのインストール Polymerを始めるためにはまずインストールを行う必要があります。インストールといってもZIPファイルを解凍すれば完了です。その他にもインストール方法があるのでその概要を記載します。 ZIPファイル: ZIPファ…

【Polymer 1.0】Polymer入門

目次 今後この目次に徐々にPolymerの使い方に関するコンテンツを追加していく予定です。 デベロッパーガイド Polymerとは? インストールしてPolymerをはじめよう クイックツアー カスタムエレメントの登録とライフサイクル 宣言型プロパティ(Declared prope…