Furyu
[フリュー公式]

Tech Blog

フリュー株式会社の技術ブログです

2012年05月18日

Twitter Bootstrap利用時にスマートフォンで見てもグリッドが効く様にしてみた

みなさん初めまして。ソフトウェア開発部の丹です。
主にHTML/CSS/JS等を書いています。

Twitter Bootstrapで制作したサイトをスマートフォンで表示した際、通常グリッドは使えなくなるのですが、それを可能にする方法を紹介したいと思います。

そもそもTwitter Bootstrapって何?

Twitter謹製のCSSフレームワークです。
グリッドと呼ばれる横並びレイアウトが簡単に出来たり、よく見るボタンや機能が予め搭載されているCSSです。
最近はJavaScriptも追加され、折り畳みを始めとするよくある機能が簡単に使えます。

Twitter Bootstrap

さっそくグリッド対応させてみる

上記コードを保存したCSSをbootstrap-responsive.cssを読み込んだ後に読込むだけです。
追記してもいいです。

えもじっち bootstrapバージョン

簡単な解説

そもそも何故スマートフォンではグリッドが効かないのか。

bootstrapのオリジナルソースに書かれていません。 PC表示を前提としているので、バナーのように大きな画像を小さくするのは変になる可能性があると思ったのでは無いでしょうか。

mediaqueriesの767px

これはスマートフォン横向けした時まで対応する幅になります。
これ以上大きくすると、タブレットの縦向けの大きさになります。

レスポンシブ・ウェブデザイン・サイズ

width を 横幅一杯にする?

それぞれのプロパティで画面左右の余白を調整出来ます。
上記の場合だと、左右の余白を完全に取ります。

グリッド設定

[class^="row"]rowで始まるclassを指定し、その中の各.spanのwidthをそれぞれ設定しています。
リキッドレイアウトになりますが、スマートフォン向けの場合はリキッドの方が色々都合が良いですよ。

便利です

慣れたらとても便利なので、是非一度使ってみて下さい。


2012年05月15日

kunihira

関西初(たぶん)Clojure勉強会 Kyoto.clj #1 が開催されました!

はじめまして。 フリュー株式会社新卒入社1年と1ヶ月の@kuchitamaこと国平です。
先日、関西ではおそらく初であろうClojure勉強会 Kyoto.cljがフリュー京都事業所で開催されました。
そのときの様子をお伝えして、少しでもClojureに興味を持っていただきたいと思います。

Clojureとは

ClojureはJavaVM上で動作するLispの方言です。
しかし、Lispとの互換性は無く、独自の拡張がなされています。
例えば、Lispだと関数定義は次のようになります。

対して、Clojureでは次のように定義します。

このように、引数が[]で囲まれるため、引数であることが明示的になります。
その他にも、Lispといえば

List Processing に由来するように、全てをListとして扱いますが、
ClojureではSequenceとして扱い、そのサブタイプとして Vector, Set, Mapを扱うことが出来ます。
10のデータ型に使う10の関数があるより、1つのデータ型に使う100の関数があるほうがまし
という考え方に従っており、オブジェクト指向に縛られないコーディングが行えます。
Clojureのメリットとして、

  • 関数型言語である
  • Javaの資産が活用出来る
  • デフォルトでイミュータブル

などが挙げられます。
詳しくは、Clojureをつくったわけを読んで頂ければいいかと思います。
ただ、私がClojureに手を出した理由としては、
達人プログラマーにある「新しいプログラミングパラダイム」を持った言語を
1年に1つは習得しよう」といった内容に感化されてのことです。
そして、ちょうど新しく何か学ぼうと思ったときに会社の本棚で「プログラミング Clojure」を見つけて、
Javaと全く違うことにビビッときてしまったのが理由です。
正直、ここまで挙げた特徴やメリットは後付けで、Lispが面白そうで、
たまたま手に届くところに本があったからというだけです。

Kyoto.cljについて

Kyoto.cljは@sawam___ さんが、主催したClojure言語の勉強会です。
この会の目的としては、

  • Clojureを実務で使えるようになる
  • Clojureを使ってる人の交流
  • Clojureに関する情報交換

が、挙げられます。
@sawam___さんがClojure勉強会をやりたいとつぶやいていたのを、私がたまたまキャッチして、開催となりました。

発表内容

発表者の方がみなさん資料を公開してくださっているので、リンクを掲載しつつ軽くご紹介したいと思います。
あえて、当日の発表順序とは異なる順番で紹介させて頂きます。

本の紹介:Clojure Programming

@tnoda_さんの発表で、オライリーから先日出版されたばかりのClojure Programmingをご紹介頂きました。
認知科学の観点を交えてClojureProgrammingを評価されており、非常に学ぶことの多い内容でした。
良い教科書の条件として、読者が構造化された知識を身につけることができるかどうかという観点を設定されており、Clojure Programmingはその要件を満たしているそうです。
構造化された知識とは、個々の知識をノードとして捉え、そのノード間がエッジでつながっている状態を指します。
要するに、丸暗記じゃなくて、なぜそうなるのかを知って覚えるということですね。
思わず引き込まれるすばらしい発表で、Ustしなかった自分を叱りたいところですが、スライドもすばらしいので、是非目を通して頂きたいと思います。

本の紹介:Clojure Programming

Leiningen超速入門

次にご紹介するのは、拙作Leiningen超速入門でございます。
ClojureのビルドツールとしてデファクトスタンダードになっているLeiningenについて紹介し、簡単にですが導入からプロジェクト作成、コーディング、テスト、パッケージングと一通りの流れを説明させて頂きました。
私が、Leiningenをお勧めする理由は、

  • 開発/実行環境の構築が楽
  • 依存関係の解決が楽
  • 公開が楽

と、かなり利用が簡単で、開発の手間を省いてくれるためです。
もし、Clojureに興味を持っていただけて、とりあえず実行環境を用意しようと思って頂けたなら、
この資料に目を通して頂けると良いかと思います。

ClojureによるAndroid開発

最後に紹介するのはKyoto.clj主催者の@sawam\___|さんの発表です。
先の2つの発表は初心者向けに勉強方法、開発環境構築方法について述べましたが、ここでやっと実践的な内容になります。
nekoというClojureでAndroid開発を行えるFrameworkを紹介しつつ、Androidの動作の流れを説明してくれました。
開発において、動くものが見えるというのはモチベーションのカンフル剤になると思います。

以上が、kyoto.cljでの主な発表になります。

終わったあとで

この後、京都駅前のカフェで懇親会を行いました。
このkyoto.cljがきっかけでClojureを始めてくれた方や、普段の業務でClojureを利用している方など、さまざまな方とお話ができ、非常に刺激を得ることが出来ました。
特に、次回のkyoto.cljにつながるような話題もあり、@sawam\___|さんもkyoto.cljの継続に意欲を示してくださいました。
ちょっとでも、Clojureに興味を持って頂けたなら、是非次回のkyoto.cljにご参加頂ければと思います。