スマホから送った写真が、家族の部屋に届く「自作フォトフレーム」|Cloudflare+ROCK 4C+
家族がスマホで写真を追加すると、リビングや実家のフォトフレームに約1分で映る。そんな仕組みを、Cloudflareと小さなボードPC(ROCK 4C+)、自宅のNASで自作しました。しくみ、画面、工夫したところ、維持費までまとめて紹介します。
家族がスマホで写真を追加すると、リビングや実家に置いたフォトフレームに約1分で映る。 そんなフォトフレームを、ウェブサイトからフレーム本体、NASへのバックアップまで、まるごと自作しました。
市販品もたくさんあるのですが、「家族の誰でもスマホから気軽に写真を送れる」「月額料金をかけずに長く使える」という条件で探すと、意外としっくりくるものがありませんでした。それなら作ってしまおう、というのが始まりです。
ひと目でわかる、このフォトフレーム
| 項目 | 内容 |
|---|---|
| 写真が届くまで | 約1分(フレームが1分ごとに変更を確認) |
| クラウドの月額 | 0円(家族の規模なら無料枠に収まる) |
| 自宅で開けるポート | 0(フレームもNASも家の中から接続) |
| ログイン | 招待制(登録したメールに届く確認コード) |
もともとは自宅のPCで動かしていたサーバー(Flask)を、Cloudflareの上に作り直しました。自宅のポートは開けず、招待した家族だけがログインできます。
使う人ごとに見ると
家族:写真を選んで送るだけ
スマホで「追加」を押して写真を選ぶだけ。iPhoneのHEIC形式もそのまま送れます。アルバムを見たり、自分が送った写真を消したりもできます。
フレーム:電源を入れておくだけ
新しい写真を自動で取り込んで、新着から順に表示します。ネットが切れても手元に保存した写真で表示を続け、夜は画面を消します。
管理する人:スマホから全部設定
どのフレームにどの写真を出すか、切り替え間隔、家族の権限、容量、NASへのバックアップまで、すべて画面から操作できます。
しくみ
ポイントは、人のログインと、機械の接続を分けていることです。
- 家族は、Cloudflare Accessでメールに届く確認コードを入れてログイン
- フレームとNASは、それぞれに発行した専用の鍵で接続
フレームもNASも、家の中から外へ接続しに行くだけなので、ルーターの設定変更やポート開放は必要ありません。
使っているCloudflareのサービスはこの4つです。
| サービス | 役割 |
|---|---|
| Workers | 画面の配信とAPI |
| D1 | 写真の情報や設定を入れるデータベース |
| R2 | 写真ファイルの保管場所 |
| Access | 招待した家族だけのログイン |
写真が届くまで
スマホで写真を選んでから、フレームに映るまでの流れです。
- 写真を選ぶ(スマホ):複数枚まとめて選べます。同じ写真は自動で見分けて、二重には登録しません
- ブラウザで縮小(送る前に):フレーム用・アルバム用・一覧用の3サイズをスマホ側で作るので、サーバーにはほとんど負担がかかりません
- 保存して合図(クラウド):ファイルをR2、情報をD1に保存して、「変更カウンター」を1つ進めます
- フレームが気づく(1分以内):フレームは1分ごとにカウンターだけを確認。変わっていたら、足りない写真だけをダウンロードします
- 新着から表示(すぐ):新しく届いた写真を先に映して、そのあとはいつものスライドショーに戻ります
画面
スマホで片手で使えることを優先しました。写真は、そろった正方形の「タイル」と、送った人と日付が添えられた「アルバム」の2つの見せ方を切り替えられます。


- 写真(タイル・アルバム):週・月ごとにまとめて表示。グループで絞り込めます
- フレームの設定:表示するグループ、切り替え間隔、順番、夜間消灯をフレームごとに設定
- 写真を1枚ずつ選ぶ:このフレームにだけ出したくない写真を外せます


- 管理:ユーザー数、写真の枚数、容量、フレームの状態、最近の操作をひと目で確認
- NAS連携:バックアップの進み具合と、退避を始める容量の設定

パソコンでも同じ画面で使えて、スマホのホーム画面に追加すればアプリのように開けます。
3段階の権限
写真を見る・送るだけの家族と、フレームを整える人、全体を管理する人を分けました。
| できること | 家族 | 編集者 | 管理者 |
|---|---|---|---|
| 写真を見る・追加する | ● | ● | ● |
| 自分の写真を消す | ● | ● | ● |
| ほかの人の写真を整理する | — | ● | ● |
| フレームの表示設定を変える | — | ● | ● |
| フレームの追加、NAS連携 | — | — | ● |
| 権限の変更、ゴミ箱、操作履歴 | — | — | ● |
家族はほかの人の写真を消せないので、うっかり消してしまう心配がありません。最後の管理者は降格できないようにもしてあります。
技術的な工夫
目指したのは、無料枠の中で、家族が何も意識せずに使えることです。
変更カウンターで確認を軽く
フレームは1分ごとに接続しますが、読むのは「変更カウンター」という数字1つだけ。写真の一覧は数字が変わったときだけ取りに行くので、データベースの読み取りをほとんど使いません。
縮小はスマホのブラウザで
長辺1920px(フレーム用)、720px(アルバム用)、480pxの正方形(一覧用)をブラウザで作ってから送ります。サーバーでは画像処理をしません。撮影日は写真の情報(EXIF)から読み取ります。
重複と消しすぎを防ぐ
写真の中身から作る「指紋」(SHA-256)で、同じ写真を見分けます。消した写真は30日間ゴミ箱に残り、同じ写真を送り直すと自動で元に戻ります。
招待した人しか開けない
ログインはCloudflare Accessの確認コード。さらにサーバー側でも毎回その証明書を確かめて、確かめられなければ必ず拒否します。検索エンジンにも載せていません。
機械の鍵は保存しない
フレームとNASの鍵は、発行したときに一度だけ表示して、サーバーには指紋(ハッシュ)しか残しません。なくしたら再発行すれば、古い鍵はすぐに使えなくなります。
フレームは手元で完結
写真は本体に保存し、本体の中の小さなサーバーからスライドショーを表示します。ネットが切れても表示は続きます。縦長の写真は左右を黒にせず、同じ写真をぼかして背景に敷いているので、写真立てらしい見た目になります。
容量とNAS連携
写真ファイルを置くR2の無料枠は10GBです。そこで、自宅のQNAP NASと組み合わせて、無料枠の中で長く使えるようにしました。
- いつも:バックアップ:NASのプログラムが10分ごとに新しい写真を取り込み、年・月のフォルダに保存します。ちゃんと保存できたかは、ファイルの指紋をサーバーが照合して確かめます
- 8GBを超えたら:退避:NASに保存して7日以上たった古い写真から、まず元の画像、次にフレーム用の画像をクラウドから外します。一覧用の小さい画像は残すので、アルバムではいつでも見られます
- 退避したあと:思い出の枠:退避した写真の中から、今と同じ季節の写真を優先してクラウドに戻し、1週間ごとに入れ替えてフレームに映します
8GBを超えるまでは、クラウドからは何も消しません。 一番気に入っているのは、3つ目の「思い出の枠」です。去年の今ごろの写真がふっと流れてくると、「このとき楽しかったね」と家族の会話が生まれます。
NASのプログラムも外からの接続は受けず、読み取り専用のコンテナで、権限も最小にして動かしています。
維持費
家族数人・写真数千枚くらいの規模なら、クラウドの月額は0円。かかるのはドメイン代と、フレームの電気代くらいです。
| サービス | 無料枠 | この使い方での目安 |
|---|---|---|
| Workers | 1日10万リクエスト | フレーム1台で1日約1,500回 |
| D1 | 1日500万行の読み取り | 変更カウンター方式でごくわずか |
| R2 | 月10GBの保存 | 8GBを超えたらNASへ退避 |
| Access | 50人まで | 家族全員で足りる |
これからやりたいこと
動画も流したい
短い動画をNASで軽い形式に変換してから配信して、写真の合間に流せるようにしたいと考えています。
見た目が「普通の写真立て」なフレーム
リビングに置いても違和感のない、普通の写真立てに見えるフレームを作りたいと思っています。Raspberry Pi 5は少し高すぎるので、iPad 3/4の9.7インチ液晶パネル(LP097QX1)をHDMIドライバー基板で使う方法を考えています。
写真が増えても軽い一覧に
数千枚を超えても軽く開けるように、一覧を少しずつ読み込む方式にする予定です。
まとめ
- 家族はスマホで写真を選んで送るだけ。約1分でフレームに届く
- 人はAccessの確認コード、フレームとNASは専用の鍵。自宅のポートは開けない
- フレームは変更カウンターだけを確認して、変わったときだけ差分をダウンロード
- 古い写真はNASへ。8GBまでは何も消さず、同じ季節の「思い出」がときどき戻ってくる
フォトフレームは、置いてしまえば日常の風景に溶け込むものです。でも、そこに家族それぞれが送った写真が流れてくると、毎日がちょっとだけあたたかくなります。 同じようなものを作ってみたい方の参考になればうれしいです。
Cloudflare側の設定手順や、フレームのセットアップ方法は、これから少しずつ記事にしていく予定です。
この記事について
自分の家族で使うために作ったものなので、同じように作るときは、自分の環境で動きを確かめながら進めてみてください。 画面の写真はすべて見本の画像です。ドメイン名やメールアドレス、各種のIDや鍵などは伏せています。Cloudflareの無料枠は2026年10月時点のものなので、最新の情報は公式の料金ページで確認してくださいね。