oneWEX検証メモ - (4)ApplicationBuilderによるWebアプリの作成と文書の検索

#はじめに
oneWEXを使ってみた時のメモです。

ここでは、oneWEXの"検索/探索"という機能に着目し、Application Builderを使って文書の検索がどのように行えるかをやってみたいと思います。

##関連記事

インストール関連
oneWEX導入メモ / Ubuntu編
oneWEX導入メモ / RHEL7.6 オフライン編

検索関連
oneWEX検証メモ - (0) 概要理解
oneWEX検証メモ - (1)ファイルシステムクローラーによるデータの取り込み / データセット、コレクションの作成
oneWEX検証メモ - (2)Windowsファイルシステムクローラーによるデータの取り込み
oneWEX検証メモ - (3)ContentMinerによる文書の検索
oneWEX検証メモ - (4)ApplicationBuilderによるWebアプリの作成と文書の検索

分析関連
oneWEX検証メモ - (5)ContentMinerによる分析 / ガイド付きモード
oneWEX検証メモ - (6)ContentMinerによる分析 / 各種"ID情報"をベースとした分析

API関連
oneWEX検証メモ - (7)REST API

全体像

今回は、Windowsファイルシステムクローラーで取り込んだデータをベースに考えます(NFSマウントのケースでも同じですが。
ContentMinerのところでも記載しましたが、残念ながらoneWEX自体にはクロール対象のファイルをHTTP経由でアクセスさせる機能を提供してくれないようです(Webサーバー機能もあり、ファイルにアクセスすることもできているにも関わらず!!!)。
なので、わざわざHTTPでファイルにアクセスする仕組みを個別に構築する必要があります。
その上で、Webアプリを作る際に、検索結果のをカスタマイズして、その公開した仕組みに応じたURIに変換する、ということをやる必要があります。
※本当にもっとスマートな方法はないんだろうか???

WebServerの設定

ここでは、Windows Server上にWebServer(IIS)を立てて、検索した文書にHTTP経由でブラウザからアクセスできるようにすることを想定します。
ここは本質的な所ではなく、やり方も色々あると思うので詳細は省略します。
とりあえず、IIS上で仮想ディレクトリとしてクロール対象のディレクトリを登録し、http://<winserver_host>/oneWexTest03/...というURIでファイルにアクセスできるようにしておきます。

ApplicationBuilderによるアプリ開発

ApplicationBuilder概要

参考: アプリケーションの構築
AppBuilderは、oneWEXの検索/分析機能を利用したWebアプリケーションの開発支援ツールです。ブラウザからGUIベースでWebアプリケーションを開発できるような機能が提供されています。

以下のURLでApplicationBuilderにアクセスします。
https://<hostname>:443/builder/

データソース作成

まず、これから作成するWebアプリケーションで検索/分析対象とするデータ(コレクション)を登録します。ApplicatoinBuilder上は、取り扱うデータはデータソースというリソースとして登録されます。
左上のメニューボタンを押してプルダウンメニューからデータ・ソースを選択します。

データソースの作成をクリック

バックエンドとして Local oneWEX backend を選択し、検索/分析対象のコレクションを選択し、作成ボタンを押します。

データソースが登録されました。

1つのWebアプリケーションで複数のデータソースを扱うこともできるので、必要なだけここでデータソースを登録しておきます。

プロジェクトの作成

左上のプルダウンメニューから作成を選択します。

プロジェクトの作成をクリック

名前、パスを指定してOK

先ほど作成したデータソースがリストされるので、必要なデータソースを選択して次へ。
(複数のデータソースを登録しておけば、複数データソースを選択することもできます。ここでは1つのみ選択。)

全体のレイアウトをカスタマイズします。ここではデフォルトのままにして、次へ。

ページタイトルを設定して、先ほどの全体レイアウトの中の真ん中部分にあるページ・コンテンツ域部分のレイアウトを選択します。ここでは3列

ページのカスタマイズ画面になるので、ここで、上にあるウィジェットをしたのレイアウト域にドラッグ&ドロップで配置していきます。

例えばこんな感じにウィジェットを配置してみます。

左側の枠の絞り込みのウィジェットで"ファセットの選択"をクリックし、ファセットのプルダウンメニューからDirectory_Nameを選択してみます。

右側の枠のグラフのウィジェットで"ファセットの選択"をクリックし、ファセットのプルダウンメニューからLast_Modified_Dateを選択してみます。

結果、こんな感じになります。とりあえずカスタマイズはここまでにして、次へ。

プレビュー画面が表示されるので、ここで実際に動かしてみることができます。

検索窓に「トランザクション」と入れて検索してみると、こんな感じで結果が表示されました。

結果リストのURIは、クローラーごとにスキーム名が違っているようで、Windowsファイルシステムクローラーの場合はwinfs://というスキーム名が付きます。また、ContentMainerでみた時のように日本語がエンコードされた状態になっています。
右側の枠のLast_Modified_Dateは、データが少なくて最終更新日のばらつきもないので変なグラフになってますが、これは棒グラフで最終更新日の時期ごとに棒グラフになって件数が表示されています。

まずは一旦基本的な形はできたので保存します。

"アプリとして表示"をクリックすると、正式なアプリとして実行することができます。

このURLを公開すれば、各ユーザーがこのアプリケーションを直接利用できるということになります。

ファイルアクセス用のカスタマイズ

さて、結果のリストのURIがwinfs://という謎のスキーム名になっているので、このままではクリックしても目的のファイルにアクセスすることはできません。クリックしたら目的のファイルにたどり着けるようにカスタマイズしてみます。

ページの編集画面に戻って、結果リストオブジェクトの編集ボタンを押します。

コードの編集をクリック

右側のコードの欄でHTMLタブを選択すると、HTMLのソースを編集してカスタマイズすることができます。

元のソース

変更前

<div class="template-list template-list1-<%= guid %>" onclick="clickMoreHandler()">
  <% items.forEach(function(item, i){ %>
    <div class="template-root<%= item.uniqueId == selectedId ? ' template-selected' : '' %><%= item.elevated === 'true' ? ' template-elevated' : '' %>">
      <div class="template-title"><a class="template-link" href="<%= item.link %>"><%- item.title_h || item.title %></a></div>
      <% if (item.date) { %>
        <div class="template-date"><b>Date:</b> <%= item.date %></div>
      <% } %>
      <div class="template-subtitle"><%- typeof(showMoreValues) !== 'undefined' && showMoreValues[i] || item.subtitle_h || item.subtitle%></div>
      <div class="template-link-text"><%= item.link %></div>
    </div>
  <% }); %>
</div>

以下のように編集します。

変更後

<div class="template-list template-list1-<%= guid %>" onclick="clickMoreHandler()">
  <% items.forEach(function(item, i){ %>
    <div class="template-root<%= item.uniqueId == selectedId ? ' template-selected' : '' %><%= item.elevated === 'true' ? ' template-elevated' : '' %>">
      <div class="template-title">
        <!-- <a class="template-link" href="<%= item.link %>"><%- item.title_h || item.title %></a> -->
         <% var url = item.link.replace('winfs:', 'http:').replace('c:/', ''); %>
         <a class="template-link" href="<%= url %>"><%= decodeURIComponent(item.title.replace('winfs://xxx.xxx.xxx.xxx/c:/oneWexTest03/', '')) %></a> 
      </div>
      <% if (item.date) { %>
        <div class="template-date"><b>Date:</b> <%= item.date %></div>
      <% } %>
      <div class="template-subtitle"><%- typeof(showMoreValues) !== 'undefined' && showMoreValues[i] || item.subtitle_h || item.subtitle%></div>
      <!-- <div class="template-link-text"><%= item.link %></div> -->
      <div class="template-link-text"><%= url %></div>
    </div>
  <% }); %>
</div>  

item.linkの値の、winfs://...部分を、http://...というように、IISで公開したアドレスに変換しています。IPアドレス部分はマスキングしていますが(xxx.xxx.xxx.xxx)、ここはWindowsServerのアドレスが入ります。(変換先のフォーマットは、当然のことながらファイルの公開方法に依存します。)
さらに、表示部分はURLエンコードされてしまうと分かりにくいので、デコード処理を入れています。

これで保存しなおしてアプリケーションを実行してみると、結果のリスト表示がデコードされて見やすくなりました！

さらに、リンクをクリックすると、ブラウザの機能でファイルのダウンロード&アプリで直接ファイルを開くことができるようになりました！

#まとめ
とりあえず、ApplicationBuilderを使用して、検索して結果を表示してリンクをクリックしたらファイルをブラウザ経由でダウンロードしてファイルを適切なツールで開く(Word/Excel/PDFなど...)ということを実現するアプリはサクッと作れました。
ただし、これ以上のことをやろうとすると、なかなか壁にぶち当たることが多く、難儀します。
他のウィジェットとかもあるようですし、カスタマイズの余地も色々あるのですが、いかんせんマニュアルの情報が少なすぎて、使ってみて試行錯誤しながら進めないといけないですし、問題判別の情報も少なすぎて、問題発生時にすぐに行き詰ります。単純なアプリケーション以外であれば、プロトタイプや動作確認用アプリとして作成するためのツール、くらいの位置づけで考えておいた方が無難な気がします。
本命としては、API使って一からアプリ作るのがよいのではないかと思います。