CSS4以降を見据えてSass(Scss)やCssnext(PostCSS)を使おう

CSSのイメージ

まとめ

移り変わりの早いウェブ業界。
その中でも今は大きく変化する時期に来ているのかなと、思う。

10数年前、本格的にウェブ制作をしだしたこと、今では当たり前のCSSを使うことができない、使えるようになろうとしなかった人たちが淘汰されていくのを見てきた。

jQueryが流行だしたころもCSSの時ほどではないけど、似たようなことがあった。

今、なんとなくそれと同じような感覚を感じています。

今後どうなるか分からない、であれば新しい技術を身に着けつつ、枯れた技術は正しくしっかりと使いこなすことが大事。

Sass(Scss)にしろCssnext(PostCSS)にしろ、新しいからどうのだけじゃなく、便利で効率よく仕事できるので、使った方が良いですよ。

最初に注意

CSS4なんてもものはないかもしれませんが、分かりやすくするために、今後出てくる新しいCSSをCSS4としています。

ScssやCssnextの話をします

たまにはエンジニアっぽい話もしたいなと思いました。
思ったけども、基本的に何でも屋で仕事してますが、デザイナー兼フロントエンドがもともとの仕事。

なのでCSS関連を今回は。

ここ数年は指定されない限りはCSSはSass(Scss)で書いています。
CSSプリプロセッサは他にもありますが、Scss使ってます。

しかしながら、最近はCssnext(PostCSS)もありかなと思って使っています。

どちらにしても、CSSプリプロセッサを使うにはそれなりの理由があります。

CSSプリプロセッサ、なんやかんやをそれぞれの構文で書いて、CSSに変換して使う感じと思ってください。

そもそもScssを使いだした理由は単純に便利だから。
使いだした当時はLessとどっちにするか悩みましたが、最終的には勘でSass一択に。

SassにしろLessにしろ、cssnextにしろ、最初がとっつきにくそうに感じるかもですが、実際はコンパイル方法さえわかってしまえば、いままでCSS書いていた人なら問題はないくらい簡単なはずです。

そもそも、素のCSS書いても動くわけで。

何が便利

何が便利なのか。

便利機能は山ほどあるのですが、その中でも。

  • インポート
  • ネスト
  • 変数
  • オートプレフィクス
  • カスタムセレクタやforなどのまとめてなんかするやつ

このあたりでしょうか。

MixinやExtendも便利ですが、いらないこともあります。

インポート

これは素のCSSのインポートとはちょっと違います。

プリプロセッサはコンパイル・トランスパイルして実際に使用するCSSに変換するため、好きなところでインポートできます。

そうして作業時には複数ファイルだったものを1ファイルにまとめて使用することができます。

これは複数人での作業時にも便利です。
作業中は小分けに整頓されたソースコードでわかりやすく編集しつつ、実際の公開している環境では1つのファイルになっているためリクエストを減らしてサイトの表示高速化をサポートすることができます。

ネスト

単純にソースコードが見やすくなります。
多用しすぎるのはどうかなとう場面も多々ありますが、便利です。

/* -------- 
 * CSS
 * ----- */
.foo {
    margin: 10px;
}
.foo a {
    background-color: #fff;
}
.foo a:hover {
    background-color: #000;
}


/* -------- 
 * Scss
 * ----- */
.foo {
    margin: 10px;
    a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

/* -------- 
 * Cssnext
 * ----- */
.foo {
    margin: 10px;
    & a {
        background-color: #fff;
        &:hover {
            background-color: #000;
        }
    }
}

ついでに言うと、ネストさせてると.fooを変更したくなった時、そこだけ変えれば他もまとめて済むので手間が省けます。

変数

プログラミングを少しでもしたことがあれば、CSSにも変数欲しいと思いますよね。
ScssやCssnextは変数使えます。

プログラミングをしたことがなくても、そう難しいことではないです。

余談ですが、変数、って呼び方が敷居を上げてるような気がするんですよね。
型指定とかは抜きにして、数以外も格納できるわけで。
昔後輩になんやら教えてたときに、変数なのに文字も?みたいなこと言われたことあります。みんなありますよね?

話を戻します。

CSSにコンパイル後は変数ではなく固定の値としてコンパイルされるものです。
「なんだよ」って思うかもしれませんが、これはこれで便利です。

定数的な感じでもあります。
そんなわけで、「あれってなんだっけ?」を防ぐのにも使えます。
カラーコードを変数に格納して、必要なところで呼び出すなどは、多用しています。

最近はスタイルガイドなどで制作前の段階でしっかりとしたスタイル設計をすることが多いかと思います。

俺の場合も小さなサイトでもクライアントの案件では、スタイルガイドをまず作ります。

スタイルガイドで決められたカラーコードなどを変数に代入。
そうすると、いちいち「あそこの色のコードなんだっけ?」、「こんな感じでいいや」などという状態が防げます。

複数人で作業したり、のちのち作業したりするときも、間違いがなく、統一されたイメージのサイトが作成でき、クオリティが維持しやすくなります。

もちろんコンパイル前の演算にも使えますし、使い方次第ですね。

/* -------- 
 * CSS
 * ----- */
.foo {
    color: #000;
}
.bar {
    background-color: #000;
    color: #fff;
}

/* -------- 
 * Scss
 * ----- */
//変数を作成
$color-black: #000;
$color-white: #fff;

//変数を呼び出してソースを書く
.foo {
    color: $color-black;
}
.bar {
    background-color: $color-black;
    color: $color-white;
}

/* -------- 
 * Cssnext
 * ----- */
/*変数を作成*/
:root {
    --color-black: #000;
    --color-white: #fff;
}

/*変数を呼び出してソースを書く*/
.foo {
    color: var(--color-black);
}
.bar {
    background-color: var(--color-black);
    color: var(--color-white);
}

Cssnextの記述はなんか慣れないし面倒です、個人的に。

オートプレフィクス

ベンダープレフィクスが勝手につくやつね。
これは単純に、まぁ、楽。
こんなん手作業でやるもんじゃないよ、実際。

カスタムセレクタ

Cssnextの機能です。

/* -------- 
 * Cssnext
 * ----- */
/*カスタムセレクタを定義*/
@custom-selector :--foobar .foo, .bar, .baz;

/*カスタムセレクタを使用*/
:--foobar {
    color: #fff;
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.foo,
.bar,
.baz {
    color: #fff;
}

Scssにカスタムセレクタはないですが、eachと配列を使えば同じような事ができます。
プログラムチックですね。

/* -------- 
 * Scss
 * ----- */
//配列を作成
$foobar: '.foo', '.bar', '.baz';

//配列でループ
@each $val in $foobar {
    #{$val} {
        color: #fff;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
 .foo {
    color: #fff;
}
 .bar {
    color: #fff;
}
 .baz {
    color: #fff;
}

もうちょっと工夫すればCssnextの結果と同じようにクラスをまとめて出力もできると思うけど、面倒なのでこれで。

同じようにくるくると回すにはforもあります。
例えばマージン用のクラスを10px刻みで100まで作るとします

/* -------- 
 * CSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}
/*これを100まで繰り返す*/

こんな風に100まで1回コピペと修正をすればできます。
できますが、面倒だしソースの見通しも悪いですね。

で、Scssなら

/* -------- 
 * Scss
 * ----- */
//ループ
@for $i from 1 through 10 {
    $val : ($i*10);
    .mg#{$val} {
        margin: #{$val}px;
    }
}

/* -------- 
 * 書き出されるCSS
 * ----- */
.mg10 {
    margin: 10px;
}
.mg20 {
    margin: 20px;
}

/* ~ 中略 ~ */

.mg100 {
    margin: 100px;
}

ちゃちゃっとできます。

ね、ScssもCssnextも便利でしょ?

という訳で便利なことが満載です。
これ以外にも便利で効率的な機能がいろいろあります。

CSSを圧縮したりもできちゃうので楽です。

それぞれで、できることできないこともありますが普通にCSS書くより効率的で、ソースコードの管理もしやすくなります。

ScssからCssnext

ScssからCssnext、どちらもCSSを拡張して便利に効率的に制作することができます。

ですが、立ち位置はちょっと違うかなと思います。

ScssはそもそもCSSの不便なところを拡張して便利にするためのもの
CssnextはCSSに新しく実装されるであろう便利機能を、先行して使えるようにするもの

乱暴ですが、こんな感じに考えるといいのかなと。
※Cssnextの構文は策定中の新しいCSSとかけ離れていることももちろんあるので、注意が必要です

そんなわけで、jQuery(Scss)からBabelでES6(Cssnext)みたいな感じに考えてみたらわかりやすいかもしれません。

今後標準化されていくであろう、新しいCSS。
最初にも書きましたが、どうなるかわからないのでCSS4としておきます。

CSS4以降ではCSSプリプロセッサでしかつかないことが、デフォルトで使えるようになる部分もあります。

jQueryから着想を得てJavaScriptの新しいAPIができたことがあるように、SCSSなどをヒントにCSS4以降に新しく追加されるものもあるでしょう。

CssnextはCSS4以降の機能を先行して実装しているところが多いです。
なので、最近はCssnextを使ってみています。

とはいえ、少し上で書いた通り新しいCSSと全く同じとはならないのも事実。

であれば、実際の制作ではもうしばらくはScssでもいいかなと感じているのも事実です。

この辺は好みでいいんでないか?と思いますが、なんにしても勉強しておくに越したことはありません。

Cssnextを使ってみると、今後CSSはこういう風になっていくのかなと将来が感じられたり、Scssとの違いにより一層興味を引かれたりします。

仕事で使うなら

とうことで、実際に業務に使うことを考えたらScssをまずはやってみることをお勧めします。
使われている率も多いですし、資料もググれば沢山出てきます。
プログラム的部分では、分かる人はすぐに楽できますし、分からない人は今後JavaScriptなどをやるきっかけにもなるかもしれません。

個人的結論は

  • 仕事ならScss
  • 趣味と学習ならCssnext

こうなります

肝心のCSSに変換のコンパイル・トランスパイルの仕方は・・・

nodeでGulpやらwebpackやらなんやらで、とそこまで書いてると長いので・・・調べればいくらでも出てきますしね。

たぶん、この辺でつまずいたり敬遠したりしてる人が多いのではないかなと、とも感じます。
これもそこまで難しくはないんだけどね。

機会があれば初めての人でも簡単に使える、ってところまで書けたらなと言いつつ、今回はこの辺で失礼いたします。

ついでに勉強会の宣伝

勉強会を主催しています。

2017年12月16日土曜日にいつもよりちょっとだけ規模の大きい勉強会をやります。

LT(ライトニングトーク)ともくもく自習の2本柱で行います。
ScssやCssnextも学べるかもです、保証はないですけど・・・。

勉強会はConnpassにて募集しています。
ゆるゆるIT勉強会のConnpass募集ページ

今までの勉強会のことを記事にもしています。
今までのゆるゆるIT勉強会の記事

Googleモバイルサイト認定資格をとったけど

モバイルサイトのイメージ

今回のまとめ

今後のウェブはスマホ、モバイル中心は必然。
それに合った、知識と技術がいるのは当然。
やる気、気力が沸くぜ、俄然。

はい、今まで培ってきたスキルを活かしながらも、モバイルにあったものをさらに吸収していこうと再確認しました。

初句

どうもGoogleモバイルサイト認定資格者のMakotoです。
少し前(2017年7月)にこの資格を取ったわけですが、この資格自体新しいのですが、また新たに「Google認定モバイルWebスペシャリスト」なるものができるそうで。

なので、取り急ぎ先にですね、「Googleモバイルサイト認定資格」のことを書いておこうかと思った次第。

もともとこの資格を取ったのは、自分のクライアントさんに安心してもらうため。
そして、自分の知識がどの程度か知りたかったためだったりします。

それでは試験について書いていきます。

Googleモバイルサイト認定資格ってどんな資格

モバイルサイトのデザイン、モバイル UX のベスト プラクティス、モバイルサイトのスピードの最適化、高度なウェブ テクノロジーに熟達していることを認定する試験とのことです。

Googleのモバイル推進は日増しに加速しています。
いままでのデスクトップ、PCの知識やスキルだけでは足らない、モバイルならではのことがたくさんあります。
それはこの仕事をしている人なら、日常の業務でも感じていることだと思う。

それに対応していくための必須知識があるかどうか、試される感じです。

このあたりに詳しいことが出ています。

モバイルサイト試験に合格すると、高品質なサイトを構築したり最適化できる能力を証明できます。さらに、Google 公認のモバイルサイト デベロッパーであることを宣伝できるようになります。
モバイルサイト開発のベスト プラクティスを体系化することによって、モバイルでのデザインやスピードの一般的な水準を改善し、有能なデベロッパーを見つけやすくしたいと考えています。
https://developers-jp.googleblog.com/2017/04/introducing-mobile-sites-certification.html

とか

モバイルサイト認定資格は、モバイルサイトのデザインと開発に関する基礎知識や応用力、実務能力に優れた個人を Google が公式に認定するものです。この認定資格を提示することで、Google に認められたモバイルサイトのエキスパートであることを証明できます。
https://support.google.com/partners/answer/7358898

Googleモバイルサイト認定資格取得への道

正直、日々新しいこと学習してるし、俺ならすぐとれるんじゃね?と思ってました。

なので、道とかいってるけど、大した道じゃないだろうと。
近所の歩道を歩いてコンビニに行く程度の道じゃない?と。

なので、さっそく試験受けてやりました。

試験自体はGoogle Partnersに参加していれば誰でも受けることができます。
俺は、これに参加しているのでサクッと試験を始めました。
受験料は無料だし。

試験は全65問。合格ラインは80%。
80%でいいなら余裕でしょ?
52問できてればいいわけです。
制限時間は90分。

・・・試験中
・・・試験中
・・・試験中

さて、結果は・・・
79%!?
おぉーい!?まじかっ!?

なめてました、Googleモバイルサイト認定資格。

しかし!不合格でも8日後には再試験可能。
勉強しよう。
まぁ、試験中に明らかに分からない問題あったしなぁ。

丁寧にも試験対策ガイドをGoogleさんが用意しています。

Googleモバイルサイト認定資格証

ということで再試験の結果、見事合格。
試験対策ガイド、一通りちゃんと見れば、普段勉強している人なら余裕です、たぶん。
なんで、最初から見てやらなかったのか、俺。
再試験は、前回と同じ問題もでたけど、違う問題も結構出た。

ちなみに、試験内容は幅広いので、何かに特化して仕事してる人だとちょっと大変かなとは思いました。

俺の場合は結構何でも屋的なところがあるので、逆に今回はよかった。
Yes!器用貧乏!!

サイバーエージェントさんの開発者ブログでもこの資格のことが記事になっていたし、こっちの方がわかりやすいかもですよ

Googleモバイルサイト認定資格を取得して

良かったと思います。
当初の目的もかなえることができたかなと。
この話をしたクライアントさんは、やっぱり安心とか、信頼とかそういったものがアップしたよう。
これからの新規クライアントさんにもアピールできる。

そして、自分の知識がどの程度かは分かったし、さらなる学習意欲もわいた。

いいことずくめ。

エンジニア、非エンジニアに関わらず、モバイルウェブの仕事に携わることがあるなら、さっきの試験ガイドは見ておくといいかなと思います。

と、こんな感じで話を終わらせたいのですが・・・。

Google認定モバイルWebスペシャリストってなんだよ

先日「Google認定モバイルWebスペシャリスト」なる資格をGoogleが発表しました。

Google認定モバイルWebスペシャリストのサイトのスクショ

ざっくりいうとたぶん内容的に「Googleモバイルサイト認定資格」の上位版な感じがする。
項目というか必要な知識の範囲はだいたい一緒の様、但し試験時間こっちの方が長いからもっと詳しくかもしれないと予想。

内容以外には

  • 受験料99ドル
  • 試験時間は4時間、受験可能回数は3回まで
  • 受験するPCのスペックも決まっているしWebカメラもいる
  • 面接あり
  • 政府発行の写真付きIDがいる(日本なら免許やパスポート?)

こんな感じで結構ハードル高い。

今のところ試験は英語しかないようなので、モバイルウェブのことより俺の英語力に自信がなくて受けれないなぁ。

ということで、日本語試験が始まるの待ちつつ、勉強しておこうと思います。

日本語試験始まらないなら、仕方ないから英語でそのうち受けてみますけども・・・できれば日本語きてください!!

ワイヤーフレームやモックアップ・プロトタイプ作成にJustinmind Prototyper

Justinmind Prototyper

Justinmind Prototyper

行きたいライブのチケット争奪戦に敗れ続けて辟易している、JETBABY管理人です。Yeah。

今回はウェブサイトやアプリなんかのプロトタイピングツールのご紹介。

Justinmind Prototyper 6

結構お気に入りなんですが、あまりメジャーじゃないので紹介しとくかなと。

他に似たような普段使っているツールといえばMicrosoftのVisioとかCacooとかでしょうか。
でもワイヤーフレーム作るときも使い慣れたIllustratorやPhotoShopのほうが多かったりもします。

なんですが、このPrototyper 6も最近はよく使ってる次第です。
特にバージョンが6になってからでしょうか、その前のも使ってましたが。

さて、何で気に入っているかというと

  • ・デスクトップアプリ
  • ・ワイヤーを作りながら動くモックも作れる
  • ・サイトマップのイメージも自動で作ってくれる
  • ・無料でも十分使える(有料版もあるけど)
  • ・ウェブだけでなくモバイルアプリなんかでも。

あれ、あんまり特徴ない!?
他のアプリやサービスでもできること多いな。
個人的には・・・
PhotoshopなんかのAdobe系とMicroSoftのVisualStuidoの画面を足して2で割ったようなUI
なんてところも気に入ってはいますがこれはかなりニッチな意見だろうな。
俺は使い慣れている2つなんで。

バッドな点というか敬遠されそうなところとしては、英語だってとこでしょうか。
俺は英語気にしないでいいんですけどね。

あ、ちなみに英語の成績は驚くほど悪かったですよ。
みんなも気にしなければいいだけですYO、英語なんて。

こちらのサイトで日本語化してますね。古いバージョンの話なんで使えるかわかりませんが。
Prototyper Free を日本語化する

さて、簡単に説明。

初期設定では
iOS7、Android、WEB、グーグルグラス
に対応しているけどウィジェットを足せばWin8のストアアプリとかにも対応できるみたい。

基本の画面はこんな感じ。

Prototyper基本画面

要素をドラッグアンドドロップでぺたぺたして、作ったページ(シーン)をリンクしたりするだけ。

必要なだけシーンを作って、紐付けていけばモック&サイトマップが出来上がる次第。

適当な感じで企業サイトワイヤーを作ってみたりした画像がこちら。

企業サイトワイヤー

で、サイトマップを画像で吐き出させたのがこの画像。

サイトマップ生成画像

※仕事のときはもっとちゃんと作るんですよ・・・作ってると思う・・・

出来上がったモックは共有もできるしWordに書き出したりもできる。

共有するにはjustinmindのカウントを作る必要があるけどメアドだけでできます。
怪しいな、いやだなと思う場合はなんか適当にフリーメールとか作って登録してもいいかなと。
有名企業も使ってるよ的な宣伝ページもあったりするけど、どうなのかはなぞ。参考までに。

アカウント持ってる同士で共有するとモックの部分部分にコメント書いたりなんだりもできるわけです。

アカウントない人に見せるように設定することも可能ですが、その場合はコメントやらなんやらの機能は使えない。
ただ見るだけね。でもないよりいいね。

管理サイトで閲覧専用のURLを吐き出せるのでそれを教えればいい感じ。
https://www.justinmind.com/usernote/tests/12592133/12592136/12593286/index.html
上のリンクはサンプルで作ったモックなんでよかったらご覧あれ。直にリンクしていいか悩んだのでURLだけ載せます。
※とりあえずこのブログはそんなにアクセスないのでさらしておきますが、いつかそのうちある日アクセス数が増えましたらこのリンクは使えないようにしちゃうかもです。

アカウントつくるとjustinmindのサイトに専用のページができてアプリと連携していろいろできる。
専用ページはロゴとか色とかカスタムできたりも。
無料だとファイルをあげるのに使えるスペースが300Mまでみたいですね。

Justinmindの管理画面

ブログ用に作ったアカウントなんでぜんぜん容量使ってませんが、普通に使う分には問題ない容量かと。
これ超えるようならお金払えばいいって感じですわ、そんだけ使ってるならね。

Wordへの書き出しは資料作りなんかに役に立つかも・・・。うーん、たつかもってレベルですが。
要編集ですが、まぁ使えないことはないです。

Wordへの書き出し画面

HTMLにもできるみたいだけどChromeに専用エクステンションいれてみないといけないようだ。
有料にしたら普通にできるのかもですが。
とはいえ、個人的にはHTMLにするのは自分でするので特にどうでもいいといえばどうでもいい。

ということで機能が豊富すぎて細かく説明したらきりがないのでこんなもんで。
いや、ほんとここに書いたことなんて機能の一部ですわ。

ちなみにモックだけならinVisonなんかのほうが直感的だったりしますね。POPとかも。
画像貼り付けてリンク作るだけなんで。

ただ、個人的にはこういったデスクトップアプリのほうがしっくり来ちゃいます。
似たようなことはこいつでもできますね。画像をシーンに貼り付ければってかんじで。

では今回はここまで。
ウェブデザイナーさんもディレクターさんもプランナーさんだろうが営業だろうが、結構幅広くつかえると思うので一度いじってみてはいかがでしょう。

レスポンシブウェブデザインのサイトを作るときにほぼ使うjQueryプラグイン

JB20140820_01

調子にのって今回もレスポンシブのエントリーを書いた、JETBABY管理人です。
海行きたい。

・・・レスポンシブウェブデザインでサイトを作るときに、なにはなくともこれだけは使うというjQueryのプラグインの紹介です。

と、とりあえずスマホがある場合はjQueryは2系にしたほうが、動作が幾分か軽いのでいいですよ。
IE8はこのさい最低限のコンテンツが見えるだけくらいにしてね。
プログレッシブ・エンハンスメントですね。

さて本題。
jQueryを使えばレスポンシブなさいとでも色々な動きを出せたり、リッチな表現ができたりは当然できる。

ですが、今回はそういったものでなくレスポンシブの根幹部分で作用するプラグイン。
有名なので知ってる方も多いでしょうが、個人的にレスポンシブでjQueryといえばこれなので。

それは何かというと

breakpoints.js

こちらです。

何するものかといえば、ブレイクポイントごとにイベントを設定できるというもの。
設定したブレイクポイントになったら、またはブレイクポイントじゃなくなったら、という動作を設定できます。

使い方はダウンロード先のGitHubのReadMeをみれば英語が分からなくても使えるくらい簡単。

最初にbreakpointsの値に必要なブレイクポイントを設定。
enterBreakpoint~でその値になったとき、exitBreakpoint~でその値ではなくなったときの動作を記述。それだけです。

前回のレスポンシブのサンプルサイトのうちOff Canvasでこのスクリプトを使っています。
別に使わなくてもと思う程度の使い方ですが、640px基点にナビゲーションの表示非表示をしています。

使い方は色々思いつくと思いますが、レスポンシブ時の画像の変更などを紹介しているブログもあります。

実際に俺もPCとスマホで画像を変更するときなどに使用することもあったり。
まぁ、あまり画像変更するならレスポンシブじゃなくて別のHTMLにしなよ、とも思うのでどうしてもというとだけの使用にとどめていますが。

さて他に前回のサンプルでは要素の高さを揃えるのでメジャーなheightLine.jsのレスポンシブ対応版、jquery.heightLine.jsも使用しています。
本来前回のレスポンシブのサンプル程度ではなくてもいいのだけど、こっちもこのエントリーで軽くふれたかったので使った次第。

最初に書いたみたいに見た目を華やかにするようなjQueryでレスポンシブに対応したものもたくさんあるので、それらも必要に応じて使用するといいと思うのです。
スライダーとかメイソンリー系とかなんとか

まとめ記事的なのもあるので参考にしたり。
他にググちゃえばいくらでもあると思います。

しかし、今回紹介したbreakpoints.jsはレスポンシブやるときには8割くらいの確立で使いたいなと思うものなので、紹介しました。

便利ですよ。

一つだけ懸念があるとすればプラグインがぜんぜん更新されていないことくらいでしょうかね。

レスポンシブウェブデザインを再確認してみる

JB20140818

お盆休みなんて特になかった、JETBABY管理人です。
ご無沙汰です。

最近レスポンシブなサイト制作をすることが重なっているので、ちょっと自分の中で再確認したいと思います。
今回から数回に分けて、レスポンシブサイトの制作についてまとめてみる予定。

ということで、レスポンシブ、レスポンシブウェブデザインとはどんなものや?というのを先ずはざっくり。

「HTMLはワンソースでCSSなどで画面幅によってレイアウトを最適化させる手法」

という感じでしょうか。

どんな種類があって、どんなメリットでメリットがあるのでしょうか。
簡単なサンプルを作ってみましたので、そちらをご覧くださいませ。

レスポンシブデザインの種類としては大きく分けて以下の5つがあります。

  • Fluid Grid(Mostly fluid)
  • Column Drop
  • Layout Shifter
  • Off Canvas
  • Tiny Tweaks

サンプルは種類ごとにページを作ってあります。
各種類がどんなものなのかもサンプルに記載しておきましたので、どうぞ。

レスポンシブウェブデザインのサンプルデモ

サンプルの補足として・・・

なによりもあくまでサンプルですという、逃げを先に謳っておきます。

このデモではHTMLの構造はすべて同じでCSSだけ変えています。
本来はレイアウトごとにHTMLの構造も変化させるべきだとおもいます。
3カラムの横並びもCSSでtabll-cellとか使えばもっと簡単にできます。flexboxとかでも同じく簡単にできる場合もありますが、まだまだ環境に依存する部分が多いので面倒なので使っていません。

ブレイクポイントの調整は細かくしていないので、若干レイアウトが狂う幅がすうピクセル単位であると思います。jQueryで左右のカラムの高さをあわせたりしてる部分で特に。

基本的にPC、タブレット、スマホといった形で画面幅にあわせて3段階でレイアウトが変わります。

とはいえ、モバイル実機では確認していません。実機確認は結構大変なので。うちにはAndorid1.6、Andorid2.3、Andorid4.0が2機、Andorid4.2、iPhone4s(iOS6)、iPhone5s(iOS7)、iPad(iOS6)、Win8.1タブとありますが、まぁ、どれもこれもちょっとずつズレたりと・・・。

最後になんかサンプルのメリット・デメリットにネガティブなこと書いてるんですが、レスポンシブデザインが嫌いなわけではない。むしろ好きだ。
でも使う意味は考えないと火傷するぜ!ということが言いたかったということをお伝えします。

ページングをキーボードで操作するJavaScript&jQuery

Keyboard Shortcuts for Pagination

Keyboard Shortcuts for Pagination

めずらしく2日続けて連続投稿のJETBABY管理人です。
といっても今回は手短に言っちゃう感じで。

さてさて、ウェブサービスやらブログやらによくあるページング、ページャー。
それをキーボードで操作できるようにしちゃうスクリプトの紹介です。

Keyboard Shortcuts for Pagination

デモ

スマホ全盛のいまどき?とか思うかもしれませんが、場合によっては使えるかもと思うので紹介。
一般の人向けのサイトやサービスというより、PCがなくてはならない技術者なんか向けのサイトとかではキーボードで色々操作できるのはありがたいのではないでしょうか。

正直俺はありがたい。
なんだかんだで1日にPCに向かって作業している時間が多いので。

ページングをカーソルキーの左右で移動させたり2回早押しで一番前や後ろに移動できる感じ。
JavaScript版とjQuery版(1系も2系もOK)が用意されているのも親切。

使い方は書くほど難しくもなくサイトに詳しく出ているので割愛。

今回は、まだまだPCだって捨てたもんじゃないんだぜ、という思いの投稿でもありました。
そんなわけでKeyboard Shortcuts for Paginationの紹介でした。

それではまた。

スマホサイトに使いやすい軽量なシンプルなJavaScriptライブラリ

QuoJS

QuoJS

やたらお腹すいて困っている、JETBABY管理人です。いや、どうも。

今回はJavaScriptのライブラリのご紹介。

軽量かつシンプルかつスマホを考慮して作られている、QUOjs

フルサイズで30kbと軽く、タッチイベントが簡単に使えます。
Mobile Loverとサイトに書かれているくらいなので、スマートホンに最適化されているんだと思います。
うちにあるAndroidでもiPhoneでもうごいておりました。

使い方も簡単。
jQueryライクでもありつつ、jQueryとの共存も可能になっています。いいねぇ!

簡単なサンプルをさくっと作ったので、スマホでアクセスしてみてください。
タッチイベントが簡単に使えるのはいいです、ほんと。

http://www.jetbaby.net/quojs/

QRコードもつけときます。個人的にダイレクトにURL入力するの面倒なんで、みなさんにそんな手間をかけさせはしないよ。

QuoJS Demo QRcode

上記サンプルはPCでもタッチはクリック、スワイプはドラッグしながらマウス動かすで反応するようですが、他はうまく動きませんしスマホ向けなのでマウス操作は向いていません。

サンプルでは実行開始に

[javascript]window.onload = function(){
}[/javascript]

としていますがjQueryライクに

[javascript]$$(function() {
});[/javascript]

でも問題なし。$$と$がふたつなんですね、QUOjsの場合。

もちろんサンプルに載せた機能以外にもいろいろな機能がありますが、詳細は本家サイトをご覧ください。

このQUOjs、タッチイベントなどスマホ向けの部分を除けばPCサイトでも活用できますが、まぁそれならjQuery使うよね、慣れてるし。

しかしながらスマホサイトの構築には今後、選択肢として加えたいと思っています。

ではまた。

レスポンシブなソーシャルボタン - Ridiculously Responsive Social Sharing Buttons

JB2014041902

ブログの文体に悩んでいます。どうもJETBABY管理人です。

今回はレスポンシブで使えるソーシャル関連のボタンを設置するjQuery+CSS、「Ridiculously Responsive Social Sharing Buttons」のご紹介。SASSのファイルも同封されているのは個人的にはうれしいところ。

ダウンロードはGitHubのこちらから。

デモはこちらです。

WordPressのプラグインもあるようです。

推奨されてる画面サイズは140pxから15,465px。確認されてるブラウザはChrome 33、Safari 7.0.2、Firefox 27、Opera 20、IE9+となってます。

ちなみに表示のサンプルはこんな感じ

JB2014041901_01

使い方はGitHubからダウンロードしたファイルのうち、CSSフォルダをJSフォルダを任意の場所に。中身だけを好きな場所においてももちろんOK。

 使い方は
(ファイルのパスは適宜書き換えて)

まずCSSを呼び出して

[html]<link rel="stylesheet" href="css/rrssb.css" />[/html]

HTMLはこんな感じで

[html]
<ul class="rrssb-buttons clearfix">
<li class="email"> … </li>
<li class="facebook"> … </li>

<li class="googleplus"> …</li>
</ul>
[/html]

基本はラップする要素にクラスrrssb-buttonsをつけて、ここの要素にfadebookなどのクラスをつけてあげる感じ。
各ボタンの動作などは基本的にはそれぞれのサービスが推奨している方法なんかで、あとはデモファイルの中身に書いてあるのでそちらを。

最後にbodyの閉じる直前などでJSファイルをよんであげて終わり。

[html]
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="js/vendor/jquery.1.10.2.min.js"><\/script>’)</script>
<script src="js/rrssb.min.js"></script>
[/html]

GitHubのボタンなんかがあるので技術系ブログとかとも相性がいいのではないでしょうか。