私は JSL を使用して多くのユーザー インターフェイスを作成しています。単純なものもあれば、かなり複雑なものもありますが、ほとんどは同様の原則に従っています。つまり、スクリプトは同様のテンプレートを使用し、ランチャー上のレイアウトは類似しており、レポートの外観も類似しています。
このプレゼンテーションでは、JSLを使ってJMP風のユーザーインターフェースをスクリプト化する方法、よく使うテンプレートの種類、そしてそのようなプラットフォームを開発する際に私が下す判断について紹介します。また、様々な表示ボックス、JSLを使ったユーザーインターフェースの作成方法、スクリプトテンプレート、ユーザーインターフェースのスクリプト化における意思決定プロセス、そしてJMPスクリプト作成に関するヒントとベストプラクティスについても紹介します。
構造化JSLを用いたユーザーインターフェース構築に関するポスタープレゼンテーションへようこそ。少し背景をご説明します。私はフィンランドの電子機器メーカーで働いており、データ統合チームでデータ統合とデータサイエンスのスペシャリストとして働いています。私の仕事の一つはカスタムJMPアプリケーションの作成で、その作成方法、というか、その中でコンテンツをどのように構造化しているかが、今回のポスターのテーマです。これは元々論文として発表する予定だったので、急いで読み進めなければなりませんでしたが、大丈夫だと思います。
さあ、始めましょう。このポスターで最も重要なことは、JMPプラットフォームを模倣してみることです。その理由は、ユーザーがJMPに非常に慣れ親しんでいるからです。JMPと同様の方法でコンテンツを整理できれば、ユーザーはツールを使い始めるのがはるかに早くなります。
こちらはJMPプラットフォームの一例です。今回は非常にシンプルなディストリビューションです。左側にはランチャー、右側にはレポートがあります。ランチャーとレポートには、ウィンドウタイトルのアイコンが表示されています。JMPはパネルボックスにコンテンツを整理します。左側のフィルター列セレクターでは、列セレクターを生成します。その下には、場合によっては追加オプションが表示されます。
中央にはこれらのボタンがあります。次の2つのボタンは列リストボックスで、ユーザーはここで分析やアクションの実行に使用する列を選択できます。この既定値の名前からも、これらの列の用途がわかります。右側にはアクションボタンがあります。
レポートの構造は一般的に非常に垂直的です。この場合は、自分の意見が見やすいように法令を配置しています。コンテンツは親子構造、つまり階層構造になっており、赤い三角形のアウトラインボックスで共通して構築されています。このタイプの構造を試みているのは、ユーザーがこの赤い三角形からアーキテクチャや分析を起動できるようにするためです。コンテンツ、クラフトボックス、テーブルボックスなどで構成された構造になっています。しかし、このような構造はJMPユーザーにとって馴染みのあるものです。
ツールとユーザーについて考えるときは、ユーザーがどのようにツールを使うかを考えましょう。例えば、ストーリーボードを使うことができます。この図のようにする必要はありません。必要に応じてコミック風の形式でも構いません。最初にこのようなビューを表示し、ユーザーが何かをクリックして次のビューに進む、といった具合です。
これを構築する際には、JMPプラットフォームがどのように動作するかを考えてみると役に立ちます。そうすれば、慣れ親しんだ環境に戻ることができるからです。ここでは詳しく説明しません。これは、どのように実現できるかを示す単なる例です。
モックアップの例をいくつかご紹介します。インターフェースの簡単なデモンストレーションや初期デザインとしてお使いいただけます。こちらはシンプルな紙バージョンです。まずはこのバージョンから始めるのがおすすめです。必要に応じて修正や更新が簡単にでき、問題があれば再作成できます。私はいつもJMP担当者に相談しています。これは非常にシンプルなものですが、試してみることができます。これはうまく動作する、これはうまく動作しないなど、必要に応じて修正できます。テンプレートを使ってもう少しシンプルなものを作成し、実際の見た目を確認することもできます。
次のモックアップ。同じように、まず紙から始めて、別のツールを使いました。今回はExcalidrawです。モックアップを作成してください。ここに追加のメモなどを追加したり、もう少し高度なJMPプロトタイプのデモを作成したりできます。これは既にプロトタイプアプリケーションから作成されていますが、部分的に使用することもできます。
データフィルターとグラフビルダーがあります。これは完全に独立して使用できます。画像もいくつか含まれています。このレイアウトを設定したら、それらの画像を別のツールに移動してください。おそらくPowerPointを使用します。PowerPointなら簡単に移動できます。そこで構造化することで、ユーザーインターフェースがどのように見えるかをより明確に把握できます。
次に、テンプレートの使用を検討し、ユーザーエクスペリエンスも忘れないでください。私はスクリプトスタイルとして独自のテンプレートを用意しています。これらのテンプレートを用意し、使用する理由は、アプリをより速く作成するためです。テンプレートはより堅牢で、よりプロフェッショナルな印象を与えます。もう一つ付け加えると、ほとんどのユーザーが依然として高解像度で使用しているため、ユーザーインターフェースはフルHDよりも高い解像度、あるいはそれよりも低い解像度向けには設計していません。
ユーザーエクスペリエンス。JMPは非常にインタラクティブなツールなので、ユーザーエクスペリエンスも考慮することが重要だと考えています。インターフェースだけでなく、ユーザーエクスペリエンスも重要です。いくつか悪いユーザーエクスペリエンスの例を挙げましょう。一つはモデルウィンドウです。例えば、プラットフォームLAN共有の場合、モデルウィンドウが表示されていますが、ユーザーはデータテーブルに戻ってどの列を使用すべきかを確認することができません。ランチャーを閉じ、テーブルを閉じ、そしてランチャーを再度実行しなければなりません。これは、私にとって悪いユーザーエクスペリエンスです。
もう一つの懸念点は、折りたたみ可能なアウトラインボックスなどがある場合、ウィンドウのサイズが変わってしまうことです。私はウィンドウを最初に作成した後は、ウィンドウサイズを固定するようにしています。そして、スクロールボックスでウィンドウを移動させます。最後に、JMPでは別々のプラットフォームを起動できるため、ツールバーやメニューがユーザーから隠れないように注意しましょう。プラットフォームを開いたまま、ツールバーメニューから次のプラットフォームを起動すれば、分析作業が大幅に高速化されます。
私のプラットフォームとJMPプラットフォームを比較してみましょう。上側がJMPプラットフォームです。この場合は、幅の狭いプラットフォームで、下側がJMPプラットフォームです。見た目はよく似ています。左側に列セレクターがあり、ユーザーが追加する一般的なリスト、右側にアクションがあります。ランチャーとの最大の違いは、このケースでは、現在分析中のテーブル名が表示されていることです。マヌーバプラットフォームでは、アプリケーション名も表示されることがありますが、このケースでは表示されません。
しかし、そこには私たちのレポートとは大きな違いがあります。ユーザー向けのオプションは基本的に全て定義されているので、ボックスは表示していません。ユーザーは赤い三角のメニューにアクセスする必要はありません。JMPプラットフォームでは、それらにアクセスする必要があります。ページボックスとシートボックスを使用できます。
さらに大きなメリットは、画面が広くて縦長なので、コンテンツを横長に整理できることです。JMPプラットフォームの多くは横長になりがちですが、私は横長にすることで画面サイズを小さくし、表示領域を広くしています。また、ここには表とアプリケーション名も表示されています。
ここにサンプルアプリケーションを1つ示します。2つの例を挙げますが、少し説明しました。これは基本的に、ユーザーがアプリケーションを実行するために実行するスクリプトです。スクリプトの各部分をそれぞれ独立させ、それぞれに責任を持たせています。設定、ユーティリティ、ユーザーインターフェースはそれぞれ独立したスクリプトにまとめているので、管理しやすいと思います。
次にスクリプトです。このメインスクリプトには、テーブルが開いている場合、ウィンドウが既に開いている場合、そしてこれらのパスがすべて満たされている場合、アプリケーションが実行中であることを示す初期テキストがあります。チェック内容によっては、ユーザーにモデルウィンドウエラーを通知することもあります。例えば、ウィンドウが既に開いている場合（モーダルウィンドウではない場合）、アプリケーションを最前面に表示して、ユーザーが引き続き操作できるようにします。
以下は、アプリケーション実行後のメインウィンドウです。これによりアプリケーションウィンドウが作成されます。これらも個別の式に分割されています。新しいウィンドウの外側にある小さな式を管理する方が、数百行にも及ぶ長い式を管理するよりもはるかに簡単です。通常は管理が難しいですが、この方が扱いやすいです。
場合によっては評価や多くの能力が必要になることもありますが、一般的にはこれがより良いと思います。この例はコミュニティから入手できます。また、2023年にフィンランドのユーザーグループで行ったプレゼンテーションから、追加の例をいくつか見つけることができます。
このポスターの簡単なまとめです。JMPプラットフォームの起動とレポートはユーザーが既に使い慣れているので、JMPのプラットフォームを模倣しましょう。ユーザーがツールに慣れるのが早くなります。ユーザーがアプリケーションをどのように使用するかを検討してください。ストーリーボードを作成し、モックアップを作成して、実際の外観を素早く確認しましょう。テンプレートをいくつか追加しましょう。堅牢でプロフェッショナルなループアプリケーションを作成できます。最も一般的な表示ボックスと、JSLでのコンテンツの整理方法を理解しておきましょう。
JMPは非常にインタラクティブなツールなので、ユーザーエクスペリエンスも忘れないでください。JMPインタラクティブは非常に重要です。ユーザーエクスペリエンスとユーザーインターフェースにご配慮ください。ありがとうございます。
