技術仕様

当サイトは、軽量な独自ブログシステムとして、読みやすさ、更新履歴の確認しやすさ、スマートフォンでの閲覧しやすさを重視して構築しています。将来的なコード公開も見据え、ここではサイトの設計方針と主な技術構成を概要としてまとめます。

1. 設計方針

  • 記事本文を中心に、余計な装飾よりも読みやすさと表示速度を優先しています。
  • WordPress から移行した記事をできるだけ自然に扱えるよう、既存 URL との互換性を重視しています。
  • 公開後の記事について、更新履歴や差分を確認しやすい構成にしています。
  • スマートフォンからの閲覧を前提に、画面幅に応じて読みやすく崩れにくい表示を目指しています。

2. 基本構成

  • Web アプリケーション: Python / Flask ベース
  • テンプレート: Jinja2 によるサーバーサイドレンダリング
  • フロントエンド: HTML, CSS, JavaScript
  • データ管理: SQLAlchemy を使ったリレーショナルデータ管理
  • 表示設計: レスポンシブ対応、ダークモード対応

3. 主なデータ構造

  • 記事: タイトル、本文、サムネイル、公開状態、作成日時、更新日時を持ちます。
  • 分類: カテゴリとタグを使い、記事を探しやすくしています。
  • 履歴: 公開記事の更新時に履歴を残し、差分表示に利用します。
  • プロフィール: 運営者表示やサイト内リンクに使う情報を管理します。
  • お問い合わせ: フォームから送信された内容を、対応に必要な範囲で扱います。

4. 公開ページと配信

  • 記事一覧、記事詳細、カテゴリ、タグ、検索ページを提供しています。
  • お問い合わせ、プライバシーポリシー、利用規約、自己紹介などの固定ページを用意しています。
  • RSS フィードを配信し、更新情報を外部のリーダーから購読できるようにしています。
  • sitemap.xml を生成し、検索エンジンが公開ページを見つけやすいようにしています。
  • 記事 URL は、旧サイトからの移行を考慮した形式を維持しています。

5. 閲覧機能

  • 記事一覧では、必要に応じて追加の記事を読み込めるようにしています。
  • 絵文字は Twemoji を使い、環境による見え方の差を小さくしています。
  • コードブロックは読みやすいようにハイライト表示しています。
  • ダークモードの設定はブラウザ側に保存されます。
  • YouTube、X、Misskey などの埋め込み表示に対応しています。

6. 更新履歴と透明性

  • 公開記事では、過去の更新履歴を確認できる場合があります。
  • 更新前後の差分を表示し、どの部分が変わったかを追いやすくしています。
  • 記事によっては、AI 生成コンテンツを含む旨や、情報更新に関する補足を表示します。
  • 履歴の公開範囲は、記事の性質や権利上の事情に応じて調整する場合があります。

7. 編集と運用の考え方

  • 記事の作成、編集、公開切り替えを管理画面から行えるようにしています。
  • 公開中の記事を編集する際は、下書き保存と公開反映を分けて扱えるようにしています。
  • 画像などのアップロードファイルは、記事本文とは分けて管理します。
  • サイト固有の設定は、コード本体から切り離して管理しやすい構成を目指しています。

8. セキュリティとプライバシー

  • 管理機能は、一般の閲覧ページとは分けて扱います。
  • お問い合わせはサイト内のフォームから送信できます。
  • フォームの入力内容は、問い合わせ対応のために利用します。
  • 個人情報の取り扱いは、プライバシーポリシーに記載しています。
  • フォームや管理機能は、迷惑投稿や不正な操作を抑えることを前提に設計しています。

9. 将来的なコード公開について

  • コードを公開する場合は、ブログシステム本体とサイト固有データを分離した形にする予定です。
  • 記事データ、アップロード画像、環境ごとの設定値は、公開対象から切り離す方針です。
  • 再利用しやすいよう、セットアップ手順や設定例を整理することを検討しています。
  • ライセンスや公開範囲は、準備が整い次第このページなどで案内します。

10. 参考

サイトの内容に関するお問い合わせは、お問い合わせフォームからご連絡ください。