kato-hiro/atcoder-editorial-for-typical90

AtCoderの「競プロ典型90問」に解説タブを追加し、E869120さんがGitHubで公開されている問題の解説・想定ソースコードなどのリンクを表示します。

AtCoder-Editorial-for-Typical90

概要

AtCoderの「競プロ典型 90 問」に解説タブを追加し、E869120さんがGitHubで公開されている問題の解説・想定ソースコードなどのリンクを表示します。

(2021年6月6日追記) 競プロ典型 90 問のトップページで、ほぼ同等の機能が追加されています。最新の情報は、主に土日に更新されるようです。

DEMO

機能

• 競プロ典型 90 問に、「解説」タブを追加

  • 「解説」タブに関しては、普段のコンテストとほぼ同じ仕様です。

• 解説タブに、以下のリンクを追加

  • 非公式難易度表・ソースコード共有へのリンク
  • 各問題のリンク
  • GitHubで公開されている問題別の解説、想定ソースコードへのリンク

インストール方法

1. 初めてスクリプトマネージャーを利用される場合は、「Tampermonkey」をインストールします。
2. 本スクリプトをインストールします。
3. Tampermonkeyのアイコンをクリックして、本スクリプトを有効にします。

動作環境

• ユーザースクリプトマネージャとしてTampermonkeyを推奨しています。

注意事項

• 1つの問題に対して、複数の解説・想定ソースコードが公開されている日があります。アドホックな処理をしているため、定期的なスクリプトのアップデートをお願いいたします。ご不便をお掛けしますが、よろしくお願いいたします。

バグ・不具合の報告・要望・感想など

• お気軽にTwitter(@KATO-Hiro)か、GitHubまで、ご一報いただけると幸いです。

関連リンク

AtCoder

AtCoder 競プロ典型90問

add-typical90-link

Readme Driven Development; RDD^archive.org

ライセンス

CC0

atcoder-editorial-for-typical90's Issues

タブをクリックしたときのURLが直前のページから変わっていない

WHY

• URLは、タブ名と連動しているべきであると思われるため

BUG

• タブ自体を動的に生成している。URLにHTMLのhref(id)をつけても、リロードすると直前に閲覧していたページに遷移してしまう。

WHAT

• 直し方が分からない

1問に対して複数の資料がある場合への対処

解説ボタン: 表示のon/offを指定できるようにする

解説やコードのファイル数が2以上のときの対応

• ⭐ 7のケースが多い気がするが、出題されるまではわからないため
• 現状では、専用のリストを作って、継ぎ足す方針
• ドキュメントにも明記する

ページネーションを追加できないか?

シンプルなタブ+新規ページのサンプルで動作確認

テストケースが公開されているので、需要があれば、解説タブに追加する

WHY

• トップページの下の方にあって、多分気がついている人が少ない

WHAT

• リンク先がDropboxなので、規則性のあるURLとなるかは不明。最悪の場合、埋め込みが必要な場合がある。

解説ボタンから指定された問題が表示できるようにする

複数の解説・想定コードがある場合への対処

新規ページを作成

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tabs.php

CORS対策

• Chrome拡張でignore

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=ja

• そもそもアクセスしない
• Web開発の一般的な方法で

https://qiita.com/att55/items/2154a8aad8bf1409db2b#fetch-api-%E3%82%92%E4%BD%BF%E3%81%86%E5%A0%B4%E5%90%88

最新の問題文とサンプルを新設したタブに追加する

WHAT

• タブから動的にページが作ることができれば、実装もできそう

README: 文章の更新と画像を追加

""と''をどちらかに揃える

問題とサンプルは，概ね8:00までにアップロードされている

公開当日の問題の解説・ソースコードの表示に関する対処

bootstrapを使わずにtabを実装するか?

解説タブのURLが表示できるようにする

タブ名を公式の名称と重複しないようにする

スクリプトのバージョンを上げる

See #60

星の数に合わせて色分けをする

AtCoder Difficulty Colorizer for Typical 90を参考に実装する or このスクリプトが適用されるように自分のスクリプトを修正

スクリプトの紹介文を用意する

複数の問題の解説を表示できるようにする

問題ページを選択しないと、解説タブが表示されない

WHY

• 解説タブは、典型ページに飛んだら生成されていて欲しい

.gitignoreにVSCodeの.historyを追加

bootstrapのCSSを読み込む

読み込んだら、AtCoderのレイアウトが大きく崩れたので不要?

想定ソースコードが複数ある場合への対処

スクリプトを投稿する

「キーワード・類題まとめ」へのリンクを追加

https://docs.google.com/spreadsheets/d/1GG4Higis4n4GJBViVltjcbuNfyr31PzUY_ZY1zh2GuI/edit#gid=370318951

最新の問題が登録されるまでの間、タブで問題とサンプルを表示できるようにする

WHY

• AtCoder上で操作が完結するようにすると、問題を解くことに集中できると思われるため

問題一覧を取得

E869120さんに公開の許可を得る

WHY

• 意図的に解説ページを用意していない可能性がある

bootstrapが読み込めていない

WHY

• 公式で紹介されている通りに記述したが、バージョンが古すぎるのかもしれない

WHAT

• Ver4系統かVer5系統を試す

解説・ソースコードをタブに表示する

動的にページを生成できるか調べる

urlを生成する

Gifを用意

READMEを用意

類似したスクリプトを見つけてしまった

先方は、GitHubへのタブ・リンクを用意している

• 先行しているサービスの優れている点

  • かなりシンプル
  • 素早く公開されている
  • E8さんが何らかの事情で解説ページを用意していないことについて、事情を知っている?

• 自分のサービスが優位だと思われる点

  • AtCoderのタブから以下のことができる
  • 投票とユーザの解法をまとめたスプレッドシートを見ることができる
  • 各問題の解説とコードへのリンクがある

066の想定コードの命名規則への対応

タブを作成する

一つの問題の解説とソースコードのURLを表示できるようにする

日付から問題数をカウントする

ページが生成できているか確認する方法を調べる

動作チェック

HTMLの最新更新日時を取得できるか調べる

WHY

• これができると、最新の問題が公開されたかどうかが判定できると思われるため

解法の共有スプレッドシートへのリンクを追加

リファクタリング

chrome-extension://gcalenpjmijncebpfijmoaglllgpjagf/options.html#nav=e6ee968c-c887-4fb5-aff0-7aa63d64175b+editor

解説ボタンを作成

複数の解説・コードが公開された場合への対応

複数の解説・コードが予想される回

• round = 6 * week - 1だと思われる。たまに例外もある。

• 65

• 71

• 77

• 83

• 84

• 85

• 86

• 87

• 88

• 89

• 90