【第1回】登山＆キャンプ記録アプリをFlaskで自作してみた｜アプリ概要と使用技術まとめ

こんにちは！現在未経験からWebエンジニアを目指して学習中のSoraです。

今回は、趣味の登山やキャンプを記録するためのオリジナルWebアプリをFlaskで作成したので、その開発ログをシリーズでまとめていきたいと思います！

本記事は第1回として、アプリの概要と構成について紹介します。

🏕️ 作ったもの

私の趣味である登山やキャンプに行ったときに、以下の情報を記録・管理できるWebアプリです。

タイトル（例：〇〇山ソロ登山）
日付
住所（例：熊本県〇〇）
地図（Google Map埋め込み対応）
写真（複数枚対応）※一覧画面では1枚目のみを表示、詳細画面で全て閲覧可能
感想・記録の本文
編集・削除機能

💡作ろうと思った理由

Flaskを使ってWebアプリを作る練習にもなる！
自分またはキャンプ仲間（焚火会）だけで、管理できるアプリを作ってみたかった！
好きなことに関するものを作ることで挫折を回避！

⚙️ 使用技術スタック

バックエンド：Python / Flask / Flask-SQLAlchemy
フロントエンド：HTML / CSS（Bootstrapでデザイン調整）
DB：SQLite（軽量で扱いやすい）
認証：Flask-Login + メール認証（Flask-Mail + itsdangerous）
その他：Flask-Admin（管理画面）、GitHub、Render

アプリの機能（予定含む）

機能	実装状況
記録の投稿（写真、日付、場所、感想）	✅ 済
一覧表示 / 詳細ページ	✅ 済
写真の複数枚アップロード	✅ 済
投稿の編集・削除	✅ 済
Google Map埋め込み	✅ 済
ユーザー登録 / ログイン機能	✅ 済
メール認証（SendGrid対応）	✅ 済
投稿検索機能	🔜 次回以降実装予定

💡 アーキテクチャ概要（モデル）

class User(db.Model, UserMixin):
    id = ...
    username = ...
    email = ...
    password_hash = ...
    is_confirmed = ...
    posts = relationship('Post', ...)

class Post(db.Model):
    id = ...
    title = ...
    description = ...
    date = ...
    address = ...
    map_iframe = ...
    photos = relationship('Photo', ...)

class Photo(db.Model):
    id = ...
    post_id = ...
    photo_path = ...

次回予告ッ‼️

次回は**実際の投稿機能（create処理）について紹介予定です！学者的につまずいたポイントも含めて、写真アップロード・地図埋め込み・日付の取り扱いなどを詳しく紹介します！

終わりに💫

趣味を絡めたアプリを作ることで挫折率が大幅に低下したと実感しております。生成AI（ChatGPT）に助けてもらいながら進めた部分も多いので、Qiitaで記録しながら振り返り、自分の言葉で理解を深めていきたいと思います！

🔗 ソースコードはこちら：https://github.com/soragraming/portfolio-app