[その他] ポートフォリオサイトを作ってみた。こんな技術ポイントを気にして作りました。

こんにちは、@yoheiMuneです。
お知らせ続きになってしまったですが、、前々から作ってみたいと思っていたポートフォリオサイトを作りました。 このブログでは、ポートフォリオサイトの内容というよりは、ちょっとだけこだわった実装内容を紹介したいと思います。


http://www.yoheim.net/portfolio

ポートフォリオサイト制作でちょっとこだわった実装ポイント

今回ポートフォリオサイトを制作するにあたり、最近のフロントエンドエンジニアとして貯めた知見を生かしたいと思い、いくつかこだわった実装がありました。
今回こだわったポイントは以下の点です。

1. HTML5 Canvasを素で使いつつ、何か面白いものを作りたい
2. jQueryに頼らずに作る
3. 初期表示が速いサイトを作る

以下では上記のポイントをそれぞれ記載したいと思います。

１、HTML5 Canvasを素で使いつつ、何か面白いものを作りたい

オシゴトのスマホ案件でアニメーションを制作することも多くありますが、最近はCanvasを使ってないなぁと実感してました。 今回はCanvasをcreateJSなど使わずに素で使って何か実装したいと思いました。
素で実装すると、アニメーションループとか描画とかをゴリゴリと書かなかればならなくて大変なのですが、勉強出来る部分もありました。


例えば、イベントループでは、setTimeoutやsetIntervalよりもrequestAnimationFrameを優先して使う。
例えば、描画する設計として、テキストを構成する点がデータの中心となるような設計をする。enchantJSなどの設計方針です。


技術的な要素や設計的な要素で、色々と学ぶ点がありました。細かい点は、今後のブログで書けたらいいなぁと思います。 Canvasの実装内容は、https://github.com/robhawkes/google-bouncing-ballsを参照しつつ実装しました。robhawkesさんには大感謝です。

２、jQueryに頼らずに作る

仕事では常にjQuery（やそれを代替するzeptoJSなど）を使っていて、最近生のJSを触ってないなぁと感じる今日この頃でした。
jQueryを使わないことで、JSのサイズがすごく減ってよかったですし、jQueryにあるaddClassやremoveClassなどの実装も、jQueryを参照しながら作ることが出来てよかったです（addClassの実装は以外と面倒だと気づいた）。

そして、何か困ったら「jQueryだとどう実装してるんだろう」とjQueryを参照することが出来たので、良いコードリーディングも出来ました。

３、初期表示が速いサイトを作る

こだわった最後の点が、サイトの初期表示の速度です。 出来るだけ速くしたいと思い、以下のことを行いました。

• JSとCSSをミニファイする。gruntJSを使ってファイル保存の度に、行います。
• JSとCSSは外部ファイルとせずHTMLに埋め込む。実装時点ではJSやCSSファイルとして存在しますが、PHPでindex.phpにincludeします。
• HTMLはPHPでgzipして、ファイルサイズを削減する。
• google Analiticsをheadタグ最後ではなく、body閉じタグの直前に置く。headでレンダリングをブロックされるのが嫌だった(1秒くらいかかる）ので、アクセス取りこぼししてでも初期表示を速くしたいと思いました。

セオリーから外れる部分もありますが、初期表示の高速化のため、上記のような対応を行いました。
あと余談ですが、URLに「debug=true」とクエリパラメータを付けると、ミニファイされていないJSやCSSがindex.phpに書き出されたり、console.debugが表示されるようになったりと、実装内容を見ることができ、デバッグもできますw。

最後に

デザイナーさん達のポートフォリオサイトからすれば、かなりショボショボで情報を貼付けただけですが、自分のポートフォリオサイトが作れてよかったぁ。
IEで表示が違うとか、Android2系で表示が遅いとか、FirefoxでCanvasアニメーションが動かないとか色々と不具合はありますが、フロントエンド部分をこだわれてよかったヨカタ。

技術的に紹介できる部分は、今後ブログで紹介させて頂ければと思います。
最後までご覧頂きましてありがとうございました。