Flasher-Flash/Web Design-Webデザイン制作,Flash制作

ASCII.jp：HTML5のInline SVGをJavaScriptで操作｜古籏一浩のJavaScriptラボ

HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、Inline SVG（インラインSVG）で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。

連載ラインナップ

HTML文書内にSVGを表示
JavaScriptでSVGを制御（←今回の記事）
JavaScriptとSVGでシューティングゲームを作成

JavaScriptでSVG要素にアクセスする

　最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ（要素）にID名を指定する場合とまったく同じです。たとえば（四角形）を制御したい場合は以下のように記述します（ID名は任意）。

ASCII.jp鐚〓Query篏〓〓〓〓〓〓〓〓〓〓Query Mobile〓〓〓薛〓〓

JavaScriptをWebデザイナーでも扱える身近な存在に変えた「jQuery」。世界中の有名サイトで使われている人気フレームワークの作者＝ジョン・レッシグ（John Resig）氏が次に注目したのが「モバイル」です。2010年10月に最初のアルファ版がリリースされた「jQuery Mobile」は、モバイルWebアプリケーションフレームワークの本命として、多くの開発者の関心を集めています。

　本稿では、11月13日に開幕するWeb Directions East 2010に合わせて来日予定のジョン・レッシグ氏が、jQuery Mobileの魅力（の一部）を紹介します。（編集部）

これでできる！ クロスブラウザJavaScript入門：第20回　JavaScriptによるスタイルの操作｜gihyo.jp … 技術評論社

ダイアログの表示

ウェブアプリでよく使われるインタフェースとして，ページを覆い被せるように（動的に）コンテンツを表示する方法があります。決まった名前はないようですが，モーダルダイアログ・モードレスダイアログや，オーバーレイなどの名前で呼ばれることが多いようです。

なお，モーダルとモードレスの違いは，前面に出てきたコンテンツの後ろにある元のコンテンツを操作可能か否かという点で分けられるようです。操作できない場合はモーダル，操作できる場合はモードレスです。

さて，このモーダルダイアログは画面中央に配置するのが一般的です。この画面中央という配置が意外に簡単ではないことは多くの方がご存知のことと思います。

まずはCSSだけで処理するアプローチを見ていきましょう。表示する要素のサイズが固定で，IE 6非対応という条件ならば，CSSだけで実現可能です。

【レビュー】仕様解釈の違いによるJavaScript動作の違い | エンタープライズ | マイコミジャーナル

Mysterious arguments object assignments - NCZOnlineにおいてJavaScriptの仕様の解釈の違いによるブラウザごとの挙動の違いが紹介されている。Nicholas C. Zakas氏は当初この挙動をFirefox JavaScript実装のバグだと考えて問題報告をしたが、Firefox、IE、Safariで同じ動作をし、さらに開発者からは仕様の要求している挙動を実装したものだという説明があったという。ただし、Chromeはそれらブラウザとは別の挙動を見せる。

まずNicholas C. Zakas氏は次のJavaScriptコードを紹介。Firefox、IE、SafariはNaNを返すが、Chromeは10を返すという。これは Chromeではarguments[1] = 10;のアサインがnum2に対しても適用されるが、それ以外のブラウザではそれが適用されないことに起因している。

これでできる！ クロスブラウザJavaScript入門：第18回　アニメーションの実用｜gihyo.jp … 技術評論社

アニメーションを用いる場面と効果

さて，前回学んだようなアニメーションは，すなわち「状態の変化を見せる」ものでした。ある状態から次の状態へと時間をかけて変化させる処理を実装したものです。

なぜこういったアニメーションを行うのか，それには主に2つの理由・効果があります。

まず1つは読み込みの待ち時間をごまかす効果があります。サムネイル画像をクリックしたら，大きな画像の読み込みを開始しつつユーザーにはアニメーションを見せておき，読み込みが完了したら画像を表示するといったテクニックは，ユーザーの体感的な早さを改善する効果があります。

また，状態の変化が段階的に起こることで，その変化がどの程度の変化なのか直感的にわかる効果があります。例えば，あるリンクをクリックしたときに同じページ内のある位置にスクロールする場合，一瞬でスクロールするとスクロール前と後の違いがわからなくなることがあります。スクロールをアニメーションにすることで，どこからどこまでスクロールして，その間にどの程度のコンテンツがあったのかなど，ユーザーが得られる情報量を増やすことができます。

次のリンクは画面を下方向に500px移動させるスクリプトを実行します。1つ目は直接移動し，2つ目は0.5秒かけて移動します。

これでできる！ クロスブラウザJavaScript入門：第17回　アニメーションの基礎｜gihyo.jp … 技術評論社

第17回　アニメーションの基礎
アニメーションの前提知識

HTMLにおける通常のアニメーションを構成するのは，「特定の要素」に対して，「そのCSSプロパティ」を「ある時点からある時点まで」の時間の中で，「ある値からある値に操作」する，といった要素です。

特定の要素と，CSSプロパティについては問題ないと思います。問題となるのは「時間と値の操作」です。

まず，単純にインクリメントするだけというサンプルを見てみましょう。

良くないアニメーション

var y = 0;
var element = document.getElementById('cbjs-17-1');
var id = setInterval(function(){
y++;
element.style.top = y/10 + 'px';
if (y === 1000){
clearInterval(id);
}
}, 1); // 1ms置きに実行

アニメーションを実行

単純計算で言えば，1ms置きに1000回インクリメントしているので，1秒間の処理となるはずですが，実際には1秒間に1000回もの描画（1000FPS）を行うことはまず不可能です。このままでは実行される環境に大きく依存した（低スペックな環境では極端に遅い）アニメーションになってしまいます。

そこで，開始時刻から経過した時間で現在の位置を決め，その位置に移動させる方法が一般的です。

つまり，1秒間で100px移動させたい場合なら，300msの時点では30px移動していればよく，500msでは50px，1000msを超えたら100pxにしてアニメーションを終了すればよい，ということです。時間を基準にすれば，時間通りにアニメーションが終わるというごく当たり前なことです。

JavaScriptを無効にしているユーザは1.3% | エンタープライズ | マイコミジャーナル

WebサイトやWebアプリケーションを開発する場合、JavaScriptとCSSは欠かせない状況になっている。しかし中には JavaScriptを無効しているユーザもいるため、JavaScriptやCSSを必須構成にして設計したサイトやWebアプリケーションは、こうしたユーザに対して情報を提供できないことになる。気になるのは具体的にどの程度のユーザがJavaScriptを無効にしているのか、というところにある。

米国サイトにおけるアクセス分析の結果であるため日本のサイトでも同じデータが適用できるがわからないが、興味深い報告がYDNブログに掲載されている。米国のYahoo!サイトアクセスログから検索エンジンのクローリングやボットからのアクセス、スパムアクセスなどを除外して、リアルユーザのアクセスのうち何%がJavaScriptを無効にした状態でサイトにアクセスしているかを報告している。

説明によれば多くの国や地域で平均1.3%ほどがJavaScriptを無効にした状態でYahoo!へアクセスしているという。もっとも多い国で米国の2%、もっとも少ない国でブラジルの0.25%になるという。割合で見ると少ないが、実際にYahoo!にアクセスするユーザの数は月あたり300 万ユーザ。2%でも6万ユーザがJavaScriptを無効にした状態でアクセスしていることになり、無視できる数とはいえないという。記事では JavaScriptを無効にしたユーザに対しても情報を提供するためにはプログレッシブエンハンスメントの手法が有効であることにも言及している。

ASCII.jp：JavaScriptで並列処理ができる「Web Workers」｜古籏一浩のJavaScriptラボ

HTML 4時代のJavaScriptは主にWebページの装飾に使われていたので、マシンやブラウザーへの負担はそれほど高くなく、JavaScriptの処理にユーザーが待たされることはほとんどありませんでした。ところが「Webアプリケーションのプラットフォーム」と位置付けられるHTML5時代になると、JavaScriptのプログラムは巨大で複雑になります。そのため、各ブラウザーベンダーはJavaScriptエンジンを高速化し、複雑で時間のかかる処理を素早くこなせるように努力してきました。

　しかし、いくら高速化しても回避できないこともあります。従来のJavaScriptはJavaのようなスレッド処理ができないので、時間のかかる処理を実行するとブラウザーが停止状態になってしまい、その間、ユーザーはUI操作がまったくできなくなる問題がありました。

　そこで、ブラウザーで複数の処理を並行して実行させるための機能（オブジェクト）として「Web Workers」が登場しました。Web Workersは現在、HTML5の関連APIとしてW3Cで標準化が進められています。今回のJavaScriptラボは、このWeb Workersの基本的な使い方を解説し、最終的にはJavaScriptで画像解析処理を実行するサンプルを作成します。

　なお、今回はサンプルごとに動作するブラウザーが異なります。すべてのサンプルが動作するブラウザーはFirefox 4.0βのみで、Safari 5/Chrome 6/Opera 10.6では一部のサンプルのみ動作します（File APIと組み合わせたサンプルは動作しない）。Internet Explorer（IE）は、最新のIE9ベータ版でもWeb Workersをサポートしていないので動作しません。

【レポート】高速なWebページはレンダリングが最初、次にJavaScript | エンタープライズ | マイコミジャーナル

より高速に動作するWebページを開発する方法として、Steve Souders氏が自身のブログにおいてRender first. JS second.という記事を公開している。高速に動作するWebページを作成するには、先にレンダリングを済ませて、そのあとでJavaScriptを実行するようにすることだと説明する内容になっている。Webページ開発におけるひとつの指針として参考になる。

Steve Souders氏はJavaScriptの遅延読み込みテクニックを広く紹介することになった人物としても有名。遅延読み込みのためのテクニックはほかにもあり、ユーザが大規模でかつ高速性が求められるサイトではすでに採用されていることが多いテクニックとなっている。こうしたテクニックを使っても、レンダリングが完了してからJavaScriptを実行するようにするのはなかなか難しい。

これでできる！ クロスブラウザJavaScript入門：第15回　プロトタイプと継承#2｜gihyo.jp … 技術評論社

こんにちは，太田です。前回は__proto__を使ってJavaScriptにおけるプロトタイプについて解説しました。今回はそこから発展して継承の方法を学びます。
JavaScriptにおける継承

まず，目標とする形を確認しておきましょう。やはり，前回同様Google ChromeのデベロッパーツールかSafariのウェブインスペクタのコンソールにて，次のコードを実行してみてください。

dirによるElementの解析

dir(document.createElement('span'))

こちらの通り，WebKitではspan要素はそれ自身にいくつものプロパティを持っています。もっと下のほうを見てみると，

ASCII.jp：JavaScriptで作るインタラクティブな電子書籍｜今すぐ始める電子書籍制作入門

複雑なレイアウトができる電子書籍のフォーマットは限られているので、今回は以下の2つの形式のデータを作成します。レイアウトが指定できないテキスト形式やKindleのAZW/MOBI形式は対象外です。

* PDF
* EPUB

ASCII.jp：HTML5＋JavaScriptでビデオエフェクターに挑戦！｜古籏一浩のJavaScriptラボ

HTML5で追加される新機能の中でも、特に華やかなものといえば「Video」と「Canvas」でしょう。本連載でも、HTML5 Videoを使った3D動画プレーヤーやCanvasを使ったペイントツールなどを作成してきましたが、今回はこの2つの機能を組み合わせて「ビデオエフェクター」作りに挑戦します。

　ひとくちにビデオエフェクターといっても、アドビ システムズの「After Effects」のように事前にレンダリングしてムービーを作成するアプリケーションから、アップルの「Motion」のようにムービーを再生しながらエフェクトを処理するタイプ、さらにはVJ (Video Jockey/Visual Jockey）の世界で使われる「motion dive」のようなリアルタイムでエフェクトを加えられるアプリケーションまで、さまざまです。

　今回は、リアルタイムでエフェクトをかけながら動画を再生するWebページをHTML5とJavaScriptだけで作ります。さすがにVJ用アプリケーションのような処理は現在のブラウザーの性能では無理がありますから、多少妥協してMotionのような“ほぼリアルタイム”の処理を目指します（それでもかなりのマシンパワーを消費しますが）。

　PhotoshopやAfter Effectsのように「プラグイン」でエフェクトの種類を増やせるようにもします。エフェクトを定義するスクリプトはメイン処理とは別に作成し、他のサーバーにホスティングされているプラグインでも、URLさえ指定すれば利用できる仕組みです。

　なお、HTML5 VideoとCanvasに関してはすでに本連載でも説明していますので、今回は詳しく触れません。素材となる動画については、H264と Theora/Oggに変換されたファイルが用意されている前提で解説します。今回の記事を読む前に、以下の記事を読んで復習してください。

minify - Project Hosting on Google Code

minify
Combines, minifies, and caches JavaScript and CSS files on demand to speed up page loads.

サイズの縮小や複数のファイルをまとめて自動化

JS Minifier

JavaScript圧縮ツール

ヤフー、JavaScriptライブラリ「YUI 3.0.0」を公開:ニュース - CNET Japan

Yahooは米国時間9月29日、「Yahoo User Interface（YUI）」ライブラリのバージョン3をリリースした。同ライブラリは、JavaScriptやCSS（Cascading Style Sheet）で記述された装飾的なユーザーインターフェースエレメントをウェブサイトに付加することのできる、プログラマ向けのソフトウェアコレクションである。

10年ぶりにJavaScriptがついにバージョンアップへ、年内承認の見通し 〓 Blog on Publickey

10年ぶりにJavaScriptがバージョンアップする見通しとなりました。JavaScript（正式名称はECMAScript）の標準化団体であるEcma Internationalが4月9日に「Ecma International finalises major revision of ECMAScript 」というリリースを発表しています。ファイナルドラフトとなるドキュメント「final draft ECMA-262 5th edition」も公開されました。

痒いところに手が届くJavaScriptライブラリたち ｜ HiGash.Net

deconcept 〓 YouTube Google Maps API Mashup

JavaScript 2.0へ向け、ECMAScript Edition 4参照実装最新版 | エンタープライズ | マイコミジャーナル

次期JavaScript 2.0のベース仕様になるとみられるECMAScript Edition 4だが、先日The Ecma TG1 groupから参照実装のアーリーアクセス(マイルストーン2)が提供された。ソースコードが提供されているほか、Windows、Mac OS X、Linuxのバイナリが用意されている。

出力結果の確認 : Hotwired

どんなリクエストでもお待たせしません (第3回) - 出力結果の確認

どんなリクエストでもお待たせしません : Hotwired

キーボードイベントの例 : Hotwired

要素のドラッグ : Hotwired

ブラウザーごとに異なる挙動 : Hotwired

JavaScriptイベントモデル：パート2 : Hotwired

3種類の方法を組み合わせた例 : Hotwired

選択的なイベント監視 : Hotwired

onClickイベント : Hotwired

onLoadイベント : Hotwired

JavaScriptイベントモデル (第2回) - onLoadイベント

JavaScriptイベントモデル : Hotwired