透(65)97497件のシェア(ちょっぴり話題の記事)この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。毎度お世話になっております。クラスメソッドの稲毛です。Blogで「AngularJS」という新しいWebテンプレートフレームワークが発表されました。MVCモデルを採用しているということで、実際にモデルの変更がビューに反映される様を確認できるサンプルを作成してみました。API(JSONP)でツイートを検索し一覧表示するといったサンプルです。スクリプトをロードするAngularJSのスクリプトファイルを読み込みます。AngularJSアプリケーションとして宣言するHTMLファイルがAngularJSによるWebアプリケーションであることを示す為に、html要素の属性として「ng-app」を付与します。この指定が無いとAngularJSによるテンプレート機能は活性化せずHTMLが素のまま表示されます。コントローラを指定するビューに対するコントローラを「ng-controller」属性で指定します。値にはコントローラとして扱うオブジェクトの関数名(ここではTwitterSearchCtrl)を指定します。今回はひとつのビューしか扱っていないのでbody要素へ記述しています。ng-controller="TwitterSearchCtrl">今回コントローラを用意するJavaScriptファイルはsearch.jsとして作成します。こちらも予めscriptタグを記述しておきます。入力フォームを用意するinput要素を用意します。入力された値をモデルにバインドする為に「ng-model」属性を利用して対象となるモデルの名称を指定します。ここではモデル「query」とバインドしています。ng-model="query"/>エンターキーの押下をハンドリングする為に、form要素にsubmitで実行される関数名(ここではdoSearch)を「ng-submit」属性で指定します。ここで指定したハンドラは後にコントローラで用意します。テンプレートの繰り返しを利用する検索結果はJSON形式で取得します。その中に含まれるツイートの配列をリスト状に表示する為に、AngularJSのテンプレート機能の繰り返しを利用します。その要素が持つ子要素が繰り返し描画されます。results」と指定していますが、これはモデル「results」に含まれるひとつのデータを「result」という名称で利用して繰り返すということを表しています。バインディングを利用するモデルをビューへ紐付ける為にはバインディングを利用します。バインディングは二重中括弧で指定します。</div>二重中括弧の中にはモデル名を指定します。先の「ng-repeat」によってモデル「results」の単一オブジェクトは「result」と定義されているので、resultオブジェクトのプロパティを参照してバインディングを行います。ここでは「profile_image_url」「from_user」「text」を利用しています。img要素は、src属性の値としてバインドの記述を行うとその値でリクエストが行われエラーとなってしまいます。-->その対策として、AngularJSにより提供される「ng-src」属性を利用して動的にsrc属性が挿入されるように記述します。ng-src="{{result.profile_image_url}}"/></div>以上でHTMLファイルは完成です。</div></body></html>JavaScriptビュー(HTML)で定義したコントローラをJavaScriptファイルに記述していきます。コントローラへハンドラを用意するビューのform要素に定義したハンドラ「doSearch」は、コントローラ「TwitterSearchCtrl」の引数「$scope」の関数として記述します。{他にも「$http」とありますが、これはAngularJSが提供するサービスのひとつで、ブラウザが持つ「XMLHttpRequest」や「JSONP」を利用する際に用意します。これらサービスの中身はAngularJSによってDI(依存性の注入)が行われる為、コントローラの引数に記述するだけで利用することができます。モデルを参照するビューに用意した入力フォームのinputはモデル「query」にバインドしている為「$scope.query」で、入力された文字列を参照することができます。encodeURIComponent($scope.query)モデルはすべて「$scope」内に存在します。JSONP形式のリクエストを行うJSONPでのリクエストには先に出てきた「$http」サービスの「jsonp()」を利用します。続けて「success()」にリザルト関数を指定し、引数にセットされるJSONオブジェクトを処理します。{JSONP形式ではコールバック関数の名称を指定する必要があります。AngularJSの「$http.jsonp」サービスを利用する場合は必ず「JSON_CALLBACK」を指定します。モデルへオブジェクトをセットする得られた検索結果データをモデルへセットします。ビューで検索結果のツイート群を「results」と指定しているので、「$scope.results」へツイートの配列をセットします。APIで得られるJSONオブジェクトは、resultsにツイートの配列が格納されています。)以上でJavaScriptファイルも完成です。APIを利用した検索結果が一覧として表示されます。検索ワードを変更して再検索をすれば、きちんとそのワードに対する検索結果で描画が更新されます。コントローラ内での実装は検索結果をモデルへ代入しているだけなので、モデルの変更がAngularJSによってビューに反映されていることがお分かり頂けると思います。Controller"」など)することも可能となっています。抜かりの無い作りは流石だなと思いました。(^^)モデル、ビュー、コントローラの扱いも非常にシンプルで、初めてMVCモデルに触れる方でも習得し易いのではと思います。AngularJSは他にも様々な機能を持っているようなので今後も注目していこうと思います。654,275プログラマです。現在は運用保守を担当しています。リモート】クラスメソッドの会社説明会を開催しますクラスメソッドでは、AWS・AI・ビッグデータ・モバイルなどの技術職や営業のメンバーとして一緒にお仕事をする仲間を大募集しています。〜ITエンジニアのお仕事とホンネ〜1月30日に新卒向けの会社説明会〜ITエンジニアのお仕事とホンネ〜を開催します。濱田孝治80EKS初心者の方向けに、EKS周辺のAWSリソースがどのように関連して動作しているのかをステップバイステップでEKSCTLが担っている役割を中心に説明しました。菊池修治45こんにちは、菊池です。VPNの冗長化について、最近何度か続けて社内で質問を受けましたのでまとめようと思います。大前諒祐26MediaLiveでの配信終了時に自動でアーカイブファイルをMediaConvertで変換する仕組みを作ってみました。武田隆志1179このエントリは、2018年、2019年に公開したAWS全サービスまとめの2020年版です。これまではいくつかに分割して公開していましたが、1エントリにまとめてほしいという要望をもらっていたため、今年は1エントリに集約してみました。クラスメソッドの関連会社であるアノテーション株式会社の研修として依頼を受け、チームと心理的安全性、それに礼節というテーマで話をしてきました。CAFEのサービスが「LINEアプリ」として利用できるようになりました。これまではLINEのトークから利用する形でしたが、LINEサービス内から利用できるようになりました。これまでより便利に、シームレスにご利用いただけます。Cafe328件のシェア(そこそこ話題の記事)インフラ未経験の私が内定から入社までに読んだ技術書11冊ブログ記事2020年01月16日Yui328インフラ未経験で入社した私がインフラを勉強するために読んだ技術書11冊を感想とともにまとめました。濱田孝治272「ふわわぁ、眠いな。クラスメソッド株式会社が運営するAWS・iOS・HTML5に関する技術情報サイトです。