Glideの使い方② アプリ開発の基本操作を解説【後編】

Glideアプリ開発の基本NoCode

こんにちは!
てつごろう(@Te256g)です。

この記事は「Glideの使い方」と題して、Glideでアプリ開発の基本操作を前編・後編に分けて解説しています。

前編はアプリの新規作成からデータの登録、ホーム画面の作成の手順を解説しました。

今回は後編として、アプリの一覧画面と詳細画面の作り込みを行っていきます。

Glideでアプリを開発する時の一連の流れを解説していますので、この記事を参考に、ご自分でも実際に試していただけると理解が深まると思います。

てつごろう
てつごろう

基本操作の解説記事は今回で完結なんだよ!
全※が泣いた感動ストーリーなんだよ。
知らんけど。


 筆者について

大学時代に情報システム系学科でC、Java、VC++を学ぶ。IT企業ではハードウェアエンジニアとしてWindows/UNIX系システムの保守・運用を担当。現在は個人でWebサイト制作を請け負っています。NoCodeの可能性に惹かれ、Webサービス開発に向けて勉強中。

てつごろう|@Te256g


スポンサーリンク

Glideの使い方|アプリ開発の流れ

前編からお伝えしている、Glideでのアプリ開発の流れをおさらいしますね。

前編では以下の1〜4までの手順を解説しました。

前編はこちら≫ Glideの使い方② アプリ開発の基本操作を解説【前編】

今回は後編として5〜8までを解説していきます。

Glideでのアプリ開発の流れ
  1. Googleスプレッドシートでデータを準備する
  2. アプリを新規作成する
  3. ベースのデザインを変更する
  4. ホーム画面を作る
  5. 一覧画面を作る
  6. 詳細画面を作る
  7. データベースを編集する
  8. 動作確認・シェアする

5. 一覧画面を作る

まずは一覧画面を作っていきましょう。

作るといってもほぼ完成していますので、見た目を整えていくだけです。

詳細画面を作る流れ

5-1. コンポーネントのスタイルを変更する
5-2. コンポーネントのプロパティーを変更する

5-1. コンポーネントのスタイルを変更する

アプリの開発画面で「一覧」アイコンをクリックして、一覧画面を表示します。

前編の通りに開発を進めてきた場合、一覧画面はおそらくこのように、お店の詳細情報が表示されていると思います。

一覧画面の初期状態
一覧画面の初期状態

一覧画面にするには、STYLEの中からListやCompactなどに変更する必要があります。

例えばCardsに変更すると、このようにカード型のリスト形式に変わります。

STYLEをCardsに変更した場合
STYLEをCardsに変更した場合

STYLEには他に様々な形式があるので、いろいろと試してみてくださいね。

【要注意】STYLEをDetailsに変えると設定がリセットされる!

一覧形式(Details以外)で色々と設定した後、Detailsに変更してしまうと、元の一覧形式に戻しても最初の設定がリセットされてしまうという問題があります。

例えば下図①のようにCardsの状態でフィルターや追加ボタン、カテゴリー表示など色々と設定したとします。
その後、STYLEを一度Detailsに変更してしまうと、再度Cardsに戻しても、最初に設定したものがキレイにリセットされてしまいます!
筆者の確認では、この現象はDetailsに変更した時に発生するようです。
Detailsの仕様上、仕方のないことかもしれませんが、お気をつけください。

Cardsで設定変更した状態

Cardsの状態で色々設定した状態
Cardsの状態で色々設定した状態

Detailsに変更後、再度Cardsに戻すと…

Cardsの時の設定がリセットされる!
Cardsの時の設定がリセットされる!
てつごろう
てつごろう

誤って変更しないように注意が必要なんだよ。

5-2. コンポーネントのプロパティーを変更する

コンポーネントのプロパティーを変更して、一覧の見た目を整えていきましょう。

以下のように8つの設定をしていきます。

※ここで紹介するのはCardsの例です。他のスタイルでは設定項目が異なるため、ご了承ください。

一覧の設定
一覧の設定
一覧画面の設定

①画像の形を変更

②文字の大きさを変更

③Favoriteアイコンを表示

④タグを表示

⑤一言コメントを表示

⑥グループで分類

⑦フィルターボタンを表示

⑧新規追加ボタンを表示

てつごろう
てつごろう

ひとつずつ解説していくんだよ。

①画像の形を変更

DESIGNのImage shapeで、画像の縦横比を変更できます。

ここでは3:2の比率にしていますが、正方形(Square)や縦長(Vertical)など6種類の形状があります。

他にもSizeでは2列表示にできたり、Card styleではカードの枠の表示・非表示など様々なパターンがあるので、好みに合わせて変更してみてください。

写真の形を変更
画像の形を変更

②文字の大きさを変更

TEXT STYLEのText Sizeでは文字の大きさを変更できます。

Lines of textは表示する行数の変更ができます。

さらにAll-Caps titlesは、Titleをすべて大文字にすることが可能です。
※日本語の場合は関係ありませんが、文字が小さくなったりします。

テキストのスタイルを変更
テキストのスタイルを変更

③Favoriteアイコンを表示

OVERLAYSのButtonで「Favorite」を選択すると、お気に入り登録ができるようになります。

画像の右上にハートマークが表示され、タップしてハートマークをONにすると、画面上部の「お気に入り」に自動的に追加されます。

お気に入りに登録
お気に入りに登録

④タグを表示

OVERLAYSのTagに設定すると、画像の左上にタグを表示することができます。

ここではレストランのカテゴリーがタグとして表示されます。

タグを表示
タグを表示

⑤一言コメントを表示

OVERLAYSのAvatar textでは、カードの左下にテキストを表示できます。

ここでは一言コメントを表示しています。

一言コメントと表示
一言コメントと表示

⑥グループで分類

FEATURESタブに切り替えて、GROUPのGroup byを設定すると、指定した項目で分類表示することができます。

例えばカテゴリーを指定すると、レストランのカテゴリー毎に自動的に分けてくれます。

グループで分類
グループで分類

⑦フィルターボタンを表示

同じくFEATURESタブにあるIN-APP FILTERのFilter byでは、指定した項目でフィルタリングする機能が表示されます。

例えばカテゴリーを設定すると、レストランの種類でお店を絞ることが可能です。

フィルターボタンを表示
フィルターボタンを表示

⑧新規追加ボタンを表示

ユーザーが自分で新しい情報を登録できるように、新規追加ボタンを表示することができます。

ADDタブに切り替えて「Allow users to add items」にチェックを入れると、下図のように「新しい項目」という画面が表示されます。

新規追加ボタン
新規追加ボタン

ユーザーが登録できる項目を変更していきましょう。

初期状態では、下図のように「写真」のタイプが「Text Entry」になっていると思います。

ユーザーが写真をアップロードできるようにするためには、一度この項目を削除して、新たにプロパティーを追加する必要があります。

「写真」プロパティーの右にある「×」ボタンでプロパティーを削除したら、右上の「+」ボタンでプロパティーを追加しましょう。

項目を変更
項目を変更

プロパティーの「+」ボタンをクリックしたら「Image Picker」をクリックしましょう。

画像のアップロード機能が追加されます。

Image Pickerを追加
Image Pickerを追加

6. 詳細画面を作る

最後は詳細画面の作り方です。

こちらもベースは完成しているので、見た目を整えていきましょう。

作業の流れ

6-1. コンポーネントを追加する
6-2. 詳細の編集画面を変更する

変更前後のイメージはこちらです。

詳細画面の変更後のイメージ
詳細画面の変更後のイメージ

6-1. コンポーネントを追加する

まず「写真」がテキスト形式で表示されてしまっているので、一旦「×」ボタンで削除しましょう。

写真がテキストで表示されているので削除
写真がテキストで表示されているので削除

続いてコンポーネントの「+」ボタンをクリックしてImageを追加します。

お店の写真が表示されればOKです。

Imageを追加
Imageを追加

その他、ここではコンポーネントは以下の通り設定しています。

コンポーネントの例
  • Title:ページのヘッダーに表示されるタイトルを変更できます。ここでは直接入力しています。
  • Rating:お店のランクを自分で付けたい時はRatingコンポーネントが最適です。(注1)
  • URL:リンクの表示方法を切り替えています。切り替え方法は後述します。(注2)

他にもComponentsの「+」ボタンから、好きなコンポーネントを配置してみてください。

コンポーネントの設定
コンポーネントの設定

(注1)Ratingを設置する前にデータベースの準備が必要です

Ratingを追加する時、事前にデータベースで値を保存するためのカラムを追加する必要があります。

Dataタブ(①)からAdd Columnをクリック(②)してカラムを追加し、Labelに入力(③)します。

Column Type(④)はText(Number、Emojiでも大丈夫なようです)を選択しましょう。

スコア用のカラムを作る
スコア用のカラムを作る

続いてRatingコンポーネントを選択し、LAYOUTで以下のように設定しましょう。

  • Title:タイトルを設定します。「スコア(例)」など。
  • Column:データベースに登録したカラムを指定します。
  • Unit:デフォルトはStars。他にHeartや$マークなどあります。
  • Max Rating:スコアの最大値を設定できます。
Ratingの設定
Ratingの設定

(注2)URLの表示方法を変える

URLの部分に、店名などURL以外の値が表示されている場合があります。

表示は、DESIGNのLabelから変更することができます。

ここではFull URLとしています。

6-2. 詳細の編集画面を変更する

続いて編集画面を調整していきましょう。

EDITタブをクリックしてください。

「Allow users to edit」にチェックを入れると、詳細画面をユーザーが編集できるようになります。

編集画面を以下のように調整していきます。

詳細編集画面
詳細編集画面
  • 項目削除ボタン:「Allow users to delete」にチェックを入れると、ユーザーが項目を削除するためのボタンが表示されます。
  • 写真アップロード:Image Pickerコンポーネントを追加すると、写真の追加・削除ができるようになります。

これで一通りの作業は完了です!

てつごろう
てつごろう

お疲れさまでした!

7. データベースを編集する

データベースの編集をするには2つの方法があります。

見出し

7-1. Googleスプレッドシートから編集する
7-2. アプリの開発画面から編集する

もちろんアプリ上でユーザーとしてデータの編集ができますが、ここでは割愛します。

※アプリの開発画面では日本語入力に不具合が生じているため、Googleスプレッドシートからの編集をおすすめします。

7-1. Googleスプレッドシートから編集する

Googleスプレッドシートで作成したファイルを開いて、直接データを編集する方法です。

Googleスプレッドシートで編集
Googleスプレッドシートで編集

編集後、保存をしたら、アプリのDataタブからデータベースを開いて「Reload sheet」ボタンをクリックしてみましょう。

このように、スプレッドシートでの変更内容が、開発画面のDataにも反映されます。

スプレッドシートの変更内容が反映される
スプレッドシートの変更内容が反映される

7-2. アプリの開発画面から編集する

アプリの開発画面から編集することも可能です。

Dataタブから編集しましょう。

アルファベットや数字での入力や画像のアップロードなどは問題ありませんが、このように、日本語を直接入力するとおかしくなってしまうので、編集作業はGoogleスプレッドシートか、アプリ上で行うことをおすすめします。

アプリ開発画面のDataでも編集可能
アプリ開発画面のDataでも編集可能

8. 動作確認・シェアする

動作確認をして問題なければシェアをしてみましょう。

画面左下にある「Play Mode」ボタンで切り替えると、動作確認をすることができます。

予想している通りに動作するか、表示がおかしくないかなどを確認しましょう。

動作確認とシェア
動作確認とシェア

問題なければSHAREボタンでシェアしてみましょう。

SHAREボタンをクリックするとこの画面が表示されるので「Publish app」をクリックすればアプリが公開されます。

公開
公開

するとこのように、QRコードやリンクが表示されます。

SEND TO PHONEに携帯番号を入力すれば、ショートメッセージでリンクを送信することもできます。

ご自分のスマホでアクセスして確認してみましょう!

アプリのQRコード、リンク
アプリのQRコード、リンク
てつごろう
てつごろう

スマホで実際にデータの登録なども試してみよう!

電話番号について

SEND TO PHONEに電話番号を入力する場合は、国際電話番号での入力が必要です。
日本の電話番号の場合、先頭の「0」の代わりに日本の国コード(+81)を先頭に付けます。
例えば「090-1234-5678」の場合は「+8190-1234-5678」と入力しましょう。

まとめ

Glideでアプリを開発する時の基本的な操作方法を解説してきました。

前編・後編に分けてご紹介してきましたが、スプレッドシートを活用するだけで効率的にアプリが完成するスピード感を感じていただけたのではないでしょうか?

使い方を覚えるには実際に触るのが一番です。

この記事を参考に、ぜひご自身でもアプリ開発に挑戦してみてくださいね。

アプリ開発に必須のUI/UXデザインを学ぶ
アプリ開発には、ユーザビリティへの理解が重要です。iPhone・Androidアプリのデザインを学ぶなら、自宅で学べるオンラインスクール【TechAcademy】 UI/UXデザインコースがおすすめ。実務に近い環境で、学びながら手を動かして制作。社会に通用するスキルを習得できます。
NoCode
てつごろうをフォローする
てつごろぐ

コメント

タイトルとURLをコピーしました