題「VSDB 」 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

発表者 【0703PyWeb 】いしだなおと https://github.com/isnot 発表日 2023 年 9 月 28 日 初出 2023 年 10 月 9 日 改稿 場所 株式会社 NEUGATE セミナールーム赤坂 R Python Web エンジニア養成コース 2 2 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

資料スライドはこちら Djan go / 組み込みのAdmin 機能を紹介 / 題「VSDB 」 [ Speak er Deck ] ソースコード Djan go アプリ admin _ dat abase [ Git Hu b] 成果物 mer maid2djan go [ Git Hu b] 題「VSD B 」 題「VSD B 」 © いしだなおと © いしだなおと 💻 💻 3 3 

自己紹介 a.k.a. お前誰よ プログラミング好き WWW; Wo rld Wide Web が好き Web アプリ開発 エンジニア職の経歴あり バックエンド P H P, P erl5 近年は主に J avaS cript (N o de.js ) で開発 P y t ho n に関しては、経験1 年未満 趣味 ☞ 散歩、旅行、サイクリング ☞ スマホで写真撮影 いしだなおと na o t o @ is no t .jp 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 4 4 

アジェンダ 自己紹介 制作理由 目標設定と制限事項 使用言語、技術 各種の仕様書類 テーブル定義書、ER 図 工夫した点、苦労した点 特徴 これから開発演習をする人へアドバイ ス 感想、授業を終えて 参考情報・リンク等 Licen se / St at emen t おわり 題「VSD B 」 題「VSD B 」 © いしだなおと © いしだなおと 💻 💻 5 5 

オーディエンスの想定 Python / Django でのWeb アプリ開発に興味がある Django を使ったことある( チュートリアル～) Django 組み込みのAdmin 機能にフォーカス ︙ ︙ ︙ 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 6 6 

制作理由 「ざつ旅」石坂ケンタ著 KADOKAWA 電撃マオウ連載 アニメ化企画進行中 公式プロモーション動画 [YouTube] 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 7 7 

制作理由( 続き) 作品に登場する情報を網羅的に扱 うデータベースを構築したい 全国各地、いろいろな場所へと旅 をするので、地理情報を重視した い 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 8 8 

VisitSuzugamori 〜ざつ旅を辿る〜 前身となる、既存のサイトがある 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 9 9 

目標設定と制限事項 今回は、「データベース構築」つまりデータ入力と編集 機能に絞って、開発の目標とします ☞ Admin 機能を最大限に使いこなすことで実現する データベースに蓄積されたコンテンツをどのように表現 するかという部分は、別途プロジェクトとします ☞ ほぼフロント・エンドの開発となる( かな？) 10 10 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

使用言語、技術 OS / Hardware Windows 11 Home 22H2 (64 ビット、x64) デバイス名 IPR028-PC 製造元 Lenovo プロセッサ AMD Ryzen 5 5500U RAM 8GB 11 11 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

使用言語、技術( 続き 2) IDE / Code Editor Visual Studio Code バージョン: 1.82.2 (user setup) 機能拡張 多数 12 12 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

使用言語、技術( 続き 3) Python 3.11.5 Web Application Framework Django 4.2.4 django-extensions 3.2.3 django-debug-toolbar 4.2.0 django-dbbackup 4.0.2 13 13 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

使用言語、技術( 続き 4) pip package name version descriptions jageocoder 2.0.3 ジオコーディング、逆- hjson 3.1.0 JSON ぽい、ゆるい構造化データ isort 5.12.0 import 文を整列する black 23.7.0 フォーマッタ( コードを整形) flake8 6.0.0 リンタ( コードを検証) pysen 0.10.4 Python 開発環境一括整備 1 4 1 4 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

使用言語、技術( 続き 5) npm package Node.js v18.16.1 npm v9.5.1 @mermaid-js/[email protected] [email protected] 各種の作図(ER 図、ガントチャート) Marpit: Markdown slide deck framework このスライドを作成するために使いました 15 15 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

各種の仕様書類 項目 ファイル 機能定義書 機能定義書( n aot o).pdf 画面遷移図 画面遷移図( n aot o).pdf 画面設計図 画面設計図( n aot o).pdf テーブル定義書 テーブル定義書( n aot o).pdf ER 図 complex_ er d.svg ガントチャート ガントチャート( n aot o).pn g 発表スライド 発表資料( n aot o).pdf イマココ ※ ローカルファイルへのリンクです ※ 授業のレギュレーション上、必須なので( 雑に) 作成した 1 6 1 6 題「VSD B 」 題「VSD B 」 © いしだなおと © いしだなおと 💻 💻 

題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 17 17 

ER 図 Mermaid.js を使って記述したテキストをビジュアル化 (SVG, PNG) このプロジェクトは、データベース設計から始めました 作成したER 図から自動的に下記ファイルを生成するスクリ プトを作成しました ☞ mermaid2django [GitHub] Django models.py Django admin.py CSV テーブル定義書 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 18 18 

工夫した点、苦労した点 データベースに大量のデータを登録するため、既存のデー タ(JSON と JavaScript の 2 種類、他) を読み込んで、自動 的にデータベースに流し込むスクリプトを作成した ☞ django-extentions による機能のひとつ runscript Admin をカスタマイズした( 後述) 19 19 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

Admin 画面 ホーム Model≒ テーブルが 17+2 ある 配色やヘッダーの文言をカスタマイズする方法は、 【Django 】admin サイト（管理サイト）のカラーやサイト 名を変更する を参考にしました 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 20 20 

特徴 / DB 、モデル Type_master 各モデルの「分類」フィールドの選択肢を、集約して 一括管理できる 各々のモデルでは、フィルターで条件設定( 対応する選 択肢のみを表示する) ForeignKey.limit_choices_to [ref] 21 21 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

Type_master 各テーブルにある「分類」の項目を集約、一括管理できる 10 のテーブルに、項目数合わせて73 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 22 22 

選択肢は、編集中の画面に合わせて Fragment の項目だけ 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 23 23 

特徴( 続き 2) / 編集画面 表示専用のフィールド readonly_fields [ref] 編集しないけれど、関連する情報を確認できる モデルに対応するメソッドを追加 InlineModelAdmin admin.TabularInline [ref] 一対多リレーションを編集できる/ 見える 24 24 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

InlineModelAdmin イン ライン編集 Route 編集画面で、同時にStep の編集ができる（1 対多リレーシ ョン） 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 25 25 

特徴( 続き 3) / 編集画面 地図埋め込み テンプレートを活用 django.template.loader.render_to_string [ref] 𝕏( ツイート) 埋め込み 画像埋め込み django.utils.html.format_html [ref,ref] 26 26 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

画像埋め込み Step 編集画面で、Place の地図 とPhoto の画像を埋め込み表示 している 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 27 27 

𝕏( ツイート) 埋め込み Step 編集画面で、Place の地図 とTweet のWidget を埋め込み表 示している 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 28 28 

Place 編集画面に おける、位置情報 を地図にマーカー 表示する機能（※ 表 示専用） 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 29 29 

特徴( 続き 3) / チェンジリスト 日付で絞り込む date_hierarchy [ref] フィルター list_filter [ref] 簡易検索 search_fields [ref] 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 30 30 

date_hierarchy 「発売日」フィールドに存在する日付に対して、年→ 年 月、と表示するレコードを絞り込む 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 31 31 

おまけ オモテ側画面 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 32 32 

おまけ オモテ側画面 2 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 33 33 

これから開発演習をする人へ アドバイス 先達の知恵を借りる 各種Blog 、Qiita 、zenn 、... 情報の鮮度にご注意、信頼度を見極める目を培おう 公式ドキュメントを読む、自ら手を動かす（チュートリ アルから） 最後は結局ソース嫁 GitHub 、VSCode を活用する 発想を柔軟にしよう 34 34 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

感想、授業を終えて Python に向き合ってプログラミングしているときは、無 心になって打ち込むことができました。 楽しかったです。 ほどほどに、就職活動に差し障りがないよう…… 35 35 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

( 参考) 未実装 地理情報、位置情報の紐づけ( 一部) Route コピー機能 Fragment と Web_comic ☞ データ入力 Tweet ☞ username url desc 補完 Photo ☞ 高さ 幅 補完 Story ☞ center 設定機能 36 36 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

参考情報・リンク等 1 . ざつ旅- T ha t ' s J o u r ne y - [Co m i c W a l k e r ] 2 . ざつ旅- T ha t ' s J o u r ne y - 電撃マオウ 3 . うおおっ！！！！なんと、ざつ旅のアニメ化企画進行中です！ [𝕏 ] 石坂ケンタ 4 . V i s i t S u z u g a m o r i 〜ざつ旅を辿る〜 / V i s i t S u z u g a m o r i .g i t hu b .i o [G i t Hu b ] 5 . d j a ng o - e x t e ns i o ns [Re a d t he Do c s ] 6 . d j a ng o - d e b u g - t o o l b a r [Re a d t he Do c s ] 7 . d j a ng o - d b b a c k u p [Re a d t he Do c s ] 8 . j a g e o c o d e r - s e r v e r 住所ジオコーディングサーバ 9 . Hj s o n, a u s e r i nt e r f a c e f o r J S O N / hj s o n- p y 1 0 . P EP 8 - j a P y t ho n コードのスタイルガイド ”p y t ho n なぜコーディング規約 必要” 1 1 . Me r m a i d Di a g r a m m i ng a nd c ha r t i ng t o o l / Me r m a i d Li v e Ed i t o r 1 2 . Ma r p ; Ma r k d o w n P r e s e nt a t i o n Ec o s y s t e m / Ma r p i t : Ma r k d o w n s l i d e d e c k f r a m e w o r k 1 3 . ER 図 ( S V G 形式) [G i t Hu b ] 1 4 . s c r i p t s / e x p o r t _ j s o n.p y [G i t Hu b ] 1 5 . c o m p l e x / t e m p l a t e s / p o i nt _ o n_ m a p .ht m l [G i t Hu b ] 1 6 . 東京駅の駅舎はやっぱりかっこいいです。 [𝕏 ] 鈴ヶ森ちか 1 7 . 例 | Ma p b o x G L J S 3 7 3 7 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

License / Statement 本スライド および 公開しているソースコードの利用について 特にことわりがない限り、以下のライセンスに基づいてご利用可能です 対象 適用ライセンス スライド CC- BY- 4 .0 l i c e ns e ソース MI T Li c e ns e jageocoder 用住所データベース利用規約（住居表示レベル）に係る表記 ［利用］ 3 8 3 8 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

おわり ご清聴ありがとうございました 39 39 題「VSDB 」 題「VSDB 」 © いしだなおと © いしだなおと 💻 💻 

いしだなおと h t t ps://pages.isn ot .jp/abou t [ Blog] h t t ps://t wit t er.com/isn ot 49662340 [ 𝕏] h t t ps://t .me/isn ot [ Telegram] h t t ps://git h u b.com/isn ot h t t ps://git h u b.com/Visit Su zu gamor i h t t ps://www.you t u be.com/@isn ot h t t ps://sou n dclou d.com/isn ot - jp 4 0 4 0 題「VSD B 」 題「VSD B 」 © いしだなおと © いしだなおと 💻 💻