はじめまして、Shinonです。 これまで撮りためた写真や、日々の制作物の記録をまとめる場所として、個人のポートフォリオサイトを作成し、公開しました。

普段は大学で電気電子・情報工学を専攻しており、趣味としてカメラ（Nikon D3100）での撮影をはじめ、サバゲー、サイクリング、Raspberry Piを活用した電子工作など、多岐にわたる活動を行っています。ジャンルがバラバラなこれらの活動記録をひとつの場所に集約しておきたかったのと、Webアプリケーション開発の学習を兼ねて、今回はPythonのフレームワークである「Django」を使ってゼロから構築することにしました。

 

サイトのUI設計とデザイン

デザインに関しては、写真が主役になるよう白とダークトーンを基調としたシンプルなUIにしています。少しだけ視覚的なアクセントを加えるため、CSSで custom-hover-card というクラスを作成し、カードにマウスを乗せると全体が数ピクセル上に浮き上がり（transform: translateY）、同時にサムネイル画像が少しだけズームする（transform: scale(1.05)）アニメーションを実装しています。静止画に少しの動きを持たせることで、写真サイトらしい心地よい操作感を意識しました。

 

インフラ構成と画像保存の最適化

個人のポートフォリオとして運用コストを抑えつつ、パフォーマンスを維持するために以下のモダンなスタックを選択しています。維持費は全てフリープランで登録しているので0円です（2026/04/23時点）。

 

  • ホスティング: Render
  • Neon (PostgreSQL)
  • Cloudinary

写真メインのサイトを自作する上で、最も考慮すべきだったのが「画像データの扱い」です。 例えばリッチテキストエディタを使って画像を直接データベースに保存しようとすると、画像が「Base64」という非常に長い文字列に変換されてしまい、Neonのようなクラウドデータベースの無料枠容量をあっという間に食いつぶしてしまいます。

これを回避するため、画像データ自体はCloudinaryという画像特化のクラウドストレージに保存・配信を任せる構造にしました。ブログの本文に画像を挿入する際も、Cloudinaryに上がっている画像のURLをソースとして指定することで、サーバー本体とデータベースの負荷を最小限に抑えています。

 

開発環境での苦戦とトラブルシューティング

実際の開発では、環境構築や機能追加の段階でいくつかの具体的なエラーに直面しました。

リッチテキストエディタの競合問題ブログ記事の執筆を快適にするため、最初は「Summernote」というエディタの導入を試みました。しかし、既存のシステムやBootstrap環境と競合してしまい、画面が正常に表示されないなどのエラーが発生しました。複雑な依存関係を持つツールはシステムの安定性を損なうと判断し、最終的には独立性が高く、Djangoとの連携パッケージ（django-tinymce）が用意されている「TinyMCE」へ移行することで無事に解決しました。

同名ファイルの罠（urls.py）TinyMCEを導入する際、urls.py にURLのルーティングを追加する必要があったのですが、NameError: name 'include' is not defined というエラーが消えず悩まされました。 原因は、プロジェクト全体を管理する config/urls.py ではなく、誤ってアプリ側の photos/urls.py に記述を追記してしまっていたことでした。Django特有の「同じ名前のファイルが存在する」という構造にすっかり騙された形ですが、エラーログのディレクトリ階層を正確に読むことの重要性を学びました。

データベースのタイムアウト（コールドスタート）変更をデータベースに反映させる makemigrations や migrate コマンドを実行した際、Connection timed out という真っ赤なエラー文が連続して出力されたこともありました。 これは設定のミスではなく、Neonの無料枠特有の「スリープ機能」が原因でした。一定時間アクセスがないとデータベースが休止状態に入るため、コマンド入力からデータベースが復帰するまでに時間がかかり、Django側がタイムアウトを起こしていたのです。Neonのダッシュボードを開いて稼働状態（Active）にしてから再度コマンドを打つことで、スッと通るようになりました。

 

今後の展望

ようやくサイトの土台が完成したので、今後は記事の執筆に時間を割いていく予定です。

京都周辺で撮影した写真のギャラリーはもちろん、現在取り組んでいる「Raspberry Pi Zero 2 Wを使った自作ドローン（Rainbow Six Siege風）」の開発プロセスや、3Dプリンターでのパーツ造形、サイクリング記録、ハードウェア側の技術記録もこの場所に蓄積していきたいと考えています。

 

 

※この文章はAI geminiを用いて作成しています。