exif-js と ios-imagefile-megapixel でスマホからの画像アップロードのプレビュー表示に対応する

画像アップロードするときにプレビュー欲しいよね〜
プレビューするとたまに画像が回転されてるよね〜
スマホだと画像選択するアプリで EXIF 情報を見て回転させて表示しているから
プレビューが横向きとかになってておかしいと思われがちだよね〜

そんな問題を解決するのが exif-js です。

exif-js

jseidelin/exif-js

使い方は https://github.com/jseidelin/exif-js/blob/master/example/index.html を見てください。
例えば、アップロードされたファイルに対して Orientation を取得する場合は以下のように記述します。

$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
    });
});

EXIF 情報を取得するメソッドが提供されていて、
EXIF.getTag(file, "Orientation") で Orientation を取得できるようだけど
取得できないこともあるみたい？で file.exifdata.Orientation で直接取得してしまっています。
よくわからないので動作確認してもらえればと思います。

さて Orientation は取れましたが、どうやって画像を回転しましょう。
そんな時は megapix-image.js が便利でした。

megapix-image.js

stomita/ios-imagefile-megapixel

iOS とか入っていますが気にしなくても大丈夫です。
megapix-image.js は大きな画像を表示する際に便利なライブラリですが、
回転もやってくれるので表示は全部任せてしまいましょう。
スマホからだと数 MB 〜 十数 MB の画像が平気でアップロードされるので
普通にプレビューさせようとするとブラウザごとメモリ不足で落ちることがあるのでが
megapix-image.js を使えば、そういったことが少なくなります。
(※直接は見たことないが、画面が真っ暗になるなどの報告を受けたことがあるので銀の弾丸ではない？)

さきほどの exif-js と組み合わせて使うには以下のようにします。

$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
        var mpImg = new MegaPixImage(file);
        mpImg.render($("#jsPreviewImage")[0], { orientation: orientation });
    });
});

まとめ

これで回転している大きな画像をプレビュー表示することができるようになったと思います。
まれに表示できないこともあるらしいので、もっと良い方法があれば教えて下さい。

jquery.transform.js で CSS3 の transform をアニメーションさせる

要素を CSS3 の transform で移動・回転・拡大縮小などさせつつ、
アニメーションもさせたい場合に便利な jQuery プラグインを紹介します。

jquery.transform.js

eenox/jQuery-3D-transform

このプラグインは指定の面倒な transform 属性を簡単に指定できるようにします。
transform 属性については transform－CSS3リファレンス を参照して下さい。
transform 属性は各種変換関数をスペース区切りで指定しなくてはならないので面倒でしたが、
普通の CSS の属性を扱うように transform 属性の関数を扱うことができます。

$(".transform").css({
    "top": top1,
    "left": left1,
    "opacity": "0",
    "rotate": rotate1 + "deg",
    "scale": "2, 2"
  }).animate({
    "top": top2,
    "left": left2,
    "opacity": "1",
    "rotate": rotate2 + "deg",
    "scale": "1, 1"
  }, 2000, 'swing');

transform 属性を上記のように簡単に扱えるというだけで
アニメーションさせなくても使いたい jQuery プラグインです。

参考

jQueryアニメーションでCSS3のTransformを操作して拡大縮小／回転などを実装させるいろいろ | BlackFlag

かずー氏アイコンジェネレータをHTML5で作ってみた

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveという記事、
かずー氏クラスタアイコンの作り方の記事を1年前くらいに書いていました。
そこで Canvas を使用してかずー氏 (@kazoo04)のアイコン背景と
@wada811 のアイコンを合成できていたので
ユーザーがアップロードした画像を読み込んで
同じように Canvas に表示してあげて合成すれば
かずー氏アイコンジェネレータになるのではないか
というのがこのプロジェクトの始まりでした。

そして、途中で開発が止まるなど紆余曲折がありましたがついに完成しました！
かずー氏アイコンジェネレータ

わずか 3STEP で、かずー氏アイコンを作成できるという優れものです。
(本当はページ開いた瞬間にファイル選択が出て、選択したら自動ダウンロードということもできます。)
今回サーバいらずで、クライアントサイドの技術のみでかずー氏アイコンを生成することができます。
この手のちょっとしたネタサイト作るためにサーバの用意とかお金かけるとかしたくない人におすすめです。

技術的な話

Drag and Drop API

実は画像をドラッグ・アンド・ドロップでアップロードすることが可能です。
デザイン上、ドラッグ・アンド・ドロップができるとわかるようになっていないので
何かいい感じのデザインになる Pull Request を待っています。

Drag and Drop API 機能の実装は簡単で、ドラッグ・アンド・ドロップ系のイベントを適切に処理するだけです。

<canvas id="jsKazoo04Icon"></canvas>

$(document).ready(function(){
    // ...
    addDropListener('jsKazoo04Icon');
});

function addDropListener(id){
    var jsDropBox = document.getElementById(id);
    document.addEventListener('dragover', dropNone);
    document.addEventListener('drop', dropNone);
    jsDropBox.addEventListener('dragover', dropCopy);
    jsDropBox.addEventListener('drop', drop);
}

ブラウザに画像ファイルをドロップすると画像をそのまま表示してしまうので処理を止めています。

document.addEventListener('dropover', dropNone); 
document.addEventListener('drop', dropNone);

function dropNone(event) {
    event.stopPropagation(); // イベントのバブリング(親要素への伝搬)を停止する
    event.preventDefault(); // ブラウザのデフォルトの処理(画像の表示)を防ぐ
    event.dataTransfer.dropEffect = 'none'; // D&D中のファイルにアイコンがつかないようにする
}

ドロップを受け付ける要素に addEventListener でリスナーを登録します。

jsDropBox.addEventListener('dragover', dropCopy);
jsDropBox.addEventListener('drop', drop);

function dropCopy(event) {
    event.stopPropagation(); // イベントのバブリング(親要素への伝搬)を停止する
    event.preventDefault(); // ブラウザのデフォルトの処理(画像の表示)を防ぐ
    event.dataTransfer.dropEffect = 'copy'; // D&D中のファイルにプラスアイコンがつくようにする
}

function drop(event){
    // 画像ビューアとして開かないようにする
    dropCopy(event);
    // ドロップされたファイルを取得
    var file = event.dataTransfer.files[0];
    if(file.type !== 'image/png'){
        alert('PNG画像のみを受け付けています。');
        return;
    }
    handleFile(file);
}

参考
[HTML5] Drag & Drop API おさらい 「ファイルの DnD」 ｜ Developers.IO

JavaScript から参照する要素には js プレフィックスをつけたほうがいいよという話。
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log

File API

input[type="file"] で画像アップロードを受け付け、
アップロードされた画像をプレビュー表示する際に使用しました。

<input type="file" id="jsUpload" class="upload" onchange="upload(this.value)" accept="image/*" />

まず、画像のみを受け付けるためには accept="image/*" を指定します。
参考
HTML5時代のinput要素のaccept属性について | 富永日記帳
4.10.5.1 States of the type attribute — HTML Standard

input[type="file"] で画像アップロードした際のイベントを取得するには onchange="upload(this.value)" を指定します。
今回は fileName は未使用ですが、何かに使えるかも？
スマホの場合はセキュリティのためダミーのパスが入るので使えないかも？

function upload(fileName){
    var files = document.getElementById('jsUpload').files;
    var file = files[0];
    handleFile(file);
}

File API で画像を読み込みます。

function handleFile(file){
    var fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    // ファイル読み込み失敗時
    fileReader.onerror = function(e){
        alert('画像の読み込みに失敗しました。');
    };
    // ファイル読み込み完了時
    fileReader.onload = function(event){
        var image = new Image();
        image.src = event.target.result;
        image.onload = function(){
            // 画像が読み込み完了したら Canvas に描画
            var canvas = document.getElementById('jsKazoo04Icon');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);
        };
    };
}

参考
Using files from web applications | MDN

Canvas を toDataURL で Data URL 形式の画像に変換する

解説はしていないがHTML/CSS/JavaScriptを駆使した画像の重ね方 でもできていたもの。
Canvas の描画内容を Data URL に変換して画像タグを貼り付けるだけです。

function generateKazoo04Icon(){
    var canvas = document.getElementById('jsKazoo04Icon');
    var ctx = canvas.getContext('2d');

    var dataURL = canvas.toDataURL('image/png');
    var imgTag = '<img src="' + dataURL + '" width="' + canvas.width + '" height="' + canvas.height + '" alt="かずー氏背景合成画像">';
    $('#jsKazoo04Icon').after(imgTag).remove();
    // ...
}

Data URL 形式の画像を Blob に変換して Blob URL 形式に変換

Canvas に toBlob もあるのですが、ほとんどのブラウザで実装されていないようです。
仕方ないので dataURL から Blob に変換する関数をかませて
window.URL.createObjectURL で Blob URL 形式に変換します。

function generateKazoo04Icon(){
    // ...
    var blob = Base64toBlob(dataURL);
    window.URL = window.URL || window.webkitURL;
    $('#jsDownload').attr("href", window.URL.createObjectURL(blob));
}

function Base64toBlob(_base64){
    var i;
    var tmp = _base64.split(',');
    var data = atob(tmp[1]);
    var mime = tmp[0].split(':')[1].split(';')[0];

    //var buff = new ArrayBuffer(data.length);
    //var arr = new Uint8Array(buff);
    var arr = new Uint8Array(data.length);
    for (i = 0; i < data.length; i++) {arr[i] = data.charCodeAt(i);}
    var blob = new Blob([arr], { type: mime });
    return blob;
}

参考
Canvasの画像(スクリーンショット)をローカルダウンロードします。 - jsdo.it - Share JavaScript, HTML5 and CSS
Base64をblobオブジェクトに変換します。 - jsdo.it - Share JavaScript, HTML5 and CSS
URL.createObjectURL - Web API Interfaces | MDN

だいたいオッケー、でも…

Drag and Drop による画像アップロードがわかりにくい点、
読み込んだ画像を移動、回転、拡大・縮小できない点がユーザー的に微妙ですね！
さぁあなたの Pull Request を待っています！

ちなみに「読み込んだ画像を移動、回転、拡大・縮小できない点」は
Fabric.js Javascript Canvas Libraryというものを使えば解決できます。

まだ時間をかければ実装はできますが、とりあえずリリースすることが大事ってばっちゃが言ってた。

郵便番号フィールドにinput[type="number"]を使ってはいけない

スマホサイトを制作したのだがフォームにフォーカスを当てた際に出るキーボードを
数字キーボードにしたいという要望があったので
input[type="number"] や input[type="tel"] を使えば良いと聞いていた俺は
それぞれ郵便番号と電話番号のフィールドの type を text から変更したのだけど
input[type="number"] には罠があったので共有します。
input[type="number"] というよりは iOS の Safari にある罠です。

iOS の Safari は input[type="number"] のフィールドで入力値がゼロ始まりの数値の場合、頭のゼロを自動で除去する

この仕様…あのおせっかいな Excel を思い出す仕様だぜ…ｷﾞﾘｯ…

例えば皇居の郵便番号 100-0001 は分割された郵便番号フォームの後ろの部分が以下のように頭ゼロになります。
-
表示上は iOS でも全く問題ないのだけれど POST するタイミングで iOS の Safari は 0001 を 1 に変換します。
ベーシックなバリデーションで郵便番号 7 桁とか判定して 7 桁入力してくださいとかエラー出すと
ユーザーは 7 桁入力したのにとなるので確実にクレームものです。
iPhone を普段使いしていない僕は完全に油断してやられました。
iOS のみで起こり、input[type="number"] でゼロ始まりの数値を POST した時にようやく分かるバグです。
全く油断もすきもありません。

とりあえず対処として input[type="text"] に戻しました。
input[type="tel"] に変えるのも一瞬考えましたが
電話番号でないフィールドに input[type="tel"] を適用するのも
またろくでもないことになりそうだったのでやめておきました。

画像の重ね方メイキング ~ HTML5validなOGPとかTwitterCardsとかjQueryUIとかTwitterBootstrapとかgoogle-code-prettifyとか

HTML/CSS/JavaScriptを駆使した画像の重ね方 | DevAchieveで制作した
サンプルページ「Way to cover an image with another image」で
色々普段使わないものを使ったので忘れないようにメモしておく。

HTML5validなOGP設定

後述の Twitter Cards が HTML5invalid だよーというのを聞いて
バリデーションにかけてみたら見事にエラーが出てきた。
xmlns 属性による指定ではなく、 prefix 属性で指定しなさいということらしい。

<html lang="ja" prefix="og: http://ogp.me/ns#">

関連
The W3C Markup Validation Service
OGPの記述後もValidなHTML5文書にするマークアップ方法のメモ｜Blog｜Skyward Design
The Open Graph protocol

Twitter Cards

Twitter Cards を指定すれば Web でツイートを開いた時にサイトの情報を表示できるので指定してみた。
Way to cover an image with another imageの指定で言えば以下のような感じ。

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://wada811.github.com/sample/imageCover/index.html">
<meta name="twitter:title" content="Way to cover an image with another image">
<meta name="twitter:description" content="HTML/CSS/JavaScriptを駆使した画像を重ねる方法のまとめ。HTML5(Canvas)/CSS3もあるよ！画像は@kazoo04氏のアイコン素材を使わせて頂きました！ありがとうございます！">
<meta name="twitter:image" content="http://wada811.github.com/sample/imageCover/img/kazoo04-background.png">
<meta name="twitter:site" content="@wada811">
<meta name="twitter:creator" content="@wada811">

しかし、これは HTML5invalid である。name 属性に知らない値が設定されているのでエラーになる。
Twitter Cards meta - HTML5 Validation issue | Twitter Developersのコメントには
name を property に変えれば良いと書かれている。
試しに以下のプレビューツールで確認すると問題なく表示されることがわかる。
Preview your Twitter Card | Twitter Developers
ちなみにキャッシュがあるようで適当な指定でツイートしてしまうと
その後、指定を変えてもしばらくは反映されないので注意。
無用なトラブルを避けるために確認はプレビューツールでしよう。
関連
Twitter Cards | Twitter Developers

jQueryUI で リッチなタブ UI を作る

適当にソースコードを載せたらコレ以上に縦長になってしまうし、jsdo.itみたいな表示がしたかったので
探したらjQuery UIのタブが良さそうだった。
実装も簡単だし、他の UI も便利そうだったから色々使っていきたい。
関連
Tabs | jQuery UI

Twitter Bootstrap

Twitter Bootstrap は前にも使ったことあるけど一応。
Canvas で合成した画像を作成するときのボタン用に。
あとソースコード表示にも使った。
関連
Buttons | Base CSS | Bootstrap

google-code-prettify

Twitter Bootstrap のソースコード表示に使われている google-code-prettify を今回は使った。
Twitter Bootstrap と組み合わさった時の表示がいまいちだったのでスタイルをいじった。

.prettyprint {
    margin: 0 !important; /* Twitter Bootstrap が pre.prettyprint に margin-bottom をつけるため */
    overflow-x: scroll;
}

関連
Bootstrap：google-code-prettify

Canvas で複数枚の画像を描画、合成する

先人のおかげでほとんど苦労せずに描画することができた。
Canvas ってサイズ指定を CSS でできない？気のせいか効かなかったので JavaScript で指定した。
参考
Canvasに画像を複数枚重ねて描画するには » RIAxDNP
sinatra + html5_canvas + jquery 画像ドラッグドロップでファイル保存 - 麺処　まつば

HTML/CSS/JavaScriptを駆使した画像の重ね方

いわゆる、かずー氏クラスタアイコンの作り方

Way to cover an image with another image
サンプルページへはこちらのリンクまたは画像をクリック！

私@wada811のアイコンが、
他の人のかずー氏クラスタアイコンのように
全体サイズになっていないのは
重ねるのが簡単すぎて
重ねたい画像が同じサイズの特殊事例にしか
対応できないように見えるため
あえて小さく重ねています。

方法としては6つもありました！
正直自分でも驚きです。

1. background: absolute; で絶対配置で重ねる方法
2. 背景画像を指定した div に img タグを置いて重ねる方法
3. 2の方法を擬似要素 :after の content: url() で重ねる方法
4. 3の方法で content ではなく背景画像に指定して重ねる方法
5. CSS3 の複数画像の背景指定で重ねる方法
6. Canvas で複数画像を読み込んで重ねる方法

background: absolute; で絶対配置で重ねる方法は安心安定の指定方法。

HTML の記述量が多くなるので繰り返しが多い部分には使いたくないが、
ワンタイムのページでいちいち CSS ファイルを編集するのがめんどくさい時には便利。

背景画像を指定した div に img タグを置いて重ねる方法はプログラムで使いやすい。

背景画像をプログラムなどで差し替えたいときや、
状態判定してカバー画像をかける、かけないというの場合分けなどで便利。

2の方法を擬似要素 :after の content: url() で重ねる方法は IE7 以下で使えない。

今回は transform: scale(); で無理やり画像を小さくしているので
IE8 で画像が小さくならなくて背景画像をはみ出てしまう。
使うときはちゃんとサイズの合った画像を使おう。

3の方法で content ではなく背景画像に指定して重ねる方法は IE8 以下で使えない。

CSS3 の background-size を使っているので IE8 以下は画像が小さくならなくて切れてしまう。
使うときはちゃんとサイズの合った画像を使おう。

CSS3 の複数画像の背景指定で重ねる方法は IE8 以下で表示すらできない。

background-image が CSS3 で複数枚の画像を指定できるようになっている。
この使い方では微妙だが、サイトの画像をコンポーネント化できるので微妙に違う画像が多い時は便利かも？
スマホなら background-image の複数画像指定をサポートしているはずなので
画像を色んな組み合わせで一つの画像として表示したいときに使えるかも。
キャッシュされればそれぞれ早くなりそうな気がする。

Canvas で複数画像を読み込んで重ねる方法は IE8 以下では使えない。

IE8 以下でも Canvas を使えるようにするライブラリもあるようだが完全ではないようです。
参考: HTML5 CanvasをIEにも対応させる魔法excanvasの使い方 | DECONCEPTER
複数の画像を合成した画像を Data URI スキームで表現できるので
サンプルページにあるように Canvas で作った画像を画像タグで置換することもできる。

最後に

目的に合わせていろいろな方法を使いこなせるようになろう。
Canvas を使って面白そうなことができるのでやってみたい。

@kazoo04のアイコン素材を使わせて頂きました。
この場を借りて感謝します。ありがとうございます。

jQuery1.9以上対応版クロスブラウザ対応アニメーションスクロール

jQuery.browserが使えなくなったため、
クロスブラウザ対応！jQueryのアニメーションスクロール | DevAchieveで
使用している animatedScroll 関数は動かなくなります。たぶん。
なので jQuery 1.9 に対応した形で作り直しました。

サンプルページはこちら。
jQuery animated scroll sample page

function animatedScroll(selector, speed, animation, complete){
    var isScrolled = false;
    var setScrolled = function(){
        isScrolled = true;
    }
    $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
    if(isScrolled){
        complete();
    }else{
        $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
    }
}

設定の仕方は以前と同じ。

変数	渡せる値	デフォルト値 (nullを渡した時)	説明
selector	jQueryの要素取得の記法	なし(動かない)	関数内で要素の取得を行なっている。
speed	slow | fast | 任意の数値 | null	400ms	slow: 600ms, fast: 200ms
animation	linear | swing | null	linear	linearは等速、swingは加速して減速する。
complete	(function) | null	なし(何も行わない)	スクロール完了のコールバック関数。

<input type="button" class="btn btn-primary" value="Slow Linear Scroll" onclick="animatedScroll('#invite', 'slow', 'linear', onScrolled)" />
<input type="button" class="btn btn-info" value="Fast Linear Scroll" onclick="animatedScroll('#invite', 'fast', 'linear', onScrolled)" />
<input type="button" class="btn btn-success" value="3000ms Linear Scroll" onclick="animatedScroll('#invite', 3000, 'linear', onScrolled)" />
<input type="button" class="btn btn-warning" value="Slow Swing Scroll" onclick="animatedScroll('#invite', 'slow', 'swing', onScrolled)" />
<input type="button" class="btn btn-danger" value="Fast Swing Scroll" onclick="animatedScroll('#invite', 'fast', 'swing', onScrolled)" />
<input type="button" class="btn btn-inverse" value="3000ms Swing Scroll" onclick="animatedScroll('#invite', 3000, 'swing', onScrolled)" />
<script><!--
    var onScrolled = function onScrolled(){
        if(!confirm('お分かりいただけただろうか？')){
            animatedScroll('#top', 'fast', 'swing', null);
        }
    };
    function animatedScroll(selector, speed, animation, complete){
        var isScrolled = false;
        var setScrolled = function(){
            isScrolled = true;
        }
        $('html').animate({scrollTop: $(selector).offset().top}, speed, animation, setScrolled);
        if(isScrolled){
            complete();
        }else{
            $('body').animate({scrollTop: $(selector).offset().top}, speed, animation, complete);
        }
    }
--></script>

Retinaディスプレイ対応のマルチサイズfaviconの作り方と指定方法

前にDon't Forget About Favicons on Retina Screensで
Retina ディスプレイ用の favicon を作らなきゃなぁと思っていたのだけどすっかり放置していた。
ググってみるとちょうどいい記事を発見した。
Retinaディスプレイに対応できるマルチサイズのファビコンの作り方。 | オレっち.com
Bradicon! でマルチサイズ favicon が作れる。
Bradicon! - converting icons since... LITERALLY FOREVER
include large icons にチェックして Browse で favicon にしたい画像を選択したら生成されるまで待つだけ。
生成されたら画像をクリックすればダウンロードできる。
ico ファイル が 1 ファイルだけなんだなぁと思ったらマルチサイズに対応していて、複数入っていて驚き！

後はコレを以下のように指定すれば良いらしい。

<link rel="shortcut icon" href="http://www.your-domain.com/favicon.ico">

HTML5 だと shortcut はいらなくて icon だけで良いらしい。Favicon（ファビコン）に纏わる色々 | 10press

<link rel="icon" sizes="16x16 32x32 48x48 128x128 256x256" href="http://www.your-domain.com/favicon.ico">

HTML5 から sizes 属性を指定できる。スペース区切りで指定すれば良い。4.12 Links — HTML 5.1
MIME タイプは ico ファイルなら指定しなくても良いかも？
どうせ IE が ico ファイルしか対応していないっぽいし。Favicon - Wikipedia, the free encyclopedia

[SublimeText]Emmetを使いこなすためのショートカットキー

Emmet には便利なショートカットキーがあるのでまとめておく。
Actions | Emmet Documentation

Expand Abbreviation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで
説明した事ができる。詳しく書いているのでぜひ見てほしい。

Match Tag Pair

[SublimeText2]Bracket Highlighterで括弧を強調表示する | DevAchieveの括弧内全選択のHTML限定版。
キーひとつで範囲広げたりできるのでHTMLメインならEmmetの方が便利。

Sublime Text 2 では単語選択のショートカットとかぶっているのためか、ショートカットキーが異なる。

Ctrl + d: 選択範囲拡大

Ctrl + j: 選択範囲縮小

Go to Matching Pair

開始タグと終了タグを行き来できる。

Sublime Text 2 では開いているタブ一覧をパレットで開くショートカットキーと被るため、

Ctrl + Shift + t で開始タグと終了タグを行き来する。

Wrap with Abbreviation

後から要素を略語で囲める。自動でインデントを下げてくれて便利。

Sublime Text 2 では頭文字をとって Ctrl + w でコンソール？が開くので

記入していけば変換されていき、展開結果のプレビューが見れる。
エンターを押せば変換を確定する。

Wrapping individual lines

複数行選択すれば各行に対して囲みタグ展開できる。
ドキュメントでは複数行のテキストからリストタグを囲みタグ展開している。

Controlling output position

$# を使えばテキストを使いまわせるので凄く便利。

First
Second
Third
Forth

<ul>
    <li><a href="" title="First">First</a></li>
    <li><a href="" title="Second">Second</a></li>
    <li><a href="" title="Third">Third</a></li>
    <li><a href="" title="Forth">Forth</a></li>
</ul>

Go to Edit Point

前後の編集点を移動できる。
Sublime Text 2 でもショートカットは同じ。

Ctrl + Option + →: 次の編集点に移動

Ctrl + Option + ←: 前の編集点に移動

Select Item

アイテム(タグ、属性名="属性値"、属性値)を選択する。
Sublime Text 2 でもショートカットは同じ。

Command + Ctrl + .: 次のアイテムに移動

Command + Ctrl + ,: 前のアイテムに移動

CSSでも利用可能で、セレクタ、プロパティ: 値、値全体、複数ある場合は個別の値を移動できる。

Toggle Comment
コメントアウト/アンコメントできる。※コメントアウトの対義語はアンコメントらしい。

Command + /: コメントアウト/アンコメント切り替え

Split/Join Tag
XML の空要素タグを分割したり結合したりできるらしい。HTML では出番がない。
参考:
HTML5の空要素タグの文法 - 徒書
scriptタグは空要素っぽく閉じると，FirefoxやIEで読んでもらえない ::ハブろぐ

Remove Tag

親のタグを除去する。

Sublime Text 2 では Command + ' らしいのだが動かなかった。

仕方ないので自分で Ctrl + r に設定した。

Merge Lines

選択された複数行を1行にする。
Sublime Text 2 には何故か設定が入っていなかったので以下の設定をキーバインドに追加した。

{
    "keys": ["super+m"],
    "args": {"action": "merge_lines"},
    "command": "run_emmet_action"
}

Command + m を潰すことによって最小化を防ぐ狙いもあり。

Update Image Size
画像ファイル名の上で実行すると画像サイズを保管してくれる。
静的ページを制作する場合は最高に便利だろうなー。
ファイルパスに PHP のコードが入った場合は動かなそうだけど試してないからわからない。

Evaluate Math Expression

計算をしてくれる。通常の計算式の他に \ で 四捨五入( round(a/b) ) が行われる。
流石にカッコつき計算式とかは無理だったので単純な計算のみ。
HTML/CSS で行う計算は単純な四則演算のみなので問題ない。

Sublime Text 2 でも Command + Shift + y で計算できる。

Increment/Decrement Number

数値をインクリメント/デクリメントする。
キャレットが数値の上でないと反応しないので px とかの単位部分でも反応して欲しい気がする。
あと Sublime Text 2 では動かなかった。
微調整は Google Chrome developer tool でやるし、普通に打ったほうが速いからいらないかも。

Reflect CSS Value

CSS の値の変更を展開する。
ベンダープレフィックス系の値を Command + b で一括で変更できるので便利。

Encode/Decode Image to data:URL

画像を base64 エンコード/デコードする。

Sublime Text 2 では Ctrl + Shift + d でできるらしい。

Emmet 関連記事

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve
Emmet v1.0がリリース！ナンバリング展開が逆順に対応！ | DevAchieve
[SublimeText]Emmetで高速HTML/CSSコーディング CSS編 | DevAchieve

Emmet v1.0がリリース！ナンバリング展開が逆順に対応！

まず、Emmetって何？って人は以下の記事を見てください。
[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieve

リリース時のブログの記事はこちら → Emmet v1.0 is out
ベータ版からも細かく色々改善されているけど、
ナンバリング展開がかなり強化されていたので解説します。

ナンバリング展開

ul>li.item$*5>lorem3

<ul>
    <li class="item1">Lorem ipsum dolor.</li>
    <li class="item2">Saepe debitis itaque.</li>
    <li class="item3">Placeat amet veniam.</li>
    <li class="item4">Perferendis minima accusamus!</li>
    <li class="item5">Possimus velit iusto!</li>
</ul>

$マークが数値に展開されるというベータ版でもあった機能です。

逆順展開

ul>li.item$@-*5>lorem3

<ul>
    <li class="item5">Lorem ipsum dolor.</li>
    <li class="item4">Recusandae hic alias.</li>
    <li class="item3">Eos porro nobis!</li>
    <li class="item2">Nemo ratione distinctio!</li>
    <li class="item1">Pariatur quod exercitationem!</li>
</ul>

@修飾子を付加することによってナンバリングの始点が展開されます。
-修飾子でナンバリングを逆順に展開することができます。

逆順ナンバリング展開の終点指定

ul>li.item$@-3*5>lorem3

<ul>
    <li class="item7">Lorem ipsum dolor.</li>
    <li class="item6">Est accusantium corporis.</li>
    <li class="item5">Sed delectus illum.</li>
    <li class="item4">Repudiandae inventore itaque.</li>
    <li class="item3">Esse quos error.</li>
</ul>

-修飾子の後に数値を書くことでその数値が終点になるように逆順に展開してくれます。
つまり、上記の逆順展開は以下の省略形であることがわかります。

ul>li.item$@-1*5>lorem3

ナンバリング展開の始点指定

ul>li.item$@3*5>lorem3

<ul>
    <li class="item3">Lorem ipsum dolor.</li>
    <li class="item4">Quaerat doloremque dicta?</li>
    <li class="item5">Fugiat alias labore.</li>
    <li class="item6">Assumenda corporis quis.</li>
    <li class="item7">Illo perferendis totam.</li>
</ul>

逆順展開の終点が指定できるということは
通常のナンバリング展開でも始点を指定して展開できるのでは？と考えたあなたは鋭いです。
ちなみに数値を指定せずに以下のように書くと通常のナンバリング展開と同様に展開されます。

ul>li.item$@*5>lorem3

デフォルトで1が指定されたものと同じ動作をしますので
$@ で一つの修飾子として覚えてしまうのが良いかもしれません。

ドキュメントはこちら → Abbreviations Syntax #Item numbering: $ | Emmet Documentation

[SublimeText]Emmetで高速HTML/CSSコーディング HTML編

CSSセレクタのルールでHTMLを記述できるEmmetが凄い！

Sublime Text 2 を使い始めた理由の半分が
Emmet で高速 HTML/CSS コーディングしたかったからだ。
Emmet の凄さを見ればきっとあなたも使いたくなるだろう。
百聞は一見に如かずだ。
Emmet Documentationでその凄さを見てきてほしい。
Sublime Text 2 へのインストールは sergeche/emmet-sublime · GitHub から。
ここではHTML展開の基本をまとめたいと思う。

トリガー

タブまたはCtrl+Eで以下のような変換ができる。

HTMLの展開

要素名

タグ名を入力してトリガー発動するだけ。タグ名でなくてもタグっぽく展開する。

ネスト演算子

子: >

ul>li

<ul>
    <li></li>
</ul>

兄弟: +

div+div

<div></div>
<div></div>

親: ^

ul>li^div

<ul>
    <li></li>
</ul>
<div></div>

複数回も可能

div>ul>li^^div

<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

掛け算: *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

グループ: ()

table>(tr>(th+td))*3

<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

属性演算子

id と class

ul#nav>li.item

<ul id="nav">
    <li class="item"></li>
</ul>

複数クラスを指定することも可能

div.btn-group>button.btn.btn-primary*2

<div class="btn-group">
    <button class="btn btn-primary"></button>
    <button class="btn btn-primary"></button>
</div>

カスタム属性

img[src alt="プロフィール画像"]

<img src="" alt="プロフィール画像">

ナンバリング

ul>li.item$*3

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

ゼロパディングも設定可能

ul>li.item$$*3

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

テキスト: {}

{詳しくは}+a{こちら}+{。}

詳しくは<a href="">こちら</a>。

テキストは親を変更しない。それによって意図しない結果が展開されることがある。

span{詳しくは}+a{こちら}+{。}

<span>詳しくは</span><a href="">こちら</a>。

span タグの中に a タグを書きたい場合は以下のように書く。

span>{詳しくは}+a{こちら}+{。}

<span>詳しくは<a href="">こちら</a>。</span>

暗黙的なタグ名

タグ名を入力せずに展開するとその場所によってタグ名が自動的に指定される。

ブロック要素内: div
インライン要素内: span
ul, ol 要素内: li
table, thead, tbody, tfoot 要素内: tr
tr 要素内: td
select, optgroup 要素内: option

ダミーテキスト: Lorem Ipsum

ダミーテキストとして “Lorem Ipsum” generator を使用することができる。

lorem または lipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quam dolor vitae blanditiis totam a nemo. Aperiam necessitatibus numquam cum eligendi molestias corporis sunt facere molestiae autem omnis magnam earum.

単語数を決めて展開することもできる。

lorem10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptas.

上記の暗黙的なタグ名解決を利用することができる。

ul>lorem2.item*2

<ul>
    <li class="item">Lorem ipsum.</li>
    <li class="item">Dolores ratione.</li>
</ul>

次回

次回はCSS編を予定。HTMLも凄いけどCSSも凄い！使いこなして高速コーディングしたい。

2012年に @wada811 が読んだ技術書まとめ

2012年も終わりに近づいているので@wada811が読んだ技術書を振り返ってみようかと思います。

2012/01/14 [書評]Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト | DevAchieve

趣味でやっていたHTML/CSSを業務レベルに上げるために基礎からおさらいしました。
最近HTML5が仕様策定完了したのでHTML5/CSS3バージョンで出して欲しいですね。
CSS3まだまだぐちゃぐちゃしてて無理かもしれませんが…。(linear-gradientとか使ってみたけど酷い…)

2012/01/15 [書評]WEB+DB PRESS 総集編 [Vol.1～60] | DevAchieve

ちょっとずつ読んでいって最近全部読み終わりました。
流石に古くかったり、やってない言語などは参考にはならなかったけど
普遍的な内容は結構勉強になった。効率が良いかと問われると微妙だと言わざるをえないけど…。
最近の号はやはり得るものはそこそこ多いので普通に買うのはありかもしれません。

2012/01/15 [書評]良いコードを書く技術　読みやすく保守しやすいプログラミング作法 | DevAchieve

ある程度良いコードを書けていればリーダブルコードを読んだ方が得るものもあるんじゃないかと思います。
原典にあたる重要性を教えてくれるのと参考文献を紹介してくれるのでそこはいいと思います。

2012/01/15 [書評]コンピュータはなぜ動くのか ～知っておきたいハードウエア＆ソフトウエアの基礎知識～ | DevAchieve

2012/01/15 [書評]プログラムはなぜ動くのか 第２版 知っておきたいプログラムの基礎知識 | DevAchieve

2012/01/15 [書評]ネットワークはなぜつながるのか 第2版<br>知っておきたいTCP/IP、LAN、光ファイバの基礎知識 | DevAchieve

なぜ〜なのかシリーズ。レビューを書いたのがこの日というだけでさすがに1日で3冊読めるものじゃない。
基本情報技術者を取るのと、ソフトウェア会社でエンジニアになるにあたって
非情報学科の大学生だった俺がとりあえず基礎知識を仕入れておかねばと読んだ本です。
まぁそこまで無駄ではなかったと思いたいです。ネットワークはちんぷんかんぷんのままだったけど…。

2012/03/31 [書評]できる逆引き Excel VBAを極める 勝ちワザ700 2010/2007/2003/2002対応 (「できる逆引き」シリーズ) | DevAchieve

内定先アルバイトでExcel VBAをやるのに読んだ本です。なかったら結構きつかったかも。

2012/03/30 [書評]よくわかるPHPの教科書 | DevAchieve

レビュー日だから日付が前後してますが、読んだのはこっちが後です。
プログラミング言語はもういくつか使っていたのでPHPでどんな事するのかの概要を知るために買ってみました。
プログラミング経験があればプロになるためのWeb技術入門と
プロになるための PHPプログラミング入門で十分な内容だったかも。

2012/04/15 基本情報技術者試験を受験するまでに使った参考書3冊 | DevAchieve

基本情報技術者試験に受かったので使った参考書のレビューをしました。
改訂新版 基本情報技術者 らくらく突破 表計算はオススメだと思います。
後は過去問やっておけばなんとかなるような気がしますね。
そのくらい過去問でやってたことが形を変えて出てきます。

2012/04/21 [書評]プログラミングの宝箱 アルゴリズムとデータ構造 第2版 | DevAchieve

基本情報技術者試験に受かったはいいものの、情報科出身ではないのでアルゴリズムとデータ構造について
まともに学んだことがなくてイマイチな得点だったので勉強のために読んでみました。
アルゴリズムとデータ構造について学んだことがない人は読んでおくといいと思います。

2012/04/25 [Twitter][API]改訂で2012年5月14日までに開発者がするべきこと | DevAchieve

Twitter API ポケットリファレンスの事もちょっと書いている記事なので。
TwitterのAPIを叩くなら結構必須だと思います。かなり役に立ちました。
TwitterのAPIが1.1にバージョンアップしますが読んでおくと1.1のこともわかりやすいかもしれません。

2012/05/12 [書評]よくわかるiPhoneアプリ開発の教科書【iOS 5＆Xcode 4.2対応版】 | DevAchieve

iPhoneアプリを作ることになってXcodeやInterface Builderの使い方がぜんぜんわからなかったので
そのへんを解説している一番簡単そうな本を読んでみました。
iPhoneを使っていなかったのでどんな機能、どんなパーツがあるかを知ることができたのは良かったと思います。

2012/05/09 [書評]詳解 Objective-C 2.0 第3版 | DevAchieve

iPhoneアプリを作るにはObjective-Cで書くのだけれど結構他の言語とは異なっていたので
よく理解するために読んでみました。使いこなせてはいないけど理解することはできました。
もっとObjective-CをマスターしてiPhone/Android両方できますと胸を張って言えるようになりたいです。

2012/06/02 [書評]知る、読む、使う！ オープンソースライセンス | DevAchieve

昔、図書館で読んだソフトウェアライセンスの話が電子書籍になって出版されていたので読んでみました。
ソフトウェアライセンスも大事な話ですから一回は学んでおいたほうがいいですね。

2012/06/03 [書評]「プロになるためのWeb技術入門」なぜ，あなたはWebシステムを開発できないのか | DevAchieve

アプリばっかり作っていてWebとかPHPとかのあたりが全然わかってなかったのでコレで勉強しました。
コレはもっと早く読んでおきたかったというくらいの基礎知識でした。

2012/06/09 [書評]iPhoneプログラミングUIKit詳解リファレンス | DevAchieve

話はまたiPhoneに戻って今度はUIKitを解説した本です。
コレがなかったらリファレンスを読むしかなかったかもしれません。
この本はiOS4ベースで今使い物になるか不安になるかもしれませんが、
iOS5/6で追加はされましたが既存のものはそんなに変わっていないと思うので大丈夫かと思います。

2012/06/30 [書評]iPhoneアプリ設計の極意 ―思わずタップしたくなるアプリのデザイン | DevAchieve

iPhoneに限らずAndroidアプリのデザイン設計をするのにも役立つ本です。
こういうの本の内容を理解していない人がアプリって
すごく微妙だったりするので使いやすいアプリを作りたいなら必読です！

2012/07/23 [書評]達人プログラマー システム開発の職人から名匠への道 | DevAchieve

名著だと言われていたので読んでました。
実際のプログラミング、システム開発に近い所でのプログラマがどうあるべきかを説いている本です。
プログラマとしてどうあるべきか不安がある人は読んでおくといいかもしれません。

2012/07/08 日経ソフトウエアをまとめ買いしてやったぜぇ～ワイルドだろぅ？ | DevAchieve

2012/08/09 [書評]日経ソフトウエア 2012年 01月号 | DevAchieve

2012/08/12 [書評]日経ソフトウエア 2012年 02月号 | DevAchieve

2012/08/20 [書評]日経ソフトウエア 2012年 03月号 | DevAchieve

2012/09/03 [書評]日経ソフトウエア 2012年 04月号 | DevAchieve

2012/09/09 [書評]日経ソフトウエア 2012年 05月号 | DevAchieve

2012/09/10 [書評]日経ソフトウエア 2012年 06月号 | DevAchieve

2012/09/16 [書評]日経ソフトウエア 2012年 07月号 | DevAchieve

2012/09/18 [書評]日経ソフトウエア 2012年 08月号 | DevAchieve

2012/09/25 [書評]日経ソフトウエア 2012年 09月号 | DevAchieve

忙しい中で効率的に最新情報を手に入れるには雑誌がいいのでは？
ということで日経ソフトウエアを購読してみました。
最初は興味が有ることが多くて良かったのだけど、
終盤は読みたい記事も少なくなりコスパ悪かったので購読やめちゃました。
他にも読みたい本あるし必要な時にちゃんとした本で情報を仕入れた方が確実な知識が手に入ると思いました。

2012/08/24 [書評]必ず結果が出るブログ運営テクニック100 プロ・ブロガーが教える“俺メディア”の極意 | DevAchieve

ネット上でよくブログ論、ブログテクニックの記事を読んでいたので目新しいことはなかったのですが、
逆にそういうのを読んでいない人は本書を読んでおくと良いかもしれません。ブログで稼ぎたい人向です。
僕はセルフブランディングと備忘録が出来ればいいのでブログで直接お金を稼ぎたいわけではないので
この本を読んでどうこうしようというのはありませんでした。技術ブログで記事量産とか無理ですし…。

2012/08/26 [書評]リーダブルコード The Art of Readable Code | DevAchieve

コードは理解しやすくなければならないという考えのもと、
理解するための時間を最短にするための実践的なテクニック集を解説している本です。
変数名には説明的な名前をつけるべきとか
どういうコメントを書くべきかとかを解説しているので読んでマスターしてください！

2012/09/04 [書評]ウェブデザインのつくり方、インターフェイスデザインの考え方。 | DevAchieve

デザインというから敬遠されがちですが、スタイリングとかデコレーション的なアートな感じではなく
設計なのでWeb系の開発者は読んでおくと良いと思います。(プログラマーもデザインを理解しておくべき論)

2012/09/11 [書評]マンガでわかるデータベース | DevAchieve

データベースの概念、基礎知識をマンガで解説した本です。
なんとなくSQLを書いたことがある人がしっかりデータベースを勉強しようと思ったら
この本から学んでいくのが良いと思います。情報処理技術者試験のデータベースあたりの勉強にも使えます。
ちなみにごっちゃになりやすい第二正規形と第三正規形の違いは連鎖があるかどうかです。(詳しくは記事へ)

2012/09/26 [書評]SQL ゼロからはじめるデータベース操作 | DevAchieve

標準SQLでRDBMSによらないSQLが書けるようになる本です。
コレ一冊でOracle, SQL Server, DB2, PostgreSQL, MySQLで動くSQLが書けるようになります。
この本をマスターしたら後のSQLは応用するだけで組めるようになるので是非マスターしましょう！

2012/10/02 [書評]プログラミングコンテストチャレンジブック [第2版] | DevAchieve

競技プログラミングをたまにやっているので勉強用にと読んでみました。
難しいこと書いてあって睡眠導入剤として優秀すぎたので読むのは諦めました…。

2012/11/03 [書評]Android SDK開発のレシピ | DevAchieve

第1版と第2版ともに読んだ本です。第2版はカメラ周りが実装にかなり役に立ちました。
その他のサンプルも役に立っているので手元において開発をしていました。

1年で書籍25冊と雑誌9冊を読んだ！

正確には書評を書いていない書籍とかあったり、つまみ読みで通して読んでない本とかあったり、
途中で読むのをやめた書籍があったりで書籍と雑誌あわせて40冊くらいだと思います。
今年読んだけど書評を書いてない本は以下のとおり。
Webを支える技術、情熱プログラマー、入門git、Objective-C逆引きハンドブック、
PHP 逆引きレシピ、平成25年度【春期】【秋期】 応用情報技術者 合格教本
12月はレビューを一冊も書いていないのですが、
これは応用情報技術者の勉強を始めたので他の本は全然読んでいないからです。

これだけ本を読んで身につけたのがObjective-CとPHPとSQLくらいでしょうか。
まだまだユニットテストとかTDDとかJenkinsでCIとかの高位な部分や、
JavaScriptやRubyなどの他の言語などをもっと学びたいです。
もっと色々なことを身につけられる機会、環境、時間が欲しいです。速さが足りない！

Webプログラマーになる前に学ぶべきこと、知っておきたかったこと

新米Webプログラマー@wada811がプログラマーになる前に学ぶべきこと、知っておきたかったことを
これからWebプログラマーになる人に向けてまとめてみました。

心構え

プログラマとして生きるための心構えとして情熱プログラマーを読んでおくのはオススメだと思います。
研修先から帰る新幹線の中で読み終わる程度の分量だったのでぜひ読んでおいて欲しいです。
さらっと読めてしまうけど学ぶことが多いので何度も読んでしまうお気に入りの本です。
コードについてはリーダブルコードを読みましょう。[書評]リーダブルコード The Art of Readable Code
志高く、良いコードを書こうという気概があれば技術者として伸びていけると思っています。こちらもぜひ！
あと、ブログを書こう！私がプログラマとしてブログを書く事をオススメする8つの理由 | DevAchieve

スキル

HTML/CSS

Web系なら基本中の基本です。
HTML5/CSS3とかアツいですし、HTML5の仕様策定も完了したのですが
ユーザーが使用するブラウザが対応していないことも多いのでまずは基本のHTML/CSSを抑えましょう。
ということで、Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイトはオススメです。
結構習うより慣れろ的なところがあるので既存のページをいじくりまわすだけでも勉強になるかと思います。

プログラミング

あんまり好きじゃないですけど最初はやっぱりC言語からなのかなぁという気がします。
最初はCの絵本や新版 明解C言語 入門編なんかを半年くらい挫折を繰り返したり
プログラミングの宝箱 アルゴリズムとデータ構造 第2版でちゃんとアルゴリズムを学んだり
AIZU ONLINE JUDGEのVolume100のものを一通りやったりとある程度できるようになるまで頑張りました。
今は3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストールがあって
通信添削もしてくれるそうですからプログラミング学習については困らなそうですね。

JavaScript/jQuery

軽く知っていると実装に幅が出て捗ります。
ガッツリ習得してなくても何とかなっているけど基本くらいは知っておきたいですね。
プロになるためのJavaScript入門が最近出て、書評とか見る限り良さげだったので読むと良さそうです。
ガチでやるならJavaScript 第6版とJavaScriptリファレンス 第6版は役立ちそうです。

正規表現

もしかしたらJavaScriptより先にこっちを習得しておくべきかもしれません。
めんどくさいテキスト処理などを一発で片付けることができたりとかなり捗ります。
習うより慣れろで覚えてしまったのでどの書籍が参考になるとかは挙げられないのですが頑張って覚えましょう！

PHP

全く知らないのでは実務で困ることが多いと思うので概要をプロになるためのWeb技術入門と
プロになるための PHPプログラミング入門で抑えておけばなんとかなるはずです。
プログラミング自体が初めてでなければめっちゃ便利なC言語の上位版みたいな感じなので大丈夫だと思います。
あとはPHP: PHP マニュアル - Manualが詳しいので関数とかをマニュアル見れば使いこなせるかと思います。
フレームワークはCakePHPがよく使われているますが、入社時に習得してなくても
CakePHP Cookbookというドキュメントがあるので入社後に習得していけば大丈夫です。

SQL

PHPに合わせてSQLも学ぶ必要がありますが、入社時にはデータベースの概要がわかっていれば十分でしょう。
マンガでわかるデータベースがわかりやすかったです。[書評]マンガでわかるデータベース | DevAchieve
SQL ゼロからはじめるデータベース操作も読んでガリガリSQL書けるようになっていると凄いです。
[書評]SQL ゼロからはじめるデータベース操作 | DevAchieve

バージョン管理システム

SubversionかGitのどちらかを知っていて軽くでも使ってみていると実務で使う際に理解が早いかと思います。
個人で使うならGitだと思うので入門gitとか読んで実際に使ってみると良いんじゃないでしょうか？
GitならGitHubでソースコードを公開できるので何か作って公開しておくとヘッドハンティングとか来るかも？

資格

資格を持っていなくても基本情報レベルの知識はあった方が良いんじゃないかと思います。
僕は基本情報は入社直後の春に取りました。基本情報技術者試験を受験するまでに使った参考書3冊
基本情報が取れればちょっと勉強すれば応用情報も取れると最近聞いて来春受験に向けて勉強してます。
資格を取ったら祝い金とか貰えるとこなら頑張るのもいいと思います。

おわりに

こう見るとWebプログラマーに求められる技術は結構幅広いですね。
広く深い知識を習得していかなければなりませんので日々勉強が必要です。
万能選手でなければならないけどもスペシャリストでもなくてはならない、
それでいて一番の下手くそでもいたい。(情熱プログラマー)
こんな師匠がいて導いてくれていたらと思い、記事を書いてみました。
僕のWeb系の師匠になってくれる人を探しています！

[CSS]等幅フォントにするためのおすすめのfont-family指定

ゴシック体のオススメのfont-family指定はわかったので、今度はソースコードなどの表示に使えるものを。

使用するフォントはCSS Font Stackでmonospaceで掲載されているものです。
ConsolasはMicrosoftが開発したプログラミング用フォントです。
Courier NewはほとんどのWindows, Macにインストールされているフォントです。

Menlo と Mac の等幅フォント – terkel.jp
Courier、Courier New、Consolas – terkel.jp
上記のページを参考に設定するなら以下のようになるかと思います。

pre, code, var, samp, kbd, .mono {
    font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
    font-size: 14px;
    line-height: 1.2;
}

見慣れない要素名があるので解説をします。詳しくはリンク先の仕様を読んでください。
code: コンピュータのコードを表示するためのタグです。
var: 変数のインスタンスやプログラムの引数を表すためのタグです。
samp: プログラムやスクリプトからの出力のサンプルを表すためのタグです。
kbd: ユーザーが入力するテキストを示すためのタグです。

【決定版】僕の考えた最強のfont-family指定

本記事は200弱ツイート、500弱のはてブと16000PVを2日で稼ぎ出した(稼いだからってどうもないけど)
[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！ | DevAchieveの反省会会場となります。
未読の方は先に読んでおくと話がわかりやすいかと思います。指定だけ見たい人はこちら。

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！の狙い

タイトルではてブや検索流入を狙う

本当は教えたくないSEO！アクセス数が20倍になったブログタイトル32文字の法則 | Chrome Lifeで
解説されている通り、はてブは全角32文字までに入れないとトランケートされてしまうので短めに。
はてブユーザーが大好きな最強とか入れておいて、読んでブクマしてもらえるようにしておきます。
「font-family 指定 オススメ」というキーワードを埋め込んでおけば今後の検索流入も見込めます。

上記の狙いが上手くハマった結果です。もはや「font-family 指定」でググると2位に出てきます。
ちなみに「font-family 指定」でググって出てきた下記のサイトを参考にしているのでそんなに外れてないはず。
font-familyなに指定する？ | Tips Note
資料：日本のコーダーのfont-family指定 | ウェビンブログ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ
いまさら聞けないCSS font-familyのまとめ: 小粋空間
CSS上級者を悩ませるフォント指定を探究するぜ2011 autumn | DAICHIFIVE blog

適当にぶっこんでおくと訂正してもらえるメソッド

フォントに詳しくないからある程度調べてそれっぽいこと書いておいたら後は
はてブユーザーが何か指摘してくれると信じてました。

Exactly(その通りでございます)

line-height の値には単位なしが良いとされる理由 - lucky bag
line-height の値には単位なしが良いとされる理由を知らなかったので勉強になりました。

コレは知りませんでした。
僕の中では三点リーダは...のイメージなので問題ないんですがそうでないデザインの時は気をつけまます。

これなんかは普通にググってもわからない情報ですよね。上手くメソッドが実行されていて嬉しいです。
しかしWindows XP以前の人たちはメイリオ指定できなかった場合は
MS Pゴシックしかない気がするのですが、他に何を指定すればいいのでしょうか？
フォント云々の前にパソコンを買い換えて欲しいところです。

その他のフォント指定おすすめなど

id:sunoho
最初はHelvetica(Neue)で安定だと思います

id:Shir
Arialより前にHelveticaを・・・

id:gmsniper2
メイリオより前にヒラギノを表記するんだったらHelvetica(Arial)と組み合わせた方がいいと思うんだよなあ

id:n-yuji
ダメダメ。5年前ならコレでよかったかもしれんが。ヒラギノはProNにすべし、Osakaは入れる必要なし。

id:masamune61
参考に。ヒラギノは馬鹿にできません。

id:solidstatesociety
ヒラギノを甘く見すぎ

id:gnta
Verdanaは横幅を取り過ぎるし極小サイズでの視認性に優れてるだけでフォントフェイスも美しくないのでBodyフォントには向かない。

id:Falky
最近はfont-familyの指定順序だけで正しくクロスブラウザ和欧混植できるの？つい1年くらい前まではWebkit以外グダグダで、表示ブチ壊れるUAもあったはず。@font-face unicode-rangeめんどくさいですね。

などなど様々な意見がありました。
ヒラギノで批判されているようですが、いまいち意図がつかめないところが残念な所です。
ヒラギノはProNにすべしと言われたので調べてみるとProNでは略字体が正しい字になるようです。
Leopardの新フォント、ヒラギノ角ゴ ProNとは | トブ iPhone
iOS 6におけるブラウザの表示フォントについて（Hiragino Kaku Gothic ProとProNでも違いが...）｜Blog｜Skyward Design
iOSでもヒラギノはProNが良さそうですのでProNで行く事にしましょう。
あと、Mac OS 9以前のために一応残しておいたけどやっぱりOsakaはいらないみたいです。
@font-face unicode-rangeまで踏み込むのはよくわからないし面倒臭すぎるのでこのへんでお茶を濁します。

最強のfont-family指定(旧)

CSS Font Stack :: A complete collection of web safe CSS font stacks :: Web Fontsや
Bootstrapを参考にして最強のfont-family指定決定版を作りました。

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

個人的にはこのブログで見る分にはVerdanaが幅広で英数字が読みやすく感じるのですが
他のサイトで使う用と考えてHelvetica系列に先を譲りました。
これで決定版を名乗ってもいいだろう。何かあったらまたご指摘下さい。

追記(2012/12/29 18:00)

萌えないごみの日: 【CSS】font-familyを指定するな。ユーザー選択に任せよ。
ユーザーの選択の尊重のためにfont-familyを指定するなという意見もいただきましたが、
Windows 7のフォント設定がデフォルトのままのIE9(ClearType有効)でこの有様です。
一部のフォントにこだわりのあるユーザーがブラウザ設定で自分好みのフォントで見れるようにするのために
大多数のフォントが設定できることも知らないユーザーにコレを見せろというのは受け入れることができません。
上記のページで言われている和文フォントと欧文フォントの不揃いを気にするならば
和文フォントのみの指定が良いかと思います。
確認用にこちらにfont sample pageを作りました。

font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', sans-serif;

メイリオがVerdanaっぽくて、ヒラギノ角ゴがHelveticaっぽくなっているので
少し違う印象を与えるのが微妙かもしれませんが、
和文フォントのみで指定するなら不揃いもなくていいかもしれませんね。

追記(2013/01/12 18:00)

上記のサイトでコメントを通して色々話しあった結果、和欧混植は不揃いが生じるので
和文フォントのみ指定、または総称ファミリを指定するのが良いという結論に至りました。
IEで総称ファミリ指定で上記のスクリーンショットのような中国語フォントが使用されてしまうバグがあるので
和文フォントを指定するのが安牌だろうと思います。
和文フォントを指定してもユーザーの環境によって表示が変わり得るのであくまで安牌ですが…。

結論: 最強のfont-family指定

body {
    font-family: 'Hiragino Kaku Gothic ProN', Meiryo, 'MS PGothic', Sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

または

body {
    font-family: Sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: normal;
}

ちなみにOperaとかいう最強伝説を持つブラウザには和文フォントは日本語で指定しないといけないので注意。

[CSS]俺好みのfont-family指定が最強に読みやすくてオススメ！

追記記事を書きました

【決定版】僕の考えた最強のfont-family指定 | DevAchieve

元記事ここから

俺のためにWeb開発者は俺にとって読みやすいフォント指定をするのだ！
指定方法は下にあるぞ！

新規でサイトを制作するのに基本のフォント指定を持っていなかったので
色々調べたり、このブログのフォント指定を変更してみたりしたら
実は Arial より Verdana のほうが見やすいことがわかってしまった。
さすがMicrosoftがコンピュータ用ディスプレイ上での視認性向上のために
作ったフォントだ！Verdana - Wikipedia

フォント周りのオススメの指定

追記記事により良い指定を載せたのでこちらは掲載終了しました。

font-family めっちゃ長い！

何故かと言えば環境によっては指定したフォントがインストールされていない可能性があるから。
だから指定したいフォントを優先順位つけて記述する。左にあるフォントが一番優先順位が高い。

余談だけどfont-size(文字サイズ)とline-height(行の高さ)はTwitterの指定と同じなので個人的に読みやすい。

どうしてこのfont-familyの指定なのか

英数字は欧文フォントに任せたほうが綺麗なので和文フォントよりも前に書く。

Verdana は Arial に比べて小さい文字でも潰れにくくて綺麗だったので
このブログも Arial から Verdana に乗り換えた。

日本語表記のフォントやスペースを含むフォントはクォーテーションで囲む

invalid property valueと怒られたくなかったらシングルクォートかダブルクォートで囲むんだ！

Macユーザーのためにヒラギノを先に書く

Macにはメイリオがデフォルトでは入っていないのだけど
Office for Mac を入れるとメイリオがインストールされるので
メイリオが先に書いてあるとメイリオで表示されてしまう。

Windowsでヒラギノが入っているとアンチエイリアスがかからなくて汚くなるらしいけど
gdippとかのアンチエイリアスをかけてくれるソフトを入れていると綺麗に表示されるらしいので
Windowsでヒラギノをインストールする人はそういうソフトを使ってもらうことにする。

俺はWindowsにヒラギノが入っていないので関係ない。
むしろOffice for MacをMacに入れているのでヒラギノが先がいい。メイリオ嫌いじゃないけど。

和文フォントの日本語表記と英語表記について

ブラウザの種類やバージョンによっては日本語表記と英語表記のどちらかしか解釈できない奴がいる。
メジャーなブラウザの最新版なら日本語表記だけでも大丈夫らしいけど一応両方書く。

sans-serifとは

総称ファミリと呼ばれるもので、フォントのカテゴリみたいなもの。
指定したフォントがひとつもインストールされていなかった場合は
環境依存のフォント指定になってしまうのでせめてカテゴリ指定しておくためのもの。
どんなのがあるかや、フォントがどのように分類されるかは総称ファミリ名分類のフォント名一覧が見やすい。

フォントについてもっと詳しく知りたいならウェブにおけるフォントのヒントが良い。

CSSでのフォントの指定方法についてもっと詳しく知りたければW3C CSS Fontsのページを読もう。

おまけ

たまに見るCSSのfontプロパティの指定。|| は順不同。[]? は中身を省略可。忘れるのでメモ。

font: [font-style || font-variant || font-weight]? font-size[/line-height]? font-family;

[CSS] ol 要素を使用しないカウントアップするリストを作ってみた

前回のリストマーカー引き続き、CSSで ol タグ相当のCSSクラスを作ってみた。
[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた | DevAchieve

また ::before 擬似要素を使っているので CSS3 扱い。
IE8ではコロンをひとつにしないと動かない。
css/list.cssCSS list-counter sample page
カウント部分は前回と同じく複数行対応になっている。
Generated content, automatic numbering, and lists にある通り、
本記事では count になっている identifier を初期化しなければならない。

/**
 * list-counter base class
 */
.counter.init {
    counter-reset: count;
}
.count {
    display: block;
    padding-left: 1em;
}
.count::before {
    counter-increment: count;
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

/**
 * list-counter counter class
 */
.counter.type_decimal .count::before {
    content: counter(count, decimal);
}
.counter.type_decimal_leading_zero .count::before {
    content: counter(count, decimal-leading-zero);
}
.counter.type_lower_roman .count::before {
    content: counter(count, lower-roman);
}
.counter.type_upper_roman .count::before {
    content: counter(count, upper-roman);
}
.counter.type_lower_greek .count::before {
    content: counter(count, lower-greek);
}
.counter.type_upper_greek .count::before {
    content: counter(count, upper-greek);
}
.counter.type_lower_latin .count::before {
    content: counter(count, lower-latin);
}
.counter.type_upper_latin .count::before {
    content: counter(count, upper-latin);
}
.counter.type_lower_alpha .count::before {
    content: counter(count, lower-alpha);
}
.counter.type_upper_alpha .count::before {
    content: counter(count, upper-alpha);
}
.counter.type_armenian .count::before {
    content: counter(count, armenian);
}
.counter.type_georgian .count::before {
    content: counter(count, georgian);
}

upper-greek に関しては W3C の list-style-type プロパティの定義には載っていないのでブラウザ実装依存。
Opera では decimal, Firefox では 空白 になり、Chrome, Safari, IE9では正常に表示される。

モダンブラウザのための最小clearfixハック

CSSハックの中でも最も有名で最も使われているのが clearfix だろう。
CSSハック嫌いの僕でも clearfix の有用性だけは認めざるを得ない。
それでもCSSハックは使いたくないのでできるだけ簡潔な表現にした。

ネタ元はこちら：A new micro clearfix hack – Nicolas Gallagher

IE6/7どころかIE8もサポートしない最強の clearfix である。
IE9 と Chrome, Firefox, Safari, Opera の最新版で動作することを確認済み。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

ネタ元の以下の clearfix はIE6+をサポートするので困ったらコッチを使うと良い。

/**
 * A new micro clearfix hack – Nicolas Gallagher
 * http://nicolasgallagher.com/micro-clearfix-hack/
 */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /* for IE 6/7 only */
}

ちなみにHTML5 Boilerplate: The web's most popular front-end templateでも使われている方法なので安心！

[CSS]before擬似要素を使って複数行対応のリストマーカーを作ってみた

ul 要素などに指定できる list-style-type には種類に制限があるので
好きなリストマーカーを自由に設定できるように
::before擬似要素を使ってリストマーカー用のクラスを作ってみた。
css/list.css
もちろんテキストが複数行になってもインデントが揃っている。
サンプルページ：CSS list-marker sample page

.marker {
    display: block;
    padding-left: 1em;
}
.marker::before {
    content: "";
    display: block;
    float: left;
    margin-left: -1em;
    width: 1em;
    text-align: center;
}

::before擬似要素でブロック要素を生成して float: left; で要素の左に並べる。
要素を padding-left: 1em; で左に間を空けて margin-left: -1em; で左に戻す。
width: 1em; で text-align: center; を指定しておけば半角文字のマーカーが真ん中に来て良い感じになる。

::before という書き方は擬似クラスと擬似要素が多くなった CSS3 からの書き方なので
IE8 では対応してないので :before と書く必要がある。ちなみに IE6/7はサポートすらされていない。

上のクラスを指定しただけではリストマーカーは表示されないので以下のように指定する。
content には画像や属性値を指定することもできる。

.marker.type_disc::before {
    content: "・";
}
.marker.type_filled_circle::before {
    content: "●";
}
.marker.type_outline_circle::before {
    content: "○";
}
.marker.type_filled_square::before {
    content: "■";
}
.marker.type_outline_square::before {
    content: "□";
}
.marker.type_filled_diamond::before {
    content: "◆";
}
.marker.type_outline_diamond::before {
    content: "◇";
}
.marker.type_filled_star::before {
    content: "★";
}
.marker.type_outline_star::before {
    content: "☆";
}
.marker.type_filled_triangle::before {
    content: "▲";
}
.marker.type_outline_triangle::before {
    content: "△";
}
.marker.type_filled_inverted_triangle::before {
    content: "▼";
}
.marker.type_outline_inverted_triangle::before {
    content: "▽";
}

PHP で ASCII コードを利用して CSS の list-style-type を再現する

CSS の list-style-type は ul 要素や ol 要素などに指定することができて、
以下のように表示したければ

1. あいうえお
2. かきくけこ
3. さしすせそ

以下のように指定します。

ol {
    list-style-type: upper-alpha;
}

<ol>
    <li>あいうえお</li>
    <li>かきくけこ</li>
    <li>さしすせそ</li>
</ol>

しかし、このABCなどのリストマーカー部分をリスト部分とは異なるデザインにしたい場合、
特に表示位置、色、大きさを調節したい場合はリストでは難しくなります。

HTML/CSSでは難しいのですが、動的なサイトだったためPHPで書くことができました。
リストマーカー部分が数値であれば簡単に for ループのインデックスが使えるのですが
リストマーカーが英字なので少しどうしたものかと思いました。
パッと思い浮かんだ選択肢は、アルファベットを持った配列を定義しておきインデックスで配列の要素を出力、
またはアルファベットを文字列で持ちインデックスでsubstrで１文字だけ出力、という2つ。

定義するのがめんどくさいし、ダサい実装でどうしたものかと考えていたら
C言語の入門書でアスキーコードを利用したことを思い出しました。
PHPでアスキーコードを利用したことがなかったのですが、
C言語でできることはPHPでもできるだろと探してみたらありました。

PHPでアスキーコードを利用する方法！

<?php
for($i = 0; $i < 26; $i++){
    echo chr(ord('A') + $i) . '.';
}
?>

chrがアスキーコードから文字を返してくれて、ordが文字のアスキーコードを返してくれます。