鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

『HTML5プロフェッショナル認定資格 レベル１ 教科書』を書きました

html5

とっととBootstrapの続き書けやボケって声も聞こえてこなくはないのですが、本を書きましたのでその紹介を。

本について

HTML5プロフェッショナル認定資格　レベル１　教科書

HTML5プロフェッショナル認定資格　レベル１　教科書

LPIで2013.01.01から開始される予定のHTML5プロフェッショナル認定資格 レベル1向け参考書です。認定資格について詳しくはLPIサイトをご覧ください。

今回は電子書籍のみの予定です。上記のKindleと、Koboは明日17日発売予定です。

HTML5プロフェッショナル認定資格　レベル１　教科書 By: 立川 敬行,重田 尚孝,鈴木 雅貴 - eBook - Kobo

あと、Kinoppyでも出るはず。iBooksも遅れて出る、かな？

中身ですが、あくまで試験対策本であり、試験範囲の知識を網羅するものになっています。リファレンス的な。この試験、やたらと試験範囲が広いですが、これを使えば効率的に情報を収集できるでしょう。問題集もついてます。ただ、読み物として面白いかと言われるとたぶん面白くないのでご注意を。

本を書いてみて

今回は最初から電子書籍のみで出すつもりだったためでんでんコンバーターを検討していたのですが、Markdownがよくわからんという人のために今回は一度HTMLを作って、それを制作会社にEPUB化してもらう方法をとりました。

が、結局最終的にHTMLをMarkdownからpandocで生成していたので、ゴリ押ししてしまえばよかったと思う次第です。そして、MarkdownからHTMLなのにkobo/gaiden使わなかったのは余裕がなかったためです。時間とか心とか。ごめんなさいごめんなさい。

で、EPUB制作。制作会社の方には色々と対応していただきそれには満足しているのですが、今度は自分で最後まで面倒見たい欲が出てきました。ということで、次の機会があって手段を選択できるなら、EPUBまで自分のところで出せる手段をとりたいと思ってます。

ということで

試験を受けようと思う方、本書をぜひご検討ください！

HTML5 Conference 2013に参加しました

html5

11/30(土)に開催されたHTML5 Conference 2013に参加してきました。ボランティアスタッフとして。

なぜボランティア参加？

勤務先がスポンサーになれなかったので、せめてボランティアでも、と思いまして。

なにやったの？

私はルーム担当でした。やることはセッション部屋のドア開け閉め等の誘導、タイムキーパー、聴講者数計上など。1部屋に3,4名で一人2−3コマ担当という感じです。

ボランティア参加してどうだった？

9:30現地集合は結構早くてびっくりしましたが、ルーム作業をこなしながらセッションを聞けるくらいの余裕はありますし、担当コマ以外は普通にセッション聞けますし、お昼出ますし、スタッフ用休憩場所もありますし、スタッフ同士の交流もありますし、Tシャツもらえますし、懇親会出られますし、ボランティアといいながらかなーりお得なんではないでしょうか。

ボランティアスタッフとしての反省点

セッション終了時の入退場はもうちょっとうまくできたかなぁ、と。担当ドアとかをかっちり決めておくくらいしておけばよかったかも。

振り返って

楽しかったので、またボランティアスタッフとして参加できればと思ってます。html5jスタッフのみなさま、すばらしいイベントに参加させていただき、ありがとうございました！

Bootstrap 3をWebページ制作環境にしよう(2) LiveReloadの実現

bootstrap

前回の事前準備ができましたら、今度はLiveReloadできるようにしましょう。

WebブラウザへLiveReload用拡張を追加

How do I install and use the browser extensions? – LiveReload Help & Supportを参考に、WebブラウザへLiveReload用拡張を追加しておきましょう。

grunt側でLiveReloadの設定

BootstrapのGruntfile.jsを見るとgrunt-contrib-watchを使っていますので、grunt-contrib-watchしてれば簡単にLiveReloadできるに書いたように、grunt-contrib-watchのオプションで簡単にLiveReloadできちゃいます。

今回は、とりあえずLiveReloadを動作させるということで、以下のようにします。

  1. トップディレクトリ配下にtest.htmlを作成
  2. cssやjsはdist配下のものを使用
  3. test.htmlが更新されたらLiveReloadされる

1,2に合わせたHTMLファイルは以下のような感じです。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="dist/css/bootstrap.min.css">
</head>
<body>
  <h1>LiveReload</h1>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Gruntfile.jsのwatchの部分を以下のようにしましょう。

    watch: {
      /* 略 */
      recess: {
        files: 'less/*.less',
        tasks: ['recess']
        }
      },
      /* 以下htmlを追加 */
      html: {
        files: 'test.html',
        tasks: [],
        options: {
          livereload: true
        }
      }
    }

そして、grunt.registerTask()を実行しているあたりで、ローカルにサーバ起動しつつwatchを実行するgruntタスクを追加しましょう。ローカルでサーバを起動するconenctはすでにありますので、それを使って。今回はwatchreloadというタスク名にします。

  grunt.registerTask('watchreload', ['connect', 'watch']);

LiveReload実施

トップディレクトリで以下のコマンドを実行し、作成したwatchreloadタスクを起動しましょう。

$ grunt watchreload

Webブラウザで http://localhost:3000/test.html を開くと、先ほど作成したHTMLファイルを開くことができるはずです。

そして、WebブラウザにインストールしたLiveReload拡張を有効にして(デフォルトのポートは35729です)、test.htmlを書き換えると、自動でWebブラウザが再読込され、変更した内容が表示されるはずです。LiveReloadが実現できました！

次回は、この環境をベースに、効率的にBootstrapを用いたサイトを作成できるようにしましょう。

Bootstrap 3をWebページ制作環境にしよう(1) 事前準備

bootstrap

Bootstrap 3からRCが取れたので、いろいろ試してみた結果を。

Bootstrap 2と同様、Bootstrap 3にもビルドの仕組みが含まれているので、それにうまく乗っかれば効率的にWebページを作ることができます。

ということで、まずはその準備から。

Bootstrap 3のダウンロード

なにはともあれBootstrapを入手します。いわゆるソースコードが必要なので、Getting started のDownload latest source codeからzipをダウンロードして展開するか、GitHubからcloneしてください。

Gruntのインストール

Bootstrap 3ではビルドにGruntを使います。

まず、Gruntのインストールにはnodeが必要ですので、お好みの手段でインストールしてください。

次にGruntですが、Grunt 0.3からは、gruntのコマンドラインインターフェースであるgrunt-cliをインストールして利用するようになっています。0.3未満のGruntを使用していた場合は、npm uninstall -g gruntを実行してアンインストールしておきましょう。

grunt-cliはグローバルにインストールしましょう。npm install -g grunt-cliを実行すればインストール完了です。

必要なnpmモジュールのインストール

Bootstrap 3展開後のフォルダに移動し、npm installを実行すると、必要なモジュールが自動でインストールされます。

確認

Bootstrap 3展開後のフォルダからgrunt distを実行します。タスクがいくつか流れたあと、以下の表示が出ればうまくいった証拠です。

Done, without errors.

次回は、この環境でLiveReloadを実現してみましょう。

grunt-contrib-watchしてれば簡単にLiveReloadできる

grunt

またもやQiitaに書いた簡単な内容のものをこちらにも。

ドキュメントを見て単純に気づいただけなのですがメモ代わりに。

GruntのLiveReload実現手段としてよく紹介されているgrunt-contrib-livereloadは現在deprecated扱いになっており、代わりにwatchタスクのオプションでLiveReloadが指定できるようになっています。

事前準備

LiveReloadの設定方法と使い方

以下、詳しくはgruntjs/grunt-contrib-watchをご参照くださいなのですが、とりあえず試したいという方向けにざっくり書いておきます。

watchが走ったときにliveReloadするなら、

grunt.initConfig({
  watch: {
    options: {
      livereload: true,
    },
    css: {
      (略)
    },
  },
});

のように、watchのoptionとしてlivereload: trueとしておけばOKです。あとは確認したいページを開き、ブラウザ拡張のボタンを押してwatch対象を更新すれば自動でリロードされます。簡単ですね！

ポート番号はデフォルトで35729が使用されるようです。変更したい場合はlivereload: ポート番号と書けばOKです。

LiveReloadの対象を絞りたい場合は、たとえばCSSのみに絞るなら

watch: {
  css: {
    options: {
      livereload: true,
    },
    (略)
  },
},

のように、watchターゲットの中にoptionで指定しましょう。

OSXのChrome/Safariにて、全角幅=2半角幅で等幅表示するためのCSS

css

Qiitaにも投稿したのですが簡単な内容なのでこちらにも。

OSXのChromeにて、pre要素のfont-familyにmonospaceを指定したのですが、全角と半角それぞれは等幅になっているものの、いわゆる全角文字が半角2つ分で表示されていませんでした。あれれと、以前はそうなっていたのにと色々試していたところ、font-sizeが関係していました。

等幅で全角文字=半角2つ分となる条件

font-familyで等幅フォントを指定し、かつfont-sizeはpxかemで指定しつつ、以下の条件を満たしていればOKのようでした。

  • pxで指定する場合は、偶数であること
  • emで指定する場合は、自然数であること

CSSの例

例えばこんな感じで。

font-family: Osaka-mono, "Osaka-等幅", "ＭＳ ゴシック", monospace;
font-size: 14px;

ちなみにCourier NewやCourierは全角文字=半角2つ分となりませんのでご注意を。

Bootstrap 3 RC1をGruntで効率的にカスタマイズ

bootstrap grunt

Bootstrap 3 RC1でGruntが採用されたということで、ちょっと使ってみました。 あまり内容はないですが、せっかくなのでQiitaに記事を書きました。

Bootstrap 3 RC1をGruntで効率的にカスタマイズ

2まではmakeでちょっと古臭さがあったのですが、Gruntだとそれっぽいですね。ちょうど勉強にもなるし、ありがたいことです。