カテゴリー:執筆

リスト表示へ

単著でJavaScriptの本を書きました!

2013年12月11日 10:24

『JavaScriptの教科書』という本を書きました

今回、人生で初めて単著で本を書きました。タイトルは『JavaScriptの新しい教科書』です。

内容はタイトルからも分かる通り初心者向けに書かれた本です。
想定したターゲットは、「これからJavaScriptをメインでやっていきたい人」か、「Webデザイナー」や「Webディレクター」などすでに現場でJavaScriptを見ている人です。
その人たちが、JSの知識を手に入れるために読む、というようなことを考えて書きました。

そのため、比較的幅広く書いています。自分の中では「超入門」的な位置づけで、これを読んで幅広い知識と現場で使われているものの概要を掴み、全体像を把握してもらう、というのが目的です。なので「次の書籍を読むための書籍」みたいなイメージです。

それから、初心者の人が最初につまづきそうな、いわゆるイディオム的書き方をまとめた付録がついています。
「プログラム」はとても検索しづらいもののひとつだと思います。

これってなにをやっているんだろう・・と思っても、なかなかその答えにたどり着けない、というのは誰しも経験があると思います。
分かってしまえばなんてこないことでも、だいぶ時間かけて調べた、みたいなこともあるでしょう。
そういう人のために、よく見る書式とその意味と使い方について書いた付録です。

今日から発売なので、興味がある人はぜひぜひ手にとって見てください!(ちなみにAmazonでも売ってます!)

目次

●Lesson 1 JavaScriptを知る
01 JavaScriptとプログラム
02 特性をつかむ・─手軽で難しいJavaScript
03 特性をつかむ・─オブジェクト指向とは?
04 特性をつかむ・─JavaScriptは非同期が基本
05 イベントループを理解しよう
06 JavaScriptとHTML5
●Lesson 2 プログラムを動かしてみる
01 開発者ツールにふれてみる
02 テキストエディタを選ぶ
03 プログラムを書くための準備と設定
04 「関数」のイメージをつかむ
05 HTMLとCSSを操作してみる
●Lesson 3 イベントを理解する
01 「イベント」とはどんなもの?
02 イベントを使ってみよう
03 代表的なイベント・─マウスイベント
04 代表的なイベント・─キーボードイベント
05 その他のイベント
●Lesson 4 プログラムを書く前の準備
01 JavaScriptの読み込ませ方
02 ローカル環境で起こる問題
03 ブラウザの開発者ツールを使う
04 開発者ツールを使いこなす
05 JavaScriptの実行・デバッグ
06 Webサービス「jsdo.it」の活用
●Lesson 5 DOMを操作する
01 DOMとはどんなもの?
02 JavaScriptでHTMLを見つける
03 見つけたHTMLを操作する
04 HTMLの要素を新しくつくる
05 CSSを操作する
●Lesson 6 イベントを実行する
01 イベントの仕組みを理解する
02 イベントリスナーを使いこなす
03 イベントオブジェクトを利用する
04 タッチデバイスで利用するタッチイベント
05 ブラウザが発生させるイベント
06 独自のイベントをつくる
●Lesson 7 JavaScriptで使われる要素
01 JavaScriptの基本文法
02 計算結果を保存する「変数」
03 変数とデータ(値)
04 条件分岐を行う「if ? else文」
05 設定値に応じて振り分ける「switch ? case文」
06 複数の値を格納する「配列」
07 ループ処理を行う「for文」
08 「while文」と「do ? while文」
09 「オブジェクト」が意味するもの
10 連想配列と「for ? in文」
11 オブジェクトをつくり出す設計図「プロトタイプ」
12 オブジェクトを組み立てる「コンストラクタ」
13 処理を実行して結果を返す「関数」
14 関数式とメソッド
15 スコープとクロージャー
●Lesson 8 実践編:ポップアップウィンドウをつくる
01 ポップアップウィンドウの機能を考える
02 処理の流れを理解する
03 HTMLを構築する
04 ボタンを押したときの処理を設定する
05 ドラッグ操作でウィンドウを動かす仕組みの実装
06 モーダル機能を実装する
●Lesson 9 jQueryを使ってみよう
01 JavaScriptを手軽に扱える「jQuery」
02 jQueryのバージョンの違い
03 jQueryの組み込み方
04 jQueryの基本構文と仕組み
05 jQueryでHTML・CSSを操作する
06 jQueryでのイベント処理
07 アニメーション効果の実装
●Lesson 10 JavaScriptにコンパイルする
01 「コンパイル」とは何を指す?
02 コンパイルするための環境を整える
03 文法がシンプルなCoffeeScript
04 JavaScriptの弱点を補うTypeScript
05 モバイル環境でも高速に動作するJSX
●Lesson 11 JavaScriptを深める
01 JavaScriptの歴史
02 HTML5 のこれから
03 SPAの作成に便利なBackbone.js
04 JavaScriptの問題点とクロスブラウザ対応
05 JavaScriptとセキュリティリスク
06 JavaScriptで使われるイディオム
巻末:イディオム集
巻末:用語索引

記事を書くときに気をつけていること

2013年12月 2日 09:24

Editors' & Writers' Advent Calendar 2013の第2日目です。

なにを書こうか迷ったんですが、こういう機会でもないと書くことがないと思ったので、普段記事を書くときに気をつけていることを書いてみたいと思います。 これを見て、なにか書くときの参考になれば。

ターゲットをイメージする

記事を書くとき一番最初にすることは、「この記事を読んでくれている人はどんな人だろう」というイメージを持つことです。つまりターゲットですね。 きっとこういう人が読んでいて、こういう感想を持ってくれるといいなーというのをイメージしてから書き始めます。

この感想というのは、一言で言うと「なにを持ち帰ってもらいたいか」という視点です。 どういうことかと言うと、記事を読むからにはなにかしら情報をほしがっているはずです。 そして自分が書いた記事をその人が読んだときに「これだけは伝えたい」というのをひとつ定めます。 そこだけが伝わればゴール、くらいのイメージです。

ただそれは具体的なことではなくてもよくて、イメージだったり概念だったり色々です。

今回の例で言えば、「自分が普段、どんなことを考えているか」が伝わればいいなーと思って書きました。なので細かい手法とかではなくて、「あ、この人はこう考えて書いてるんだ。これは参考にできそうかなー」みたいなことを思ってもらえるとうれしいなと。

分かりやすく、イメージをさせる

これは性格だと思いますが、人にものを教えることが好きなのでよく、勝手に脳内で架空の相手に説明をしているときがありますw
これってこういうことだよなーっていうことを考えているときに、それを分かりやすく、例えで説明するんです。
これだけ書くとなんだか危ない人みたいですがw、こうすることで非常に頭の中が整理され、かつ人に説明できる=それだけしっかり理解している、ということにもなるので説明できるというのはとても大事なことです。

つまり、架空の相手であっても説明するというのは頭の整理につながるし、なにより理解を深める役に立ちます。
また、なにごとも「理解する=イメージできる」ということだと思っているので、「考えていることがイメージできるか」、というのはとても大事だと思うのです。

なので、記事を書くときはいかにイメージを持ってもらえるか、をしっかり考えます。だから自分の記事には例えが多いですw
ブログのターゲットとして、比較的初心者の人をターゲットにしているので、そういう意味でも例えは有効だと思っています。

だいぶ前の記事ですが、CSS講座 - 目で見るボックスレイアウトという記事を書いていて、冒頭がまさに架空の相手に説明していると書いていますがw、この記事は結構分かりやすかった、というコメントを多くもらいました。
ボックスモデルを「家」で例えてるわけです。

こういう感じで、できるだけイメージしやすい例えを探しつつそれを記事に盛り込む、というのはいつも意識しています。

画像の持つ力には敵わない

できるだけイメージしてもらえるような例えや言い回しを考えて書いていますが、やはり「百聞は一見にしかず」という言葉あるように、いくら言葉巧みに説明しても、画像の持つ力には敵いません。
なので、素直に画像を使って説明もします。その上で、できるだけイメージが伝わるように画像を作成します。

例えば、ちょっと前に執筆した「すべての人に知っておいてほしい JavaScriptの基本原則」という書籍の中で説明する図の作画を依頼したのですが、そのときに書いた手描きのラフはこんな感じでした。

イメージ画像サンプル

これは、JavaScriptで「new」を使うイメージを描いたものです。

JavaScriptが魔法という設定で、「new」は呪文で、呪文を唱えるとインスタンスが生成される、みたいなイメージです。

とにかく書く手を中断しない

最後に、普段記事を書いているときにやっていることを書いて終わろうと思います。

記事を書く際、まずは思う様、とにかく頭に浮かんだことをざーーっと書いていきます。その際、前後のつながりや「てにをは」、接続詞などで迷ったら、とにかくそこを飛ばして書きたいところを書きなぐっていきます。

こうすると非常に早く文章全体を構築することができます。
当然文章はあとから見なおして、公開までには何回も読み返すので、最初の骨格部分はとにかく雰囲気だけで書き殴ります。

そのあとで、文章として分かりやすくなるようにしたり、前後の意味がつながるように修正していきます。

結構、細かいところで悩んでいると書こうと思っていたことを忘れてしまったり、うまい言い回しが思いついていたのに「どんなだったっけ?」みたいなことにもなりかねないので、とにかく書きたいことを書く、ということをしています。

そもそも、最初からしっかり文章書いてもどうせ読み返すうちに、あれこれ修正するので。

初めて単著で執筆しました

最後に宣伝をば・・。
発売されたら改めて書きますが、実は初めて単著で執筆をしました。 「JavaScriptの新しい教科書 基礎から覚える、深く理解できる。」という本が、12/10に発売されます。

内容はこれからJavaScriptを学んでいこう、という人向けに書いた本です。
なので、ここで説明したようにだいぶ例え話が含まれていますw

超入門的なイメージなので、おそらくこれだけを読んでも「分かった!」ということにはならないかもしれません。
でも、今後JavaScriptを学んでいく上で大事な概念や、できるだけJavaScriptをどう使ったらいいか、というのを、それこそ「イメージできるように」ということに重点を置いて書きました。

また付録として、JavaScriptでよく使われるイディオム集がついています。
プログラムって結構単語を調べるのに苦労するので、最初に「これってどういうことだ・・?」と思いがちな書き方なんかを解説しています。

これからJavaScriptをやってみようと思っている人はぜひ手に取って見てください。

HTML5を基礎から学べる『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』を執筆しました

2012年10月22日 12:35

『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させて頂きました

前回の『すべての人に知っておいてほしい スタイルシートデザインの基本原則』に引き続き、『すべての人に知っておいてほしい HTML5 & CSS3 の基本原則』という本を執筆させていただきました。(前回の記事概要はこちら

今回自分は、Chapter7の「Canvasを使って作るインタラクションのあるグラフ」を担当させて頂いただきました。

概要としては、Canvas内に描かれたものに mouseovermouseoutclick などのイベントを設定してインタラクションを持たせるグラフを作る、というものです。
これを通してCanvas内に描かれたものにイベントを付与して、ユーザと対話可能なCanvasの作り方を学んでもらえればと思って執筆しました。

今回はここの箇所だけで多くは書いていませんが、その分、サンプルに力を入れいてるのでぜひサンプルをダウンロードして色々と触ってみてください。

目次

  • ■Chapter 1 マークアップ言語としてのHTML5
  • ■Chapter 2 CSS3時代のWebデザイン
  • ■Chapter 3 CSSアニメーションを極める
  • ■Chapter 4 HTML5&CSS3のテクニック
  • ■Chapter 5 Webアプリの機能を取り入れる
  • ■Chapter 6 Flashライクなデザイン
  • ■Chapter 7 Webデザインの実践

サンプル画像

CSSに関する本を執筆させて頂きました

2012年5月29日 10:00

「すべての人に知っておいてほしい スタイルシートデザインの基本原則」という本を執筆させて頂きました

最近めっきり更新が滞ってました・・。

さて突然ですが最近、すべての人に知っておいてほしい スタイルシートデザインの基本原則という本を執筆させて頂きました。
内容はCSSに関する書籍となっています(当たり前ですがw)

そして自分が担当させて頂いたのは主に、HTML5の章とjQueryとCSSの連携についての部分になります。
具体的には「Chapter 6 これからのWeb制作〜HTML5の描く未来〜」全般と「Chapter 7 jQuery」の「7-02 jQueryとCSSの住み分けを明確にする」「7-03 jQuery animateを使って要素に動きを付ける」「Column Webアプリで使うjQuery」です。

基本的にはスタイルシートに関する話題が中心ですが、HTML5時代のCSSのあり方や、JavaScript(とりわけjQuery)と連携・共存していくことに主眼を置いて執筆しました。
基本的なことから、JavaScriptを使ってサイトをリッチにしようと思っている方にもとても有意義な内容になっていると思います。興味がある方はぜひ手にとって見て下さい。

サンプル画像

目次

■Chapter 1 CSSの基本
 1-01 Web標準とスタイルシート
 1-02 基本的なCSSの記述方法
 1-03 CSSで扱う色
 1-04 文字組みに関するCSSプロパティ
 1-05 リストに関するCSSプロパティ
 1-06 スタイルのリセットについて
 1-07 クロスブラウザ対策
 Column 新しい技術を先取りする

■Chapter 2 CSSによるレイアウト
 2-01 ボックスレイアウトについて
 2-02 ボックスのサイズと余白
 2-03 背景に関するCSSプロパティ
 2-04 段組みレイアウト
 2-05 floatによるレイアウト
 2-06 相対配置・絶対配置
 2-07 リキッドレイアウト
 2-08 エラスティックレイアウト
 2-09 ハイブリッドレイアウト
 2-10 positionによる配置指定
 2-11 印刷用のCSS
 Column 印刷形式の選択

■Chapter 3 CSSのワンポイントテクニック
 3-01 高さが揃っているように見えるカラムレイアウト
 3-02 CSSで作る視覚的な画像のリンク表現
 3-03 CSSスプライト
 3-04 フォントサイズを指定するコツ
 3-05 表組みのスタイル
 3-06 リスト項目を横並びにしたナビゲーション
 3-07 背景画像を使った角丸ボックス
 3-08 伸縮可能な手描き風のコンテンツ枠を作るコツ
 3-09 CSSで画像を装飾する
 3-10 文中のテキストにドットの線やノートのような罫線を引いて見せる
 Column 「メイリオ」フォントを利用する際の注意

■Chapter 4 スマートフォンとレスポンシブ・ウェブデザイン
 4-01 レスポンシブ・ウェブデザインとは
 4-02 レスポンシブ・ウェブデザインの制作手法
 4-03 デバイスやブラウザの違いによる問題
 4-04 スマートフォンサイトで使われるCSSテクニック
 4-05 スマートフォンに最適化したサイト設計を考える
 Column 未来のスマートフォンブラウザの可能性

■Chapter 5 CSS3
 5-01 新しくなったCSS3
 5-02 ボーダー、ボックス、テキストを装飾するプロパティ
 5-03 複数の背景を指定する
 5-04 グラデーション
 5-05 トランスフォーム
 5-06 transition
 5-07 animation
 5-08 Webフォントを利用したサイト作成
 5-09 CSS3非対応ブラウザへの対応策

■Chapter 6 これからのWeb制作〜HTML5の描く未来〜
 6-01 HTML5仕様の全貌
 6-02 HTML5 API
 6-03 アプリケーションUIを実現するCSS
 Column HTML5の未来

■Chapter 7 jQuery
 7-01 WebデザイナーにとってjQueryが親しみやすい理由
 7-02 jQueryとCSSの住み分けを明確にする
 7-03 jQuery animateを使って要素に動きを付ける
 7-04 CSS3とjQueryを使ったインタラクションの基礎
 Column Webアプリで使うjQuery

■Chapter 8 Webデザインの実践
 8-01 自由なレイアウトと動きのある背景で表現されたページ
 8-02 インターフェイスにこだわったスマートフォンサイト
 8-03 1ページ内をスクロールしてコンテンツを見るサイト
 8-04 汎用性の高いマルチカラムレイアウト

  • CSSプロパティ一覧
  • さくいん
  • 執筆者一覧

共著でCSS関連について書籍を執筆しました

2010年10月25日 07:00

「プロならば知っておくべきWebコーディング&デザインの定石100」で執筆しました

共著で、初めて書籍の執筆をしました。
昔から本を書きたい!と思っていたので、その夢がかなった感じです。

担当した記事は、主に CSS3 関連について書いています。
まだメインで使い始めるにはやや早い CSS3 ですが、局所的に使っていけば使えないことはありません。
そういった、細かいところで使っていく、というのをベースに記事を構成しています。

それ以外にも、Web デザインやコーディングをしていく上で有用な記事がたくさん詰まっているので、ぜひぜひ読んでみてください。

執筆した本はこちら↓

web creators vol.98で1記事執筆しました

2010年1月13日 13:52

web creators vol.98 写真

明けましておめでとうございます。
新春一発目のネタが、去年の 12 月に発売された雑誌の内容ですみませんw

今年は転職を予定していたりと、色々新しいことがありそうな感じです。

さて、12 月に発売された web creators では、「WEB制作テクニックの新標準2010」という特集で 1 記事担当しました。
今回は読み物系の記事だったので結構大変でした;

が、とてもいい経験になりました。特集の中で、レイアウトについて書いているので読んでいただければ幸いです。

こうして執筆をしていますが、逆に執筆することによってとてもたくさんのことを学ばせていただいています。逆に書けば書くほど、もっとがんばらねば、という気持ちにさせられます。
今年は、勉強会をしてみたりと新しいことをやっていきたいな、なんて思っていたりもします。

このブログでも、なにか新しい動きが出せればなーと思っているので、これからも CSS-EBLOG をよろしくお願いします。

web creators vol.97で1記事執筆しました

2009年12月 1日 16:32

web creators vol.97 写真

web creators vol.97で、「WEBが際立つ "動き&装飾" デザイン」という特集の中で 1 記事、執筆しました。 jQuery プラグインの Spritemenu について書いています。

最近流行の jQuery のプラグインを使って、動的に魅力的にサイトを飾る方法を「簡単に導入できる」という観点から特集された記事です。

今回の執筆で紹介したプラグインは、簡単に導入できるてとてもいいのですが、空要素を使う部分もあったので次回のブログエントリーでは、CSS オン、画像オフでもしっかりと見れる "DKIR" と呼ばれる画像置換方法を紹介したいと思います。

web creators vol.96で1記事執筆しました

2009年11月 8日 20:39

web creators vol.96 写真

web creators vol.96で、「最新WEB配色トレンド2010」という特集の中で 1 記事、執筆しました。

今回はこのブログとはちょっと内容が異なりますが、最新配色トレンド、ということで色に関する記事を執筆しました。
あまりデザイン部分にフォーカスした記事は書かないのですごく緊張しましたが、とてもいい経験になりました。

まだ想定くらいですが、ちょっと素材を配布するようなサイトを立ち上げようかなーなんて思ってます。
その中では Adobe 系のツールの使い方とか、素材の作り方なんかも配信しようかなって思っているので、合わせてデザイン部分にフォーカスした記事も書いていくかもしれませんw

合わせて読むと役に立つかもなエントリー

web creators vol.94で7記事執筆しました

2009年8月30日 10:46

web creators vol.94 写真

web creators という雑誌の「CSSデザイン表現 最新最強テクニック」という特集の中で、7記事ほど執筆しました。

今回は表現テクニック、ということでCSSを使って "魅せる" テクニック満載です。CSS3 を使った最新テクニックや、ちょっとした小技で魅せるテクニックまで、色々なテクニックが揃っています。一読の価値あり!n

こういう記事の執筆は初めてだったんですがなかなか楽しいものですねwn

元々小説を書きたい、なんて思っていた時期もあるので文章を書くのが好きなのです(´ー`)
できれば本とかも出してみたいけど・・それはきびしいかなぁwn

合わせて読むと役に立つかもなエントリー

1