皆さん、ごきげんよう！！
今回の記事では、BubbleにおけるSlug機能と、再利用可能な要素について解明していきたいと思います。特にSlugに関しては、比較的新しい機能で、難しいイメージがあるとは思いますが、ここでしっかりと基礎を固めていきましょう。
この記事の目次
Slug
概要
Slugとは、データベース内のあらゆるThing（エントリー。つまりレコードデータ）に割り当てて、そのURLとして動作する新しい組み込みフィールドです。Slugsに到るまでは、BubbleアプリのURLは常にそのThingのユニークなIDを指していました。例えば、BubbleのURLは以下のようになっていました。
上の画像は “Scone “という商品のURLを示していますが、その商品を取得するためには、その商品のユニークなIDを追加しなければなりません。
これで、”Scones “は以下のようになります。
Slugsを使えば、どんなものでも独自のURLを持つことができるので、より短く、より検索しやすく、より記憶に残りやすくなります。
データタブに移動します。あなたは、ユーザーに添付されている “Slug “組み込みフィールドを見ることができます！これは、ユーザーのようなものに最適です。別の例を見て、自分のアプリケーションにスラッグを設定する方法を説明しましょう。
ステップ1. データ型を作成する
マーケットプレイスアプリの商品データタイプを作成した場合、顧客を直接商品ページに送りたいと思います。この製品データタイプでは、手動で、またはユーザーが直面するフォームを使用してエントリ（レコードのデータ）を追加する必要があります。
ステップ2. スラッグを設定する
データベース内に作業するエントリがある場合、2つの方法でそのスラッグを設定することができます。
エントリ作成時に手動でスラッグを設定する
新しいエントリを作成する際には、スラッグを直接設定することができ、それには小文字、数字、ハイフンのみを含めることができます。
注意としては、上記以外の文字でスラッグを手動で入力するとエラーになってしまいます。また、スラッグが250文字を超えると最大長を超えてしまいます。
ワークフローでスラッグを動的に設定する
Dataアクションの下には、”Set a thing’s slug “というアクションがあり、任意のモノのスラッグを動的に設定することができます。
Make changes to thing “ではスラッグ値を変更することはできませんし、コンセプトは似ていますが、”Set a thing’s slug “と呼ばれる別のアクションで設定します。
このアクションでは、任意のスラッグを動的に設定することができます。上の画像では、リピートグループの中にある商品のスラッグを設定しています。
ステップ3. エントリに移動
Slugを設定したら、通常のようにエントリーページに移動します。リピートグループの場合、現在のセルのProductを送信します。
入力されたProductページ(現在のセルのProductを受け入れる)は、新しく設定したSlugでProductを受け取ります。
Slugオーダー
ページ構造の標準としてSlugsがあるので、Bubbleが皆さんのURLを設定するという階層があります。
1.ページのSlug
2.URL用バックアップフィールド
3.ユニークID
Slugが設定されている場合、それはBubbleが使用するものです。スラッグが設定されていない場合、Bubbleは皆さんのページにバックアップフィールドがあるかどうかを調べます。もしあなたのページにバックアップフィールドがない場合、そのページはそのユニークなIDがデフォルトとなります。
Slugの重複
同じデータ型を共有している場合、同じ名前のスラッグを2つ持つことはできません。
試してみると、上の gif のように slug-1, slug-2, slug-3 などが追加されます。
しかし、異なるデータ型のスラッグであれば、同じ名前のスラッグを持つことができます。
Slugの条件
Slugでは、要素やワークフローで使用できる 2 つの条件式にもアクセスでき、より細かい制御が可能です。
Can Have The Slug Value – この操作では、引数が Thing の有効なスラグ値であるかどうかをテストします。有効なスラッグ値とは、一意であり、小文字、数字、およびハイフンのみで正しくフォーマットされていることです。
Cannot Have The Slug Value – この操作は、引数が Thing の無効なスラッグ値であるかどうかをテストします。無効なスラッグ値とは、小文字、数字、およびハイフンのみで構成されていないもの、または一意ではないものです。
これらの条件式は、Slugを既存のものと比較する必要がある場合に最適です。例えば、ユーザーのプロファイルでは、これらを使用してユーザー名が既に取得されているかどうかをチェックすることができます。
Slugとプライバシールール
プライバシールールが定義されているデータ型にスラッグを設定している場合は、「すべてのフィールドを表示」のデフォルトのパーミッションの下にある「スラッグ」フィールドにチェックが入っていることを確認してください。
これにより、ページのURLに設定したスラッグ値を誰でも見ることができるようになります。これがチェックされておらず、ユーザーが「スラッグ」フィールドの閲覧を許可するプライバシールールの条件を満たしていない場合は、代わりにURL内の一意のIDが表示されます。
Slug使用時のその他のルール
1.特殊文字はスラッグフィールドに保存されず、空白として表示されます。(小文字、ハイフン、数字以外のもの）。
2.スラッグはリアルタイムで更新することができます。つまり、スラッグを使用しているページでスラッグを更新すると、URLが自動的に変更されます。
3.スラッグの最大長は250文字です。
4.スラグはすべての言語をサポートしています。サポートされていない言語や正しく処理されていない言語がある場合は、support@bubble.io までご連絡ください。
再利用可能な要素
概要
再利用可能な要素を構築することは、複数のページで再作成せずに複製できる要素を構築していくことです。例えば、多くのページからサインインポップアップにアクセスしたい場合は、一度だけビルドして再利用したいと思うでしょう。同様に、フッターとヘッダーをページ間で共有したい場合は、再利用可能な要素として一度だけ構築する必要があります。再利用可能な要素として要素を構築すると、アプリが軽くなり、メンテナンスが容易になるので、できる限り再利用可能な要素として構築した方が良いでしょう。
再利用可能な要素を構築するには、アプリケーションメニューを開き、「New reusable element」をクリックします。これにより、要素を編集するページが表示されます。要素をページと同様にデザインし、関連するワークフローを定義します。
再利用可能な要素の作成と使用
再利用可能な要素はコンテナ要素で、グループやポップアップと似たような働きをします。違いは、ポップアップ型の再利用可能な要素にはモーダルな動作があるということです。つまり、ポップアップが閉じられないと、ユーザーはポップアップの外で他の場所をクリックできなくなります。
データの観点から見ると、再利用可能な要素はグループやポップアップに同様に似ています。グループと同じように、コンテンツのタイプを変更したり、データを送信したり、非表示にしたり表示したりすることができます。
再利用可能な要素をページに追加する方法は、他の要素と似ています。新規要素パレットで必要な要素を選択し、ページ上に描画するだけです。
再利用可能な要素の寸法は、要素自体を編集するときに定義されます。ただし、これらの要素はレスポンシブ（固定幅にした場合を除く）なので、移動先のページでサイズを変更する必要があれば、そのようにすれば、内部要素のレスポンシブ設定で定義された通りに内容が調整されます。
要素群を再利用可能な要素に変換することも可能です。複数の場所で使用したい要素のグループを構築した場合、このオプションを使用することで、時間を節約し、アプリケーションのページ全体で一貫したデザインを確保することができます。
再利用可能なワークフロー
再利用可能な要素の特定のユースケースは、複数のページで再利用したいワークフローを集めることです。そうすることで、全く同じアクションのフローが複数の場所で使用されることを確実にし、ミスの可能性を最小限に抑え、アプリのデバッグや修正をより速く行うことができます。
これを行うには、内部に要素を持たない再利用可能な要素を作成し、ページ間で共有したいワークフローを追加します。
この再利用可能な要素をページに追加したら（希望する場合は非表示にしてください）、「再利用可能な要素からカスタムイベントをトリガーする」アクションを使用して、再利用可能な要素に追加したワークフローにアクセスすることができます！これらのワークフローのロジックは、再利用可能な要素に追加したワークフローにアクセスするために必要なものです。
これらのワークフローのロジックは、上記で説明したものと似ています。
まとめ
今回の記事では、Slug機能と再利用可能な要素について解明していきました。Slug機能の解説は割と内容が濃く、難しい印象もあったかとは思いますが、独自のURLを割り当てるというメリットの恩恵を存分にうけるためにも、普段よりも意識して見るといいでしょう。両方ともアプリをより効率良く構築していく手段であるため、少しずつ使いこなしていきましょう。
ここまでご覧になってくださり、ありがとうございました！！
