<h2 id="h22db4f3f4f">対象</h2><ol><li>MySQLにCSVデータをインポートしたい人</li><li>面倒なコマンドやSQLを書かずに簡単にインポートしたい人</li><li>CSVインポート用のUIを用意して、ビジネスサイドにインポート作業を任せたい人</li></ol><h2 id="hc705a9411d">方針</h2><p>今回はSQLなどを書いて一時的にCSVをインポートするのではなく、ローコードツールのクエリアを使って、SQLを書かずにCSVファイルをインポート機能を構築する方法をご紹介します。<br>SQLなどを書きたくない方やビジネスサイドにUIとしてCSVインポート機能を提供したい方におすすめの方法です。</p><h2 id="hb4ed9374f5">完成物</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F742124753%3Fh%3D5c65bf0cd2%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F742124753&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1493259796-efd8c703647b66f4349c854b69a00b32e52dff1b0733040443234e076cfcc001-d_1280&key=ef481becf9fd4c17aa243190ea33aa20&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><h2 id="h8a2fd897b1">クエリアのアカウントを準備する</h2><p>まずは、<a href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">こちら</a>にアクセスし、クエリアのアカウントを準備します。</p><h2 id="hcc9be74143">MySQLと連携する</h2><p>手順1: クエリアの「データ連携」タブから「新規作成」をクリック<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/ffebac9c42324b4cbb5e6fc2cd5e7612/%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-08-23%2013.12.43.png" alt="" width="3584" height="2032"><br>手順2: MySQLを選択し、ホワイトリストに登録するIPアドレスを確認し、MySQLのホワイトリストに記載のIPアドレスを設定する。<br>手順3: MySQLの接続情報を入力する<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/ee41eb2a2a3d465fbdbeec924a542def/%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-08-23%2013.14.41.png" alt="" width="3584" height="2030"></p><h2 id="h4d0ebf076d">CSVをインポートする機能を作成する</h2><p>手順1: アプリとページを作成する<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/265db2f3ed27457589904b7e4572017b/%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-08-23%2013.16.16.png" alt="" width="3584" height="2032"><br>手順2: 「ファイル」コンポーネントをドラッグ＆ドロップして、配置する<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/fdd4ae5c9c0947a9a3eb2ce046fdd115/%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-08-23%2013.17.11.png" alt="" width="3584" height="2032"><br>手順3: 左上のデータフローリストから「新規作成」をクリックする<br>手順4: 連携したデータソースを選択する<br>手順5: 「モード」で「GUI」を選択する<br>手順6: 「アクション」が「Bulk inert」になっていることを確認する（ここを「Bulk upsert」にすると、Upsertが可能になります）<br>手順7: 「Table」にインポートしたいMySQLのテーブル名を入力する<br>手順8: 「Items」に <code>{{ file1.value[0].parsedData }}</code>  と入力する<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/4d28baa984554a45b86136d9d3c8c01d/%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-08-23%2013.25.24.png?w=320&amp;h=830" alt="" width="320" height="830"><br>手順9: 「ボタン」コンポーネントを配置する<br>手順10: 右タブの「イベントを追加する」をクリックする<br>手順11: 「データフロー」で「dataflow1」を選択する<br><img src="https://images.microcms-assets.io/assets/d227d458429d4051a17239ee5909bf41/5c3192c7bbd9465597ad3bea26722e34/%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-08-23%2013.27.00.png?w=317&amp;h=732" alt="" width="317" height="732"></p><h2 id="h58b7a4d905">動作を確認する</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F742124753%3Fh%3D5c65bf0cd2%26app_id%3D122963&dntp=1&display_name=Vimeo&url=https%3A%2F%2Fvimeo.com%2F742124753&image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1493259796-efd8c703647b66f4349c854b69a00b32e52dff1b0733040443234e076cfcc001-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><h2 id="h3bcda3e6b0">最後に</h2><p>今回はクエリアを使ったCSVインポート機能を紹介しました。他にもMySQLやその他DB・APIなどと連携して様々な業務上の課題を解決できますので、クエリアにご興味のある方は下記リンクより登録して、体験してみてください。<br><br>クエリアを試してみる: <a style="background-color:#ffffff" href="https://app.querier.io/signup" target="_blank" rel="noopener noreferrer">https://app.querier.io/signup</a></p>

今回はローコードツールのクエリアを使って、SQLを書かずにCSVファイルをインポートする方法をご紹介します。

MySQLにCSVファイルをインポートする方法 | SQLを書かずに実行する方法・アップサートまで解説

<p>みなさんこんにちは、Querier開発チームです。<br>アプリケーションのエラーを監視したいという要件はどの開発チームでもあると思います。<br>今回は、</p><pre><code>Cloud Logging → ログルーター → Cloud Pub/Sub → Cloud Functions → Slack</code></pre><p>という構成でCloud LoggingのエラーログをSlackに通知してみます。<br></p><h2 id="h74dc938bc7">Cloud Loggingでログを収集する</h2><p><a href="https://github.com/blendle/zapdriver" target="_blank" rel="noopener noreferrer">Zapdriver</a>を使うと、Cloud Loggingに最適化したログを残してくれます。</p><pre><code>package main

import (
	"log"
	"runtime"

	"github.com/blendle/zapdriver"
	"go.uber.org/zap"
)

var l *zap.Logger

// Zapdriverを使ってLoggerを初期化する
func init() {
	var err error
	l, err = zapdriver.NewProductionWithCore(zapdriver.WrapCore(
		zapdriver.ServiceName("&lt;app_name&gt;"), // 任意のアプリケーション名
	))
	if err != nil {
		log.Fatal(err)
	}
}

// ログを残す
func main() {
	err := fn()
	if err != nil {
		l.Error(
			err.Error(),
			zapdriver.ErrorReport(runtime.Caller(0)),
		)
	}
}</code></pre><h2 id="hb398bc9bcf">Cloud Loggingのログルーターを介してCloud Pub/Subにシンクする</h2><p>① GCPコンソールの左タブの「ロギング」→「ログルーター」に行きます。<br>② 「シンクを作成」を押します。<br>③ 「シンク名」を入力します。<br>④ 「シンクの宛先」は「Cloud Pub/Sub トピック」を、「Cloud Pub/Sub トピックを選択」は「新しい Cloud Pub/Sub トピックを作成する」を選択し、新しいトピックを作成します。<br>⑤ 「<span style="color:#000000">シンクに含めるログの選択</span>」では、任意のフィルタを記述します。例として、Cloud Runのエラーログのみを通知する例を下に記しておきます。</p><pre><code>severity=ERROR
resource.type="cloud_run_revision"</code></pre><p>⑥ 4は一旦省略でOKです<br><br>これで、フィルタにマッチするログを認識してCloud Pub/Subのトピックにパブリッシュされます。<br>以上でログルーターの設定は終了です。また、Cloud Pub/Sub側の設定も特段必要ありません。</p><h2 id="h9c83b93cc4">Cloud Functionsの関数を記述する</h2><p>今回はGoで関数を記述してみます。</p><pre><code>package function

import (
	"context"
	"encoding/json"

	"github.com/slack-go/slack"
)

// ログルータを介してパブリッシュされたデータが入ってくる構造体
type PubSubMessage struct {
	Data []byte `json:"data"`
}

// Cloud Loggingで収集するデータ構造をGoの構造体として定義する
type ErrLog struct {
	InsertID string `json:"insertId"`
	Resource struct {
		Type   string `json:"type"`
		Labels struct {
			ServiceName       string `json:"service_name"`
			ProjectID         string `json:"project_id"`
			Location          string `json:"location"`
			RevisionName      string `json:"revision_name"`
			ConfigurationName string `json:"configuration_name"`
		} `json:"labels"`
	} `json:"resource"`
	Timestamp string `json:"timestamp"`
	Severity  string `json:"severity"`
	Labels    struct {
		InstanceID string `json:"instanceId"`
	} `json:"labels"`
	LogName          string `json:"logName"`
	ReceiveTimestamp string `json:"receiveTimestamp"`
	JSONPayload struct {
		Timestamp      string `json:"timestamp"`
		Stacktrace     string `json:"stacktrace"`
		Caller         string `json:"caller"`
		ServiceContext struct {
			Service string `json:"service"`
		} `json:"serviceContext"`
		Message string `json:"message"`
	} `json:"jsonPayload"`
	Context struct {
		ReportLocation struct {
			FilePath     string `json:"filePath"`
			FunctionName string `json:"functionName"`
			LineNumber   string `json:"lineNumber"`
		} `json:"reportLocation"`
	} `json:"context"`
	SourceLocation struct {
		File     string `json:"file"`
		Line     string `json:"line"`
		Function string `json:"function"`
	} `json:"sourceLocation"`
}

const webhookURL = ""

func Fn(ctx context.Context, m PubSubMessage) error {
	l := &amp;ErrLog{}
	if err := json.Unmarshal(m.Data, l); err != nil {
		return err
	}

	return slack.PostWebhook(webhookURL, &amp;slack.WebhookMessage{
		Username: "&lt;user_name&gt;",
		Channel:  "&lt;channel_name&gt;",
		Text:  l.JSONPayload.Message,
		Attachments: []slack.Attachment{
			{
				Color: "danger",
				Fields: []slack.AttachmentField{
					{
						Title: "ProjectID",
						Value: l.Resource.Labels.ProjectID,
					},
					{
						Title: "Service",
						Value: l.Resource.Labels.ServiceName,
					},
					{
						Title: "Severity",
						Value: l.Severity,
					},
					{
						Title: "Timestamp",
						Value: l.JSONPayload.Timestamp,
					},
					{
						Title: "Stacktrace",
						Value: l.JSONPayload.Stacktrace,
					},
				},
			},
		},
	})
}</code></pre><h2 id="h5298b54cdd">Cloud Buildを使って関数をデプロイする</h2><pre><code>steps:
- name: 'gcr.io/cloud-builders/gcloud'
  args:
  - functions
  - deploy
  - &lt;Cloud Functionsの名前&gt;
  - --runtime
  - go116
  - --region
  - asia-northeast1
  - --entry-point
  - Fn
  - --trigger-topic
  - &lt;Cloud Pub/Subのトピック名&gt;</code></pre><p>以上でエラーログを収集し、Slackに通知をするセッティングは完了です。<br>Cloud Loggingのみでは、Slackに通知することができず、GCP内の複数のサービスを使うことによって実現することができます。<br>複数サービスを連携しなければいけないので一見複雑そうに見えますが、それぞれのサービスではそこまで難しいことはやっていないので、ぜひやってみてください！<br></p>

みなさんこんにちは、Querier開発チームです。  アプリケーションのエラーを監視したいという要件はどの開発チームでもあると思います。 

Cloud Loggingで収集したログをCloud Pub/SubとCloud Functionsを使ってSlackに通知する

<p>こんにちは、Querier開発チームです。<br><br>みなさんは管理画面をどのように作成しているでしょうか？バックエンドとフロントエンドともにフルスクラッチで開発していますか？RailsやDjangoのオールインワンのライブラリを使っていますか？<br><br>Querierは「ローコード」で管理画面の開発をするという新しいソリューションを作ることにチャレンジしています。今回は管理画面をローコードで作成できる『Querier』がどのような課題を解決するのかを紹介したいと思います。<br></p><h2 id="h9d7af3fc31">プロダクトチームにおける管理画面・社内ツールの重要性</h2><p>まず、管理画面や社内ツールはどれほど重要なものなのかを考えていきます。<br><br>私の見解は、<strong>とても重要なものだが、エンジニアが社内ツールを開発しやすい環境が整っていない</strong>ことにより、疎かになっていると考えています。<br><br>最近元Metaのエンジニアのエピソードが少し話題になりましたが、この中で社内ツールに言及されています。<br><br>彼は<strong>自分自身が感じた社内の課題を、社内ツールを開発して解決し、その社内ツールが組織内でスケールして、全体の労働時間の削減に貢献した</strong>というものです。また、このような活動がMeta社から評価され、追加のボーナスや株を付与されたそうです。<br></p><blockquote>チームではバグレポートから関連した情報を抽出するのに時間がかかっていた。<br>それを解決するために彼はAndroidエンジニアにも関わらず、社内ツールを開発し、それが多くのチームの労働時間削減に貢献した。</blockquote><p><br>参照: https://twitter.com/sakamoto_582/status/1646435095174328320<br><br>このように、課題を発見した人が解決できる最適なソリューションをスムーズに構築できる環境が必要だと思っています。クエリアはこういった社内文化への貢献をしていきたいと考えています。<br></p><h2 id="hb4bcaff6f9">管理画面・社内ツールを開発しないとどうなるのか</h2><p>では、管理画面や社内ツールが開発できていない組織ではどのような課題が発生するのでしょうか。<br>以下によくある課題をまとめてみました。<br></p><h4 id="hb175e8d38d">1. 細かい作業がエンジニアに依存してしまう</h4><p>例えば、</p><ul><li>アカウント認証・登録・監視</li><li>データの作成・更新・削除</li><li>お知らせ配信</li></ul><p>のようなデータベースに依存するオペレーションで、エンジニアが直接APIを叩いていたりしませんか？<br>このような時に管理画面は非常に有用です。管理画面があれば毎回エンジニアに頼んでいた作業をビジネスサイドの人が自ら実行できるようになります。<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="h62b2a864d3">管理画面・社内ツールをスクラッチで開発するとどうなるのか</h2><p>ここまで、管理画面や社内ツールがどれほど重要な役割を担っているのかを解説してきました。<br>とはいえ、スクラッチで開発するとなると別の問題が発生してしまいます。<br></p><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="ha9d6232445">『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://www.querier.io" target="_blank" rel="noopener noreferrer">https://www.querier.io</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連携が追加されましたので、こちらで解説させていただきます。

Querierブログ