パラメーターを使ってURLベースの画像を動的に変更する方法

Exploratoryには、ダッシュボードやノートの表示内容を動的に変更できるパラメーター機能があります。

このパラメーター機能はフィルタだけでなく、計算式やSQLクエリの中でなど様々な場面で利用でき、URLベースの画像を動的に変更することも可能です。

動的な画像表示ができると例えば、世界共通の売上ダッシュボードで、表示されている国に合わせて国旗が自動的に表示されるように設定することでき、ダッシュボードの視認性を高めるだけでなく、デザイン性という観点でも非常に有効です。

そこで、このノートではダッシュボードのテキストパネルの画像をパラメーターを使って動的に変更する方法を紹介いたします。

3つのアプローチ

今回は以下の3つのアプローチを紹介します。

URLを直接指定する：最もシンプルな方法で、パラメーターにURL全体を直接入力します。
URLに対応するカテゴリーを選択する：これはデータに含まれるURLをパラメーターで選択する方法です。
URLの一部をパラメーターで動的に置き換える：これはURLの構造が規則的で、一部の文字列だけが変わる場合に有効です。

今回は、以下のような全世界共通の売上のダッシュボードにテキストパネルを追加して、それぞれの実装方法を紹介していきます。

URLを直接指定する

まず最もシンプルな方法として、URLを直接指定する方法を紹介します。

任意のデータフレームが開いている状態で、プロジェクトメニューの左上の三本線のメニューからパラメーターを選択します。

パラメーターのダイアログが開いたら、新規パラメーターを追加のボタンをクリックし、パラメーター名と表示名に任意の名前を指定します。

今回はURLを指定する形になるため、データ型にはCharacter型を選択し、入力タイプにはテキスト入力を選択します。

常にURLを一意に指定したいので、「空の値をサポート」のチェックを外します。

次にデフォルト値を決めるためのダイアログが表示されるので、デフォルトの値を指定します。（今回はアメリカの国旗がデフォルトで表示されるURLを指定しています）

パラメーターを作成したら、パラメーターの保存します。

続いて、画像を表示させたいダッシュボードを開き、編集メニューからコンテンツの追加ボタンをクリックして、「テキストを追加」を選択します。

このとき、テキストパネルは、ナンバーあるいは、通常行のどちらにも追加することが可能ですが、今回はナンバーの行にテキストを追加します。

テキスト追加を選択すると、テキストパネルがナンバーの行に表示されるので、テキストの編集ボタンをクリックします。

画像を直接呼び出すときにはR言語を使って呼び出すことになるので、インラインのRコード内に、以下のようなコードを記述します。

r paste0(‘<img style=“width:100px” src=“‘, {@パラメーター名},’”>’)

これは、srcというメディアまたは画像のソースの要素を、パラメーターの値で指定するコードで、パラメーターは、パラメーター名を中括弧で囲んで指定します。

この状態でダッシュボードを実行すると、先ほど指定したデフォルトのURLが代入され、アメリカの国旗が表示されます。

パラメーターペインを開き、別のURLを入力して実行すると、別の国旗が表示されます。

これで直接URLを指定して画像を動的に表示できました。

URLに対応するカテゴリーを選択する

先程、紹介したアプローチは直接URLを指定するやり方ですが、多くの場合、直接、URLを入力するのではなく、国を選択するとそれに紐付くURLが自動的に変わるような挙動が、求められます。

そのような挙動は、元のデータに該当のURLが入っていれば実現可能です。

具体的には、各国に対応するURLの情報が、結合などによって、すでにデータ（列）に含まれているような状態を想定します。

このようなデータをあらかじめ用意しておくことができたら、国を選択するだけで動的にURLが変わるような挙動の設定が可能です。

ここからは具体的なやり方を見ていきます。まずは、URLのパラメーターのリストを作成します。

先ほどと同じように、プロジェクトメニューからパラメーターを選択して、新しくパラメーターを作成します。

任意の名前と表示名をつけて、データ型にはCharacter型を選択します。

今度は動的にURLのリストを生成したいので、入力のタイプには「値のリスト（単一選択）」を選択します。

このとき、スタイルは任意のオプションを選択する形で問題ありません。

次に、「選択なしのサポート」のチェックを外します。

「選択なしのサポート」にチェックがついていた場合は、パラメーターで値を指定しなかった時に全ての値が返る挙動になってしまうため、URLが一つに定まらずエラーが起きる場合があります。

次に、値のリストを「データフレームから値を取得」に変更し、値を動的に取得したいため、「値を動的に取得」にチェックをつけます。

データフレームには該当のURLが入っているデータフレームを選択します。

値の列には、URLの列を選択します。

この段階では、値と表示名は完全に一致しているため、パラメーターの値のリストはただのURLのリストになるだけです。

このようなときは、「表示名の列」のオプションを有効にします。

表示名の列のオプションを利用すると、実際に代入される値と表示名の列を別で管理することができます。

具体的には、表示名の列で指定した値が実際にパラメーターの値のリストとして表示されることになります。

そのため、今回は「国」の列を選択します。

このようにすると、表示名には国の情報が表示され、実際の値にはURLが表示されます。

このような設定をすることで、URLを指定するのではなく国を指定することで、動的にURLを変更することが可能になります。

これでデータに含まれるURLを国名で選択できるパラメーターを設定できました。

先程と同じようにテキストパネル内のパラメーターを指定すると、国名を変更することで、URLを変更できます。

URLの一部をパラメーターで動的に置き換える方法

これまで紹介したやり方は、直接URLを指定するパターン、あるいはURLに対応するカテゴリーの値を選択するアプローチでした。

実は今回利用している国旗のURLは、国の省略文字の二文字が常にURLに入っている形になっていて、そこが変わると動的にURLも変わるような構造を持つURLです。

そのようなときには、国を選択すると、動的にその国の情報がURLに収まるようにしたいこともあります。

上記のようなニーズは、国コードの列をあらかじめ用意しておくことで対応が可能です。

具体的には、プロジェクトメニューの左上の三本線のメニューを開いて、パラメーターの設定ダイアログを開きます。

新規パラメーターの作成のボタンをクリックし、任意の名前と任意の表示名を選択します。

データ型にはCharacter型を同じように選択して、今回は値のリスト（単一選択）を利用します。

先ほどと同じように「選択なしのサポート」オプションのチェックを外しておきます。

このとき、データフレームから値を取得を選択して、値を動的に取得にチェックをつけます。

データフレームには該当のURLが入っているデータフレームを選択し、値の列には、「国コード」の列を選択し、表示名の列に「国」を選択し、保存します。

続いて、このパラメーターを使って、データをフィルタします。

「国コード」の列ヘッダーメニューから「フィルタ」、「等しい」を選択します。

フィルタのダイアログが表示されたら、パラメーターにチェックをつけて、先程作成した「Country」のパラメーターを指定して実行します。

これで、国コードを元にデータがフィルタされるステップを追加できました。

続いて、ダッシュボードに戻って、テキストパネルでパラメーターを設定していきます。

先ほど紹介したように、この国旗のURLについては、任意の場所に国のコードの二文字の値が入るという形になっているので、、インラインのRコード内に、以下のようなコードを記述します。

r paste0(‘<img style=“width:100px” src=“’, ‘URLの前半部分’, {@パラメーター名}, ‘URLの後半部分’, ‘“>’)

上記のコードでは、三つに分解したURLの一部にパラメーターで指定した値を代入しています。

最後にダッシュボードを実行して、パラメーターペインを表示されると、国のパラメーターが表示されます。

国のパラメーターを変えると、それによって二文字の国コードの情報が動的に変更され、その結果として、データがフィルタされたうえで、URLが動的に定まるといった挙動になります。

これで一つのパラメーター変更で画像とデータを同時に更新できるダッシュボードを作成できました。