本サイトで使った技術を一通りざっくり紹介したいと思います。google先生に聞いたりする時のキーワードなどにご利用下さい。
基礎技術
- HTML5
- CSS3
- JavaScript
- トップ絵のアニメーション、UIフレームワークの内部処理など
- ECMAScript5 相当
- にしているはずですが、無意識にECMAScript6規格を使ってしまっている可能性があります
- SVG
- トップ絵の描画に使っています
- Node.js
- 本サイトの生成系の基礎
Hexo
Hexo は、基本的にはブログ形式のサイトを生成してくれる、静的サイトジェネレータの一種です。本サイトは、Hexoのテーマである bootstrap-blog をベースに変更を加え、ホームページっぽく見えるように作っています。
ページのテンプレートには、元のテーマで使用されていた EJS に加えて pug (旧名:jade) を使用しています。
BootStrap
BootStrap は、BootStrapが定めるルールに従ってHTMLを書くことにより、レスポンシブデザインのサイトを比較的簡単に構築することが出来る、CSS/JSフレームワークです。テーマのカスタマイズには、1pxdeep を使っています。細かいところは手動で別のCSSファイルを作って調整しています。
JavaScriptライブラリ
- Snap.svg
- SVG構造を強力に操ることができるライブラリ
- トップ絵の描画及びアニメーションに使用しています