<p>こんにちは、Querier開発チームです。みなさんは管理画面をどのように作成しているでしょうか？バックエンドとフロントエンドともにフルスクラッチで開発していますか？RailsAdminのようなオールインワンのライブラリを使っていますか？<br>Querierは管理画面の開発に「ローコード」という新しいソリューションを作ることにチャレンジしています。今回は管理画面をノーコードで作成できる『Querier』がどのような課題を解決するのかを紹介したいと思います。<br></p><h2 id="h9d7af3fc31">プロダクトチームにおける管理画面・社内ツールの重要性</h2><p>はじめに、プロダクトチームにおいて管理画面がどれほど重要なのかを考えていきます。<br>まず、管理画面がないとどのようなことが起きるのかを見ていきましょう。</p><h4 id="hb175e8d38d">1. 細かい作業がエンジニアに依存してしまう</h4><p>例えば、</p><ul><li>アカウント認証・登録・監視</li><li>データの作成・更新・削除</li><li>お知らせ配信</li></ul><p>のようなデータベースに依存するオペレーションで、エンジニアが直接APIを叩いていたりしませんか？<br>このような時に管理画面は非常に有用です。管理画面があれば毎回エンジニアに頼んでいた作業をBizサイドの人が自ら実行できるようになります。<br></p><h4 id="hc58ea42c50">2. 日々のオペレーションのスピードが落ちてしまう</h4><p>上で説明したエンジニア依存のオペレーションに関連して、もう一つのデメリットとしてオペレーションのスピードが落ちてしまうことも挙げられます。<br>管理画面がないと、都度エンジニアに頼んだりする必要があるためとても非効率なものになってしまいます。<br></p><h4 id="h9afaddd4c1">3. データ閲覧に学習コストが発生する</h4><p>社内の非エンジニアがデータを閲覧したいというケースは多々あると思います。そんな時に管理パネルがないとデータを操作する方法を学習しなければいけません。<br>有名なBIツールとしてRedashやMetabaseがありますがどちらもSQLを学習しなければ使いこなせません。<br>組織が拡大すればするほど学習コストは大きな問題となってきます。<br>組織やビジネスのスケールを考えつつ、データ操作を社内で民主化するためには誰もが使える管理パネルが必須になってきます。<br></p><h4 id="he4fa5d9e04">4. 権限管理が大変</h4><p>データソースに直接アクセスしてデータ操作をするとした場合、権限管理が問題となってきます。<br>例えば、アプリケーションはAWSのMySQL、ユーザー認証はFirebase、課金はStripeとデータが散らばりそれぞれ誰にどのような権限が付与されているのかを管理するだけで多大な時間を要します。<br>権限管理が疎かになると、データの不整合やデータ漏洩などのリスクも高まってしまいます。<br></p><h2 id="h8208f42bf0">管理画面を開発するときの課題</h2><h4 id="h20b47cac3a">1. メインのアプリケーション開発が遅れてしまう</h4><p>管理画面を開発するということは、アプリケーションを1つスクラッチで開発するのとほぼ同じです。CSSフレームワークなどを使えばある程度効率的に開発はできますが、しっかり使えるものを作るとなるとエンジニア数名のリソースを管理画面に割くことになるでしょう。<br></p><h4 id="h3574a6bedb">2. Bizサイドの要求にエンジニアサイドが追いつかない</h4><p>エンジニアはただでさえメインの業務に追われています。その中で管理画面の追加用件やバグ対応などが発生するとメインのアプリケーションのリリースサイクルに影響を及ぼします。<br>多くの企業ではこのような事情から管理画面のアップデートは後回しにされがちで、Bizサイドの要求に追いついていくことができなくなります。<br></p><h4 id="ha490cbc9b9">3. ライブラリのアップデートや保守・運用まで手が回らない</h4><p>2ではエンジニアはメインの業務に追われているという話をしましたが、それに関連して管理画面のライブラリのアップデート等の保守・運用まで手が回らないというのも課題の1つです。<br>管理画面で使用しているライブラリの重要なセキュリティアップデート等に対応していかないとデータ漏洩等のリスクが上がるので、そこにもコストがかかってきます。<br></p><h2 id="h5a2fc345a4">管理画面に『Querier』を使うと便利になるケース</h2><h4 id="h689fcb045f">1. エンジニアリソースが足りない</h4><p>エンジニアリソースが足りず、管理画面開発ができていない場合は『Querier』を活用することで上で述べたような課題を解決することができます。<br>フルスクラッチで開発する数十倍近いスピードで管理画面を構築でき、保守・運用に気を遣う必要もありません。<br></p><h4 id="h0a1c613be8">2. 既存管理画面の技術負債で開発スピードが出ない</h4><p>すでに管理画面を構築しているが、運用・保守まで手が回っていなく、技術負債によって開発スピードが出ない場合も『Querier』をおすすめします。<br>既存のAPIを再利用して構築できるので、既存の管理画面から徐々に移行していくことができます。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>『Querier』はプロダクトチームの非効率を解決し、ビジネスの加速をアシストすることを目指しています。ぜひ一度クエリアでの管理画面の開発を体験してみてください！<br><br>クエリアを試してみる: <a href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">https://app.querier.io/signup</a></p>

こんにちは、Querier開発チームです。みなさんは管理画面をどのように作成しているでしょうか？バックエンドとフロントエンドともにフルスクラッチで開発していますか？RailsAdminのようなオールインワンのライブラリを使っていますか？

社内向けの管理画面や業務アプリこそノーコード・ローコードに置き換わるべき理由

<p>今回のアップデートでKey Valueコンポーネントに対応いたしました。<br>Key Value形式（Object型）の値を表示することが可能になります。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F740200462%3Fh%3D8d6db82807%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F740200462&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1489506337-796d5d45eb417e0f4f8fda97190dd20dfd30e8d1e3d8b5d75c0b5cb1b47b95b0-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1088" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

今回のアップデートでKey Valueコンポーネントが追加されましたので、こちらで解説させていただきます。

Key Value形式のデータの表示に対応しました！

<p>今回のアップデートでグループコンポーネントに対応いたしました。<br>コンポーネントをグループ化して、条件に応じた表示/非表示の制御が可能になります。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F737425886%3Fh%3D6955891bc0%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F737425886&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1483967647-378298121b2d027cdd86fa2c985f798a57c19597e329019b529235afa3a4ca61-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><br>新規登録はこちら<br><a href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">https://app.querier.io/signup</a></p>

今回のアップデートでグループコンポーネントに対応し、コンポーネントの表示/非表示を制御できるようになりましたので、こちらで解説させていただきます。

コンポーネントをグループ化し、表示/非表示を制御できるようになりました！

<p><strong style="color:#000000">株式会社mikan</strong></p><blockquote><span style="color:#000000">2014年6月創業。 『本質的なテクノロジー活用であらゆる人の英語学習によりそい人生の可能性を広げる』というミッションを掲げ、総ダウンロード数600万を超える英語アプリ「mikan」を運営。 ベストトレンドアプリやe-Learning大賞Edtech部門など、フューチャーや受賞も多数。2021年から人材採用にも力をいれ、1年で組織人数は倍以上に拡大。これまで以上に事業成長のスピード・幅を増し、会社一丸となりビジョンの実現に向けてチャレンジを続けている。</span></blockquote><p><br><strong style="color:#000000">コンテンツチーム・エンジニア　新垣 匠也氏</strong></p><blockquote><span style="color:#000000">大学時代のインターンからmikanに新卒入社。学生時代には業務効率化システムの開発を経験。現在はコンテンツ制作のディレクションや効率化・仕組み化などを担当</span></blockquote><p><br></p><h2 id="h1f123a81be"><strong style="color:#000000">— 管理画面開発ツール「クエリア」を導入する以前は、どのような課題を持たれていたのでしょうか。</strong></h2><p><span style="color:#000000">mikanは『本質的なテクノロジー活用であらゆる人の英語学習によりそい人生の可能性を広げる』というミッションを掲げ、総ダウンロード数600万を超える英語アプリ「mikan」を開発・運営しています。</span><br><br><span style="color:#000000">mikanでは現在計120冊以上の英語教材を学習することができます。これまでは英単語アプリmikanとして英単語教材のみを提供していましたが、今では”英語アプリmikan”としてTOEICや英検などの問題集を学習できるように進化しています。</span><br><br><span style="color:#000000">問題演習の提供を開始するとのことで、これまで単語のデータベースとして使っていたFirestoreとは別で、新たにCloud SQLを使うことになりました。</span><br><span style="color:#000000">それに伴って、新たにSQLと接続した問題集用の管理画面の作成が必要でした。</span><br><br><span style="color:#000000">ただエンジニアチームはフルタイムのメンバーでiOSが 2名、 Androidが 2名、バックエンドが 3名という小規模な人数のため、管理画面の開発に十分なリソースを確保することが難しい状況でした。</span><br><br><span style="color:#000000">また会社としてもプロダクトの提供価値を上げることが最優先であるため、管理画面の構築の優先度が低くなっていました。</span><br></p><h2 id="h6b1b24c66a"><strong style="color:#000000">— 普段はどのような業務を担当されているのですか？</strong></h2><p><span style="color:#000000">私は現在コンテンツチームに所属していて、出版社から頂いた教材PDFデータをアプリで学習できるように、制作から入稿までを行う業務に携わっています。</span><br><br><span style="color:#000000">データベースに入れる際には膨大なデータを扱う必要があるのですが、プログラミングを用いて制作の効率化や仕組み化をしていくというのが主な仕事になります。</span><br><br><span style="color:#000000">今まではフロントエンドの開発業務をメインにしつつバックエンドの開発もFirebaseなどを使いながらフリーランスとしてサービス開発に携わってきまして、今年mikanに正社員として入社しました。</span><br></p><h2 id="hbfc023b742"><strong style="color:#000000">— どのような経緯でクエリアの導入を決めていただいたのでしょうか？</strong></h2><p><span style="color:#000000">Firebaseと繋がっている管理画面を構築した際は社外の方に頼んで、開発を進めていました。ただある機能が欲しいとなった際に実装までの1サイクルに時間がかかることや現場で求めている要件をうまく伝えることができず、要望が上手く反映されなかったりといった点に課題を感じていました。</span><br><br><span style="color:#000000">既にある管理画面に機能をどんどん付け足していくという選択肢もあったのですが、新たに別のデータベースを使うというタイミングであった点や修正画面をなるべく早く構築し利用したいという要望があったことから他の方法を探していました。</span><br><br><span style="color:#000000">そんな中、社内の方からの紹介でクエリアのことを知り、ドキュメントを読んだり実際に触ってみて自分でもやりたいことを素早くローコードで実現できそうと感じたため、導入を決めました。</span><br></p><h2 id="hfcec67c36e"><strong style="color:#000000">— クエリアで実際にどんな管理画面を作って頂いているんでしょうか？</strong></h2><p><span style="color:#000000">主に作成したのは問題修正画面です。</span><br><br><span style="color:#000000">出版社からいただいた教材PDFデータをデータベースに入れた後にユーザーからのご指摘で英単語や英語表現が間違っていたりと誤植が発見されるケースがしばしばあります。その修正をクエリアで構築した管理画面で行っています。</span><br></p><h2 id="h6ab7d3bcc3"><strong style="color:#000000">— クエリアを導入後はどういう効果がありましたか？</strong></h2><p><span style="color:#000000">クエリアを使用して管理画面を構築してみると、1週間足らずで問題集の誤植などの修正画面を構築することができました。おかげでエンジニアチームはプロダクトの改善・改良にフォーカスして開発を行えるようになりました。</span><br><br><span style="color:#000000">クエリアを導入したことでエンジニアに頼らずに、エンジニアでない社員でも修正業務を行うことができるようになったのが一番の効果でした。</span><br><br></p><h2 id="hf8ed73c4a2"><strong style="color:#000000">— 実際にクエリアを使った開発の感想を教えてください。</strong></h2><p><span style="color:#000000">クエリアはDBからSQLなどを書いて取得したり、JavaScriptで整形したりといった柔軟性も兼ね備えているのでエンジニアとして利用しやすかったです。やりたかったことをすぐに実現できて、ローコードなので工数もスクラッチの開発に比べてそこまで必要ないところが良いなと思いました。</span><br><br><span style="color:#000000">また切り分けて画面ごとにアプリを作ることができるので、作ったり、削除したりがしやすく経験が浅いエンジニアでも技術的負債を心配することなく、CRUDアプリを作れるのが魅力的に感じました。</span><br><br><span style="color:#000000">管理画面をエンジニアチームに頼んで作ってもらうとなるとコミュニケーションコストが発生したり、時間がかかったりすると思うんですが、クエリアを導入したことで管理画面の開発が私一人で完結したのは良かったなと思います。</span><br></p><h2 id="h73f5e76e6b"><strong style="color:#000000">— ローコードツールを使った開発とスクラッチでの開発を比べて何か気づいたことはありましたか？</strong></h2><p><span style="color:#000000">今回初めてローコードツールを使ったんですが、割と簡単に自由度が高く構築でき、すごく便利だなと感じました。管理画面を構築するとなるとUI・UXについても0から考えたり、ディレクトリ構造を考えたり、コンポーネント化を意識する必要があったりかなり大変です。</span><br><br><span style="color:#000000">しかしクエリアの場合、ドラッグ&amp;ドロップである程度完成度の高いUIを構築でき、裏側のロジックの部分も柔軟に自由度高く利用することができました。特にテーブルを配置して、裏側のロジックを少し書くだけですぐに見たい情報が見ることができるというのもシンプルですが良いなと思いました。</span><br><br><span style="color:#000000">今後も必要に応じて様々な機能を構築していこうと思っています。</span><br></p><h2 id="hcee8766e18"><strong style="color:#000000">— 自由度が高い分、学習コストが高いと考える方もいると思うのですが実際クエリアに慣れるのにどのくらい時間がかかりましたか？</strong></h2><p><span style="color:#000000">僕は学習コストがそこまで高いとは感じませんでした。ドキュメントに基本的な使い方が載っていた点や、これまでの開発業務で主にReactを使っていたので、配列やマッピングだとか、コンポーネントの志向だとか普段から慣れている概念が多くあり、比較的スムーズに開発を進めることができました。</span><br><br><span style="color:#000000">自分自身、フロントエンドの開発が得意で、バックエンドは比較的経験が浅いのですが、基本的なSQLやデータベースの知識があるだけで十分な開発ができるのでクエリアはすごく利用しやすかったです。</span><br></p><h2 id="h8afae4f65b"><strong style="color:#000000">— 今後の事業の展望をお聞かせください。</strong></h2><p><span style="color:#000000">これまでは英単語アプリmikanとして英単語教材のみの提供でしたが、今では”英語アプリmikan”としてTOEICや英検などの問題集を学習できるように進化しています。今後も引き続きプロダクトの改善・改良していき、ユーザーに対する提供価値を高めていきたいです。</span><br><br><span style="color:#000000">その際にクエリアを活用して、運用の効率化を高め、より多くのユーザーが求めている教材を学習できるアプリに進化させていきたいと思っています。</span><br></p><h2 id="h6fae1b6b66"><strong style="color:#000000">— まだまだローコードで管理画面を構築するという考えが世の中に浸透していないなと感じています。最後にこれからローコードサービスを試したいと考えている方々にメッセージをお願いいたします。</strong></h2><p><span style="color:#000000">管理画面を作るってやはりすごく工数がかかることだと思っていて、その割にはそこまで事業にインパクトが大きくはないと感じています。</span><br><br><span style="color:#000000">mikanの場合だとプロダクトの改善や改良に時間をかけた方が、ユーザーに対する提供価値を高めていけます。ただ管理画面は事業を運営するのに必要不可欠な機能です。</span><br><br><span style="color:#000000">そのような工数をあまり割けられないけど、必要不可欠な機能をローコードで作ることができれば、エンジニアもビジネスサイドもハッピーになれて、事業の成長に繋がると思います。</span><br><br><span style="color:#000000">なのでエンジニアのリソースを必要なところに最大限割きたいと考えている会社の方にはぜひ試してもらいたいサービスです。</span></p><h2 id="hcf83e1357e"><br></h2><p><span style="color:#000000">＜</span><strong style="color:#000000">英語アプリmikanについて＞</strong></p><blockquote><span style="color:#000000">600万ダウンロード突破。 「はやく・ただしく・たのしく」をコンセプトにした国内最大級の英語アプリ。学生向けから社会人でも使える教材まで幅広いラインナップが揃っており、受験・資格試験・日常英会話・ビジネス英会話など、スキマ時間を活用して自分の目的にあった学習をすることが可能です。</span><br><a style="color:#1155cc" href="unsafe:[object Object]" target="_blank" rel="noopener noreferrer">https://mikan.link/</a></blockquote>

2014年6月創業。 『本質的なテクノロジー活用であらゆる人の英語学習によりそい人生の可能性を広げる』というミッションを掲げ

「やりたいことをすぐに実現できる」クエリア導入で管理画面の開発工数を大幅に削減したmikanの担当者に聞く

<p>今回のアップデートでiFrameコンポーネントに対応いたしました。<br>これにより、Webサイトや動画を埋め込むことが可能になります。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F718183203%3Fh%3D72760366cf%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F718183203&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1447004899-e14e7572b58169817638db436eb80c0c4e9e2fa46bd35179cfdd31cc4f9332fa-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1089" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br>新規登録はこちら<br><a href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">https://app.querier.io/signup</a></p>

今回のアップデートでiFrameコンポーネントが追加されましたので、こちらで解説させていただきます。

iFrameコンポーネントに対応しました！

<h2 id="h9250fa375a">Cloud Storageと連携してファイルをアップロードする</h2><p><br></p><h3 id="h754de4e610">１. 連携データ画面で、 <code>Cloud Storage</code>  を選択し、<code>Credentials JSON</code>  を入力する</h3><p><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/5e46a91551764059be83d2505032ad4e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-06-06%2014.19.49.png" alt="" width="1840" height="1576"></p><h3 id="hfbe806df4b"><br>２. データフローから必要な項目を設定する</h3><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F717400727%3Fh%3D5081e428a6%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F717400727&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1445595765-45cdfa1c500d21adc66227c194bab5dadeda63453b73f808e43c52babdd7b9f7-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1089" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br>新規登録はこちら<br><a href="https://www.querier.io/" target="_blank" rel="noopener noreferrer">https://www.querier.io/</a></p>

いつもQuerierをお使いいただきありがとうございます。今回のアップデートでCloud Storage連携が追加されましたので、こちらで解説させていただきます。

Google Cloud Storageと連携して、ファイルのアップロード・読み込み・削除などができるようになりました！

<p>今回のアップデートで、以下の2点がアップデートされました。</p><ul><li>データフローの成功/失敗時の複数イベントを設定</li><li>イベントでのコンポーネントの操作</li></ul><p><br>これらのアップデートを組み合わせて、データフロー成功時にモーダルを自動で閉じることができるようになりましたので、以下の動画で解説させていただきます。<br></p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F716234671%3Fh%3D60486b9a4d%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F716234671&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1443293891-b70193a63c4a578c3f6964442277258cb568d867aa61fe0cddd6ab3f5014ebb5-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1089" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br><br>コンポーネントの操作については、現状モーダルのOpen/Closeのみの対応ですが、今後他のコンポーネント操作にも対応予定ですので、ご要望などございましたらお気軽にお問い合わせください！</p>

いつもQuerierをお使いいただきありがとうございます。今回のアップデートでデータフローのイベント機能がアップデートされましたので、こちらで解説させていただきます。

データフロー成功時にモーダルを自動で閉じることができるようになりました！

<h2 id="hef86a51264">Slackと連携してメッセージを送信する</h2><p><br></p><h3 id="he9e4e46e4e">１. 連携データ画面で、 <code>SlackWebhook</code>  を選択し、Webhook URLを入力する</h3><p><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/bd688e29c72a429291cbb34261c7bc13/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2011.44.25.png" alt="" width="1802" height="1568"></p><h3 id="hfbe806df4b"><br>２. データフローから必要な項目を設定する</h3><p><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/11d1d3ffaf8d45cdb24167799608714a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2011.47.38.png" alt="" width="688" height="1158"><br>新規登録はこちら<br><a href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">https://app.querier.io/signup</a></p>

いつもQuerierをお使いいただきありがとうございます。今回のアップデートでSlack連携が追加されましたので、こちらで解説させていただきます。

Slackと連携して、メッセージを送信できるようになりました！

<p>今回のアップデートで、テーブルカラムの値を条件に応じて表示変更することが可能になりました。<br>データベースでは英語の文字列で保持しているものを、管理画面上では日本語の文字列に変換して表示したいユースケースに対応できるようになります。<br><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/8d203c066e964b639e2d2528268df820/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-26%2014.59.09.png?w=664&amp;h=1236" alt="" width="664" height="1236"><br><br>上記の画像では、下記の条件でテーブルカラムの表示をカスタムしています。<br><code>payment_method</code>  の値が、</p><ul><li><code>null</code>  であれば、「未設定」と表示</li><li><code>card</code>  であれば、「カード払い」と表示</li><li><code>bankTransfer</code>  であれば、「請求書払い」と表示</li></ul><p><br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/0e2e0b0abe6846ada8e074686e1603ac/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-26%2015.03.13.png" alt="" width="2274" height="1236"><br><br><br>より詳しい動画での解説はこちら</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F713945820%3Fh%3D19d431e13f%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F713945820&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1439107103-a8d4a9d89f755d1001cda9bd97ee3eacec61dcb2bbc1f051fae3e746b0f8549c-d_1280&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=vimeo" width="1920" height="1089" scrolling="no" title="Vimeo embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p>

いつもQuerierをお使いいただきありがとうございます。今回のアップデートでテーブルに機能が追加されましたので、こちらで解説させていただきます。

テーブルカラムの値を、条件に応じて表示変更できるようになりました！

<p><strong>株式会社ツクルバ</strong></p><blockquote>2011年8月に創業。「『場の発明』を通じて欲しい未来をつくる」というミッションのもと、デザイン・ビジネス・テクノロジーをかけあわせた場の発明を行い中古・リノベーション 住宅の流通プラットフォーム「cowcamo（カウカモ ）」の企画・開発・運営や不動産企画デザインなど多岐に渡り事業を展開している。 2019年7月31日には、東証マザーズ（現・東証グロース）へ上場。 2021年8月に11期目へ突入し、組織メンバーは約200名にまで拡大。場にまつわるビジネス・デザイン・テクノロジーを融合した事業を展開し、ビジョン実現に向けた試行錯誤のチャレンジを続けている。</blockquote><p><br><strong>バックエンド・テックリード門田 英晃氏</strong></p><blockquote>新卒で本田技研工業株式会社へ入社。IT部門へ配属となり、業務システムの企画から開発マネジメントや新サービスの立ち上げを経験。その後スタートアップへ転職、ソフトウェアエンジニアにキャリアチェンジ。SaaS開発やハードウェアプロダクトの企画・開発、スタートアップでのCTOの経験を経て、2021年にツクルバにジョイン。 PF事業部サプライサイド事業推進部にてプロダクトマネージャー／バックエンドテックリード／シニアマネージャーとして、不動産売却領域の新規プロダクト開発を担当している。</blockquote><p><br></p><h2 id="h1f123a81be">— 管理画面開発ツール「クエリア」を導入する以前は、どのような課題を持たれていたのでしょうか。</h2><p>ツクルバは、「場の発明」を掲げ、主に不動産領域で事業を展開している会社です。私が所属する部署では、新規事業として中古不動産流通構造に存在する歪みを解消し、中古不動産の流動性を高める「ウルカモ」を開発しています。<br><br>上場してから3年が経ちましたが、現在も新しい事業を立ち上げては、それを急速にグロースさせており、まだまだ成長を続けている段階です。次々と企画が立ち上がっており、実現したいことが山のようにあります。<br><br>ただ、リソースが追いついていないのが実のところです。やりたいことがたくさんある分、優先順位の低い業務が後回しになりがちで、そのひとつが管理画面の構築でした。<br></p><h2 id="h9708811a7b">— 管理画面の開発は後回しになりがちですよね。</h2><p>そうなんです。新サービス「ウルカモ」の立ち上げ前に、サービス運営のための管理画面の必要性は把握していたものの、タイトな開発期間の中で、管理画面の開発に十分な工数を確保することが難しい状況でした。<br><br>これまでは自分で手を動かして解決していましたが、それでは事業成長に遅れが出てしまいます。「なにかいい手段はないか」と考えていたところ、たまたま見つけたのが「クエリア」だったんです。<br></p><h2 id="hb1f69d530a">— 管理画面開発にはスクラッチで作る選択肢もあります。最終的に「クエリア」を選んでいただいた理由について、教えてください。</h2><p>社内Slackのエンジニアリングチャンネルで、たまたまクエリアの記事を見つけ、ノーコード・ローコードには日頃から興味を持っていたので、そこからドキュメントを読んで、「これならやりたいことは実現できそう」と感じ、あとは価格感をご相談したいと思い、お問い合わせさせていただきました。<br><br>実際に触ってみて、まず多くのデータソースに対応しているのがいいなと思いました。弊社はデータベースにFirebaseを使用しており、今後はAWSのAuroraも使用する予定だったのでどちらにも対応しているのは魅力的でした。また、S3にも対応していたのでファイルを使用するユースケースにも対応できるイメージが湧いたのも大きかったです。<br><br>実際にアプリを作っていく操作感はエンジニアフレンドリーな設計になっていて、これならスクラッチで作るよりも早く必要な管理画面を開発できるなと感じ導入を決めました。<br></p><h2 id="h8ac5fbb455">— エンジニアフレンドリーな設計がエンジニアへの説明コストを下げたのですね。ローコードツールを使った開発において気づいたことありましたか？</h2><p>改めて、管理画面は本当にスクラッチで作る意味ってないんだなっていうのがまず感じたことでした。<br><br>弊社の場合、管理画面に特に複雑なノウハウは必要なかったので、会員登録や不動産データの編集などデータに対してCRUDを行ういわゆる標準的な管理画面なら全てクエリアでカバーできると感じました。GUIと少しのコードで本格的な管理画面が作れたので開発スケジュールを大幅に巻くことができました。<br><br>クエリアの場合、完全にノーコードではなく、SQLを書いたりデータをJavaScriptで整形したりといった柔軟性も兼ね備えているのでエンジニアとしては非常に使いやすかったです。結果として管理画面開発の工数が短くなった上に、色々なやりたいことが実現できました。<br><br>クエリアのプロダクトアップデートも頻繁にチェックしていて、先日リリースされたページ遷移の機能やバージョン管理の機能でさらに使いやすくなったなと感じました。<br></p><h2 id="h26aa61d4b4">— 新機能もリリースしたらすぐに使っていただいていてますよね。クエリアを使った開発において特に工夫したことはありましたか？</h2><p>クエリアはRestAPIにも対応していたので、扱うデータによって、データベースのレプリカ経由のものとAPI経由のものを使い分けています。Read処理だけはレプリカのDB経由にしておいて、Write処理などははしっかりとロジックを書いたAPIを経由するように使い分けています。<br><br>弊社の方でAPIを全て整理する時間がなかったので、Readに関してはIPアドレス制限をかけてデータベースのレプリカに直で接続した結果、早く管理画面の開発を終えることができました。<br></p><h2 id="h45934f5bb9">— レプリカ経由とAPI経由を分けて構築したことで結果的に早く管理画面の開発が終わったんですね。</h2><p>はい、レプリカであれば間違ってデータが書き変わるリスクもないので安心して使うことができています。<br></p><h2 id="had6e04805b">— どのようなチーム体制でクエリアを利用していただいたのでしょうか？</h2><p>管理画面の開発は実質、私一人で行いましたが少しだけエンジニアにも触ってもらいました。その人はエンジニア歴が長い人だったので特に詳しい説明もせずに実現したいことを提示した上でドキュメントを渡し、現状のクエリアで作った管理画面を見ながらサクサクと必要な修正をしてもらうことができました。<br><br>また、完成した管理画面は新規事業チームの4,5人のビジネスサイドに業務の中で使ってもらっています。今のところ特に不満は出てきていません。管理画面なので、特に不満が出ていなければ要件は満たせているかなと感じています。<br></p><h2 id="h585f3b8dde">— 「クエリア」を導入した感想をお聞かせください。</h2><p>クエリアを使用して管理画面を構築してみると、1週間足らずで「ウルカモ」のオペレーションに必要な管理画面を構築することができました。<br><br>おかげで、開発スケジュールのほとんどをユーザー向けプロダクトの開発に充てることができ、「ウルカモ」を迅速に立ち上げることができました。開発スケジュールを大幅に巻くことができ、今までのスクラッチでの開発がなんだったのかと思えるほど管理画面の開発が楽になりました。<br><br>サービス立ち上げから 2ヶ月以上経った現在でも、クエリアで構築した画面に改善を加えつつ、業務に支障なくオペレーションできています。<br></p><h2 id="h8afae4f65b">— 今後の事業の展望をお聞かせください。</h2><p>まずはお客さん向けのプロダクトを成長させて「ウルカモ」の事業をPMFさせたいと考えています。<br><br>お客さん向けの機能に開発チームのリソースをこのまま全集中させて、グロースの段階になったらクエリアでさらにトランザクションの分析など分析系の管理画面の実装も進めていきたいと考えています。<br></p><h2 id="h6fae1b6b66">— まだまだローコードで管理画面を構築するという考えが世の中に浸透していないなと感じています。最後にこれからローコードサービスを試したいと考えている方々にメッセージをお願いいたします。</h2><p>今まで、Zapierなどのワークフローを組むiPaaSは使ったことがありましたが、画面を作っていけるローコードサービスを実際の業務の中で使ったのは私も今回が初めてでした。結果的に開発工数が大幅に削減され、今までなんでこういうサービスがなかったのか、必要なタイミングでこういったサービスが使えることを非常に嬉しく思っています。<br><br>データソースの組み合わせや JavaScript を使用したデータ整形などを使いこなせば、スクラッチ開発の管理画面にも引けを取らない画面をクエリアで構築することができると思います。今から管理画面を作る方にはぜひ試してみてもらいたいサービスです。<br><br><strong>＜ウルカモについて＞</strong></p><blockquote>「ウルカモ」（2022年2月10日サービス提供開始）は、持ち家の売却を検討する方が住まい情報を手軽に投稿して、中古住宅の購入を検討する方がその投稿にリアクションをすることができる、日本初の売り出し前中古不動産の売買意向のマッチングプラットフォームです。<br><a href="https://cowcamo.jp/urucamo" target="_blank" rel="noopener noreferrer">https://cowcamo.jp/urucamo</a></blockquote><p><br></p>

株式会社ツクルバ  2011年8月に創業。「『場の発明』を通じて欲しい未来をつくる」というミッションのもと

Querierブログ