iPhone版のサイトを製作する手順ってどうしてますか。いちいちサーバーにアップロードして実機で確認して、問題があれば修正してアップロードして確認して……って面倒ですよね。

そんなときはシミューレーターです。Macでシミューレーターを起動すると、ローカルファイルにアクセス出来ます。またインスペクター（開発者ツール）を使ってPC版の開発のようにデバッグも行えます。

さくっとインストールしてみましょう！

なお公式に配付されているのはMac版のみです。あとMac OSのバージョンが古いと利用できません。

インストール手順

こういう順序です。

1. Apple Xcodeをインストールする（無料）
2. iOSシミューレーターを探す
3. 起動する

Xcodeをインストールする

Apple謹製のiOSシミューレーターは単体では配付されていません。XcodeというApple社製の統合開発環境に含まれています。というわけで、まずはXcodeをインストールしましょう。無料ですが、最近のMac OSでないとインストール出来ません。

App Storeの右上の検索欄に”xcode”と入力してEnterで検索し、出てきたものから選択してインストールします。割とファイルサイズがあるのでネット環境に気をつけてください。

App StoreはLaunchpadや「アプリケーション」から探してみてください。

iOSシミューレーターを探す

見つけにくいですが、Xcodeの中に保存されています。まずはFinderで、アプリケーションの中からXcodeを探してください。

Xcodeを見つけたらメニューから「パッケージの内容を表示」を選択します。FinderでXcode.appの中身が表示されます。

メニューは右クリックか、アクションボタンで表示されます。

そこから以下の順にディレクトリを開いてください。

1. Contents
2. Developer
3. Platforms
4. iPhoneSimulator.platform
5. Developer
6. Applications

はぁー、やっと見つかりました。

起動する

そのまま「iOSシミューレータ」をダブルクリックなどで起動できます。

とはいえ、やはり毎回この手順で探してくるのは面倒です。エイリアスを作っておきましょう。

エイリアス（ショートカット）の作り方

GUIで

アイコンをFinderの任意の場所にドラッグ＆ドロップすると、エイリアスが作成されます。（カーソルがエイリアス作成のものになっている事を確認してください。）

通常はこの操作ではファイルの移動になるのですが、場所が特殊なせいか、エイリアス作成になります。

ちなみにエイリアスをアプリケーション（/Application）に設置しておくと、SpotlightやLaunthpad等からも利用出来るようになるので便利です。

CLIで

Finderでぽちぽち探していくのが面倒な場合、こちらの方法でも可能です。

以下のコマンドでをターミナルで実行します。

cd ~/Desktop
ln -s /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app

入力補完を使っていると末尾に"/"が付いてしまうが、その状態だとリンクが貼れないので注意。

Dockに追加

頻繁に利用する事が確実なら、Dockに登録するだけでも良さそうです。

一度起動してからDockのアイコンを右クリックし、「オプション」→「Dockに追加」にチェックを入れます。

これでアプリを終了しても、Dockには表示されたままになります。

使い方

起動後はぽちぽちする。

トラックパッドだとタップまわりの操作が面倒だったりするんだけれど、まあ仕方ないか。

ウェブを見る

Safariから普通に見えます。

Macのブラウザーからリンクをドラッグ＆ドロップして、iOS Safariで簡単に開く事が出来ます。

長い文章をコピペする

通常のペースト（⌘V）だとiOS内のクリップボードから貼り付けられます。

Mac OSのクリップボードの内容をシミューレーターで貼り付けるには、controlを押しながら⌘Vです。

メニューの「編集→テキストをペースト」がこの機能です。

ちなみにコピーは出来ないみたい……。

ピンチイン、ピンチアウト、回転

二本指を広げたり狭めたり回したりする操作は、optionキーを押しながらドラッグする事で実現できます。

これあんまり使い勝手が良くない。

デバイス（iPhone、iPad）の切り替え

メニューの「ハードウェア→デバイス」から。

Retinaのデバイスなんかだと画面が大きすぎて、Macの画面に収まりきらなかったりします。その際画面はMacと同じ方法でスクロール出来ます。

iPad miniは項目にありませんが、解像度は非Retinaの方と同じなので動作確認には問題なさそう。

それにしても、縮小表示が欲しいなあ。

ホームボタン

大きな画面のやつだと、端末の画面外の枠が表示されない場合があるようで……。そんな時はShiftを押しながら⌘Hでホームボタンになります。

メニューの「ハードウェア→ホーム」がこの機能です。

iOSバージョンの切り替え

メニューの「ハードウェア→バージョン」から。

最初は（執筆時点では）「6.1」しかありませんが、後述の方法で追加インストール出来ます。

OSバージョンの追加

Xcodeを起動してください。なお初回は利用規約が表示されるので、内容を読んでAgreeしてください。

で、Xcodeを起動したらメニューの「Xcode→Preferences」のDownloadからインストール出来ます。

ファイルサイズは大きいから頑張って。

端末を回転

⌘←、⌘→で回転します。

メニューの「ハードウェア→反時計回りに回転」等がこの機能です。

iOSを日本語化する

iOSを起動してSettingsから「General→International→Language」で「日本語」を選択してDone。

キーボードも一緒に設定されます。

日本語を簡単に入力する

キーボードが「日本語（ローマ字）」（QWERTY配列のやつ）の時は、Macのキーボードから日本語が入力出来ます。「日本語（ローマ字）」（フリックのやつ）だと駄目。

ただし「ー」の入力がうまく検知されないので、そこだけシミューレーター内のソフトウェアキーボードを利用しないといけない。（日本語の長音符ではなくマイナス記号として認識されている感じ。）

ちなみにMacの方の入力モードは考慮されず、常に日本語になります。英数字のときは英語キーボードに。

Safaniのキャッシュを削除

シミューレーターだけじゃなくて実機も一緒ですが。

iOSを起動してSettingsから「Safari」の「Clear Cookies and Data」で。

Safariのインスペクター（開発者ツール）を使う（iOS 6以上）

これもシミューレーターだけでなく、実機をUSBで接続している場合と同じです。

まずはiOSのSettingで「Safari→Advanced(詳細)→Web Inspector(Webインスペクタ)」をオンにします。

続いてMacの方のSafariを起動して、メニューから「開発→iPhone Simulator→Safari（なんちゃら.comとか）」でインスペクターを起動できます。

インスペクターからは要素を操作したり、スクリプトのコンソールを利用したり出来ます。

ちなみにメニューに「開発」を表示するには事前にSafariの設定が必要です。

アプリのインストール

シミューレーターにはApp Storeがないので、通常のアプリを入れる事ができないみたいです。（裏技とかあるのかも。）

自分で開発しているものなら、Xcodeからインストール出来ます。本稿では扱いません。

よいウェブ開発を！

これでいちいちサーバーにファイルをアップロードしなくても確認できるようになりましたね。

とっぴんぱらりのぷぅ。

フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。

基本的な流れ

1. フォームのsubmitを拾う
2. 通常の送信はキャンセル
3. 送信ボタンを無効化
4. 送信先URLやフォームの入力値を取得
5. 送信
6. 受信後、送信ボタンを戻す

入力値をどう得るか、というのがポイントかと思います。

送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。

デモ

なんかお問い合わせフォーム的なものを用意しました。

まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。

チュートリアル

フォームのsubmitを拾う

一番外側の部分です。あ、対象form要素をid="the-form"としました。

    $('#the-form').submit(function(event) {
        // …
    });

通常の送信はキャンセル

Ajaxで送信するので、通常のフォーム送信はキャンセルします。

    $('#the-form').submit(function(event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // …
    });

送信

先に提示したものと順序が異なりますが、まあそういう形式のAPIなんで仕方がない。このあたりのコールバックの仕組みってのが、JavaScriptのわかりづらいところですよねえ。

    $('#the-form').submit(function(event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 送信
        $.ajax({
            // …
        });
    });

まだ送信先も内容も、はたまた前後の処理も指定していません。これから記述します。

送信先、形式、内容を取得

    $('#the-form').submit(function(event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 操作対象のフォーム要素を取得
        var $form = $(this);

        // 送信
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),

            // …
        });
    });

urlはaction、typeはmethodが対応します。

dataには$form.serialize()で得られる値をそのまま利用できます。内容はname=太郎&mail=…のような形式の文字列ですが、問題ありません。自分で値を取得してきて、JSON的なオブジェクトで渡しても良いのですが、チェックボックスやラジオボタンなんかの値を確実に処理するのは手間です。 .serialize()を使っちゃいましょう。

事前に内容を検証 (validate) したい場合は、送信前に各値を取得して確認してください。今回は触れません。各値の取得方法は過去記事などどうぞ。

• jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。

二重送信を防止

送信ボタンを、送信前に無効化、完了後に戻す事で、思わずダブルクリックしちゃったみたいなのに対応します。

あと時間切れを設定しておきましょう。サーバーに異常があった際にボタンを戻す等出来ます。（戻しても送信できないかもしれませんが。）

    $('#the-form').submit(function(event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 操作対象のフォーム要素を取得
        var $form = $(this);

        // 送信ボタンを取得
        var $button = $form.find('button');

        // 送信
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),
            timeout: 10000,  // 単位はミリ秒

            // 送信前
            beforeSend: function(xhr, settings) {
                // ボタンを無効化し、二重送信を防止
                $button.attr('disabled', true);
            },
            // 応答後
            complete: function(xhr, textStatus) {
                // ボタンを有効化し、再送信を許可
                $button.attr('disabled', false);
            },

            // …
        });
    });

成功、失敗時の処理

    $('#the-form').submit(function(event) {
        // HTMLでの送信をキャンセル
        event.preventDefault();

        // 操作対象のフォーム要素を取得
        var $form = $(this);

        // 送信ボタンを取得
        var $button = $form.find('button');

        // 送信
        $.ajax({
            url: $form.attr('action'),
            type: $form.attr('method'),
            data: $form.serialize(),
            timeout: 10000,  // 単位はミリ秒

            // 送信前
            beforeSend: function(xhr, settings) {
                // ボタンを無効化し、二重送信を防止
                $button.attr('disabled', true);
            },
            // 応答後
            complete: function(xhr, textStatus) {
                // ボタンを有効化し、再送信を許可
                $button.attr('disabled', false);
            },

            // 通信成功時の処理
            success: function(result, textStatus, xhr) {
                // 入力値を初期化
                $form[0].reset();
                
                alert('OK');
            },

            // 通信失敗時の処理
            error: function(xhr, textStatus, error) {
                alert('NG...');
            }
        });
    });

これでおしまい。

実際には

ボタンを無効化するよりも非表示にして、ぐるぐる回る画像なんか置いておくと良さそうですね。 .attr('disabled', true)とかの箇所を .addClass('loading')みたいにして、ってのはどうでしょう。

はい、では仕事に戻ります。　λ…

• リポジトリ … https://github.com/ginpei/jQuery.transform
  • JSファイル … jquery.transform.js

なにこれ？

CSSのtransformプロパティの値を素敵に扱うやつです。 .css()からtransformを扱う際に既存の値を完全に上書きしてしまう問題を解消します。

transform ？

transformはご存知CSS3で追加されたプロパティで、要素を変形(transform)させる事ができます。このプロパティ複数の値を取り得、例えば「小さめで傾ける」という指定の場合は

transform: scale(.8) rotate(-30deg);

のような指定になります。

詳しくはこのあたりとか。

• transform－CSS3リファレンス

jQuery + transformの問題点

jQueryでスタイルを操作する場合は .css()を利用します。

しかし、これはプロパティの名前と値が対にして利用します。つまりtransformに値を指定する場合はscale(.8) rotate(-30deg)と書く必要があるわけです。……当たり前ですね。

問題は、プロパティを設定するときではなく変更するときです。拡縮と回転を順に行うとき、どういうコードを書くべきでしょうか？

$elem.css('transform', 'scale(.8)');

// …

$elem.css('transform', 'rotate(-30deg)');
// -> transform: rotate(-30deg)

一度縮小して、しばらく後に傾けました。このコードの問題点は、二度目の .css()の時点でtransformの値が上書きされてしまう点です。つまり、上記を実行した後のtransformの値はscale(.8) rotate(-30deg)ではなく、rotate(-30deg)のみとなってしまいます。うーん、これはよろしくない。

ばらばらに扱えるように

というわけで、個別に扱えるようにしたのがjQuery.transform.jsです。jquery.transform.jsを読み込んでおくと、$elem.transform()というメソッドを利用出来るようになります。

// include: jquery.transform.js

$elem.transform('scale', '.8');

// …

$elem.transform('rotate', '-30deg');
// -> transform: scale(0.8) rotate(-30deg)

これなら過去に設定した、他のtransformのプロパティが消える事はありません。

ちなみに値を取得したり、上書きする事も出来ます。

// include: jquery.transform.js

$elem
  .transform('scale', '.8')
  .transform('rotate', '-30deg');

// …

$elem.transform('rotate', '-45deg');
// -> transform: scale(0.8) rotate(-45deg)

console.log($elem.transform('rotate'));  // => "-45deg"

今後

出来るようにする

• transformの初期値を生かす
• 単位を自動補完（pxとかdegとか）

出来るようにするつもりはない

• matrix() 対応

道は険しいがやりたい

• .css()から扱えるようにする
  • $elem.css('transform:rotate', '10deg')みたいな
• .animate()対応
• 内部で .data()を利用しているが、jQuery.cacheの方に情報を移行したい
• 汎化; 複数値を取り得るプロパティ全般に対応する
  • background-imageとかbox-shadowとか
  • インターフェイスをどうするのか悩む……

jQueryより軽量なZepto.jsよりもよっぽど軽量なVanilla JSの紹介です。

（この記事は誤解を招きやすい箇所が含まれているので、よく注意して読んでくださいね。）

公式サイト

• Vanilla JS

Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.

『Vanilla JSは驚異的で強力なJavaScript製アプリケーションのための、高速で軽量、クロスプラットフォームなフレームワークです。』

（いやクロスプラットフォームは嘘だろう、と思うのですが……。）

概要

膨大なシェア、実績

あまり知られていませんが、jQueryをも凌ぐシェアを誇ります。（正確に言うと、jQueryやPrototype.jsが内部的にVanilla JSを利用しています。）　公式サイトでは全世界の著名なウェブサービスが利用実績としてGoogleやFacebook、Twitter、Amazonなどが挙げられています。

もちろん当サイト、Ginpen.comでも利用しています。

軽量

とにかく軽量である点が特徴です。具体的なファイルサイズは、公式サイトの “Download” の項でご確認ください。

そのあまりに小さなファイルサイズに目を疑う事でしょう。

高速

私の知る限り、Vanilla JSを凌ぐ速度を実現するJSフレームワークはありません。

実際に計測したものは、検証に用いたコード付きで公式サイトに掲載されています。

そういえばフレームワークではありませんが、JSXだと、書き方によってはVanilla JSより高速になる場合があるそうです。これは書き方の問題だろうとは思います。

手軽

jQueryでもGoogleのCDN等を利用して、ファイルのダウンロードなしで利用できますが、Vanilla JSもファイルのダウンロードなしでの利用が可能です。

HTML中に以下を記述してください。

これでVanilla JSを利用できるようになります。

ね、すごいでしょう？

あなたもVanilla JSに挑戦してみませんか？

実は来月あたりから「jQueryからVanilla JSへ乗り換える」という連載を始めようかなと思っていたりします。

……あ、ええと、”vanilla” って？

バニラエッセンスのバニラですが、俗語（？）では “plain and without any extras or adornments” という意味もあるようですね。

こちらをどうぞ。

• WN-JA 1.1 via Weblio辞書

最後に

情報は出処（ソース）をよく確認し、自分の中でよく咀嚼するようにしてください。鵜呑みにしてはいけません。

Don’t believe it, try it!

(追記: 2013-04-20)

延期後の日程が決まりました。05/18(土)に開催致します。時刻や内容は同じです。

前回参加者を優先するため、参加登録の方法は23日（火）の12:00頃に公開します。何卒ご容赦くださいませ。

延期します。

『樹木が根こそぎ飛ばされ、走行中のトラックが横転するくらいの風が吹くおそれも』との事なので、前日の連絡で申し訳ないのですが、今回はいったん中止とさせて頂きます。

• 嵐の備えはきょうのうちに(2013年4月5日) – 日直予報士 – 日本気象協会 tenki.jp

また日程を改め実施したいと考えております。日程が決まりましたら別にATNDを立て、また今回ご登録頂いた方にはATNDのメッセージで連絡させて頂きます。

よろしくお願い致します。

いろいろあって告知が遅れてしまったのですが、いよいよ告知します。

タネマキにて。

なお日程が当初の予定(3/16)から変更になっております。 16日で予定調整してくださった方、おられましたら本当にすみません……。

概要

普段サーバー側のプログラム、PHPやらRubyやらPerlやらを書いている方々向けに、JavaScriptの基本的なところ、サーバー側とは異なる思想の紹介、家に帰ってすぐ使える実例なんかをお話したいと思います。

内容が非フロントの方向けに、という事です。なので別にサーバー側の方でなくても、例えばネイティブアプリを作っておられるような方でも構いません。 if 文みたいなプログラミングの基礎はお話ししませんよーって話です。

あ、勉強会じゃなくて有料の講習会です。あと、手を動かすより話を聞いて頂く時間が長めになりそうな予感です。（本当は手を動かして頂きたいんだけど……。）

内容

• サーバー側の言語とJavaScriptの違い
• jQueryとは
• JavaScriptを取り巻く技術
• ダイアログ、ドラッグ＆ドロップ、リアルタイム更新……よくあるUI
• 移動、拡大縮小、フェードアウト……よくあるエフェクト
• JavaScriptのデバッグ方法
• Ajaxで実装する、画面遷移のないCRUD
• あと何か習作

テキスト等はありません。講義後にスライド(PDF)のダウンロードURLをお知らせします。

※予定です。当日までに変わる可能性があります。

詳細

場所

横浜タネマキでやります。

• 神奈川県横浜市西区岡野1-3-10 サニーコート横浜 1F
• 「横浜駅」みなみ西口から徒歩8分。相鉄線「平沼橋駅」徒歩3分。
• アクセス – タネマキ ←外観の写真あり

横浜駅みなみ西口（＝相鉄西口）から出て曲がるのは、道なりのものを除き、一度だけです。

ただ道程はごく単純なのですが、繁華街を抜けて住宅街に存在しているので到着までに不安が募るかと思います。どうぞ強い心を持ってお越しください。

なお地図で探すなら平沼高校で検索するのが目立って良いかと思います。

日程

• 2013年4月6日
• 12:30開場
• 13:00 – 17:00 (4h)

途中で何度か休憩をはさみます。

お持ち物

ノートPCの類に Google Chromeをインストールして お持ちください。途中でChromeの機能（デベロッパーツール）を利用します。

なお電源、Wi-Fiはタネマキから提供されます。

費用

• 一般 3,000円
• タネマキメンバー 1,000円

当日、現地で頂戴します。（お釣りのないよう、ご協力をお願い致します。）

また領収証が必要であればその際にお申し付けください。

人数

先着で20名まで。

お申し込み

こちらからどうぞ。

• サーバーサイドエンジニアのためのJavaScript入門 : ATND

その他

質問等あればこの記事のコメントやtwitter、メールなどでご連絡くださいませ。

• Web先端技術味見部#15 （今回は「ECMAScript6をそろそろ触る」！） : ATND

楽しかった！

JavaScript (JS)とECMAScript (ES)の違いとか、そういうのはググってください。

メモ

• Firefox Auroraが現状ES6最先端ぽい。次点Chromeは
  chrome://flags
  から「JavaScript の試験運用機能を有効にする」を有効にして再起動でES6の機能が使えたりするらしい。
• Firefoxで
  メニューのツール＞Web開発＞スクラッチパッド
  でスクラッチパッド。なんかコンソールより便利なやつ。
• 配列内包表記も使えるように。でも見づらいので三項演算子（?:演算子）みたいな扱いになりそうに思った。

サンプルコードいろいろ

let

ブロックスコープになる。varと有効範囲が異なる。

let x = 0;
if (1) {
  let x = 1;
  console.log(x);  // => 1
}
console.log(x);  // => 0

var x = 0;
if (1) {
  var x = 1;
  console.log(x);  // => 1
}
console.log(x);  // => 1

const

定数を宣言する。定数は再代入が無視される。

const x = 123;
console.log(x);  // => 123
x = 234;
console.log(x);  // => 123 (!=234)

ただし’use strict’を書いてstrictモードにしておくと、 “Exception: x is read-only” といわれる。ふむふむ。

'use strict';
const x = 123;
x = 234;  // => Exception: x is read-only

ヒント: constを試して “Exception: redeclaration of const” と言われたら、
メニューの実行メニュー＞変数をリセット
で変数を初期化する。件のエラーは、constで二度宣言しようとしているため。（一度目の実行状態が残っている。）

分割代入

配列の一部を、複数の変数へ代入するってのを一発でやる記法。

// 変数から
var [a,,c] = [1,2,3];
console.log('a', a);  // => 1
console.log('c', c);  // => 3

// オブジェクトから
var {x,z} = { x:123, z:345, y:234 };
console.log('x', x);  // => 123
console.log('z', z);  // => 345

var [x,y] = position;とか良さそう。

もっと複雑なのも。

var [x,{y}] = [{x:123}, {y:234}];
console.log(x,y);  // => {x:123}, 234

var arr = [{x:123}, {y:234}]
var [x,{y}] = arr;
console.log(x === arr[0]);  // => true

関数の引数に初期値を与える

// 引数の初期値
function f(a=123, b=234) {
  console.log(a, b);
}
f();  // => 123 234
f(987);  // => 987 234
f(987,876);  // => 987 876

// 引数がundefinedだと初期値、nullならnull
function f(a=123, b=234) {
  console.log(a, b);
}
f(null, undefined);  // => null 234

可変長引数

argumentsは遅いので、こちらを使おう！という話らしい。

// 可変長引数
function f(x, ...args) {
  console.log(x, args);
}
f(1,2,3);  // => 1 [2,3]

MapとかSetとか

// Map
var map = new Map;
map.set('x', 123);
console.log(map.get('x'), map.get('y'));  // => 123 undefined

MapとObjectの違い:

Objectのプロパティはキーが文字列限定。Mapはオブジェクトをキーにとれるため、例えばこのDOM要素のメタ情報を…みたいなものをDOM要素自身に付加せず行える RT @vvakame: MapとObjectの差がよーわからんしどう使い分けるべきなのかわからん #ajimibu

— dynamis (でゅなみす)さん (@dynamitter) 1月 17, 2013

// Set
var set = new Set();
set.add(10);
console.log(set.has(10), set.has('10'));  // => true false

// Setは+0と-0も区別する
var set = new Set();
set.add(0);
console.log(set.has(+0), set.has(-0));  // => true, false

WeakMap使用場面例:

1. コンストラクターCでインスタンスo生成時に、WeakMap mへ格納しておく。
2. mがoを持っていれば、oはCのインスタンスである。（手でプロパティを操作しても判断できる。）
3. 通常のMapと異なり、oはGCに回収され得る。

イテレーター系

// イテレーター (for-of)
var map = new Map();
map.set('a', 123);
map.set('b', 234);
for (var [k,v] of map) {
  console.log(k,v);
}

通常のオブジェクトはイテレーターに対応していない。

var map = {
  a: 123,
  b: 234
};
for (var [k,v] of map) {  // Exception: map is not iterable
  console.log(k,v);
}

ただし、自前でiterator()を実装すれば利用可能とのこと。

• イテレータとジェネレータ – JavaScript | MDN

クラス

話題の。

それでもESはprototypeベースであり、classは糖衣構文にすぎない、つまり既存の記法で置き換え可能であるらしい。

楽しかった！

なんかヘンテコな記法が増えたりしてないみたいで良かった。（|>とか……。）

今後が楽しみです。

独立したのが一昨年で、ろくに仕事もせずにいたのですが（笑）、昨年はお陰様で色々お仕事を頂くなどしまして、対外的にはだいぶ成長できたように思います。ただ自身の方はそうでもない感じなので、今年は期待を裏切らない中身を育てたいと思っております。

あと自己啓発とか英会話とか、そういう胡散臭い系のにもちょいと手を出してみようかなと思っています。もう五年くらい早くからやりたかったなー。海外に旅行も行ってみたいですね。

というわけで私個人の話はおしまい。

2012年PV数の多かった記事10件

単純にPV数でだけ見ています。やっぱりJavaScript中心に、フロントエンドの話ばかりですねえ。

1位: IE9をWindows XPにインストール……はできないので、こんな方法はいかがでしょうか。

• http://ginpen.com/2011/04/26/ie9-on-winxp/

やっぱりIE 9の確認は苦労しておられる方が多いようですね。書いたの2011年ですが……。

記事内にも追記していますが、だいぶ情報が古くなっています。といっても設定などは変わらないと思うのですが。そろそろ書き直したいですね。当時はWindows 7は出ていませんでしたね。

2位: jQueryでフォームの値を取得する方法をまとめておくので、コピペでご利用ください。

• http://ginpen.com/2012/05/21/how-to-get-values-from-form-with-jquery/

フォームの種類別の値の取り方。HTML5で新設された種類のものは触れていません。

これは需要があるだろうなあと思っていました。

3位: CSS3のWeb Fontを使ってみたよ。

• http://ginpen.com/2011/02/28/css3-web-font/

これも2011年の記事。ウェブフォント、簡単に使えるので是非試してみてください。でもこの記事も内容が古いかな。

4位: jQuery 1.8の更新内容をまとめたよ。

• http://ginpen.com/2012/08/14/jquery-1-8/

事前にjQueryの動向を追っておらず、週末に急いで書いた記事。いや、内容はちゃんと書いてます。

そういえばモジュール化はだいぶ大きいかと思ったのですが、今のところ有効活用しているような話は聞きませんね。

今年は1.9が出そうです。並行してZeptoの記事も書きたいなあ。

5位: IE7, IE8, IE9とかのダウンロードページまとめ。

• http://ginpen.com/2011/08/22/download-ie-series/

2011年の記事。ブックマークに入れておくと、幸せになれるかも。

6位: 典型的なJavaScripter3+1種類と、それぞれの勉強範囲。

• http://ginpen.com/2012/11/13/3-types-of-typical-jser/

自分がJavaScriptの講習なんかをやる関係で考えていた事。一口にJavaScripterなんていっても目的地は諸々なので、情報の取捨選択も人それぞれです。

正直この記事は「こんな分け方はひどい」なんて叩かれるかなあと思っていたのですが、存外受け入れられたようでほっとしました。叩かれるほど知られていない、というのもありそうですが。

7位: jQuery 1.7の更新内容をまとめたよ。

• http://ginpen.com/2011/11/04/jquery-1-7/

2011年の記事。 .on()とかその辺りの情報を求めて来られる方が多いようです。このメソッド、他のライブラリーにも影響を与えましたね。

8位: width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。（CSS おれおれ Advent Calendar 2012 – 05日目）

• http://ginpen.com/2012/12/05/css-box-model/

昨年のCSS おれおれ Advent Calendar 2012の記事。

これはご存知ない方は是非ご一読を。マークアップの際、変なところでつまづく事が減ると思います。

9位: jQuery1.6のattr()で困ったら、1.6.1にすればいいみたい。

• http://ginpen.com/2011/05/20/jquery-1-6-1/

2011年の記事。いやあ、jQuery 1.6もずいぶん昔のような気がしますね。

10位: CSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。

• http://ginpen.com/2011/10/12/jquery-attr-prop/

2011年の記事。jQuery 1.6で .attr()の仕様が変わってしまった件について。

気合いを入れて書いた記事

個人的にはおすすめ！と思ってる記事です。

やたー何語だか調べるやつできたよー！

• http://ginpen.com/2012/01/16/whatlan/

ある文字が何語だか調べるやつを作りました、という記事。これは記事じゃなくてアプリがおすすめです。

RSpecでRailsのテストをしてみるテスト。

• http://ginpen.com/2012/02/14/rspec-rails/

Ruby on Railsのイケてる（当時）試験フレームワークの、自動生成されるコードを全部読んでみた記事。その後、使ってないなあ。最近はMiniTestてのが熱いんですか？

JavaScriptには在るundefinedと無いundefinedってのがありまして。

• http://ginpen.com/2012/03/19/js-undefined/

JavaScriptで混乱しそう（で、あんまりしない）部分について。「無が有る」というのが、なんだか面白くて好きです。

プログラマーだけどWordPressのテーマを1から作ってみる。（目次）

• http://ginpen.com/2012/04/09/wp-theme/

このブログのデザインを刷新しようと、色々調べて試してみたまとめ。この月はWordPressについてばっかりだったなあ。

その後、意外とさっくりテーマを作れてしまったので、意外とさっくり更新停止されました。

WordPressのテーマの作り方、というのも記事にしたいと思って、下書き状態でだいぶ長い期間放置されています（笑）。

Google ChromeでiPhoneとかのtouch系イベントをエミュレートできるようになってた。これは便利。

• http://ginpen.com/2012/05/28/emulating-touch-events-on-chrome/

これは本当に助かってます。

jQueryが要素検索に使うSizzleについて。

• http://ginpen.com/2012/09/14/sizzle/

jQueryの内部実装について。書いてはみたけれど、思った程面白くなりませんでした。

Backbone.jsのサンプルアプリのコードを読んでみた。

• http://ginpen.com/2012/11/05/backbone-sample/

TODOアプリのサンプルが公開されていたので、全部読んでみた体験談です。

書いていて勉強になりました。その後、仕事でBackbone.jsを使うときもこの記事を見返したりしてます。（ここどうやって書くんだっけ？とか）

今見ると、このサンプル自体が、古いしあまり正確な実装ではないのかなあ、と思います。

Linuxでcdの代わりにpushdを使うと作業効率がまじマッハ。

• http://ginpen.com/2012/11/27/pushd/

これ良いです。使う人は使うと良いですよ。

CSS おれおれ Advent Calendar 2012やります。ひとりで。

• http://ginpen.com/2012/12/01/css-ginpei-advent-calendar-2012/

ひとりAdvent Calendar。一昨年に続いて昨年もやりました。

一昨年と違い昨年は常駐で週五の勤務だったので大変でした。日付が変わる前に投稿できたのはごく僅かでしたね。うーん。

JavaScriptをもっと上達したい人へ、最後のヒント

• http://ginpen.com/2012/01/25/last-hints-for-jser/

オチ担当。でも真理だと思いますよ！

ちなみにアクセス数は

こんな感じでした。

2013年です

ブロガーではないので記事を書く事自体を目的とはしていないのですが、それでも出来れば人のためになるようなものを書いてゆければな、と思っております。

とうに正月も明けましたが、どうぞ今年もよろしくお願い致します。

CSS おれおれ Advent Calendarの今年最後の記事です。JavaScript視点でCSSを考えてみます。

先に結論を申し上げると

CSSがあるお陰でJavaScriptが便利に！　JavaScriptをやるならCSSを学ぶ必要があるし、CSSを習得した人ならJavaScriptを始めるのに有利！　というお話です。

なおCSSなる単語が出現してきた時点でお分かり頂けると思うが、クライアント側JavaScript、つまりウェブブラウザーで動くJavaScriptが文脈です。Node.jsとかは今回の範囲外。（もちろん、あれも楽しいよね！）　あ、あとSVGやらも範囲外です。

断定的に申していても、常々例外はあるものです。

JavaScriptで出来る事、出来ない事

JavaScriptそれ自体が出来る事は、あまりありません。数値を計算したり文章を編集したりってのが関の山です。

しかし現実にはJavaScriptを用いた、多くの「派手な」実装があります。クリックすると画面が切り替わったり、メッセージが表示されたり、あるいはゲームが進行することもあります。

これはどういう事かと言うと、その「周辺仕様のAPI」をJavaScript経由で利用しているのです。（これは他の言語でも一緒ですが。）

JavaScriptだけじゃ何も出来ない

処理した数値や文章を出力するには、それ相応の出力を行わねばなりません。が、JavaScriptの言語中核仕様にはあらゆる出力は規定されていません。往年のalert()も近年のconsole.log()も、あるいはdocument.write()やelement.innerHTMLも全てJavaScriptそれ自体ではなく周辺仕様の類です。

例えば通信処理を行う場合はXMLHttpRequestという仕様をJavaScriptから利用して行います。例えば音楽を鳴らす場合はFlashをJavaScriptから操作します。（最近はHTML5がありますが、JavaScriptではありません。）

そして、その最たるものが、HTMLとCSSです。

CSSで出来る事、JavaScriptとの繋がり

というわけで閑話休題。

JavaScriptであれやこれやと計算をして、例えば画像を動かすような場合、その場所を指定するのにCSSを利用します。もちろん、JavaScriptなしでCSSだけで場所を指定する場面も多々ある事でしょう。そうやって配置したものを動かすときに使うのが、JavaScriptです。あるいは逆に見ると、JavaScriptから画像の位置を動かすには、CSSを使う他ありません。

配置を例に上げましたが、CSSの多彩な表現はそれに留まりません。文字の大きさや背景の色、矩形の大きさを定めたり影を付けたり、余白、不透明度の指定まで出来ます。これらを駆使して画面を彩ります。

JavaScriptにはそれが出来ません。出来るのは、そういう「CSSを使う」ところまでです。JavaScriptでそういった動きを実現するために、我々はCSS（とHTML）についても合わせて学ぶ必要があります。

JavaScriptから見たCSS

前述の通り、JavaScriptから画面を操作しようとした場合、HTMLとCSSが必須となります。

ですが、これは良い事です。視覚的な細かい処理を自分でやる必要がなくなりますから。

例えば枠線を描く、といった処理を自前で作成するのは楽ではありません。特定の文字列領域を探して来て、矩形領域を計算し、適切なブラシを以てパスを描画する、なんて面倒でやっていられません。

セレクター（あ、これも実に強力ですね！）で検索して、指定の形式border:dotted 3px redを「設定」するだけで、完了です。楽ちんです。

特に最近ではCSS 3の登場により、視覚表現が飛躍的に強化されています。

影を自前で描画する事を考えてください。背景用に複数の画像の配置を自前で計測する事を考えてください。立体的な矩形の変形を自前で演算する事を考えてください。

気が遠くなりそうです。でも、CSSがこのあたりを全部引き受けてくれるので（ブラウザーが既に実装してくれているので）、我々は簡単に視覚表現を実装する事が出来ます。

ありがとう、CSS！　ありがとう、ブラウザーベンダー！　でもIE 6は爆発しろ！

学ぶ

CSSから始めてJavaScriptを学ぶ場合

あ、もちろんHTMLもCSSと一緒にやっといてくださいね。

先にCSSを知っている人は、プログラミングなるものを学ぶ事になります。これはなかなか難易度が高いです。

が、取っ掛かりはしやすいはずです。何と言ってもすぐに結果が出ますから。

具体的にやりたい事というのは、既にご存知のはずです。例えば最近流行りの視差表現（パララックス）を実現したいなら、「よくわかんないけどスクロールしたらpositionを操作すりゃ良いんでしょ」とまではわかるはずです。あとは順番に（「スクロールしたら」ってどうやってわかるの？　positionを設定する要素はどこから探すの？　というかCSSを設定するってどうやるの？）解決してゆけば、全て実装できます。

大丈夫。

JavaScriptのためにCSSを学ぶ場合

CSSで表現の幅が増えたという事は、CSSを使ったJavaScriptの表現も幅もそれ以上に増えたという事です。

例えば先程掲載したCSS 3D Butterflyをキーボードから動かせたら、もうちょっとしたゲームが作れますね。

そこまで高度でなくても、フォームの入力内容を確認してエラーを表示するとか、一覧を動的に検索して強調表示するとか、そういうのはCSSも知っていないと実装しづらいと思います。サイズを変えるならボックスモデルや、配置するなら包含ブロックについての知識も必要でしょう。（いずれもCSSの仕様です。）

おしまい

つらつらと書いてみましたが、まあ誰が得するんだよって感じに仕上がりました。

うーん。まあ良いか。一応、これで本年のひとりAdvent Calendarは完走という事にしたいと思います。（うちは本家に合わせて24日で終わり。）　いやあ、明日からは早寝早起きをしたいと思います。

とっぴんぱらりのぷう。

CSS おれおれ Advent Calendar 2012 – 23日目

メールとかブログ記事とかの編集画面みたいなのがあって、それをウィンドウいっぱいに表示するとき、ウィンドウに合わせて縦方向に伸ばすのってどうしてますか？　JavaScript使っちゃいます？　それCSSで出来るよ！

ウェブサービスではあんまりないUIだと思うけど、ウェブアプリ的なものだったらよくあるのでは。

概要

ネタバレ。

height:100%で常に画面の高さに合わせつつ、固定の部分についてはpaddingで隙間を用意します。その際にbox-sizing:border-boxを指定する事で、隙間の部分まで含めた高さを指定出来るようにします。

高さを100%に出来る場合、出来ない場合について知る

昔書いたのでちらと読んでみてください。

• CSSでheight:100%を使う方法について。

一言で言うと、上位要素に高さの指定がある場合にのみ出来るという感じです。

最上位要素の高さを指定する

HTMLのドキュメントツリーにおける最上位要素といえば、もちろんhtml要素です。

あとbody要素もついでに設定しちゃいましょう。こちらは一般的なブラウザーでは、初期状態で余白が指定されているので、それもリセットします。

html, body { height:100%; margin:0; }

縦にいっぱいだけど余白がある要素をつくる

縦いっぱいに広げるのはheight:100%だけで可能です。今回やりたいのは、それに加えて固定の高さの領域を用意する、というものです。

paddingとbox-sizing:border-boxを利用します。つまりheight:100%が示す値を、paddingまで含めたものとします。

<body>
  <div class="editor">Content box</div>
</body>

.editor {
  box-sizing: border-box;
  height: 100%;
  padding-top: 30px;
}

下部領域も

同様に下方向にもpaddingを追加します。

デモ

こんな感じになりました。

実行画面を別ウィンドウで開いて、ウィンドウサイズを変えてみてください。

• 実行画面デモ（個別ページ） ←たぶんShift+クリックで別ウィンドウで開けます。

関連

• width:100%なのにはみ出す理由と回避策。CSSを触るなら必ず理解しなくてはいけないボックスモデルの話。
• CSSでheight:100%を使う方法について。

(ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 )

前提：CSSにおけるアニメーションは以下の二種類あります。

• Transitions … 変化するもの
• Animations … 動き続けるもの

今回は前者について取り上げます。後者もいずれ。

概要

transitionは値の変化をアニメーションさせる、という事を指定するものです。

例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。

常に動き続けているようなアニメーションは、animateの方の領分です。

使える場面

あくまで「変化」を対象にしているため、何らかの（主に利用者の）操作が必要です。

なので、変化する状態を示す擬似クラス（:hoverとか）や、JavaScriptでの操作が必要になります。

あーちなみにJavaScriptから操作する場合は、要素のプロパティではなくクラスの方を操作すると、実装が綺麗になるかと思います。はい。

transitionプロパティ

基本的にはこんな感じです。

  transition: <property> <duration>;

<property>はCSSのプロパティの名前、<duration>は変化の所要時間です。

他にも遷移の仕方や開始の遅延を指定する事が出来ます。（後述）

手っ取り早く全てアニメーションさせる例

今のところベンダープレフィックスが必要な感じです。

* {
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

IEは10から（ベンダープレフィックスなしで）サポートしています。

プロパティ名

colorやleftなどといった、プロパティ名を記述します。引用符等は不要です。

ベンダープレフィックス付きのプロパティは、その通りに記述する事が求められます。例えばtransformではなく-webkit-transformのようにしてやる必要があります。

またプロパティにはallという値を設定する事もできます。全てのプロパティが対象になります。なお、全て、といってもそもそもアニメーションするもの、しないものがあります。

所要時間

所要時間は2.5sのように記述します。（これは2.5秒 (seconds)の例。）

ちなみにCSSの仕様上、0台の小数点を持つ数値、例えば0.1はゼロを省略して.1のように記述する事ができます。

複数の指定

<property> <duration>はカンマ,で区切って複数指定する事ができます。allより個別に指定した方が、想定外の動きをする場面が少なくなるかと思います。

アニメーションするもの、しないもの

プロパティの値によって、アニメーションするかどうかが定まります。例えば書体font-familyなんかは対象外で、瞬時に変わります。（モーフィングみたいにはなりません。）

基本的には値が数値であればアニメーションすると考えて良いでしょう。

アニメーションするプロパティ一覧

visibilityは特殊

数値ではないのですが、「0か1か」という数だと考えられるみたいです。ただしあくまで「0か1か」で考えるので、絵的にはアニメーションしていないように見えます。

その他のプロパティ

また仕様には含まれていないものの、ブラウザーがアニメーションするよう実装しているものもあるようです。

以下はGeckoでサポートしている、らしいです。

• background-size
• border-*-radius
• box-shadow
• column-count
• column-gap
• column-rule-color
• column-rule-width
• column-width
• font-size-adjust
• font-stretch
• marker-offset
• text-decoration-color
• transform
• transform-origin

手元のFirefoxではたしかにbox-shadowがアニメーションしましたが、Google Chromeでは対応していないようです。

まあ確かに色や数値を取るプロパティなので、対応してくれても良さそうなものではあります。

もうちょいと詳しくしたものと、他の指定

前述した通り、durationには他にも指定があります。

以下の四種の指定を任意の順序で、空白文字区切りで記述する事ができます。

• 対象プロパティ名
• 所要時間
• 遷移方法
• 開始遅延

また上記の塊を、カンマ,で区切って複数記述する事もできます。

遷移方法

数値の変わり方

以下のいずれかを指定できます。

• ease （初期値）
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

他に、細かく数値を指定する関数もあります。

開始遅延

変化の開始を遅らせる事ができます。所要時間と同じく時間を指定します。

ばらばらに指定

durationプロパティは短縮表記用のものなので、個別に指定するプロパティもあります。

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

こちらもそれぞれカンマ,で区切って複数を指定する事が出来ます。あるn番目の指定は、他のn番目の指定に対応します。

おしまい

見た目を変えない価値がある。変えるものは、transitionで。

なんのこっちゃ。

参考

• CSS Transitions … 仕様。そんなに長くない
• CSS transitions – CSS | MDN … Mozillaの。日本語

追記

2012-12-23

遷移方法とかについて追加。