<p>みなさんこんにちは、Querier開発チームです。<br>今回のアップデートで各種インプット系コンポーネントのバリデーション機能が大幅に強化されましたので、こちらで解説させていただきます。<br></p><h2 id="h9638fa3337">今回のアップデート対象</h2><ul><li>インプットコンポーネント</li><li>セレクトコンポーネント</li><li>マルチセレクトコンポーネント</li><li>チェックボックスコンポーネント</li><li>チェックボックスグループコンポーネント</li><li>テキストエリアコンポーネント</li></ul><p><br></p><h2 id="h96e9365cae">アップデート内容</h2><p>今回のアップデートで上記コンポーネントに <code>invalid</code>  というパラメータが追加されました。ボタンコンポーネントの「無効にする条件」などで、 <code>{{ input1.invalid }}</code>  などとして参照することにより、バリデーション結果を参照しやすくなりました。<br>また、インプットコンポーネントに関しては新たに以下の項目が追加されました。</p><ul><li>パターン<ul><li>Email</li><li>URL</li><li>Regex（正規表現）</li></ul></li><li>Min length</li><li>Max length</li></ul><p>これらの項目の追加により、最小値や最大値、メールアドレスやURLなどよく使うバリデーションを簡単に使うことができるようになりました。また、正規表現にも対応しておりますので、オリジナルパターンでのバリデーションも可能です。設定した条件を1つでも満たしていないと <code>invalid</code>  は <code>true</code>  となる仕様となっております。<br></p><h2 id="hf8e17142b1">デモ</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F745691815%3Fh%3D0c7b2f3233%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F745691815&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1499784906-4af881a22681a8e71d52e5382182b9a8e3734456c2ab7069bae55de529872631-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1090" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

みなさんこんにちは、Querier開発チームです。今回のアップデートで各種インプット系コンポーネントのバリデーション機能が大幅に強化されましたので、こちらで解説させていただきます。

バリデーション機能が大幅に強化されました！

<p>皆さんこんにちは、クエリア開発チームです。今回はクエリア社内でも活用している、HubSpotとNotionを使ったカスタムなCRMをご紹介します。<br></p><h2 id="h645e114c86">今回作るもの</h2><p>弊社では、お客様からのお問い合わせ情報をHubSpotで管理し、リードに紐づくドキュメントはNotionで管理しています。クエリアからHubSpot APIとNotion APIを連携し、お問い合わせが来てから、Notionにページを作成し、そのページリンクをHubSpotと紐付けるところまでのツールを作成しようと思います。<br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/df394e3efe6f49628c8e53bc4ee3bd05/querier_hubspot_notion_1.png" alt="" width="3420" height="1978"><br></p><h2 id="h229fbb40f4">HubSpotとクエリアを連携する</h2><p>まずは、クエリアのREST APIとの連携画面から、HubSpot APIと連携します。下記リンクからHubSpotのアクセストークンを取得し、画像のように入力して連携を完了します。<br><br><a href="https://developers.hubspot.jp/docs/api/migrate-an-api-key-integration-to-a-private-app" target="_blank" rel="noopener noreferrer">https://developers.hubspot.jp/docs/api/migrate-an-api-key-integration-to-a-private-app</a><br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/c0a5b9ed6ce443f690943d8e87282cef/hubspot-integration-20230119.png" alt="" width="1710" height="989"><br></p><h2 id="h98b3cd7cb3">Notionとクエリアを連携する</h2><p>同じく、REST APIとの連携画面から、Notion APIと連携します。トークンと一緒に <code>Content-Type</code>  と <code>Notion-Version</code>  もヘッダーに設定しています。アクセストークンの取得については、下記リンクを参考にしてください。<br><br><a href="https://www.notion.so/ja-jp/help/create-integrations-with-the-notion-api" target="_blank" rel="noopener noreferrer">https://www.notion.so/ja-jp/help/create-integrations-with-the-notion-api</a><br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/d760b56c737f458ea0811b29074bed3c/notion-integration-20230119.png" alt="" width="1705" height="985"><br></p><h2 id="haf4387aa0a">HubSpotのコンタクトリストをクエリア上で表示する</h2><p>テーブルにHubSpotの一覧を表示する際は、必要な情報をJavaScriptで整形してから表示しています。<br>クエリアでは、特殊なレスポンスへの対応もできるように、取得したデータをJavaScriptで整形することができます。<br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/7c483d92fc054252b488139fdd570e05/querier_hubspot_notion_4.png" alt="" width="2066" height="1978"><br></p><h2 id="h54f8e50104">Notionにページを作成し、HubSpotと紐付ける</h2><p>次に、Notionにページを作成し、HubSpotと紐付ける部分を作っていきます。Notionのページ作成APIと、HubSpotのメモ作成APIを組み合わせて下記画像のようなAPIリクエストを作成します。<br>クエリアでは、1つのデータフロー内に複数のクエリを投げ、クエリの返り値を取得することもできます。今回は、Notionのページ作成APIから返ってきたURLをHubSpot APIに投げることで、HubSpotのメモにNotionのリンクを貼り付けるという形で紐付けています。<br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/1d214f112d1a42efaaf7c2f53c89f625/querier_hubspot_notion_3.png" alt="" width="2068" height="1980"><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>今回ご紹介したように、クエリアでは様々なデータベースやAPIと連携して、業務に最適なカスタムな社内アプリケーションを手軽に構築することができます。<br>少しでもご興味をお持ちいただけましたら、下記リンクよりクエリアをお試しください！<br><br>クエリアを試してみる: <a href="https://www.querier.io/" target="_blank" rel="noopener noreferrer">https://www.querier.io/</a></p>

皆さんこんにちは、クエリア開発チームです。今回はクエリア社内でも活用している、HubSpotとNotionを使ったカスタムなCRMをご紹介します。

HubSpotとNotionとクエリアをAPI連携し、業務に最適なカスタムなCRMを作成する

<h4 id="h1f3462dab3"><strong>Gaudiy株式会社</strong></h4><blockquote>「ファンと共に、時代を進める。」をミッションに、ファンエコノミーの創出に向けて、エンタメ業界のDXを進めるブロックチェーン企業。『約束のネバーランド』や『ナナブンノニジュウニ』などIPのファンコミュニティにくわえ、『TOKYO IDOL FESTIVAL』といったイベントのコミュニティを運営する。直近では総額34億円の資金調達を実施するなど、Web3領域において、日本が誇るエンタメ産業とWeb3の技術領域を掛け合わせ、世界を代表する企業を目指している。</blockquote><p><br></p><h3 id="ha099128003"><strong>—— 管理画面開発ツール「クエリア」を導入していただいたきっかけについて、教えてください。</strong></h3><p>私たちは、ブロックチェーン技術を活用して、ファンの熱量を最大化するWeb3時代のファンプラットフォーム「Gaudiy Fanlink」を提供しています。<br>管理画面開発ツールの導入を検討したきっかけは、メンバーの創造性を最大限発揮するためです。<br><br>弊社ではもともと、外部ツールを利用し、JSONやCSVなどの形式で必要情報をインポートするフローをとっていました。ビジネスサイドの人間がJSONやCSVを書いて、それをデータベースに入れて、テスト環境で試す。それが成功したら、そのまま本番環境で移していました。言ってしまえば、「データベースを直接触っているような状態」ですね。<br><br>なぜこのような運用になっていたかといえば、開発したい機能や不具合の修正にエンジニアのリソースが寄っていたからです。エンジニアの工数を減らそうと、ビジネスサイドのメンバーに業務を移しましたが、個々人が技術のキャッチアップをしなければいけず、結果的にはエンジニア以外も創造性を発揮できていない状態になっていました。<br><br>非エンジニアだと、スクリプトを動かすための環境構築だけもコケてしまいますよね。でも、なんとかするしかないので全社で協力しあっていましたが、メンテナンスをし続けるのはさすがに厳しく、何かいいツールを探してみたんです。すると、ローコードで利用できる「クエリア」を見つけました。ローコードであればビジネスサイドの人間でも不便せず使えるため、導入を決めた次第です。<br></p><h3 id="h3ee19896b1"><strong>—— クエリアを活用して、どのような管理画面をつくっていただいているのでしょうか？</strong></h3><p>コミュニティの中で実施した企画に参加していただいた方に、コミュニティ内で使えるコインを配布していて、それをコミュニティ内のストアで使える仕組みがあります。購入できる商品は基本的にデジタルで、例えるならNFTのようなものです。商品を購入・活用するにあたっては、設定やネーミングなどを弊社のコミュニティチームで設定する必要があります。それら一連の流れを実行する際には、ユーザーの情報を検索する必要があるのですが、データベースを直接触るのではなく、クエリアを活用してつくった管理画面経由で行っています。<br></p><h3 id="h231c836e5e"><strong>—— 実際にクエリアを使っていただき、どのような効果を感じられていますか？</strong></h3><p>以前は自分にしかできなかった業務が標準化され、誰にでもできるようになりました。データ設計が複雑になると、データ構造の理解や「JSONの形式とはなにか」という初歩の初歩から学習する必要があります。ただ、やはり時間がかかるので、基本的にはすべて私が担当していました。しかし現在は、誰もがインターフェース上で簡単に操作できるため、時間的リソースを創出することができています。<br><br>いちいち設定しなくても済むデータや、ほとんど固定的なデータをバックエンドで隠し、変動があるものだけを表示させることもできるので、担当者のミスも革命的に減りました。さらに、これまではビジネスサイドからお願いを出して、それに従ってフロントエンドがバックエンドと連携しながら画面をつくるという、3人分の工数がかかっていたところ、私が画面をつくってエンドポイントだけを用意してもらえばよくなったので、エンジニアにもリソースを割いてもらいやすくなりました。<br></p><h3 id="h0dc8c70a74"><strong>—— 今後クエリアをどのように活用していきたいですか？</strong></h3><p>今後は、開発フローの中に管理画面を想定したエンドポイントをつくるところまで入れたいです。最終的には、自社プロダクトとして、クライアント向けのサービスもつくっていきたいと考えています。その際に、どの画面が必要かを検証する部分を、クエリアを活用してやっていく予定です。また、社内のオペレーション効率化も、クエリアで実施していけたらと思っています。<br></p><h3 id="h66a17f6905"><strong>—— まだまだ「ローコードで管理画面を構築する」という考えが世の中に浸透していないなと感じています。ローコードをいち早く取り入れ、効率的にサービスを成長させている上井さんから、今後ローコードサービスを試したいと考えている方々にメッセージをお願いいたします。</strong></h3><p>管理画面をつくるという行為自体、それがクライアントに提供するものでなければ、優先度は永遠に上がっていかないと思っています。「管理画面があったらいいよね」という意識はあっても、とにかくリソースを食うからです。ビジネスサイドからしても、エンジニアに「管理画面つくってよ」とは簡単にはいえませんし、いざ開発するとなっても、リソースがない。<br><br>でも、そこにローコードという選択肢があれば、解決できるわけです。管理画面をつくったとしても、利用するのは大抵ビジネスサイドの人間です。それなのに、開発するのはエンジニアですから、効率が悪い。利用する人がつくって、利用する人がメンテナンスをできた方がいいに決まっています。<br><br>クエリアは、そんな理想を実現するサービスだと思っています。かつての私たちのような課題を抱えている方には、ぜひおすすめしたいです。</p>

Web3時代のファンプラットフォーム「Gaudiy Fanlink」を提供するGaudiy株式会社へのインタビュー

「今すぐ開発したいけど、優先度が永遠に上がらない」管理画面開発の課題を、一瞬で解決できました

<p>今回のアップデートで、テキストコンポーネントのマークダウン対応含む、複数の機能が追加・アップデートされましたので、お知らせさせていただきます。今回追加・アップデートされた機能は以下になります。<br></p><h2 id="h89d3c88568">テキストコンポーネントのマークダウン対応</h2><p>今回のアップデートでマークダウン記法でテキストを記述していただく機能が追加されました。<br>テキストコンポーネントを選択していただき、 <strong>[表示モード] </strong>を <strong>[Markdown]</strong> に変更していただくと、マークダウン記法で記述することが可能になります。<br>対応しているフォーマットについてはGitHubの <a href="https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax" target="_blank" rel="noopener noreferrer">Basic writing and formatting syntax</a> に準拠しています。<br></p><h2 id="h1ba3decf88">連携データに対するアクセス制限機能</h2><p>データ連携画面から、データソースを選択していただくと、 <strong>[このデータソースへのアクセスを制限するユーザー]</strong> という項目が追加さましたので、ここにメンバーや権限グループを追加していただきます。追加したメンバーやチームは該当データソースへのアクセス権限がなくなり、関連するアクションが失敗する仕様となります。<br></p><h2 id="hf903553518">ボタン・モーダルコンポーネントの色の変更</h2><p>今回のアップデートでボタン、モーダルの色が変更されました。今後ボタン、モーダルコンポーネントの色変更機能を提供するための準備となります。また、ドラッグ・アンド・ドロップされたコンポーネントのUIも来年以降刷新予定ですので、ご期待ください。</p>

今回のアップデートで、テキストコンポーネントのマークダウン対応含む、複数の機能が追加・アップデートされましたので、お知らせさせていただきます。

テキストコンポーネントがマークダウンに対応しました！

<p>今回のアップデートでアプリの編集画面がフルリニューアルされました。データフローの編集やウィジェットの編集体験が向上し、より素早く社内アプリを構築していただけます。<br>このブログではいくつか変更になった点を解説していきます。<br></p><h2 id="he1aff0e0ab">データフロー編集部分のフルリニューアル</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F773206594%3Fh%3D18f0d4a40d%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F773206594&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1551671299-966877b228ecbeadcd4a5bd26aaa7a58f01941cf22b536edc40a8aebbaceb1ae-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1112" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br>※アクション単体での実行では状態自体は変更にならいので、データフロー名の横にある実行ボタンから実行することで、状態として反映されます。<br></p><h2 id="hda16985d96">ウィジェット編集部分の拡大</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F773203617%3Fh%3D13c7e0efd7%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F773203617&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1551663926-6dd06565da6e577dbc92a9fbd41e81db5bcbde44c9de1387f1ad4d83f52f4499-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1112" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h686113d94c">状態管理の位置の変更</h2><p>状態管理の位置が左下に移動になりました。<br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/f73cbf4f0e1045eaa494ea35bda99970/edit_renewal_state_management.png" alt="" width="1200" height="695"><br></p><h2 id="h338444c066">コンポーネントの機能追加リクエスト</h2><p><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/8b11fb80109c4636a010fd18ee8d273f/component_request.png" alt="" width="1200" height="694"><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>クエリアは引き続きより良いプロダクトにすべく、アップデートしていきます。今回の新UIに関わらず、新機能などのご要望がございましたら、プロダクト右下のお問い合わせ窓口よりお気軽にご連絡ください。<br>それでは引き続き、クエリアをよろしくお願いいたします。</p>

今回のアップデートでアプリの編集画面がフルリニューアルされました。データフローの編集やウィジェットの編集体験が向上し、より素早く社内アプリを構築していただけます。

バリデーション機能が大幅に強化されました！

今回のアップデート対象

アップデート内容

デモ

最新の記事

HubSpotとNotionとクエリアをAPI連携し、業務に最適なカスタムなCRMを作成する

「今すぐ開発したいけど、優先度が永遠に上がらない」管理画面開発の課題を、一瞬で解決できました

テキストコンポーネントがマークダウンに対応しました！

データフロー・ウィジェットの編集画面がフルリニューアルされました！