こんにちは!今回は、Djangoを使用して構築した、シンプルかつ効率的なシングルページアプリケーション(SPA)である姓名判断アプリ「とげぞう先生の占いの館」をご紹介します。このアプリは、軽量な構造ながらも、高速な処理と直感的なユーザー体験を追求したデザインが特徴です。入力した姓名の画数をもとに、運勢やアドバイスを即座に表示する仕組みで、技術的なシンプルさと楽しさを両立したアプリケーションです。
アプリのURLはこちら: とげぞう先生の占いの館
それでは、このアプリの詳細について、どのように構築されているのかを見ていきましょう!
アプリ概要
このアプリは、ユーザーが姓と名を入力するだけで、画数をもとに運勢やアドバイスを表示します。バックエンドで計算を行い、結果は即座にフロントエンドに反映される仕組みを採用しています。また、データベースを使わず、JSONファイルを活用することで、シンプルで管理が容易な設計を実現しています。
以下に簡単な技術の解説を加えた例を示します。
各技術の基礎知識
JSONとは
JSON(JavaScript Object Notation)は、軽量で可読性の高いデータフォーマットです。このアプリでは、漢字の画数データや占い結果を保存・管理するために使用しています。例えば、以下のような形式でデータを管理しています。
{ "山": {"strokes": 3}, "田": {"strokes": 5} }
SPA(シングルページアプリケーション)とは
SPAは、ページ全体を再読み込みせずに必要なデータだけを動的に取得・表示する仕組みを持つアプリケーションです。このアプリでは、占い結果が即座に画面に反映されることで、シームレスな体験を提供しています。
Djangoとは
Djangoは、Pythonで書かれたWebアプリケーションフレームワークです。高速な開発が可能で、セキュリティにも配慮されています。このアプリでは、画数の計算ロジックやJSONデータの提供など、バックエンド全般を担当しています。
Pythonとは
Pythonは、シンプルで読みやすい文法を持つプログラミング言語です。このアプリのロジックやデータ処理はPythonで記述されています。初心者にも扱いやすく、Djangoなど多くの便利なフレームワークを利用できる点が特徴です。
JavaScriptとは
JavaScriptは、Webページを動的に操作するためのプログラミング言語です。このアプリでは、占い結果の動的表示やスロットのアニメーションにJavaScriptを使用しています。フレームワークは使用せず、バニラJSで実装しました。
技術スタックとデータ管理
このアプリでは、以下の技術スタックを使用しています。
バックエンド: Django
DjangoはPythonベースのフルスタックフレームワークで、迅速な開発を可能にする多数の機能を備えています。本アプリでは、以下の役割を担っています。
- フロントエンドへのレスポンス生成
- 姓名の画数を計算するロジックの処理
- JSONファイルの読み込みとデータの管理
軽量さを維持しつつ、必要な処理をしっかり行える」という点で、Djangoは理想的な選択肢でした。
フロントエンド: バニラJavaScript
フロントエンドには、あえてフレームワークを使わずに純粋なJavaScript(バニラJS)を採用しました。これにより、以下のメリットが得られました。
- 軽量で高速な動作
- 学習コストが低く、コードがシンプル
- 必要最小限の機能をカスタマイズ可能
DOM操作やアニメーションの制御はやや手間でしたが、その分シンプルで可読性の高いコードに仕上がりました。
データ管理: JSONファイル
データはすべてJSONファイルで管理しています。例として、以下のファイルがあります。
kanji_data.json
: 漢字ごとの画数データを保持fortune_data.json
: 各画数に対応する運勢やアドバイスデータを保持
JSONファイルを採用した理由
- 柔軟性: データ構造を変更する際のコストが低い
- 軽量で読み書きが簡単: データベースを使用せずに管理できる
- 個人情報を保持しない: セキュリティリスクを最小化
サーバー構築
このアプリでは、Djangoを使用してサーバーをセットアップしました。サーバーの設計では、以下の点を重視しています。
- 軽量なリソース利用: サーバーの負荷を抑えるため、不要な機能やプロセスを排除し、アプリの動作に必要な最小限の構成を採用しました。
- セキュリティ設定: 開発時点からセキュリティリスクを考慮し、Djangoの標準機能であるCSRF保護やXSS対策、適切なHTTPヘッダー設定を行っています。
- 効率的なデータ管理: JSONファイルをデータベース代わりに使用することで、複雑なデータベース管理を不要にし、データの軽量化を実現しています。
また、デプロイにおいては、次の手順を踏みました。
- 必要なライブラリのインストール(例:
pip install
を利用)。 - Webサーバー(例: Nginx)とアプリケーションサーバー(例: Gunicorn)の連携。
- 静的ファイルの収集と最適化。
- HTTPS通信の有効化(例: Let’s Encrypt を利用して証明書を取得)。
これらのプロセスを通じて、信頼性の高いサーバー環境を構築しました。この設定により、小規模なアプリケーションでも迅速に応答し、ユーザーに快適な体験を提供できるようにしています。
姓名判断の実装フロー
姓名判断アプリの中核は、ユーザーが入力した名前をもとに画数を計算し、そこから運勢やアドバイスを導き出す仕組みです。このプロセスでは、バックエンドとフロントエンドが連携し、スムーズな体験を提供しています。以下に、具体的なフローを詳しく解説します。
1. 画数計算
文字の分解
ユーザーが入力した姓と名を1文字ずつ分解します。
例: 「山田 太郎」 → ['山', '田', '太', '郎']
画数データの取得:
漢字
kanji_data.json
から対応する画数を取得します。このデータファイルには、主要な漢字とそれぞれの画数が格納されています。
例: '山' → 3画, '田' → 5画
ひらがな・カタカナ
独自の画数テーブルを使用して、かな文字に対応する画数を取得します。
例: 'あ' → 2画, 'ア' → 2画
合計画数の計算
各文字の画数を合計し、姓と名それぞれの画数を算出します。
2. 運勢判定
例: 「山田 太郎」→ 天格: 8画, 人格: 9画, 地格: 10画, 外格: 9画, 総格: 18画。
五格の計算
- 天格: 姓全体の画数を合計したもの。
- 人格: 姓の最後の文字と名の最初の文字の画数を合計したもの。
- 地格: 名全体の画数を合計したもの。
- 外格: 総画数から人格を引いたもの。
- 総格: 姓と名のすべての文字の画数を合計したもの。
運勢データの取得
fortune_data.json
を参照して、各画数に対応する運勢やアドバイスを取得します。このデータには、画数ごとに以下の情報が含まれます。
- 運勢の種類(大吉、中吉、小吉など)。
- キーワードや性格診断。
- 適切なアドバイスやラッキーアイテム。
3. 結果表示
動的なHTML生成
フロントエンドでJavaScriptを使用して、結果のHTMLを動的に生成します。生成する情報には次の要素が含まれます。
- 各五格の画数とその解説。
- 運勢結果(例: 「総格: 18画 → 中吉」)。
- アドバイスやラッキーアイテムのリスト。
リアルタイム更新
ユーザーがフォームに入力し、ボタンをクリックすると、即座に結果が表示されるように設計されています。このリアルタイム性を実現するため、画数の計算と結果の表示はサーバーサイド(Django)とフロントエンド(JavaScript)の連携で動作します。
こだわりポイント
フレームワークを使わないフロントエンド
フロントエンドは、Vue.jsやReactといったフレームワークを使わず、純粋なバニラJavaScriptで構築しました。そのため、DOM操作やアニメーションの処理をすべて手書きで実装しています。
JSONデータ設計
漢字の画数や運勢データを効率的に管理するため、JSON構造に工夫を施しました。例えば、漢字の画数はキーを文字にして高速検索が可能にしています。
{
"漢": {"strokes": 13},
"字": {"strokes": 6}
}
運勢データは、画数ごとに詳細な情報を格納しています。
{
"13": {
"result": "吉",
"advice": "努力を続けましょう。",
"keywords": ["安定", "成功"]
}
}
プライバシーと安全性への配慮
このアプリでは、データベースを使用せず、JSONファイルから必要な情報を読み取る形式を採用しました。この設計により、個人情報を扱わない仕組みを実現し、セキュリティリスクを最小限に抑えています。ユーザーが安心してアプリを利用できることを最優先に考えました。
最後に
今回の姓名判断アプリは、Djangoを中心とした技術スタックを活用して、軽量かつ手軽に楽しめるサービスを目指して作成しました。単なる趣味の延長として始めたプロジェクトですが、技術的なチャレンジや新しい発見も多く、非常に充実した開発となりました。
シンプルなアプリだからこそ、アイデア次第で無限の可能性があります。占いの結果を楽しむだけでなく、このアプリを触れていただき、新しい視点を見つけてもらえたら嬉しいです。
ぜひ、自分の運勢をチェックしてみてください!
URLはこちら: とげぞう先生の占いの館
コメント