はてなブックマーク

はじめに 「Kibana 4のプラグインをつくってみよう」という記事を書いてから1年が経過しました。 この記事を書いた時点ではKibanaのプラグインシステムは公式にサポートされたものではありませんでしたが、先日Kibana 4.2がリリースされ、ドキュメントにプラグインについて記述されていました。 Kibana User Guide [4.2] » Kibana Plugins これでようやく公式にプラグインがつくれるぜ！と思ったわけですが、よく調べてみるとなにやら違和感があります。 どうやらこれは、Kibanaにちょっとした機能を追加するようなプラグインではなくて、Kibanaプラットフォーム上に新たなアプリケーションをつくるための仕組みのようです。 バックエンドにNode.jsとElasticsearch、フロントエンドにAngularJSをつかったアプリケーションが、簡単につくれる

Kibana 4のプラグインをつくってみよう を書いたときに、Kibanaのソースコードを読んでいて発見したことについて紹介してみたいと思います。 Kibanaの構成 https://github.com/elasticsearch/kibana 規模 ソースコードはだいたい24,000行くらい。 各モジュールの数は次の通り。ディレクティブが多いのが目立ちます。 directive: 56 controller: 9 filter: 10 factory: 9 service: 20 provider: 0 value: 0 constant: 10 ディレクトリ構成 ディレクトリ構成はこんな感じです。 いま一番気に入っているAngularJSのプロジェクト構成 で紹介されている、folders-by-typeに近いでしょうか。 でもcomponentsの下は、機能毎にディレクトリが切られ

この投稿は、AngularJS Advent Calendar 2014 (Adventarの方)の7日目の記事です。 はじめに Kibanaって便利ですよね。 Kibana 4ではElasticsearchのAggregationsに対応したので、より柔軟な表現ができるようになりました。 とは言え、標準で用意されているグラフだけでは表現できないケースがあるのも事実です。 ところで、KibanaはAngularJSでつくられています。 幸いなことにぼくはAngularJSチョットデキルので、Kibanaを拡張することもできるんじゃないだろうか考えていたところ、Kibana 4のソースコードの中にpluginsというディレクトリがあるのを発見しました。 喜び勇んでpluginsディレクトリを開いてみたわけですが、README.txtにはPLEASE DON'T WRITE CUSTOM PL

AngularJSリファレンスの落ち穂拾いその3ということで、今回はProtractorの小ネタを紹介したいと思います。 手前味噌ですが、Protractorの説明についてはこちらをごらんください。 Protractor: AngularJSの次世代E2Eテストフレームワーク AngularJSの処理の完了を待たない Protractorには、browser.waitForAngularというAPIが用意されています。 このAPIを呼び出すと、AngularJSの描画処理や、$httpによる通信処理、$timeoutによるタイムアウト待ち処理などが完了するまで待つことができます。 Protractorは、要所要所で内部的にこのbrowser.waitForAngularを呼び出しています。 これによりテストを書く人は、AngularJSの処理が完了するまで待つという処理を書く必要がなくなる

AngularJSでは、現在のところ次の2つのパフォーマンステストが用意されています。 http://localhost:3339/benchpress-build/event-delegation-bp/ http://localhost:3339/benchpress-build/largetable-bp/ 画面の説明 それではブラウザを開き、次のURLにアクセスしてみましょう。 http://localhost:3339/benchpress-build/event-delegation-bp/ すると、次のような画面が開きます。 画面は大きく3つに分かれていて、上部が操作用のパネル、中央部がパフォーマンスの計測結果、そして下部には計測対象のHTMLが埋め込まれる形で表示されます。 タブ 画面上部には次の3つのタブがあります。ですが、通常はControlsタブしか利用しません。 C

最近、AngularJSリファレンスという書籍を書いていたのですが、紙面や時間の都合上書けなかったこともたくさんありました。 というわけで、書籍に書ききれなかった内容を落ち穂拾い的に紹介していきたいと思います。 今回はangular-hintというツールを紹介します。 https://github.com/angular/angular-hint これは、Angularチームの1人が開発しているツールで、AngularJSを使って開発したアプリケーションに組み込んで実行すると、エラーを検出してくれたり、ベストプラクティスに従っているかどうかをチェックしてくれたりします。 ただし、説明文にWIP(Work In Progressの略)と書いてあるので、まだ開発中のようです。 angular-hintを組み込むとアプリケーションが動かなくなることもあるのでご注意ください。 angular-hi

各方式は対立するのか？ ところでこれらの方式って、必ずしも対立するってわけじゃないんですよね。 JavaScriptのgeneratorはまだ使えるところが限られるけど、コールバックが不要で同期処理のように簡単に書けるのはやはり魅力的です。 一方で、ちょっとした非同期処理をReactive Programmingで処理するのはおおげさですが、ストリーム的に流れてくる複数のイベントを合成したり、時間的な操作をしたりする場合には圧倒的に便利です。 なので、適材適所で使い分けるのがよさそうです。（なんの解決にもなってない！） promise, co, RxJS さて、使い分けると言っても、方式が異なるものを混ぜて使うことは可能でしょうか？ 実は、それぞれの方式は対立しないどころか、連携することも可能です。 各方式の代表的な実装であるpromise, co, RxJSを例にみてみましょう。 まず、

AngularJSはテストを重視しているフレームワークだと言われています。 それは、DIが標準搭載されているのでサーバーとの通信などのテストしにくい部分を簡単にモックに差し替えることが出来たり、ユニットテストやEnd to End（E2E）テストのためのフレームワークを持っていたりするからでしょう。 そして、現在標準で含まれているE2Eテストのための機能は、今後ProtractorというSelenium WebDriverJSベースのフレームワークに移行すると発表されています。（AngularJS 1.2 & Beyond） これまでのE2Eテストフレームワークを捨てて新しいものに乗り替えるのには理由があります。 それは、Seleniumをベースにすることで次のような恩恵を受けられるからです。 ブラウザを操作するためのAPIが充実 複数ブラウザでの実行が可能 リモートページのテストが可能

12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe

AngularJSのようなクライアントMVCフレームワークを採用すると、クライアントサイドの規模が大きくなってくるので、できればJavaScriptじゃなくて型のあるプログラミング言語で開発したいですよね。 AngularJSは独自のクラスシステムを持っていないし、モデルやコントローラを実装するためにベースクラスを継承したりする必要もないので、altJSとの相性がよくて組み合わせやすいです。 altJSと言ってもたくさん種類がありますが、今回はTypeScriptを使ってAngularJSアプリを書くときのTipsやコツなどを紹介したいと思います。 ベースとなるプロジェクトを作る AngularJSのコードを書くとき、JavaScriptであればおもむろに書き始めることも可能ですが、altJSを使う場合はコンパイルなどの手順が必要になるので、Gruntを使ったプロジェクトを作る必要がありま

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これまでAngularJSでアプリを作ってきた中で、いくつかパフォーマンスの問題に遭遇しました。 それらの問題は、AngularJSの仕組みを十分に理解できていないために、よくないコードを書いてしまって発生しているものでした。 というわけで、AngularJSの内部構造を解説しつつ、パフォーマンスを改善するコードの書き方を紹介したいと思います。 計測できないものは改善できない パフォーマンス問題に取り組むには、ソースコード修正の前後でパフォーマンスを計測し、改善の効果を計測することが重要になります。 というわけでまずはツールの紹介です。

まず、AnuglarJSとBootstrapを組み合わせて使う最も簡単な方法は、yeomanでプロジェクトのひな形を生成することです。 yeomanを使ったAngularJSプロジェクトの始め方 yoコマンドを実行した時に、以下のように質問されます。 [?] Would you like to include Twitter Bootstrap? (Y/n) [?] Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? (Y/n) 1つ目の質問にYesと答えるとひな形にBootstrapが組み込まれます。 2つ目の質問にYesと答えるとsass-bootstrapというフレームワークがbowerでインストールされ、scssファイルからcssに

先日、AngularJSの非同期処理をRxJSにつなげてみるという記事を書いたのですが、その数日後にReactive Extensionsの公式リポジトリにこんなのが作られてました。 rx.angular.js - Reactive Extensions Bindings for AngularJS AngularJSとRxJSを連携させるためのライブラリのようです。 ソースコードを覗いてみましたが、現状では下記の2つの関数が用意されていました。 $toObservable observeOnScope どちらも$scopeの保持している変数の変更通知（すなわち$scope.$watch）をRxのObservableに変換するための機能です。 $scope.$toObservable('xxx')のように$scopeのメソッドとして呼び出すか、observeOnScope($scope,

AngularJSでは非同期処理のAPIとしてPromise API（$q Service）が用意されています。 このPromise APIですがAngularJS v1.2でPromise/A+に準拠した形になりました。 Promise/A+の詳細については下記を参照してください。 Promise/A+ AngularJSのPromise APIは非同期処理としては最小限の機能しか用意されておらず、複雑な非同期処理を書く場合は何かしらのライブラリが利用したくなります。 非同期処理のライブラリとしてはJSDeferredやjQuery.Deferredなどが有名ですが、今回はRxJSを使ってみます。 Reactive Extensions for JavaScript (RxJS) RxJSもv2.2でPromise/A+に準拠したObservable.fromPromiseが追加されたの

ここでちょっと勘違いなコメントをしてしまいました。 AngularJSで同期のように非同期関数を書く AngularJSの$resourceサービスを使うと、以下のように非同期な処理なのに同期呼び出しのように書けるということなんですが、僕はこれをPromiseを返して実現してるものだと思っていました。 var User = $resource('/api/user/:username'); $scope.user = User.get({username: 'foo'}); でも違うんですね。 公式ドキュメントを読むとちゃんと書いてあります。 AngularJS: ngResource.$resource $resourceオブジェクトのメソッドを呼び出すとすぐに空の参照を返し、サーバーから結果が返ってくるとその結果を参照に追加すると。 確かに実装を見てもそうなってました。 戻り値が配列で

AngularJSは公式で分かりやすいチュートリアルが用意されているし、日本語の記事も増えてきたし、けっこう簡単に使い始めることができるんじゃないかと思います。 でも、チュートリアルやサンプルはクライアントサイドオンリーなことが多くて、サーバーサイドも含めたWebアプリを作ろうと思うと、どういう構成にすればいいのか迷うのではないでしょうか？（僕がそうでした） 最初は試行錯誤していたのですが、書籍やネットの記事を読んだりGitHubで見つけたアプリを真似たりしているうちに、どういう構成にすればいいのかだんだん見えてきたので、解説してみたいと思います。 SPA 最近、SPA（Single Page Applicationまたは Single Page Web Application）という言葉をよく耳にするようになりました。 SPAとは、最初のページだけ通常のWebアプリと同じようにサーバーか

AngularJSを1.0系から1.2系にアップグレードした時にハマりがちなのがSCE(Strict Contextual Escaping)ではないでしょうか。 AngularJS 1.2ではSCEがデフォルトで有効になったため、アップグレードしたによりこれまで動いていたアプリが動かなくなる可能性があります。 例えば、「ng-bind-htmlにバインドしているHTMLが表示されなくなった」とか「iframeの内容が表示されなくなった」なんてことが起きたら、まずはconsole.logを見てみましょう。 下記のようなログが出力されていれば、SCEが有効になったことが原因で要素が表示されていないと考えられます。 Attempting to use an unsafe value in a safe context. Blocked loading resource from url not