-
世の一人暮らしの民 コロナ禍で内食需要↑ 、健康志向も高まり、自炊するぞー になった話
-
限界男子大学生ワイ 自炊が続かない…
-
既存の料理本や料理レシピサイトはわかりにくい！
-
既存のレシピ投稿サイトや料理本では明確にされていなかった手続きをより明確にしたい
-
調理工程のどの時点で何の作業をすべきかを視覚的に分かりやすく表現したい
調理工程をフローチャートとして表現することで"解釈のギャップを生まないレシピ"を作成できる 「材料A」「材料B」ではなく、矢印で作業の流れが一目瞭然です
WEBアプリ上のグラフィカルエディタで、直感的にフローチャート形式のレシピを編集できる
最近githubにも導入された、マークダウン形式で図を表現できる「mermaid」に準拠。 作成したレシピはシンプルなテキストファイルにエクスポート可能で、git管理できる
簡単な料理から手の込んだ料理まで、幅広い難易度に挑戦する手助けになる
- レシピの一部の工程をコピーできるようにすることで、自分でレシピを投稿する・自己アレンジレシピを公開するハードルを下げる
- 分かりにくい調理工程をハイパーリンクしてさらに詳しいフローを確認できる
- 登録した工程を下処理・加熱など大まかにグルーピングすることで、コピーする手間を省ける
- 工程同士の繋ぎ方を、より直感的で簡単なものにする
- バックエンドとフロントエンドを接続する(時間切れ)
- 設計段階で、mermaid記法のフローチャートを手入力してレシピを書いてみることで、大変書きにくいという知見を得た
- 上記を踏まえ、GUI上でフローチャートを編集できるグラフエディタの作成に注力することに決めた
- 現時点で600行のtypescriptからなる構文解析エンジンを実装し、GUI上でフローチャートを編集できる機能を追加した
- あくまで編集結果はmermaid記法準拠のplaintextなので、作成したレシピはgitで管理しgithubで公開できる。
- Typescript
- HTML・CSS
- Firebase
- SQLite
- Svelte
- Mermaid.js
- FastAPI
独自のMermaid記法の構文解析エンジン https://github.com/jphacks/A_2208/blob/master/src/frontend/src/GraphHandler.ts
Mermaid記法のフローチャート構文のある程度の解釈に対応しており、グラフ操作APIをUI側に提供している。 シンプルな記法ゆえ、構文定義としては甘く、構文解析ロジックの作成がかなり困難であった。
これをなんとか乗り越えたことで、独自記法ではなく、既存のエコシステムとの親和性が高い記法でグラフを扱うことと GUI上での直感的なレシピ作成を可能にすることを両立した。
ここではカレーを作った後に福神漬けを添えてみます!
1.【料理工程の追加】セクションのテキストボックスに「福神漬けを添える」を入力してREGISTERボタンを押下します。
-
画面上部の【フローチャートの作成】の部分に1で登録したノードが追加されているのを確認します。
-
セクション下部のADDボタンを押下した後に「再度火をつけて5分煮込む」をクリック、続いて「福神漬けを添える」をクリックするとエッジが繋がります。
-
このレシピをmarkdownファイルとして出力するために、画面最下部のレシピを保存するボタンを押下すると、markdownファイルがダウンロードできます。
-
ダウンロードされたmarkdownファイルはただのテキストとして保存されるので、これをフローチャートとして保存するために、flowchart TBテキストの上部に「```mermaid」を追加します。加えて、mermaid記法の終了を示すために末尾に「```」を追加して、テキスト全体を囲んでください。
-
自分のアレンジをアピールするために、適宜文章を書き加えて保存します。
-
Githubに公開するために「git add」、「git commit」、「git push」 を行います。
8. レシピが公開されたことを確認すれば完了です！
- 実際に公開したレシピのリンク https://github.com/jphacks/A_2208/blob/master/my_curry.md