Tokyoにおいて、デモを行ったときに使用したUIアプリケーション作成のツールがGroveです。今回はそのGroveに関するBlogのページの一部と、実際に皆さんが作成されたデータベースを検索するところまでを紹介します。※英語https://www.marklogic.com/blog/building-ui-applications-using-grove/https://marklogic-community.github.io/grove/MarkLogicで何かを構築したい場合、データに対する操作とともに、そのデータをどのように見たいかということも事前に必要な情報です。どのように見たいかは継続的に変化していくものですが、まずはデータを見るということも重要です。GroveプロジェクトとはMarkLogicのGroveプロジェクトは、MarkLogic上にUIアプリケーションを構築するために必要なツール、テンプレート等の関連リソースをすべて含んだツールキットです。Boot、UIティアはReactまたはVue.jsを選択できるようになっています。ReactやVue,jsのコンポーネントを使用できることから拡張性も保持しています。MarkLogicがPoCやデモでアプリケーションを作成する際には、ほとんどの場合このGroveを使用してUIアプリケーションを作っています。Startedの情報をもとに紹介します。これ以降のカスタマイズについては、次回以降に紹介していきたいと思います。Grove設定の流れGroveのデフォルト画面は以下のようなものです。(図1)図1検索のためのテキストボックスと検索ボタン、左側にファセットが表示され、該当するデータがカード形式またはリスト形式で表示されます。このような典型的な検索アプリケーションを作成し、これにReactまたはVueを使用したカスタマイズを行いながらデータを可視化していくことが可能です。Startedに沿って説明していきます。必要なのは以下のものです。次にgroveをインストールします。Groveのプロジェクトを作成します。Reactここで使用したプロジェクト名でデータベースやRESTのサーバが作成され、Groveアプリケーションはこれらのデータベースやアプリケーションサーバを使用します。(変更方法は後述)プロジェクトのディレクトリもこの名前で作成されます。プロジェクトフォルダーに移り、Groveアプリケーションを構築します。Nodeサーバのポートを指定します。ここで設定した内容でMarkLogic上に必要な設定を展開します。(事前にgradle.propertiesの中のmlUsernameとmlPasswordを変更する必要があります。..これでGroveが使用するアプリケーションやRESTサーバが指定した場所のMarkLogic上に作成されます。次にGroveを起動しますが、その前にアプリケーションのポートを指定します。ディレクトリに、.env.developmentというファイルを作成し、次の1行を追加します。アプリケーションサーバを起動します。startブラウザでlocalhost:8032を指定すると最初のスクリーンが表示されます。(図2)図2ここまでの設定がデフォルトですが、この場合、Groveアプリケーションがアクセスしているデータは、project1というプロジェクト名で指定したデータベースの中にあり、dataというコレクションに属しているものだけです。接続するデータベースを変更し、コレクションの制約を外し、左側に表示されているファセット群をリセットします。データベースを変更する方法ですが、複数の方法がありますが、最も簡単な方法は、アプリケーションサーバproject1の接続データベースをproject1-contentからアクセスしたいデータベースに変更する方法です。プロジェクトディレクトリにあるmarklogic/ml-config/servers/app-server.jsonを編集し、content-databaseを変更します。例としてdata-hub-FINALデータベースに変更したい場合には、次のように記述します。“data-hub-FINAL”,次に制約を外すために、プロジェクトディレクトリにあるmarklogic/ml-modules/options/all.xmlを編集します。検索に関する設定はこのファイルの中で多くのことが行えるようになっています。dataコレクションのみを対象としている制約を外すために<additional-query>...</additional-query>を消去もしくはコメントアウトします。(XMLのコメントは<!—と–>で囲みます。)次にeyeColorなどの不要なファセットと制約を外します。以下の要素を消去もしくはコメントアウトします。name=”gender”>...</constraint>これらの変更を行った後に、再度marklogicディレクトリに戻り、gradleでmlDeployタスクを実行してMarkLogicへ反映させます。Startedを紹介しました。この後のカスタマイズには、検索結果の表示であったり、詳細ページの表示、その他ReactやVUEを使った様々なカスタマイズが可能です。MarkLogic上のRESTサービスをセキュリティを担保して呼び出すことも容易です。機会がありましたら、グラフ等の可視化のためのカスタマイズも紹介できたらと思います。MarkLogic.J'accepte。