
2〜3ヶ月と見積もっていた開発期間を、クエリアを導入することでわずか1週間に短縮できました
2012年5月創業のフルカイテン株式会社。 「在庫をフル回転させる」をコンセプトに、機械学習を駆使したSaaS『FULL KAITEN』を提供し、在庫問題の解決に取り組む。
more
2023.02.09に公開 | 2023.02.09に更新
Querier運営
「Querier(クエリア)」は社内向け管理画面を圧倒的な速さで、かつビジネスのスケールに合わせて柔軟に構築することができるローコードツールです。
今回はクエリアのプロダクトサイトでも利用しているノーコードWeb制作ツールWebflow(ウェブフロー)の解説です。コレクションと呼ばれるコンテンツ内で、別のコレクションを複数個リファレンスする方法を詳しくご説明します。
Webflowでは、データを投稿タイプごとにグループ化したもののことをコレクションと呼びます。ブログ記事、メンバー、最新のお知らせなどが該当します。各コレクションがどんなデータを保持するか自由に設定することができます。
特定のコレクションで、他のコレクションをフィールドに追加することができます。たとえば各ブログには著者が存在しますが、ブログ記事に掲載される著者の情報は著者コレクションで管理することができます。言わずもがなですが、著者に対する変更を一言で管理することができるというメリットがあります。
こちらの画像のようなフォーマットで、ブログ記事をリスト表示するとします。タイトルとサマリー、カバー画像、それから複数の著者と複数のカテゴリーを表示したい。著者リストは表示できますが、カテゴリーリストを表示しようとすると次のようなエラーを目にすることになります。Collection List Wrapper can only be nested in one Collection List Wrapper.
「コレクションリストの中にネストできるコレクションリストは1つだけだよ。」
普通にやろうとすると実現不可能な、複数のコレクションをコレクション内でリファレンスする方法は以下のとおりです。
カテゴリーテキスト
というフィールドを追加カテゴリーテキスト
にテキストを入力text-of-categories-list
に対して、カテゴリーテキストフィールドを適用
詳しく説明します。
カテゴリーテキスト
というフィールドを追加
ブログ記事コレクションに対して、カスタムフィールドを追加します。タイプは plain text
にします。
先程作成したカテゴリーテキストフィールドに、選択したカテゴリーの文字列をそのまま入力します。複数項目入力する場合はカンマで区切ります。
以下のコードを、コレクションを表示したいページのカスタムコード欄に入力します
<script src="<https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js>"></script>
<script>
(function() {
var insertTags = new FsLibrary('.collection-list')
insertTags.nest({
textList: '.text-of-categories-list',
nestSource: '.nest-multi-reference',
nestTarget: '.multi-ref-target'
})
})();
</script>
こちらの画像のように、各エレメントを配置します。赤矢印で強調しているものに関しては、記載されているクラス名を付与してください。ブログ記事コレクションの中にある、 multi-ref-target
の中に、 Category List
コレクションの Colection Item
以下が挿入されることになります。
text-of-category-list
に対して、カテゴリーテキストフィールドを適用するtext-of-category-list
というクラス名を付与したテキストブロックに対して、ブログ記事の「カテゴリーテキスト」を設定します。この要素は非表示にしてしまって構いません。
以上の工程を行うことで、ブログ一覧の各アイテムの中にカテゴリーリストを表示することができると思います。同様のプロセスを実行すれば、複数の著者やタグなど、2つ以上のコレクションを表示することができます。
Querier運営
「Querier(クエリア)」は社内向け管理画面を圧倒的な速さで、かつビジネスのスケールに合わせて柔軟に構築することができるローコードツールです。
2012年5月創業のフルカイテン株式会社。 「在庫をフル回転させる」をコンセプトに、機械学習を駆使したSaaS『FULL KAITEN』を提供し、在庫問題の解決に取り組む。
more
みなさんこんにちは。Querier開発チームです。今回はMySQLとクエリアを連携してユーザー情報の一覧とメールアドレス変更ができる管理画面を10分以内で構築してみたいと思います。
more
近年、Dockerを使用してアプリケーションの開発やデプロイを行うことが一般的になり、その中でもNext.jsを利用したWebアプリケーションの構築が増えてきました。
more
今回は、Google Cloud Platform内のサービスである、Cloud Load BalancingとCloud Runを使って、セキュアかつ手軽にサーバーを構築する方法を解説していきます。
more