ねほり.com

何もないから何かみつかる

Bootswatchによる2rowデザイン&軽量化の検討

      2015/07/27

この2ヶ月間で「ランキング出力のOAuth 2.0対応」「Yahooコメントランキングのユーザ要求対応」「モバイルサイト対応」「税金・年収のシミュレータ」など3年間ぐらい更新したかった内容を更新することができた。

そして大詰めを迎え「Bootswatchを使った2rowデザイン」と「サイトの軽量化」に手をつけた。

新デザイン対応&軽量化検討

私が学生時代から作成しているサイトは未だに、テキストパットを利用してデザイン・構成を自作している。

サイトを作成開始したのは1999年。

2009_05_14_1

今は2015年。スマートフォンでサイトを見ることがパソコンのシェアを超え、レスポンシブデザインやマテリアルデザインが流行し始めました。

  • モバイルファースト
  • レスポンシブデザインの進化
  • フラットデザインの継続
  • マテリアル・デザインの増加

こうなってくると、自作でデザインを作成し続けるのは大変すぎる。

そして、いつの間にか色々なデザインが流行し「CSSフレームワーク」などを利用してサイト作成するのが当たり前になっている。

Twitter社は、数年前に「Twitter Bootstrap」をリリースしており、現在は3.1。

Google社も今月、マテリアルデザイン仕様のWebサイトを構築するためのツールキット「Material Design Lite」を公開したとのこと。

先月より「Bootstrap」を使ってのマテリアルデザイン/レスポンシブデザインの検討中に「Material Design Lite」が出てきたのは想定外だが、まずは今年は「Bootstrap」を使ってのサイト最適化を検討することに決めました。

Bootswatch

「Bootstrap」を使えば、次の機能をまとめて導入できる。

  • HTML5
  • CSS3
  • 12カラムグリッドシステム
  • フラットデザイン
  • タッチパネル操作への配慮
  • カルーセルスライダー等
  • UIパーツライブラリー
  • jQuery
  • LESS
  • JavaScriptライブラリ
  • 便利なLESSのMixinライブラリ
  • clearfixなど

デザイナー目線では既に色々と揃ってるものをカスタマイズするだけで,サイトが1つできあがるのがメリット。

でも、ここ最近は「Bootstrap臭」という言葉とともに「似たようなサイトになる」など disりが増えている。

bootstrap

なので「Bootswatch」を利用することで出来る限り、それを回避する。

「Bootswatch」はbootstrapのテンプレートのギャラリーのサービス。そして、それを使って「2row画面」を作成した。

Zepto

「Bootswatch」「Bootstrap」を使うと、阿呆みたいにロードファイルのサイズが増えてしまう。

そこに加えて「jQuery」をロードすることになり、サイトの表示速度が恐ろしく遅くなってしまった・・・。

なので「jQuery」より軽いJSライブラリを探したところ「jQuery」と互換性がある「zepto」を見つけた。

  • 「jquery-1.10.2.min.js」のファイルサイズは「32.4 kB」
  • 「zepto.min.js」のファイルサイズは「9.6 kB」

ただし、bootstrap.jsはjQueryありきで書かれている箇所があるので、次のようにグローバルのjQueryをZeptoで上書きする。

if(!window.jQuery) {
Zepto.browser = {webkit: true};
window.jQuery = Zepto;
}

その他

Google のウェブ パフォーマンス ツール「PageSpeed Insights」を使えば、スクロールせずに見えるコンテンツのレンダリングを優先して設計することができる。

PageSpeed_Insights

Gzip圧縮を有効化したり、CCS/JSの読み込みタイミングを変更したり、動的な読み込みを静的に変更したりして、スコア「74/100」。

パソコンで見た場合のスコアは「82/100」。

キャッシュを有効にすれば、さらに上位は目指せるけどJS/CSSを頻繁に変更中なので、これで十分。

Pingdom Website Speed Test」のサイトの結果は次のとおり。

pingdom

他の人が呟いたtwitter表示も静的なものに変換した。これで少し軽くなった。

でも回線が遅いと、まだ広告表示が遅すぎる・・・。

「bootstrap.min.css」が19.5Kあるし、CSSの最適化(不要な部分の削除)が必要かもしれないなぁ・・・。

 - 2015年, Web技術, テクノロジー

  関連記事

助けて「クラシアン!」、しまった!ここはアメリカだ・・・

今月は土日は部屋からほとんど出てないです。 なので日記を書くことがありません。 …

ルーミス・ペンリンの旧日本町で戦前の日本人の足跡を調査する

先祖を辿る旅第三弾。第二弾はサクラメントを見て回った。 実は「ルーミス」という町 …

味覚と嗅覚に対する次世代のデバイス・商品まとめ

視覚や触覚、聴覚に対するデバイス・商品は、様々な会社が商品を競うようにリリースし …

エチオピア料理@サンノゼ(Zeni Ethiopian Restaurant)

世界中の国からの移民・開拓により、めざましい発展をとげたアメリカ。 各国の郷土料 …

旧安芸郡仁保島村(仁保村)で生活していた先祖調査

今の社会ですら、海外赴任・移住という機会に恵まれることは少ない。 でも、自分の高 …

アメリカに移住(渡米)した親族・先祖の調査方法

親族が1910年代アメリカのサンフランシスコ港に到着し、「サクラメント」や「ルー …

Kerasを使った株の利益を計算(ディープラーニング)

PytorchはLSTMが難しいらしいし、TensorFlowも難しいので未挑戦 …

サンノゼ・サンフランシスコで初詣&今年の目標

謹賀新年。年が明けると同時にジャンプ!これで16年間継続(日本時間)です。 アメ …

サラリーマンは安泰?誰に仕事を奪われのか?

年収が同期の中でも底辺です・・・ 同期がどれだけ出世しているのか概算しました。 …

Kerasのモデル保存・利用(ディープラーニング)

Kerasを使った学習モデルの書き方に関しては、ある程度調べました。 はじめての …