最近流行するノーコードツールの中でも、ひときわその利便性が注目されているのが、Glideです。
日本でもAdalo,Bubble，Glideといったノーコードツールを活用することで、コードを一行も書くことなくアプリを作成する人が増えていますが、Glideの最大の特徴は、その扱いやすさ、テンプレートの豊富さにあります。
しかしこれまでGlideの公式ドキュメントやチュートリアル動画は基本的に全て英語であり、少しずつ日本語の記事が登場しつつあるものの、まだまだ初心者にとっては敷居が高い状況が続いています。
そこで今回は、プログラミングを一切やったことのない人に向けて、モバイルアプリの代表例である「Amazon」「ZOZOTOWN」のようなECサイトを作成しながら、Glideの威力、またほかのノーコードツールとの違いを概観していきたいと思います。
1．ノーコード開発ツールGlideとは？
まずGlideとは何なのか、Glideを使うと何が出来るのかを確認していきましょう。
Glideは、アメリカ発のアプリケーション開発用ノーコードツールの一つです。データベースをスプレッドシートで管理することができ、ある程度プログラミングやデータベースの知識があるとスムーズにキャッチアップできる他ツールに比べても圧倒的なわかりやすさを実現しています。
システム開発においてもっとも重要とされる設計の一つがデータベースの設計ですが、プログラミング経験のない人であっても、GlideであればMicrosoft ExcelやGoogle スプレッドシートの扱い方さえ分かっていれば、自由自在にデータを扱うことができるようになります。
もちろんノーコードツールとしての魅力はそれだけではありません。テンプレートが非常に豊富で、基本的に思いつくような機能であれば、ほとんどすべて公開されているテンプレートを使うことで、ワンクリックで実装できてしまいます。
このテンプレートツールは有志によって公開されており、基本的には無料でコピーして活用することができます（一部有料）。
Glideではブラウザで閲覧するWebアプリケーションの態様（Progressive Web Apps、略:PWA）がメインとなりますので、スマートフォンのネイティブアプリを開発した際であれば必要となるApp Store,Google Playへのデプロイといった作業も不要です。
作成においては、一から画面の遷移やレイアウトをカスタマイズすることもできますが、先述したような、開発頻度の高い複数のユースケースに即したテンプレートを活用することで、アプリ開発をしたことのないユーザーでも配色、レイアウトなどを自動で最適化したアプリを数クリックで作成することができます。
早速、その威力を実感すべく、Glideの世界へ飛び込んでみましょう。
2．Glideを使うための準備をしよう
Glideは基本的なサービスは無料ですが、サービスを利用するためには会員登録をする必要があります。
公式サイトへジャンプし、画面中央のBuild an appをクリックしましょう。
Googleアカウントを利用した認証の画面に遷移するので、使用したいGoogleアカウントを選択し、Googleドライブへの権限を許可すれば、Glideをアクティベートできるようになります！
これで認証は完了です！Glideを使う準備ができました。
3．ノーコードでアプリを実際に作ってみる
認証を完了したところで、さっそくアプリを作成していきましょう。
ホーム画面の見方
認証が完了し、Glideを利用可能になると、ホーム画面が表示されます。
まずはホーム画面の見方を確認しましょう。
中央のAppsには、自身が作成したアプリの一覧が表示されます。
テンプレートの使用有無・選択
さっそく、テンプレートを使ってアプリを作成します。
画面中央のApps下の「Create app…」にカーソルを合わせると、アプリをGoogleスプレッドシートをインポートして作成するか、テンプレートから作成するか選択することができます。
今回は「From Tempate…」をクリックします。
From template…をクリックすると、テンプレートのマーケットプレイス画面に移動します。
この画面では、デフォルトでGlideがセットしているテンプレートの他、有志が無料・有料で公開しているものを目的に応じて選択することができます。
- 画面中央の「Search Templates」では、欲しいテンプレートがないか、キーワードを入力して検索可能です。
- 画面左部の「CATEGORY」では、機能に応じてテンプレートがカテゴライズされているので、欲しいデザイン・機能がセットされているテンプレートを選択できます。
今回はGlideがデフォルトで提供しているテンプレートで、スマホで操作するECサイトを作成することができる、「Mobile Store」をクリックしてみましょう。画面中央付近の黒アイコンです。
クリックするとこのようにテンプレートの説明が表示されますので、「Copy app for free」をクリックしましょう。
アプリのプレビュー画面に遷移します。挙動を確認し、問題なさそうであれば、右上の「COPY TEMPLATE」をクリックしましょう。
アプリ操作用ホーム画面の見方
テンプレートをコピーすると、それをインポートしたアプリが自動で作成されます。
アプリ作成後のホーム画面は下記のようになります。
特に赤枠内では、アプリのフロントエンドを中心として、各画面の変遷や、画面の名前、画面内の項目名などを追加・変更・削除することができます。また、左部ではアプリのデータベースや設定を中心とした操作、例えばデータベースの行・列に格納する項目の指定や新規画面の追加、各コンポーネントの追加・更新などが可能です。
さて、ここまででGlideが生成してくれたECサイトアプリができていることになります。
Glideで作ったアプリを操作する
さっそくプレビュー画面を確認していきます。
現在表示されている画面が、プレビュー画面となります。
赤枠内ボタン（本画像上はセキュリティのため黒アイコン）にて、閲覧するスマートフォンのOSをiOS,Androidから選択できます。
画面に表示されているスマホアプリでは、下部にタブが三つあり、現在左側のプレゼントアイコンが選択されています。
このプレゼントアイコンを選択すると、商品の一覧ページが表示されます。試しに一番上の「Glide in Black」というTシャツの商品をクリックしてみましょう。
商品の詳細ページに遷移します。
商品の値段、メンズ・レディース・子供服など服のカテゴリ、商品説明などが記載されています。
「カートに追加」を押してみましょう。商品がカートに追加されます。
ここで画面下部のカートマークをクリックし、注文確認画面に遷移してみましょう。
カートの中に、先ほど追加した「Glide in Black」というシャツが一枚追加されていることがわかります。
なお、支払いの際には、支払いアプリStripeの連携が必要となります。
※本アプリではStripeの連携はしませんが、実際の本番環境では、Stripeと連携させることで、実際に商品の支払いを実行することが可能となります。
真ん中のチャットマークもクリックして画面を遷移してみましょう。
真ん中のチャットマークをクリックすると、メッセージング機能が使用可能です。
本番環境で開発したアプリでは、カスタマーサポートなどに連絡することが可能になります。
右下の＋ボタンから新しいチャットを作成してみましょう。
氏名とメールアドレスを入力し、続行します。
メールアドレスを入力すると、認証のためのPINをリクエストされるので、入力するメールアドレスはダミーではなく実在のものを入力することがおすすめです。
サインインに成功すると、メッセージが送れるようになります。
テスト文章を入力し、送信ボタンを押してみましょう。チャットが送信されるのが確認できます。
ここまでがアプリ全体の見方になります。いかがでしょうか。カスタマイズなしでもここまで本格的なアプリが作成できるということが実感いただけたのではないでしょうか。
最後に、自身でアプリをカスタマイズするために必要となる機能を簡単に解説したいと思います。
シェア機能
右上のSHAREボタンから、他の人に作成したアプリをシェアすることが可能です。 URLおよびQRコード形式でシェアすることが可能です。
まずSHAREボタンを押下すると、アプリを公開することを求められるので、「Publish app」をクリックします。
作成したアプリをQRコード、URLのリンクで共有可能になります。
また電話番号を入力することで、その電話番号にリンクを送付することも可能です。
Layout
アプリの諸機能を追加・変更できます。
アプリホームの画面において、ページ左側のROWS直下のアイコンを開き、アプリのデザイン、プライバシー設定、認証、データ同期といった諸機能の作りこみが可能です。
デフォルトでセットされた画面を削除したり、新規に画面を追加することができます。
Glideには各画面内に必要なパーツが揃っているので、新しい画面を作成する場合にこれらを活用していくことで効率的に画面を作りこむことが可能です。
データベースの設計
Glideの最大の特徴であるデータベースですが、リスト形式・引数の設定が必要となる他のノーコードツールとは異なり、表計算ソフトと同様のインターフェースで操作することができます。
画面左部分のデータベースアイコンを開くとデータベースが開きます。エクセルのような縦横の表形式で行および列に追加したい要素を入力すればOKです。
入力した内容をもとに、Glideが自動でデータベース作成に必要な型の判別を行ってくれます。
4．おわりに
いかがでしょうか。本記事においては、Glideのデフォルト機能を最大限活用しECサイトを作成する手順を概観してきました。その際に、テンプレートを使って初歩的な操作を紹介しました。
今後も各ノーコード開発ツールの使い方を分かりやすく紹介していきたいと思います。
また、ノーコードジャパンでは、ノーコード開発者たちが気軽に質問し合える無料のプラットフォームNoCode Forumを運営しております。ノーコード開発で分からないことがあったら一人で悩まず、気軽に質問してみましょう。
ノーコードジャパンでは、ノーコードに関する最新のニュースの他、ノーコード開発やノーコードツールの使い方に関するコラムを配信していきます。
