OSS Gate Workshop: ゆるい勉強会旭川: 2024-07-28: myou1985: django-debug-toolbar: Work log

[myou1985]

This is a work log of a "OSS Gate workshop".
"OSS Gate workshop" is an activity to increase OSS developers.
Here's been discussed in Japanese. Thanks.

作業ログ作成時の説明

以下のテンプレートを埋めてタイトルに設定します。埋め方例はスクロールすると見えてきます。

OSS Gate Workshop: ${LOCATION}: ${YEAR}-${MONTH}-${DAY}: ${ACCOUNT_NAME}: ${OSS_NAME}: Work log

タイトル例↓：

OSS Gate Workshop: Tokyo: 2017-01-16: kou: Rabbit: Work log

OSS Gateワークショップ関連情報

• スライド：ワークショップの進行に使っているスライドがあります。
• チャット：OSS開発に関することならなんでも相談できます。ワークショップが終わった後もオンラインで相談しながら継続的にOSSの開発に参加しましょう！
• シナリオ：ワークショップの目的・内容・進め方の詳細が書いています。
• 過去のビギナーの作業ログ：他の人の作業ログから学べることがいろいろあるはずです。

[myou1985]

今日はDjango JazzBand下のDjango Debug ToolbarのIssue　”Dark mode text needs higher contrast”の中身を見ていきます。

[myou1985]

・作業ディレクトリを作った（OSSGate）
・作業環境を作った
python -m venv venv
・GitHubのDjango Debug ToolbarをGit Clone
git clone https://github.com/jazzband/django-debug-toolbar.git

[myou1985]

・GitHub上のReadMeを読み、ドキュメントが下記にあることが分かった
https://django-debug-toolbar.readthedocs.io/en/latest/
・ドキュメントを読み、Contributeのやり方の記載を見つけたため、この通りに進めていく
https://django-debug-toolbar.readthedocs.io/en/latest/contributing.html

[myou1985]

・ドキュメントに従い、下記コマンドを実行
python -m pip install -r requirements_dev.txt
DJANGO_SETTINGS_MODULE=example.settings python -m django migrate
ここでエラー

'DJANGO_SETTINGS_MODULE' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

・開発環境がWindowsなので、DJANGO_SETTINGS_MODULE環境変数を用意する必要がある。下記コマンドを実行
set DJANGO_SETTINGS_MODULE=example.settings
python -m django migrate

[myou1985]

・ドキュメントに従い、下記コマンドを実行したところエラー
make example
・Windowsはmakeが入っていない！のでPathが通っている場所にmakeを置く

1. Pathを通す。Windowsのシステム環境変数(Path)に任意の場所を追加（C:\bin)
2. https://gnuwin32.sourceforge.net/packages/make.htmから「Binaries」をZipでダウンロード
3. zipないのbinディレクトリの中身を置く

・ここでmakeを再度実行、でエラー「libintl3.dllがない」といわれる
・よく見たら先ほどのページ下部に依存関係のダウンロードリンクがまとめられていたので、それぞれダウンロード
・普通にクリックすると404エラーになるため、Googleでdll名を検索
・どうやらそれぞれ末尾の数字を消したアドレスが正規の者らしい。同じく「Binaries」をZipでダウンロード
・ダウンロードしたもののbinフォルダの中身をPathを通した場所に置く
・makeを実行。makeが動く。

[myou1985]

・makeの中で下記エラー

python example/manage.py migrate --noinput
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
  No migrations to apply.
DJANGO_SUPERUSER_PASSWORD=p python example/manage.py createsuperuser \
                --noinput --username="" --email="@mailinator.com"
'DJANGO_SUPERUSER_PASSWORD' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
make: [example] Error 1 (ignored)
python example/manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

・makefile内の環境変数エラーなので、追加で環境変数を設定
set DJANGO_SETTINGS_MODULE=example.settings
・再度make example
・動いたので、試しにpython -m django test
FAILED (failures=4, errors=1, skipped=25, expected failures=1)
・これは置いておいて、サーバは動いたので動作確認をする

[myou1985]

・make exampleを動かすと下記エラーが発生

make: [example] Error 1 (ignored)
python example/manage.py runserver
CommandError: You must set settings.ALLOWED_HOSTS if DEBUG is False.
make: *** [example] Error 1

・DEBUGがfalseの場合はALLOWED_HOSTSの設定が必要だよ、と言われているが…
・settings.pyを見てみると、DEBUG=Trueの記載あり。どうして…？
・再度Makefileを見てみる

[myou1985]

・エラーメッセージを見逃していた。

DJANGO_SUPERUSER_PASSWORD=p python example/manage.py createsuperuser \
                --noinput --username="" --email="@mailinator.com"
'DJANGO_SUPERUSER_PASSWORD' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
make: [example] Error 1 (ignored)

・Contributingドキュメントに戻り、再度手順を確認。
・DJANGO_SETTINGS_MODULE=example.settingsを環境変数にセットする必要があった
・再セットして、下記コマンドを実行
set DJANGO_SETTINGS_MODULE=example.settings
・runserverを実行。
python -m django runserver
・Chromeブラウザでhttp://127.0.0.1:8000/へアクセスし、動作確認

[myou1985]

・右サイドにあるDjango Debug Toolbarで「Settings」を選択
・表示された文字列のコントラストがIssueの通りコントラストがpoorであることを確認
https://coolors.co/contrast-checker/acc8e5-ffffff

[myou1985]

・間違えた。コントリビュータの人が言っているものと動かしたexampleの背景色が違う
・取得しているソースはメインブランチであることを確認
・OSのモードに原因がある可能性あるため調査する
・OSのモードが「ライトモード」で、Toolbarが「ダークモード」の場合に再現した
・OSのモード判定部分に原因がありそうな予感

[myou1985]

・この部分のコントラストを修正する必要があるが、OSモードが「ダーク」の時の状態が正しいのか？
・OSモードとアプリのモードの２×２の検証をハードコピー付で添付してみる

• OSライト/アプリライト
• OSライト/アプリダーク
• OSダーク/アプリライト
• OSライト/アプリダーク

[myou1985]

・以下の内容でissueにコメント
「Windows環境下では、OSモードが「ライト」でかつアプリモードが「ダーク」の際に再現しました。
　コントラストは重要ですが、アプリのスタイルはOSモードに追従するのが良いのではないでしょうか。」
・コメントURLは下記：
django-commons/django-debug-toolbar#1943 (comment)

[myou1985]

・ほかにW3Cなどのコントラストに関する英語情報があれば追記する

[myou1985]

・W3Cのコントラストに関する記載を探し、下記リンクの情報を共有（難しくて理解できないので、参考までに）
https://w3c.github.io/wcag/techniques/general/G18

[github-actions]

おつかれさまでした！

ワークショップの終了にともないissueを閉じますが、このまま作業メモとして使っても構いません 👌

ワークショップの感想を集めています！

ブログなどに書かれた際は、このページへリンクの追加をお願いします 🙏

またの参加をお待ちしています！

[myou1985]

issueに返信あり。
訳：
OS モードを反映するという提案をいただきありがとうございます。それが妥当なデフォルトでしょう。
お二人のうちどちらかにこれらの変更を行う時間はありますか? これらの変更がツールバーに反映されるのを見たいです。

[myou1985]

・Chromeの開発者ツールで適用されているCSSを追ってみる
・ライトモードまたはデフォルト時はtoolbar.cssの19行目が適用されているように見えるが、ダークモード時は該当のものがない。設定漏れ？
--djdt-panel-content-table-background-color: var(--djdt-background-color);
・同様のスタイルをtoolbar.cssの64行目に追加。思った通りの適用を確認…
・結局、この設定漏れによりOSのダークモード時にもDjango Debug Toolbarのデフォルト(ライトモード時)CSSが適用されていたような気がする

[myou1985]

・issueにこちらでやってみる旨返信

[myou1985]

・プルリクを出すための準備をする
・ほかの方のプルリクを見ると自身のアカウントにforkして、修正用ブランチを切ってからプルリクを作っているようなので、作り方を調べて倣う
参考：https://qiita.com/y-vectorfield/items/b955617712f3b66359f2
・forkとupstreamの設定はできた。
・branchも作った
・commitの前に、コミット・プルリクに関するルールがないかcontribution guideを再確認
・今回のコミットに該当しそうなのはpre-commitを設定するくらい？設定してみる
pre-commit install
・インストールされたようだ
・コミットしてみる。コミットメッセージは英語で何となく。
・Pushして、あとはプルリクのみ？

[myou1985]

サポーターの方から指摘があったので、以下作業中

1. Jazzbandプロジェクトに参加登録しといてほしい（CoC同意とかのため
   
2. 修正は1行だけなので、PRには説明をしっかり入れておきましょう
   a.説明に元のissueの番号 #1943 を入れておくとissue側にもバックリンクされます。これは入れるべき
   b.このPRをマージすると何が変わるのか
   c.なぜその行を変更したか（このスレッドに書いてくれた通り、1つ指定の抜けを見つけたので、それを指定すると良さそうに見えた旨）
   d.動作確認結果（スクショとか）

[myou1985]

１完了…？
https://github.com/jazzband/django-debug-toolbar/blob/main/CONTRIBUTING.md
・JAZZBANDにアクセスし、LOGIN and JOIN（うろ覚え）からGitHubアカウントとのリンクをする。
・その後表示される同意事項にチェックを入れる(ちゃんと読む)
・完了っぽい

[myou1985]

・２．PR作成に進む
・a～dを英語でまとめ、PRを作成しようとしたところ、
　CheckListに「changes.rst」のPendingへ追記をする必要があると記載あり。追加コミットで追記を試みる…
* Fixed the Dark mode text needs higher contrast.

[myou1985]

・pre-commitでエラー
・改行コードがCRLFになっているとだめらしい。LFに変更しコミット～プッシュ

[myou1985]

・再度PRを作成
・issue番号を間違えた…修正

[myou1985]

無事マージされました！

[kou]

やりましたね！