【glide】非エンジニアが“ノーコード”で限界まで頑張ってシステム開発した話をします【SBI外国株管理アプリ】
＊デモアプリの利用申請はWebサイトからお願いします＊
■PC版
https://my-portfolio-smorce.studio.design/
■スマホ版
https://my-portfolio-smorce-sp.studio.design/
こんにちは、smorceです。
最近、ノーコード(Nocode)やローコード(Lowcode)という言葉が一種のバズワードとして流行っています。
試しに「ノーコード ローコード」でGoogle検索をすると990万件ヒットします。(2020年8月現在)
ノーコード(Nocode)やローコード(Lowcode)とは
ノーコード(Nocode)
プログラミングコードを書かずに自分が実現したいアプリケーションを作成するサービス
ローコード(Lowcode)
少ないコード量で自分が実現したいアプリケーションを作成するサービス
ノーコードより柔軟性はあるが、一部専門的な知識が必要になる
と説明されています。
ノーコードのコンセプトを一言で表すと、素人に“スーパーパワー”を授けるようなサービスです。
技術力がない非エンジニアでもアイデア次第で素晴らしいプロダクトを開発できる、それがノーコードです。
今回はこちらのノーコードのサービスを利用してあるシステムを開発しました(※)。
※本記事では、ローコードの話はございません
私の製作物の紹介に入る前に、実際に非エンジニアの方が製作されたプロダクトを簡単にご紹介させて頂きます。
こちらのサービスはテレワーク時に使えるスペースの口コミサイトだそうです。非エンジニアの方が4時間くらいで製作されたそうですが、ぱっと見、クオリティの高いサービスに仕上がっています。
コーディングなし、なおかつ、4時間という短時間で、このクオリティでサービスインできるのがノーコードの凄いところですね。
私の製作物
今回私が製作したものの一覧はこちらです。
色々書いてありますが、ポイントになるのは「コスト」のところです。記載させて頂いた通り、全てFree つまり無料となります。今回の製作物に関しては一切お金はかかっておりません。
システムのワークフロー
アプリを開発するだけではもったいないと思い、「ユーザさんがデモアプリの利用申請をする」というケースを想定したシステムの構築を行いました。
システムのワークフローは下記の通りです。
■システム
①ユーザさんがWebサイトを訪問し、Webサイト経由でデモアプリの利用申請を行う
②利用申請が行われたら、私のGmailアカウントに連絡が飛ぶ
③Gmailに受信されたら、ユーザさんのEmailアドレス宛にデモアプリのDLリンクがついたサンキュメールを返信する
④Gmailに受信されたら、私のLINEアカウントに通知が飛ぶ
4つの工程を自動化させる為に、ZapierやGoogle Apps Script(GAS)を利用してシステム全体をAutoで稼働させています。
スマホアプリ開発に必要なものと、ノーコードの革新性
スマホアプリ開発では三種の神器と呼ばれる機能が存在します。
1. データベース…データの書き込み、呼び出しなど
2. バックエンド…データ処理など
3. フロントエンド…画面の入出力など
サービスで利用する為のデータを「データベース」に保存し、保存されたデータを「バックエンド」で処理して、処理された結果を「フロントエンド」で表示する。
こういった一連の流れは一般的なスマホアプリの機能として必須で、それを成立させる為には「データベース」「バックエンド」「フロントエンド」の機能が必要になるわけですね。
では、ノーコードは何が革新的なのかというと、これらの三種の神器を専門知識不要で、開発時に意識することなく利用できるところにあります。
コーディングは一切必要とせず、なおかつ、GUIベースでポチポチクリックしていくだけで開発することが可能です。
データベースはGoogleスプレッドシートを代用するノーコードが多いです。
ノーコードのカオスマップ
これがノーコード界のカオスマップだあああああ！ pic.twitter.com/BN9p5byOA3
— しんじ🇻🇳NoCodeユーチューバー (@__shinji__) February 13, 2020
本記事の作成時点ではちょっと古い情報ですが、それでも色々なサービスがリリースされていることが分かります。肌感としては、これでもごく一部だと思います。
有名なノーコードサービス
有名なノーコードサービスです。特にbubbleは一番有名なノーコードなんじゃないでしょうか。
bubbleはオールインワンを目指しているサービスで、bubbleを使えばどんなサービスも開発できる、そんなコンセプトで開発されています。
実際にbubbleをマスターするまでに何十時間も必要なくらい、大規模なサービスに進化していますが、それでもプログラミングをマスターするよりは遥かに習熟コストは低いと思います。
この中でSTUDIOは唯一の国産ノーコードで、Webページを直感的に製作することができます。STUDIOはproducthuntで1位を取るという日本初の快挙を成し遂げた期待のサービスとして注目されています。
この中で特に有名なのはwebflowでしょうか。STUDIOと同じくWebサイトを製作する為のノーコードですが、コンセプトはbubbleのようにオールインワンを目指しています。実際にプロのWebデザイナーも仕事で使うくらい完成度の高いサービスになっています。
Zapierは「タスクの自動化」の文脈で頻繁に出てくるノーコードです。日々同じ作業を繰り返すようなルーティン系のタスクをZapierに登録しておくと、決まった時間にタスクを自動的に処理してくれます。英語のサービスですが、UIも直感的で非常に分かりやすい為、導入のハードルは低いと思います。無料アカウントでは3つまでタスクを登録することができます。
製作物の紹介
Webアプリの開発ではglide(グライド)というノーコードを利用しました。
glide は2018年にスタートしたサンフランシスコ・ベイエリア発のスマホアプリ作成サービスで、Googleスプレッドシートをデータベースとして使用することができます。製作したアプリはスマホアプリのような見た目で動作します。
前置きが長くなりましたが、今回 私が製作したアプリをご紹介します。
「SBI証券の外国株を管理できるアプリ」です。
個人的な趣味としてSBI証券で外国株を購入しているのですが、それらの金融商品をアプリで管理できたら便利だなと思いまして、開発してみました。
SBI証券の外国株管理アプリ「My portfolio」
製作時間は35時間くらいですが、データの整備に苦戦して1/3くらいの時間を使った為、実際にアプリ開発に費やした時間は35時間のうちの2/3くらいです。公開する関係上、入っているデータはダミーとなっております。
■機能一覧
- ポートフォリオの表示
- 現在の配当利回りの表示
- 累計配当金額の表示
- 個別銘柄のリストと詳細の表示
- 製作者プロフィールの表示
- パスワードの設定
3つのメニューがあり「portfolio」「stock list」「profile」を製作しました。実際にどのような機能があるのかはPC版Webサイトに動画を掲載しましたので、そちらを御覧ください。
アプリをダウンロードすると、ホーム画面に「My portfolio」というアプリが追加されます。
Webサイトとアプリ紹介動画
Web製作で使ったノーコードはSTUDIOです。下記が実際に製作したWebサイトです。うまくレスポンシブにできなかったのでサイトを2つ(PC版、スマホ版)作りしました。
■PC版
https://my-portfolio-smorce.studio.design/
■スマホ版
https://my-portfolio-smorce-sp.studio.design/
このようにユーザさんがWebサイトから利用申請を行うと、私宛にメールが飛んできます。
メール配信システム
利用申請を行ったユーザさんに対して、ユーザさんのEmailアドレス宛にデモアプリのDLリンクがついたサンキュメールを返信します。そこでメール返信を自動化する為にZapierを利用しました。
メール返信をする際にユーザさんのEmailアドレスを取得しなければならない訳ですが、私宛に届くメールの本文にユーザさんのEmailアドレスが埋め込まれていました。その為、サンキュメールを送信する為にはメール本文を解析する必要がありました。
そこで、Zapierでは3つのタスクを作成しました。
LINE通知システム
ユーザさんが利用申請を行うとSTUDIOから私のGmail宛にメールが届くわけですが、その都度Gmailをチェックしにいくのは非効率でした。そこで、STUDIOから私のGmail宛にメールが届いたら、私のLINEアカウントに通知する仕組みを導入しました。
LINEに通知する仕組みはGoogle Apps Script(GAS)を利用しました。何やら難しいことをやっているように見えますが、やっていることは3つです。
・studio.designの未読メールを5分おきに探索する
・未読メールがあればLINEに通知する
・LINEに通知した後、未読を既読に変更する
GASでコードを書き、それを5分おきに定期実行するよう登録しました。ですので、正確には「未読メールを5分おきに探索する」という部分は「GASで書かれたコードを5分おきに実行する」が正しいです。
GASで書くコードに関してはこちらの記事を参考にさせて頂き、ほとんどコピペで作成しました。ただ、メールを既読にする処理の部分だけ少しイジらさせて貰いました。
※ノーコードと言いながら3行ほど自分でコードを書きましたが、GASはそもそもノーコードのサービスではないので、これは(都合良く)ノーカンにしました。
実際に通知が来る様子です。
まとめ
ZapierやGoogle Apps Script(GAS)を利用してシステム全体をAutoで稼働させるようにしました。
このシステムを構築するにあたり利用させて頂いたノーコードは下記の3つです。
と思いました。
ちなみに、ノーコードを学びたい方向けのスクールもできたようです。
以上となります。
非エンジニアでもこれくらいのサービスなら無料で開発できる、という事例を紹介させて頂きました。システムの開発まで含めると全体で60時間ほどかかりましたが、ノーコードの使い方が理解できるともっと短時間で開発することができると思います。
やってみた感想としては、個人の趣味として利用したり、モックやプロトタイプレベルのサービスをサクっと開発するようなビジネスシーンで大きな力を発揮するんじゃないかなと感じました。
ノーコードで開発したサービスで黒字化できているものもたくさんありますので、アイデア次第では事業化のポテンシャルも十分にあると思います。
この記事が気に入ったらサポートをしてみませんか？