【Repを支える技術】フロントエンド編
こんにちは！
「Repを支える技術」第三弾です🎊今回はフロントエンド編！
文系学生が一から作ったサービスのフロントがどうなっているか、いくつかのポイントを紹介しようと思います。
はじめに
Repは正式名称「Rep立教大学シラバス検索システム」という名前です。その名の通り立教大学のほぼ全ての授業データを収録しており、立教生は簡単に時間割を組むことができます。
Repは学生である僕が1人で開発を始めたサービスです。運営者（メイン開発者）が学生であることは、ユーザー視点の獲得や一次情報を得るための手段として重要な意味を持ちます。
故に僕が卒業した後にどういう運営体制にするかはいまだに決まっておらず、場合によっては創業者()である僕の手を離れて行くことも視野に入れて開発する必要があります。
というわけでRepの設計思想は基本的に 普通 になることを心がけています。
このことを理解した上で、広い心で続きをお読み下さい🙇
フレームワーク
- Bootstrap
- Turbolinks
大したフレームワークではいのですが、これしか使ってないので書かせてください😅
そもそもhtmlやcssの管理はサーバーサイドがRailsなため、そのデフォルトであるviewsやassetsを利用しています。
なるべく開発しない
Bootstrapは優れたcssフレームワークだと思っています。「Bootstrap感が出るのが嫌だ」という意見も散見されますが、サービスターゲットが学生のためそう思うユーザーはいないようです。むしろ可愛いという評価を一度得たことがあるくらいです。
さて、「なるべく開発しない」ですが、これはつまりBootstrapのなるべく利用するということに尽きます。
Bootstrap · The most popular HTML, CSS, and JS library in the world.
Bootstrapを利用すればレスポンシブデザインはもちろん、ちょっと実装が難しそうなモーダルなども簡単に実装が可能です。
Bootstrapを使うことで、彼らの公式ドキュメントがそのままHowTo本になってくれて開発者によるデザインの差分が減る、と信じています。
と書いていて思ったのですが、流石に少しずつcssの量が増えてきています・・・。頑張って減らそう！
速さを求めて
Repでは快適な授業検索のため速度を重視しています。そのために採用しているのがTurbolinksです。TurbolinksはRailsのデフォルトのgemですが、その独特の挙動からgemごと捨て去る方が多いヤツです。
GitHub - turbolinks/turbolinks: Turbolinks makes navigating your web application faster
しかしその機能はかなり実用的です。
- 遷移はajaxのように非同期で取得
- head内の後からマージ
- body内だけ差分更新
- 一度訪れたページはキャッシュ
これらの結果、
Repは履修期間では、1訪問で平均12ページくらい遷移してくれます。授業を検索するツールとして利用していただくためにTurbolinksは高いUXを提供しています。
度々このブログでもTurbolinksについて言及していますが、仲良くなるととても便利ぜひ皆さんも導入してみてください！
デザインはオレオレ
Repでは専属デザイナーはいません。学生エンジニアがひとりでサービスを始めようとすると、デザインで困るということはあるあるです。
僕はエンジニアでありデザイナーではないですが、ユーザーや情報の優先度のことを考えることはできます。その思考の中で精一杯デザインに落とし込んでいます。
ここはずっと課題となりそうですが、自分や身近な人間がユーザーなので使いづらいところはバンバン気づくことができます。やっぱり自分がユーザーであるサービスを作るの最高！😆
PDF生成
Repには時間割をPDFにして出力する機能があります。
これはHTMLをPDFにするライブラリをしようしています。（若干サーバーサイドのお話）
次のgemを利用することで、HTMLをPDFにすることができます。
gem 'wkhtmltopdf-binary-11' gem 'wicked_pdf'
意外と簡単に導入ができます。HTMLやcssもそのまま利用できるので、かなり自由度の高いデザインを実現できます。
AMP
RepではSEO対策とUX向上のためAMPを導入しています。
AMPの開発ではなるべく既存のリソースを利用しています。Repは元々jsや画像が少ないので、少ない修正で実装できました。
Googleが自ら促進しているだけあり、順調にインデックスされており、かなりのユーザーがAMPページ経由で訪れてくれています。しかし、開発コストが増すことも事実なので、効果を見ながら継続するかを決めようと思っています。
最後に
いかがでしたでしょうか。
エンジニアだけで運営するにはcssフレームワークを使用するのは悪くない選択です。開発速度をフロント周りのせいで落とすのは勿体無いので、使えるものはガンガン使っていきましょう。
PDF生成やAMPなど多少トリッキーなこともしていますが、ベースは 普通 であること。
以上、Repのフロントエンド事情でした！
