タスク管理アプリ
Google Sheets APIを使ってタスク管理をするアプリを作ります
このチュートリアルでは、Google Sheets APIを活用して、Googleスプレッドシートをデータベースとして使用するアプリを作成します。このアプリは、データベースアプリに必要な基本的なCRUD機能(作成:Create、読み取り:Read、更新:Update、削除:Delete)を実現しています。また、複数のスマートフォンから同時にアクセスすることが可能で、Googleスプレッドシート上でデータを変更すると、アプリの表示内容にもリアルタイムで反映されます。ソースコードは、ページ末尾のダウンロードセクションから入手できます。
App Inventorにはラジオボタンがありません。このチュートリアルではチェックボックスをラジオボタンのように使う方法も学べます。
このアプリを作成するためには、Googleスプレッドシートへの読み書きを行う準備が必要です。以下の手順を事前に完了してください:
- サービスアカウントの作成
- サービスアカウントを作成し、秘密鍵(JSONファイル)をダウンロードしてください。詳細な手順は、このページに記載されています。
- スプレッドシートIDの取得
- 使用するGoogleスプレッドシートのスプレッドシートIDを取得してください。取得方法については、こちらを参考にしてください。
また、このチュートリアルでは簡略化のため、アプリで管理するタスクの数を最大10個に制限しています。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"TaskManager“と名前を付けます。
Googleスプレッドシートの作成
ここにある手順でGoogleスプレッドシートを作成し、データを入力します。列としては"タスク“、"説明“、"締切“、"担当者“、"進捗“を作りました。担当者が入力できるのでグループでタスク管理に使用できます。クリックするとGoogleスプレッドシートを見れます。シート名は"タスク“です。
Googleスプレッドシートの共有
ここにある手順でサービスアカウントのメールアドレスとそのシートを"編集者"権限で共有します。これでサービスアカウントにデータの読み書き権限が付与されます。
デザイン編集
“Screen1“のタイトルを"タスク管理アプリ"にします。"スクリーンを追加"ボタンをクリックして"edit“という名前のデータ編集用のスクリーンを追加しタイトルを"編集"にします。
“Screen1“
レイアウト パレットから テーブル配置コンポーネント をビューアーに追加し、列を1、行を10に、高さと横幅は"親要素に合わせる"に設定します。
各行にユーザーインターフェース パレットからチェックボックスを並べ名前を上から順に、"タスク1″から"タスク10″にします。
レイアウト パレットから 水平配置コンポーネント をテーブル配置コンポーネントの下に追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。その中にボタンを3個追加し、名前とテキストを左から"編集“、"削除“、"新規追加“にします。
非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを、ユーザーインターフェース パレットから通知機能コンポーネントを2個追加します。スプレッドシート1の認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。
“edit“
レイアウト パレットから テーブル配置コンポーネント をビューアーに追加し、列を3、行を6に、高さと横幅は"親要素に合わせる"に設定します。名前はテーブル配置1になっているはずです。
テーブル配置1の上から1、2、3行の1列にユーザーインターフェース パレットからラベルを並べ、テキストを"タスク"、"説明"、"締切"に変更します。5、6行の1列にユーザーインターフェース パレットからラベルを並べ、テキストを"担当者"、"進捗"に変更します。
テーブル配置1の上から1、2、3、5行の2列にユーザーインターフェース パレットからテキストボックスを並べ、名前を"タスク"、"説明"、"締切"、"担当者"に変更します。
テーブル配置1の上から4行の2列にユーザーインターフェース パレットからデートピッカーを、4行の3列にタイムピッカーを追加します。テキストをそれぞれ"締切日選択"と"締切時間選択"にします。
テーブル配置1の上から5行の2列にユーザーインターフェース パレットからスピナーを追加し、名前を"進捗"に、文字列から要素プロパティーに"未着手,作業中,完了"を入力します。
非可視コンポーネントとしてストレージ パレットから スプレッドシートコンポーネントを、ユーザーインターフェース パレットから通知機能コンポーネントを追加します。
スプレッドシート1の認証情報Jsonプロパティーにはあらかじめダウンロードしておいた秘密鍵をアップロードします。スプレッドシートIDプロパティーにはこれもあらかじめ取っておいたスプレッドシートIDを入力します。