ノーコード部活動報告　〜 Glideで本を管理するアプリを作りました 〜

ノーコード部発足

コードが書けなくてもWebサイトやアプリが作れるノーコードツールについては以前にもこのブログで「Webflow」をご紹介しました。まだあまり知られていないものから、Shopifyのように一般的にもかなり認知度の高いツールまで近年たくさんのツールが誕生しています。ノーコードを利用した事例もよく見るようになってきました。（最近ではデジタル庁のWebサイトにSTUDIOを用いているのが話題になっていましたね）
ニューロマジックでもSTUDIOやWebflow、Wix、Shopifyなどのツールを実案件で使用する事例が増えてきています。このような背景からニューロマジックでは今年の春に社内部活動「ノーコード部」が発足しました。ノーコード部では、主にツールの研究、社内外への周知を目的に活動しています。メンバーは全員デザイナー、非エンジニアで、具体的な活動内容は以下です。

1. 個々の案件に最適なツールをご提案できるよう、ツールの特徴を詳細に調べ、社内の誰でも閲覧できるようNotionにまとめる
2. 試作したものを社内でレビューをしてもらい、そこで得た様々な気づきを次回の作成に活かす
3. 社外のノーコード専門のオンラインサロンに入会し、情報を収集する
4. ノーコードに関するSlackチャンネルを用意し、部員以外も交えて自由に情報発信・意見交換を行う
5. 社内向けサービスを企画・制作

全ての活動を同時に進めていくのはなかなか大変ですが、毎日少しでもノーコードに向き合う時間をとるよう意欲的に取り組んでいます。まずはいろいろなツールを試してみてナレッジをためていこうと思っています。

今回の記事ではツールの勉強を目的に試作したアプリをご紹介します。使用したノーコードツールは「Glide」です。

Glideとは？

Glideとはアメリカ発のWebアプリケーション（PWA）作成ツールで、Googleアカウントがあればすぐに無料で利用できます。Googleスプレッドシートをデータベースとして利用し、そこから自動でアプリを生成してくれます。ノーコードツールの中でももっとも簡単なものの一つで手を出しやすさが魅力のツールです。Glideを使えば緊急時などでも爆速でアプリ開発を実現できますので、そういった面でもとても重宝されています。

自動でアプリ化してくれるんです

スマホだけでなくタブレットもしくはデスクトップのレイアウトで作成することもできます。
例えばこんなものが作れます。

• 自社の社員の部署や担当、プロフィールなどを一覧できる「社員名簿アプリ」
• 観光名所を紹介＆Googleマップで位置を表示できる「観光ガイドアプリ」
• 料理のレシピを食材ごとに紹介する「レシピアプリ」

作ったアプリの概要

そしてこちらが試作した第一弾アプリ、「みんなでつくる NM Library」です。

このアプリ、ひとことで言うと、社員同士が読んでいる本を紹介し合う書評アプリです。
社内にある書籍はスプレッドシートやエクセルなどで管理することが多いかと思いますが、もともとスプレッドシートで管理しているのならGlideでアプリ化するのにはちょうど良さそうだな、という発想から気軽に開発スタートしました。
そしてどうせなら単に所有している書籍をリスト表示するだけでなく、誰がどんな本に興味を持っているのか？、他の人も読んだ感想などをコメントできる機能もあったら面白いのではないかと思い、いくつかの機能を追加することにしました。最終的に以下の機能を実装しました。

要件

• 選者登録（ユーザー登録）機能
• おすすめ本の登録機能
• 本の登録の際、記入項目は「本のタイトル」「登録者」「本のジャンル」「コメント」「Amazonへのリンク」とする
  ※本の表紙や著者氏名、値段などの確認はAmazonリンクから確認してもらうことにするのでここでは省きます。
• 登録したおすすめ本データを編集できる
• ジャンル別に本の一覧が見れる
• 選者別に登録した本の一覧が見れる
• 登録された本に他のユーザーがコメントすることができる

作ったアプリの詳細

Glideのインターフェイスを簡単にご紹介します。ログインするとこのような画面が表示されます。

左側にあるパネルでは各画面にどのコンポーネントを配置するかを選んでいけます。真ん中は実際のアプリの見た目になります。右側のパネルではスプレッドシートのどのシートをソースにするかを選んだり、各コンポーネントの細かなデザインを指定することができます。左側のパネルでタブバーに表示したい４つの項目を設定しました。
では「本棚」「ジャンル」「選者」「本を追加」からなるタブバーの４つの項目をそれぞれご紹介していきます。

本棚

ここはこのアプリのホーム画面になります。みんなが登録した書籍タイトルの一覧が表示されます。新しく登録された本が一番上にきます。（最近はUI、UX関連が多いです。）

あらかじめ用意していたスプレッドシートの「Book」シートがGlideに読み込まれています。これが「本棚（ホーム）」画面の元になっています。

ジャンル

ここでは書籍をジャンル別に見ることができます。

スプレッドシートの「Genre」シートがGlideに読み込まれています。これが「ジャンル」画面の元になっています。

選者

オススメの本を紹介したい人はまず、ここで「選者」としてユーザー登録をします。右下のフローティングボタンをタップすると登録フォームに進めます。

本の登録は「本を追加」から行います。（次項で説明）

もちろん登録せずに誰が何をオススメしているのか見るだけでも構いません。選者別の一覧から気になる人をチェック！

「選者」画面の元になっている「User」シートはこのようになっています。（先ほど登録した「ササキ」さんが追加されています。）

本を追加

先ほどのササキさん、まだおすすめ本が一冊も登録されていない状態なので、ここで早速本を登録してみます！

「Book」シートに追加されました！

先ほどの「User」シートにも書籍タイトルが追加されています！

記念すべきササキさんの一冊目が登録されましたね。この要領で何冊でも登録できます。また、一度登録したデータの編集は「編集」ボタンから行えます。

書籍の詳細画面に感想コメントを書き込むこともできます。

こんな感じでコミュニケーションできる機能までつけると楽しいですね。反応があると登録した人も嬉しいですしね。

「Comment」シートにもコメントと名前が追加されています。

このように投稿フォームへのリンクボタンを設置することもできます。やり方はコンポーネント一覧から「Form Button」を選ぶだけです。
この他にもGoogle マップで位置を表示できる「Map」、画像をアップロードできる「Image Picker」など複数のコンポーネントが用意されています。どんなコンポーネントがあるのか予め知っておくと、アプリ作成の際にアイデアが広がっていくと思いますので、一通り軽くチェックするのがオススメです。

プラスボタンをクリックすると、コンポーネントの一覧が表示されます。

以上がこのアプリの大まかな内容です。

まとめ

このNMライブラリーは一度社内で発表した後、何人かのメンバーから様々な意見をもらいました。自分だけでは気づかなかった問題点など出てくるのでやはり実際に使ってみてもらうのは大事だなと思います。
このブログを書いている今も、色々と改善したいポイントが出てきました。（例えば、登録する書籍は個人購入の本も会社購入の本も入り乱れているので、その区別がつく項目を追加したい、等。）時間を置いてから改めて見てみるとさらに改善点が見えてきますね。

エクセルにまとめているだけでは、素っ気なく、見にくかったり、そもそみんなの目に止まらなかったりしますが、アプリの形になることで、SNS的なコミュニケーションもとれるようになりました。もしエクセルで管理しているものがあったら、試しにGlideでアプリ化してしまってはいかがでしょうか？コードを一行も書かずにアプリができてしまうことにきっと驚きますよ！慣れてくるとだんだんと色々な機能を追加したくなってくるので一つ一つ操作を覚えてレベルアップしていくのも楽しいものです。

今回は具体的な操作方法は、割愛させていただきましたが、ぜひネットで解説記事や動画を探してみてください。たくさんあります。個人的にはノーコードYouTuberしんじさんの動画がわかりやすくてオススメです。

それとNMライブラリーにも登録されている書籍、『基礎から学ぶノーコード開発』。こちらもたくさんの画面キャプチャー入りで丁寧に解説されていてとても参考になりました。

Glideがあらかじめ用意しているテンプレートも豊富にあるので、そちらを眺めていると何かおもしろいアイデアが浮かんでくるかもしれませんね。

今後もノーコードに関する記事を書いていく予定です。
ノーコード部の活動報告もできればと思っております。最後まで読んでいただきありがとうございました。