1. [Make a new app]をクリックして新規アプリを作成します
  1. [Start with an idea]をクリックしてSpec機能を使って作成します
  1. さっそく日記帳アプリの大枠を作っていきましょう
  2. 入力欄に[this app has a collection of Diaries]と入力
  1. 候補一覧から目当てのものをクリックします
  1. 作成された内容をみてみましょう
  1. 日記には名前,説明文,画像,一覧表示があるのがわかりますね
  2. これをそのまま使い、あとから詳細を変更していきます
  1. 日記に日付がないので追加します
  1. 日記を新規追加, 編集, 削除できるようにしましょう

  2. 候補に出ているのでクリックで追加します

  1. 日記の大部分が完成しました

  2. [Graph view]で図でアプリの構造をみてみましょう

  1. 四角い[Diary]から丸い[View]に矢印が伸びていますね

  2. [Diary]タブで日記を表示する構造になっているのが図でわかります

  1. 日記帳はまだ1つしかないので複数の日記帳を作れるようにします

  2. [this app has a collection of Categories]を入力してクリック

  1. 新たに[Category]タブが作成されましたね

  2. カテゴリーの内容を見てみましょう

  1. カテゴリーも日記と同じ内容ですね
  2. これをそのまま使い、あとから詳細を変更していきましょう
  1. 日記の時と同じようにカテゴリの新規追加, 編集, 削除できるようにクリックで機能を追加しましょう
  1. ここでもう一度[Graph view]で構造を図でみてみましょう
  1. 新たに[Category]を表示する[View]が作られたのがわかります
  2. [Category]と[Diary]が繋がってないので今から繋げていきます
  1. [a Category has many Diaries]を入力,クリックして機能を追加
  2. これで[Diary]と[Category]を繋ぎます
  1. エミュレーターでアプリにどんな変化があるか確認してみましょう
  1. 日記作成で[Category]欄が追加されていますね
  2. 選択ボックスになっているのでクリックしてみます

カテゴリー検索

カテゴリー新規作成

カテゴリー  選択

  1. [✐ New]をクリックすると新しい日記帳を追加できます
  2. 一度追加した日記帳は一覧から選択できるようになります
  1. [Graph view]にどんな変化があったのか確認してみましょう
  2. [Category]は複数の[Diary]を持っている構造が図でわかりますね
  1. 今の[Diary]タブは日記の一覧が並べ替えできなくて不便ですね。なのでカテゴリ分けや並べ替えできる新しいタブを追加します
  1. Specが[user can view all Diaries grouped by Category]を提案してくれているので、このグループ分けできる機能を追加します
  1. 右端に新しい[Diary]タブが追加されました
  2. カテゴリーごとに日記が整理されていて見やすくなっていますね
  1. [Save & Refine]ボタンをクリックして内容保存しましょう
  1. アプリの名前はここでは[Diary]としておきます
  1. [Go!]ボタンをクリックして完了です、おつかれさまでした!
  2. アプリがAppSheetに生成されるのでAppSheetで詳細設定します
  1. 少し時間がかかるかもしれませんがじっくり待ちましょう
  1. [Start customizing]をクリックするとAppSheetのアプリケーションエディタ画面に移動します

spec

By wit-m

spec

  • 161