Stainless Note

デスクトップ・タブレット・スマフォ向けのレスポンシブ対応サイトを作成する超軽量（19KB）のスタンドアローンのスクリプトを紹介します。

jQueryなどの他のスクリプトは必要なく、外部スタイルシートも必要ありません。 ※ページの各エレメントの装飾にはCSSを用意してください。

skel.js

skel.jsの特徴

skel.jsはjQueryなどの他のライブラリや外部スタイルシートを用意しないで、レスポンシブ用のページが簡単に作成できます。

スタンドアローンで動作する19KBの超軽量スクリプト。

さまざまなレイアウトに対応できるグリッド。

表示サイズごとのブレイクポイントの設定も簡単。

resetやbox-modelなどの有用なCSSのショートカットを用意。

プラグイン機能も備えているので、拡張にも対応。

skel.jsの使い方

jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="skel.js"></script>

jQueryもスタイルシートも他のファイルは必要ありません。

Step 2: スクリプトのセットアップ

スクリプトのセットアップします。 まずは、基本の書式から。

<script src="skel.js">

{

  preset:name_of_preset

}

</script>

presetで、レスポンシブのブレイクポイントやグリッドなどの指定をします。

<script src="skel.js">

{

  prefix: "style",

  resetCSS: true,

Resets default browser styles.

  boxModel: "border",

  grid: { gutters: 1 },

  breakpoints: {

    wide: { range: "1300-", containers: 1280, grid: { gutters: 2 } },

    narrow: { range: "-1299", containers: "fluid", grid: { gutters: 2 } },

    narrow960: { range: "-960" },

    narrow740: { range: "-740" },

    narrow460: { range: "-460", grid: { collapse: true } }

  }

}

「Phonegap」って？

アプリをHTML＆Javascriptで作っちゃおうっ！という、 クロスプラットフォーム・モバイルアプリケーションの開発フレームワーク。

普通は、iPhoneアプリならObjective-C、androidアプリならJavaと、 OSによってアプリの作り方もプログラム言語が違う。

だから、iOS版とandroid版のアプリを作ろうとすると、倍の学習コスト＆開発コストが掛かってしまう。

そこで、Phonegapのようなフレームワークを利用することで、ソースの一部を共通化することができて、 コストを下げ、開発スピードを飛躍的に向上することもできる。

・・・と良い事ずくめで、近頃（というかだいぶ前から）話題のPhonegapを使ってアプリを作ってみることにした。

まぁ実際には、対応機能の制約とか処理速度とか問題はないわけじゃない、広告なんかを表示するにはネイティブコードの知識も必要。 「なんでもできる」じゃなくて「割とできる」、という印象。 でも、ネイティブソースをゴリゴリ書くよりもずっと楽チンにアプリが作れたことに感動した！

割勘Ex 〜わりかんエクスプレス〜

普通に割勘するだけなら、電卓でもできる。

でもちょっとややこしい場合、例えば・・・

マネージャーは１万円払う。 3人の正社員は普通より1000円多く払って、 2人の契約社員は普通に割勘。 5人のアルバイト（アルコールあり）は2000円ずつ、 2人のアルバイト（アルコールなし）は1500円ずつ、払う。

・・・こんな条件でもきちっと計算できるアプリ、 それが「割勘Ex 〜わりかんエクスプレス〜」です。

割勘Ex 〜わりかんエクスプレス〜

割勘Ex 〜わりかんエクスプレス〜

単純な割勘から、複数条件を指定した複雑な計算まで、 すぐに使える割勘計算アプリ。

価格：無料

「更新情報の取得に失敗しました。」はよくあるエラー

何度となく遭遇して、その都度対処してるんだけど、毎回対処法を検索してるので、 ちょっとまとめておこうと思う。

更新情報の取得に失敗しました というメッセージが表示される http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=2207&forum=11

ほとんどここに書いてある通りにすればいい。 けど、このままだとエラーのままのときがある。

対処法がうまく機能しない？

デフォルトのコードは、「file_get_contents()」で更新情報を取得してる。 それが失敗してるのでエラーになる。

上記のコミニティで紹介されているのは、「file_get_contents()」で失敗したときに、 代わりに「fsockopen()」を使って更新情報を取得しようという試み。 取得自体はそれでできてる。

問題は、取得後のHTTPステータスコードによる分岐。 実際に取得したのは「HTTP/1.1 302 Found」、これはコミニティの修正コードでは想定されていない。 そのため、取得失敗とみなしてしまっているようだった。

そこで、私が再度修正したのが下記のコード。

-webkit-tap-highlight-color: rgba(0, 0, 0, 0)

iPhoneやAndroidでリンクなどの要素をタップしたときに、iPhoneでは薄いグレー、Androidでは緑やオレンジの枠がデフォルトで表示されます。 -webkit-tap-highlight-colorというプロパティに色を指定することで、この枠の色を変えることができます。 ハイブリッドアプリを作成する際には、この枠が出ると如何にもWebっぽくなってしまうため、透明色を-webkit-tap-hightlight-colorに指定して、枠が表示されないようにしています。

* {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

リストの項目など、敢えて選択時に色を付けたい場合には、個別にtap-hightlight-colorを指定するといいかと思います。

-webkit-touch-callout: none

iOSでリンクを長押しした際に表示されるポップアップメニューを消すためにこのプロパティを設定しています。 ポップアップメニューが出るとネイティブっぽくないですもんね

* {

    -webkit-touch-callout: none;

}

-webkit-user-select: none

スマホのヘッダやフッター、またはボタンなどの要素の文字列や画像を選択してコピーできてしまうと、一気にネイティブっぽくなくなりますよね。 そんなときには、-webkit-user-selectにnoneを設定することで、要素を選択できなくすることができます。

* {

    -webkit-user-select: none;

}

ただし、このままだと、input要素で文字入力ができなくなってしまったり、何かと不都合があるので、ユーザーからの選択を許可したい箇所には、以下のように-webkit-user-selectにautoを入れて選択できるようにする必要があります。

input[type=text] {

    -webkit-user-select: auto;

}

もしくは、以下のように最初からinputは対象外にするのもいいかもです。

*:not(input){

    -webkit-user-select: none;

}

IEのバージョン7では、display: table-cell に対応していないため、画像がボックス内の上に配置されてしまいます。

あまりハックとかせずに、簡単にIE7以下でも対応できないかなとIE独自拡張をいろいろ調べてみたところ、いいのがありました。

layout-grid-line プロパティ

このプロパティ。IEが独自に先行実装していたプロパティで、行の高さを指定する際に使用するものです。また、IE5以上から使えるとのこと。

デフォルト値は、none になっているようなので none以外の値を設定します。今回のサンプルでは、高さ400px なのでその値を設定。

01.box .image {

02    display: table-cell;

03    width: 400px;

04    height: 400px;

05    line-height: 400px;

06    background: #CCCCCC;

07    vertical-align: middle;

08    text-align: center;

09    layout-grid-line: 400px; /* IE7以下 */

10}

jQueryで画像の高さを取得しようとしたら失敗してしまった

複数の画像の高さを取得して、レイアウトを調整しようとしたのだがうまくいかない。 その時のHTMLは以下↓のようになっていた。

<div id="photo_list"> <img src="photo1.jpg" width="100" /> <img src="photo2.jpg" width="100" /> <img src="photo3.jpg" width="100" /> </div>

javascript（jQuery）はこう↓

$(function(){ var photos = $('#photo_list img'); var max_height = 0; $.each(photos,function(){ if( max_height < $(this).height() ){ max_height = $(this).height(); } }); $('#photo_list').height(max_height); });

画像をfloatで横並びにしたので、その親要素の高さを画像の中で一番大きいサイズに合わせたかった。 が、高さの取得結果がまさかの「0」。

ちなみに、読み込まれる画像は動的に変化するため高さを予め指定することはできない。 横幅（width）のみを指定してるので、ブラウザの自動リサイズによって高さが決まる。

試しに、$(this).width();で横幅を取得してみると、こちらは「100」と正常に返ってくる。

これは、横幅は明示的に指定していて、高さは指定していないから。 ・・・ということなのだろう。 ん〜じゃあどうしたらいいの？っとググッてみると、対処法がわかった。

初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click();のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。

on() ひとつで bind() live() delegate() を表せる

jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。

.foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。

bind()

$('.foo').bind('click', function(){...}); は $('.foo').click(function(){...});と同じ意味で、ごく普通の基本的なイベント設定方法です。 その要素に対してイベントが発生したら何かするという感じ。

$('.foo').bind('click', function(){...}); $('.foo').unbind('click');

これを on() で書くとこうなります。

$('.foo').on('click', function(){...}); $('.foo').off('click');

一緒だったらわざわざ on() なんて使わずに click() でいいじゃんと思うかもしれませんが、このあとの話で on() にするメリットが出てきます。

delegate()

delegate() は、イベントを設定するのは親の要素に対して行います。delegate() の 1 番目の引数で、実際にクリックする要素 .foo を指定しますが、イベントが張り付いているのは親の .parent です。そして、 .parent の中にある .foo だけがクリックイベントの発生する対象となります。このように、親要素に対してイベントを設定することを、イベントデリゲートと言います。

最初に HTML が描画された後に、JavaScript によって要素を追加した場合、bind() でイベントを設定している場合は、後から追加された要素にはそのイベントが効きません。でも、delegate() の場合は、後から追加した要素にもちゃんとイベントを適用できます。

$('.parent').delegate('.foo', 'click', function(){...}); $('.parent').undelegate('.foo', 'click');

これを on() で書くとこうなります。

$('.parent').on('click', '.foo', function(){...}); $('.parent').off('click', '.foo');

live()

live() も delegate() と同じように、JavaScript を使って後から追加した要素に対してもイベントを設定できます。delegate() との違いは、イベントを設定する対象が document になります。でも、書き方は次のように .foo に対してイベントを設定しているように書きます。でも実際にイベントが設定されているのは document です。分かりにくい・・！

$('.foo').live('click', function(){...}); $('.foo').die('click');

これを on() で書くとこうなります。

$(document).on('click', '.foo', function(){...}); $(document).off('click', '.foo');

on() の書き方の方が、実際の挙動と見た目が一致していて分かりやすいです。あと、die() って名前、live() と対になってるのが分かりにくい気がする。英語できないからでしょうか・・。

ひとつの要素に複数のイベントを設定

$('.foo').click() のような書き方の場合、 ひとつの要素に対して複数のイベントを設定できませんが、on() を使えば可能です。ちなみに、bind() でも同じことができます。

リストの最初と最後だけ違うスタイルを適用したいとき

前回の・・・

リストの最初だけ違うスタイルを適用したいときのCSS

これの応用編。

例えば、こんな風に、リストの１つ１つの項目が枠線で囲まれてる場合にどうするか？ しかも、境界線部分が点線、それ以外は実線になっているなら。

<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLは↑こんな感じ。

リストの最初と最後にクラスを指定する。

「:first-child疑似クラス」と「:last-child疑似クラス」を使う。

「:last-child疑似クラス」の代わりに「expression」を使う。

jQueryを使う。

ULに枠を付ける。

思いついたのはこの5つの方法。

HTMLのタグを修正できる場合

リストの最初と最後にクラスを指定すればいい。

<ul> <li class="first">メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li class="last">メニュー５</li> </ul>

HTMLをこうして。

li{ border:solid 3px #F00; border-top-style:none; border-bottom-style:dotted; } li.first{ border-top-style:solid; } li.last{ border-bottom-style:solid; }

CSSをこうする。

一番シンプルでわかりやすい方法。 問題は、HTMLを修正せずにこれと同じ表現をする方法なんだよね。

リストの最初だけ違うスタイルを適用したいとき

例えば、こんな風に、リストの１つ１つの項目が枠線で囲まれてる場合にどうするか？

※ただし、項目の境界線部分は１本の線になってる。

<ul> <li>メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLは↑こんな感じ。

リストの１つ目にクラスを指定する。

:first-child疑似クラスを使う。

隣接セレクタを使う。

思いついたのはこの３つの方法。

HTMLのタグを修正できる場合

リストの１つ目にクラスを指定すればいい。

<ul> <li class="first">メニュー１</li> <li>メニュー２</li> <li>メニュー３</li> <li>メニュー４</li> <li>メニュー５</li> </ul>

HTMLをこうして。

li{ border:solid 3px #F00; border-top-style:none; } li.first{ border-top-style:solid; }

CSSをこうする。

一番シンプルでわかりやすい方法だと思う。 問題は、HTMLを修正せずにこれと同じ表現をする方法だ。

複数のブラウザー間の誤差を含めて、なにもかもゼロにすることで、実装を楽にするという、実装者の無知によりこうしたリセットが使われてきた。 しかしブラウザーを理解すれば、必ずしもすべてゼロにする必要はなく、誤差のみを補正し、すべて同じ動作とすれば、実装者は (基本的には) 一つの CSS を書くだけでいいということに気づいている人もいた。DOM を操作する際、実装者が JavaScript を書かず複数のブラウザー間の誤差を含めて、なにもかもゼロにすることで、実装を楽にするという、実装者の無知によりこうしたリセットが使われてきた。

しかしブラウザーを理解すれば、必ずしもすべてゼロにする必要はなく、誤差のみを補正し、すべて同じ動作とすれば、実装者は (基本的には) 一つの CSS を書くだけでいいということに気づいている人もいた。DOM を操作する際、実装者が JavaScript を書かずに jQuery を使うように。

Nomalize.css は CSS における jQuery と理解すればいいだろう。

Nomalize.css は次のことをしてくれる

表示をゼロにしない (sup や sub を使えば上付き、下付きになるし、ul は箇条書きになる)

バグ補正 ( pre 要素における font-size、IE9 における SVG の overflow の挙動など)

CSS 解析時に、解析ツール上に必要以上のゴミとなるコードを作らない (リセット系 CSS は結果的にゴミとなる margin:0 などが大量に挿入される)

必要に応じて Nomalize.css の不要箇所を削除しても OK ( Nomalize.css は適切にコメントで区切られていて、不要箇所は削除が簡単)

ドキュメンテーションも用意されている

だから、本末転倒なリセットをするのではなく、ノーマライズ (補正) するための CSS、Normalize.css を使うことが、CSS を書き始める準備におけるベストプラクティスといえる。

普段はDTPをメインにやっていて、たまにWebのデザインもするというデザイナーさんは、 IllustratorでWeb用のデザインカンプを作ることが多いと思います。 別にIllustratorからでもコーディングはできるのですが、後工程の人を困らせないために、 ちょっとだけ気に留めておいて欲しいことがあります。

１．色モードはRGBで。 普段DTPをやっているとついCMYKモードのままで作ってしまうことがあるかもしれません。 でもWebはRGBの世界です。変換すると意図した色にならなかったりしますので、 最初からRGBで作ってください。埋め込む画像も同じです。

２．どこがデバイスフォントなのか分かるように指示を。 紙の世界では文字は文字でしかありませんが、Webの世界では「テキストデータ」にするのか 「画像」にするのか決めなければなりません。本文は原則「テキストデータ」ですが、 判断に困るのは「見出し類」と「ナビゲーション・ボタン類」です。 見出し　　こんなのとか

見出し　　こんなのとか

メニュー | メニュー | メニュー |　　　こんなのとか

「テキストデータ＋CSS」で表現出来ちゃうような見出しをイラレで作られちゃうと、画像にしたいのかテキストでいいのか判断にとても迷うので、できれば最初から分かるようにしておいてもらえると助かります。 デバイスフォントだけ別レイヤーにしておくとか、赤字レイヤーで指示入れておくとか。手段は何でも構いません。画像なのか、テキストなのか、そんなことで頭を悩ませなくてもいいようにしておいて欲しいのです。

３．ロールオーバ時のデザインも作って下さい。 紙と違ってWebはユーザーさんが欲しい情報を見るためにコンテンツをクリックします。 そうしたクリック可能な部分をユーザーさんにはっきり示すために、カーソルが乗った時のデザインが必要です。 シンプルなテキストリンクから、ナビゲーションバーや凝ったボタン類まで、クリックできるものに関しては「通常時」のデザインと、「ロールオーバー時」のデザインを両方用意しておいてください。 ロールオーバー用の画像は、それだけをまとめて別レイヤーにしておいてもらえると助かります。

４．単位は「ピクセル」、すべて整数で。 Webデザインは「ピクセル」が基準単位です。是非、Webデザインを作るときにはピクセル単位で作成してください。そして、何か数字でサイズや位置を指定する時、小数点の数字は使わないでください。パソコンのモニタでは1pxより小さいドットは打てません。小数点で指定されたものはとなりのピクセルにまたがって滲んでしまいます。 数値は全て整数で指定してください。お願いします。

５．白でもボックスには「塗り」を設定してください。 紙なら「白」＝透明　ということで何も設定しなくていいところですが、Webは「白」≠「透明」です。 イラレで作ったデータをPhotoshopに持って行くと、塗りが設定されていないところは全部透明になってしまいます。塗りが無いとPhotoshop上で効果が付けられません。ナビゲーションパーツやボタン類の作り込みをする時に塗がないと結構困ったりします。

Facebookでメルアドの公開範囲を確認・設定する方法

基本データ＞連絡先情報＞編集 各メールアドレスの横の▼マークを押すと公開範囲を設定できます。 「自分のみ」にすることをオススメします。

私の場合、タイムラインの方は非公開にしてたけど、友達には公開してた。

友達にメルアドを公開してるとヤバい！？

これの何がまずいかっていうと、 素性の分からない人から友達申請があった場合、 うっかり承認してしまうと、その人にはメールアドレスが伝わってしまうということ。

※承認しなけりゃいいんだけど。

最悪の場合・・・

facebookから50万円くらい不正請求がきた場合の対応まとめ

http://www.abi-station.com/p/3003

こういう事態に巻き込まれかねない。

jQuery1.3以降では「$.browser」が非推奨になってる。

昔使ったスムーズスクロールのスクリプトをコピペで使おうとしたら、動かなかった。orz そのソースが下記のような感じ。

function smoothScroll(href){ var speed = 400;//スクロール速度（ミリ秒） var target = $(href == "#" || href == "" ? 'html' : href);//移動先オブジェクト var position = target.offset().top;//移動先のY座標 /* スムーススクロール */ $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }

まず元のソースを少し解説すると・・・

引数「href」のところまでスムーススクロールさせるスクリプト。

まず、IE系だとウィンドウのスクロールを制御するとき「html」を指定する。 GoogleChrome や Safari などのWEBKIT系は「body」指定しないといけない。

そこで、「$.browser.safari」をつかって、どっちを指定するかを切り替えていた。 ところがどっこい、jQuery1.3以降だと「$.browser」がNG※。非推奨になっている。いつのまに！？

※jQuery1.7あたりだと非推奨ながら使えてたらしいが、1.9.0だと完全にアウトだった。

jQuery1.9.0でも使えるスムーススクロール

jQuery1.9.0で、ブラウザ判定するにはどうしたらいいか考えてみた。

PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。

以上。

で終わってしまうと記事にならないので、ちゃんと説明しておく。

そもそも -webkit-text-size-adjust とは何か

iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。

これを制御するのが CSS の -webkit-text-size-adjust である。

  none が絶対にダメな理由

-webkit-text-size-adjust: none を指定してしまうと PC 版の Google Chrome や Safari でページの拡大/縮小機能に支障がでる。

たとえば、ITmedia には none が指定されてしまっているので悪い例として取り上げさせてもらう。Google Chrome (バージョン 24) にて 100% と 200% で ITmedia のトップページを表示するとこうなる。

３行でまとめる

長くなったが、強引に３行でまとめる。

WebKit はこのバグを治してほしい。

対処療法にはなるけど -webkit-text-size-adjust: none はダメ。100% と書け。