====== 目論見 ====== ===== モジュールメモ ===== * summernoteでリッチテキスト * comments-xtdでコメント * django-ajaxで通信 * django-hashids * django-allauth * django-bootstrap5 * crispy-form * widget-tweaksでテンプレート上で要素クラス指定 * ViewFlowで状態管理する？ https://github.com/viewflow/viewflow * haystackで検索する * ===== 画面メモ（コンパネ） ===== * フォームビュー * 占いたいテーマを書く * デッキ、スプレッド方法など色々きめる * スプレッドする * リーディング内容を作成する（一時保存する。確定する） ===== 設計方針 ===== ;;# ܐܶܓܰܪܬܳܟ ;;# * 文字画像はFastAPIで小サービスをたてる * エンジン側では小サービスを参照するが、ディスクキャッシュによりAPI利用を減らす * django-ajaxで画面内での処理をサーバサイドサイドに依頼する * 編集中の状態はクライアントサイドJSを介してsessionStorageを使って管理する（暫定） * クライアントJSから直接APIを叩かない（django-ajaxを介してpythonから仲介してAPIを叩く） * Gravatar or Boring は小サービスでプロキシする * Boringはセルフホストする * 一時保存結果はメールでURLを送信できるようにする（再編集パスワード：オプショナル） * localStorageで「いいね」を実装するのはアリかも * (使えない場合はいいね無効) localStorage の機能検出 https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API post contents { "deck_name":"RWS";@selected "spread_name":"three_cards",@selected "selected_cards":["the_fool","death","the_wheel_of_fortune"], @generated "reversal_array":[0,0,1], @generated "reversal_on":true, @selected "background":"bg_purple", @selected "lang":"ja"@selected } ===== テンプレート ===== * Bootstrap設置ガイド　https://bootstrap-guide.com/ * Bootstrapコンテナに背景をいれよう　https://sakuweb.liruu.com/bootstrap/bootstrap-c10/ ===== フレームデザイン ===== * スペシメン１　https://archive.org/details/specimensofprint00mackrich/page/n349/mode/1up * スペシメン２　https://archive.org/details/specimensofpoint00step/page/339/mode/1up * スペシメン３　https://archive.org/details/printingtypespec00millrich/page/411/mode/thumb ===== 参考リンク ===== * はてなブックマークなどのブランドロゴiconをアイコンフォントにしよう https://webru.info/tools/icon-make-font/ * OpenSpreadページ参考（内容、概観） https://www.7tarot.fr/carte/arcanes-majeurs.htm * 占い師さん https://nekochacha.com/ ==== type1,2のデッキについて ==== 記事 https://tarot-heritage.com/2023/10/28/celebrating-the-tarot-de-marseille-type-i/ 書籍ミラノ版デッキの類似品（元書籍：https://archive.org/details/propheticaleduca00vanr/） * 大英博物館所蔵：https://www.britishmuseum.org/collection/object/P_1904-0511-38-1-78 * 大英博物館所蔵：https://www.britishmuseum.org/collection/object/P_1964-1211-1 * https://deviantmooninc.com/products/edoardo-dotti-tarot-de-marseille-milan-italy-c-1865 * https://milk-house.jp/a-la-carte/2017/09/02/tarocchi-piemontesi-midy/ * https://milk-house.jp/a-la-carte/2017/11/23/tarocco-tradizionale-italiano-di-78-carte/ 【kabalah】 * https://en.wikipedia.org/wiki/Jean_Dubuis * https://archive.org/details/QabalLivre1/Qabal_livre1/ カウンセリングの言葉としてのタロット * カウンセリングの言葉としてのタロット　https://www.hermetica.info/Tarot.htm * 西洋占星術のシンボル-入門書　https://www.hermetica.info/Astrology.html　 * 同著者によるスタディリンク　https://www.hermetica.info/TongLink.htm#L ==== 生成AI ==== * 【Stable Diffusion WebUI】Forge版をGoogle Colabにインストールする方法 https://soroban.highreso.jp/article/article-088 * 【Stable Diffusion Web UI】Stable Diffusion XL(SDXL)の使い方 https://soroban.highreso.jp/article/article-042#651d4816a6d63105f25c3c7e-f40374d1043bdc6a1d4ebd3b ==== 作画 ==== * ブラシパターン作成：Create a Set of Art Brushes to Make a Linocut-Style Illustration ( https://design.tutsplus.com/tutorials/create-a-set-of-art-brushes-you-can-use-to-make-a-linocut-style-illustration--cms-21964) * The history of fashion in France https://archive.org/details/historyoffashion00chal/page/11/mode/thumb * Costumes anciens et moderne https://archive.org/details/costumesanciense01veceuoft/costumesanciense01veceuoft/page/n118/mode/thumb * A history of costume https://archive.org/details/historyofcostume00khle/page/293/mode/thumb * Bibliothecae Alexandrinae icones symbolicae https://archive.org/details/bibliothecaealex00giar/page/n180/mode/thumb * コイン絵のモットー　https://archive.org/details/emblemataanniver01univ/page/133/mode/thumb * L'art de dessiner de Maistre Jean Cousin https://archive.org/details/gri_33125010543896/page/n22/mode/1up * Iconologie par figures https://archive.org/details/iconologieparfig08grav/page/n12/mode/thumb * Media in category "Symbolographia, De arte symbolica (1702)" https://commons.wikimedia.org/wiki/Category:Symbolographia,_De_arte_symbolica_(1702) * Category:Silenus Alcibiades ... (1618) https://commons.wikimedia.org/wiki/Category:Silenus_Alcibiades_..._(1618) * Category:La doctrine des moeurs (1646) https://commons.wikimedia.org/wiki/Category:La_doctrine_des_moeurs_(1646) * Noua iconologia di Cesare Ripa Perugino (1618) (https://commons.wikimedia.org/wiki/Category:Noua_iconologia_di_Cesare_Ripa_Perugino_(1618)) * "Proteus, ofte, Minne-beelden verandert in sinne-beelden (1627)" https://commons.wikimedia.org/wiki/Category:Proteus,_ofte,_Minne-beelden_verandert_in_sinne-beelden_(1627) * Collection of Emblemes, Ancient and Moderne https://commons.wikimedia.org/wiki/Category:Collection_of_Emblemes,_Ancient_and_Moderne * Kunstbüchlin https://commons.wikimedia.org/wiki/Category:Kunstb%C3%BCchlin * Christian woodcuts by Albrecht Altdorfer https://commons.wikimedia.org/wiki/Category:Christian_woodcuts_by_Albrecht_Altdorfer * Simpson's drawing book of principles from the best masters https://archive.org/details/b30410010/ * Kunstbüchlin https://archive.org/details/kunstbuchlindari00amma/ * * 1. 明度・彩度を上げる（自動） * 2. 超解像で大きくする（自動） * 3. 遠近法で定サイズ矩形に切り抜く（手動：ここは仕方ない） * 4. バックグラウンドに貼り込む（自動） * 4.5 文字入れ（手動） * 5. 扱いやすいサイズにリサイズ（自動）（横700程度） * 6. GIMPで霧効果をかけて古びさせる（手動）or Script-Fu * 7 メタ情報を付加してデッキパッケージにする（手動） * Gimpスクリプト　http://www.idea2ic.com/Second_Templates/GIMP_SCRIPT_TEMPLATES/GIMP_SCRIPT_TEMPLATES.html * Fredericka the Great 中抜きフォント https://fonts.google.com/specimen/Fredericka+the+Great * 金色効果　https://www.gimp.org/tutorials/Golden_Text/ ==== 画像処理手順 ==== * 【色-色相・彩度】 * 青-20 * 赤+10 * 黄色-4 * 【彩度】 * 彩度80 * 【色を透明度に】 * サイズ1800*3600 * 文字けし * pngで保存 * （いったんここまで） * 紙に貼って * [文字入れ] * 霧茶色　深さ4.0 不透明度３０ * 統合して * 明るさ＋２０ * コントラスト＋２０ ====== 仕様 ====== エクスポート機能が漏れていたので、フェーズ6に**エクスポートと共有機能**を統合して追加しました。以下が修正済みの最終バージョンです。 --- ## **段階的な開発フェーズの詳細 (統合・修正版)** --- ### **フェーズ1: 基礎アプリの構築** (MVP: Minimum Viable Product) **目標**: - ローカルのプレーンテキストファイルを開き、表示する。 - テキスト選択範囲に簡単なアノテーションを付与できる。 - アノテーションはメモリ内で保持し、SQLiteはまだ使わない。 - **デフォルトフォントでテキストを表示**。 **機能詳細**: - ファイル選択ダイアログでローカルのプレーンテキストファイルを開く。 - テキストをElectronウィンドウ内に表示。 - 選択したテキスト範囲にコメントやタグを付与できるようにする。 - アノテーションはJSONファイルとしてローカルに保存。 - **デフォルトフォントでのプレーンテキスト表示**。 - 選択範囲をハイライトし、簡易的な可視化を行う。 **技術要素**: - Electronの`dialog.showOpenDialog()`でファイル選択ダイアログを作成。 - `fs.readFileSync`でテキストファイルを読み込む。 - Reactの`useState`を使い、選択範囲の取得と状態管理。 - `window.getSelection()`で選択されたテキストを取得。 - `fs.writeFileSync`でJSONファイルへの保存処理。 - Electronの基本ウィンドウ構築 (`BrowserWindow`)。 --- ### **フェーズ2: アノテーションデータの永続化 (SQLite導入)** **目標**: - アノテーションデータをSQLiteに保存し、再起動後も復元できる。 - テキストの表示サイズを変更可能にする。 **機能詳細**: - SQLiteデータベースを初期化し、アノテーションデータを格納するテーブルを作成。 - アノテーションデータには、選択範囲の`start`と`end`の位置、選択テキスト、タグ、コメントを保存。 - アプリ起動時にSQLiteからデータを読み込み、該当範囲をハイライト。 - テキストの表示サイズをスライダーやセレクトボックスで変更できるようにする。 **技術要素**: - `better-sqlite3`または`sqlite3`モジュールを導入。 - SQLiteデータベースの初期化とテーブル作成（`CREATE TABLE IF NOT EXISTS`）。 - Reactの状態管理で表示サイズを調整（`useState`でサイズをリアルタイム変更）。 - CSSで`font-size`を動的に変更。 - ElectronのIPC通信を使い、React側からElectronプロセスへDB操作リクエストを送る。 --- ### **フェーズ3: アノテーション管理UIの追加** **目標**: - 付与したアノテーションを一覧表示し、編集・削除が可能な管理UIを作成。 - **表示フォントを選択可能にする**。 **機能詳細**: - アノテーションリストを表示するサイドパネルを作成。 - リスト内のアノテーションをクリックすると該当部分にスクロールしてハイライト。 - アノテーションの編集・削除が可能。 - フォント選択用のセレクトボックスを追加し、ユーザーが任意のフォントでテキストを表示できるようにする。 - フォント変更が即座に反映される。 **技術要素**: - Reactでサイドパネルコンポーネントを作成。 - SQLiteからアノテーションデータを取得し、リスト表示。 - フォント選択用の`