快適なAtCoder環境構築【コマンド無しで提出まで】

毎度のごとくMacを初期化しまして、AtCoderの環境も再構築が必要になったのでこれを機に記事でも書くかと私の使っていたVSCodeでAtCoderの環境を作っていきたいと思います。

Mac + Python + 提出ショートカットの記事も無かったのでね。。。(もちろんC++などPython以外、Mac以外でも役に立ちます)

## Macの環境
プロセッサだったりOSだったりの情報は以下です。
### ハード情報
![環境.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/2ff86778-97d4-006e-9a1f-83ba6ed993f5.png)
- MacBook Pro(2018年モデル)
- Intel プロセッサ

### ソフト情報
- MacOS Monterey
- シェルはzsh
- ほぼほぼ初期化した状態でChromeやらbrew、python、node.jsだけ入れた

## AtCoder-cliのインストール
AtCoder-cliのインストールからです。
これにはNode.jsが必要なのでまだインストールできていない人は[こちら](https://qiita.com/prln/items/6056643f641005cdb41e)を参考にインストールしてください。

https://qiita.com/prln/items/6056643f641005cdb41e

インストールしている方は以下のコマンドを打ってatcoder-cliをインストールしてください。
```zsh:zsh
npm install -g atcoder-cli
```
インストールが終わったら
```zsh:zsh
acc --version
```
でバージョンが表示されるか確認しましょう！

accのアップデートチェックにエラーがあると表示される方は指示に従い
```zsh:zsh
sudo chown -R $USER:$(id -gn $USER) /Users/[パソコンのユーザー名]/.config
```
を実行して権限を与えます。

## online-judge-toolsのインストール
online-judge-toolsをインストールしていきます。

インストールにはpipコマンドが使える環境が必要ですので、AtCoderでC++などpython以外を使っている方もpythonインストールが必要です。
pythonをインストールしていない方は[こちら](https://qiita.com/prln/items/ddbc527e0522f8b83601)からインストールを行なってください。

https://qiita.com/prln/items/ddbc527e0522f8b83601

インストールができたら
```zsh:zsh
pip3 install online-judge-tools
```
こちらのコマンドでonline-judge-toolsをインストールします。

![スクリーンショット 2022-03-20 2.45.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/494f3c57-4283-a8c5-184d-548e7210cab7.png)

こちらも
```zsh:zsh
oj --version
```
でバージョンが表示されたらOKです。

## AtCoder-cliのログイン
AtCoder-cliとonline-judge-toolsのインストールが出来たら、AtCoder-cli(以下acc)にログインしましょう。

![スクリーンショット 2022-03-20 2.51.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/23cb3766-9805-4d66-629e-0f144ba9b52f.png)
```zsh:zsh
acc login
```
と打ってAtCoderのユーザー名とパスワードを入力します。
```zsh:zsh
OK
```
と表示されるはずです。


## online-judge-toolsのログイン
online-judge-tools(以下oj)にもログインします。
```zsh:zsh
oj login https://atcoder.jp
```
このコマンドを打ってAtCoderのユーザー名とパスワードを入力します。

「Seleniumが無い」とのエラーが出ますが問題なく動きますので機になる人はインストールしてください。
私は普通に使うのでインストールしました。

## 解答のテンプレを作成
問題を取得した際に解答のテンプレもあった方が素早くコーディングできると思いますのでテンプレを作成していきます。
```zsh:zsh
cd `acc config-dir`
mkdir python
cd python
touch main.py
touch template.json
```
このコマンドを入力します。

main.pyには
```python:main.py
import math
from collections import defaultdict
```
などなど好きなようにテンプレを作っておきます。
（ちなみに私は空です笑）

template.jsonには
```json:template.json
{
    "task":{
        "program":["main.py"],
        "submit":"main.py"
    }
}
```
を入力します。保存も忘れずに。

```zsh:zsh
acc config default-template python
```
でデフォルトでpythonフォルダのテンプレを使う様にします。

```zsh:zsh
acc config default-task-choice all
```
この設定も行う事で、abcdefgなど問題を全て取ってきてくれるのでした方がいいでしょう。

## とりあえず確認
まだやることはありますが一旦確認しておきます。

```zsh:zsh
acc new abc100
```
とやるとabc問題の100を取ってきます。
この問題のIDはコンテストのURL部分ですので覚えておきましょう。

実行するとabc100というディレクトリができて、その中にabcd問題まであり、さらにその中にmain.pyというテンプレとtestsディレクトリがあると思います。
```:ディレクトリ構造
.
└── abc100
    ├── a
    │   ├── main.py
    │   └── tests
    ├── b
    │   ├── main.py
    │   └── tests
    ├── c
    │   ├── main.py
    │   └── tests
    ├── d
    │   ├── main.py
    │   └── tests
    └── contest.acc.json
```

そこまで確認できればひとまずOKです。
本番はmain.pyにコードを書いていきます。
```python:main.py
# abc100 A問題の解答
a,b=map(int,input().split())
print(":(" if a>8 or b>8 else "Yay!")
```
テストの確認をしたいのでa問題の解答は載せておきます。

## 自動テストとショートカット
自動テストを行うには、abc100のA問題を例にすると
```zsh:zsh
oj t -c 'python3 abc100/a/main.py' -d abc100/a/tests/
```
というコマンドを実行する必要があるのですが、これを毎回打っていると時間がかかるのでショートカットを設定します。

まずは、ショートカットで実行するタスクとして設定しなければいけないので``.vscode``ディレクトリを作成し``tasks.json``を作成します。
```
.
├── .vscode
│   └── tasks.json
└── abc100
    ├── a
    ├── b
    ├── c
    ├── d
    └── contest.acc.json
```
こんな感じになればOKです。

```json:tasks.json
{
	"version": "2.0.0",
	"tasks": [
		{
			"label": "CheckTestCase",
			"type": "shell",
			"command": "cd ${fileDirname} && oj t -c 'python3 main.py' -d ./tests/",
			"presentation": {
				"reveal": "always",
				"focus": true,
				"panel": "shared"
			}
		}
	]
}
```
tasks.jsonの中には上のものを追加してください。

次に``cmd + K`` ``cmd + S``を順に押してキーボードショートカットを開きます。
以下の画像の様にもいけます。
![スクリーンショット 2022-03-20 15.27.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/9d3bc35d-ced2-694a-6a40-5dd1684f7307.png)

そしたら
![スクリーンショット 2022-03-20 15.44.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/8ca79d59-7137-09b2-e259-023312328e9a.png)
この真ん中のマークを押します。
これで``keybindings.json``が開くと思うのでそこに
```keybindings.json
[
  {
    "key": "ctrl+t",
    "command": "workbench.action.tasks.runTask",
    "when": "editorTextFocus",
    "args": "CheckTestCase"
  }
]
```
上のものを入力して保存します。
この状態で``abc100/a/main.py``を開いた状態で``control + T``を押すと、、、
![スクリーンショット 2022-03-20 15.49.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/d18df69c-ca5e-51f8-fe44-1a7f7805cb2d.png)
こんな感じでテストケースを全て試してくれます。

## 自動提出とショートカット
ここまできたら提出も自動でできる様にしましょう。
```json:tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "CheckTestCase",
      "type": "shell",
      "command": "cd ${fileDirname} && oj t -c 'python3 main.py' -d ./tests/",
      "presentation": {
        "reveal": "always",
        "focus": true,
        "panel": "shared"
      }
    },
    {
      "label": "SubmitCode",
      "type": "shell",
      "command": "cd ${fileDirname} && acc s ${fileBasename}",
      "presentation": {
        "reveal": "always",
        "focus": true,
        "panel": "shared"
      }
    }
  ]
}
```
``tasks.json``を以上のように変更します。そのままコピペで大丈夫です。

```keybindings.json
[
  {
    "key": "ctrl+t",
    "command": "workbench.action.tasks.runTask",
    "when": "editorTextFocus",
    "args": "CheckTestCase"
  },
  {
    "key": "ctrl+s",
    "command": "workbench.action.tasks.runTask",
    "when": "editorTextFocus",
    "args": "SubmitCode"
  }
]

```
``keybindings.json``は以上の様に変更します。そのままコピペで大丈夫です。
どちらも保存忘れないように。
これで``abc100/a/main.py``を開いた状態で``control + S``を押します。
(事情により画像は出せないですが)abcaと入力してと出てくるので入力します。

自動でブラウザが開き、提出することができました！
![スクリーンショット 2022-03-20 16.01.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/512282/637f885a-3b13-d051-3296-cefaf489feb1.png)

## おわりに
出来るだけ分かりやすく説明したつもりなのですがどうでしたかね？
少しでもよければLGTMしてくれると嬉しいです。
また何かあれば記事にします。

それでは良いAtCoderライフを！