関連のツールの紹介、使い方などをやさしく説明しています。Tumblr皆さん、こんにちは!今回は最近Bubbleに新しく追加されたSlugの機能を紹介していきます。開いたときに、下図の赤枠のように、各データベースに「Slug」という項目が増えていることにお気づきでしょうか?実はこれ、2020年8月にリリースされたBubbleのとっても便利な機能なのです。content」にDataを指定することがあると思います。idが付与されているのが分かると思います。idの代わりにURLに任意の文字列を設定できるというのがSlugの機能なのです。先ほどのデータのSlugを「slugtest」と設定して確認してみましょう。(設定方法は後ほど説明します)このように、短くて視覚的にもわかりやすいURLを設定することができました。それではどのようにSlugを設定すればよいのか、早速見ていきましょう!Bubbleの公式マニュアル(英語)はこちらをご確認ください。Slugの設定方法Slugの設定は、以下の2通りの方法で実現できます。dataタブから設定するワークフローから設定するそれぞれ具体的に説明していきます。dataでデータを直接編集する方法です。この方法はアプリの管理者のみができる作業になりますので、アプリの中で設定させたい場合(入力された項目などをSlugの値に設定したい、等)には、次の「ワークフローから設定する」の方法を確認してみてください。content」に何か設定しているもので試してみましょう。ラボで以前紹介した以下の「twittel」や「nosyu」のアプリ作成を実施されている方は、それぞれ「profile」ページや「nosyu」ページで確認ができます。idをURLに使用していることがわかります。Users」のDataを選択しましょう。前提として、Userには事前にデータを登録しておいた状態とします。Slugの項目はまだ空になっていますね。左側にある鉛筆マークを押し、データの中身を直接編集しSlugを設定していきましょう。今回は先ほど紹介した例のとおり、「slugtest」としました。idが表示されていた部分が「slugtest」に置き換わっているのが確認できます。ワークフローから設定するもう1つの方法として、ワークフローでSlugの値を設定する方法があります。こちらはアプリ内で動的にSlugの値を設定することができます。確認のために簡単なアプリを作成してみましょう。ユーザー登録画面を用意し、メールアドレス、パスワード、Slugを入力できるように用意します。入力はInputを、登録するボタンはButtonを使用しましょう。次にワークフローの設定です。up」からサインアップをして、Userにデータを登録します。Step2でいよいよSlugの設定です。slug」を選択してください。Slugの値は、今回は入力された値を設定するようにしましょう。その後Step3で入力値をクリアし、Step4ではmypageというページに遷移するようにしましょう。User」を設定しておいてください。mypage側は、単純にSlugの値を表示させるだけにしています。content」を「User」にするのを忘れずに。それでは実際に動かしてみましょう。メールアドレス、パスワード、Slug値を入力して登録ボタンを押下します。mypageに遷移すると・・・この通り、Slugに設定された値が、URLの末尾にも表示されるようになりました!今回はSlugの値を直接入力させましたが、例えばユーザーIDなど、一意になる項目の値をSlugに入れるようにワークフローで設定してあげてもよいですね。便利なSlug機能ですが、Slugに設定できる値としていくつか制限があるので覚えておきましょう。今回の機能拡張では、Slugの設定ができるだけではなく、条件として「Slugとして設定できるかどうか」を判定できる機能も備わっています。具体的な使用例について考えてみましょう。value」という「Slugの値が無効だった場合にvisibleにする」という条件を設定しました。これにより、ユーザーID(=Slugの値)として更新したいInputの値がSlugとして無効であった場合に、Conditionalに記載したとおり「このユーザーIDは既に使われているか、無効な値です」というTextを表示させることができるようになりました。ちなみに有効か無効かのチェックですが、Slugの値の重複確認のほかにも、留意事項に記載した他の内容もまとめてチェックしてくれます。個別指導などを行っています。)引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。