00:06
神経質やせ男です。今回で、料理レシピデータベースアプリのWebOlogシリーズは、最終回です。
最後に紹介するのは、料理写真を選択ボタンの処理。 ここで登場するのが、Pythonのライブラリ、shutilです。
このshutil、実はとてもシンプルで便利。 何をしているかというと、画像ファイルへの別のフォルダへコピーする、という処理です。
まず、JavaScript側では、料理写真を選択ボタンを押すと、Python側の処理を呼び出します。そして、Pythonから返ってくる画像データを受け取り、プレビュー画面に表示します。
ここでポイントなのが、画像データの扱い方。 JavaScriptでは、画像そのものではなく、Base64という文字データをとして受け取ります。
そのデータをそのまま、imgタグに入れることで、選択した料理写真が画面に表示される仕組みです。
では次に、Python側の処理です。 最初に行うのは、ファイル選択ダイアログの表示。 ユーザーが料理写真を選べるようにします。
ここからが今回のポイント。 まず、画像を保存するためのフォルダを用意します。
例えば、イメージフォルダ。 もしこのフォルダが存在しなければ、Pythonが自動的に作成するようになっています。
そして次の処理で、画像ファイルを保存フォルダへコピー。 ここで使うのが今回の主役、シューティルコピーです。
この1行で選択した画像をイメージズフォルダにコピーする、という処理が簡単にかけてしまいます。
ファイル操作をする場合、手動で読み書きする方法もありますが、シューティルを使うとかなりコードがシンプルになります。
そして最後にもう一つの処理。 画像ファイルを読み込み、Base64に変換。
これによって、JavaScript側へ、画像の保存パスとプレビュー用の画像データ、この2つを同時に渡すことができます。
これで画像の保存、画像プレビュー表示、この両方が実現できるわけです。
ということで、料理レシピデータベースアプリの基本的な仕組みはこれで一通り完成しました。
個人的な感想としては、以前作ったタイマーアプリよりも今回の方が処理がシンプルで理解しやすいと感じました。
タイマーは時間計算や単位計算など、単位変換など意外とロジックが複雑なんですよね。
一方で今回のレシピデータベースは、仕組みを応用すれば料理以外にもいろいろな分野に展開できそうです。
例えば、読書記録、コレクション管理、メモ、データベースなどなど。
こうした部品として使えるのも個人開発の面白いところですね。
ここまでこのシリーズを読んでくださった方、ありがとうございました。
もし感想やアイデアがあれば、ぜひコメントで教えていただけると嬉しいです。
03:03
次回はエラー解決、スピードを上げる学習法についてお話しする予定です。
ご静聴ありがとうございました。
