概要
HoneyCodeでアプリを作るための練習としてサンプルを使用せずに、簡単なアプリを作成してみようと思います。
タスク管理アプリを作ってみようと思います。
今回の記事では、タスク管理アプリでタスクを表示する部分まで作成します。
タスクの追加及び削除は、別の記事で行います。
今回の完成品は、以下です。
Workbookの作成
まず、新規でWorkbookを作成する場合は、画面右上のCreate workbookをクリックしてください。
すると、
以下のようなポップアップが出てきます。
今回は一から作るので、Start from scratchをクリックしてください。
すると以下のようなスプレッドシートが出てきます。
これでWorkbookの作成部分は完了です。
Workbook名を変える
デフォルトWorkbook名は、Unititledとなっています。これだとわかりにくいので、Workbook名を変えたいと思います。
左側のスプレッドシートっぽいマス目がたくさんあるやつをクリックしてください。
するとこんなのが出てきます。
ここの一番上をクリックするとWorkbook名を編集できるので、ここでは、「Task management」という名前にします。
アプリ名には、日本語もいれることができました。
ただ、Enter Keyを押すたびにするたびに入力が完了するあつかいだったので、日本語を使うのは良くないかもしれません。
これでWorkbook名の変更は完了です。
Workbookの編集
Workbookの編集をやっていこうと思います。
基本的にスプレッドシートやエクセルと同様にセル単位で編集することや行単位で編集することができます。
ここでは、タスク管理なので一番上の列に「タスク」、「担当者」、「担当者Filter用」、「期限」を追加します。
各項目の説明および設定方法
今回は、「タスク」の所に何をするのかを記載して、「担当者」の所に誰がするのかを記載し、「期限」の所にmm/dd/yyの形式で記載されたそのタスクを終わらせるまでの年月日を記載することにします。
「担当者」の部分ですが、毎回名前を入力するのは面倒なので、プルダウン形式で選択できるようにします。
また、workbookを共有している全員を選択できるようにContactというフォーマットを使用します。
フォーマットを使用する方法ですが、変更したい列を選択した状態で、「Formats」をクリックします。
クリックすると右側に以下のようなものが出ます。
写真
このFormat column as: の中に「Contact」があるのでそれを選択してください。
選択後「Display Preference」の中から表示したい形式を選択してください。
現在は以下のような表示ができるようですが、今回は名前のみとします。
このFormat column as: の中に「Contact」があるのでそれを選択してください。
選択後「Display Preference」の中から表示したい形式を選択してください。
現在は以下のような表示ができるようですが、今回は名前のみとします。
選択が終わったら、画面右下のApplyをクリックしてください。
すると選択した列が以下のようにプルダウンできるようになっています。
（メールアドレス部分は削除しています。）
現在は、このworkbookを共有していないので一人分しか表示されませんが、workbookを共有すると、以下のように複数人表示することもできます。
（メールアドレス部分は削除しています。）
workbookの共有方法は別のQiita記事として記載しておきましたので、そちらを参照してください。
HoneyCodeでworkbookを共有する方法
担当者Filter用が必要な理由
アプリで表示する時に自分の担当分のタスクのみみたいな感じでフィルターをかけたい場面があると思います。
これを実現したかったのですが、フォーマットがContactの場合、何故かうまくいかなかった（Errorと表示されます）からです。
なので担当者Filter用で名前のみを設定します。
設定方法は、以下のようにすれば名前だけを持ってくることができます。
=[担当者][First Name]
Contactは、First Name以外にもメールアドレスを取得する場合は、[First Name] の部分を[Email]に変えるとでき、[Phone Number]に変えると登録している電話番号になります。[Phone Number]は登録していない場合だと、0になります。[Last Name]にするとLast Name部分だけになります。
今回は、登録に失敗していたので、全部First Nameあつかいになっています。
登録する時に、名字と名前の間に半角スペースを入れると、その前後でFirst NameとLast Name判断してくれるみたいです。
今回は、フォーマットのCOLUMN FORMULAの部分に=[担当者][First Name]を入れます。
同様に、期限の部分もmm/dd/yyの形式になるように、フォーマットの設定を行います。
今回は以下のように設定しました。
以上でworkbookの準備は完了です。
アプリ画面の作成
workbookの作成だけだとアプリに表示できないので、アプリの画面を作成していきます。
今回は、スプレッドシートの中身を表示するアプリにするため、表示する場所のみを作成します。
画面の作成をする時は、マス目がたくさんあるマークの下にある菱形がたくさん繋がっているマーク（Builder）の部分をクリックしてください。
するとこんな画面が出てきますので、プラスマークを押して今回は、Build your ownをクリックしてください。
ちなみにUse app wizardを使うと簡単に追加及び削除まで入ったアプリを作成することができます。
ただ、今回は、勉強のために表示部分のみを作成するのでBuild your ownを使います。
特に不要な方はUse app wizardを使用してください。
Build your own をクリックすると以下のような画面が出てきます。
真ん中にあるのは、アプリでどのように表示するかの画面になります。
左側の「Screens」の下にあるのは、このアプリはどのくらいの画面があるのかを示します。
「Screens」の右にあるプラスは、アプリの画面を増やすことができます。
その上にあるMobaileとWebに関しては、それぞれの環境でどのように表示されるのかを見ることができます。
画面左下にあるAdd objectsは、画面にどんな項目を置くかを決めることができます。
以下のようなものが選べます。
一番したのTable1は、データを取得したいスプレッドシートを示します。
今回は、Table1のスプレッドシートの中身を置くので、「DATA & DISPLAY」の項目内の「Column List」を選択します。
選択すると以下のように表示されます。
「Allow users to filter list」は、項目毎にフィルター機能をつけることができます。
例えば、担当者でフィルターをかけることができます。
ただし、contactの項目はフィルターかけれないみたいです。
なので「担当者Filter用」を使用してフィルターをかけたいと思います。
「Add a detail screen」は、その行の詳細な内容を表示するというものです。
ホームの画面では表示していない内容をこの画面で表示することができます。
こんな感じで表示されます。
記事の最初でも置きましたが、これを実際にアプリとして動かすとこのようになります。
今回は、以上になります。
次回予告
タスク管理するのに毎回HoneyCodeのWorkBookをいじるのは面倒なのでここをアプリでできるようにしたいと思います。
感想
簡単なアプリでしたが、普通のスプレッドシートやExcelにはない「Contact」という項目が、便利だと思いました。
また、簡単なことでも触ったことないものだと結構時間がかかると思いました。
最後に
何か間違っているところがあれば、ご指摘いただけると嬉しいです！