見出し画像

謎解きVizの作り方

おつう

遅ればせながらMerry Christmas!!!!
先日の #Bridgeクリスマス会 では、多くのご参加ありがとうございました。Tableauのダッシュボードを使った謎解きをしましたが、「仕組みを知りたい」という声をたくさんいただいたので、僭越ながらNoteにさせて頂きます。
なお、この問題はMomoさん、いくらさんという素晴らしいメンバーとの合作です、私一人ではできませんでした。

はじめに

PublicしたVizをダウンロードして、中身を見るとすぐわかると思いますが、少しだけ拘った部分を解説します。正直一番苦労したのは、様々なスマホ端末でレイアウトが崩れていないかを確認する作業でした。

問題1：キーワードを入れるとUNLOCK

正解の判定において、「大文字」と「小文字」どちらも対応させるためには、lower関数が有効です。

LOWER（文字列）
テキスト文字列をすべて小文字に変換します。
例： LOWER("PRODUCT") = "product"

Tableau 計算フィールドのヒント

答えの入力は全てパラメータを使用しています。以下のような計算フィールドをつくることで、「Bridge」や「BRIDGE」と入力されても正解になります。あとはこの関数を色やフィルターに入れて、UNLOCKEDの時のみ次への扉が開かれるような演出にしています。

IIF(lower([Q1.パラメータ])='bridge','UNLOCKED','LOCKED')

計算フィールド：UNLOCKED
CLICK HEREは浮動の垂直コンテナに入っています

問題2：クロスワードパズルに文字を入力

ここが一番「どうやってるの？」と聞かれた部分なので少し詳しく解説します。そんなに難しいことはしてないです。
まずはじめに、タテ7×ヨコ13のマス目を区切りたかったので、以下のようなデータをエクセルで作りました。

rowsは7まで繰り返し、cols、rows以外のデータは何も入れない

この「Cols」と「Rows」をディメンションに変換して、不連続で行列にドロップすれば、クロスワードパズルのベースが完成します。

色を白にして、枠線をつければベースは完成

問題はここからで、パラメーターに入力させた文字列をどのようにこの四角の中に当てはめていくかなのですが、基本的にはCASE文だけで何とかなります。先に、計算フィールドの中身を記載します。

CASE [Rows]
WHEN 1 THEN
        CASE [Cols]
                WHEN 1 THEN
                      MID([パラメータ1],1,1)
                WHEN 2 THEN
                        MID([パラメータ1],2,1)
                WHEN 3 THEN
                        MID([パラメータ1],3,1)
                        // 中略
                WHEN 13 THEN
                        MID([パラメータ1],13,1)
        END
WHEN 2 THEN
        CASE [Cols]
                WHEN 1 THEN
                        MID([パラメータ2],1,1)
                WHEN 2 THEN
                        MID([パラメータ2],2,1)
//以下WHEN Rows = 7 WHEN Cols = 13 まで続く…

計算フィールド：Label

CASE文で行列の位置を指定し、パラメータからMID関数で取り出した文字を1文字ずつ置いていく、という繰り返し処理になります。この計算式を「ラベル」に落とせばパラメータの文字列を枠の中に表示してくれます。文字の表示位置を中央配置とし、レイアウトを調整してください。

[Label]="" or [Label]=" "

計算フィールド：Color

あとは、文字が入力されていないところにはグレーアウトさせたいので、上記の計算フィールドを色に入れました。半角スペースにも対応させているのは、この後の問題で使うためです。

dmyhighright（ダミーハイライト）のスぺルミスはご愛敬

これは有名なTipsですが、空っぽの計算フィールドを作って詳細に入れておき、ハイライトアクションでこれを指定します。すると、Vizの要素をクリックした時に、それ以外がホワイトアウトしないので便利です。

問題3：クロスワードをオフセットさせる

パラメータを入れた時の動き（完成イメージ）

先に問題の答えをパラメータで用意します、答えは「継承」でした。パラメータにはあらかじめ「漢字2文字を入力」と入れておきたかったので、そのための計算フィールドも作っておきました。

パラメータはワークブックを開いたときの値を指定できる

あとは正解の場合のみ、クロスワードで入力してもらった文字列の先頭に適切な半角スペースを入れます。不正解の場合は異なる数の半角スペースを入れることで、最終問題で浮かび上がる文字をバラバラにしています。

CASE [Q2]
        WHEN [def highlight] THEN [パラメータ 1]
        WHEN '継承' THEN "   "+[パラメータ 1] //半角スペース3つ
        ELSE "  "+[trial 1] //半角スペース2つ
END

計算フィールド：Trial 1 offset

ちなみにここは、パラメーター1つに対して1つの計算フィールドを作ってます。さらに、先に作った「Label」も対応させるのでやや面倒でした。

CASE [Rows]
WHEN 1 THEN
        CASE [Cols]
                WHEN 1 THEN
                        MID([Trial 1 offset],1,1)
                WHEN 2 THEN
                        MID([Trial 1 offset],2,1)
                //以下繰り返し

計算フィールド：Label offset

「Color」の計算フィールドでは、半角スペースも条件に入れているので、先頭の空白部分もグレーアウトしてくれるという仕組みです。

問題4：クロスワードの行列をハイライト

ここはとても簡単で、「Cols」「Rows」で指定した行列のみ真となる条件式を作り、色に入れるだけです。

CASE [Q3]
        WHEN "はいらいと" THEN [Cols] = 7
        WHEN [def word] THEN FALSE
        ELSE [Cols] = [Rows]
END

計算フィールド：Color highlight

あえてハズレの場合は [Cols] = [Rows] とし、斜めにハイライトが入るようにしました。空白をグレーアウトする「Color」と一緒に色に入れて、真偽の色分けをうまくすれば完成です。

2つのパラメータが正解しているとRAINBOWが浮かび上がる

おわりに

今回の謎解きVizのアイディアに関して、参考にさせて頂いた黒猫さん（LM-7さん）に、この場を借りて感謝申し上げます。前にWordleという文字当てゲームが流行った際、Tableauのダッシュボードだけで再現されていました。あの日、ワークブックをダウンロードして解体したときの感動を、今回のVizでは大いに活用させて頂いてます。

ここまでご覧いただきありがとうございました。
それではまたどこかで、良いお年を。

おつう

いいなと思ったら応援しよう！