00:06
神経質やせ男です。今回は少し技術寄りのテーマ、Base64という画像処理の仕組みについてお話しします。
今作っている料理レシピデータベースアプリ、このアプリで地味に厄介なのが画像データの扱いです。
例えば、登録済みレシピを見る画面では、登録した料理の写真を一覧で表示しています。
実はこの裏側では、PythonとJavaScriptがデータの受け渡しをしています。
普通のウェブアプリなら、画像はURLを渡せば済みます。
つまり、この場所の画像を表示してブラウザに表示するだけです。
ところが、今回のようなデスクトップアプリの場合、PythonとJavaScriptの間で画像データそのものを渡すのは少し苦手なんですね。
そこで登場するのがBase64。
これは簡単に言うと、画像データを文字列に変換する方法です。
まず、Python側で画像ファイルを読み込みます。
ここで登場するのがRBモード。
これはバイナリーデータとしてファイルを読み込むという意味です。
つまり、画像を二進数データとして読み込みます。
その後、Base64を使って文字列データに変換。
さらに、data.png.base64というヘッダーを付けてJavaScriptに渡します。
すると、JavaScript側ではその文字列をそのまま画像として表示できるわけです。
なかなか面白い仕組みですよね。
JavaScript側では、受け取ったレシピデータをreserveで並び替えて、新しく登録したレシピが上に表示されるようにしています。
さらに、参考演算子を使って画像があるかどうかもチェック。
もし画像がなければ、NO PHOTOと書かれた失格いプレスホルダーを表示する仕組みです。
さらにもう一つ細かいポイントがあります。材料や手順の表示です。
これらは長い文章になるので、改行が必要。
でもHTMLは普通の改行をそのまま表示してくれません。
そこで正規表現で改行コードBRに変換。
これでちゃんと改行付きで表示されるようになります。
そしてBASE64にも弱点があります。
それはデータ量が大きくなる。
画像データを文字列に変換するので、どうしてもサイズが膨らみます。
その結果、画像が多くなると処理が遅くなる可能性も出てきます。
便利だけど万能ではない。そんな技術ですね。
今回はBASE64による画像処理の仕組みについてざっくり整理してみました。
次回はこの処理をもう少し整理した後、
借り直した本を元にFlaskの学習に戻る予定です。
次回は料理、写真、保存に便利、シューティルの使い方についてお話しする予定です。
03:00
ご静聴ありがとうございました。
