ラベル Dashboard の投稿を表示しています。 すべての投稿を表示

リストから選んだ全く別のウェブサイトを表示

Nanaeです。こんにちは。

URLフィルターに関連するテクニックです。選択した項目ごとに全く別のWebサイトを表示させる方法です。

★URLアクション
通常、選択した項目によって表示させるWebサイトを変えたいとき、URLアクションを使おうと考えると思います。たとえばこんな感じ。上の地図でJapanをクリックするとWikipediaの中で"Japan"のWikipediaサイト、Chinaをクリックすると"China"のWikipediaサイトを表示させることができます。

そのとき、URLアクションの設定画面では、Wikipediaの検索ワード前までのURLを入れ、連動させたいフィールドをそのうしろに入れますよね。

★パラメータを使ったURL連動
ここまでは通常の使い方ですが、選択した項目によって、全く別のサイトを表示させたいこともあると思います。Wikipedia内など1つのサイト内でのページではなく、たとえば、"日本"を選択したときは日本が運営している日本観光サイト、"中国"を選択したときは中国が運営している中国観光サイトなど、全く別のWebサイトに飛びたいといったニーズです。これは、URLアクションではなくパラメーターを使うことで実現します。

(ここから先で作るダッシュボードの完成図)

☆パラメータを使って全く別のWebページを表示させる
まず、パラメーターを作成します。URLは、このパラメーター作成画面でリストとして入力します。右側の表示名は、シート内でパラメーターを選択するリストとして出てくる文字なので、わかりやすく国の名前を書いておきます。

これをダッシュボード内に配置するWebページのオブジェクトに入れ込みます。このURLの入力エリアには、パラメーターも入れられるのです！


これで、パラメータに連動した、全く別のWebサイトを表示させることができるようになります！


☆パラメータを使ってフィルターされたVizを作る
次に、パラメータで日本が選択されているとき、上のシートにある地図では日本だけに絞った表示をしたいと思います。

地図ではこんなデータを使いました。観光での人気 Top 100の都市における2015年の入国人数のデータで、東アジアだけをピックアップしています。

まず、国と都市名でマッピングを行います。
次に、パラメータで日本が選択されているときには、Japanの地図だけを表示させるような仕組みを作ります。日本が選択されているとき、内部でパラメータがもっている値は日本のサイトのURLですので、URLとJapanを対応させる必要があります。このやり方を2種類お伝えします。

①計算フィールドを使う方法
URLとデータにある国を一つづつ対応させます。処理内容はわかりやすいと思います。

こんな流れで、Japan↔URL↔日本を引き継いでいます。

最後に、パラメーターで日本が選択されているとき、地図の方はJapanのデータだけ見せるようにするために、上の計算フィールドとデータにある国のフィールドが一致しているかどうかの計算フィールドを作ります。

これを満たすとき、すなわち"真"のときだけ、地図を表示させるフィルターを設定します。

②プライマリグループを使う方法
URLと国の対応表を作成して、接続します。


国でリレーションを張ってブレンドしてから、行の中に、プライマリとして元のデータから国、セカンダリとしてURLと国の対応データからURLを入れ、プライマリグループを作成します。

元のデータに、URLというグループができました。


国をグループ化したものですが、新しくURLという列ができているような動きをします。


こちらは元のデータにURL列を持ってきているので、流れはもっとシンプルになります。

最後に、上のURL列とパラメータが一致しているかどうかの計算フィールドを作り、"真"でフィルターをかけます。


これで、パラメーターで国名を選択すると、その国のデータにフィルターがかかった地図と、選択した国のWebサイトが表示されるようになりましたー！！！
ぜひ使ってみてください★

Nanae

選択した項目の画像を表示

Nanaeです。

今回は、Vizを選択したときに、関連する画像を表示させる方法です！
一般的には形状とフィルターアクションを使いますが、それに加えてここでは使える場面がより多いWebサーバとURLアクションを使う方法もご紹介します。

 1.形状×フィルターアクション
2.Webページ ×URLアクション

2の方法だと動画も表示できるので、たとえばTableauの使い方も分かりやすく表示できます↓(下図は静止画ですが、ワークブック上では動いてます)

1.  形状×フィルターアクション

まずは、形状を使う方法です。これが基本。

これは、地図、国旗、国名の3つのシートから出来ています。

①場所をマッピングした地図

フィールド名は英語でCountryとしているので、自動的に"国"で地理的役割が振られています。日本語での自動割り当てはこれからです。

②場所をクリックしたら表示させる国旗

こちらは、カスタム形状を使っています。マイTableauリポジトリ > 形状 の配下にフォルダを作り、画像ファイルを入れると、自分で用意した画像を表示できます。

各国の形状を既定から割り当てます。そのとき、フォルダ内に入っている画像の順番と、Countryの中の国の順番が揃っていると、パレットの割り当てから一括で割り当てられます。順番が揃っていない場合は、1つ1つ手で対応させていってください。

③場所をクリックしたら表示させる国名

①～③をダッシュボードに配置し、ダッシュボードアクションを設定して、完成！

2. Webページ ×URLアクション

こちらは応用編。Webサーバを立てて、Webサーバの中に画像を置いて、URLアクションで画像を見に行く方法です。

使っているシートは2つ。こちらは地図と国名だけで、国旗はシートとしては作っていません。

①場所をマッピングした地図
形状で作ったシートと同じです。

②場所をクリックしたら表示させる国名
こちらも形状で作ったシートと同じです。

2つのシートをダッシュボードに配置した後、地図上の場所を選択したら国名を表示させるようにフィルターアクションを設定しておきます。
 

 問題は国旗の表示方法ですね。
国旗を表示させる領域はWebページのオブジェクトとして入れており、選択したシートからURLアクションで飛ばして表示させています。ということで、Webサーバを立て、Web経由で見に行けるように用意します。
----------ご参考：簡単なWeb サーバを立てた手順----------
今回私はPythonを使って、ローカルにWebサーバを立てました。

1. Pythonをインストール
　　https://www.python.org/

 2.Pythonのフォルダ配下に画像を入れる
3.コマンドプロンプトでインストールしたフォルダに移動して、Pythonを起動させる
　python -m SimpleHTTPServer 8888 (ポート8888を指定) 


 4.ブラウザで起動を確認
--------------------------------------

URLアクションに記入したURLリンクを確認すると、Webサーバの中のPicturesフォルダにある、選択した国の<country>.gifを表示させるように設定されていますね。

URLアクションで表示させると、項目と画像の対応付けは名前を見るので、対応付けたい項目がいーっぱいあったとしても、項目の並び順とフォルダ内の並び順を気にせずに正確に一気に対応付けられます。これにはもちろん項目名と画像のファイル名を一致させておく必要があります。

また、形状だと静止画になってしまうgif動画でも、Webページ経由にするとちゃんと動画として表示できました。Webページを使うと、さらに用途が広がるかと思います！

以上、Tableauで選択した項目の画像をインタラクティブに表示させる方法でした！

Nanae

 Tableau PublicにPublishしたワークブックはこちら↓

ダッシュボードTips第1回　誰が為のダッシュボード（サイズとレイアウト）(Dashboard Size & Layout)

みなさま、だいぶ遅くなってしまったのですが新年あけましておめでとうございます！
Kaoriです。本年もTableauをよろしくお願いします。

さて、2016年ということでちょっと新しいことを始めようと思い、しばらく連載モノに挑戦してみたいと思います！！
Facebookでどんな内容がいいか募集したところ、ダッシュボードTipsがダントツ1位だったので、記念すべき初の連載はダッシュボードについてのいろいろをみなさんにお届けしたいと思います。

ダッシュボード編は全5回で、以下のようなコンテンツを予定しています。

　第1回　「誰が為のダッシュボード」
　第2回　「人々を導く道標」
　第3回　「行動こそが洞察を促す」
　第4回　「彷徨える色彩は禍の元」
　第5回　「ツールヒントの美学」

タイトルが厨二病なのは趣味ですね！！

5回の連載を通してこんな感じのダッシュボードを作っていきます。


あれ？思ったより普通？（タイトルは厨二なのに・・・）
と思った方、まったくその通りです！
全然普通です。

この連載では、普通だけど使いやすくインサイトを得やすいダッシュボードを目指しつつ、加えてダッシュボードを作る時のちょっとしたテクニックをお伝えできればと思っています。
ここでダッシュボードと言っているのはTableauのダッシュボードのことです。
シートの隣にアイコンがあるアイツです。
一般的なダッシュボードとはちょっと違うかもしれません。
それと、奇抜なチャートのTipsを期待した方、ごめんなさい！　今回はおもしろいチャートを作ったりすることはありません！
でも、簡単なことしかできなかったとしても、人に見てもらえる使いやすいダッシュボードを作ることは可能なんです。
Tableauのダッシュボードをを作れる人というのは、決して高度なテクニックをたくさん知っている人ではないと私は思っています。
作りたいと思った人、誰かにデータを伝えたい、そう思ってる人なんです。そういったことが伝わればいいな～と思ってこの記事を書き始めました。

ということで第1回のお題はずばり、
　「誰が為のダッシュボード」
です。

みなさんはダッシュボードを作るとき、どうやって作っていますか？
いろんな理由でTableauでデータにふれ、ダッシュボードを作ることがあると思います。
すべてのダッシュボードに共通しているのは、それを誰かに見せる、ということじゃないかと思います。
データから得た結果をプレゼンテーションで発表する、
定期的に確認する必要があるダッシュボードしてServerにパブリッシュし、みんなに見てもらう・・・などなど。

インサイトを得るまでの過程はメモ書きみたいなものなので、雑に作ってもいいですが、
いざ共有の場になった時には、見てもらう人や見てもらう人のシチュエーションによってダッシュボードを作っていく必要があります。
　誰が
　いつ
　どこで
　どのように
見るのか？

これを常に念頭に置いて作ることが、良いダッシュボードを作る第1歩です。
全5回を通してこの話しかないのですが、第1回では特にダッシュボードのサイズとレイアウトについて考えてみたいと思います。

みなさんはダッシュボードのサイズ、いくつで設定していますか？
もちろん自動一択！！いつでもどこでもきれいに合わせてくれて便利じゃん！！
むしろほかの使うの？という方にぜひ読んでいただきたい内容です。


サイズを考えるにあたり、2つの例を出して考えていきましょう。

【例1】データから得たインサイトを元に、会議で使用する資料
【例2】それぞれの仕事進捗のKPIをチェックするためのダッシュボード

例1と2で、作るダッシュボードのレイアウトや構成は変えなくてはなりません。
どういうことでしょうか？


【例1】データから得たインサイトを元に、会議で使用する資料
　・誰に：　部長やチームメンバーなど会議参加者
　・いつ：　所定の会議中
　・どこで：　会議室にてプロジェクターで投影して閲覧
　・どのように：　自分が説明しながら操作も行い、全員同じ画面を見る

このシチュエーションでは、ダッシュボードを作った自分が説明しながら
操作の順序も心得て表示していくため、それほど説明文のようなものは入れなくてもよいです。
その分、ひとつひとつのシートや文字を大きくしてインパクトのあるプレゼンテーション資料を作るように心がけます。
パワポの作り方なんかも共通するところがあるかもしれませんね。
画面は表示できる最大限を使いたいのでダッシュボードのサイズは自動で構いませんが、投影される予定のプロジェクターやモニターの解像度は意識しておくとなおよいです。
たとえばシートを詰めすぎてしまったり、細かいクロス集計やラベルとして表示した文字がつぶれてしまったりといったことがあると、プレゼン中かっこ悪い思いをすることになりますよね。
せっかくデータを使ったインサイトをみなさんに共有するのですし、できるだけスマートに決めたいところです。

たとえばこんな感じのダッシュボードを作ったとします。

大きいモニターでさくさく簡単に作ることができました。
（ほかに言いたいところもいろいろあるダッシュボードですが、まあ今は置いておきましょう）
よしよし、いい感じ。と思っていざ会議室のプロジェクターにつないだら・・・



げげ！！小さくなってしまって意図しない形になっています。
地図は字の背景みたいになってしまっているし、線グラフは傾向が縦に圧縮されすぎているし、散布図は外れ値と思っていたものがあんまり外れ値に見えないし、一番最悪なのは、クロス集計表の数字が全部#になってしまっています。。。
いざプレゼンしようとしてこんな画面になってしまったらNOOOO!!!!!って感じになっちゃいますよね。

分析している最中でしたら、いくらでも大きさを自動にして、その場で自分が見やすい形にすればよいのですが、いざ他の人に共有という段階になったら、誰にどうやって見せるのかということを考える必要が出てきます。

画面の解像度が極端に低い中でプレゼンするようなケースでしたら、まずサイズをその大きさに近い大きさに設定しておき、それでしっかり見える形に整えた後、プレゼンの直前に自動に設定する、なんていう方法があります。
今回の例では、表示できる画面が極端に小さく、どうがんばっても4枚のシートを並べるには狭すぎたので1枚のシートごとに見せる形に変更し、なおかつプレゼンで説明に使用する資料ということでストーリーするのもよさそうです。



ストーリーの使いどころやテクニックについてはそれだけでまた記事が書けそうなボリューム感なのでここでは割愛します。


では次の例を見てみます。

【例2】それぞれの仕事進捗のKPIをチェックするためのダッシュボード
　・誰に：　チームメンバー
　・いつ：　各自好きな時間
　・どこで：　Tableau Server経由で各自のPCまたはスマートフォンのブラウザからアクセス
　・どのように：　各自が自身の端末から一人で見る

これは例1よりももっと気を遣って作ってあげる必要があります。
このダッシュボードは作った人と使っている人が別にいて、なおかつ見ている環境も様々です。
見方がわからないとしても説明していあげることはできないし、思いもよらない画面から見ている可能性もあります。

こういうダッシュボードを作るときは、ダッシュボードのサイズは結構悩みます。
基本的には、一番小さい画面に合わせることになると思いますが、100人見ている中の10人しかモバイルから閲覧しているということであれば、モバイル画面に合わせる必要があるか？といったことも議論の対象になると思います。
（小さい画面で収めるということは、その分載せられる情報に制限がつくわけですから、90人を犠牲にするのか、10人に我慢してもらうのか、工数を使って両方のためのダッシュボードを用意するのか、といった中から選ぶことになります。）
これは答えがあるようなものではなく、ただ作るときにそれを意識してほしいということと、必要であれば作る人と使う人の間でコミュニケーションを取った方が良いということです。


ちなみに、レイアウトを美しく保つということ以外にもTableau ServerやOnlineを使っている場合にはサイズを固定しているとイメージキャッシュが効くというおまけまでついてきますので、Server/Onlineにパブリッシュしているワークブックを自動で作っていた方はぜひサイズを指定して作ってみてください。



では、ダッシュボードのサイズを意識していただいた上で、ダッシュボードのちょっとしたテクニックをお伝えしておきます。

まず、ダッシュボードにシートを配置する方法は以下の2種類です。
　タイル
　浮動
タイルというのはダッシュボードに枠を作ってはめ込んでいくイメージで、隙間なく詰め込まれていきます。まさしく壁に敷き詰められたタイルですね。
（隙間があるように見えているところも、空白の四角やコンテナが入っています。）
ざっくりレイアウトを作るのに非常に便利です。
その代わりピクセル単位の細かい設定はできませんし、重ねることもできません。

浮動の場合は浮いている状態になります。パワポなどと同じ感じで好きな位置に配置できますし、ピクセル単位で設定できます。
重ねて配置することもできます。
レイヤーの概念を持っているので、小さいものが下にあると隠れてしまいます。（あえて隠すテクニックもありうると思いますが。）

浮動順は赤丸の部分をドラッグアンドドロップすると変えられます。
上に記載されているシートが上にのっかっています。

自由で緻密なレイアウトができる反面、隣のシートとぶつからないようにするといった設定は自動ではできませんので自分で配置をずらす必要があります。
また、浮動はダッシュボードのサイズが自動になっていると変なところに行ってしまう可能性が高く、自動との相性は悪いです。

タイルか浮動かどちらか一方だけを使う例は少なく、一般的には大きなシートはタイルで配置し、凡例などを浮動にしてシート内に重ねてしまう使い方が多いです。
シートではできないレイアウトも、ダッシュボードでしたらこのように簡単にできちゃいます。

それからついつい見落としがちなこの部分についても解説しておきたいと思います。

下半分にある新しいオブジェクトについてですが、
浮動に切り替えてからシートをドラッグアンドドロップすると最初から浮動でシートを置くことができます。
タイルではめてから浮動に切り替えなくてもここで最初から浮動にできます。
（ちなみにShiftキーを押しながらシートをドラッグアンドドロップするとここで設定しているのと反対の設定でシートをダッシュボードに入れられますよ！）

上半分の水平方向から始まる6つの項目は、シートではないがダッシュボードの中に入れられるものになります。
イメージやテキスト、Webページ、空白はそのままの意味なので解説しませんが、水平方向と垂直方向というのがなんなのかわかりづらいと思いますので解説しておきます。

このふたつは「レイアウト コンテナー」と呼ばれるもので、タイル配置されたシートのレイアウトを適当にいい感じのサイズに変換して配置してくれる便利な箱です。
ただしあくまで適当に、です。

Japan Communityの記事（TIPS : ダッシュボードアクション ： シートクリックで別シートが表示）でも垂直コンテナーを使った記事がありましたが、コンテナーは入っているシートの表示状態によって、このチャートならこのくらいスペース必要だよねっ！と適当に判断して
コンテナーが入っているスペースの中で、コンテナー内に入れられたシートのサイズを決めて表示してくれます。
水平か垂直かはシートを縦向きに並べるか横向きに並べるかという違いです。
こういった特徴を持っているので、表示すべき値がない時は最小化しておき、値が出てきたときにスペースを広げてあたかもなかったシートが出現したように見える、というテクニックが使えます。
ただ、こいつの難儀なところは、あくまで自由にやらせてくれないと拗ねちゃうというところです。
たとえば自動で適当に調整した結果だとちょっと見づらいな・・・というときにちょっと自分で手動で広げちゃったりすると、その大きさで固定でいいんだね？わかったよわかったよ、ということでコンテナー君は自動的に広がったり縮んだりしてくれなくなります。
中に入っているチャートによってどのくらい広がるの？とか縮むの？というのはもう完全にコンテナー君の好みに準拠しますので、その辺はうまーく付き合ってあげる必要があります。
ただ、相性がいいシーンではかなりいい仕事してくれます。
コンテナーについてはぜひ公式のオンラインヘルプ（クイック スタート: レイアウト コンテナー）も見てみてください。


ところで完全に余談ですが、みなさんはオンラインヘルプってたくさん見てますか？　私は結構不精なのでオンラインヘルプを全部隅から隅まで読んだりということはしたことがないのですが、時々読み返すと結構面白いこと書いてあるなと思ったりします。
意外と知っている内容を再度読むとそういうことだったんだ～って思う記事があったりします。
私が一番なるほどね～と思った記事は「ページ」の記事だったんですが、なんでアニメーションの機能なのにページっていう名前なんだろうと思っていたら「ビューをページにしてまくっていく機能」なんだということがわかり、あ、つまりアニメーションっていうよりパラパラマンガだなと思ったりしました。
閑話休題。


ということで、ダッシュボードTips第1回はサイズとレイアウトコンテナーについて解説しました。

いろいろ書きましたが、基本は
　相手が見る環境でこのダッシュボードがどのように見えるのか
　自分が意図した形になっているか
ということをしっかり意識することだと思います。

冒頭の画像でお見せしたダッシュボードを入れておきます。今回の記事で紹介した機能をいろいろ使っています。
サイズはこのブログにはめ込むことを前提に設計して、レイアウトコンテナーも使っています。

まだまだ他にも紹介していないポイントがありますが、それはまた次回以降の記事でじっくり解説していきたいと思います。

それではみなさん、See you!


Kaori
登録: 投稿 (Atom)