JMP®からのインタラクティブなWebレポートの共有Heman Robinson、SAS、JMP 主席ソフトウェア開発者
過去 20 年間、インタラクティブな Web ページをサポートするために、競合するテクノロジが次々と登場してきました。最終的に、業界では 1 つのテクノロジが標準化され、JMP® は HTML バージョン 5 (インタラクティブ HTML) のレポートの提供を開始しました。
インタラクティブ HTML は、ポイントの識別、リンク、ブラッシングなど、JMP の多くの探索機能をサポートしています。保存したレポートは Web 上で共有したり、同僚に電子メールで送信したりできます。このホワイト ペーパーでは、インタラクティブ HTML を使用して JMP の結果を共有するタイミングと方法について説明します。
背景
HTML（ハイパーテキスト マークアップ言語）は、すべての Web ページの構造を定義するテクノロジです ( http://www.w3.org/html/ ) (Berners-Lee、1989)。HTML は、スタイル設定用のカスケーディング スタイル シート ( http://www.w3.org/スタイル/CSS/ ) (Meyer、2004)、プログラミング用の JavaScript ( http://www.ecmascript.org/ ) (Crockford、2008) とともに使用されます。
バージョン 4 までは、HTML のグラフィックスとインタラクティブ性のサポートは限られていました。このギャップを埋めるために開発されたテクノロジは、主にブラウザ拡張機能または「プラグイン」でした。これには、Java アプレット、ActiveX コントロール、Flash、Silverlight が含まれます。
2011 年頃から、Web ブラウザーはグラフィックス用の新しい HTML キャンバス要素と、インタラクティブ機能用のスライダーなどの新しいコントロールのサポートを開始しました。この頃から競合技術は衰退し始め、インタラクティブな Web ページは HTML5 を使用してサポートされるようになりました。次の図は、求人サイト Indeed.com ( http://www.indeed.com/ ) の広告におけるキーワードの出現頻度という観点からこの傾向を示しています。
図 1. インタラクティブ Web テクノロジーの求人情報
この傾向に対応して、JMP は他のソフトウェア製品と同様に、Web 開発を Flash からインタラクティブ HTML に移行しました。JMP インタラクティブ HTML レポートは、次のユーザーによって共有できる単一の HTML ファイルです。
- インターネットに投稿し、
- 共有フォルダに保存するか、
- 同僚に電子メールで送信します。
図 2. JMP インタラクティブ HTML レポート
いつ使うか
インタラクティブ HTML には埋め込みデータが必要です。グラフの作成にどのようなデータが使用されても、そのデータは Web ページに埋め込まれます。データは難読化されていますが、意欲のあるハッカーであれば読み取ることができます。
このセキュリティ リスクは、データを暗号化することで軽減できると思われるかもしれません。しかし、それはできません。データは Web ブラウザーで読み取り可能である必要があります。したがって、暗号化されたデータには、Web ブラウザーだけでなく、他のすべてのユーザーが読み取り可能な復号化キーが必要になります。データを暗号化することは、高価な防犯アラームを自宅に購入し、そのキーをマットの下に置き忘れるのと同じです。
データを匿名化することで、リスクをある程度排除できます。たとえば、名前や ID 列のないデータのサブセットを作成します。このサブセットは自分で作成するのが最も安全です。ただし、JMP レポートで使用されていない列は、インタラクティブ HTML ファイルに埋め込まれません。したがって、ラベルやその他の目的で識別列を使用しない限り、データは事実上匿名化されます。
機密データを分析する場合は、データが埋め込まれない静的 HTML 形式 (HTML バージョン 4) を常に使用できます。[ファイル: 名前を付けて保存] ダイアログでは、HTML4 は単に「HTML ファイル」と表示されます。HTML5 は、インタラクティブ性とセキュリティの両方を強調するために「データ付きインタラクティブ HTML」と表示されます。
図 3. 静的 HTML (HTML4) とインタラクティブ HTML (HTML5) の「ファイル: 名前を付けて保存」ダイアログ
埋め込みデータに加えて、インタラクティブ HTML には最新の Web ブラウザも必要です。Windows では、Internet Explorer バージョン 8 は HTML バージョン 5 をサポートしておらず、IE バージョン 9 と 10 は HTML バージョン 5 の一部のみをサポートしています。デフォルトの Android ブラウザは古くて遅いですが、Chrome などのブラウザは簡単にダウンロードできます。
2015 年現在、JMP では次のブラウザとデバイスでインタラクティブ HTML を推奨しています。
- Windows 上の IE 11 と Edge
- Windows および Mac 上の Firefox
- Windows と Mac の Opera
- Windows、Mac、Android タブレット上の Chrome
- MacとiPadのSafari
- Kindle Fire の Silk
インタラクティブ HTML は携帯電話ではテストしていません。ただし、新しい iPhone や Android の携帯電話では、問題なく動作することが多いです。パフォーマンスと機能は携帯電話によって大きく異なります。
使い方
レポートの保存
レポートを HTML5 形式で保存するには、Windows の場合は「ファイル: 名前を付けて保存」、Mac の場合は「ファイル: エクスポート」を選択し、「データ付きインタラクティブ HTML」形式を指定します。
図 4. インタラクティブ HTML (HTML5) の「ファイル: 名前を付けて保存」ダイアログ
インタラクティブ HTML は、JMP の最も頻繁に使用される機能をサポートしています。レポートにサポートされていない機能が含まれている場合は、図 5 に示すように、ダイアログに警告が表示されます。この場合、レポートの一部は、静的 HTML4 と同様に、静的画像としてエクスポートされます。
図5. サポートされていない機能の警告
概要
インタラクティブ HTML レポートを作成すると、ページの作成時に閉じられていたグラフと表は、開くまで Web ページ内で閉じられたままになります。レポートのアウトライン ボタンをクリックまたはタップして、レポート セクションを開いたり閉じたりします。
下の図は、「適合度不足」テーブルを開く方法を示しています。「分散分析」テーブルと「パラメータ推定値」テーブルはすでに開いています。
図6: アウトラインボタンの使用
JMP インタラクティブ HTML は、「モバイル ファースト」のユーザー インターフェイス設計戦略を採用しています (Wroblewski、2011)。インタラクティブ HTML レポートを作成する場合、どのデバイスで読み取られるかが常にわかるわけではありません。このため、ボタンなどのコントロールは、デスクトップでもモバイル デバイスでも大きくて使いやすいものになっています。
メニュー
メニューを使用して、レポート コンテンツの状態または外観を変更します。メニューの内容は、関連付けられているアウトラインの内容によって異なります。たとえば、プロファイラには、状態をリセットするためのメニューが 1 つあります。
図7: プロファイラーメニューの使用
Bubble Plot には、外観と動作を変更するための広範なメニュー システムがあります。
図8: バブルプロットメニューの使用
モード
ユーザー インターフェイスのモードに関しては、従来の設計アドバイスでは「可能であれば避ける」とされています (Nielsen、1993)。ただし、JMP のようにインタラクティブ性に富んだ製品をサポートするには、いくつかのモードが必要です。
よく知られている例としては、選択モードがあります。単一のオブジェクトを選択することも、複数のオブジェクトを選択することもできます。単一の選択と複数の選択は、2 つの異なるモードです。
デスクトップ製品では、選択モードを切り替えるために Shift キーと Ctrl キーが使用されます。ただし、モバイル デバイスではこれらのキーは存在しません。
このため、選択モードはページ上部に 1 組の切り替えボタンとして表示されます。デフォルトでは、この 1 組の最初のボタンが押されています。これにより、一度に 1 つのオブジェクトを選択し、他のすべてのオブジェクトを選択解除できます。
図9: 単一オブジェクトの選択
複数のオブジェクトを選択するには、2 番目の切り替えボタンをクリックまたはタップします。これにより、複数のオブジェクトを選択または選択解除できます。
下の図では、3 つのヒストグラム バーが選択されています。JMP と同様に、すべてのグラフはリンクされているため、1 つのグラフで選択された行はすべてのグラフで強調表示されます (Becker および Cleveland、1987) (Stuetzle、1987)。
図10: 複数のオブジェクトの選択
Shift キーと Ctrl キーの動作とトグル ボタンの動作には、便利な違いがあります。これらのキーを使用すると、一時的なモード切り替えが可能になり、ユーザー エラーが軽減される傾向があります (Raskin 2000)。トグル ボタンを使用すると、永続的なモード切り替えが可能になり、モバイル デバイスではよりシンプルで簡単に習得できます。デスクトップでインタラクティブ HTML レポートを表示する場合、両方の動作がサポートされます。
2 番目の切り替えボタンのペアは、レポート全体からデータにフォーカスを切り替えます。デフォルトでは、このペアの最初のボタンが押されています。モバイル デバイスでは、この最初の切り替えボタンを使用してレポートをスクロールおよびズームできます。すべてのデバイスで、レポート内のオブジェクトを識別できます。インタラクティブ HTML レポート内のほぼすべてのオブジェクトは、何らかの識別情報を表示できます。
図11: オブジェクトの識別
以下のグラフは、3 種類の異なるアヤメの種に対するフィッシャーの測定値を含む JMP サンプル データ テーブルである Iris.jmp を使用した二変量近似を示しています。1 つのデータ ポイントが、X 座標と Y 座標、および行番号で識別されています。以下の表には、 p値とそれに関連する説明が表示されています。
図12: データ値の識別
図13: p値の説明
必ずしもオブジェクトを識別したり、レポートを操作したりする必要はありません。多くの場合、目的はデータを調査することです。2 番目の切り替えボタンをクリックまたはタップすると、四角形をドラッグしてグラフ内の行を選択できます。これはブラッシングと呼ばれ、多変量データを調査するための重要な手法です (Becker および Cleveland、1987)。四角形を移動するには、四角形の中央をドラッグします。サイズを変更するには、四角形の角をドラッグします。
図14: データのブラッシング
さらに強力にするために、モードを組み合わせることもできます。ブラシを複数選択で使用すると、ブラシによって選択範囲が拡張され、下の図に示すようにデータが「ペイント」されます。
これら 2 組のモードは、データ探索のための最も一般的で便利なインタラクティブ機能をサポートします。JMP には豊富な追加モードが用意されており、その多くはツール パレットに表示されます (Cooper および Reimann、2003)。ツール パレットのメタファーはカーソルのサポートが不十分なため Web アプリケーションではあまり役に立ちませんが、これらのモードの一部は将来のリリースでサポートされる可能性があります。
図 15: 複数選択によるブラッシング
自動化する方法
インタラクティブ HTML レポートは、JMP スクリプト言語 (JSL) (SAS、2014) を使用して自動化できます。新しいコマンド「インタラクティブ HTML を保存」により、この機能が有効になります。
// 二変量フィットをエクスポートします。
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
obj = Bivariate( Y( :体重 ), X( :身長 ), フィットライン );
obj << インタラクティブ HTML( "C:\Bivariate.html" ) を保存します。
開きます( "C:\Bivariate.html" );
上記のスクリプトでは、「インタラクティブ HTML を保存」コマンドの後に「開く」コマンドが続きます。これにより、レポートがデフォルトの Web ブラウザーに自動的に表示されます。
整理方法
インタラクティブな HTML レポートを多数作成する場合は、JMP 自動発行アドイン (Valente、Brady、Kennedy、2014) が役立ちます。これにより、個々のレポートにリンクされた表紙とサムネイル スケッチを使用して、レポートを自動的に整理できます。JMP 自動発行アドインは、JMP ユーザー コミュニティ(https://community.jmp.com/docs/DOC-6689 ) からダウンロードできます。
JMP 自動公開アドインは、 http://www.jmp.com/jmphtml5/のサンプルとして、以下の表紙ページを生成しました。
図 16. JMP 自動発行アドインで整理されたレポート
今後の仕事
このプロジェクトの開発は顧客の要望によって推進されています。最も頻繁に使用される表とグラフは JMP 11 でサポートされていました。バブル プロットとプロファイラーは JMP 12 で追加されました。
今後のリリースでは、GraphBuilder に対する需要がかなりあります。また、JMP 自動公開アドインをメイン製品に統合したいと考えており、お客様からのリクエストに最も関心を持っています。
参考文献
Becker R. および Cleveland W. (1987)。「Brushing Scatterplots」、 テクノメトリクス 、127-142。
バーナーズ＝リー T. (1989)「情報管理：提案」、 CERN 。
Cooper A. および Reimann R (2003)。About Face 2.0: インタラクション デザインの基本。Wiley、322-323。
Crockford D. (2008)。JavaScript : The Good Parts。O'Reilly 。
Meyer E. (2004)。 『カスケーディング スタイル シート: 決定版ガイド』 O'Reilly。
Nielsen J. (1993).ユーザビリティエンジニアリング. Academic Press, 146-148.
Raskin J. (2000)。 『ヒューメイン・インターフェース：インタラクティブ・システム設計の新しい方向性』ACM Press、55-59 ページ。
SAS (2014)。JMP 11 スクリプト ガイド、第 2 版。SAS Institute Inc.
Stuetzle W. (1987). 「Plot Windows」、アメリカ統計学会誌、82、466-475 。
Valente D.、Brady B.、Kennedy、A. (2014)。「インタラクティブ HTML レポートを自動発行するための JMP アドイン」、 JMPディスカバリーサミット2014 。
Wroblewski L. (2011)。モバイルファースト。A Book Apart。
