"junkato.jp" Webサイト

2018
関連キーワード: Design

デザイン

このWebサイトは、ユーザビリティ、メンテナンス性、そして速度を念頭に設計されています。

ユーザビリティ

このWebサイトはSemantic UI CSSフレームワークを利用して作られており、さまざまな閲覧環境を想定したレスポンシブデザインとなっています。

また、色はモノトーンを基調としてアクセントカラーにアドニスブルーを採用し、肝心の内容が引き立つよう控え目に配色されています。

メンテナンス性

下で詳しく触れているように、Webサイトは専用に開発されたデータ構造を持ち、データが更新されるたびに動的にビルドされるようにできています。

このビルドパイプラインにより、メンテナンスとテストが容易になっています。

速度

このWebサイトはほとんどが静的なHTML/CSSファイルからなっており、サーバ側でも、クライアント側でも、画面に描画される前に必要な処理が少なくて済むように設計されています。

唯一の例外は、読み込みに多少時間のかかるWebフォントFiraNotoですが、これは綺麗なタイポグラフィのためには外せないものです。

コードとデータ

このWebサイトはほとんどが静的なHTML/CSS/JavaScriptファイルの塊です。そうしたファイルは、GitHubリポジトリのmasterブランチに何かがpushされるたび、コードとデータをもとにビルドされています。ビルドパイプラインはTravis CI上で実行されています。

ビルド中は、以下のファイルの内容が何度も参照されています。もし似たようなWebサイトを作ってみたい場合、データ構造を参考にしてみてください。また、このポートフォリオ上の情報を機械的に処理したい場合にも使えるかもしれません。

histories.json
All of the "Recent updates" entries
publications.json
Publication history (generated from junkato.bib)
awards.json
All of the received awards information
talks.json
All of the invited talks information
projects.json
All of the projects information as well as the project tags information

謝辞

このWebサイトはさまざまなOSSプロジェクトを利用して開発されています。README.mdに書いてあるように、以下のツール、ライブラリ、プログラミング言語が主に使われています。その他も含めたすべての依存ライブラリの一覧はpackage.jsonをご覧ください。

Gulp v3.9
for managing build pipelines
Webpack v3
for packing JavaScript code
Babel v7
for transpiling JS code to be compatible with outdated browsers
Pug v2
for easier HTML coding
LESS
for easier CSS coding
TypeScript v2.6
for easier JS coding