ashiras xyz のサイトをリニューアルしました。リニューアルはだいたい2時間くらいで完了でしょうか(やっぱYEOMAN使うと早い)。「ashiras.xyz」というのは自分が仕事するのに使っている所謂「屋号+.xyz」です。「xyz」の意味ですが、アルファベットの最後なので「もう後がない、助けて」という意味ですハイ。
使っているライブラリは結局「Twitter Bootstrap」だけです。JavaScriptはコンソールに「ashiras.xyz」を出力する一文だけです。 「何故ここまでシンプルにしたか」ですが単純に書くことがないから、ブログは「はてブロ」だしソースは「github」だし、連絡先は「twitter」。リリースは「npm」使ってますし。わざわざ書くことが無いのでシンプルに。
気を使った部分
メニュー構成が
- HTML5 Experts.jp
- github
- blogs
となっているのですが「HTML5 Experts.jp」は大文字入り、それ以外が小文字なので少しバランスが悪く見えました。なので「HTML5 Experts.jp」のフォントサイズを「1px」落としてます。あとはTwitter Bootstapのテンプレートをそのまま。
ちなみに利用している画像は自分で撮った写真で場所は鹿児島中央駅近くの踏切です。
性能測定
PageSpeed Insights
ペライチサイトなので早いでしょうということでいつものように(PageSpeed Insights)で性能測定しました。 「Twitter Bootstrapありがとう」という感じでユーザエクスペリエンス言うことなしらしい。
Web Wait
WebWait(WebWait - Benchmark Your Website)はどのくらいなのか?
めちゃめちゃ早くないですか?(ペライチサイトなので)
Offline Web Applicationの利用
Offline Web Applicationで人類には難しすぎたとうわさされているApplication Cacheを利用しています。Application Cacheには「manifest」ファイルの定義が必要なのですがこれをメンテナンスするのが大変、大変なことはすべてgruntにお任せする方針なので「grunt-appcache」を使っています。なので基本的に「manifest」ファイルのメンテナンスはしません。
Application Cache使ってますのでオフラインでも見れます。当たり前ですがオフラインのときにリンク先は行けません。
デプロイの自動化
Github Pagesでサイト公開していますが通常gitコマンドで作業します。これも面倒なのでgruntタスク化しました。「grunt-gh-pages」です。
$ grunt deploy
で一発リリース
ソース
ソースはこちらにありますので興味があれば、適当に書いてる部分多しです:
albatrosary/ashiras.xyz · GitHub
最後に
GulpでもGruntでも何でもいいのですがタスクを自動化するというのは作業効率が上がります。自分の場合はYEOMANジェネレータを使ってますので初動も早くストレスがないです。皆さんはWeb開発をどうやっているのかな?と気にしつつ。ライブラリとかツールとか集めてくるだけでも大変だし、それを設定とか。minifyするのも当たり前だと思うのですが、してない人が多いのか?と思いつつ。どうやってるんだろうか。