![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_001.png)
- [Make a new app]をクリックして新規アプリを作成します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_002.png)
- [Start with an idea]をクリックしてSpec機能を使って作成します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_003.png)
- さっそく日記帳アプリの大枠を作っていきましょう
- 入力欄に[this app has a collection of Diaries]と入力
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_004.png)
- 候補一覧から目当てのものをクリックします
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_005.png)
- 作成された内容をみてみましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_006.png)
- 日記には名前,説明文,画像,一覧表示があるのがわかりますね
- これをそのまま使い、あとから詳細を変更していきます
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_007.png)
- 日記に日付がないので追加します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_008.png)
-
日記を新規追加, 編集, 削除できるようにしましょう
-
候補に出ているのでクリックで追加します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_009.png)
-
日記の大部分が完成しました
-
[Graph view]で図でアプリの構造をみてみましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_010.png)
-
四角い[Diary]から丸い[View]に矢印が伸びていますね
-
[Diary]タブで日記を表示する構造になっているのが図でわかります
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_011.png)
-
日記帳はまだ1つしかないので複数の日記帳を作れるようにします
-
[this app has a collection of Categories]を入力してクリック
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_012.png)
-
新たに[Category]タブが作成されましたね
-
カテゴリーの内容を見てみましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_013.png)
- カテゴリーも日記と同じ内容ですね
- これをそのまま使い、あとから詳細を変更していきましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_014.png)
- 日記の時と同じようにカテゴリの新規追加, 編集, 削除できるようにクリックで機能を追加しましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_018.png)
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_015.png)
- ここでもう一度[Graph view]で構造を図でみてみましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_016.png)
- 新たに[Category]を表示する[View]が作られたのがわかります
- [Category]と[Diary]が繋がってないので今から繋げていきます
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_019.png)
- [a Category has many Diaries]を入力,クリックして機能を追加
- これで[Diary]と[Category]を繋ぎます
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_017.png)
- エミュレーターでアプリにどんな変化があるか確認してみましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_020.png)
- 日記作成で[Category]欄が追加されていますね
- 選択ボックスになっているのでクリックしてみます
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_021.png)
カテゴリー検索
カテゴリー新規作成
カテゴリー 選択
- [✐ New]をクリックすると新しい日記帳を追加できます
- 一度追加した日記帳は一覧から選択できるようになります
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_022.png)
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_023.png)
- [Graph view]にどんな変化があったのか確認してみましょう
- [Category]は複数の[Diary]を持っている構造が図でわかりますね
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_024.png)
- 今の[Diary]タブは日記の一覧が並べ替えできなくて不便ですね。なのでカテゴリ分けや並べ替えできる新しいタブを追加します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_025.png)
- Specが[user can view all Diaries grouped by Category]を提案してくれているので、このグループ分けできる機能を追加します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_026.png)
- 右端に新しい[Diary]タブが追加されました
- カテゴリーごとに日記が整理されていて見やすくなっていますね
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_027.png)
- [Save & Refine]ボタンをクリックして内容保存しましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_028.png)
- アプリの名前はここでは[Diary]としておきます
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_029.png)
- [Go!]ボタンをクリックして完了です、おつかれさまでした!
- アプリがAppSheetに生成されるのでAppSheetで詳細設定します
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_030.png)
- 少し時間がかかるかもしれませんがじっくり待ちましょう
![](https://s3.amazonaws.com/media-p.slid.es/imports/1959370/u0bztrgq/u0bztrgq_031.png)
- [Start customizing]をクリックするとAppSheetのアプリケーションエディタ画面に移動します
spec
By wit-m
spec
- 164