こんなサイトが 無料で 作れます。
バンドの活動履歴アーカイブを公開出来ます。
の情報を入力して横断検索することが可能です。
オフィシャルアーカイブとしても、ファンサイトでも利用できるかと。
なんだか難しそうですね。でも仕組みなんて気にしなくて良いです。
PCでDB更新 ⇒ json出力 ⇒ git add/commit/push する必要があります。
なんだか難しそうですね。でも PC でこのページを見ているなら大丈夫です。
このマニュアルでは、以下の作業を順番に行います。
工程をスムーズに進めるために準備しておきます。
| アカウント名 | パスワード | 生年月日 | プロジェクト名 | ニックネーム |
|---|---|---|---|---|
| karinomeado0101 | karinop@ssw0rd | 2000/01/01 | BANDNAME | NICKNAME |
以下適宜読み替えて進めて下さい。
忘れないようにすべて同じ Google アカウントを使います。
(既にお持ちであれば省略出来ます)
1-0-1. のアカウント名とパスワード、生年月日を使って作成
https://accounts.google.com/signup を開く
GitHub は「公開フォルダ」みたいなものです
Google アカウントでログインします
右上の Sign in
“Continue with Google” を押す
Google アカウントを選ぶ
GitHub にログイン
次へ
リポジトリは「保管庫」みたいなもので。
Public
off
No .gitignore
No License
Quitck setup に表示されているコマンドは 1-8-4. 辺りで使うので
https://github.com/〇〇〇〇/BANDNAME.git ←読み替えてね
の「〇〇〇〇」は 1-2-1. の「GitHub のユーザー名」になります。
このページは 1-8-4. あたりで使うかもなので閉じなければ後で楽かも?
ちなみにですが「ギット」と読みます
xcode-select --install
setup 用の .exe をダウンロード、DoubleClick してインストール
Terminal または コマンドプロンプトにて、
git -v (← v は小文字)
バージョンが帰ってくれば正常です。
Git の設定から GitHub 認証用の SSH 公開鍵登録まで
なんだか難しそうですね。楽する為なのでがんばりましょう
ターミナル、またはコマンドプロンプトで次を入力
git config --global user.name "NICKNAME" ←読み替えてね
git config --global user.email "karinomeado0101@gmail.com" ←読み替えてね
鍵のセットを作ります。南京錠とその鍵 的な
既存のSSH関連ファイルが 無い事 を確認します。
Terminal で以下のコマンドをうちます。
open ~/.ssh
エクスプローラで以下のフォルダを開きます。
%HOMEPATH%/.ssh
開いた .ssh フォルダにファイル「id_ed25519」が存在すれば次の 1-5-2-1. は 必ず飛ばしてください。
macOS の場合は Terminal で、Windows の場合は Git bash で、
ssh-keygen -t ed25519 -C "karinomeado0101@gmail.com"
Enter file in which to save the key (/path/ユーザー名/.ssh/id_ed25519): ←ココと
Enter passphrase (empty for no passphrase): ←ココと
Enter same passphrase again: ←ココと
Enter を3回押すだけ。
ちなみに Windows の Git bash はココから起動します

扉に南京錠を設置するイメージ
Terminal で以下のコマンドをうちます。
open ~/.ssh
エクスプローラで以下のフォルダを開きます。
%HOMEPATH%/.ssh
そこには
2つのファイルがあります。
※ファイル「id_ed25519」が無い場合は 1-5-2-1. を実行します。さっき飛ばした場合も実行してください。
id_ed25519 は超大事なファイル。物理鍵とか印鑑とかパスワードのイメージ。
とはいえ。無くしたら作り直せばいい レベル感ではある。多少面倒なくらい。
id_ed25519.pub は南京錠とか口座番号とかユーザー名とか。こちらを GitHub に登録します。
id_ed25519.pub の中身(テキストファイルです)を
https://github.com/settings/ssh/new
の key 欄にペーストして「Add SSH Key」します。
Title はわりと何でもいいかも。判別出れば良いんじゃ無いかな?
データの更新に必要です。
互換性を考慮し 3.11 系をダウンロードしてインストールします
https://www.python.org/downloads/macos/
https://www.python.org/downloads/windows/
インストールが完了したら Terminal または コマンドプロンプトにて、
python -V (← V は大文字)
ダウンロードしてインストールしたはずのバージョン(3.11.9 とか)が返ってくれば正常です。
なんかこんな感じになっちゃって困ったら、、、
Python 3.11.9 (tags/v3.11.9:de54cf5, Apr 2 2024, 10:12:12) [MSC v.1938 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>>
>>>
>>>
「 quit() 」と入力すれば抜けられます
>>> quit()
> ←元に戻った
cd
python -m venv .venv
macOS の場合
source .venv/bin/activate
Windows の場合
.venv/scripts/activate
プロンプト前に (.venv) が付与されれば成功です。
cd Documents
mkdir BANDNAME ←読み替えてね
既にフォルダが存在している場合は、別のプロジェクト名としてください。 BANDNAME-DB とか
このフォルダに 入手した ZIP ファイル を展開します。
BANDNAME ←読み替えてね
│ .gitattributes (macOSでは見えないかも)
│ .gitignore (macOSでは見えないかも)
│ event_editor_tk.py ←大事なファイル
│ export_json.py ←大事なファイル
│
└─site ←大事なフォルダ
act.html
era.html
event-song.html
event.html
index.html
people.html
song.html
tour.html
venue.html
こんな 感じ になるはず。(版によって構成が異なる場合があります)
BANDNAME フォルダで実行します ←読み替えてね
git init
git add .
git commit -m "first commit"
1-3-5. で開いたままの GitHub リポジトリ作成画面に表示されているコマンドを使う:
1-3. あたりで開きっぱなしだったブラウザ(のどこか)に表示されているかもしれない。
git remote add origin git@github.com:〇〇〇〇/BANDNAME.git ←読み替えてね
git branch -M main
git push -u origin main
これで GitHub のプロジェクトにファイルがアップロードされました。
https://github.com/〇〇〇〇/BANDNAME ←読み替えてね
Build and deployment の Branch
None → main
/(root)
で save
Your site is ready to be published at:
https://〇〇〇〇.github.io/BANDNAME/ ←読み替えてね
最初は “building…” と出て、30秒〜1分くらいで “published” に変わると公開完了。
で、実際にブラウザでサイトにアクセスできるようになるのは、、、第2章のデータ入力が終わった後に、、、
このマニュアルでは、以下の作業を順番に行います。
今後何度も繰り返すことになる地道だけど最も大事な章です。
python 仮想環境を起動します。
cd
source .venv/bin/activate
cd
.venv/scripts/activate
プロンプト前に (.venv) が付与されれば成功です。
プロジェクトフォルダに移動して、python スクリプトを起動します。
cd Documents
cd BANDNAME ←読み替えてね
python event_editor_tk.py
GUI アプリが起動します
入力 ⇒ 更新 ⇒ アップロード
バンドの活動記録
メンバー情報
名前とパートぐらいは
イベント情報
日付・ハコ・対バンが書かれたフライヤーとか
セットリスト
あるとグッとデータベースっぽくなります
とりあえず1件あれば
People タブ
バンドメンバーを登録します
Act タブ
対バン(出演バンド)を登録します
Venue タブ
会場(ライブハウス)を登録します
Song タブ
演奏曲を登録します
Roles タブ
役割(パート)を登録します
Era タブ
「章」や「期」を登録します
Tour タブ
ツアー名やシリーズ名を登録します
イベントタブ の左上「 イベント編集 」でイベントを入力して 保存 します
イベント編集 下の イベント一覧 に表示されるので 選択 してウィンドウ右側の「 出演者 」「 対バン 」「 セトリ編集 」を入力(ほぼプルダウンから選択して登録)します
入力 ⇒ 更新 ⇒ アップロード
「 イベント編集 」にある「 Publish JSON 」をクリックすると更新データが出力されます ←割と重要 っていうか いちいち必須 レベル
「 イベント編集 」にある「 Web参照 」をクリックするとブラウザが起動して更新を確認することが出来ます
入力 ⇒ 更新 ⇒ アップロード
BANDNAME フォルダで実行します ←読み替えてね
git add . ←変更・更新ファイルの抽出
git commit -m "作業記録" ←抽出されたファイルをメッセージ付きで記録
git push ←記録されたファイルのアップロード
これで GitHub のプロジェクトにファイルがアップロードされました。
この3つのコマンドは今後何度も何度もお世話になるので覚えてしまうと良いでしょう。
GitHub Pages が
https://〇〇〇〇.github.io/BANDNAME/ ←読み替えてね
こんな感じの表示だったら、、、実際は
https://〇〇〇〇.github.io/BANDNAME/site/ ←読み替えてね
にアクセスすることで表示されると思います。
このままでは Git ユーザー名「〇〇〇〇」や、プロジェクト名「BANDNAME」がバッチリ出ちゃってて、正直気持ち悪いので第3章も読んでね。
このマニュアルでは、以下の作業を順番に行います。
??? また何言ってるのか判りませんけど、ここまで来たなら出来ます。
サイトを超快適・超便利にしてくれます
使わない理由が無いぐらい強力な CDN(コンテンツ配信ネットワーク)です
Google アカウントでログインします
Cloudflare で GitHub Pages を連携します
成功すればアクセス URL は
https://BANDNAME.pages.dev/ ←読み替えてね
こんな感じの URL が表示されるので早速アクセスしてみましょう。
場合によっては数分待つかもしれません。のんびり行きましょう。
ブラウザ、もしくはスマホから確認します
https://〇〇〇〇.github.io/BANDNAME/site/ ←読み替えてね
でアクセス出来なくなっていることを確認します。404 Not Found とか出てればオッケー。
https://BANDNAME.pages.dev/ ←読み替えてね
GitHub を Private にしてもアクセスできることを確認します
更新・変更の場合、反映に時間が掛かる場合がありますので焦らなくても。ところでちゃんと Publish JSON した?
ここまででほぼ全ての設定が完了しました!
あとはただただコンテンツを充実させるため第2章(データ入力 ⇒ 更新 ⇒ アップロード)を繰り返します
このマニュアルでは、以下の作業を任意で行います。
やらなくても良いけど、やると便利なカスタマイズ編
サイトを設置した際に変更する値を settings.js というファイルに変数として持たせています。
サイトのタイトルを書き換えられます
/** ページタイトル(<title> と <h1> に同じ文言を適用) */
const SITE_TITLE = "BANDNAME SEARCH";
戻りたいサイトの URL と文言の指定をします
/** (任意)戻るリンク設定:未定義 / 空ならリンクは出さない */
const HOME_URL = "https://www.BANDNAME.com/";
const HOME_LABEL = "サイトへ戻る";
画面下の問い合わせ用 Google フォームで利用している FORM_ID / ENTRY_ID をまとめて書いておきます。
// googleform
const FORM_ID = "1FAIpQLScoYyPTdZQnwZT2*********8rwRNJKe9145A9jgZZTa1Ydg";
const ENTRY_ID = "13******99";
問い合わせフォームの作り方は 4-5. 辺りで。
元サイトに検索窓を追加する為のサンプルコードです。
既存のコンテンツを壊す事無く、データベース検索機能を追加できるって事です。
こんなヤツ ↓ を設置できます。
SEARCH_URL をこの検索サイトの URL に書き換えてから style(見栄え)、div(検索窓)、script(本体) 要素を移植します。
const SEARCH_URL = "https://BANDNAME.pages.dev/"; ←読み替えてね
index.html の 42行目あたり、
<a href="readme.html" class="readme-link">README</a>
をコメントアウトか削除する事で readme を隠せます
コメントアウト例
<!-- <a href="readme.html" class="readme-link">README</a> -->
もし独自ドメインをお持ちであれば、github.io とか pages.dev とかでは無く
とか
とかにすることが可能です。Cloudflare でサクッと出来ます。応相談。
ページ下にある「このページの誤りを報告」からのジャンプ先フォームを設定します。
フォームにはクリックされたページの情報と、自由記述フォーム(その他任意)を設置する想定です。
ブラウザで下記サイトを開きます。アカウントの選択は 1-1. で作成したアカウントで。
https://docs.google.com/forms/
体裁が整えられたら「事前リンク」を設置します
クリップボードにコピーされた文字列をテキストエディタ等で確認すると
https://docs.google.com/forms/d/e/**ココがFORM_ID**/viewform?usp=pp_url&entry.**ココがENTRY_ID**=入力した文字列
forms/d/e/ と /viewform の間の長めの文字列が FORM_ID (まず変わらない)
entry. 後の数字が ENTRY_ID (変わる可能性あり)
となりますので 4-1-3.( settings.js )に記載しておきます
これで、クリックしたページのリンクが予め入力されている報告フォームが稼働します
つまりどのページに関しての報告かを伝えなくていいし聞かなくても済むと。双方ストレスレス。
質問を作り直したりした場合は ENTRY_ID が変わります ので再取得する必要が出てくる場合があります。
フォームを作り直した場合は FORM_ID が変わります。
頂いた報告はフォームの回答ページに蓄積されます。入力・送信された場合にメールによる通知を希望する場合は
「回答」タブの「新しい回答についてのメール通知を受け取る」
にチェックを入れます
site フォルダ内にある image フォルダに決められたファイル名で置けば表示される仕組みです。置けば良いだけ。
英数小文字 厳守。記号は「_」と「.」のみ下記参照。
大文字が混ざると表示されないと思いますので「Web参照」では表示されちゃう Windows 界隈の人要注意。
画像ファイル表示は以下のカテゴリで対応しています
「_」(アンダースコア)後に id を振る事で指定した id のカバーアートとして表示されます。
ギャラリー表示は以下のカテゴリに対応しています
接頭辞 + 接尾辞 の後ろに「_」(アンダースコア)で連番を振るとギャラリーに表示されます。
開始は 1 から。欠番があると以降は表示されません。最大値は 25 。変更可能応相談。
(※1)event_(id)_(n).webp は機能しません ⇒ event_song_(id)_*_(n).webp を勝手に表示します
(※2)event_song_(id)_(seq)_(n).webp seq は曲順です イベントの曲毎のギャラリーを作れます
WebP形式 のみ 対応です。拡張子は .webp(全て小文字)