皆さん、こんにちは！今回は最近Bubbleに新しく追加されたSlugの機能を紹介していきます。
Slugとは
突然ですが、Bubbleの開発画面から Dataタブ -> App dataタブ を開いたときに、下図の赤枠のように、各データベースに「Slug」という項目が増えていることにお気づきでしょうか？
実はこれ、2020年8月にリリースされたBubbleのとっても便利な機能なのです。
Bubbleでアプリを作成する際、前のページから渡されたデータを受け取るため、ページの設定で「Type of content」にDataを指定することがあると思います。こういったページのURLを見てみると、図のようにURLの後ろにながーいunique idが付与されているのが分かると思います。
このunique idの代わりにURLに任意の文字列を設定できるというのがSlugの機能なのです。先ほどのデータのSlugを「slugtest」と設定して確認してみましょう。（設定方法は後ほど説明します）
このように、短くて視覚的にもわかりやすいURLを設定することができました。
それではどのようにSlugを設定すればよいのか、早速見ていきましょう！
Bubbleの公式マニュアル（英語）はこちらをご確認ください。
Slugの設定方法
Slugの設定は、以下の2通りの方法で実現できます。
- App dataタブから設定する
- ワークフローから設定する
それぞれ具体的に説明していきます。
App dataタブから設定する
1つ目はDataタブの中にあるApp dataでデータを直接編集する方法です。
この方法はアプリの管理者のみができる作業になりますので、アプリの中で設定させたい場合（入力された項目などをSlugの値に設定したい、等）には、次の「ワークフローから設定する」の方法を確認してみてください。
まずは自分が作成したアプリの中で、ページのAppearance設定の「Tyep of content」に何か設定しているもので試してみましょう。
※ノーコード ラボで以前紹介した以下の「twittel」や「nosyu」のアプリ作成を実施されている方は、それぞれ「profile」ページや「nosyu」ページで確認ができます。
例えば以下のページでは、「User」Dataのunique idをURLに使用していることがわかります。
次に、Bubbleの開発画面で Dataタブ-> App dataタブ を選択します。今回は「User」のデータのSlugを設定していくので「All Users」のDataを選択しましょう。前提として、Userには事前にデータを登録しておいた状態とします。
Slugの項目はまだ空になっていますね。左側にある鉛筆マークを押し、データの中身を直接編集しSlugを設定していきましょう。今回は先ほど紹介した例のとおり、「slugtest」としました。
この状態でURLを見てみると、先ほどの例のとおり、URLにunique idが表示されていた部分が「slugtest」に置き換わっているのが確認できます。
ワークフローから設定する
もう1つの方法として、ワークフローでSlugの値を設定する方法があります。こちらはアプリ内で動的にSlugの値を設定することができます。確認のために簡単なアプリを作成してみましょう。
ユーザー登録画面を用意し、メールアドレス、パスワード、Slugを入力できるように用意します。入力はInputを、登録するボタンはButtonを使用しましょう。
次にワークフローの設定です。Step1ではAccountの「Sign the user up」からサインアップをして、Userにデータを登録します。
Step2でいよいよSlugの設定です。Slugはデータベースの項目ですが、通常の「Make changes to thing」ではなくDataの「Set a thing's slug」を選択してください。
Slugの値は、今回は入力された値を設定するようにしましょう。
その後Step3で入力値をクリアし、Step4ではmypageというページに遷移するようにしましょう。Slugの確認のために今回は「Data to send」に「Current User」を設定しておいてください。
mypage側は、単純にSlugの値を表示させるだけにしています。ページのAppearance設定で「Type of content」を「User」にするのを忘れずに。
それでは実際に動かしてみましょう。
メールアドレス、パスワード、Slug値を入力して登録ボタンを押下します。
mypageに遷移すると・・・
この通り、Slugに設定された値が、URLの末尾にも表示されるようになりました！
今回はSlugの値を直接入力させましたが、例えばユーザーIDなど、一意になる項目の値をSlugに入れるようにワークフローで設定してあげてもよいですね。
使用上の留意事項
便利なSlug機能ですが、Slugに設定できる値としていくつか制限があるので覚えておきましょう。
- 使える文字は小文字英字・半角数字・ハイフンのみ（すべて半角）
- 文字数は250字まで
- 同じ属性のSlugについては重複する値は設定できない（重複する場合は、下図のように自動でハイフン+数字が末尾に付与されます）
その他の機能
今回の機能拡張では、Slugの設定ができるだけではなく、条件として「Slugとして設定できるかどうか」を判定できる機能も備わっています。
具体的な使用例について考えてみましょう。
例えばユーザーIDの値をSlugとして使用していた場合、ユーザーIDを変更する際に他のユーザーとIDが被っていたらエラーを表示させたいですよね？
このような場合、エラーメッセージを表示させるかどうかのConditionalとして「can have the slug value」または「cannot have the slug value」という条件を使ってあげると簡単に実現できます！どちらを使ってもよいですが、下の図ではエラーメッセージの表示条件として、「cannnot have the slug value」という「Slugの値が無効だった場合にvisibleにする」という条件を設定しました。
これにより、ユーザーID（=Slugの値）として更新したいInputの値がSlugとして無効であった場合に、Conditionalに記載したとおり「このユーザーIDは既に使われているか、無効な値です」というTextを表示させることができるようになりました。
ちなみに有効か無効かのチェックですが、Slugの値の重複確認のほかにも、留意事項に記載した他の内容もまとめてチェックしてくれます。（便利！）
まとめ
いかがでしたか？
早速、自分で作成したアプリにもSlug機能を導入して、見やすい・わかりやすいURLを実現してみてください！
