ある日、なんとなく「ちくわで作る簡単レシピ」を調べていたら、Google先生が毎日のようにちくわレシピを教えてくれるようになりました。
こんにちは！ 松田軽太です。
毎日教えてくれるのでレシピが溜まってきたので、だんだん探すのも大変になってきたので管理アプリを作ることにしました。
実際に作った画面はこんな感じです。
今回、アプリ作成で使用するツールはClaris FileMaker Proです。
いわゆるローコード開発ツールで、これくらいのアプリならチョチョイのチョイで作れます。
ということで、今回は「レシピ管理アプリの作り方」を紹介してみようと思います。
Claris FileMaker Proを手に入れる
まず必要なのはClaris FileMaker Proです。
入手する方法は３つあります。
無料評価版をダウンロードする
Claris FileMaker Proのサイトから45日の無料評価版を入手することができます
まず、どんな感じなのかを確かめるには、無料評価版で良いと思います。
Amazonなどでパッケージ版を購入する
興味があるからもうちょっと使ってみたいと思ったら、個人で使うのであればAmazonなどでパッケージ版を購入することができます。
参考価格が69,696円となってますが、そこから15％割引になって58,964 円になります。
とはいっても個人で買うのはちょっとためらう金額ですかね。
クラリスのサイトからシングルライセンスを購入する
定価販売なので、Amazonなどから買った方が少し安くなるようですね。
とりあえず今回は無料評価版をダウンロードして、インストールしてみてください。
アプリを新規作成する
インストールして起動したら新規作成します。
まずアプリの名前を付けて保存します。この辺はExcelなんかと同じ感じですね。
項目（フィールド）を作成する
下記の項目が自動で作られます。ちなみに項目のことをフィールドと呼びます。
今回は使わないので全部削除してしまいます。
きれいサッパリと項目（フィールド）が削除されました。
では「作成」ボタンを押して項目（フィールド）を作っていきます。
見よう見まねで大丈夫です。こんな感じになるように項目（フィールド）を作ってみてください。
よく見ると「料理写真」だけテキストではなくオブジェクトになってますね。
「タイプ」と書いてあるところを押して「オブジェクト」に変更します。
オブジェクトに変更すると画像を保存する項目（フィールド）になります。
「管理ID」もちょっと表示が違いますね？
まずはタイプを数字に変更します。
次にオプションを押して「入力値の自動化」の「シリアル番号」にチェックをいれます。
次の値を R00001 にします。新規にデータ登録すると連番が割り振られます。
「クイック検索」という項（フィールド）もちょっと他と設定が異なります。
オプションを押して「データ格納」タブの「グローバル格納」にチェックをつけます。
これで必要な項目が揃いました。
「OK」を押すと、下のような味も素っ気もない画面が表示されます。
レイアウトを作成する
では画面を作っていきましょう。画面のことをレイアウトと呼びます。
画面を作れるようにするために「表示」から「レイアウトモード」を選択します。
すると画面がこのように切り替わります。この画面を「レイアウトモード」と呼びます。
まず最初に「テーマ」を押します。
テーマとは画面やボタンをイイ感じに整えてくれる設定です。
レイアウトテーマの一覧の中から「ソフィスティケーテッド」を選択します。
薄いブラウンを基調としたイイ感じの色合いになります。
では画面項目を設定していきます。
先に画面の高さを広げておきましょうか。
高さを広げたら横シマの「ポータルツール」を押します。
とりあえず画面いっぱいくらいになるように枠を描きます。
ポータル設定画面が表示されます。
最初はレコードの表示が「不明」になっているので、「現在のテーブル」を選択します。
「代替の行状態を使用」にチェックを入れて「OK」します。
するとこういう画面が表示されるので、「メニュー名」を隣の窓にセットします。
するとこんな感じのシマシマのエリアになります。このエリアのことをポータルと呼びます。
次に「タブコントロール」を設定します。
ポータルの隣のエリアいっぱいに枠を描きます。
タブ名に「情報」と入れて作成します。
次に「サイト」と入力して作成します。
情報とサイトができていたら「OK」を押します。
すると「情報」と「サイト」が並んでいますね。
ではここで一旦、画面の状態を見てみましょう
「表示」からブラウズモードを選択します。
なんとなくソレっぽい画面になっていますね。
では再びレイアウトモードに切り替えて、画面に項目を増やします。
左にある「メニュー名」を先ほどの画面までひっぱって置きます。
すると項目が画面に配置されます。
見やすくするために見出しのメニュー名に色を付けます。右クリックして「塗りつぶし」の色を設定します。
見出しの色を茶色にしたので、文字が黒いと見えにくいですね。
文字の色を白くします。
色の設定は右側にある袖にある「絵具のパレット」みたいなタブを選びます。
すると真ん中くらいにある「テキスト」で白を設定します。
他の項目も同じようにパワポっぽい要領で配置していきます。
サイトのタブの設定をしてみましょう
Webビューアというボタンを押します。
サイトタブの画面いっぱいに広げます。
このような設定画面が表示されます。
画面で見るとややこしそうに見えますが、実際にやってしまえば難しくはないんですけどね。
まず「カスタムWebアドレス」を選択します。
次に「指定」ボタンを押して、掲載サイトという項目を配置します。
ではなんとなく画面ができたので、そんな感じになるかテストで登録してみましょう。
先ほどのようにブラウズモードに切り替えます。
では画面にデータ入力してみましょう。
まずはデータ入力するレシピをググります。
たとえばこちらのレシピとか。
こんな感じで各項目を埋めていきます。
先ほど「サイト」タブにWebビューアを設定したので、「サイト」タブを見てましょう。
「掲載サイト」という項目に設定したURLのサイトが表示されます。
あとはイイ感じに画面を整えていくと、オシャレっぽいアプリになります。
画像ばかり貼り付けたので、疲れました。
ということで今回はここまでにします。
市販の書籍で手に入りやすいのはこの本でしょうね。
公式サイトでも初心者向けの情報を公開しています。
無料でPDFの電子書籍が読めます。
もうちょっといろいろ学習したい場合は初級編、中級編をやってみると良いでしょう。
ページ数も700ページくらいあって、がっつり系ですが。
ちなみにPDF版なら無料で読めます！
動画が良いかなと思ったならば「FileMaker の自習室」で学習動画が無料で公開されています。
ローコード開発ツールの良いところはサクサクっと作って、とりあえず動かしてみることが出来る点です。
まずは思いついたアイデアのアプリを楽しみながら作ると良いと思います。
だって楽しくないと続かないし苦痛でしかないですから。
とはいえ慣れてくると陥るシステム内製化の苦労について書いた記事もあるので興味があったら読んでみてください。