AngularJSの特徴の一つである「双方向データバインディング」が使えなくなってしまうからです。※「双方向データバインディング」とは、データとUIを双方向に自動で結びつけてくれる機能です。文章で分からない人は、AngularJSの公式ページで実際に試して見て下さい。Basics」にある「Name」の入力欄に文字を入力すると、リアルタイムに入力した文字が画面へと出力されるかと思います。AngularJSで双方向データバインディングの設定をするためには「ng-model」属性を使いますが、この属性を使用できるのは、<input>/<select>/<textare>の3つのエレメントだけなのです。Polymerのエレメントはテキスト入力に使う<paper-input>を始め、「paper-◯◯」といった独自のものを使用するため、「ng-model」を付与しても双方向データバインディングのディレクティブが使えないのです。普段からAngularJSを使っている私にとっては「双方向データバインディング」が使えないという問題は致命的に思えてしまい、Polymerは断念しました。Material」です。Designで画面を作成できるのです。Materialの導入方法から比較的によく使う入力部品について、作り方を説明していきたいと思います。Materialを利用できるようにモジュールの読み込み方法を紹介します。その後、具体例として「テキスト入力欄」、「セレクトボックス」、「ラジオボタン」、「テキストエリア入力欄」の作成方法をご紹介します。前提として各画面や用語などはEclipseというIDEをベースとした説明になります。今回はJavaのプロジェクト上で動くことを前提に進めさせてもらいます。MaterialはJavascriptなのでサーバ側の記述言語には依存しませんので、その辺りはお好きな言語に読み替えてください。必要なCSSとJavascriptを読み込むまず、はじめにJavaのプロジェクトのwar直下のindex.htmlのHEADとBODYに最低限必要なCSSとJavascriptを書きます。1.3以上が必須です。必要なCSSもJavascriptもWeb上で一般公開されているので、導入はそのURLを指定するだけで非常に簡単です。進め方としては、このindex.htmlにいろいろとコードを追加していきたいと思います。</body></html>AngularJSを使えるように設定する最低限必要なライブラリは読み込みました。それだけではAngularJSは使用できませんので、AngularJSを使えるようにindex.htmlを変更しましょう。Angularアプリケーションのルート設定をします。ルート設定は、Angularアプリケーションのディレクティブを適用する開始位置を宣言するものです。親の要素にあたる<html>に属性「ng-app」を追加します。Materialのモジュールを読み込みます。<body>に下記の<script>を追加します。Materialのモジュール「ngMaterial」を読み込みます。Materialは動きませんので、忘れずに読み込みましょう。angular.moduleの第一引数は、前述した「ng-app」に指定した値と同じ値を指定して下さい。["ngMaterial","ngAnimate"]);</script>これで、最低限の準備は完了です。テキスト入力欄を作ってみるそれでは、テキスト入力欄を作ってみましょう。下記のコードをindex.htmlのBODY内に加えて下さい。コード<div><md-input-container><label>TEXTの入力欄です。Materialの入力部品においては、ほぼ必須の親要素です。これが無いと正しく表示されません。mdInputContainer<label>内の文字列が入力欄のプレースホルダーとラベルの役割を担ってくれます。ブラウザから表示を確認してみましょう。下記のようなテキスト入力欄が表示されるかと思います。URL:http://angular-material-start-guide-dot-apps-gcp-sample.appspot.com/input-text.html入力欄をクリックすると、Polymerの<paper-input>と同じように動いてくれるのが確かめられると思います。セレクトボックスを作ってみるセレクトボックスは、<md-select>を使用します。index.htmlのBODYに下記のコードを加えて下さい。コード<div><md-input-container><label>SELECTの選択欄です。value="TEST4">テスト4</md-option></md-select></md-input-container></div>今回も<md-input-container>を使います。通常のHTMLの<select>の使い方とほとんど変わりませんね。<select>を<md-select>に置き換えて、選択要素である<option>を<md-option>に置き換えるだけです。mdSelectでは、ブラウザから表示を見てみましょう。http://angular-material-start-guide-dot-apps-gcp-sample.appspot.com/select-box1.html選択肢もちゃんと指定したものが表示されていますね。選択すると、テキスト入力欄同様の動きをするかと思います。レイアウトを少しいじってみるここまでの状態では、画面の左上にテキスト入力欄があり、その下にセレクトボックスがあると思います。ここで一旦レイアウトを変えてみましょう。この2つの入力欄を横並びにし、画面の中央に配置しましょう。配置の制御には、”layout”と”layout-align”、”flex”のattributeを使用します。flex="20"><label>TEXTの入力欄です。flex="20"><label>SELECTの選択欄です。value="TEST4">テスト4</md-option></md-select></md-input-container></div>layout=”row”で、DIV直下にある子要素を横並びに表示することができます。layout-align=”center”で、DIV直下の子要素を中央に配置することができます。<md-input-container>にある”flex”で、親要素内でのサイズを指定しています。今回は、flex=”20”ですので、「max-width:20%」と同じ意味合いとなります。ブラウザから画面を確認してみましょう。http://angular-material-start-guide-dot-apps-gcp-sample.appspot.com/select-box2.htmlちゃんとテキスト入力欄とセレクトボックスが横並びで、画面中央に表示されてますね。”layout”と”layout-align”、”flex”は手軽に要素の配置を設定できるので、覚えておいて損はないと思います。配置のパターンは他にもあるので、下記公式ページを見てみて下さい。Alignmentラジオボタンを作ってみるラジオボタンを作るには、<md-radio-group>と<md-radio-button>を使います。index.htmlのBODYに下記コードを追加してください。value="RADIO_B">ラジオボタンB</md-radio-button></md-radio-group></div><md-radio-group>でラジオボタンのグルーピングを行ない、<md-radio-button>でラジオボタンの要素を作ります。ブラウザからは下記のように見えるかと思います。URL:http://angular-material-start-guide-dot-apps-gcp-sample.appspot.com/radio.htmlテキストエリア入力欄を作ってみるここで紹介する入力部品の最後は、テキストエリアの入力欄です。テキストエリアの入力欄は、テキスト入力欄同様、標準のHTMLの<textarea>と<md-input-container>を使います。ng-model="textArea"></textarea></md-input-container></div>あまりテキスト入力欄と変わりませんね。表示を確認してみましょう。URL:http://angular-material-start-guide-dot-apps-gcp-sample.appspot.com/textarea.html見た目はテキスト入力欄と変わりませんが、入力欄を選択し、改行したりするとテキストエリアであることが分かるかと思います。※<textarea>の初期表示行数を設定する”rows”を指定すると、ラベルの位置が悪いので、設定しない方が良いかと思います。Materialの入力部品についてご紹介してきました。最後に、3.1?3.7で紹介した入力部品とAngularJSのバリデーション機能を使って、ある汎用的な入力フォームを作ってみましょう。HTMLの全文は以下のようになりますので、コピペしてみて下さい。>会社名を入力してください。>住所を入力してください。>メールアドレスを入力してください。registerForm.userEmail.$touched">メールアドレスの形式が正しくありません。ラジオボタンは、<md-radio-group>を使います。ラジオボタンの選択項目は、<md-radio-button>で指定します。class="err-message">生年月日を入力して下さい。class="err-message">生年月日の形式が正しくありません。class="err-message">年齢は0以上を入力して下さい。class="err-message">年齢を数値で入力して下さい。class="err-message">備考の入力文字数は150文字までです。</body></html>私もまだまだ勉強中ですので、もっと効率的なHTMLコードの書き方がありましたら、ご意見を頂けますと幸いです。このHTMLコードをブラウザから見てみると、下記のような入力フォームになります。Materialで紹介しましたが、いかがだったでしょうか?入力部品について説明しただけですが、簡単に導入から作成までができるのは体感していただけたのではないでしょうか。Materialは2015年12月14日に正式リリースを迎えたばかりです。認知度は低いかもしれませんが、AngularJSを使う開発者にとってはこれから重宝するものになる確実だと思っています。上での開発を請け負っております。Platformや開発に関する相談・お問い合わせはこちらより宜しくお願い致します。