カテゴリー:Javascript関連

リスト表示へ

『WebデザイナーのためのjQuery入門 - 改訂版』を献本いただきました

2015年1月13日 09:05

『WebデザイナーのためのjQuery入門 - 改訂版』レビュー

@takazudoさんから献本頂きました。
タイトルは「WebデザイナーのためのjQuery入門」です。
以前に書いたものの改訂版です。

こんな人にオススメ

読んでみた全体の感想をまず書くと、まさに「タイトル通りの本」です。 Webデザイナーのための、と謳っているようにノンプログラマ向けの本となっています。

また、これからJavaScriptを学びたいと思っている人が足がかりとしてjQueryをやってみよう、という人にもオススメです。 著者が途中で触れていますが、「おまじない」で済ますことが嫌いで、少なくとも「なにをしているおまじないか」まで解説してくれています。

細かく配慮された設計

jQueryとは一体なにか、から始まり、分かりやすいメタファーを使いながら実際に使うシーンを描いていく、そんな進め方がされている本です。
実際にプログラムをやろうと思い立った人がつまづきそうなところを先回りして解説しつつ、「今知るべきこと」を明確にしながら解説されているので、きっとJavaScriptを書いたことない・・という人でも読み進められると思います。

プログラムの書籍だと「おまじない」という言葉で曖昧なまま話が進むこともありますが、それだとどうしてもしっかりとした理解ができず、のちのち困る、ということは多々あります。

いきなりではむずかしいことでも、せめて「なにをしているのか」を想像しながら学習するのはとても大事なことだと自分も思っています。
(なので当ブログなどでも、できるだけ解説を入れたり、あるいは検索ワードを入れるなどして、なにをしているかを知るきっかけを作っています。まぁ最近はQiitaばっかり更新していますが・・・)

実際に利用できるサンプル、解説も

またこの本の特徴として、細かいjQueryの解説だけにとどまらず「スライドショー」や「アコーディオン」といった、Webサイトでよく見かける機能を例にしながら、その実装方法と解説をしてくれています。

中身の理解よりもまずなにか作りたい! という人でも、そうしたサンプルを作りながらjQuery、そしてJavaScriptに触れることができます。
最終的には実際に動くものが作れるので、Webサイトに色を付けたい! という人でも楽しく読めると思います。

改訂前のものもそうですが、Amazonのレビューで評価も高く、まさにオススメの一冊です。
これからjQuery、ひいてはJavaScriptを学びたいと思っている人はぜひ手に取ってみてください。

単著で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で使われるイディオム
巻末:イディオム集
巻末:用語索引

【翻訳】シンプルJavaScript継承

2013年3月16日 10:00

更新履歴

[13/03/17]
@hokacchaさんにいくつか指摘され、それを元に「今風」の書き方のものをアップしてみました。

だいぶ記事の更新がなくなっていて、久々の更新です。
最近ではHTMLやCSSを書く機会が少なく、もっぱらJSしか書いていません( ;´Д`)
ということで、これからはJSネタが中心になりそうです。

さて、今回はjQueryの制作者であるJohn Resigさんが考案したシンプルなクラス風継承を実現するJavaScriptコードを紹介したいと思います。
さらに最近では英語を勉強しているので、彼のブログ記事の翻訳に挑戦しつつ紹介したいと思います。(本人の許諾を得ています)
原文はこちら

シンプルなJavaScriptの継承

私はたくさんの仕事をしてきて、最近はJavaScriptの継承を使用しています。-- つまり、執筆中のJavaScript本の中で --
そしてその中でいくつかの実験的なJavaScriptによるクラス継承のシミュレーションテクニックを使っています。
私が見てきたすべてのもののうち、私がもっとも好きな base2 と Prototype から実装方法を借りました。

それらのテクニックの中からコアな部分を取り出して、シンプルで、再利用性とできるだけ分かりやすく、依存性がないようにまとめました。
加えて、シンプルでとても使いやすくなるようにしました。以下はどうやってそれを使うかのサンプルです。

  • コンストラクタの生成はシンプル(このケースではinitメソッドによってシンプルに実装されています)
  • 新しいクラスを作成する場合、既存のクラスから(サブクラスに)継承する必要があります。
  • すべてのクラスはひとつの祖先(Class)からなります。従って、新しいクラスを作成する場合はClassクラスから派生させる必要があります。
  • そしてもっともチャレンジングなことは、オーバーライドされたメソッドを提供していることです(同じコンテキストのプロパティから)。this._super()を使うことで、上記の、Personスーパークラスのinit()とdance()メソッドを呼ぶことができます。

この結果はとても喜ばしいものです。クラス構造の概念を実現すること、メンテナンスをシンプルにすること、そしてスーパークラスのメソッドを呼ぶことを可能にするのにとても役立ちます。

シンプルなクラス生成と継承

ここに実装を載せます。(リーズナブルなサイズとコメント入りです)- フィードバックはとても歓迎です。

2つのもっともトリッキーな私の意見は、初期化時にinitメソッドを呼ばないことと、_superメソッドを作ることです。これらがなにを行なっているのか、簡単に説明しましょう。

初期化

まず最初に、prototypeを使った正統な継承方法を見てみます。
上記の手法を使わない場合は以下のようになります。

上記の処理がなにをしているかというと、instansofに本当に望んでいることはインスタンス化とPersonオブジェクトのコンストラクタを呼ぶだけではありません。 これを構築するとき、initializing変数がtrueに設定されている場合の唯一の目的はprototypeを使用してインスタンス化を行うことです。

従って、実際にコンストラクタを呼ぶ場合は初期化モードではないことを確認し、同時にinitメソッドを呼び出します。

特に大事なことは、initメソッドへコストのかかるスタート時の処理(例えば、サーバへの接続、DOMの生成)を回避し、結果的に効率的にインスタンス化を行うことができます。

Superメソッド

継承を行うとき、スーパークラスから機能を継承してクラスを作成するとき、オーバーライドされたメソッドへ頻繁にアクセスしたいと思うでしょう。
最終的に、この特殊な実装の新しい一時的なメソッド(._super)はサブクラスのメソッドからのみアクセスでき、スーパークラスのメソッドを参照することができます。

例えば、もしスーパークラスのコンストラクタを呼び出したい場合、このテクニックで以下のように実現することができます。

この機能的な実装は、いくつかのステップを踏みます。
始めに、オブジェクトリテラルは、新しいPersonインスタンス(このコンストラクションについては以前触れられている)に必要な、既存のクラスの拡張に使われます(Person.extendで渡されているような)。

このマージ時に、簡単なチェックを行います。プロパティの場合はのマージを試みるか、あるいは、関数の場合は置き換えるか。もし関数の場合、スーパーメソッドが動作する方法が必要になります。

とても強力なメソッドをカプセル化する、匿名のクロージャー(関数を返すもの)を作成します。 クロージャーの実行時、正常に振る舞うように古いthis._superの参照を(それがあるかどうかを無視して)保存し、クロージャーの実行終了後、それを元に戻します。 これは、同名の変数がすでに存在していた場合に(誤って上書きしないように)役立ちます。

次に、既存のスーパークラスのprototypeへの参照を持っている新しい _super メソッドを作ります。
ありがたいことに、それがオブジェクトのプロパティである場合functionは自動的にコンテキストが設定され、他の追加の変更や再スコーピングをする必要はありません。(生成されたインスタンスはスーパークラスへの参照を持ちます)

最後に、オリジナルのメソッドをコールするとそれ自身の処理を行い、その後_superを元の状態に戻し、処理結果を戻します。

今ではいくつかの同様な(上記のような)結果を得る方法があります。(arguments.calleeからアクセスできるsuperメソッドをメソッドにひもづける実装を見て来ました)しかし、このテクニックがユーザビリティとシンプルさを兼ね備えたベストな方法であると思っています。

完成した作品の中で、JavaScriptのプロトタイプシステムの裏に隠された、もっとたくさんの核心について触れたいと思っています。しかし、みなさんにこれを試し、使ってもらうためにこの「クラス」の実装を見せたいと思っていました。
単純化したコードからはたくさんの学びがあると思います。(学習しやすく、拡張しやすく、ダウンロードしやすい)そう、つまりこの実装はJavaScriptのクラス構築と継承の基礎について学び始めるのにとてもいい場所だと思っています。

[Fixnel] iOS風スクロールを実現するライブラリを書いてみた

2012年9月23日 17:38

iOS風スクロールライブラリ、名前は「Fixnel」

最近の案件で、ライブラリを使用すること自体がNG、というケースの案件があり、そういう場合でも対応できるよう、iOS風スクロールをさせるライブラリ を自前で書いてみた。発端がそういう状況なので、もちろんどのライブラリにも依存していない。このライブラリ単体で動作します。

ちなみに名前の由来ですが、hogehogeスクロール的なものはなんか色々出ているので、どうせならまったく違う名前を、っていうことと、"fix" と "panel" を組み合わせた造語になっていますw

[デモ、詳細はこちら]

[Downloadはこちら]

GitHubページを初めて作ってみた

さて、今回のライブラリはGitHubにて公開中です。
また当ブログのコンセプトとして、デモとソースを同時に公開するようにしているので(できてないのもあるけど・・)、当然ながらデモもあります。
そしてデモをどうしようかなーと思った時に、どうせならと思ってGitHubページで作ってみました。

使い方や実際に使用したデモなど、すべてそちらに記載されているので詳細はそちらをご覧ください。
色々使ってみてはいるものの、多少のバグなどもあるので、もしバグを発見された方は連絡をいただけると助かります><

ドラッグ&ドロップで要素を入れ替えるスマホ向けjQuery pluginを作った

2011年12月31日 09:10

dragreplace.js

とある案件で作る必要があったので、それをカスタマイズしてjQueryプラグインの形にしてみたのが今回作成したdragreplace.jsです。

できることはシンプルで、ドラッグ&ドロップで要素を入れ替えられるようにしました。ただ、主にスマホ(WebKit)で使うことを想定して作っています。
そのため動作はWebKitだけになっています。(transitionやtransformを使って操作しているため)

pluginについてはgithubでも公開しています。

デモ

jsdo.itでデモを公開しています。それを貼りつけたのがこちら↓
(WebKit系のみ対応しているので、WebKit系ブラウザでご覧ください)

dragreplace.js demo - jsdo.it - share JavaScript, HTML5 and CSS

動作は単純です。右側にある部分をドラッグすることで、該当の要素と入れ替えることができます。
jQueryのpluginの形になっているので以下のように指定するだけで簡単にdrag&dropで入れ替えができます。
jQueryのセレクターで指定した要素でグルーピングされるので、グループ外の要素とは置換されなくなります。

要素の置換にはtransitionを利用してアニメーションされるようにしているので、どことどこが入れ替わったのかが視覚的にわかりやすくなっています。

Config - 設定オプション

draggerオプションをfalse(デフォルトはture)にすることで、要素全体をドラッグ対象にすることができます。
trueの場合は指定した要素の右側にドラッグするための要素が自動で追加され、そこをドラッグすることで要素の移動ができるようになります。

イベントについて

dragreplace.jsでは、置換完了時にカスタムイベントreplacedを発火しています。
置換完了時になにか処理したい場合にこのイベントをlistenしてください。

また、イベント発火時にはそれぞれ置換された要素の参照が渡されます。(fromとtoをプロパティに持つオブジェクト)

CSSについて

dragreplace.jsは、ドラッグ中や置換対象などの見た目をCSSで制御しています。その際に使用しているクラスは以下の通りです。

クラス名 利用説明
replaceable replaceableを実行すると、対象となる要素に自動で付与されます。見た目の変更はありません。
dragging ドラッグ中に、ドラッグ元の要素に付与されます。ドラッグされていることを明示的にする目的で使用されます。
dragTarget ドラッグ中に、マウスや指に追従する要素に付与されます。要素自体はドラッグ元の要素の複製になります。
hit ドラッグしている要素が置換対象にヒットしているかどうかの当たり判定です。当たり判定がtureの場合にhitクラスが付与されます。
replaceItemMove 置換実行時、相互に要素が移動しているときに付与されるクラスです。要素自体はそれぞれの要素の複製になります。

HTML5でスマホをコントローラにするゲームを作ってみた

2011年10月27日 09:00

Canvasゲームをカスタマイズ

ゲーム自体は以前作ったものをそのまま使いました。

今回作ったスマホコントローラ版

http://edo-m18.me:9000/

以前作ったものをカスタマイズして、弾を打つ部分と自機を移動する部分を、関連付けたスマホから操作できるようにしてみたものです。
これはあくまでアイデア、ってことで快適にプレイできるまでは作りこんでいません(; ´Д`)
ただ、特にプラグインなどを使わずともここまでできる、というのは非常に面白いなと思いました。

Node.jsを使って実装

今回、WebSocket部分はNode.jsを使って実装しました。
最近Node.jsにハマりすぎてプライベートではNode.jsしか触ってませんw
やはりサーバサイドとクライアントサイドが同じ言語、というのはとても実装しやすいですね。Node.jsおすすめです。
ちなみに最近、Node.js関連については別ブログで記事を書いてます。まだ全然記事数が少ないですが、興味がある方はぜひ。→ EBLOG Branch

機能説明

簡単に機能を説明すると、Node.jsのSocket.IOモジュールを使ってWebSocketを使えるようにします。
その後、Socket.IOのversion0.7? から追加されたnamespaceを使ってPCで見ている画面とスマホ画面を結びつけます。

最初にPCでアクセスするとスマホでアクセスするためのID入力が求められるので適当なアルファベットでIDを入力します。
するとそのIDを元にスマホでアクセスするURLが表示されるので、そのURLにスマホでアクセスします。

すると画面には「tab to shoot!」という文字しか出ませんが、タップで弾を発射、加速度センサーで自機の移動ができるようになります。
横向きに持ち、左右に傾けることで自機を動かすことができるようになっています。

若干タイムラグが発生しますが、ゲーム画面のコントローラとしてスマホを使うのは面白なーと思って作ってみました。
※まだ全然調整していないので、Androidでは動いてません。現状はiOSオンリーです。

iOSのフォトビューワのような動きを実装するfrick-image.js

2011年7月11日 09:34

JavaScriptライブラリ作りました

久々にJavaScriptライブラリを作ってみました。その名も「frick-image.js」。

まずは下のデモを見てもらうと、どんなものか分かると思います。ちなみに、アニメーションを実装しているのはFirefoxとWebKit系(iOS、Android含む)のブラウザのみになります。それ以外は、ドラッグ可能なことと、あふれた要素を強制的に定位置に戻す機能のみとなります。

iOSのフォトビューワのような動きを実装する - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。写真を内包するコンテナになる要素(*A)と、その中に写真を含むボックスのふたつの要素(*B)を用意し、以下のようにスクリプトを実行すればOKです。指定するのは、コンテナではなく、Bの方の要素のID(やクラス)を渡します。指定方法はjQueryで指定できる方法で指定することができます。

JavaScript

HTML

ダウンロード

デバッグ用CSSをその場で書けるブックマークレットを作ってみた

2010年8月17日 23:23

とにかくその場で追加したいんです

最近あまりに忙殺されているえどです。こんにちわ。
いやほんと、平日なにもする時間がありません。なので、手短に書きたいと思いますw

普段制作をしていると、その場でさっと CSS をとりあえず追加してみて、動きがどうなるか見てみたいな、と思うことはありませんか?
それが IE6 ならなおさら。しかも保存した CSS がサーバに反映されるまで多少のタイムラグがあった日には反映されたのを見るまでなにもできません。(もちろん、ローカルのファイルを参照させて開発する、なんてこともできますが、とにかくちょっと今ここで! っていうのってなにげにあるんですよね)

んで、新しい PC になって特にそう思うことがよくあったので、それならいっそ、とブックマークレットを作ってみました。
作りが違うんで、IE 用とそれ以外のブラウザ用で分けてます。

作ってみたブックマークレット

そして下のやつがその作ってみたブックマークレットです。

CSSを手軽に追加するブックマークレット(IE6対応) - jsdo.it - share JavaScript, HTML5 and CSS

使い方

使い方は簡単です。
コーディングをしているときなどに、ちょっとこのスタイルを追加したい、というときに実行します。
すると右上に入力ボックスが出てくるので、あとはそこに普段通りに CSS を書くだけです。
table td {...}みたいに継承関係も含めて記述可能です。もちろん複数のセレクタやプロパティを書いても大丈夫です。

Firebug では、その要素自体にスタイルを追加する、みたいなことはできますが、継承関係を持ったスタイルを追加したり、class 自体にスタイルが割り当てられてない場合に、class そのものにスタイルを追加できない、という物足りなさがありました。

そういう不便さもあったので作ったものです。よかったら使ってみてください。

ポップアップさせたレイヤーをキャンセルするスクリプト

2009年8月19日 18:39

本スクリプトでレイヤー外をクリックするとレイヤーを消去する。

最近では JavaScript によってクリックされたときなどに、サブ情報などがポップアップするものをよく見かけます。間違えてクリックしてしまったり、やっぱりやめたい、といったとき、そのポップアップされた要素には通常「閉じるボタン」があると思います。
しかし、Windows などの OS では、その要素外をクリックすることで表示されたメニューなどをキャンセルする、というのはよくありますよね。

これを、サイト上でも実装できればユーザの直感的な操作でキャンセルさせることができ、とても便利です。
しかし、それをいざ実装しようとすると色々と処理をしないといけません。

そこで、この "キャンセルだけ" を行うスクリプトを作ってみました。n動作としては簡単で、画面いっぱいに透明の div 要素を追加し、そこへキャンセル用のアクションを設定します。

下のデモを見てもらうと分かりやすいと思いますが、ポップアップしたメニュー外をクリックすることでポップアップしたレイヤーを消す、という処理をさせています。

ポップアップさせたレイヤーをキャンセルするスクリプトデモ

JavaScript ファイルダウンロード

キャンセル用のレイヤーを呼び出すには、上記の JS ファイルを読み込ませた後、以下のようにします。

キャンセル用レイヤーの呼び出し

ここで渡されているのは、キャンセル時に実行させたい関数です。これはキャンセルレイヤーがクリックされたときに動作させたい関数を設定してください。
追加されたレイヤー用の div をクリックすると、自分自身を消す処理のほかに、上で渡された関数を実行します。

またこのスクリプトには追加された div を消すための関数も用意されています。
実行には以下のようにします。

キャンセル用レイヤーの消去

上記の関数を実行すると、キャンセル用のレイヤーのみを消去します。
なにかのアクションを実行させたあと、このレイヤーが残り続けるのを防ぐために使用してください。

IE6でも簡単に角丸ボックスが作れるJavaScript - 「curvyCorners」

2009年6月26日 12:05

今回は便利な JavaScript ライブラリの紹介です。その名も「 curvyCorners 」n

このライブラリ、IE6 なんかでも動作するので、簡単な角丸ボックスを実装したい場合は便利です。JS がオフの場合でも、角丸にならないだけでレイアウトが崩れないのもいい感じです。n

指定方法も簡単で、ボーダーや背景色・画像は普通通り CSS で指定し、角丸にしたい要素を JavaScript で指定するだけで動作します。n

導入の仕方

導入は簡単です。 curvyCorners からダウンロードできるファイルを解凍すると出てくるcurvycorners.js を読み込み、以下のように指定するだけです。n

イベント登録用の関数も定義されているので、addEventでクロスブラウザにイベントの登録ができるようになっています。n

また、指定する要素には CSS セレクタのように指定します。(ただし、+ や などの複雑なセレクタには対応していないようです)
子孫セレクタは対応しているようで、#test pのような指定にも対応していますが、一階層までの対応のようで、#test div pなどは対応していないようです。n

複数の要素に対して設定したい場合は、カンマ区切りで指定することで指定できるようです。(ex. #test1, #test2)n

1  2