2017年4月3日(月)、SFC CLIPはウェブサイトのデザインを大きくリニューアルしました。ここでは、デザインのリニューアルに至った背景を説明しつつ、Sass、Webpack、Dockerなど、新しいデザインを作るために使われている様々な技術を紹介していきます。

7年と6年の歴史

SFC CLIPでは、部員の中でも特に技術に興味のあるメンバーが、「技術部」として、毎日の配信を支えるサーバーの管理、内部向けサービスの開発、そしてウェブサイトのデザインを行っています。私はそこで技術部長として、代表や編集長との調整や、技術選択・作業工程における意思決定を行いながら、一技術部員として多くのコードを書いています。

そんな私たち技術部は、2017年4月3日、SFC CLIPウェブサイトのデザインを大きくリニューアルしました。本題に入る前に、なぜSFC CLIPのデザインをリニューアルするに至ったかを簡単に説明します。

SFC CLIPがウェブページでニュースを配信し始めたのは、13年前の2004年(Internet Archiveによる記録)。学生によるウェブメディアとしてはかなりの老舗に数えられるのではないでしょうか。SFC CLIPがおなじみの下のようなデザインになったのは、ウェブでの配信が始まってから7年後、今から6年前の2011年のことです。

これまで使われていたデザイン。2011年から使われていた これまで使われていたデザイン。2011年から使われていた

その後、記事を管理するシステムをMovable TypeからWordPressに移行してからもこのデザインは引き継がれ、今回のリニューアルまで使われてきました。グレーを基調としたこのデザインが持つ「公式感」は、CLIPが配信する記事に説得力を持たせてきました。一方でこのデザインは、トップページを開いてから1つの記事にたどり着くまでの動線が分かりにくかったり、ある記事を読んでくれた人が他の記事も読んでくれることが少なかったりと、改善できる部分が多く存在したことも事実でした。

しかし昔から使われてきたこのデザインは、とてもメンテナンスしやすいものとは言えず、根本的な改善をすることは難しい状況にありました。サイトデザインを考え直そうという意見は以前から部内でもあったようですが、あくまでもSFC CLIPは一サークル。常に十分な数の技術部員がいるとは限らず、なかなか実現には至りませんでした。しかし昨年度、技術部員がわずかながら増えてきたことや部の方針が変更されたことなどを背景に、本格的にサイトデザインの開発を開始。修正や改善をしやすく、新しいものを作っていきやすい環境を整えることを第一目標に作業を続け、この度ようやくみなさんのお目にかかる運びとなりました。

さて、この記事では、新しいサイトデザインを開発するためにどのような技術が使われているかを1つ1つご紹介していきます。ここから先は技術的な話になっていくので、専門用語がたくさん並びます。興味はあるけど難しくてよく分からないという新入生の方は、ぜひ新歓イベントに来て直接私たちに聞いてください!

SFC CLIP を支える技術

ビルドの流れを示した概念図 ビルドの流れを示した概念図

PHP

SFC CLIPはCMS(Content Management System)としてWordPressを使っています。つまり、ウェブサイトのデザインを開発するということはWordPressテーマを開発するということ、すなわちPHPを書くということです。

個人的に、私はPHPを書くことに対してあまり乗り気になれずにいました。PHPを書かないためには、WordPress以外のCMSを使ったり、WordPressはREST API経由でバックエンドとしてのみ使い、別の言語でフロントエンドを実装したりという選択肢も考えられます。しかし、前述したようにSFC CLIPの技術的なリソースは限られています。そこで今回のリニューアルではWordPressのテーマとして実装し、ロジック部分には極力WordPressの標準機能を使うことにしました。WordPressは必要なほぼ全ての機能を関数1つで呼び出すことができるので、結果的にロジックの実装は最低限に抑えることができました。またブログや企業サイト等で非常に多くの採用例があるので、潤沢な情報源を活用することができます。たくさんの情報がある分、質は玉石混合ですが。

ちなみに、SFC CLIPではランタイムとしてPHP 7を使っています。

Pug

こうして実装はビュー部分に集中することができるようになったわけですが、私がPHPを敬遠する理由の1つにHTMLとPHPを一緒に書いた時の見辛さがあります。たしかに可能な限りPHP部分を薄くできるようにWordPressは豊富な標準関数を備えているわけですが、私はただでさえ冗長なHTMLを書きたくないがために一昨年度からMarkdownで記事を書けるようにしたばかりです。生のHTMLを書きつつPHPのロジックまで混ざるようなものを書いていては、モチベーションの低下が甚だしいことこの上ありません。

そこで、新しいデザインのHTML部分はPug (旧名: Jade)で書くことにしました。PugはJavaScriptで実装されているテンプレートエンジンですが、PugをPHPにレンダリングしてくれるPug-PHPというライブラリがあり、最近もそれなりにメンテナンスされています。インラインでPHPを書くこともできるPug-PHPを用いることで、ロジックとビューを適切に分離し、簡潔に分かりやすく書くことができています。またキャッシュ機能もサポートされているので、オーバーヘッドも最小限に抑えることができると考えています。

Sass・PostCSS

HTMLをPugで書いていれば当然と思われるかもしれませんが、スタイルの記述も直接CSSを書いてはいません。

スタイルの記述には、SassPostCSSの2つを使っています。当初はPostCSSにプラグインを追加していく形でスタイルを書いていたのですが、各プラグインのメンテナンス状況がバラバラなこともあり、柔軟性より安定性を取る意味でSassによる記述に切り替えました。現在はスタイルをSCSSで書き、Autoprefixerによるベンダープレフィックスの付加とcssnanoによるminify(圧縮)のみPostCSSで行っています。

JavaScript (ES6)

新しいSFC CLIPではバス時刻表機能も再実装したのですが、この部分はクライアントサイドでJavaScriptによるデータ更新・レンダリングをしています。バス時刻表機能自体は130行程度の小さなものですが、アロー関数をはじめとするモダンな構文を使いたいのと変数の巻き上げなどに余計な時間を取られたくないので、ES6で書いてbabelでトランスパイルしています。

またES6とは関係ないですが、記事中の画像を拡大する機能を提供するための(新しいSFC CLIPでは画像をクリックすると拡大できます!)lightgallery.jsや、アンカーリンクの移動を滑らかにするsmooth-scrollといった外部ライブラリ、さらにNormalize.cssFont Awesomeといった外部スタイルを導入するためにもnpmを用いています。

Webpack

さて、SassにPostCSSにES6に、となるとビルドが大変じゃないかと思われる方もいらっしゃるかもしれません。その通り、ビルドが大変です。

初めはpackage.jsonscriptsbuild-cssbuild-js…などと書いていましたが、Windowsでは&&||が使えない場合もあることなどを考慮してShellJSでビルドスクリプトを書いていました。しかしメンテナンス性が次第に失われていくことや、Node.js API経由ではwatch(監視機能)が使えないものがあることなどを理由にWebpackの導入を決めました。Webpackも初期の学習コストはある程度高いかもしれませんが、スクリプトを書くよりはコンフィグを書く形の方が理解しやすく記述の統一もされやすいと考えています。また、ビルドはwebpackコマンド1発ですし、当然ですがWebpack用のloaderが存在していれば必然的にwatchもできます。

Webpackではcss-loadersass-loaderpostcss-loaderを用いてスタイルをビルドしています。ここで、Webpackの依存解決機能を利用してnode_modulesからNormalize.cssやFont Awesomeをスタイルにインポートし、同時にfile-loaderurl-loaderで必要なリソースも埋め込んだり書き出したりしています。babel-laoderによるES6のトランスパイルは、せっかくWebpackを使っているし、くらいの気持ちでやっているところもあります。

現段階では、Webpackのエントリーはindex.jsにしながら、CSSはExtractTextPluginで別ファイルに書き出しています。JavaScriptで後からstyleタグを差し込んだ方が効率がいい面もあるとは思うのですが、一瞬スタイルが適用されていないまま表示されてしまう、いわゆるFOUCを起こしたくなかったのでCSSは別ファイルとして書き出して同期的に読み込むようにしています。

CircleCI

新デザインの開発ではCircleCIによるCIを導入しています。全てのプルリクエストは必ずpug-lintstylelint、そしてPHP CodeSnifferによる確認を受け、通過しないとマージできないように設定されています。また、style.cssをはじめとするビルドされて書き出されるファイル(アーティファクト)は.gitignoreでバージョン管理下に置かれないようにしていますが、マージ後は自動的に最新のmasterブランチがCircleCIによりビルドされ、buildブランチにアーティファクトと共にプッシュされるようになっています。これにより、サーバーにデプロイする際はbuildブランチからpullしてくるだけでよく、ビルド時間とサーバーにビルド環境を導入する手間が省けます。そのうちビルド完了時にWebhookで自動的にデプロイするようにしたいと思っています。

ちなみにTravis CIも試したのですが、Node.jsもPHPも使うテーマ開発では、各言語ごとに環境が切り分けられているTravis CIよりも1つのUbuntuイメージとして全てが含まれているCircleCIの方が向いていると考えました。Travis CIでは時々キューが詰まったことも理由の1つですが、よりよい使い方があったのかもしれません。

Docker

テーマをローカル環境でデバッグするためには、Dockerを使っています。docker-composewordpress:4.7-php7.0-apachemysql:latestを引っ張りつつ、nginx-proxyを使ってオレオレ証明書によるローカルHTTPSにも対応しています。

また、composerやWebpackもDockerコンテナ上で走らせることができるため、理論上Dockerだけインストールすれば開発環境が整います。理論上は、ですが。

Ansible

新デザインの開発と直接は関係ありませんが、実は新デザインを公開すると同時に、SFC CLIPのVPSをUbuntu 14.04から16.04にアップデート(再インストール)しました。アップデートの際、今サーバーに何がインストールされていてどの設定ファイルがどう変更されているのかを把握するために非常に難儀した反省から、再インストール後はほとんど全てのソフトウェア追加・設定変更をAnsibleを用いて行っています。たとえばnginxのインストールでは、バージョン番号とコンパイラフラグを前回ビルド時と比較し、変更があれば自動的に外部モジュールの取得と再コンパイルを行うようになっています。またsystemdへのサービスの登録や、conf.dへの設定追加、その後のnginxのリロードも一連のタスクとして記述しています。

もちろん、普通に管理を行うよりも手間がかかり決して時間短縮ができるわけではないですが、どこをどう変更しているのかが設定ファイルという形で確認できるのは保守性を担保する上で大きなメリットだと考えています。

なお、Playbook(Ansibleの設定ファイル)のデバッグにはVagrant+VirtualBoxを用いています。余談ですが、私は研究でetcdのRaft実装を使ったこともあり、HashiCorp社には足を向けて眠れません。

これからのSFC CLIP

ここまで新しくなったSFC CLIPを支える技術を紹介してきましたが、コードがなくては理解しにくいかもしれません。実はSFC CLIPでは、近日中に最優先のバグ修正とライセンスの整理、そしてセキュリティの確認をした上で、テーマの全てのソースコード、デバッグ用のDockerfile及びdocker-compose.yml、そしてAnsible Playbookをオープンソースとして公開する予定です。公開することで外部の方からアドバイスをもらえたり、他の方が上で述べたような技術を使うときの参考になればと思っています。

そしてなにより、SFC CLIP技術部は一緒に開発してくれる仲間を募集中です! 既に高い技術を持っている必要は全くありません。これからHTMLやCSSを勉強していきたい人から、普通にコードを書くだけではなく上のような技術を使って効率良く開発してみたい人、あるいはプログラミングはしたくないけどデザインや使いやすいインターフェイスを考えたい人まで、何かに興味があればどんな人でも大歓迎です。実際、この新しいデザインの最初の開発環境を一緒に整えてくれたのは当時入ったばかりの新入生でしたし、インフラ周りの大部分は、セキュリティが専門の留学生が協力してくれたおかげで実現できました。どんなことに興味があっても、どんな経験を持っていても、活躍する場は必ずあります。なにせ人がいないので。

ようやく公開できた新デザインもまだまだ不十分な点は数多くあり、課題は山積しています。今回の公開は全くもって完成を意味するわけではなく、これから良くしていくための足場を作り終えたに過ぎません。ここからどうSFC CLIPが良くなっていくか、どんなSFC CLIPが作られていくかは未知数です。興味がある新入生のみなさん、一緒に新しいSFC CLIPを作っていきませんか?

もちろん、新しいSFC CLIPに自分の記事を載せたい人も募集中です! 詳しくは新規メンバー募集ページをご覧ください。また、SFC CLIPをご利用の皆様には、ぜひ忌憚のないご意見を頂きたく思っています。ご意見やご要望はお気軽に contact@sfcclip.net までお寄せください。

新しくなったSFC CLIPを、これからもよろしくお願いします。