ラベル Twitter Bootstrap の投稿を表示しています。すべての投稿を表示

2013年6月21日金曜日

Twitter Bootstrapを使うのはやめなさい

WEB開発者のみなさん。Twitter Bootstrap使ってますか？
僕は相変わらず重宝しています。だってデザインセンスないもん。
今日はそんな開発者のみなさんへ、デザイナーさんのからの意見をご紹介したいと思います。

Joshua Gross氏の意見(webデザイナー?)

以下翻訳

正直に言おう。僕らのほとんどは、同じような古いTwitter Bootstrapのテーマを使ったサイトをみるのにうんざりしている。黒いヘッダー、巨大なhero、角丸の青いボタン、Helvetica Neueフォント。もううんざりさ。

ああ、君の言いたいことはわかっている。君は違う色のヘッダーにカスタマイズしたり、ボタンのいくつかの色を変えたり、異なったフォントを使っているかもしれない。
でもさ、結局は依然としてBootstrap風であって何もかわってないじゃないか。

もちろん僕は理解している。Twitter Bootstrapは開発者にとってグレイトだってことをね。
パーツの全てはあなたのためにすばらしく設計されているし、首尾一貫したデザイン用語を使い、まるでレゴのように組み立てることができる。デザインセンスを必要としないし、創造性を必要としない。君はただcssファイルをインポートするだけでいい。

でもね、君が何度も何度も何度も同じレイアウトを見るようになるとき、あなた達はようやく理解するさ。君は僕(デザイナー)を失ってしまったんだってね。
君のデザインは、あちらこちらにある6000の他のサイトの一つのようだ。ただ同じ一般的なレイアウトというより、ただ同じ構成物で作られているだけだからね。

Bootstrapの問題は、非常に無器用なうえ、規範的で、実際に修正するのがやっかいってことだ。デフォルトで使うのは簡単さ。もちろん十分に修正することはできるし、あなたがとにかくBootstrapを使おうと決めたなら、僕はあなたがBootstrapを十分に修正して使うことを推奨するだろう。
しかし大抵の人はそのようにしない。

Twitter Bootstrapをデフォルトで使っても良いケースもいくつかある。管理画面やオープンソースプロジェクトのドキュメント、プロトタイプや週末のハッカソンイベントだ。
でも、ひとたびあなたが小さなテストプロジェクトの段階を超えてしまったら、黒いヘッダーや、青いボタンや、グレーの1ピクセルで境界線をひいたボックス以上のことを考えるべき時がきたってことなのさ。

Twitter Bootstrapの成功は、デザインのタイムズ・ニュー・ローマンになっている。しかし、あなたはタイムズ・ニュー・ローマンをあなたのスタートアップのウェブサイトに使うのだろうか？(使うわけないよね)

引用先

うーん、言いますねえ。はっきりとw

確かにTwitter Bootstrapの問題点はどのサイトも同じようなデザインになってしまうことですね。これは否定のしようがありません。

でも、問題の解決やサービスの提供にデザインを必要としないサービスも多いわけですから、そういったときTwitter Bootstrapは便利ですよね。問題の解決にだけエネルギーを注ぎ込めるのはやっぱ強みです。

僕はTwitter Bootstrapがこれから先より便利になってもデザイナーさんの仕事がなくなるとは思いません。
センスあるデザイナーさんがつくる作品というのはそれくらい魅力があります。

デザイナーさんもエンジニアも力のある本物だけが残っていく時代になりそうですね。
僕はエンジニアからデータサイエンティストになるよ!!

そんな感じ。でわ。

この記事がお役にたちましたらシェアをお願いします

2012年9月15日土曜日

Twitter BootstrapでSticky Footerを作成するその2

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.1

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

以前、Twitter Bootstrapを使ってfooterを画面下に配置する方法を記述したのですが、ちょっとミスがあったので追加します。

footerの仕様

HTML画面の下部にfooterを表示する。
画面の表示量が少ない場合は、画面最下部にfooterを表示する。
画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

仕様は以前と同じです。
しかしこの実装だと、メイン画面の表示量がスクロール位置の限界まである場合、フッターがメイン画面に覆いかぶってしまうという問題が発生します。
なので、以前のコードを以下のように変更します。

html version1.1


<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 

    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point content_end_point"> content_end_pointクラス追加
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html>

content_end_pointはコンテンツの終了する位置を指定するクラスです。

CSS version1.1

上記のhtmlで指定したcommon.cssの内容です。


html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}

footer {
  height: 2.3em;
}

.push {
  height: 2.3em;
}

.top_start_point {
  padding-top: 60px;
}

.content_end_point {
  padding-bottom: 30px;
}

フッターの表示サイズだけpadding-bottomを指定しています。これで、フッターがメイン画面に覆いかぶさらなくなります。

以上

この記事がお役にたちましたらシェアをお願いします

2012年9月8日土曜日

Note that jquery.pageless on Rails3 and Twitter Bootstrap

Environment

ruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1

If you want to implement data loading like twitter, I recommend that you use jquery.pageless.
But if you use jquery.pageless, you have to use care when set script file.
I was wrong when I had used with Twitter Bootstrap.

put the script file at the end of the document body

you should put the script file at the end of the document body so you don't block rendering of the page.

Twitter Bootstrap uses bootstrap.js. This file ought to put at the end the document body.
But jquery.pageless.js is not be so. jquery.pageless.js must put the under css link. otherwise, you fail to rendering.

how to put jquery.pageless.js and bootstrap.js

you should put script file like next way.

before


<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
　 // something

  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> 
  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>     
</body>

fixed code


<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// download in head
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// download in head

</head> 
<body> 
　 // something


  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
</body>

Above code can work. jquery.pageless.js should put at the before of the document head

thanks for reading.

この記事がお役にたちましたらシェアをお願いします

Ruby on Rails3でtwitter風データロード作成時の注意点

twitter風のデータロード画面を作成した時にはまったので対処メモ

環境はruby-1.9.3-p0, rails3.2.2, postgres, Twitter Bootstrap v2.1です。

難易度★★★☆☆

rails3でtwitterのように画面をスクロールしてデータを自動ローディングするには、 jquery.pagelessを使うのがお薦めです。
しかし、jquery.pagelessを利用する場合には、ファイルの配置場所に注意する必要があります。
Twitter Bootstrapと連携する時に少しはまってしまったのでメモを残します。

スクリプトは最後に置く

WEBページでプログレッシブ・レンダリング（ページを徐々に読み込むこと）を実現するには、なるべくページの下でスクリプトファイルを読むようにします。
なぜなら、スクリプトは下に配置した全てのコンテンツをブロックします。つまり、コンテンツのダウンロードもコンポーネントのダウンロードも中断されることになります。
逆にスクリプトをページの下に配置すれば、より多くのコンテンツが中断されずに逐次的にレンタリングされるようになります。

Twitter Bootstrapでは、bootstrap.jsを指定します。このスクリプトファイルはページの下で読むべきスクリプトファイルです。
しかし、jquery.pageless.jsはページの下で読んではいけません。cssリンクの下で読むようにしないといけません。レンダリングの前にスクリプトを読む必要があります。そうでない場合、レンダリングに失敗してしまいます。

jquery.pageless.jsとbootstrap.jsの配置の仕方

画面を正常にレンダリングするには、以下のようにします。

変更前


<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
　 // something

  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script> 
  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>     
</body>

変更後


<head>   

  <link href="/stylesheets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/common.css" media="screen" rel="stylesheet" type="text/css" /> 
  <link href="/stylesheets/bootstrap-responsive.css" media="screen" rel="stylesheet" type="text/css" />
  
  <script src="/javascripts/jquery.min.js" type="text/javascript"> </script>// head内でダウンロード
  <script src="/javascripts/jquery.pageless.js" type="text/javascript"> </script>// head内でダウンロード

</head> 
<body> 
　 // something


  <script src="/javascripts/bootstrap.js" type="text/javascript"> </script> 
</body>

上のようにすることで、jquery.pageless.jsが正常に作動します。

以上です。

参考書籍

この記事がお役にたちましたらシェアをお願いします

2012年9月5日水曜日

RailsアプリでTwitter Bootstrapを利用する

既存のRailsアプリにTwitter Bootstrapを対応させる場合の注意点のまとめです

環境

Twitter Bootstrap v2.1, ruby-1.9.3-p0, rails3.2.2, postgresです。

既存のRailsアプリにTwitter Bootstrapを対応させる場合、新しい画面モックをhtmlで作成してviewだけ変更するのが基本になると思います。
以下、使用方法のメモです。

bootstrap.jsをデフォルトで読み込むようにする

Twitter Bootstrapを正常に動作させるにはbootstrap.jsが必要です。
<%= javascript_include_tag :defaults %>でjavaScriptタグが出力できるようにapplication.rbに以下のように設定します。


config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs)

↓

config.action_view.javascript_expansions[:defaults] = %w(jquery.min jquery_ujs bootstrap)

classの指定

cssを適用させるにはclass属性を利用します。各タグに:classを付加して指定することになります。

文字列中にタグ文字を追加

railsのタグは特殊文字をエスケープします。タグ文字を利用したい場合はHelperメソッドを自分で作成して対応します。
link_toの場合はブロックを利用した記述で対応できます。

参考サイト

この記事がお役にたちましたらシェアをお願いします

2012年9月1日土曜日

Twitter BootstrapでIEブラウザに対応する

Twitter BootstrapでのIEブラウザ対応の注意点

環境

Twitter Bootstrap v2.1

WEB開発をするときに困るのがIEブラウザの対応です。もっとも普及しているブラウザでありながら、もっとも品質の悪いブラウザであることは開発者のみなさんが一番認識しているでしょう。
現在(2011年8月1日〜2012年8月1日)のブラウザのシェアは以下のようになっています。
ブラウザシェア
 ブラウザシェア

約6割のユーザーがIEを使用しています。なので、余程のことがない限り対応しないわけにはいきません。
この面倒な対応を最小限の労力にしてくれるのがTwitter Bootstrapです。

IE7以降に対応

Twitter BootstrapはIE7以降に対応しています。メインマーケットが中国のWEBを作成するのでないなら特に問題ないと思います。
どうしてもIE6に対応させたい場合は、以下のツールを利用します。

Bootstrap-IE6

上記のツールを利用することでIE6にも対応できます。
しかし、試してみれば分かるのですが、やはりIE6では表示できることに限界があります。
他のブラウザでは発生しないズレが結構生じます。
正直、シェア的に意味はないと思うのですが、IE6に完全対応させたい人は、最初からIE6を使って画面を設計したほうが良いでしょう。
おまけ程度の対応で良いなら、ファイルだけ設定して細かなズレは放置して問題ないと思います。

Bootstrap-IE6は、中国対応のサイトを作成する時に重宝するのではないでしょうか。

でわ。

参考サイト

Bootstrap-IE6

この記事がお役にたちましたらシェアをお願いします

2012年8月31日金曜日

Twitter BootstrapでSticky Footerを作成する

Twitter Bootstrapで画面下部に固定するfooterを作成したのでメモ

環境

Twitter Bootstrapv2.0.4

IE7.0以上,opera,firefox,chorome等Twitter Bootstrapに対応しているブラウザ対応

Twitter Bootstrapは便利なツールなのですが、footerを画面下に配置するcssの設定が見当たらなかったので、実装しました。

footerの仕様

HTML画面の下部にfooterを表示する。
画面の表示量が少ない場合は、画面最下部にfooterを表示する。
画面の表示量が多い場合は、スクロールして画面最下部に到着してからfooterを表示する。

このようなフッタをSticky Footer(スティッキフッタ)と呼びます

html


<!DOCTYPE html> 
<html lang="ja"> 
  <head> 
    <meta charset="utf-8"> 
    <title> ProjectName</title> 

    <!-- Le styles --> 
    <link href="./develop/css/bootstrap.css" rel="stylesheet"> 
    <link href="./css/common.css" rel="stylesheet"> 
    <link href="./develop/css/bootstrap-responsive.css" rel="stylesheet"> 
  </head> 
<body> 
  <div class="wrapper"> 
    <div class="navbar navbar-fixed-top"> 
      <div class="navbar-inner"> 
        <div class="container-fluid"> 
          <a class="brand" href="#"> <span class="header_title"> ProjectName</span> </a> 
        </div> 
      </div> 
    </div> 
    
    <div class="container top_start_point"> 
      test!!
      <div id="push"><!--//--></div>
    </div> <!--/.container--> 
  </div> <!--/.wrapper--> 
  <footer> 
      footer content
  </footer> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script> 
  <script src="./develop/js/bootstrap.js"> </script> 
</body> 
<</html>

divで囲むwrapperクラスを用意します。これはbodyタグのfooterタグ以外を囲むタグです。
footerタグをdivで囲むwrapperクラスの外に設定します。

CSS

上記のhtmlで指定したcommon.cssの内容です。


html {
  height: 100%;
}

body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -2.3em;
}

footer {
  height: 2.3em;
}

.push {
  height: 2.3em;
}

.top_start_point {
  padding-top: 60px;
}

wrapperクラス内のmin-heightは領域の高さの最小値を設定します。
marginのautoはセンタリングを設定します(margin 上マージン auto　下マージン)
footerタグをdivのwrapperクラスの外に設定します。

top_start_pointクラスは画面の内容が開始する位置を指定しています。
ヘッダーを使用する場合に必要になるので注意してください。

私はTwitter Bootstrapを使うのは、まだ次期尚早かなと思うのですが、個人開発者はもう使ってのもよい段階に入っていると思います。
私も自分のWEBアプリをTwitter Bootstrapに差し替えるつもりです。(完了したら報告します)

個人実装で全てのブラウザに対応するのは苦しいので、Twitter Bootstrapのようなcssフレームワークは今後はやると思います。

でわ

参考サイト

この記事がお役にたちましたらシェアをお願いします

登録: 投稿 (Atom)