2018目次ディレクトリ構成アーキテクチャ(簡易版)まとめ第2回から少し間が空いてしまいましたが、templateで作成したプラグインのディレクトリ構成とどういう流れでデータがやり取りされるかについてみていきます。ちなみに、JavaScriptの優れた開発者ではないので、誤解している点や、効率の悪い書き方などがあるかもしれません。見つけた場合は、連絡をいただければと思います。作成したディレクトリ構成についてみていきましょう。ディレクトリ構成simple-sample-kibana-pluginがプラグインのプロジェクトのトップディレクトリになります。このディレクトリに次のような構成でサブディレクトリが存在します(なお、画像はIntelliJに取り込んだ後のディレクトリになっているので、.imlなど、不要なファイル/ディレクトリが存在しています)。主要なディレクトリ、ファイルについて簡単に一覧で説明します(順不同)。Kibanaはこのファイルのオブジェクトを読み込みプラグインを起動。設定などの読み込みもこちら。プラグインの説明などを記載する。LESS用のファイル。ブラウザ側で読み込まれるプラグインのモジュールなど。HTMLのテンプレート。Kibanaサーバー側で動作するプラグイン。APIを実装する重要なファイルについて少しだけ説明します。package.jsonnpmやyarnでビルドなどをするときに使用するパッケージ情報を記載するためのファイルです。プラグインの名前、バージョン、説明などを記載します。Kibanaのバージョンについてもこちらで管理します。ライブラリなどの依存関係についてもこちらで記載しています。}}ちなみに私は、versionなどをリリースするたびに変更しています。index.js最初にKibanaに読み込まれるオブジェクトになります。Kibanaのアプリの名前や、必要なモジュールなどを記載します。kibana.ymlから設定など読み込む処理なども書くことができます。2行目のexampleRouteはサーバー側のAPIとして利用するhapi.js用のファイルのパスになります。uiExportsはこのアプリの画面に関する設定などの記載になります。mainがあとで説明するこのプラグインのUIのためのJavaScriptファイル(public/app.js)になります。mainですので、最初に読み込まれる処理が記載されているものを指定します。app.jsというファイル名を変更する場合は、こちらのappの部分を変更したファイルに合わせましょう。config(Joi)の関数が設定ファイルの読み込みなどの処理を記載する場所です。options)の関数が初期化処理を記載する場所になります。このサンプルアプリでは、2行目のimportで読み込んだhapi.js用のファイルの関数を呼び出しています。引数で渡しているserverがhapi.jsのserverオブジェクトになります。APIを追加しています。});};public/app.js画面用のモジュールです。uiRoutesという機能を使用して、アプリの呼び出しURLを定義します。テンプレートで作成したばかりの場合は、/というURLが追加されるのみです。処理を書く部分になります。templateで作成したプラグインでは、“title"など表示に必要なデータを$scopeというオブジェクトに詰め込んでいます。これはAngularJS(1系)でのモデルオブジェクトになります。});server/routes/example.jshapi.jsというNode.jsのためのサーバーフレームワークです。APIを記述するために使用しています。API内部で記述します。});}pathの部分がブラウザ側からアクセスするURLになります。実際にElasticsearchとやり取りする処理の書き方については、次回の記事で説明します。アーキテクチャ(簡易版)ざっくりですが、ファイルやディレクトリについて説明しました。簡単なデータのやり取りについての流れを説明します。Kibana自体はNode.jsで実装されサーバーとして動作していますが、ブラウザでアクセスすることで画面を描画しています。簡単なコンポーネントを並べるとデータのやり取りはこのような形です。すごく簡易で大雑把な絵ですが。実際のプラグインとしては大きく、2つの処理があります。絵に記載しましたが、ブラウザ上の処理についてはAngularJSが主なフレームワークで、サーバー上の処理についてはhapi.jsがフレームワークとなっています。まとめということで、今回はディレクトリ構造とファイルの説明、どういったフレームワークが使われ、データのやり取りがどのように行われているか説明しました。UIを元にElasticsearchとのデータのやり取りなどについて紹介していきます。