albatrosary's blog

UI/UXとエンタープライズシステム

サイトをリニューアル、今回のポイントは?

ashiras xyz のサイトをリニューアルしました。リニューアルはだいたい2時間くらいで完了でしょうか(やっぱYEOMAN使うと早い)。「ashiras.xyz」というのは自分が仕事するのに使っている所謂「屋号+.xyz」です。「xyz」の意味ですが、アルファベットの最後なので「もう後がない、助けて」という意味ですハイ。

f:id:albatrosary:20150723160037p:plain

使っているライブラリは結局「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ありがとう」という感じでユーザエクスペリエンス言うことなしらしい。

f:id:albatrosary:20150723161121p:plain

Web Wait

WebWait(WebWait - Benchmark Your Website)はどのくらいなのか?

f:id:albatrosary:20150723161637p:plain

めちゃめちゃ早くないですか?(ペライチサイトなので)

Offline Web Applicationの利用

Offline Web Applicationで人類には難しすぎたとうわさされているApplication Cacheを利用しています。Application Cacheには「manifest」ファイルの定義が必要なのですがこれをメンテナンスするのが大変、大変なことはすべてgruntにお任せする方針なので「grunt-appcache」を使っています。なので基本的に「manifest」ファイルのメンテナンスはしません。

www.npmjs.com

Application Cache使ってますのでオフラインでも見れます。当たり前ですがオフラインのときにリンク先は行けません。

デプロイの自動化

Github Pagesでサイト公開していますが通常gitコマンドで作業します。これも面倒なのでgruntタスク化しました。「grunt-gh-pages」です。

www.npmjs.com

$ grunt deploy 

で一発リリース

ソース

ソースはこちらにありますので興味があれば、適当に書いてる部分多しです:

albatrosary/ashiras.xyz · GitHub

最後に

GulpでもGruntでも何でもいいのですがタスクを自動化するというのは作業効率が上がります。自分の場合はYEOMANジェネレータを使ってますので初動も早くストレスがないです。皆さんはWeb開発をどうやっているのかな?と気にしつつ。ライブラリとかツールとか集めてくるだけでも大変だし、それを設定とか。minifyするのも当たり前だと思うのですが、してない人が多いのか?と思いつつ。どうやってるんだろうか。