【第3話】息子のための「小さな美術館」、ついに開館。画像が表示されない「最後の壁」を乗り越えて

「準備中…」という看板を掲げたまま、一向に作品が飾られない、息子のための美術館。 前回の記事で、そんな悩みを打ち明けた直後、私はPCのモニターと何時間も睨めっこしていました。

「システムは動いているはずなのに、なぜ肝心の美術館に絵が飾れないの？」

※これまでの開発記録はこちらから

前回の記事では、あたたかいコメントをいただきありがとうございました！「とってもおもしろい取り組みですね」というお言葉、本当に励みになりました！皆さんからの応援に背中を押されて、無事にこの第3話を書き上げることができました。

1. 看板は消えたけれど…

まずは、表示を遮っていた「準備中…」という文字を消すことに成功しました。これでようやく展示が始まる……そう確信してアトリエの様子を確認しに行きました。

ところが、そこにはまた別の壁が立ちはだかっていました。文字情報や日付は完璧に表示されるのに、肝心の「折り紙作品」の場所だけが、画像の欠落を示すアイコンがぽつんと表示されるだけの「空っぽの状態」だったのです。

画面には、本来なら作品が映し出されているはずの場所に、画像の欠落を示すアイコンが寂しげに並んでいるだけ。 まるで、息子が一生懸命折った宝物が、美術館の中で透明人間になってしまったような、なんとも言えない寂しさが漂っていました。

2. デバッグという名の「検証作業」

原因を探るため、私はブラウザに備わっている「開発者ツール」を相棒に、一つずつ仮説を検証していく作業に入りました。

原因は、Googleドライブの「共有設定」と「ファイル形式」にありました。ドライブは本来、ファイルを安全に保管する場所であり、Webサイトの画像ソースとして直接参照されることを想定していません。そのため、通常のURLではGoogle側のセキュリティに弾かれ、画像が読み込めない状態になっていました。

そこで、Googleドライブの画像をWebサイトに適切に表示させるための公式機能「サムネイルAPI」を利用する手法に切り替えました。

displayUrl = "https://drive.google.com/thumbnail?id=" + file.getId() + "&sz=w1000";

この記述には、2つの大きなメリットがあります。

• セキュリティの突破: Googleドライブのプレビュー画面ではなく、「画像データそのもの」を直接取得できるため、セキュリティ制限に引っかからず表示が可能になる。

• Web最適化: &sz=w1000 を付与することで、元画像からWeb表示に適したサイズへ自動リサイズされるため、アプリの読み込み速度が向上する。

この修正を行ったことで、ようやく「表示データ」と「表示環境」の整合性が取れ、真っ白だった額縁に作品が正しく収まるようになりました。

3. 額縁に命が宿った瞬間

コードを書き換えて、息子の作品を改めて「美術館」に展示し直したその時です。

これまで額縁の枠だけが寂しく並んでいた場所に、大切に折った折り紙の「コマ」、そして今回は新しく「兜」が加わり、まるで息を吹き返したかのようにパッと現れたんです。

　　　　　　　　　　　　　　　　　↓

「あ、出た……！」

思わずそう声が漏れました。ただのデータや数字の羅列に過ぎなかったシステムが、私の手によって、息子の作品を大切に守る「美術館」という空間に生まれ変わった瞬間でした。

終わりに

ようやく、息子のためのデジタル美術館は正式に開館しました。 コードと格闘した時間さえも、今となっては美術館の思い出の一部です。

これからも1話ごとに1作品ずつ、この美術館のコレクションを増やしていく予定です。 そして開館して初めて気づいたんです。「もっとここをこうしたい！」「この額縁、もう少し可愛くならないかな？」という、新しい欲求が。 というわけで、第4話からは、いよいよこの美術館をより居心地の良い場所に変える「内装工事（デザイン修正）」に入ります！

これからも、この終わりのない開発と、美術館の成長を見守っていただけると嬉しいです。