ノーコードツールbubbleでページ遷移後に特定の位置までスクロールする時にハマったこと

経緯（ポエム）

備忘録として記録したいと思います。
bubbleでアプリを作っていたんですが、思わぬところでハマってしまって半日潰れてしまったので、記録しておこうかと思います。
どうして半日もかかってしまったかというと..もちろんこの新しいツールに不慣れで、初めてだったこともありますが、先行する資料もまだ多くなかったんですね。
そこで、これは書くべきかと思いまして、こちらQiitaに初めて投稿することにしました。

しかしこちらには、バブルソートとか、バブルチャートとか、バブルで検索される専門の方々が多くおられるので、こういうノーコード系の話はどうなのかなと思いましたが、jQueryでも試みた（頓挫）ので、許してもらえると嬉しいです。

きっとこの記事を読む方は方法だけ知りたいという方が多くいらっしゃるかと思うので、そちらから書いていきます。

問題対応時の状況

• Reusable ElementsでHeaderを作成した。
• Header内に設定したヘッダーメニューはすべてトップページにリンクしている。
• トップページには各コンテンツが入っており、スクロールする形で次のコンテンツに移動できるようになっている。
• ページ全体が縦に長くなっている状態。

環境

(以下はbubble設定メニューからのコピペ)

• bubble version 11 (Workflows with consecutive database update actions (e.g. create a new thing, update a thing, delete a thing) are batched together.) of the Bubble Engine.
• The most recent upgrade was done on 01/23/2021

実現させたいこと

• トップページ外からヘッダーメニューのリンクをクリックして、任意の場所までスクロールさせたい。

HTMLでいうidを利用したページ内リンクをbubbleでやろうということです。普通のプログラミングならリンク元に#targetを指定するだけで済む話なんですが...

最終的にうまくいった方法

Link要素の Data to send で値を指定し、スクロールさせたいページでワークフローを設定します。
ワークフローは、ページロードがロードされたら、URLからData to sendの値を取得し、only when を連ねて条件分岐の else if のように使い、スクロールさせるという方法です。
以下に詳述します。

１．Link要素に送るデータを設定する

Link要素で作成したリンクをダブルクリックして、設定メニューを開きます。

Visual Elements の Link要素には、Link destination と Destination page（外部リンクの場合は Destination URL） でリンク先（遷移先）を指定できる他、内部リンク（Internal page）の場合は「Data to send」という項目が用意されているので、これを利用します。

ここに、ーー何でも構いませんがーーページ内にリンクする場所の名前など分かりやすい名前を入れます。
仮にここではcontent1、content2としておきます。

２．トップページのワークフローを設定する

上段の正方形が並ぶ部分は「When Page is loaded」にします。次のアクション追加ですが、「Element Actions」の「Scroll to」を選択します。

Elementにはどの要素までスクロールさせたいかを指定します。
指定したらその下に Only when があるので、ここで先ほど設定したURLに仕込んだ値を取り出して、評価させます。
Only when の隣にある click を押してメニューを開き、一番下の「 Get data from page URL」を選択します。
すると、さらにメニューが出てきて「どんなデータを取得するのか」を聞かれます。
ここは１つ目の Type を Path に（デフォルトでは Parameter）、２つ目の Type は　text（デフォルトそのまま）にします。

この時点でどこか適当なところを押してメニューを閉じようとすると、Only when が赤くなって設定が完了していないと注意されます。Only when の続きを設定します。
現在 Get path from page URL(More...) となっているはずなので、More をクリックし、is を選択。
is の隣に Serach と出てきますが、ここに、先ほど仕込んだ値を一字一句正確に入力して、Enterを押します。

現時点で、Only when メニューは次のようになっているはずです。

Get path from page URL is "content1"

設定できたら、同じ要領で次のStepに新しいアクションを追加していって完成です。

以下、うまくいかなかった方法

覚えている限り書いていこうと思います。

jQueryで力技 → 頓挫

Connective Cloud っていう Plugin を入れると、ワークフローで javascript/jQuery が使えるようになるんです。
それで、楽勝だと思っていろいろやってみたんですが、ダメでした。
Connective Cloudって、ドキュメントらしいドキュメントが見当たらず、それっぽいところ見ようとしたらSSL対応してないっぽくて、見るのやめた。それ以外でってことで調べたが、英文含め情報が皆無。なんてこった。

Insert dynamic dataで行けるかと思った

とりあえず勘を頼りに書いてみました。if文の条件式の中に Insert dynamic data で作られた青文字の文字列を突っ込んでみましたが、結果は動きませんでした。

要素にidを指定して、リンク元から直接指定したidの要素まで飛ばせると思った

次に一旦 javascript/jQuery から離れて、bubbleの機能だけでトライ。Settings の General タブから、
「Expose the option to add an ID attribute to HTML elements」にチェックを入れると要素にidが設定できるようになるので、これに向けて#idでリンクを飛ばせばいける！と思いました。

この時点でdata to sendでURLの末尾を変えられるらしいことに気づくことができました。が、まだ解決しませんでした。
意気揚々と #content1 などと　#から始まる値をData to send に設定したため、飛ばされた先のURLが

ttps://xxxxxxxxxxx.bubbleapps.io/version-test/#content1

になってしまいました。
target=content1 や、?target=content1 なども試しましたが、結果スラッシュの後ろに乗っかる形になるのは変わらず。

javascriptでスラッシュを消したURLを再生成して..

そもそもあの小さい画面はコード書くのに適していないんですよ。タイプミスを示す赤い波線がいっぱい出てくるし、文字も小さいし..面倒だったのでそのまま書いてたんですけどね。
こんなコードを書きました。もう消しちゃっていて以下は再現になりますので、ミスがあると思いますが大体こんな感じでした。

const currentUrl = location.href;
const hashTag = location.hash;
const targetUrl = currentUrl.slice( 0, -(hashTag+1));
window.location.href = targetUrl;

これをページがロードされたら実行されるようにワークフローに仕込みました。うまくいきませんできた。
後から考えたらこれって普通に（ページ遷移→コード実行→ページ遷移）の無限ループなんですが、そうはならなかったです。

この時点で、プレビュー画面からスラッシュを取って#idをいじればページ内移動が出来そうなことが分かっていました。

断言できないのは、その方法でページ内移動ができる時とできない時があったからです。どういう仕様なのか、まだよくわかっていません。

jQueryで要素のoffsetを取得して...

URLからハッシュタグを取得して、要素のidと突き合わせてoffsetを取得するところまではできました。
そこからなぜかうまくいかず。。以下は再現です。大体こんな感じのコードでした。

const hashTag = location.hash;
const position = $(hashTag).offset().top;
$("html, body").animate({scrollTop:position}, 500, "swing");

何か別の動きと干渉していたのかなと、今になって思いますが、それはまたいつか機会があれば検証してみたいと思います。

まとめ（ポエム）

ともかく、結果的にはコードを書くことなく本当にノーコードで解決できたので、学習コストをケチらず、急がば回るべきだと実感させられました。

今回多くの場合はGoogle検索でいろいろと情報を集めてああでもないこうでもないと試行したんですが、
一番有用だったなと感じたのはやっぱりbubbleの公式ドキュメントとブラウザのGoogle Translateでした。
といってもドキュメントの頭からしっぽまですべてに目を通すという訳ではなくて、
あの、設定項目のinputのところでしばらくカーソル置いて、なにもしないでそのままにしていると、ふっと「[？] see reference」っていうのが出てくるんですよ。
それを押したら、英語がばあーって出ちゃうんですが、そこでプライドとかインテリぶったりとかしないで、躊躇なく左クリック、日本語に翻訳（T）を押すんです。誰も見てないから、かっこ悪くなんかないです。以上です。