雑なこと

yukicon-historyを作った - poのブログで書いた以外のことを書きます。

料金

Flexible Environmentを使うと、どうやっても料金が発生しそうな感じです。いまは1日300円くらいかかってます。高すぎ。

稼働していない時はインスタンスをオフにしておけばコストが抑えられそうですが、Flexible環境(の、少なくともrubyのランタイム)では常時1つ以上のインスタンスが立っていないといけないみたいです。

Standard Environmentを使って、Always Freeの範囲に収まるように稼働させれば、無料にできるはずです。

しかし、Standard環境ではrubyが使えないので、そのまま移行はできません。

無料トライアルでもらえる30,000円分のクレジットが尽きるまでにはStandard環境に移さないと終わりですね。

Heroku

GCPというか、GAEにデプロイするのに3日くらいかかった*1んですが、HerokuならGetting Started with Rails 5.x on Heroku | Heroku Dev Centerを見れば5分くらいで終わります。しかし、無料プランで使えるDBのrecord数の最大が10,000で、微妙に超えてしまったので今回は使えませんでした。

実際に上限を超えると、

10,000行超えてるから、減らさないとアプリ止めるよ

みたいなメールが来ます(来ました)。

スクレイピング

スクレイピングというか、パースというか分かんないですが、今回のケースでは結構簡単でした。

  1. Chromeで順位表のページを開いてF12で開発者ツールを開く
  2. 取りたい情報付近のHTML Elementで右クリック、XPath*2をコピー
  3. NokogiriでXPathを使って良い感じにやる

Nokogiriのドキュメント読んでも全然分かんなかったんですが、サンプルコードからエスパーすると適当に使えます。正規表現もちょっと使えるようになりました(1文字以上の任意の文字、とか)。

rails

railsはver. 5からAPIモードができたみたいで、通常のと何が違うのか分からないけど、それを使いました。rails new my-app --apiとすればいいです。

はじめブラウザからアクセスして開発・デバッグしていたのですが、いちいちfaviconが無いことを怒られて嫌になったので途中からcurlコマンドを使いました。今まで、perlの亜種みたいなのだと思ってました(違いますね)。

curlで取得したjsonはそのままだと人間に見にくいので、jqを使うと多少ましになります。curl http://example.com | jqというふうに使えます。

React+TS

ライブラリの使い方がよく分からなくても、VSCodeでF12を押して「定義へ移動」を使いまくるとなんとなく使えることが多いです。

ただ、型定義ファイルが用意されてないとつらい(はず)です。

react-router-dom

/user/[:id] とかのルーティングや、example.com/?name=bob とかのquery parameterを使えるようにするやつです。本家はreact-routerなんだけど、たぶん上のをnpm installすると自動で付いてくるんだと思います。

アプリ全体を<BrowserRouter></BrowserRouter>で囲っておいて、コンポーネントをrenderするときに<Route component={MyComponent}/>とします。そうすると、propsとしてlocationやhistoryが渡されるので、props.location.searchで文字列?name=bobが取り出せます。また、query parameterを付与するときはprops.history.push({search: 'name=bob'})などとします。

javascript

axios

HTTPリクエストをすると、処理が非同期*3になってわちゃっとするんだけど、Promiseってのを使うと解決できるそうです。でもPromise使うのむずいから、axiosができました。捏造かもしれん。

axios.get('http://example.com').then((results)=>{ ... })

とすると、resultsの中に応答結果が入って、それを使って{ ... }の部分で処理ができます。リクエスト1回だけならこれでいいんだけど、複数回したいときとかどうするのか分かってないです。

CSSフレームワーク

Semantic-UI-React

Semantic-UI を使いました(見た目が好きなので)。

サンプルは<Form.Input />とかになってるけど、<FormInput />ってしないとちゃんと動かない気がします。

onChange / handleChange のヘルパーっぽい機能があってちょっと助かりました。

*1:そして、インスタンス数の設定とかをするのにも3日くらいかかった...

*2:XPathが何かは知らない...

*3:並行処理とは違うの?

yukicon-historyを作った

はじめに

yukicoderでは隔週くらいで金曜にコンテストが開かれています。

毎回のコンテストでの自分の成績が一覧できると便利です。

yukicon-historyを使うと、各コンテストでの

  • 自分の順位
  • 自分の解いた問題数

などが確認できます。

Demo

f:id:poyopoyoyon:20180608203403g:plain
yukicon-historyのデモ

説明

入力フォームに yukicoder でのユーザ名を入力して、Submitボタンを押すとコンテストの履歴が表示されます。

ハイライトされている行は参加したコンテストを表しています。

各列は

  • 日付:コンテストが開催された日と開始時刻
  • コンテスト:コンテスト名
  • 順位:自分の順位 / コンテスト参加者数
  • solved:解いた問題数 / 出題された問題数
  • writers:問題作成者(スペース区切り)

を表しています。

機能

表の右上のトグルボタンを押すと、自分の参加したコンテストだけ表示・全て表示 の切り替えができます。

構成

サーバサイド

Ruby on Rails

あらかじめyukicoderのコンテスト順位表のページをスクレイピングして、DBに入れておきます。 リクエストが来たらDBからデータを取ってきて、jsonで返しています。

フロントエンド

React+TypeScript

create-react-app my-app --scripts-version=react-scripts-ts (https://github.com/wmonk/create-react-app-typescript]) で環境構築が終わります。

インフラ

Google Cloud Platform

railsのほうはGAE (Google App Engine) のFlexible Environmentで動いていて、フロントのほうはGS (Google Cloud Strage) にファイルを置いています。

おわりに

1ヶ月くらい(2018年6月末くらいまで)は動いているはずです → yukicon-history

平方分割の可視化

https://poyo-poyo.github.io/sqrt-decomposition/

square root decomposition のアニメーション
sqrt-decomposition