絞り込み

最新の投稿

プログラミング Polygon
プログラミング

新歓企画・競プロ部門の裏話

こんにちは。色々右往左往しながら競プロ企画の実施に漕ぎ着けました。 コードゴルフ開催中OUCRCとしての新歓期間は終わりましたが、4月末までコードゴルフを実施中です。せっかく部室に来て競プロをしてくれた人もいたのに、その時点で問題を選べてなかったのは問題でしたが。 GitHub Pagesで公開中です。 バックエンドはFirebase Cloud Firestoreです。無料でクエリ数も多いDBサーバーが使えるとはいい時代になったなあ。 図1:matsu_friends氏しか解いていないLeaderboard 是非問題を解いて、短くコードが書けたら送ってください。私が喜びます。 ※参加にはAtCoderおよびyukicoderのアカウントが必要です。 ボツ案実のところコードゴルフをするつもりではなかったのです。自分で作問した問題をアルゴ形式で出題するつもりでした。 ジャッジサーバーを立てよう最初は部室内にジャッジサーバーを立ててやろうと思っていました。 OnlineJudge 2.0というサーバーシステムを青岛大学が公開しているのでこれを使うつもりでいました。 これを考えている段階では帰省していてノートPCで検証していたわけですが、こいつを導入するとDockerが壊れる壊れる。 さっぱり訳がわからないのでこれは見送られました。 碌なのがないなら自分で作ればいいじゃない次に考えたのが自分でJavaかNode.jsかなどを使ってサーバーごと作ること。しかし3日でそれはどう考えたって無理(出来たとしても実行言語があまり多く用意できない)なのでボツオブボツに過ぎませんでした。 幻のOUCRC Moodleその次にOUCRC Moodleを爆誕させること。部室内の余ってるPCをサーバーにしてなんとMoodleを立てようとしたわけです。これができれば部内ウケはバッチリだったことでしょう。 しかしMoodleが案外曲者で、依存環境をまとめてインストールするような方法は用意されていません。 LAMP環境(Linux-Apache-MySQL-PHPのアクロニム)が要求されるわけですが(Nginx信者の私はLEMP環境にしようとしましたが同じことです)、MySQLの導入で詰まってやめました。 最終的にで、結果的にGoogleスプレッドシートに問題をまとめて手動入力することに……紆余曲折ありすぎる。 この段階でゴルフ形式にすることを決めました。アルゴ形式だと時間による有利不利の差が開きすぎると思ったので、解けることを前提としてそこからどこまで短くできるかというゴルフ形式ならよいと考えました。 そして泣きっ面に蜂で正課外活動の自粛要請(要請なのか禁止なのかは知りませんが同じこと)。 その結果、ソビエトロシアではお粗末なフロントエンドがWWWを公開した、というのが事の顛末です。

> 内容を見る

プログラミング Polygon
プログラミング

競プロ環境構築#2 C/C++編

共通編の続きです。 WSLを導入したWindows10、またはMac OSやLinuxなどのUNIX系OSを前提にしています。 Ubuntuなどの仮想マシンが使えるならばこの限りではありません。 C++はどのような言語かC言語は説明するまでもないかと思うのでC++だけ。 C++は実行速度が速く、開発でも比較的よく使われる言語です。 イテレータや参照[1]によりポインタの操作がユーザーから秘匿されたり、クラスやテンプレートなどオブジェクト指向のパラダイムが持ち込まれたりして、C言語と比べて書きやすくなっています。 C言語との互換性が非常に高く、ポインタを直接操作することもでき、低級言語として扱うこともできます。 [1] int&型などのことです。関数にint*型で渡して関数内部で間接参照する、などとしなくても良くなっています。 2021年現在の競技プログラミング界隈では、事実上C++が標準語のようになっています。 AtCoderでは多くの言語を使うことができますが、他のコンテストサイトではあまり言語が多くなかったりします。 その中でもC++とJavaは標準的で、C++のほうが速いからか情報も多いです。 [独自研究?] そのため、競技プログラミングをするならC++は初心者におすすめの言語といえます。 C言語の環境構築もほぼ同じなので一緒に解説しますが、おまけ程度にしておきます。私は初心者がC言語を使うことはおすすめしません。 これはC言語しか習っていないうちの学生にも当てはまることなので、ぜひC++を使ってください。 一部の文法はC言語と似てるけど、便利機能モリモリで書きやすくて良いですよ。 はっきり言って、公式ガイドで環境構築できないくらいのスキルしか無いのであればC++に移行すべきだと思っています。 コンパイラ選びC++のコンパイラには主に以下の3つがあります。GCC(GNU C++ Compiler)ClangVisual C++GCCGNU Compiler Collectionの一部、GNU C++ Compiler。そのコマンド名g++からそのままg++と通称されます。 大抵のLinux OSは多くのGNUソフトウェアを標準インストールしており(GNU/Linuxの思想)、 GCC(ただしここではGNU C Compilerのこと)もそのうちに含まれています。 多くのLinuxユーザーはGNU C Compilerに馴染みがあるはずであり、GNU C++ Compilerはそれとほとんど同じオプションを利用することができます。 競プロer的に嬉しいのが、libstdc++のすべてのヘッダを読み込むbits/stdc++.hヘッダがあることです。 関数ごとにいちいちincludeディレクティブを書かなくていいことは記述速度最優先の競プロではプラスに働きます。 ただし実務で使うとブチ切れられることがあるらしいので気をつけてください。 多くの競プロerがGCCを使っており、なんやかんや一番おすすめです。ClangLLVMコンパイラ基盤の一部で、C、C++、Objective-C、Objective-C++の4言語のコンパイラ群です。 Macでは標準がClangらしいですね。他のことは何も知りません。 自分のPCにすでにClangが入っているか、GNUが嫌いでなければ特に使う理由はないと思います。VC++Microsoftが開発しているC++コンパイラですが、簡単に探した限りネイティブLinuxで使えるという情報は一切見つかりませんでした。当然ながらAtCoderでも対応はなし。その他Intel C++ CompilerやAMD Optimizing C++ Compiler、NVIDIA HPC SDK Compilersなどのプロセッサに最適化されたコンパイラ。当然競プロで使われることはまずない。 コンパイラのインストールWSL Ubuntu 20.04では必要ありません。gccもg++もGCC 9が標準搭載。やったぜ。 今後AtCoderで言語アップデートが入ってGCC 10になったときのためにインストール手順を書いておきます。 完璧にAtCoderと同じ環境にしたい場合はBoostが必要になりますが、私は使っていないのでここでは紹介しません。C++忙しい人向けsudo apt install g++-9複数バージョンの管理もしたい人向け# パッケージのインストール sudo apt install g++-9 # ここから蛇足 # シンボリックリンクの書き換え # 今回はalternativesというバージョン切り替えツールを利用する # g++が設定済みでないことをチェック update-alternatives --config g++ # update-alternatives: error: no alternatives for g++ # とか出ればOK # そうでないものが出たらそのままEnterを押す # g++にalternativesの設定を追加 # これをすると/usr/bin/g++ -> /etc/alternatives/g++ -> /usr/bin/g++-9のようなシンボリックリンクが張られる sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-9 5 g++ --version # g++10をインストール sudo apt install g++-10 # 優先度10なので、こちらのほうが優先度が高くなる sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-10 10 g++ --version # マニュアルモードでバージョンを戻しておく sudo update-alternatives --config g++C言語alternativesの部分はg++を全部gccに書き換えればいいだけなので省略します。sudo apt install gcc-9 コンパイラの使い方AtCoderのコンテストのルールのページを見ればコマンドが書いてあります。 https://atcoder.jp/contests/abc194/rules より引用。g++ -std=gnu++17 -Wall -Wextra -O2 -DONLINE_JUDGE -I/opt/boost/gcc/include -L/opt/boost/gcc/lib -I/opt/ac-library -o ./a.out ./Main.cppオプションの説明g++:コンパイラ本体です-std=gnu++17:C++のバージョンを指定します-Wall:標準的な警告をすべて出します-Wextra:その他の警告をいっぱい出します-O2:レベル2でコンパイル時最適化します-DONLINE_JUDGE:ちょっとややこしいので後述-I/opt/boost/gcc/include:Boostを#include<>の検索対象に含めます-L/opt/boost/gcc/lib:よくわからん-I/opt/ac-library:AtCoder Libraryを#include<>の検索対象に含めます-o ./a.out:出力ファイル名を./a.outにします./Main.cpp:入力ファイル名ですDオプション-DHOGE=FUGAは入力ファイルの先頭に#define HOGE FUGAとするのと同じ効果を持ちます。 FUGAが省略され-DHOGEと書かれた場合、#define HOGE "1"とするのと同じ効果を持ちます。 Includeガードでよくやるやつですね。 AtCoder Libraryを導入するAtCoder Libraryは AtCoderのジャッジで利用することができるオープンソースなC++ライブラリです (つまりC言語は対象外、移植は様々な言語にあります。 C言語版はここ。 アクティブなプロジェクトで、C++ STLのデータ構造(setやmap等)も移植対象とするようなので、 C言語使いの皆さん、是非プルリク出してあげてください)。 一般的な開発にはあまり使われない、しかし競技プログラミングでは重宝されるような機能が多数備わっています。 具体的にはmodintUnionFindSegtreeLazySegtreemaxflowmincostflowなどが含まれます(その他にも多数あります)。ダウンロードとインストールここのGitHubリポジトリからダウンロードしてきます。 zipファイルをダウンロードして解凍してもよいのですが、 WSL Ubuntuにはunzipはデフォルトで入っていないようなのでgit cloneでダウンロードすることにします。なぜgitはデフォルトで入ってるんだろう。使うからええんやけどさ# /opt下にダウンロード cd /opt sudo git clone https://github.com/atcoder/ac-library.git # インクルードできるかチェック g++ -I/opt/ac-library ./acl_include.cppacl_include.cppの中身#include <atcoder/all> int main() { return 0; }以上。 毎回-Iオプションを付けるのが面倒な方は、環境変数CPLUS_INCLUDE_PATHにパスを付け足せばよいです。 .bash_profileexport CPLUS_INCLUDE_PATH="$CPLUS_INCLUDE_PATH:/opt/ac-library" # .bash_profileを書くと.bashrcが読まれなくなるので、こっちから読み込むように指示 source ~/.bashrc適用できたか確認source ~/.bash_profile g++ acl_include.cpp エイリアスを設定する-Iオプションを付けるのが面倒な方は~、なんて言いましたが、どちらにせよ-std=gnu++17などのオプションはつけるべきです。 しかし面倒くさい。そのためのエイリアス。 .bash_aliasesにでも次のように付け足しましょうalias g++-ac='g++ -std=gnu++17 -Wall -Wextra -O2'とりあえずこれだけあれば十分かなと思いますが、好みに応じて増やしたり減らしたりしてください。 テンプレートの作成atcoder-cliのテンプレートに設定しておくとよいです。 私はこれで十分だと思っていますが、extgcdやdijkstraなど、ライブラリを付けたい方は付けてください。#include <bits/stdc++.h> #include <atcoder/all> using namespace std; // using namespace atcoder; using ll = long long; const ll MOD = 1000000007LL; // const ll MOD = 998244353LL; const vector<pair<int, int>> dpos4 = {{-1, 0}, {0, -1}, {0, 1}, {1, 0}}; // const vector<pair<int, int>> dpos8 = {{-1, -1}, {-1, 0}, {-1, 1}, {0, -1}, {0, 1}, {1, -1}, {1, 0}, {1, 1}}; int main() { ios::sync_with_stdio(false); cin.tie(nullptr); return 0; } stdc++.hのプリコンパイルbits/stdc++.hを使うとコンパイル速度はかなり落ちます。 何度もテストする場合、それぞれの機能ごとに逐一includeしたほうが良いかもしれません。 少なくとも、手元環境で使う場合はプリコンパイルしておきましょう。# sudoをエイリアスで書き換えるというヤバいことをするので新しいシェルに入る bash # エイリアスの末尾がホワイトスペースのとき、次のトークンがエイリアスかチェックするらしい # g++-acエイリアスを使わない場合はこれをする必要はない # CPLUS_INCLUDE_PATHを設定済みの場合-Eオプション(環境変数を引き継ぐ)は必須 # 参考:https://qiita.com/homines22/items/ba1a6d03df85e65fc85a alias sudo='sudo -E ' # 本体部分 for header in `find /usr -type f -name 'stdc++.h'`; do sudo g++-ac $header done # 立ち上げたシェルから抜ける exit # PCHが生成されたことを確認 find /usr -type f -name 'stdc++.h.gch' 次回予告次回はPythonです。こちらで検証に成功すればnumbaの導入までやりたいですね。

> 内容を見る

プログラミング Polygon
プログラミング

競プロ環境構築#1 共通編

これから競プロを始めるWindows10ユーザーのための、快適な競プロ環境構築の方法をまとめます。LinuxでもOKです。多分Macも大丈夫。 以下に解説する方法はWindows10以外の非UNIX系OSには対応しませんが、仮想マシンを利用するか、ネイティブの対応するアプリケーションを利用すれば問題なく環境構築はできます。 記事情報記事作成日:2021-03-10最終更新日:2021-04-17 シリーズツリーここC/C++編Python編(予定)ご希望あれば他の言語やAtCoderの始め方など紹介します。筆者TwitterにDMかメンションをお願いします。 Windows10にWSL2を導入するWindows10にはWindows Subsystem for Linux(WSL)という便利な機能が備わっています。WSL2は本物のLinuxカーネルを使用することにより、ネイティブのLinuxと高い互換性を持ちます。 AtCoderのジャッジ環境も恐らくLinuxなので、なるべく環境を寄せるためにも導入します (2019/7からの言語アップデートの資料から、Ubuntu 18を使っているらしい。 GCCも10に更新されていないあたり、恐らく執筆時点では環境は変わっていない)。コンパイラなどの環境が既存の環境と競合すると面倒なので利用するという理由もあります。 具体的な導入方法はこのリンク先を見てもらったほうが早いです。 執筆中に初めて知ったんですが、Windows Insider Programに参加していればコマンド一つでインストールが完了するらしく驚き。 Windows10の不安定さにはイライラしているので、私は絶対参加したくないんですけど。今日もネットに繋がらなくてWindows Updateしたし導入手順以下の導入手順は前述のリンク先のx64マシン向けの要約です。詳細はリンク先を確認してください。また、この手順に従いいかなる損害等が発生しても、筆者は一切の責任を負いません。 WSL1をインストール済みの方も、WSL2にアップデートすることをおすすめします。「Linux 用 Windows サブシステム」機能を有効化する管理者としてPowerShellを起動し、次のコマンドを実行します。dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart作業が完了したら、再起動します。Windows10を更新するWin+Rキーを押して出てくるウィンドウにwinverと入力し、バージョンが1903より古ければアップデートします。「仮想マシン プラットフォーム」機能を有効化するPowerShellで次のコマンドを実行します。dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart作業が完了したら、再起動します。WSL2 Linuxカーネルを更新するここから最新の更新パッケージをダウンロードし、インストールします。WSLの標準バージョンを2に設定するPowerShellで次のコマンドを実行します。wsl --set-default-version 2LinuxディストリビューションをインストールするMicrosoft Storeから好きなディストリビューションを選びインストールします。今回は情報も多く、比較的新しいUbuntu 20.04 LTSをインストール。起動するスタートメニューから起動します。UNIXユーザー名とパスワードの設定が求められるので、設定します。 とりあえずこれでインストール完了です。Windows Terminalの導入は必須ではないので飛ばします(どうせVSCodeから叩くし)。テキストエディタを導入する競プロでは原則、すべてのプログラムはシングルファイルです。その都合上、「プロジェクトを管理する」スタイルのIDEとは相性が悪いです(勝手に連結してコンパイルしてしまったり、main関数が複数あって怒られたり)。 もちろんお好きなものを使っていただいて構わないんですが、おすすめはMicrosoftのVisual Studio Codeです。 拡張機能が充実していて、これ一つで大抵の言語に対応できます。私が普段使いしているのもこれです(「競プロ エディタ」でGoogle検索すると上位はVSCodeがほとんど)。余談ですが記事もこれで執筆しています。 これはWindows側にインストールすればOKです(むしろWSLはX Window Systemを自分でインストールしないと使えないのでWSL側にインストールして使うのは割と手間)。VSCodeを日本語化するVSCodeを起動して、Ctrl+Shift+Xを押して拡張機能の管理ペインを開きます。 「Japanese」で検索してJapanese Language Pack for Visual Studio Codeをインストールします。 ウィンドウ右下にメッセージが出るのでRestartをクリックして再起動します。VSCodeのターミナルからWSLを開くまず好きな場所に競プロのプロジェクト用のディレクトリを作ります。ここではWindows側のC:\kyoproにします。 これをVSCodeでワークスペースとして開きます(右クリックすると「Code で開く」というのがあると思うのでそれをクリック)。 Ctrl+Shift+@で統合ターミナルを開き、wslと入力してWSLを起動します。online-judge-toolsとatcoder-cliを導入するテストケースの一括取得、一括テスト、提出などができるようになります。それぞれPython/pipとNode.js/npmが必要。 WSLで次のコマンドを実行します。online-judge-toolsのインストールここに書いてあることを要約した。# パッケージリストをアップデート sudo apt update # Pythonを使う予定があればなるべくAtCoderのバージョンと同じものを # なければ最新でよい sudo apt install python3.8 python3-pip # Pythonとpipのインストールをチェック python3 -V pip3 -V pip3 install --upgrade pip pip3 install online-judge-tools # ojのインストールをチェック oj --versiononline-judge-toolsのバージョンが出れば成功。 パスが通っていないと怒られた場合は、find / -name oj 2> /dev/nullを実行してojの置かれている場所(実行ファイルの親ディレクトリのパス。筆者が試すと/home/[USERNAME]/.local/binであった)を確認した後、echo 'export PATH="/home/[USERNAME]/.local/bin:$PATH"' >> ~/.bashrcで~/.bashrcファイルに追記する。source ~/.bashrcで~/.bashrcを読み込み、再びojのバージョンを確認する(次回以降のWSL起動時はsourceを叩く必要はない)。atcoder-cliのインストール詳細はここ。WSLを利用する場合はLinux向けのガイドを読んでください。あちらではapt-getを使っていますが、aptのほうがいいらしいのでDebian/Ubuntu系ではaptに読み替えましょう。 npmチーム非推奨の方法 !!!以下にある方法は非推奨なので更に下にあるほうを使ってください!!!sudo apt update # Node.jsとnpmをインストール sudo apt install nodejs npm # Node.jsとnpmのインストールをチェック node -v npm -v npm install -g npm npm install -g atcoder-cli # accのインストールをチェック acc -v2021-03-12追追記: この方法(apt)でnpmをインストールした場合、npm install -gにはやはりsudoが必要なようです(ちゃんと検証してから情報を世に出しなさい)。 そこで、npmチームはnvmのようなNodeバージョン管理ツールを利用することを推奨しています。[1] そんなわけで改めてNode.jsとnpmの導入方法を説明します。# 公式スクリプトでnvmをインストールする # 環境によってはwgetもインストールが必要 # curlを使ってもよい wget 'https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh' -O - | bash # nvmを環境変数に登録する # 上記スクリプトによって実はできているので # ~/.bashrcを再読込すればOK # シェルの再起動でもよい source ~/.bashrc # インストールのチェック nvm -v # nodeとnpmをインストールする nvm install node # インストールのチェック nvm ls node -v npm -vこれでそれぞれバージョンが出ればnvm、Node.js、npmのインストールは成功です。 [1] Downloading and installing Node.js and npm | npm Docs https://docs.npmjs.com/downloading-and-installing-node-js-and-npmWe strongly recommend using a Node version manager like nvm to install Node.js and npm.そしてatcoder-cliのインストールnpm install -g atcoder-cli acc -vatcoder-cliのバージョンが出れば成功。 2021-03-12追記: npmにsudoをつけていましたがどうもPowerShellの改行コードの問題だったらしく、LFならばsudoをつけなくても正しく実行できるようです。 色々と不便なのでGit for Windowsを導入して、"terminal.integrated.shell.windows": "C:/Program Files/Git/bin/bash.exe",と設定に書き加え、Git Bashを使えば良いかなと思います。 2021-03-12追追記: nvmでインストールすればなぜか解決されました。やったぜ。atcoder-cliの設定atcoder-cliを使えば自動でコンテストごとにディレクトリを生成して、テストケースをダウンロードしてくれるんですが、このディレクトリにテンプレートファイルを配置することもできます。ojと連携してコードテストしたり、書いたコードをAtCoderに提出できたりします。至れり尽くせりやでほんま。ojのパスを設定acc check-ojonline-judge-tools is available. と出力されればこの項は終了です。 online-judge-tools is not available.と出力された場合、find / -path "/mnt/c/*" -prune -o -name oj -print 2> /dev/nullでojの場所を探し(筆者の場合/home/[USERNAME]/.local/bin)、acc config oj-path /home/[USERNAME]/.local/bin/ojで登録します。再びacc check-ojでチェックして出れば成功です。テストケースの配置されるディレクトリ名を変更するojは指定がなければtest/ディレクトリに配置されたテストケースを認識しますが、なぜかaccはtests/ディレクトリにテストケースをダウンロードするので、このディレクトリ名を変更します。cd `acc config-dir`でconfig.jsonが配置されたディレクトリに移動します。 VimやEmacsなどの適当なテキストエディタでconfig.jsonを開き、該当行を次のように編集します。"default-test-dirname-format": "test"テンプレートを配置するcd `acc config-dir`でconfig.jsonが配置されたディレクトリに移動します。 ここにディレクトリを作成します。ディレクトリ名は言語名にすれば良いと思います。以下はC++の場合の例です。mkdir cpp移動して、テンプレートファイルを配置します。cd cpp touch main.cpp # main.cppを編集するaccに対してこれがテンプレートであることを伝えるため、template.jsonファイルを作成しますtouch template.json # template.jsonを編集する次のように書きます。当然ですが作成したファイル名に応じて適宜変えてください。{ "task": { "program": ["main.cpp"], "submit": "main.cpp" } }config.jsonが配置されたディレクトリにcd ..で戻り、該当行を作成したディレクトリ名に変更します。"default-template": "cpp"使ってみる言語に関係ない部分のインストール作業は大体終わりです。それではaccを実際に使ってみましょう。ディレクトリの生成とテストケースのダウンロード例えばABC088のD問題のテストケースをダウンロードするとします。acc new abc088上記のコマンドを入力するとログインが求められるので、AtCoderのユーザー情報を入力します。 次に上下キーとスペースキーを使って問題を選びます。選んだらEnterを押して待ちます。 完了したら、ディレクトリを開きます。ディレクトリ./abc088/dができているはずです。テンプレートを設定した場合、その中にテンプレートファイルがコピーされています。コードテストコードを書き終えたら、コードテストします。コンパイラ言語の場合コンパイラ言語の場合はコンパイルしてa.outファイルに書き出します。そして、oj tを実行すればコードテストが行われます。インタプリタ言語の場合a.outファイルを作れない場合、-cオプションをつけて実行します。ただし、標準入出力に対応している環境(Node.js等の場合は/dev/stdinを読み込める環境)でなければなりません。 例えばPython3でmain.pyをテストしたい場合はoj t -c 'python3 main.py'を実行します。その他のオプション問題によっては、絶対誤差または相対誤差が $10^{-6}$ 未満であれば正解とするといった場合があります。このような場合は-eオプションを指定します。上記の場合は、oj t -e 1E-6のようにします。もちろん-cオプションと組み合わせることも可能です。 他にもいくつかオプションがありますが、oj -hで確認できます。提出ojを使えばブラウザを使わずに問題を提出できます。さらに、accを経由すればURLの指定も不要です。ojへのログインojもAtCoderの認証を通す必要があります。oj login https://atcoder.jpを実行し、ユーザー名とパスワードを入力します。Seleniumをインストールしろと警告が出ますが無視しても構いません。accで提出accで生成された問題のディレクトリ(今回はabc088/d)に移動し、acc s main.pyのように提出するファイルを指定します。しばらく待つとAre you sure? Please type "abcd"のように表示されるので、提出してよければそのとおりに(abcdと入力して)、提出したくない場合はそのまま何も入力せずにReturnキーを押します。 本来はここでブラウザが起動して、ジャッジ結果を見られるのですが、私の環境はイカれてるらしく提出から7分も経ってやっとChromeに結果が出ました。アホか? 2021-03-12追記: Ubuntuごとここに書いてる方法でインストールし直したら 割とすぐにブラウザが出るようになったので、気にしないでください。 まあ提出結果のページのURLはターミナルに出るので、 あまりに長いようならCtrl+Cで強制停止して、 URLをAlt+Clickで参照すればそれでよいと思います。エイリアスの設定(2021-03-14追記)コンテスト中にもoj tやacc sを使うわけですが、 acc sは3秒の待機と提出時の確認があり、 更に言語指定などが含まれてくると(Python3, Python2, PyPyなど)打つ時間だけ損してしまいます。 そこでエイリアスを設定して素早く打てるようにしておきます (昨日はその分時間ロスしてRated1000位を逃しました(半ギレ)。 あと9秒だけ早ければよかったのですが)oj test省略形がoj t。コードテストをします。 私が使っているのは以下。ただしエイリアスはあくまで文字列置換なので、ファイル名の指定は最後でないとできません。 故に、ファイル名も変数化したければ関数として実装する必要があります。alias oj-t-pypy="oj t -c 'pypy3 main.py'"acc submit省略形がacc s。AtCoderにコードを提出します。 私が使っているのは以下。ただしエイリアスはあくまで(ry ハイフン2個--で区切ると、それより左はacc sのオプション、右はoj sのオプションになります。 詳細はacc s --help及びoj s --helpで確認できます。alias acc-s-pypy='acc s main.py -- -l 4047 -w 0 -y'次回予告次回はC/C++の競プロ向け環境構築について説明します。乞うご期待。

> 内容を見る

プログラミング Polygon
プログラミング

GitHub PagesとHugoを使ってブログを作ってみた

ふぉです。最近はジャンクフードがマイブームです。 最近『縁側ごろごろ』っていう個人サイトを作りました。そちらに投稿したものと記事の内容としては被るのですが、GitHub PagesとHugoで割と簡単に作れたので作り方をまとめておきます。GitHub Pagesでブログが作れるらしい何となしにネットの海をサーフィンしていると、ふと立ち寄ったブログのURLが~.github.ioでした。 へぇ~GitHub Pagesでブログが作れるんだ~。わたしもやりたい。 ググってみると、静的サイトジェネレータを使うとMarkdownで書いたファイルを元にWebページを生成できるみたいです。『GitHub Pages ブログ』と検索したところ静的サイトジェネレータの名前がいくつか出てきたのですが、なんとなくおもしろそうだったのでHugoを使ってみることにします。Hugoを使って実際に作ってみるHugoの導入まずHugo Extendedをインストールするのですが、Windowsでは例えばChocolateyなどのパッケージマネージャを使うので、まずはそちらをインストールしておきます。 chocoコマンドが使えるようになったら、Hugo Extendedをインストールします。GitHubの準備とThemeの導入続いてブログ作成のための環境構築をします。以下の記事を参考にさせて頂きました。 3分で GitHub にブログを作る (Hugo + GitHub Pages) - Qiita HugoではThemeと呼ばれるページレイアウトのテンプレートのようなものがHugo Themesで色々公開されていて、 『Hugo Future Imperfect』というテーマが個人的にとても好きなので導入します。 先ほどの環境構築の記事ではconfig.tomlを編集するようになっています。 themes/hugo-future-imperfect/exampleSiteにあるconfig.tomlをコピーして、ブログ本体のディレクトリに元々あるconfig.tomlに上書きしておきます。 以降、themesディレクトリ以下のファイルを変更する際は全てブログ本体の同名ディレクトリにコピーしたものを使用しています。config.tomlをカスタマイズする自分のブログに合わせてconfig.tomlを編集していきます。ここではブログのタイトルや説明、 自分のSNSアカウントへのリンクや記事の共有ボタンの有効化などブログの基本的な要素を編集できるようになっているので、好きなようにカスタマイズします。 特に変わったことはしていませんが、1つあるとすればアイコンは私がGitHubで使っているものをURLで参照して持ってくるようにしています。 https://github.com/<USERNAME>.pngとするとアイコン画像を取得できます。 画像が思ったよりでかかったのでサイズは100pxとしておきます。ここまでの設定でconfig.tomlは以下のようになります。 [params.intro.pic]以下をいじることで左上当たりのプロフィール部分のレイアウトをいじることができます。 フォントを変更するページ中で使用されるフォントを指定します。Google Fontsで使いたいフォントをインポートして使用する感じになるので、便利すぎてありがとうございますの気持ちになります。記事のフォントNoto Sans JPが好きなので、使えるようにします。 hugo server -Dでサイトのテスト実行をし、ブラウザで文字部分について検証をします。Vivaldiだと日本語の文字の上で右クリック→[検証]でした。 Stylesに表示されている項目のうちfont-familyの部分がフォントの指定になっているようなので、場所として示されているmain.css:117付近を見に行きます。 \themes\hugo-future-imperfect\static\css\にmain.cssがありました。117行目あたりからがフォントの設定となっていたので、以下のように変更しています。@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); body, input, select, textarea { color: #333333; font-family: 'Noto Sans JP', sans-serif; font-size: 14pt; font-weight: 400; line-height: 1.75; }インラインコードのフォント続いてインラインコードの文字を検証すると、main.css:259付近でフォントが指定されていたので、ここも変更します。コードのフォントにはSource Sans Proを使うことにします。@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap'); code { background: rgba(160, 160, 160, 0.075); border: solid 1px rgba(160, 160, 160, 0.3); font-family: "Source Code Pro", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; }見出しの調整見出しをより目立たせるためにデザインの調整をします。デフォルトではh3以降見出しのフォントサイズが本文より小さくなってしまうのと、見出しに何も装飾がないのは記事本文と判別がつきにくいのとで、デザインをちょっとだけ変えてみます。 デザインを変更する見出しに関してですが、デフォルトの状態ではアルファベットは全て大文字で字間がやや広いです。私の好みに合わせてmain.css:197付近を以下のように変更しています。h1, h2, h3, h4, h5, h6 { color: #3c3b3b; font-family: "Raleway", Helvetica, sans-serif; font-weight: 800; letter-spacing: 0.10em; line-height: 1.65; margin: 0 0 1em 0; text-transform: none; }このコードのすぐ後のあたりで見出しのデザインを変更できるのでやってみます。 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 こちらのサイトのCSSをお借りしまして、見出しの文字の左に灰色のマーカーを付けています。 h4、h5、h6は共通なので端折っています。h1 { font-size: 1.4em; border-left: solid 5px #C0C0C0; padding: 0.1em 0.5em; } h2 { font-size: 1.2em; border-left: solid 5px #D0D0D0; padding: 0.1em 0.5em; } h3 { font-size: 1.1em; border-left: solid 5px #E0E0E0; padding: 0.1em 0.5em; } h4 { font-size: 1.0em; border-left: solid 5px #F0F0F0; padding: 0.1em 0.5em; }こんな感じになりました。わかりやすくなったかも? デザイン変更の弊害を直す見出しのデザインを変更したところサイドバーでも見出しが使われているために、サイトタイトルのあたりが特に違和感マシマシになります。 タイトルの左のほうに刻み海苔が貼り付いているのとか正直めっちゃ変なので直します。 sidebar.htmlがサイドバーにあたるので見てみると、18行目に<h2>{{ .header }}</h2>というのがあります。5行目で<section id="intro">というようにIDが与えられているので、main.css内の先ほど変更したh2よりも下の行で#intro header h2に海苔を消すCSSを書けば良さそうです。 幸いmain.cssの2600行付近に見つかるので、こんな感じで海苔用の余白を作っているpaddingと海苔そのものであるborder-leftを共に0pxとか0emとかにする記述を加えて完了です。#intro header h2 { font-size: 1.5em; font-weight: 900; border-left: solid 0px #FFFFFF; /* 見出しに線入れたらタイトルにも出ちゃったので隠す */ padding: 0em 0em; /* 余白も0にしておく */ }同様のことをその他の見出し部分にも適用して、あとはちょこちょこナビゲーションバー(上に出てるサイトのタイトルとかHOMEとかABOUTとか書いてるとこ)とかをいじっておわりです。 あとは適当に記事を書いてhugoとコマンドを打てばpublicというフォルダに必要なものが全部出力されるので、このディレクトリをGitHubにプッシュしておきます。 簡単にオシャレなサイトが作れてめちゃくちゃ感動した。すごい。あとHugoはガチで生成が爆速です。びっくりした。

> 内容を見る

プログラミング Polygon
プログラミング

2. 一からアンドロイド開発をして思った、知っておくべきこと~ViewBinding編~

こんにちは、オキリョウと申します! このシリーズでは私が初めてAndroidアプリ(下のURLのやつ)を作成した時に「最初から知っておきたかったな・・・」と感じたことを書いていきたいと思います。   是非見ていってください↓↓↓ https://play.google.com/store/apps/details?id=com.wsr.shopping_friend 今回紹介するのは「ViewBinding」です。  どういう内容?Androidのコードを書いていると、Viewを操作したり、Event発生時の処理を書いたりしたくなる時が多々あります。 例えば、画面上にあるボタンを押したらメッセージが出てくる、といった実装をするときです。そのような時、どういう風に書くのかというのが今回の議題です。  1.findViewByIdまず、古い記事などでよくみられるのがfindViewByIdです。val button = findViewById<Button>(R.id.button) button.setOnClickListener {     //処理を書く }このように書くことで自分の指定したid(この場合だとbutton)のボタンが押されたときの処理を書くことが出来るようになります。 ただ、このfindViewByIdはいくつか問題を抱えていました。コードが複雑になったり、返り値がnullableだったり… 幸いにも私はfindViewByIdを利用するのはあまりよろしくないという記事を発見したので無事回避することが出来ました。  2.Kotlin Android Extensions次に考えられるのがKotlin Android Extensionsを使った方法です。 こちらはGradleファイルに記述を加える事で使えるようになるものです。これを使うことで、先ほどのコードは以下のように書くことが出来ます。button.setOnClickListener {    //処理を書く }findViewByIdというのが無くなってますね。 これは、プログラム側が勝手にfindViewByIdをしてくれ、id名と同じ名前の変数に代入してくれているからです。 これによりfindViewByIdよりも簡潔に書けるようになりました。ついでにfindViewByIdが持っていた「型安全ではない」という問題も解決してくれています。 これだけ聞くとかなり優秀そうです。実際にKotlin Android Extensionsを使っていたり、称賛している記事も多くありました。 そこで私のアプリにも導入して、コーディングしていました。   しかし、この2020年11月24日にサポートが終了してしまいました。 というのも、Kotlin Android Extensions自体もまた問題をいくつか抱えていたからです。 まずKotlinでしか動かないことです。そりゃあ、KotlinのExtensionsなんだから当たり前の話です。しかし、古くからあったアプリとかがJavaで組まれていることを考えると無視できない問題であることが分かります。 次にnullableであることです。つまり、findViewByIdが抱えていた問題が解決できていないということです。 そして、コードが汚くなるということです。 Kotlin Android ExtensionsではXMLで定義されたidと全く同じ名前の変数にいろいろ準備してくれます。 しかし、そもそもXMLはスネークケース(kotlin_is_best)、Kotlinではキャメルケース(kotlinIsBest)と命名規則が違います。したがってKotlinのコードに本来あるべきではないスネークケースが紛れ込むことになります。 これらの理由からサポートが終了してしまったとのことです。  3.ViewBindingそしてこれらの問題をほぼ全部解決するのがViewBindingとなります。 このViewBindingがどういうものなのかを書くと長くなってしまうので省略しますが、導入することにデメリットはないという人もいるくらいのものです。必ず導入してあげましょう。 参考URL: https://developer.android.com/topic/libraries/view-binding?hl=ja   ちなみに私のアプリは現在懸命にKotlin Android Extensionsから移行している最中です…皆さんも気を付けましょう。

> 内容を見る

プログラミング Polygon
プログラミング

1. 一からアンドロイド開発をして思った、知っておくべきこと~Fragment編~

こんにちは、オキリョウと申します! このシリーズでは私が初めてAndroidアプリ(下のURLのやつ)を作成した時に「最初から知っておきたかったな・・・」と感じたことを書いていきたいと思います。   是非見ていってください↓↓↓ https://play.google.com/store/apps/details?id=com.wsr.shopping_friend 今回紹介するのは「Fragment」です。  ActivityとはFragmentが何なのかを紹介する前に、まずActivityについて書きたいと思います。 このActivityというのは、Androidのアプリにてメインで動く部分です おそらくAndroidの入門記事を読むと、MainActivityというファイルにコードを書いていると思います。このMainActivityというのがActivityの一種です。   まだまだひよっこだった私は様々な入門記事を読み漁りました。そういった入門記事のほとんどはそこまで複雑なことをしないものですからMainActivityにコードを書いています。 それを見た私は「Activityに全部書くんだな」と勝手に思い、全部書き込んでしまいました。 全部書いてしまうことの欠点実は全部の処理をActivityに書くのはそこまでいいわけではありません。Activityに書いてしまうと使いまわしが出来なくなるからです。下の画像を見てみてください。 こちらは実際に作ったAndroidアプリとなります。 左の画面にあるボタンをクリックすると右の画面に遷移するのですが、共通部分がありますね。写真には撮りませんでしたが、一番下の空白、そこも広告が入るので共通部分となります。 これらを全てActivityで書いてしまうと、画面遷移前と画面遷移後、どちらのプログラムコードにもこれらの記述を書く必要があり、非常に面倒です。 面倒なだけならいいですが、実装できなくなる例もあります。例えばBottom Navigation Barを実装するときにActivityに全部書くと、Googleが用意してくれているやつが使えなくなるので血の涙を流すことになります。 Fragment君 Activityに全部書くのは非効率で、使えるものも制限されてしまうことが分かったと思います。 ではどのようにすればいいのでしょうか? ここで冒頭のFragmentが登場します。Fragmentとはその名の通り、パーツを指します。Acitivityというメイン画面に使えるパーツというわけですね。 このFragment、何と簡単に差し替えることが出来ます。 AcitivityにFragmentを置く場所を置いておけば、あとは変え放題です。 つまり、共通部分はActivityに、違う部分はFragmentにおいてやれば再利用が出来ます。 もっと言えば、Fragmentは差し替えるものということで設計されているので、簡単にわかりやすく変えることが出来ます。 詳しくはNavigationで検索しましょう。一応参考URLも貼っておきます https://qiita.com/tktktks10/items/7df56b4795d907a4cd31 まとめFragmentを実装すること自体はたいして難しいものではありません。調べればある程度の資料は出てくると思います。ですので、しっかり調べて、どのような時にFragmentを使うのかなど知っておくのがベストだと思います。 ちなみに私はFragmentについて知った後、アプリをごっそり書き換えました…皆さんも気を付けましょう。

> 内容を見る

プログラミング Polygon
プログラミング

YouTube Live Scheduler Part3

こんにちは,「ぷらなりあ」です. 前回の記事に引き続き,YouTubeのライブ配信をまとめて表示してくれるサイトについて,実装概要の③と課題点について書いていきます.  実装概要各You Tubeチャンネルに配信コンテンツがあるか確認配信コンテンツがあればその詳細情報を取得してデータベースに登録データベースから情報を読み込んで画面に表示 使ったものPHP 7.4.13MySQL5.7YouTube Data API v3Bootstrap v4.0.0 仕組み(続き)③     データベースから情報を読み込んで画面に表示 YoutubeではビデオIDが分かれば配信URLやサムネイル画像のURLも分かる為,配信情報を表示させる.               以下のように,開始予定時間(配信開始後,実際に開始した時間に更新),チャンネルアイコン,配信者名,サムネイル,配信タイトルが表示され,ボックス内をクリックすれば別タブで配信が開く.なお,現在配信中の場合は,赤い枠で囲まれる. 図 1 配信前後図 2 配信中 また,全体としての表示は配信日時で分割され,配信開始時間が1時間区切りで改行される. 図 3 全体の表示以上のようにして,事前に配信者名,チャンネルID,チャンネルアイコン画像のURLを登録しておけば,自動的にそのチャンネルの配信情報を取得・表示してくれる. なお,クォータの削減のため情報の更新間隔は最低でも15分としてある. また,サーバ側の都合により,常にサーバ上で稼働し,一定時間ごとにデータベースの更新を行うことができなかったので,更新のタイミングを前回の更新から15分以上経過した状態で,サイトへのアクセスがあった際とした. さらに,データベースの容量を考慮し,配信情報は1日前のものまでアーカイブするようにした.(デモページでは参考のため,1か月程度アーカイブされる予定)              課題点このサイトが取得するのはライブ配信のみなので,動画投稿は表示されない. 仕様上,情報の更新に最大で15分程度のタイムラグが生れる. また,サーバ側で勝手にデータベースを更新してくれず,終了した配信は配信者1人あたり1度に最大で10個しか検索しないので,サイトに長期間アクセスしないとその間の配信情報が配信者1人あたり10個以上残らない. ただし,通常過去の配信情報は1日前までしか表示しないので,あまり影響はない(配信者が1日10回行動とか10回以上枠ガチャをしなければ) さらに,データベース更新時のアクセスが若干重く,20~30秒程度かかる. APIキーの制限が結構めんどくさいので,キーが複数必要となる.(デモページも,複数のキーを切り替えながら使用している)  その他Bootstrapめっちゃ便利・YouTube Data APIの公式リファレンス意味わからん(以上)   完成したサイトのデモページ http://harekiru.starfree.jp/youtubelivescheduler.php   参考 YouTube Data API リファレンス https://developers.google.cn/youtube/v3/docs ここまで,長々とした文章になってしまいましたが,お付き合いくださった方,ありがとうございました.今後は上で挙げたような課題の修正や,現在の実装方法では不特定多数が閲覧できるメリットがあるものの,個々人が便利ツールとして使うには導入のハードルが高過ぎるので,サイトのアプリ化などをやっていこうかなと考えています.最終的には,APIとお気に入りのチャンネルの情報を登録すれば動くようなPCアプリにしたいと思っています. その他,詳細について興味がある新入生の方はOUCRCで「ぷらなりあ」に聞いてください. では,ここまでありがとうございました!

> 内容を見る

NoImage Polygon
プログラミング

YouTube Live Scheduler Part2

こんにちは,「ぷらなりあ」です. 前回の記事に引き続き,YouTubeのライブ配信をまとめて表示してくれるサイトについて書いていきます.今回は前回の最後にご紹介した実装概要をもう少し深堀します.  実装概要各You Tubeチャンネルに配信コンテンツがあるか確認配信コンテンツがあればその詳細情報を取得してデータベースに登録データベースから情報を読み込んで画面に表示  基本的な流れは上記の①~③の様に行います.配信予定があるかどうかや,配信の開始時間やURL,配信タイトルなどYouTube上の情報を取得するにはYouTube Data API v3というGoogleの出しているAPIを使用する.また,このAPIの仕様上によりチャンネルごとの配信予定の有無と配信に関する詳細情報の一部は同時に取って来れないので,①と②のように2回に分けて行った.  使ったものPHP 7.4.13MySQL5.7YouTube Data API v3Bootstrap v4.0.0 仕組み①     各You Tubeチャンネルに配信コンテンツがあるか確認 YouTube Data API v3のsearchリソースを使う. You TubeのチャンネルIDを指定して配信予定のコンテンツ,現在配信中のコンテンツ,過去に配信済みのコンテンツ,それぞれのビデオIDを取得する.また,YouTube Data API v3には,1つのAPIキーごとに1日当たりの使用制限があり,リクエスト内容によって値の異なるクォータの数値で管理されている.APIキーの持つクォータがなくなれば日付が変わるまで使えなくなるので,リクエスト内容はビデオIDとその他最低限だけにし,取得する過去の配信コンテンツの数も必要最低限になるように工夫してある.これを実行すると以下のようになる.なお,【配信状況】には配信予定なら“upcoming”,配信中なら“live”,配信済みなら” completed”が入る.(その他詳しくは参考の公式リファレンスを参照)   https://www.googleapis.com/youtube/v3/search?part=id&channelId=【チャンネルID】&key=【APIキー】&eventType=【配信状況】&type=video   これを実行すれば,要求した情報がJSONで帰ってくる.   ②     配信コンテンツがあればその詳細情報を取得してデータベースに登録 ①でビデオIDが得られれば,YouTube Data API v3のvideoリソースを使い,配信の詳細情報を得る. ここでも,クォータの削減のためリクエスト内容は最低限となるように,配信タイトルと配信の開始予定時間,実際の開始時間,配信の終了時間だけを要求した.               https://www.googleapis.com/youtube/v3/videos?part=snippet,liveStreamingDetails&fields=items(snippet(title),liveStreamingDetails)&id=【APIキー】&key=&type=video               このようにして,①と②で得られた情報をデータベースに登録しておく.   You TubeではビデオIDが分かれば配信URLやサムネイル画像のURLも分かる為,ここまでの情報でサイトに必要な情報は一通り集められました.後は③のサイト画面の表示部分だけですが,少し記事が長くなるので今回はここまでにしたいと思います. 次回の記事では,実装の③サイトの表示に関する部分とサイトの課題点などを紹介したいと思います.  完成したサイトのデモページ http://harekiru.starfree.jp/youtubelivescheduler.php  参考YouTube Data API リファレンス https://developers.google.cn/youtube/v3/docs

> 内容を見る

NoImage Polygon
プログラミング

YouTube Live Scheduler Part1

こんにちは,「ぷらなりあ」です. 皆さんは普段,YouTubeは利用されていますでしょうか? 自分はかなりの時間YouTubeを使っているのですが,ライブ配信の通知が30分前と直前にしか来ないし,大量のチャンネルを通知設定にしていると,うるさいわりに結局配信予定はあまり頭に入ってこない今日この頃です.そこで,何個かあるお気に入りのチャンネルでテレビの番組表みたいなやつが欲しいと思い,何とかならんかなぁ~というのか私の記事です.(今回の記事は茶番と簡単な概要だけです)  はじめに(茶番)バーチャルYouTuber(VTuber)の人数は昨年11月に1万3000人を超えたらしい. これだけの選択肢がある中で,「複数推し」の人間は数多くいるだろう(単推しの人はすごい) また,その中には複窓視聴の猛者も少なくないとか……正直,私はそんな聖徳太子じみた真似は出来ないシングルタスク人間なのだが,いかに聖徳太子であっても数多の推しの配信予定を1人ずつチェックするのは一苦労だろう(たぶん) 一部の企業勢のように非常に大きな箱では,所属ライバーの配信スケジュールをまとめたサイトを運営している場合もある.しかし,これは本当に一部の箱であり,当然ながら箱内のライバーしか網羅されていない.そこで,箱や知名度に関係なく自分の推しの配信予定を自動でまとめるツールが必要となる(というか欲しい).  要するにまとめるとYou Tube Liveの配信スケジュールを自動でまとめて表示するサイトを作った.              実装概要各You Tubeチャンネルに配信コンテンツがあるか確認配信コンテンツがあればその詳細情報を取得してデータベースに登録データベースから情報を読み込んで画面に表示 使ったものPHP 7.4.13MySQL5.7YouTube Data API v3Bootstrap v4.0.0 完成したサイトのデモページ http://harekiru.starfree.jp/youtubelivescheduler.php   次回はこの実装概要をもう少し掘り下げて,ご紹介したいと思います. 先に,完成したサイトのデモも置いておきますのでよかったらこちらも見てみてください. 

> 内容を見る