Arthals

前言#

PKUer として、入学以来、教育ネットのスタイルに適応できず、本当に醜いと思っています！これでは学ぶ意欲が湧きませんよね？！なぜ私はいつもサボってしまうのか？それはこの教育ネットを見ただけで学びたくなくなるからです！（震声

この不満はついに今週の木曜日に爆発しました。私はまた古臭いプログラミンググリッドを見て、もう我慢できなくなり、ちょうど金曜日と週末は特に予定がなかったので、図書館で楽しくサボり始めました（実際には最後に成果を見たときだけ楽しかったです。その間、さまざまなスタイルやセレクタを調整していると、吐血しそうになりました。多くの知識や文法は使いながら学んでいる状態でした）。プログラミンググリッド、IAAA ログインページ、教育ネットの大部分のページの CSS を徹夜で作成しました。

私は本当に、テーブルを使って作られたプログラミンググリッド、大きな黒い枠の上にある教育ネット、そしてそのデザインがまさに天に逆らうもので、特許登録が本当にできるのかと聞きたくなるような成績ページ（なんと iframe が二重に使われている！）について愚痴りたいのですが、最終的には完成させました。
これが私の別のスタイル Baidu Art（広告：これは私が高校 2 年生のときに作り上げ、今でも使っている美しいスタイル）に似た名前の PKU Art の誕生です。
今振り返ると、2 日間の時間で今後数年の視覚的快感を得られるのは、まあ価値があると言えますね！

簡介#

PKU Art は、ブラウザプラグインを通じてページに追加される CSS スタイルシートです。元のスタイルを上書きし、教育ネットの視覚体験を向上させることができます。初版は昨年 11 月にリリースされ、比較的簡素でしたが、最近更新された第二版では初版の完全な再構築が実現され、ダークモードを完璧にサポートし、さらに多くのインタラクティブなエフェクトやデザインの改善が追加されました。

文档#

PKU Art - Arthals' Docs

この文書には、より美しく、よりタイムリーなガイドインターフェースが含まれています。

ダウンロードと開発#

インストール先#

• Stylish
• GreasyFork
• Github Release
• CDN for CSS
• CDN for JavaScript

プロジェクトのアドレス#

ローカル開発#

• このプロジェクトをクローンします：

  Copy

  git clone [email protected]:zhuozhiyongde/PKU-Art.git
  

• 作業ディレクトリに入った後、依存関係をインストールします：

  Copy

  npm install
  

• Vite サーバーを起動して HMR ホットリロード開発体験を得ます：

  Copy

  npm run dev
  

• プロジェクトをビルドするためにnpm run buildを使用せず、custom-builder.pyスクリプトを使用してリリースバージョンを生成します：

  Copy

  python3 custom-builder.py
  

  注：こうする理由は、実際に使用しているビルドスクリプトに現在解決できない表示バグがあるためです。もし解決方法を知っている方がいれば、ぜひ教えてください～

  なお：既存のmain.jsフォーマットを参考にしてマッチングセレクタを書くことをお勧めします（つまり、一度のインポートには必ず 1 つの正規表現のみを使用する必要があります）。そうしないと、custom-builder.pyスクリプトが正常に読み取れず、リリースバージョンを生成できない可能性があります。

更新ログ#

ChangeLog.mdを参照してください

Todo#

Agenda.mdを参照してください

効果プレビュー#

篇幅の都合上、暗いモードの効果のみを掲載します: )

効果を示すために、html ノードに削除や変更があるかもしれません。録画画面が多すぎて収まりきらないためです。

ダウンロードとインストール#

以下の内容は、あまりタイムリーに更新されない可能性があるため、文書を参照することをお勧めします。

PKU Art は現在、CSS インストールと JS インストールの 2 つのインストール方法をサポートしており、Safari と Chrome（Edge）という 2 つの主要なブラウザに対応しています。どちらのインストール方法もブラウザプラグインを利用する必要があります。また、JavaScript インストールは CSS だけでは実現できない機能を持っていますので、皆さんには JavaScript インストール方法をお勧めします。

補足：ある学生から、JS インストール方法がいくつかのページのレンダリングを「カクッ」とさせるという報告があり、JS の注入順序が原因ではないかと推測していますので、より安定した体験を得るために CSS インストールを推奨します。

修正済みです。

JavaScript インストール#

Safari#

App Store でUserscriptプラグインをインストールする必要があります。

インストールが完了したら、CDN for JavaScriptにアクセスし、プラグインアイコンをクリックします。Userscript Detected:Tap to installという文字が表示されるはずですので、インストールをクリックしてください。このインストール方法が最も推奨されます。なぜなら、私の後続の更新を自動的に検出できるからです。

また、JavaScript ダウンロードリンクにアクセスしてインストールすることもできます。もしあなたのコンピュータに AdGuard がある場合、インストールが妨げられることがありますが、そのようなスクリプト追加手段は最終的な効果には影響しません。

さらに、Github Releaseから JavaScript ソースファイルをダウンロードし、Userscript プラグインに手動でインポートすることもできます。

Chrome (Edge/Arc/Chromium)#

Chrome ウェブストアでTamperMonkeyプラグインをインストールする必要があります。

インストールが完了したら、CDN for JavaScriptにアクセスし、インストールをクリックしてください。このインストール方法が最も推奨されます。なぜなら、私の後続の更新を自動的に検出できるからです。

また、JavaScript ダウンロードリンクにアクセスしてインストールすることもできます。

さらに、Github Releaseから JavaScript ソースファイルをダウンロードし、TamperMonkey プラグインに手動でインポートすることもできます。

CSS インストール（機能の欠如があるため、JavaScript インストールを推奨）#

Safari#

App Store でCascadeaアプリ（￥18）をインストールする必要があります。

インストールが完了したら、アプリを開き、最上部のダウンロードボタンをクリックします。

次に、以下の URL を入力すればダウンロードできます：

https://cdn.arthals.ink/release/PKU-Art.user.css

さらに、CDN for CSSやGithub Releaseから CSS ソースファイルをダウンロードし、Cascadea プラグインに手動でインポートすることもできます。

Chrome (Edge/Arc/Chromium)#

Chrome ウェブストアでxStyleまたはSylishプラグインをインストールする必要があります。

注意：Stylish の料金ポリシーは最近変更され（最大 3 つのスタイルを無料で使用）、アクセスがあまり安定していないようですので、xStyle のインストールをお勧めします。

xStyle をインストールした場合、インストールが完了したら、CDN for CSSまたはGithub Releaseから CSS ソースファイルをダウンロードし、手動で xStyle にインポートする必要があります。具体的な操作手順は以下の通りです：

ソースファイルのテキストを取得 - クリップボードにコピー - xStyle パネルを開く - WRITE A NEW STYLEをクリック - テキストを直接編集エリアにコピー - 右側のパネルでEnabledにチェックを入れ、Enable less complierのチェックを外す

Stylish をインストールした場合、インストールが完了したら、CSS ダウンロードリンクにアクセスし、Install Style をクリックするだけで済みます。

CSS と JavaScript インストール方法の違い#

両者の主な機能は、異なる手段を通じて私が書いた CSS スタイルをあなたのページに追加することですが、追加手段には以下の違いがあります：

• CSS インストール方法は、プラグインを通じてローカルスタイルをページの末尾に<style>タグを追加することで直接引き入れます。

• JavaScript インストール方法は、プラグインを通じてリアルタイムであなたのページの URL を取得し、正規表現でページの URL をマッチさせ、私が CDN にデプロイした CSS ファイルを動的に引き入れます。具体的な引き入れ方法は、ページの末尾に<link>タグを追加して外部スタイルを引き入れることです。

言い換えれば、CSS インストール方法は直接ダウンロードしたスタイルを引き入れ、JavaScript インストール方法は私の CDN 上のファイルをリクエストして引き入れます。ブラウザにはキャッシュ戦略がありますが、一定の遅延が発生する可能性があり、これが「ページのちらつき」問題を引き起こすことがあります。しかし、CSS インストール方法ではこの問題は発生しません。

さらに、両者には以下の機能の違いもあります：

• JavaScript インストール方法は、CSS を追加するだけでなく、サイドバーの折りたたみ問題を回避するなどの機能を引き入れます。この部分の機能は CSS だけでは実現できません。

使用上の注意#

このスタイルは、私が無用だと思ういくつかのコントロール要素を削除しています。たとえば、サイドバーの折りたたみボックス（これは本当に醜い）、再生リストの上部にあるナビゲーションバー（下部に同じものがあります）などです。これにより、特定の状況下で一部の機能が使用できなくなる可能性があります（たとえば、サイドバーが折りたたまれた後、スタイルが有効な状態で再度サイドバーを展開できなくなります）。ただし、いつでもプラグイン内でこのスタイルを無効にして元のインターフェースに戻すことができます。

最近、教育ネットが更新されたばかりなので、すべてのページを完全にカバーする開発進捗を保証することはできません。そのため、教育ネットを使用する必要があるすべての助教や教師には、このスタイルをインストールしないことをお勧めします。特に、機能の欠如が発生した場合にスタイルを無効にする方法を明確に理解している場合を除きます。

このスタイルは、私が常用だと考えるすべてのインターフェースをカバーしていますが、私は教育ネットの専門的なフロントエンドメンテナンス担当者ではないため、すべてのページを修正することはできません。しかし、もしあなたが特定のページが非常に一般的であるにもかかわらず修正されていないと感じる場合は、私に連絡してください。Github で issue を立てたり、ツリーホールにメッセージを残したり、直接私の WeChat に連絡することもできます（文末に記載しています。これが最も歓迎されます！）。

このスタイルが気に入った場合は、ぜひ Star をクリックしてください（ツリーホールと Github のどちらでも構いません！）。これは私にとって最大の励ましと肯定です！

Q&A#

モバイル版の適応を考えていますか？#

考えていません。モバイル版の自動適応は、ほぼ再構築に等しい作業量です。一人でこのプロジェクトを維持するのは本当に疲れます qwq...

iPad で使用できますか？#

できます。方法は Safari で JavaScript インストールを使用するのと同じです。

コードをレビューしたり、PR を提出したりできますか？#

大歓迎です！いつでも私の Github にアクセスして、プロジェクトで使用されているすべてのコードを確認できます。私はプロジェクト内に悪意のあるコードが含まれていないことを保証できます。単に CSS を追加することで（CDN を通じて配布）ページのスタイルを変更しています。もし PR を提出したいのであれば、喜んで受け入れます！

後記#

普段の私はあまり多くを語る人ではありませんが、この狂った一週間は私に多くの感慨を与え、何かを記録する必要があると感じています。

昨年、燕園に入ったばかりの私は、プログラミンググリッドの古臭いデザインに耐えられず、図書館でしばらくサボって、プログラミンググリッドを少しでも美しくするために（#2908869）、その時の私は CSS のコンテナレイアウトすらよく理解していませんでした。多くの知識はコードを書く過程で初めて真剣に学びましたが、あの少し粗雑な拙劣なスタイルが多くの同級生に評価されるとは思いもよりませんでした。そこで私はさらに努力し、その三脚猫の技術を駆使して、今見るとまったく受け入れられない文を乱用して教育ネットの美化を完成させました（このひどくほぼメンテナンス不可能なゴミ山が私にプロジェクト全体を再構築する決意をさせました）。PKU Art v1 をリリースしました。多くの方々からの厚意に感謝し、リリース後には多くの同級生から称賛を受け、今までで最も Star を獲得したツリーホール＆プロジェクトを得ました。その時期、私が最も楽しかったことは、毎日ツリーホールをチェックしてどれだけフォロワーが増えたかを見たり、Stylish でどれだけダウンロードが増えたかを確認したりすることでした（本当に虚栄心が強いですね hhh）。皆さんのサポートに心から感謝します！

楽しんだ後も、私は決して忘れませんでした。それはただの見かけだけの未完成品であり、どんなコードレビューにも耐えられないものでした。実際、リリース以降、私は自分自身が使っていただけで、最適化する方法を考えてはいませんでした。結局、プログラマーたちはいつも言いますよね —— コードが動けば触らない。そんな感じで、私はこのプロジェクトを放置しました。

時は流れ、今年の 8 月 1 日。フロントエンドに常に興味を持っていた私は、7 月に JS、Vue、React などのフロントエンドの一般的な技術を体系的に学び、CSS についても新たな理解を得ました。昨年の私と同じように、何をしていいかわからないほど暇だった私は、ついに自分にやるべきことを見つけました —— このゴミ山のコードを再構築することです！

再構築の過程で、使った知識は実際には初版とあまり大きな違いはありませんが、体系的な知識の基盤ができたことで、ページ構造に対する理解が深まり、万能の translate を乱用することもなく、適切な文を選んで効果を実現することができました。同時に、何度も経験したことで、教育ネットのルーティングや iframe に対する理解も深まり、以前のように iframe を見て呆然とすることもなく、正規表現を通じてスタイルが適用される URL をより細かく制御できるようになりました。

この一週間で本当に何かを学んだかと言えば、特に何もないと思います。細部にこだわることがもたらすのは、耐心の試練だけです。各ページに対して、満足するまで数時間かかることが多く、色を使用するすべての場所で変数を使用してダークモードでの可用性を確保し、元のアイコンが不十分だと思う場所では IconPark のウェブサイトで代替品を探して変更しました。Mac は、プロジェクトを完成させるために、先週の関連スクリーン使用時間が 50 時間に達したと教えてくれましたが、これは参考資料を探したり、配色を選んだりする時間を含んでいません。

私は常に自分が興味を持つ事柄には惜しみなく時間を投資する人ですが、今回の時間と最終的に書いたコードの行数は、最初の予想をはるかに超えています。

その間、私は決して飽きていなかったわけではありません。自問自答したこともあります。こんなに時間をかけて書いたとして、結局どれだけの人が使うのか？私が費やした時間と労力は自己満足に過ぎないのではないか？万が一教育ネットもプログラミンググリッドのようにスタイルを更新したらどうなるのか？... しかし、私はいつも自分を慰めました。もうこんなに書いてしまったのだから（埋没コストだああああ）、途中で投げ出すことはできないでしょう？そうして、自己否定しながら、元のコードがどうやって書かれたのかを疑問に思いながら、機械的に数百回使った属性や変数を叩き続けるうちに、私は徐々に最終的な成果を磨き上げました —— 全く新しい、ダークモードを持つ PKU Art v2。

これで、PKU Art v2 は私や皆さんを満足させるに足るものであると信じることができました。

これにより、教育ネットのページデザインの問題はついに解決されました。私が想定している次のステップは、新しく学んだ JS の知識を使って、機能的なインタラクションの問題を解決することです。たとえば、期末試験前の大予習の夜に、教育ネットのビデオをダウンロードするのが不便だと感じたこと（バッチダウンロードができない、奇妙なソース名が探しにくいなど…）や、教育ネット以外でも、ツリーホールでの同級生のコメントからさまざまな痛点を見つけました：お気に入りをエクスポートできない、バッチでフォローを解除できない…（私は自分のサボりを制限するためにツリーホールに期限機能を追加したいとも思っています hhh）。

次の夏休みには、先修課程を学ぶだけでなく、自分にやるべきことを見つけたいと思っています —— それは、PKU Tool スクリプト / ウェブサイトを完成させ、上記のすべての問題を解決することです！どれだけ完成できるか、どれだけの時間がかかるかは未知数ですが、私は全力を尽くして取り組みます。昨年末に図書館でサボっていた PKU Art の私のように hhh。