このページをPadrinoで作りなおした

created: 2016/02/27 19:11

仕事に就く前にこのページをPadrinoで作り直しておくことにした。

もともとSinatraで雑に作っていてテストも何もなかったが、Padrinoはプロジェクトを生成するとテスト等の環境を適当に設定してくれるので、テストを書いたりSequelを作ってDBの構成をマイグレーションするようにした。

テストの一部にはRack::Testも使うようにした。これで、例えば「未ログインユーザーが特定のページ群にアクセスした際は全てトップページにリダイレクトされること」等をテストしている。結構便利だ。

コードはGitHubのプライベートリポジトリに入れてCircleCIの設定をした。これでコードがpushされる度にテストが走る。

CircleCI

フロント、つまりhtmlとcssもちょっと気合いを入れて書き直した。
もともとモバイル環境から見づらいということは知っていたので、ちょっと調べてみると、今時はcssでメディアクエリというものが使えて、いくつかの条件によって要素に適用するスタイルを切り替えることが出来るらしい。
これを使って、ある程度幅が狭くなるとサイドバーを非表示にするようにした。
少なくとも手元のNexus6ではちゃんと動いているようだ。
これとmetaタグでviewportの設定をしてあげると、そこそこ見れるものになった。

もう逃げない。HTMLのviewportをちゃんと理解する - Qiita

一通り書き終えてからGoogleのPageSpeed Insightsにかけると、
さすがに最初から100点は無理だったが、アドバイスに従ってもろもろを修正するとトップページは結構簡単に高得点になった。

PageSpeed

ちなみに1点の減点はGoogle Analyticsに必要なjsの読み込みです。知るか。