週刊「しょうもないWebアプリをつくる」創刊号 – アクセスカウンター

2015/04/04 09:26

突然ですが、新しい企画を始めます。

創刊のご挨拶

週刊「しょうもないWebアプリをつくる」は、僕@kadoppe が（ほぼ）毎週「しょうもないWebアプリ」をつくって公開するという、比較的どうでもいい企画になります。

Webアプリケーション開発の世界には、新しいワクワクするような技術やツールが、毎日たくさん登場しています。そんな技術に少しでもキャッチアップするために、何かしらのWebアプリを開発するきっかけがほしいと思ったので、なんとなく始めてみました。

「しょうもないWebアプリ」の定義はあいまいですが、

あまり役に立たない
結構すぐにつくれる

みたいなものをイメージしています。また、

ソースコードを公開する
だれでもDeployできるよう「Deploy to Heroku」ボタンを用意する（後述）

ことはちゃんとやっていこうと思います。

もしかしたら、たまに役に立つWebアプリをつくることもあるかもしれません。でも、基本的には役に立たないものを作ってつもりです。

さて、前置きはこれくらいにして、今週つくった「しょうもないWebアプリ」を紹介したいと思います。

001: アクセスカウンター

これまでにアクセスした人の数を表示する「だけ」のWebアプリケーションを作りました。いわゆるアクセスカウンターです。アプリには以下のリンクからアクセスできます。

kdp-access-counter

以下、スクリーンショットになります。とてもシンプルな見た目です。配色はすこし気に入っています。画面中央に数字だけ表示するこのパターンは、今後も使いまわしていこうと思います。

access-counter

ソースコードはGitHubで公開しています（kadoppe/kdp-access-counter）。また、Herokuアカウントをお持ちの方は、以下のボタンをクリックすることで、いつでも自分だけのアクセスカウンターを公開することができます。

（半分嘘です。原因がわからないのですが、ボタンを押してデプロイが完了した後、一旦Herokuのインスタンスを再起動しないと動きません。原因分かる方ヘルプミーです。）

サーバサイドの実装

今回のアクセスカウンターは、Node.jsと、その上で動く軽量なWebアプリケーションフレームワーク「Express」を使って実装しました。

個人的に最近JavaScriptを書きたい熱が高まっており、「一度Node.jsでつくったWebアプリをHerokuで動かす体験をしておきたい」と思ったのが、今回のプラットフォーム/フレームワークの選定理由になります。

シンプルなWebアプリをつくるのに、Expressは深くなくてとてもいいですね。他にもNode.jsで使える同様のWebアプリケーションフレームワークが台頭してきているようなので、今後１つずつ試していきたいと思っています。

肝心のアクセス数はkey-value storeのRedisに格納しています。Heroku上でRedisを使えるようにするためのAddonはいくつか存在するのですが、今回はRedis Cloudというものを使いました。

同一人物によるアクセスを何度もカウントしないように、セッションをつかって新規訪問者であるかどうかを判定し、新規訪問者の場合にのみアクセス数をインクリメントするようにしています。セッションストアには、アクセス数と同じくRedisを使っています。

フロントエンドの実装

特に目新しいことはしていません。

Twitter BootstrapのCSSを読み込んではいますが、normalize.css以上の仕事はしていないので、ムダです。

アクセス数をウインドウの上下左右中央に表示するために、以下のようなCSSをプロパティを指定しています。

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

position: absolute;

left: 50%;

top: 50%;

transform: translateX(-50%) translateY(-50%);

今度はFlexboxをつかって同様のレイアウトを表現するのにチャレンジしたいと思います。（参考： CSS flexible box の利用 – Web developer guide | MDN）

テストコード

JavaScriptテストフレームワークのMochaと、HTTPのアサーションライブラリであるsupertestをつかって、エンドツーエンドのテストコードを書きました。

とはいっても、書いたのは200 OKがレスポンスとして返ってくるかどうかを検証する１ケースのみです。

describe('Index Page', function() {
  it("renders successfully", function(done) {
    request(app).get('/').expect(200, done);
  });
});

describe('Index Page', function() {

it("renders successfully", function(done) {

request(app).get('/').expect(200, done);

});

本当はレスポンスとして返ってきたHTMLをパースして内容を検証するテストも書こうと思ったですが、今後の課題としてとっておきます。（Node.jsの世界にRubyでいうCapybaraみたいなライブラリはあるのかな？ご存知の方教えていただけると嬉しいです。）

その他

書いたテストは１ケースだけですが、コミットしたタイミングでCircleCI上でテストが自動的に実行されるようになっています。以下、バッジ。

依存しているNPMモジュールが最新版になっているかどうか（特に未適用のセキュリティアップデート等がないか）をDavidというサービスを使って確認しています。以下、バッジ。

コードの静的解析はCode Climateを使って行っています。書いたコードの行が少なすぎて、あまり意味がないような気もしますが。以下、バッジ。

おわりに

以上、記念すべき「しょうもないWebアプリ」第1号「アクセスカウンター」の紹介でした。

つくってみて、Node.jsによるWebアプリの開発、Herokuへのデプロイ、公開をひと通り体験できたので、個人的には得るものはあったかなぁと思います。こんな感じで、毎回何かひとつでも得ること学ぶことができればいいんじゃない、というスタンスで失踪しないようゆるーく作っていこうと思います。

ここまで読んでいただいた方、貴重なお時間を本当にありがとうございました。ご意見・ご感想、アドバイスなど、この記事のコメントやTwitterアカウント @kadoppe までいただけるとすごく嬉しいです。

それでは、また来週。

企画