· 

AppSheet 使い方 | タスク管理アプリ(第7回)Googleドライブにファイルをアップロードする

Googleドライブにファイルをアップロードする

 

このブログではタスク管理アプリを通じてAppSheetの使い方を学びます。

 

前回(第6回)はAction を作成、ボタンクリックで「カンバン」と「期日」の値を更新できるようにしました。

今回は、タスクに関連するファイルをGoogleドライブにアップロードしてみます。

第2回で設定したテーブル間のリレーションシップを使用して、アップロードしたファイルの保存先をスプレッドシートに記録します。

1. View の分かりにくい表示を整える

 

第4回で View の設定を行いました。

アプリ内にはAppSheet 特有の分かりにくい表示があり、そこが気になります。

例えば、「Related ドライブs」のような感じです。

 

ここで、まとめて表示を整えましょう。

 

AppSheet特有の分かりにくい表示。

列に表示用 Virtual Column を追加する

 

まずは、列の設定を行います。

左側メニュー「Data」→ タブメニュー「Columns」→「タスク」をクリックして、列設定パネルを開きます。

 

列設定をする。

 

「タスク」テーブルに「作成日」の表示用 Virtual Column を作ります。

列設定パネル、右上の「Add Virtual Column」をクリックして、以下のように設定してください。

  • Column name:「作成日表示用」
  • App formula:TEXT( [作成日], "yy/m/d"  )

同じように「完了日」の表示用  Virtual Column を作ります。

  • Column name:「完了日表示用」
  • App formula:TEXT( [完了日], "yy/m/d"  )

 

次に、「期日表示用」「作成日表示用」「完了日表示用」各 Virtual Column の画面表示を調整します。

このままだと、アプリに「期日表示用」「作成日表示用」「完了日表示用」と表示されてしまいます。

表示内容の調整は Display name で設定します。

 

まずは、「期日表示用」列を設定します。

編集アイコンをクリックして、「期日表示用」列設定パネルを開きます。

Display → Display name の三角フラスコアイコンをクリックします。

 

Display name を設定する。

 

Expression Assistant が開くので、「期日」と入力して「Save」をクリックしてください。

 

Expression Assistant を設定する。

 

これで「期日表示用」列が「期日」と表示されるようになります。

同じ手順で「作成日表示用」の Display name に「作成日」、「完了日表示用」の Display name に「完了日」を設定します。

以下のようになっていれば大丈夫です。

 

「期日」「作成日」「完了日」のDisplay name を設定する。

Related 列の表示を設定する

 

「タスク」テーブルには「Related ドライブs」列と「Related ノートs」列という Virtual Column があります。

こちらも Display name を設定します。右にスクロールしていくと、DISPLAY NAME のフィールドがあります。

 

「Related ドライブs」「Related ノートs」の列を探す。

 

列設定パネルで直接 DISPLAY NAME を設定できます。

DISPLAY NAME のフィールドをクリックします。

 

DISPLAY NAME の設定項目が見つかる。

 

Expression Assistant が開きます。

「Related ドライブs」の DISPLAY NAME には「ドライブ」、「Related ノートs」の DISPLAY NAME には「ノート」と入力、「Save」をクリックします。

 

Expression Assistant に入力する。

 

このようになっていれば問題ありません。

ついでに、DISPLAY NAME の右隣にある DESCRIPTION を消去しましょう。

実は、DESCRIPTION の文章が「タスク_Form」に表示されています。

これを消去することで DISPLAY NAME に置き換わるので、表示がスッキリします。

 

DISPLAY NAME を設定項目した。

 

これで完成です。

 

DISPLAY NAME の設定が完成した。

スライスに表示用 Virtual Column を追加する

 

次に、Slice の設定をします。

タブメニューの「Slice」をクリックして、スライスを表示してください。

まずは「未着手」をクリックしてスライス設定パネルを開きます。

 

スライスを設定する。

 

Slice Columns を設定します。

スライスでは、表示用の Virtual Column を使って「作成日」「期日」「完了日」を表示したいと思います。

 

「作成日」「期日」「完了日」の3つの列について「−(マイナス)」ボタンをクリックしてスライスから外します。

 

Slice Columns を設定する。

 

次に、「作成日表示用」「期日表示用」「完了日表示用」の3つの列を、「タスク説明」と「カンバン」の間にドラッグします。

3つの列が Slice Colimns に見当たらない場合は「+ Add」で追加できます。

 

Slice Columns の日付表示を設定する。

 

他のスライス、「作業中」「完了」「期日まで5日以内」「期日当日」「期日超過」についても同じように Slice Columns を設定してください。

 

View を調整する

 

最後に、Viewを設定します。

左側メニュー「UX」→ タブメニュー「Views」をクリックして、「タスク_Detail」のView設定パネルを開いてください。

 

「タスク_Detail」をパネルを開く。

 

Ref Views にある「タスク_Detail」をクリックして、View 設定パネルを開きます。

タスク_Detail を設定する。

 

 Column order に「Add」で以下のように列を追加してください。

「期日」と「期日表示用」の内容が重複するので、「期日表示用」を表示しないようにします。

 

「タスク_Detail」の Column order を設定する。

 

では、「タスク_Detail」Viewを確認してみましょう。

「ドライブ」「ノート」に表示が変更され、「期日表示用」が非表示になっているでしょうか。

 

「タスク_Detail」を確認する。

 

続けて、「タスク_Form」のView設定パネルを開いてください。

「タスク_Form」の Column order も同じように設定してください。

 

「タスク_Form」の Column order を設定する。

 

「ドライブ」と「ノート」の View も整えましょう。

それぞれ、View Options の Column order を調整します。

 

まずは、「ドライブ_Form」の Column order は以下のようにします。

 

「ドライブ_Form」の View を調整する。

 

右上の「Save」をクリックすると、アラートが表示されて「ID」列が自動的に追加されると思いますが、無視して大丈夫です。

 

次に、「ノート_Form」の Column order を以下のようにします。

同じようにアラートが表示されますが、こちらも無視して大丈夫です。

 

「ノート_Form」の View を調整する。

2. Googleドライブにファイルをアップロードする

 

それでは、ファイルをアップロードしてみましょう。

テーブル間のリレーションシップを利用してファイルをタスクに関連づけることができます。

 

ファイルをアップロードする

 

では、追加済のタスクを1つ選んで、実際にファイルをアップロードしてみましょう。

 

ファイルをアップロードするタスクを選ぶ。

 

右下の「Edit」ボタンをクリックします。

 

「Edit」ボタンをクリックする。

 

画面をスクロールすると「ドライブ」があります。

「New」をクリックします。

 

「ドライブ」の「New」をクリックする。

 

「区分」を選択、「タイトル」を入力します。

「ファイル」のフィールドをクリックして、アップロードするファイルを選択、「Save」をクリックします。

この段階ではまだアップロードされません。

 

ファイルアップロードのForm画面を表示する。

 

Form 画面に戻ります。

「ドライブ」に追加したファイルが表示されています。この時点ではアップロード待ちの状態です。

「Save」をクリックするとアップロードが開始されます。

 

ドライブにアップロード待ちのファイルが追加される。

 

アップロード開始後はこのような画面になります。

「ドライブ (1)」と表示され、ファイルが1つ追加されたことが分かります。

 

スプレッドシートを確認する

 

どのようにファイルがアップロードされたのか、まずはスプレッドシートを確認してみましょう。

 

左側メニュー「Data」→ タブメニュー「Tables」→ 「ドライブ」をクリックしてテーブル設定パネルを開きます。

右上の「View Source」をクリックしてスプレッドシートを開きます。

 

スプレッドシートを開く。

 

「ドライブ」ワークシートをクリックします。

 

さきほどアップロードしたファイルについてレコードが作成されています。

「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ドライブ」のリレーションシップが設定されます。

 

「ファイル」列の「ドライブ_Images/55c75e6e.ファイル.024457.png」が、ファイルが保存されている場所です。

 

スプレッドシート「ドライブ」のレコードを確認する。

保存場所を確認する

 

実際のファイルの保存場所を確認してみましょう。

Googleドライブで、「マイタスク」スプレッドシートを保存しているフォルダを開きます。

 

「ドライブ_Images」というフォルダが作られていると思います。

このように、データソースのスプレッドシート「マイタスク」と同じ階層に保存先フォルダが作られます。

「ドライブ_Images」をクリックして開いてみましょう。

 

ファイルの保存先を確認する。

 

スプレッドシートに書き込まれていたファイル名(55c75e6e.ファイル.024457.png)でファイルが保存されています。

 

アップロードされたファイルを確認する。

3. タスクにノートを追加する

 

最後に、ノートを追加してみましょう。

テーブル間のリレーションシップを利用しているので、一つのタスクに対して複数のノートを関連付けることができます。

 

 

ノートを追加する

 

ファイルアップロードの時と同じようにタスクを1つ選んで、ノートを追加してみましょう。

タスクをクリック →「Edit」ボタンをクリック → 画面スクロールすると「ドライブ」があります。

ノートの「New」をクリックします。

 

ノートを追加する。

 

ノートを追加する Form が開くので、作成日(今日の日付)、ノートを入力します。

ノートタグを追加するには、「+」の入力フィールドをクリックします。

「タグ」のフィールドをクリックする。

 

第2回の列設定でタグの初期値は作成しました。

新しいタグを追加する場合は、「 Add or search」に入力します。

 

Add or search に入力すると「+ Add」でタグを追加できる。

 

追加したタグを選択できるようになります。

「Done」で確定させます。

 

追加したタグを選択する。

 

「Save」でノートを追加します。

この段階ではまだノートは保存されていません。

ノートを追加する。

 

「ノート」に先ほど追加したノートが保存待ち状態になっています。

「Save」をクリックして保存します。

ノートを保存する。

 

ノートの保存に成功すると以下のようになります。

「ノート (1) 」と表示され、ノートが1つ追加されたことが分かります。

 

ノートの保存に成功。

スプレッドシートを確認する

 

どのようにノートが保存されたか、スプレッドシートを確認してみましょう。

 

ファイルアップロードと同じようにスプレッドシートを開き、今度は「ノート」ワークシートをクリックします。

 

さきほど追加したノートのレコードが作成されています。

「タスクID」の文字列は、参照元タスクのレコードの「ID」です。この値によって「タスク」と「ノート」のリレーションシップが設定されます。

 

ノートの保存についてスプレッドシートを確認する。

 

以上、Viewの表示を調整し、Googleドライブにファイルアップロード、タスクにノートを追加しました。

 

これで、タスク管理アプリの作り方は終了です。いかがでしたか?

カンバンボードにスライスを活用する点が AppSheet アプリらしい作り方です。

他に、AppSheet の標準機能であるFormat Rules と Action についても基本的な使い方を学びました。

タスク管理アプリは、AppSheet の使い方を習得するために最適なアプリなので、是非挑戦してみてください。

 

 

アプリを作る前に実際に試してみたい方は、アプリスイートが作ったサンプルアプリを7日間無料体験ができます。

こちらからお問い合わせください。