年レベルでかなり前の話で恐縮です。普段何を食べたか記録するために写真を撮っているのですが、これを見返すものが欲しくなりました。
スマホならば専用アプリがありますが、写真の内容と容量が気になるところ。
サーバにアップロードする方式とするとそういう情報を第三者のサーバにアップロードするのは気が引けますし、かといってスマホ自身のローカルにデータをため込む方式だとスマホを買い替えるときのデータ引継ぎが面倒そう……という感じで、良い落としどころはないかな、と考えました。
また、今回のニーズとして
- 目的: ダイエット目的ではなく単純な記録なので、カロリー計算等は不要
- 時間帯: 食事の時間帯について、個人的には開発にのめりこんだりすると時間が一般的な時間からずれる場合があるので、自動判別ではなくせめて時間帯の設定が欲しい(かといってすべて手動で登録はしたくない)
というところがあるため、当時できる範囲で自作しました。
時を経て。そろそろそのとき作ったものをきちんと軌道に乗せたくなり、今回リプレースすることにしました。
機能や想定としては、ほぼ当時の仕様通りですが以下のような感じです。
- スケール感:
- 片手間で開発できる環境としてWeb系
- Webである以上サーバが必要ですが、環境はRaspberry Piを使用、イントラネットのみの公開とします(特に凝る必要はないのでLAMPで良いかと)
- 上述から、言語としてはPHP+HTML+css+JS
- 機能:
- 特定ディレクトリ下に年(
YYYY)、月(mm)のディレクトリを作成し、その中に写真がドバっと入っているものとする- 写真のEXIF情報を読み取り、撮影日時から朝・昼・夕晩の3つの時間帯のいずれかに振り分け(これが朝食なのか昼食なのか夕食なのかの振り分け基準となる)
- 上述の年・月のディレクトリ名から該当年月の一覧ページを生成
- 年・月を指定すると、1日から最終日まで日付を見出しとし、その下に朝・昼・夕晩の三食の写真がグリッドで表示される
- 時間帯は上述のように設定のパラメータ(
src/settings.php)で時間帯を調整できるように - 該当時間帯に複数写真がマッチする場合は最初の1枚目をサムネイルとし、右上に枚数表示、Lightbox2で同じ時間帯の次・前の写真への切替ができるようにする
今回ははこれにオマケ程度ですが、以下の要素を加えました。
- PHPは一応なけなし程度にSlim Frameworkを使用
- 当時フロント周りはBootstrap3を使用していましたが、これをBootstrap4に変更
- Vue.jsとかでできるとかっこ良かったのですが、PHPでEXIFを読み取ってテンプレートに渡す必要があるのでやや面倒に感じて見送りました
altとLightboxのdata-titleにEXIF情報の「タイトル」と撮影日時を入れて、いつの写真なのか分かりやすくする- 日付・曜日表示で土曜日:青、日曜日:赤のところに祝日も赤く表示するように機能を追加
出来上がったものは以下のリポジトリに置いてあります。
ディレクトリ構造は以下のイメージ。
ROOT/
├ bin/ //Ususama(フロント)用
├ gulp/ //Ususama(フロント)用
├ logs/
├ public/ //Webアクセス時ルートディレクトリ
│ └ img/ //画像
│ └ storage/ //食事写真ディレクトリ
│ ├ 2018/ //食事写真「年」ディレクトリ(例)
│ │ ├ 11/ //食事写真「月」ディレクトリ(例)
│ │ │ ├ hoge1.jpg //食事写真(例)
│ │ │ └ ...
│ │ └ 12/
│ │ ├ hoge2.jpg
│ │ └ ...
│ └ 2019/
│ ├ 01/
│ │ ├ piyo1.jpg
│ │ └ ...
│ └ 02/
│ ├ piyo2.jpg
│ └ ...
├ src/ //Slimコード
├ templates/ //Slimコード(View部分)
└ viewsrc/ //Scss, JSコード(gulpで public ディレクトリ下にコンパイル・圧縮)
トップの日付(年月)リスト
動作イメージは以下のような感じで。
食事の写真リスト。左から朝・昼・晩で、複数ある場合は写真の右上に枚数が数字で表示。ない場合は「No Images.」表示、3食全てない場合はグリッドが潰れます。
Lightoxで拡大表示
これを機に、たまには食事を見返すのも悪くないかもしれませんね。
参考
EXIF
EXIFのタイトルの文字コード
UCS-2LEで入っている模様。道理で
SJISや
sjis-winで変換できなかったわけだ。
文字列操作
Yasumi
アルム＝バンド