MAY 14, 2021

EVENT REPORT

今すぐ作れる!

プログラミング初心者がノーコ―ドで簡単にアプリ作成!

INTRODUCTION

2021419(月)ZOOMで開催された「第3弾! 0から始めるプログラミング講座」。株式会社E-Research取締役の上田遼祐様をお招きし、プログラミングの知識がほとんどない近大生の方々に向けて、ノーコドエンジニア体験会を開催しました。

講座に先駆けて、プロのエンジニアの方からリアルな仕事の流れをお聞きしました。その後Glide(コードを使わずにシステムを作れるサイトを用いて、講座参加者アプリを実際に作成する体験をしました。自分でアプリが作れるということで、(本記事の著者自身が)非常にワクワクしながら参加した講座をレポートしていきます。

講師紹介

上田遼祐様

株式会社E-Research 取締役

和歌山大学でプログラミングの講師を行う最強現役エンジニア。アプリ起業を2回経験。元フリーランスエンジニア。今は長瀬駅の近くでプログラミングを教えるITカフェというのをやっている。

INDEX

  1. エンジニアの仕事って何をするの?
  2. Glideとは
  3. 実は簡単にアプリは作れる
  4. イベントレポートまとめ

エンジニアの仕事って何をするの?

「ノーコドでアプリを作成する」が趣旨の本講座のレポートの前に、上田遼祐様にエンジニアのお仕事について伺ってまとめました。こちらを読めばアプリ作成がさらに面白くなること、間違いありません。

エンジニアのイメージ

2021-05-02 (9).png

皆さんはエンジニアの仕事に対して、どのようなイメージを描ますか? 私はパソコンをひたすら「カタカタさせている」イメージでしたが、エンジニアの仕事はそれだけではありません。エンジニアの仕事は以下のように、大きく「5の流れ」に分けることができ、「カタカタさせる」部分はそのうちの1つだけです。

エンジニアの仕事の流れ

2021-05-02 (12).png

1.要件定義

クライアントの要望と、それをどのように叶えるかを文章としてまとめたもの。要望をどれだけ正確に捉えられているかが重要です。

2.設計

どのように要望を叶えるかをシステムに落とし込んだもの。要望に対して「どんなアプリを使って、どのように作っていくか」を決める作業です。

3.実装

実際にプログラミングを駆使してシステムを組み立てていくこと。先ほどのエンジニアのイメージに最も近い、コードを書きだす仕事です。

4.テスト

設計通りに動くかどうか確かめます。要望に応えられているか、バグが発生していないか等を確認します。

5.運用

クライアントに渡して実際に使っていただく工程です。

Glideとは?

2021-05-03 (2).png

GlideGoogleスプレッドシートをデータベースとして用い、ネットを通じて自動的にアプリを作成する「PWA」と呼ばれるアプリケーションです。用意されているUI(ユーザーインターフェース)部品を選んでカスタマイズできるのが特徴です。パワポをいじる感覚で、コードを書かずにアプリを作ることができちゃいます。

どれくらい簡単にアプリを作ることができるのでしょうか。実際に講座で行った内容をレポートします。

実は簡単にアプリは作れる

最初にデータベースを作成しよう

今回はデータベースを作るにあたり、次のような要件定義を設定しました。

2021-05-03 (7).png

Glideでアプリを作る際には、事前にベースとなるデータを記入したGoogleスプレッドシートを準備します。

今回のアプリ作成の目的は、スマホで会員全員のトレーニング記録の進捗管理ができるようにすることです。それでは、ダミーデータを適当に4つ入れましょう。

2021-05-03 (12).png

これでデータベースは完成です。

Glideでアプリを作成しよう

画面右上の緑の部分からGoogleアカウントでサインアップし、別タブからGlideを開きましょう。すると次のような画面が出てきます。

プログラミング 記事素材写真①.jpg

「New App」をクリックし、先ほど作ったスプレッドシートを読み込みます。

2021-05-03 (16).png

すると、Glideとスプレッドシートが連携されて上のようにデータベースの情報が読み込まれました。「よし、アプリ作成開始だ!」…いえ、実はもうアプリは完成してしまったのです(笑)。ここまで約5分。簡単でしたね。

UIをよりよくしよう

ここからは見た目をより綺麗にしていく作業です。

表示パターンの変更

q.jpg

左側の画面の「SCREEN」→「Inline List」をクリックすると、右側の画面の「General」→「STYLE」でさまざまな表示パターンを選ぶことができます。


3.jpg

今回はデータに日付が入っているため、アプリをカレンダー表示にしましょう。画面に「イベントの予定がありません」と出た場合は、右側の画面の「General」→「DATA」の「Start」の部分を「会員名」から「日付」に変更します。

会員名の表示方法

4.jpg

左側の画面の「SCREEN」→「Inline List」をクリックし、右側の画面の「General」→「DATA」の中の「Description」の部分をクリックし、会員に変更できます。

データの追加方法

5.jpg

左側の画面の「SCREEN」→「Inline List」をクリックし、「Add Form」をクリックすると「Allow user to add items」のチェックボックスが表示されますので、オンにします。すると真ん中のスマホが表示された画面の右上に「+」ボタンが表示され、これをクリックすると追加したい新しい項目が表示されます。

2021-05-03 (29).png

項目に入れたい内容を入力して追加ボタンを押すと、入力した情報がスマホ画面に追加されます。この新しいデータは、スプレッドシートにも保存されています。

アプリを公開しよう

右上の「Publishshare)」をクリックすると、次のような画面が出てきます。

2021-05-03 (31).png

Publish app」を押すと、QRコードもしくはURLが表示されます。これを読み取ると、スマホでも見ることができるようになります。「ホーム画面に追加」することでオリジナルアプリとして使うことができ、QRコードもしくはURLを送ると、受け取った人もこのアプリを使えるようになります。

コメント機能を追加しよう

2021-05-05 (2).png

Glideのサイト内の携帯の画面に表示されているデータをどれか一つ押しましょう。私は「腹筋」を押しました。すると、上記のような詳細が表示されました。

6.jpg

画面左の「SCREEN」のすぐ右側にある「+」ボタンを押すと、音声やマップなど色々なオプションを追加できるようになります。ここでは「Comments」をクリックします。すると、コメント機能が追加されます。「コメントを追加」を押すと、メールアドレスを入力する画面が出てきます。メールアドレスを入力するとPINコードが送信されるので、それを確認して入力。サインインできるとコメントを書けるようになり、「投稿」を押すと投稿できるようになります。

2021-05-05 (4).png

しかしこのままだと、他のすべての「腹筋」のデータに同じコメントが表示されてしまいます。これは「腹筋」とコメントが紐づけされている状態なので、全ての「腹筋」にコメントが表示されてしまうからです。

これを改善するにはデータベースとなっているスプレッドシートを開き、他とかぶらないように、以下のようにID」としてナンバーを新たに付け加えます。 

2021-05-05 (5).png

そしてもう一度Glideのサイトに戻ると次のような画面が表示されますので、「Yes」を押します。

2021-05-03 (43).png

その後、左側の画面の「SCREENComments」をクリックし、右側の画面の「GeneralDATA」の「Topic」 を「ID」にすることで「ID」に対してコメントをすることになり、絶対にかぶらなくなります。

ぜひ実際にGlideを使いながらこの記事を読んだ方は、読まれると良いでしょう。

イベントレポートまとめ

Glideにはさまざまな機能や改善の余地がありますが、本講座はここまででお開きとなりました。あえて全ての機能や改善点の紹介を行わなかった理由は、参加者自身の手でこのアプリをよりよくしてもらいたいからです。「もっとこうした方がいいよね」「こういう機能があったらいいな」というように考えることがエンジニアとして差別化できるところであり、一番面白い部分だと講師の上田様はおっしゃっていました。

エンジニアの仕事は、システムを作って終わりではありません。皆様には、是非改良を加えてオリジナルアプリの作成に挑戦していただきたいと思っています。そして本講座に参加した方の中から、実際に他の方に使っていただけるようなシステムを開発する方が現れることを期待しています。

今回の「第3弾! 0から始めるプログラミング講座」も参加者からは、「プログラミング未経験だったが、わかりやすい説明でアプリを作れたので面白さがわかった」「これから社会人になるが、このGlideを使って社員と共有したいと夢が広がった」などの声をいただき、大好評でした。早くも第4弾を525日(火)に開催することが決定しました。皆様の参加をお待ちしております。お読みいただき、ありがとうございました。