@ymyzk です. camph.net は CAMPHOR- の Web サイトで, CAMPHOR- や CAMPHOR- HOUSE の説明や最新の活動状況を公開しています. 約1ヶ月でデザインと実装を行い, 昨年末 (2014/12/29) にリニューアルを行い, 以来少しずつアップデートを重ねながら運用を続けています.
この記事では camph.net で利用している様々な技術について紹介します. 新しく Web サイトの構築を考えている方の参考になれば幸いです.
フロントエンド
フロントエンドの実装の特徴としては, スマートフォンやタブレットなどの様々な画面サイズに対応するためレスポンシブデザインを採用していることが挙げられます. また IE8 以下のサポートを切り CSS3 を使ったアニメーションを行うなど少し思い切ったことをしています. この点については IT 系のコミュニティの Web サイトであることも大きいと思います.
Bootstrap 3
Bootstrap 3 はフロントエンドのフレームワークです. グリッドシステムやナビゲーションバー, カルーセルなどに全面的に Bootstrap を採用しています.
一見 Bootstrap を使っているように見えないかもしれませんが, これは Bootstrap をカスタマイズすることによって実現しています. カスタマイズすることによって, デザインにあった CSS を出力できるだけでなく, 不要なコンポーネントを外すことでファイルサイズの軽量化を図っています. カスタマイズした内容は JSON ファイルで出力されるため, これをバージョン管理しておくことで将来さらにカスタマイズを加える場合も容易になります.
FullCalendar
FullCelendar は簡単に綺麗なカレンダーを描画することができる便利な JavaScript ライブラリです. 今年の4月に新しく追加したスケジュールページで利用しています. JSON などのフォーマットがきちんと整ったデータがあれば, 少しコードを記述するだけで簡単にカレンダーを表示することができます.
画面幅が狭い場合も単純にカレンダーの幅を狭くして表示するため, モバイル対応はあまり優れていません. camph.net でも今後モバイル対応について改善していきたいと考えています.
retina.js
retina.js は高解像度の端末で, 自動的に高解像度の画像を読み込んで差し替えてくれる JavaScript ライブラリです.
最近はスマートフォンやタブレットだけでなく PC でも高解像度の端末が増えつつあり, これらの端末でも美しく Web サイトを表示する必要性が高まっています. できる限り SVG やアイコンフォントといったベクター形式の素材を用いることで対処できますが, 写真はベクター形式で提供することが困難なため retina.js を利用して, 対応しています.
Lightbox
Lightbox は写真や動画を拡大してモーダル表示してくれる JavaScript ライブラリです. イベントや CAMPHOR- HOUSE の写真を拡大表示するために使用しています. 昔からよく利用されているライブラリですが, 現在もきちんとメンテナンスされており安心して使うことができます.
Font Awesome
Font Awesome はアイコンフォントです. Web フォントとして簡単に利用することができます. メンバーページのリンクに利用しています. Bootstrap の Glyphicons には含まれないようなアイコンも入っているので, アイコンフォントを探している場合は一度見てみると良いかもしれません.
Bower
上記のようなフロントエンドのライブラリ管理には Bower を用いています. 詳細はバックエンドの節で記述します.
バックエンド
バックエンドは Python + Django で構築しています. このような選択をした理由の一つとして, CAMPHOR- にはこれまで PHP や Ruby, Node.js で提供しているサービスはありましたが, Python で提供しているサービスがなかったという点が挙げられます.
Django
Django は Python で最もよく利用されている Web フレームワークの一つで, しばしば Ruby on Rails と比較されます.
リリース時は当時の最新安定版の Django 1.7 を利用していましたが, 現在は現時点の最新安定版の Django 1.8 にアップデートしています. Django は標準で強力な管理画面を提供してくれるため, これをメンバーやイベントといった情報の管理に利用しています. 管理画面や認証機構を一から構築しなくて良い点は, 時間が限られているプロジェクトでは非常に魅力的です.
イベント情報管理画面のスクリーンショット
Python
Python はよく Ruby と比較される汎用のスクリプト言語です. 大きく Python 2 と 3 に分けられますが, 現在 Python 3.4 を採用しています.
リリース時は Python 2.7 で動作していましたが, この時から将来の Python 3 への移行を前提にコードを記述していました. 初めから Python 3 を採用しなかった理由は大きく2つあります. 1つは本番環境で用いるディストリビューションの Python 3 パッケージが古いため, 新しくなるのを待っていたこと. もう1つは Django の Python 3 サポートは比較的新しく約2年前の 1.6 から行われたため, 関連ライブラリの Python 3 対応や安定性の向上を待っていたという点です. 実際に Python 3.4 への移行の際には, コードの編集はほぼ0でサーバーの設定の変更のみで移行することができました.
django-bower
django-bower は Django から Bower を利用することができるライブラリです. Django の設定ファイルに bower.json の dependencies にあたる部分を記述して利用します. Django の静的ファイル管理とうまく連携してくれるため, Bower 単体で利用するよりも使いやすいと思います.
django-compressor
django-compressor は CSS/JS ファイルの結合・圧縮・インライン化・キャッシュを行えるライブラリです. テンプレート中の HTML タグを {% compress js %}{% endcompress %} で囲うだけで処理を行ってくれます. リクエスト時に処理を行う方法や, 事前に処理を行って保存しておく方法を選べるほか, 圧縮方式を柔軟に設定したり, CoffeeScript から JavaScript への変換を行ったりすることもできます.
sorl-thumbnail
sorl-thumbnail は Django でサムネイルファイルを生成するためのライブラリです. イベントやメンバーの画像など, 管理画面からアップロードした画像からサムネイルファイルを生成するために用いています. 高解像度の端末用に @2x のサムネイルも同時に生成することができ, 前述の retina.js と組み合わせて, 高解像度のサムネイル画像を提供しています. 画像処理のバックエンドに Pillow や ImageMagick, GraphicsMagick などが選択でき, それぞれ画質や処理時間に差があります. どのバックエンドを選択し, どのようなパラメータでサムネイルを生成するのが良いのかはさらにチューニングを要する部分だと考えています.
インフラ
Debian
camph.net は Debian を OS としたサーバー1台で提供しています. リリース時は Debian 7 wheezy を利用していましたが, 現在は Debian 8 jessie に移行しています. Debian を利用している理由はオープンで安定しているということと, 後述する各種サーバーアプリケーションのパッケージを標準で提供していることが挙げられます.
nginx
HTTP サーバーとして Nginx を利用しています. Nginx は静的ファイルの提供, WSGIサーバーへのリバースプロキシ, SSL/TLS による暗号化の終端を担っています. Nginx を採用した理由としては基本的に上記の3つの役割を果たせれば良いという点と, SPDY に対応しているという点が挙げられます.
uWSGI
WSGI サーバーとして uWSGI を利用しています. Django アプリケーションをホスティングする際にメジャーな選択の1つです.
MySQL
RDBMS として MySQL を採用しています. イベントやメンバーなどの情報をここで保持します.
Python から MySQL へアクセスする際のドライバーとしては mysqlclient を採用しています. mysqlclient は Python 3 にも対応しており, Django のドキュメントでも推奨されています.
memcached
キャッシュシステムとして memcached を採用しています. camph.net ではページが変更される頻度は低いため, レスポンスをキャッシュすることでかなり高速化することができます. また, サムネイル生成や静的ファイルの圧縮においてもこのキャッシュを利用しています.
Python から memcached にアクセスする際のバインディングとして pylibmc を採用しています. pylibmc は Python 3 にも対応しています.
まとめ
以上のように, camph.net は OSS を組み合わせて開発されています. このように1つのサービスで利用されている技術をまとめている記事はあまり見かけないので, 新しくサービスを作成しようとしている方の参考になれば幸いです.
また, この記事を読んで CAMPHOR- に興味を持った方は, ぜひ一度 CAMPHOR- HOUSE にお越しください.
