FumioNonaka.com in 2008

What was done during 2009-2019
2009-2019年情報

2019.01.03
FN1912002「Create React App 入門 01: 3×3のマス目をつくる」
「Create React App」でつくる、モジュール分けされたシングルページアプリケーション(SPA)のひな形から、React公式サイトのチュートリアルと同じマルバツゲームに仕上げるシリーズ解説です。まずは、3×3のマス目で盤面を描きます。

FN2001001「Create React App 入門 02: クリックしたマス目にXをつける」
マルバツゲームの3×3の盤面で、クリックしたマス目に「X」印をつけます。9つのマス目のデータやその操作をどこで行い、コンポーネント間でどのようにやり取りするのかがポイントです。

2019.11.26
FN1911003「Vue.js + ES6入門 12: ローカルコンポーネントを定める」
Todoアプリケーションのチュートリアルシリーズ「Vue.js + ES6入門」に新しい章が加わりました。第11回までで用いたグローバルコンポーネントから、親コンポーネントを特定して加えるローカルコンポーネントに書き替えます。

2019.11.12
FN1911002「Vue.js + Vuex入門 08: フォーカスをコントロールする」
単一ファイルコンポーネントにVuexのStoreを加えてつくるTodoMVCアプリケーションのチュートリアルシリーズ「Vue.js + Vuex入門」の第8回は、いよいよアプリケーションを仕上げます。操作していて気になるのは、フォーカスの扱いです。不具合をふたつ直します。

2019.11.09
FN1911001「Vue.js + Vuex入門 07: 項目のテキストをダブルクリックで再編集する」
単一ファイルコンポーネントにVuexのStoreを加えてつくるTodoMVCアプリケーションのチュートリアルシリーズ「Vue.js + Vuex入門」の第7回にです。これまで、追加した項目を書き替えるには、一旦削除して入力し直すしかありません。これを、項目のダブルクリックで編集できるようにしましょう。

2019.11.06
FN1910005「Vue.js + Vuex入門 06: チェックした項目をまとめて削除する」
単一ファイルコンポーネントにVuexのStoreを加えてつくるTodoMVCアプリケーションのチュートリアルシリーズ「Vue.js + Vuex入門」の第6回で新たに加えるのは、チェック済みの項目をまとめてリストデータから除くボタンです。さらに、Storeのmutationsに送るcommit()をmethodsに定める、ヘルパー関数mapMutations()も使ってみます。

2019.10.21
FN1910004「Vue.js + Vuex入門 05: チェックをまとめてオン/オフする」
単一ファイルコンポーネントにVuexのStoreを加えてつくるTodoMVCアプリケーションのチュートリアルシリーズ「Vue.js + Vuex入門」の第5回で加えるのは、リスト項目チェックをまとめてオン/オフできる機能です。そしてもうひとつ、Storeのデータを算出プロパティに定めるためのヘルパー関数もご紹介します。

2019.10.08
FN1910001「Vue.js + CLI入門 08: 要素にアニメーションを加える」
Vue.jsで要素を動的に加えたり、除いたりするとき、アニメーションで変化させることができます。本稿では、基本的な操作についてご説明しました。

FN1910002「Vue.js + Vue I18n: アプリケーションを多言語に対応(国際化)させる」
Vue I18nは、Vueアプリケーションを国際化(多言語対応)させるためのプラグインです。ページに表示するテキストを、ロケールに応じて切り替えられます。「Vue.js + CLI入門 08: 要素にアニメーションを加える」でつくったTodoリストは、インタフェースを含めたテキストはすべて英語です。これを日本語に切り替えられるようにします。

2019.09.26
FN1909003「Vue.js + Vuex入門 02: クラスバインディングと項目の削除」
今回は、ふたつ機能を加えます。ひとつは、チェック済み項目のスタイルを変えること。もうひとつは、項目ごとに削除ができるようにすることです。

FN1909004「Vue.js + Vuex入門 03: データの変化に応じた処理とローカルへの保存」
今回加えるのは、データをローカルから読み込んで、追加や変更されたら保存する機能です。また、未処理の項目数をフッタに示すようにします。

2019.09.19
FN1909002「Vue.js + Vuex入門 01: Storeを使う」
「VuexはVue.jsアプリケーションのための状態管理パターン+ライブラリです」。アプリケーションにひとつしかないStoreがデータなどの状態を集中してもち、状態は決まったやり方でしか変えられません。ただ、概念的な話だけでは、なかなかピンとこないでしょう。本シリーズでは、Vuexが採り入れられた単一ファイルコンポーネントのVueアプリケーションをひとつ、チュートリアル形式でつくってみます。

2019.09.04
FN1909001「React + Redux入門 06: コンポーネントをプレゼンテーションとコンテナに分ける」
ReactとReduxでアプリケーションをつくるとき、コンポーネントはプレゼンテーションとコンテナに分けることが推奨されています。アプリケーションの組み立てが明らかになり、コンポーネントも使い回しやすいからです。

2019.08.21
FN1908005「React + Redux入門 05: PropTypesで型を確かめる」
PropTypesは、コンポーネントに与えられるプロパティのデータをさまざまなかたちで確かめられる、Reactに備わった型チェックの機能です。「React + Redux入門 04」で書いたコードにPropTypesの型チェックを加えます。

2019.08.16
FN1908004「React + Redux入門 04: リスト項目のフィルタを加える」
前回は、リストの各項目にチェックサインをつけて、未処理の項目はテキストのスタイルが変わるようにしました。さらに、項目のリスト表示を、すべてのほか処理済みまたは未処理だけに切り替えられるフィルタの機能を加えます。

2019.08.09
FN1908001「React + Redux入門 01: テキスト入力のフォームをつくる」
React Redux公式サイトの「Basic Tutorial」は、ほぼでき上がったサンプルの構成と各モジュールの役割を説明したうえで、コードを書くのはStoreの作成と接続(connect()メソッドの呼び出し)だけです。これでは細かい組み立てが、なかなか頭に入りません。そこで、一から手を動かしてつくり進めるかたちで解説してみます。作例は同じTodoリストで、モジュールの役割分けがよりしっかりしたReduxサイトのTodoリストを採り上げました。今回は、ReduxとReact Reduxをインストールして、Reactのひな形アプリケーションをつくるところまでです。

FN1908002「React + Redux入門 02: フィールドに入力したテキストを項目リストに加える」
「React + Redux入門 01」でつくったのは、テキスト入力フィールドを加えたフォームでした。今回は、ReduxのStoreに接続して、ボタンクリックにより、入力フィールドのテキストがリスト項目としてページに差し込めるようにします。

FN1908003「React + Redux入門 03: 項目の処理済みと未処理でスタイルを変える」
「React + Redux入門 02」で、リストに項目が追加できるようになりました。Todoリストですから、項目が済んだかどうかのチェックをつけ、スタイルが変わるようにしましょう。

2019.07.28
FN1907003「Vue.js + ES6入門 11: データチェックの応用とkey属性」
前回ご説明したデータチェックの基本に加えて、もう少し厳密なチェックのオプションをご紹介します。また、ディレクティブv-forとともに用いるべき、key属性の定め方とその役割を解説しましょう。

2019.07.19
FN1907002「Vue.js + ES6入門 10: コンポーネントの応用とデータのチェック」
前回つくったTodoリストのアプリケーションのサンプルから、さらにコンポーネントを分けて入れ子にします。そして、データのチェックも加えて、つくりをしっかりします。

2019.07.16
FN1906005「Vue.js + ES6入門 08: フィルタをボタンで切り替える」
前回と基本的な機能は変えません。フィルタの切り替えを、リンクのハッシュでなく、ボタンで行うようにしてみます。

FN1907001「Vue.js + ES6入門 09: アプリケーションをコンポーネントに分ける」
コンポーネントは、Vue.jsのコードとHTML要素を使い回しができる部品に切り分けたものです。前回つくったTodoリストのアプリケーションから、3つの部分をコンポーネント化してみます。

2019.06.19
FN1906004「Vue.js + ES6入門 07: 表示する項目をフィルタで切り替える」
「Vue.js + ES6入門 06: 項目を調べてデータから削除する」では、処理済み項目をまとめて削除できるようにしたり、項目ごとの削除ボタンを加えたりしました。今回は、データは消さずに、処理済みと未処理およびすべての項目を切り替え表示できるようにします。

2019.06.03
FN1906001「Vue.js + ES6入門 04: フィールドに入力したテキストを動的に項目として加える」
Vue.jsは、入力とアプリケーションの状態を結びつける双方向バインディングが簡単にできます。入力したテキストを項目リストのデータに追加すれば、ページのリストも書き替わって項目が加わるのです。

FN1906002「Vue.js + ES6入門 05: 項目を数えて表示する」
Vue.jsで、条件に合ったデータの数え方を考えます。ひとつのやり方は、メソッドを呼び出して調べることです。もうひとつ、メソッドであってもプロパティのように扱える「算出プロパティ」というオプションがあります。

2019.05.31
FN1905001「Vue.js + ES6入門 01: Vue.jsを始める」
Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです。画面の表示(View)に絞った操作を扱います。jQueryでつくると手間がかかるようなインタフェースも、簡単にわかりやすく組み立てられます。本稿では、Vue.jsのインストールおよび設定を行い、とりあえずごく簡単に画面のインタラクティブな操作をしてみます。なお、JavaScriptコードの構文は、ECMAScript 2015(ECMAScript 6)準拠です。

FN1905002「Vue.js + ES6入門入門 02: 要素のclass属性を動的に変える」
Vue.jsには、アプリケーションとHTMLドキュメントの要素の間で互いにデータを参照し合う「バインディング」の機能があります。要素の属性も、バインディングで動的に変えられます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみましょう。

FN1905003「Vue.js + ES6入門 03: データから動的にリストをつくる」
Vue.jsは、複数のデータが納められた配列から値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちの決まった複数のデータが、簡単に扱えるのです。

2019.03.22
FN1903001「Vue.js + CLI入門 07: フォーカスをコントロールする」
公式サイト「TodoMVCの例」を単一ファイルコンポーネント(.vue)でつくり直すチュートリアルシリーズ最終話です。フォーカスの扱いについて、ふたつの不具合を直して仕上げます。カスタムディレクティブについても解説しました。

2019.02.28
FN1902001「Vue.js + CLI入門 06: 項目のテキストをダブルクリックで再編集する」
Vue.js公式サイトの「TodoMVC の例」を単一ファイルコンポーネントでつくるシリーズの第6回は、ひとつの項目を削除してから改めて追加することなく、すでに入力した項目のテキストを書き替えられるようにします。

2019.01.02
FN1901001「Vue.js + CLI 05: チェックをまとめてオン/オフしたり削除する」
Vue.js公式サイトの「TodoMVC の例」を単一ファイルコンポーネントでつくるシリーズの第5回で加えるのは、リスト項目をまとめて処理するふたつの機能です。ひとつは、リスト項目すべてのチェックを一度にオン/オフできるようにします。もうひとつは、チェックされた項目をまとめて削除できるボタンです。

2018.12.29
FN1812003「Vue.js + CLI入門 04: リスト表示する項目を選び出して切り替える」
Vue.js公式サイトの「TodoMVC の例」を単一ファイルコンポーネントでつくるシリーズの第4回、加える機能はデータのフィルタリングです。チェックをつけた処理済みと、まだついていない未処理の項目を切り替えて表示できるようにします。

2018.12.24
FN1812001「Vue.js + CLI入門 02: リスト項目の削除とスタイル変更」
前回に引き続き、Vue.js公式サイトの「TodoMVC の例」を単一ファイルコンポーネントでつくってゆきます。今回は、リストの各項目を削除できるようにするとともに、チェックした項目はスタイルを変更します。

FN1812002「Vue.js + CLI入門 03: データをローカルに保存する」
Vue.js公式サイトの「TodoMVC の例」を単一ファイルコンポーネントでつくるシリーズの第3回は、データをローカルから読み込んで、追加や変更されたら保存します。また、未処理の項目数をフッタに示すようにします。

2018.11.30
FN1811001「Vue.js + CLI入門 01: リスト項目の表示と追加」
Vue.js公式サイトの「TodoMVC の例」がお題です。Vue CLI 3を用いて、単一ファイルコンポーネント(.vue)で新たにつくってみます。JavaScripの基礎を学んだ方が対象です。Vue.jsについては、基本的な事項も補っていきます。今回はリスト項目の表示と追加までです。

2018.9.30
FN1809001「Vue CLI 3入門 06: CLIサービス」
Vue CLIサービスは、Vue CLIプロジェクトにインストールされるバイナリです。デフォルトで備わっているコマンドのほか、プラグインが加えるものもあります。CLIサービスの役割と使い方についてご説明します。

2018.8.29
FN1808001「Vue CLI 3入門 05: プラグインとプリセット」
Vue CLIはプラグインで機能が加えられ、設定はプリセットとして保存できます。Vue CLIのプラグインとプリセットの役割と使い方についてご説明します。

2018.7.30
FN1807001「Vue CLI 3入門 01: Vue CLIとは」
Vue CLIは、Vue.jsでアプリケーションをつくるための、コマンドラインインタフェース(CLI)にもとづく開発ツールです。2018年7月29日にv3.0.0-rc.9が公開されました。Vue CLIの機能とシステムの構成要素について簡単にご説明します。

FN1807002「Vue CLI 3入門 02: インストールする」
Vue CLIはバージョンが3に改められたことにともない、公式サイトの解説にも少し手が加えられたようです。公式サイトの「Installation」をもとに、Vue CLIのインストールの仕方についてご説明します。

FN1807003「Vue CLI 3入門 03: プロトタイプを簡単につくる」
Vue CLIを使えば、Vue.jsによるアプリケーションのプロトタイプが簡単につくれます。公式サイトの「Instant Prototyping」をもとに、Vue CLIを用いたプロトタイプのつくり方についてご説明します。

FN1807004「Vue CLI 3入門 04: プロジェクトをつくる」
Vue CLIで、基本的な設定とともにプロジェクトのひな形がつくれます。公式サイトの「Creating a Project」をもとに、Vue CLIを使ったプロジェクトのつくり方とGUIについてご説明します。

2018.7.11
FN1806002「RxJS 6入門 04: Subscription」
Subscriptionは、実行中のObservableなど、捨て去ることができるリソースをもつオブジェクトです。もっとも重要なメソッドSubscription.unsubscribe()により、保持しているリソースが破棄できます。RxJS 5公式「Manual」の「Subscription」を下じきに、バージョン6に改め、コード例や解説も書き替えました。

FN1806003「RxJS 6入門 05: Subject」
Subjectは、Observableであり、なおかつObserverです。Observableと違って、複数のObserverに値をマルチキャストできます。機能が加えられたサブクラスもいくつかあります。RxJS 5公式「Manual」の「Subject」を下じきに、バージョン6に改め、コード例や解説も書き替えました。

FN1806004「RxJS 6入門 06: Observableをつくる関数とオペレータ」
RxJSの基礎となるのはObservableです。オペレータはObservableを操作するのにとても役立ちます。複雑な非同期の処理を、わかりやすいコードで組み立てられるのです。このRxJS 6入門シリーズは公式「Manual」を下じきに、サンプルコードや解説は書き改めるかたちで進めています。けれど、「Operators」についてはRxJS 6で内容が大きく変わりました。そのため、コードも解説も大幅に手直ししています。

FN1806005「RxJS 6入門 07: Scheduler」
Schedulerは、オペーレータがサブスクリプションをいつ開始し、通知はいつ送るのかコントロールします。サブスクリプションや通知が、どのコンテキストで行われるのかをスケジュールできるのです。GitHubのReactiveX/rxjs「Scheduler」を下じきに、サンプルコードや解説は改めました。

2018.6.1
FN1806001「RxJS 6入門 03: Observer」
Observerは、Observableが送る値を使うオブジェクトです。コールバックをまとめて、Observableからの通知を受け取ります。RxJS 5.5公式「Manual」を下じきに、バージョン6に改め、コード例や解説も書き替えました。

2018.5.31
FN1805011「Angular 6入門 07: ルーティングで個別情報を示す」
前回までのコードに手を加え、ルーティングのコンポーネントをさらに切り分けます。ダッシュボードやリスト表示のコンポーネントで選択した個別データをルーティングして、詳細情報の表示に遷移させます。

FN1805012「Angular 6入門 08: HTTPサービスでリモートのデータを取り出して書き替える」
ダッシュボードやリスト表示のコンポーネントで表示するデータをHTTPサービスによりリモートから取り出し、選んだ個別データを詳細情報の画面で書き替えられるようにします。前回のコードと、アプリケーションの見た目の動きは変わりません。

FN1805013「RxJS 6入門 01: RxJSを使ってみる」
RxJSはリアクティブプログラミングのJavaScriptライブラリです。リアクティブプログラミングとは、データを時間軸にもとづくオブジェクトの流れとして表し、値やイベントを受け取ったとき関連したプログラムが反応(react)して処理するというプログラミングの考え方です。非同期の処理やイベントを扱うコードがわかりやすく組み立てられます。RxJSライブラリをインストールしたうえで、公式サイトの「Overview」に沿っていくつか短いコードを書いて試してみます。

FN1805014「RxJS 6入門 02: Observable」
ObservableはRxJSの基本となるオブジェクトです。値をいくつでもまとめて、時間の制約なく扱うことができます。RxJS 5.5公式「Manual」を下じきに、バージョン6に改め、コード例や解説も書き替えました。

2018.5.17
Angular Version 6が5月4日にリリースされました。枠組みや構文に大きな変更はなさそうなものの、細かな違いも初心者にはつまづきのもとです。そこで、「Angular入門」シリーズをVersion 6に改訂しています。現在06まで書き改めました。

FN1805004「Angular 6: Angular CLIで手早くアプリケーションをつくる」
Angularのアプリケーションをつくろうとすると、まず環境をつくらなければならず、TypeScriptなど学んでおくべき技術もあります。Angular CLIは、アプリケーションの開発を手助けするツールです。このツールで、とりあえず動きが確かめられるAngularアプリケーションのひな形をつくってみます。

FN1805005「Angular 6入門 01: アプリケーションの枠組みをつくる」
「Angular 6入門」シリーズはAngular公式サイトの「Tutorial」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かく分けて確かめるようにし、TypeScriptの構文についても補いました。今回つくるのは、Tutorialをとおして構築するアプリケーションの枠組みです。

FN1805006「Angular 6入門 02: 編集ページをつくる」
「Angular 6入門 01: アプリケーションの枠組みをつくる」で書いたコードに新たなコンポーネントを加えて、インタラクティブにアプリケーションのデータが編集できるようします。

FN1805007「Angular 6入門 03: データのリストを表示する」
複数のデータをテンプレートにもとづいてリスト表示し、マウスクリックでリスト項目が選べるようにします。「Angular 6入門 02: 編集ページをつくる」で書いたコードに手を加えます。

FN1805008「Angular 6入門 04: 詳細情報のコンポーネントを分ける」
前回までつくったアプリケーションの動きはそのままに、詳細情報の編集部分を別のコンポーネントに切り分けます。アプリケーションに機能を加えたり、変更するときに、コンポーネント分けしてある方が扱いやすいからです。また、他のアプリケーションに使い回すこともできます。

FN1805009「Angular 6入門 05: データをサービスにより提供する」
前回までのコードに手を加え、データの取得や提供などの管理を、サービスのモジュールに分けます。そうすると、コンポーネントはデータがどこからどのように得られているのか気にすることなく、もっぱら表示とデータのやりとりを扱えばよくなります。モジュールの役割は絞られ、管理がしやすくなるのです。

FN1805010「Angular 6入門 06: ルーティングで画面を切り替える」
今回は、ルーティングの機能によって画面を切り替えます。ページのコンポーネントを差し替えるだけでなく、URLも改めることでページの遷移を示すのです。

2018.5.7
FN1805001「TypeScript: 高度な型」
TypeScriptには基本型に加え、より複雑な型を表す機能が備わっています。公式Handbook「Advanced Types」にもとづき、解説とコード例を大きく改めました。

FN1805002「TypeScript: Symbol」
Symbolは、不変で一意のデータ型です。オブジェクトのプロパティ名(識別子)として使われたりします。本稿は、公式Handbook「Symbols」にもとづき、解説とコード例を大きく改めました。

FN1805003「TypeScript: イテレータとジェネレータ」
イテレータとジェネレータは、データから項目を順に取り出して反復処理するために採り入れられた仕組みです。本稿は、公式Handbook「Iterators and Generators」にもとづき、解説とコード例を大きく改めました。

2018.4.12
FN1804003「TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く」
2年前の同名ノート(FN1609002)を全面改訂しました。Visual Studio Codeのアップデートにより、メニューや設定ファイルの記述が変わったためです。

2018.4.8
FN1804002「RxJS入門 07: Scheduler」
Schedulerは、オペーレータがサブスクリプションをいつ開始し、通知はいつ送るのかコントロールします。サブスクリプションや通知が、どのコンテキストで行われるのかをスケジュールするのです。公式「Manual」の「Scheduler」を下じきに、サンプルコードや解説は改めています。「Manual」の「Overview」については、これでひととおり説明を終えました。

2018.4.2
FN1804001「RxJS入門 06: オペレータ」
RxJSの基礎となるのはObservableです。オペレータはObservableを操作するのにとても役立ちます。複雑な非同期の処理を、わかりやすいコードで組み立てられるのです。公式「Manual」の「Operators」を下じきに、サンプルコードや解説は改めました。

2018.3.29
FN1803005「Vue.js + ES6: SVGでレーダーチャートを操作する」
Vue.js公式サイトの「SVGグラフの例」は、SVGでレーダーチャートを描き、値がスライダで動的に操作できます。さらに、データを新たに加えたり除いたりすることも可能です。この作例に少し手を加え、ECMAScript 2015 (ECMAScript 6)の構文で書いてみます。

2018.3.22
FN1803004「if文なしに論理演算子で条件判定の処理をする」
演算子の論理和||や論理積&&は、ほとんどの場合if文などの分岐処理に条件として使われます。けれど、これらの論理演算子だけで条件判定の処理ができることもあるのです。理解するためには、論理演算子の正確な働きを知っておかなければなりません。

2018.3.15
FN1803002「jQuery: プラグインSelect2で<select>要素のドロップダウンリストを操作する」
Select2はjQueryのプラグインで、<select>要素のドロップダウンリストにさまざまな表現や機能が加えられます。簡単な作例で、設定と操作の仕方についてご説明します。

FN1803003「Vue.js + ES6: コンポーネントをラップする」
Vue.js公式サイトの「ラッパーコンポーネントの例」は、カスタムコンポーネントの中にjQueryプラグインSelect2をラップして用いています。この作例を下敷きにして、コードをより簡潔に書き改めました。また、応用例も加えてあります。なお、使う構文はECMAScript 2015です。

2018.3.6
FN1803001「RxJS入門 05: Subject」
Subjectは、Observableであり、なおかつObserverです。Observableと違って、複数のObserverに値をマルチキャストできます。機能が加えられたサブクラスもいくつかあります。公式「Manual」の「Subject」の構成にしたがいつつ、サンプルコードに手を加え解説も改めました。

2018.2.28
FN1802004「RxJS入門 01: RxJSを使ってみる」
RxJSはObservableオブジェクトを軸にしたリアクティブプログラミングのJavaScriptライブラリです。非同期の処理やイベントにもとづくコードが簡単に組み立てられます。RxJSライブラリをインストールしたうえで、公式サイト「Manual」の「Introduction」に沿っていくつか短いコードを書いて試してみます。

FN1802005「RxJS入門 02: Observable」
ObservableはRxJSの基本となるオブジェクトです。値をいくつでもまとめて、時間の制約なく扱うことができます。公式「Manual」の「Observable」を下じきに、サンプルコードや解説は改めました。

FN1802006「RxJS入門 03: Observer」
Observerは、Observableが送る値を使うオブジェクトです。コールバックをまとめて、Observableからの通知を受け取ります。公式「Manual」の「Observer」を下じきに、サンプルコードや解説は改めました。

FN1802007「RxJS入門 04: Subscription」
Subscriptionは、実行中のObservableなど、捨て去ることができるリソースをもつオブジェクトです。もっとも重要なメソッドSubscription.unsubscribe()により、保持しているリソースが破棄できます。公式「Manual」の「Subscription」を下じきに、サンプルコードや解説は改めました。

FN1802008「Vue.js + ES6: 再帰的なコンポーネントでツリー表示をつくる」
「再帰的なコンポーネント」は、テンプレートに自分自身を入れ子にして読み込む仕組みです。基本となる構造を階層化して表現できます。公式サイトの「ツリー表示の例」にもとづき、コンポーネントを再帰的に用いて、入れ子にしたデータを、ツリー構造でリスト表示します。JavaScriptコードの構文は、ECMAScript 2015 (ECMAScript 6)を用いました。

2018.2.16
FN1802003「Angular 5入門 10: HTTPサービスでリモートのデータを検索する」
ダッシュポードにコンポーネントを加えて、フィールドに入力したテキストからデータが検索できるようにします。「Angular 5入門」シリーズはこれが最後です。

2018.2.10
FN1802002「Angular 5入門 09: HTTPサービスでリモートのデータを加えたり除いたりする」
「Angular 5入門 08: HTTPサービスでリモートのデータを取り出して書き替える」は、HTTPサービスによりデータをリモートから取り出し、書き替えるようにしました。さらに、データを新たに加えたり、すでにあるデータも除けるようにします。

2018.2.7
FN1802001「Angular 5入門 08: HTTPサービスでリモートのデータを取り出して書き替える」
「Angular 5入門 07: ルーティングで個別情報を示す」は、ダッシュボードやリスト表示のコンポーネントで選択した個別データをルーティングして、詳細情報の表示に遷移させました。今回は、HTTPサービスによりデータをリモートから取り出し、書き替えるようにします。アプリケーションの見た目の動きは変わりません。

2018.1.31
FN1801005「Angular 5入門 06: ルーティングで画面を切り替える」
「Angular 5入門 05: データをサービスにより提供する」は、データの取得や提供などの管理を、サービスのモジュールに分けました。今回は、ルーティングの機能によって画面を切り替えます。ページのコンポーネントを差し替えるだけでなく、URLも改めることでページの遷移を示すのです。

FN1801006「Angular 5入門 07: ルーティングで個別情報を示す」
「Angular 5入門 06: ルーティングで画面を切り替える」は、アプリケーションにルーティングのモジュールを新たに加え、ページに差し込むコンポーネントをURLとともに改めて遷移するように表現しました。今回は、ルーティングのコンポーネントをさらに切り分けます。ダッシュボードやリスト表示のコンポーネントで選択した個別データをルーティングして、詳細情報の表示に遷移させます。

2018.1.24
FN1801004「Angular 5入門 05: データをサービスにより提供する」
「Angular 5入門 04: データのリストを表示する」は、データのリスト表示と詳細情報の編集を別のコンポーネントに切り分けました。さらに、データの取得や提供などの管理を、サービスのモジュールに分けます。そうすると、コンポーネントはデータがどこからどのように得られているのか気にすることなく、もっぱら表示と入力を扱えばよくなります。モジュールの役割は絞られ、管理がしやすくなるのです。

2018.1.20
FN1801003「Angular 5入門 04: 詳細情報のコンポーネントを分ける」
「Angular 5入門 03: データのリストを表示する」では、複数のデータをリスト表示して、それらの詳細情報がそれぞれ書き替えられるようにしました。今回は、アプリケーションの動きはそのままに、詳細情報の編集部分を別のコンポーネントに切り分けます。アプリケーションに機能を加えたり、変更するときに、コンポーネント分けしてある方が扱いやすいからです。また、他のアプリケーションに使い回すこともできます。

2018.1.17
FN1801002「Angular 5入門 03: データのリストを表示する」
複数のデータをテンプレートにもとづいてリスト表示し、マウスクリックでリスト項目が選べるようにします。「Angular 5入門 02: 編集ページをつくる」で書いたコードに手を加えるかたちで進めます。

2018.1.2
FN1801001「Angular 5入門 02: 編集ページをつくる」
「Angular 5入門 01: アプリケーションの枠組みをつくる」で書いたコードに新たなコンポーネントを加えて、インタラクティブにアプリケーションのデータが編集できるようします。

2017.12.30
FN1712002「Angular 5入門 01: アプリケーションの枠組みをつくる」
「Angular 5入門」シリーズはAngular公式サイトの「Tutorial」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かく分けて確かめるようにし、TypeScriptの構文についても補いました。はじめにつくるのは、Tutorialをとおして構築するアプリケーションの枠組みです。

FN1712003「EaselJS NEXT: Pointクラスに新たに加わるメソッド」
EaselJSの次期バージョン(NEXT)には、Point.interpolate()とPoint.polar()およびoffset()の3つのメソッドが加えられます。Pointクラスはただxy座標をもつだけでなく、その演算のメソッドが備えられていくようです。

2017.12.21
FN1712001「Angular 5: Angular CLIで手早くアプリケーションをつくる」
Angular CLIは、アプリケーションの開発を手助けするツールです。このツールで、とりあえず動きが確かめられるAngularアプリケーションのひな形をつくってみます。

2017.12.7
CreateJS勉強会「ついに正規リリースされたCreateJS 1.0.0を使う」
務める演目「CreateJS 1.0.0で何が変わったか」のレジュメを公開します。

2017.11.30
FN1711002「Animate CC 2018で奥行きのあるカメラワークを表現する」
Animate CC 2017から仮想カメラが備わりました。さらに、Animate CC 2018 (バージョン18.0)で加わったレイヤー深度を使えば、アニメーションに奥行きのあるカメラワークが採り入れられます。参考になる記事やビデオチュートリアルをご紹介します。

2017.11.12
FN1710004「Vue.js + ES6: グリッドコンポーネントをつくる」
Vue.jsサイトの「グリッドコンポーネントの例」は、コンポーネントの使い方を知るのによい作例です。これをECMAScript 2015(ECMAScript 6)の構文でつくってみます。とくに、データのコレクション(リスト)は、Arrayクラスの新しいメソッドとアロー関数式で扱うようにしました。

FN1711001「Vue.js: 動的に変更する要素にアニメーションを加える」
Vue.jsで要素を動的に加えたり、除いたりするとき、アニメーションで変化させることができます。例を示しながら、基本的な操作についてご説明します。

2017.10.24
FN1710003「ES6: Promiseオブジェクトを使う」
ECMAScript 6に備わったPromiseは非同期の処理を扱うためのオブジェクトです。処理が成功したか、失敗したかによるコールバックがそれぞれ定められます。Promise()コンストラクタでつくるオブジェクトは、多くの場合関数の戻り値として用いられます。Promiseオブジェクトの使い方を、動きが確かめられる簡単なコードにもとづいて解説します。

2017.10.17
FN1710002「CreateJS: ECMAScript 2015(ECMAScript 6)を用いて継承する」
CreateJSでクラスの継承をECMAScript 5で定めるときは、そのためにextend()とpromote()メソッドが用意されています。けれど、ECMAScript 6では、標準の書き方でよいようです。

2017.10.10
FN1709006「CreateJS: TweenJS 1.0.0アップデート」
2017年9月14日付でGitHubにTweenJS 1.0.0がリリースされました。これで、CreateJSのライブラリがすべて出揃ったということです。VERSIONS.txtに沿って、説明やリンクを補いつつご紹介します。

FN1710001「CreateJS: TweenJS 1.0.0のプラグインを使う」
TweenJS 1.0.0で、プラグインモデルが大幅に変わりました。そこで、実際にSamplePluginとColorPluginのふたつのプラグインを試してみます。

2017.9.27
FN1709001「Vue.js + ES6: アプリケーションにコンポーネントを使う」
コンポーネントは、Vue.jsのコードとHTML要素を使い回しができる部品に切り分けたものです。「Vue.js入門 07: データを項目ごとに削除する」でつくったTodoリストのアプリケーションから、ふたつの部分をコンポーネント化します。

FN1709002「CreateJS: EaselJS 1.0.0アップデート」
2017年9月14日付でGitHubにEaselJS 1.0.0が公開されました。CreateJS Blogにまだ記事が出ないのは、おそらくTweenJSのアップデートを待っているのでしょう。VERSIONS.txtに沿って、説明やリンクを補いつつご紹介します。

FN1709003「CreateJS: SoundJS 1.0.0アップデート」
2017年9月14日付でGitHubにSoundJS 1.0.0が公開されました。VERSIONS.txtに沿って、説明やリンクを補いつつご紹介します。

FN1709004「CreateJS: PreloadJS 1.0.0アップデート」
2017年9月14日付でGitHubにSoundJS 1.0.0が公開されました。VERSIONS.txtに沿って、説明やリンクを補いつつご紹介します。

FN1709005「PreloadJS 1.0.0: FontLoader()コンストラクタ」
FontLoaderはPreloadJS 1.0.0に備わった新たなクラスで、フォントファイルやCSS定義およびCSSパスを読み込みます。

2017.7.16
FN1707007「Sass: SCSSの基本的な書き方」
Sassの書き方の基本を公式サイトの「Sass Basics」に沿ってご紹介します。構文をSCSSに絞り、解説はわかりやすく改めて、参考のリンクも加えました。

2017.7.12
FN1707006「Angular 4入門 09: HTTPサービスでデータを追加・削除する」
HTTPサービスで新たなデータをリモートに加えたり、すでにあるデータも削除できるようにします。

2017.7.10
FN1707005「Angular 4入門 08: HTTPサービスでデータを取得・保存する」
オブジェクトのデータをファイルで保持してメモリに読み書きするのでなく、HTTPサービスによりリモートから読み込んで、書き替えられるようにします。

2017.7.9
FN1707003「Sass: 使えるようにするには」
SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。そのため、Sassを使えるようにするには少し準備が必要です。その手順をかいつまんでご説明します。

FN1707004「Vue.js: TodoMVCをつくる 05 ー項目のテキストを再編集できるようにする」
Todoリストにすでに入力した項目のテキストをダブルクリックで書き替え、[return]/[Enter]キーで確定、[esc]キーでキャンセルできるようにします。お題としたVue.js公式サイトの「TodoMVC の例」が完成します。

2017.7.6
FN1707002「Vue.js: TodoMVCをつくる 04 ーチェックをまとめてオン/オフしたり削除する」
Todoリストに、項目がまとめて扱える機能をふたつ加えます。ひとつは、終了済みのチェックを、すべての項目にまとめてつけたり消したりするチェックボックスです。もうひとつは、チェック済みの項目をボタンクリックですべてリストから除けるようにします。

2017.7.3
FN1707001「Vue.js: TodoMVCをつくる 03 ー表示する項目をフィルタで切り替える」
Todoリストの項目のうち、チェックがついて済んだものとそうでないものを、切り替えて表示できるようにします。

2017.6.28
FN1706009「Vue.js: TodoMVCをつくる 02 ーデータをローカルに保存する」
Todoリストの項目データをlocalStorageによりローカルで扱うようにします。また、表示するテキストをフィルタで動的に切り替えます。

2017.6.26
FN1706008「Vue.js: TodoMVCをつくる 01 ー項目の追加と削除および残り項目数表示」
Vue.js公式サイトの「TodoMVC の例」を数回に分けて解説します。「Vue.js入門」01〜07で扱った作例と、リストとしての機能はさほど違いません。けれど、「TodoMVC の例」はやたらとボタンが並んでおらず、すっきりとしたインターフェイスです。「Vue.js入門」にはない工夫がコードにも施されています。今回は、ごく基本的な項目の追加と削除および残り項目数の表示です。

2017.6.5
FN1706004「Angular 4入門 05: リスト表示のコンポーネントを分ける」
コンポーネントのモジュールから、リスト表示の仕事を別のモジュールに分けます。メインのコンポーネントとして、ナビゲーションに専念させるためです。

FN1706006「Angular 4入門 06: Routerを使う」
Routerは、ページの表示やURLのパスを変えるナビゲーションの仕組みです。Routerでページに加えるコンポーネントを切り替えます。

FN1706007「Angular 4入門 07: Routerで画面を遷移させる」
遷移する画面とナビゲーションを整理します。さらに、テンプレートやスタイルは外部ファイルに分けます。

2017.6.5
FN1706002「Angular 4入門 02: リストを加える」
配列のデータからリストの要素を組み立てて、クリックされた項目の情報を表示します。また、テンプレートからつくられた要素に、スタイルを割り当てます。

FN1706003「Angular 4入門 03: コンポーネントを分ける」
作例のコンポーネントを分け、クラスもひとつモジュールに切り出します。開発が進んで規模が大きくなっても管理しやすくなり、コンポーネントの使い回しもできるようになります。

FN1706004「Angular 4入門 04: サービスをつくる」
データを複数のコンポーネントから参照できるように、サービスという仕組みに切り分けます。コンポーネントはデータをもたずに済むので、それをどう表示するかだけに絞ってつくり込めます。コンポーネントごとの動作確認もしやすくなるでしょう。

2017.6.1
FN1706001「Angular 4入門 01: 編集ページをつくる」
「Angular 4入門」シリーズはAngular公式サイトの「TUTORIAL」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かく分けて確かめるようにし、TypeScriptの構文についても補いました。まずは、基本的な機能であるデータバインディングについてご説明します。

2017.5.23
FN1705010「EaselJS NEXT: StageGL()コンストラクタ」
EaselJS次期バージョンのStageGLインスタンスは、WebGLに最適化された表示リストの最上位となるContainerオブジェクトです。これまでのStageに替えて、基本的に同じように使えます。ただし、WebGLの仕様にもとづく注意点はあります。

2017.5.23
FN1705009「three.js入門 05: アニメーションを加える」
正二十面体の頂点座標をランダムに歪ませたうえで、他のライブラリも使って、立体やカメラをアニメーションさせます。

2017.5.14
FN1705008「AngularJS 1.6入門 07: 項目を調べて削除する」
AngularJSのコントローラで管理している項目のデータを調べて、条件にしたがって削除してみます。要素のマウスクリックでコードを実行するディレクティブも、併せてご紹介しましょう。

2017.5.13
2017年5月13日土曜日開催の「HTML5感。～HTML5の最新動向と明日から使いたくなるHTML5のあれこれ～」で務めた50分間の一席「CSSとCanvasを使ったインタラクションの作例紹介」のサンプルと参考リンクを公開します。

FN1705007「AngularJS 1.6入門 06: 項目を数えて表示する」
AngularJSのコントローラで管理している配列の項目を数え上げて、HTMLに動的に表示してみます。配列エレメントをひとつひとつ取り出して処理する関数も、併せてご紹介しましょう。

2017.5.11
FN1705005「AngularJS 1.6入門 04: 動的にリストをつくる」
AngularJSは、コントローラで定めた配列の値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちが決まったいくつものデータを、差し込んで表示したいときに便利です。

FN1705006「AngularJS 1.6入門 05: コントローラで項目を動的に追加する」
AngularJSのコントローラにメソッドを定めると、データが動的に処理できます。入力フィールドに書いたテキストを、項目としてHTMLドキュメントに加えてみます。

2017.5.10
FN1705004「AngularJS 1.6入門 03: コントローラで値を与える」
AngularJSは、JavaScriptコードで定めたコントローラにより、データの扱いを定めることができます。手始めに、コントローラで初期値をHTMLドキュメントに与えてみます。

2017.5.9
FN1705002「AngularJS 1.6入門 01: AngularJSを始める」
Angularは4が最新のバージョンになりました。けれど、新しいバージョンを学習するコストや、既存のサイトの更新といったことも考えると、Angular JS 1.6を学ぼうと考える人もまだ少なくないでしょう。そこで、AngularJS 1.6のインストールおよび設定を行い、とりあえずごく簡単なアプリケーションとして動かしてみます。

FN1705003「AngularJS 1.6入門 02: 要素の属性を動的に変える」
AngularJSには、HTMLドキュメントのデータを他の要素で参照する「データバインディング」の機能があります。このデータバインディングにより、要素の属性を動的に変えることもできます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみましょう。

2017.5.8
FN1705001「three.js入門 04: マテリアルを使う」
立体の表面の見た目を決める素材となるマテリアルについてご説明します。

2017.4.24
FN1704013「Angular 4: とにかくAngular 4でコードを書いて動かす」
Angular 4をローカルで試そうとすると、環境をつくらなければならず、TypeScriptなど学んでおかなければならない技術もあります。本稿はAngularサイトの「QuickStart」と「Setup for local development」にもとづいて、環境を整え、サンプルのコードを動かすまで、できるかぎり手っ取り早くご説明します。

2017.4.24
FN1704012「three.js入門 03: ジオメトリーを使う」
かたちを決める幾何学的な情報がジオメトリーについて、基本的(primitive)な立体の形状をいくつかご紹介します。そのうえで、立体の頂点座標をランダムに歪めてみます。

2017.4.17
FN1704010「three.js入門 01: 3次元空間で立方体を回す」
three.jsは、WebGLを使って3次元の表現ができる無償のJavaScriptライブラリです。できるだけ短いコードで3次元空間に立方体をつくって、回してみます。使ったプロパティやメソッドには、公式ドキュメントへのリンクを加えました。

FN1704011「three.js入門 02: フォンマテリアルとライトを使う」
「three.js: 3次元空間で立方体を回す」のコードに手を加えます。立方体のマテリアルを差し替え、シーンにライトを置きます。また、イベントリスナーでドキュメントの読み込みを待ってコードが実行されるようにしました。

2017.4.17
FN1704009「React + ES6 入門 04: ゲームの履歴をさかのぼる」
前回加えた一手ごとの配置データの履歴をさかのぼって、盤面の表示が戻せるようにします。いわば、待ったができるようになるわけです。

2017.4.14
FN1704008「CreateJS: StageGL ー EaselJSのWebGL対応が新たに」
2017年4月13日付CreateJS Blogに「StageGL - A Faster, Better, Stronger WebGL update to EaselJS」と題して、EaselJSに新たなWebGLへの対応としてStageGLクラスが導入されると発表されました。このblogにもとづいて、その中身をご紹介します。

FN1704007「React + ES6 入門 03: ゲーム管理のコンポーネントを分ける」
9マスの盤に「X」と「O」を交互に加え、並びから勝ちを決めるマルバツゲームの動きは基本的に変えず、あとで機能が増やせるように、ゲームの管理を別のコンポーネントに分けます。

2017.4.11

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第21回「スライドする立方体」
3つの立方体のマウスインタラクションです。マウスポインタを重ねた立方体の色が変わり、手前にスライドします。実のところ、3次元の操作は加えていません。2次元の変換で立体風に見せているのです。

FN1704004「TypeScript: 型の互換性」
TypeScriptの型は、データの構造にもとづいて決まります。型が合うか合わないかをどのように決めているのかご説明します。

2017.4.10
FN1704006「React + ES6 入門 02: マルバツゲームの勝ちを決める」
React公式サイトの「TUTORIAL」をもとに、ReactおよびJSXの構文に加え、ECMAScript 6(ECMAScript 2015)についても解説します。9マスのマルバツゲーム盤面で、クリックしたマス目に「X」と「O」が交互に出るようにし、並びから勝ちを決めます。

2017.4.9
FN1704005「React + ES6 入門 01: ゲームの盤面をつくる」
ReactはJSXという独特な構文を使い、公式サイトの解説にはECMAScript 6(ECMAScript 2015)が用いられるようになりました。「React + ES6 入門」では「TUTORIAL」をもとに、マルバツゲームをつくりながらそれらの構文も含めてご説明します。

2017.4.7
FN1704002「Angular 2入門 08: HTTPサービスが返すObservableを使ったデータの検索」
「Angular 2入門 07: HTTPサービスでデータを追加・削除する」でつくったサンプルは、HTTPサービスによりリモートにデータを追加し、削除もできるようにしました。さらに、データを検索する機能も加えましょう。そのとき、HTTPサービスが返すObservableオブジェクトを使います。

FN1704003「React + ES6: まずは動かしてみる」
ReactはFacebook社が開発している、今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに表示することができます。ただ、なじみの少ない構文の予備知識や準備が求められるため、初めての方には手をつけにくいきらいがあります。最小限のコードを示し、ECMAScript 6のクラス構文も含めて、とりあえず大枠をご説明します。

2017.4.1
FN1704001「TypeScript: 型推論」
TypeScriptは、型づけされていないデータの型を推論します。その推論が、どこでどのようになされるのかについてご説明しましょう。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第20回「トグルスイッチのアニメーション」
今回は、動きそのものはあまり凝りようのないトグルスイッチがお題です⁠。とはいえ、視覚的な表現に細かい工夫があります。アニメーションの動きより、陰影やグラデーションなどの組み合わせが鍵です。

2017.3.27
FN1703005「TypeScript: 列挙型」
列挙型は、任意の数の識別子に数値を定めます。数値が意味のある名前で扱えるということです。選択肢やオプションなどにわかりやすい名前をつけて、内部的には数値として処理することができます。

2017.3.24
FN1703004「Vue.js: 簡単なMarkdownエディタをつくる」
Vue.js公式サイトの「例」に、わずかなコードでつくられた「Markdown エディタの例」があります。使っているライブラリやVueの構文についての説明はないので、いざつくってみようとすると、つまずきそうなところがあります。そこで、解説を加えながら、少しずつ組み立ててみます。

2017.3.19
FN1703003「TypeScript: 関数」
関数はJavaScriptで処理を部品分けして組み立てたり、あるいはクラスを定める役割も果たします。TypeScriptでは、ECMAScript 2015(ECMAScript 6)の仕様も採り入れて、型づけや参照などについて起こりがちな問題を確かめたり、コードを簡単にわかりやすく書くための機能が加わっています。

2017.3.13
FN1703001「TypeScript: クラス」
ECMAScript 2015(ECMAScript 6)には構文にクラスが加わりました。TypeScriptも、この仕様に沿ってクラスを採り入れています。コンパイルされるJavaScriptコードは、ES6に対応する前のブラウザで動きます。

2017.3.10
FN1703002「タイムラインに置いた子インスタンスを参照したい」
Animate CC 2017の[HTML5 Canvas]ドキュメントで、タイムラインに置いた子インスタンスを参照して扱おうとしたとき、インスタンスがつくられてから表示リストに加わるまでには段階を経ます。その過程を知っておくことが、子インスタンスを扱ううえで大切です。

FN1702012「Visual Studio Code 1.9でTypeScript 2.2を使う」
Visual Studio Codeは、新しい安定したバージョンのTypeScriptとともに提供されます。2017年1月に公開されたVisual Studio Code 1.9.1がサポートするのは、TypeScript 2.1.5です。そこで、TypeScript 2.2を使うためのやり方をかいつまんでご紹介します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第19回「画像のアコーディオン表示」
今回は、アコーディオンのように開く画像パネルがお題です⁠。どの画像を選び、その前にどれが開いていたかにより、動きが少しずつ違ってきます。

2017.2.23
FN1702011「D3.js入門 05: グラフの棒にラベルを加える」
「D3.js入門 04: グラフにアニメーションを加える」で数値軸と項目軸のついた縦棒グラフに、アニメーションを与えました。グラフの左にはパーセンテージの数値軸があるので、棒の長さから大きさの見当はつきます。けれど、もっとわかりやすいように、グラフの棒ごとに数値のラベルを添えます。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第18回「飛び出す数字のアニメーション」
今回のお題は、メニュー項目にポインタを重ねると数字が飛び出してくるバーです⁠。ちょっとした動きとはいえ、アニメーションを魅力的に見せる工夫があります。あまり手が混みすぎていないところも好ましく感じます。

2017.2.22
FN1702010「Vue.js入門 07: データを項目ごとに削除する」
Vue.jsで画面に示したリストから、選択された項目を消します。項目に添えたボタンクリックで項目のデータを取り出し、データの納められた配列からデータを除けば、新たな内容で表示が改められます。

2017.2.19
FN1702008「Vue.js入門 05: 項目を数えて表示する」
Vue.jsには、普通のプロパティとメソッドのほか、プロパティのように扱えるメソッドが備わっています。そのプロパティで、条件に合ったデータを数えて返してみます。

FN1702009「Vue.js入門 06: 項目を調べてデータから削除する」
Vue.jsのデータを書き替えると、新たな内容で表示が改められます。あらかじめ定めた条件にしたがって、データを削除してみます。

2017.2.17
FN1702006「Vue.js入門 03: データから動的にリストをつくる」
Vue.jsは、複数のデータが納められた配列から値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちの決まった複数のデータが、簡単に扱えるのです。

FN1702007「Vue.js入門 04: フィールドに入力したテキストを動的に項目として加える」
Vue.jsは、入力とアプリケーションの状態を結びつける双方向バインディングが簡単にできます。リストをつくる項目のデータに追加すれば、ページのリストも書き替わるのです。

2017.2.16
FN1702005「Vue.js入門 02: 要素のclass属性を動的に変える」
Vue.jsには、アプリケーションとHTMLドキュメントの要素の間で互いにデータを参照し合う「バインディング」の機能があります。要素の属性も、バインディングで動的に変えられます。そこで、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみます。

2017.2.15
FN1702004「HTML5 Canvasで書き出したCanvasの大きさが倍になる」
Animate CC 2017で[HTML5 Canvas]ドキュメントをパブリッシュして、変数canvasやStage.canvasプロパティで調べた幅(width)や高さ(height)がドキュメントに定めたステージの倍(あるいは3倍)になることがあります。

FN1702003「Vue.js入門 01: Vue.jsを始める」
Vue.jsは、ユーザーインタフェースをつくるためのプログレッシブフレームワークです。画面の表示(View)に絞った操作を扱います。jQueryでは手間がかかるようなインターフェイスも、簡単にわかりやすく組み立てられます。Vue.jsのインストールおよび設定を行い、とりあえずごく簡単に画面のインタラクティブな操作をしてみます。

2017.2.13
FN1702002「TypeScript: インタフェース」
TypeScriptは、データをインタフェースで型づけできます。TypeScriptで型が合うかどうかは、定められた型のプロパティ(メンバー)を照らし合わせて決めます。同じ名前のプロパティを同じ型でもっていれば、型は合っているとされるのです。

2017.2.4
FN1702001「D3.js入門 04: グラフにアニメーションを加える」
「D3.js入門 03: 立て棒グラフに軸の記載を加える」で数値軸と項目軸のついたたて棒グラフをつくりました。グラフにするデータを差し替えて手直ししたうえで、アニメーションも加えてみましょう。こちらが、でき上がりのサンプルです。

2017.1.31
FN1701010「TypeScript: 変数の宣言」
TypeScriptにおける変数の宣言についてご説明します。JavaScriptに備わるver宣言に加えて、TypeScriptはECMAScript 2015の仕様からletとconstを採り入れました。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第17回「立体的なナビゲーションバーのアニメーション」
今回のお題は、ボタンが立体的に並んだナビゲーションバーです⁠。マウスポインタを重ねると、ボタンが飛び出します。3次元の動きで、ボタンの数も多いので、少しやっかいそうに感じるかもしれません。ところが、思いのほかコードは簡単です。

2017.1.27
FN1701009「TypeScript: 基本型」
TypeScriptで用いられる基本的なデータ型についてご説明します。JavaScriptに備わるデータ型だけでなく、TypeScriptがECMAScript 2015の仕様も採り入れて、加えた型や機能もあります。

2017.1.22
FN1701008「Angular 2入門 07: HTTPサービスでデータを追加・削除する」
「Angular 2入門 06: HTTPサービスでデータを取得・保存する」は、データをHTTPサービスによりリモートで読み込んで表示し、書き替えて保存しました。さらに、新たなデータを加えたり、すでにあるデータも削除できるようにします。

2017.1.19
FN1701007「Angular 2入門 06: HTTPサービスでデータを取得・保存する」
「Angular 2入門 05: サービスをつくる」でつくったサンプルは、データをファイルから読み込み、オブジェクトのデータを得て、書き替えたりしていました。このデータをHTTPサービスにより、リモートで扱えるようにします。

2017.1.14
FN1701006「D3.js入門 03: 立て棒グラフに軸の記載を加える」
「D3.js入門 02: 外部ファイルのデータからSVGで棒グラフを描く」の棒は横向きでした。このグラフは縦棒に改め、左側と下側に数値軸および項目軸を加えます。

2017.1.10
FN1701005「D3.js入門 02: 外部ファイルのデータからSVGで棒グラフを描く」
D3.jsは、視覚表現にSVGが使えます。「D3.js入門 01: 棒グラフを描く」のCSSで表したグラフを、SVGで描いてみましょう。また、グラフにするデータは、外部ファイルから読み込むことにします。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第16回「並んで弾けるアニメーション」
今回のお題は、水平に並べた要素に時間差で波紋のような弾けるアニメーションを加えます。アニメーションの工夫があるものの、技術的にはむずかしくありません。ただ、要素の数だけアニメーションのコードが増えます。

2017.1.9
FN1701004「D3.js入門 01: 棒グラフを描く」
D3.jsを使って配列の数値から棒グラフを描いてみます。棒の描画には、CSSを用いました。

2017.1.7
FN1701003「D3.jsを使う」
D3.jsは、データにもとづいて動的にコンテンツを描くJavaScriptライブラリです。HTMLやSVG、CSSなどのWeb標準にのっとって、モダンブラウザにデータを可視化します。本稿はライブラリの基本的な使い方と構文について、かいつまんでご説明します。

2017.1.6
FN1701002「TypeScript: ジェネリック型」
ジェネリック型(Generics)は、型づけに変数を用いる仕組みです。型を定めながらも、具体的な型づけはそのときどきで変えられます。その構文と使い方についてご説明します。

2017.1.1
FN1701001「Angular 2入門 05: Routerを使う」
「Angular 2入門 04: サービスをつくる」の作例のコードをさらにコンポーネントに分け、Routerでコンポーネントを切り替えます。Routerはページの表示やURLのパスを変えるナビゲーションの仕組みです。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第15回「ハンバーガーメニューのアニメーション」
今回のお題は、ハンバーガーメニューのアニメーションです。ハンバーガーアイコンをクリックすると、メニューが右に向けて広がります。技術的にむずかしいところは少なく、ただメニューの数だけ細かい設定が増えます。

2016.12.12
FN1612001「Angular 2入門 04: サービスをつくる」
「Angular 2入門 03: コンポーネントを分ける」の作例でデータを複数のコンポーネントから参照できるように、サービスという仕組みに切り分けます。コンポーネントはデータをもたずに済むので、それをどう表示するかだけに絞ってつくり込めます。コンポーネントごとの動作確認もしやすくなるでしょう。

FN1611004「Angular 2: とにかくAngular 2でコードを書いて動かす」
Angular公式サイトの「QUICKSTART」の中身が一部変わったため、それに合わせて改訂を加えました。

2016.11.29
FN1611007「Angular 2入門 03: コンポーネントを分ける」
「Angular 2入門 02: リストを加える」の作例をさらに手直しします。といっても、見た目や動きは変わりません。コンポーネントを分け、クラスもひとつモジュールに切り出します。開発が進んで規模が大きくなったときに管理しやすくし、コンポーネントの使い回しもできるようになります。

2016.11.28
2016年11月24日木曜日に催された第46回Creators MeetUpで務めた一席「ルーローの三角形と図形問題」のレジュメを公開します。当日の録画(10分間)も加えました。

2016.11.16
FN1611006「Angular 2入門 02: リストを加える」
「Angular 2入門 01: 編集ページをつくる」の作例にさらに手を加えます。配列のデータからリストの要素を組み立てて、クリックされた項目の情報を表示します。また、テンプレートからつくられた要素に、スタイルを割り当てます。

2016.11.14
FN1611005「Angular 2入門 01: 編集ページをつくる」
「Angular 2入門」シリーズはAngular公式サイトの「TUTORIAL」をもとに、説明の仕方や進め方を手直ししたものです。コードの動きは段階を細かめに分けて確かめるようにし、TypeScriptの構文についても補いました。基本的な機能であるデータバインディングについてご説明します。

2016.11.12
FN1611004「Angular 2: とにかくAngular 2でコードを書いて動かす」
Angular 2は今もっとも注目されているフレームワークで、SPAの開発に力を発揮します。ただし、コードを書き始める前に、環境をつくらなければならず、TypeScriptなど学んでおかなければならない技術もあります。JavaScriptの基礎を身につけただけでは足りず、力尽きてしまいそうになるかもしれません。本稿はAngularサイトの「QUICKSTART」にもとづいて、環境を整え、簡単なコードを動かすまで、できるかぎり手っ取り早くご説明します。

2016.11.8
FN1611003「TypeScriptTypeScript入門 12: デコレータ(Decorator)を使う」
TypeScriptでは、ECMAScript 2016 (ES7)で提案される実験的な機能であるデコレータ(Decorator)が使えます。デコレータは、クラスやメソッド、プロパティ(アクセサ)などに対して、実行時に処理が加えられます。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第14回「周囲が勢いよく回転するボタン」
今回のお題は、ボタンのアニメーションです。マウスポインタを重ねると、周囲が勢いよく回ります。animationプロパティで細かい動きをつくり込んでいます。

2016.11.3
FN1611001「TypeScript入門 11: 名前空間ー namespace」
TypeScriptではクラスやインタフェースなどの宣言を名前空間に定められます。exportするクラスやインタフェースなどの宣言を名前空間に定めると、名前空間で分類することができ、また他のライブラリと名前の重複が防げます。その考え方と使い方について、かいつまんでご説明します。

FN1611002「Animate CC 2017のHTML5 Canvasコンポーネントを使う」
Animate CC 2017では[HTML5 Canvas]ドキュメントにも、数は少ないもののActionScript 3.0と同じように[コンポーネント]が備わりました。その中のユーザーインターフェイスコンポーネントの使い方についてかいつまんでご紹介します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第13回「垂直電灯をつけたり消したりする」
今回のお題は、スイッチで電灯をつけたり消したりします。アニメーションやインタラクションはもちろん、目に見える表現はすべてCSSでつくりました。

2016.10.23
FN1610005「TypeScript入門 10: モジュールー exportとimport」
TypeScriptはコードをモジュールというかたちで、ファイルに分けて開発できます。その考え方とそのときに用いるexportとimportの使い方について、かいつまんでご説明します。

2016.10.22
FN1610004「TypeScript 2.0のreadonly修飾子」
TypeScript 2.0にreadonly修飾子が備わりました。この修飾子で読み取り専用のプロパティ、つまり定数が定められます。

2016.10.11
FN1607002「Animate CC: HTML5 Canvasコンテンツに他のコンテンツのムービークリップを読み込む」
HTML5 Canvasコンテンツには、ActionScript 3.0のように他のコンテンツを読み込む決まったやり方がなく、JavaScriptコードの中身を確かめたうえで処理しなければなりません。比較的単純なコンテンツを例にして、基本的な考え方についてご説明しました。2016年7月に公開したノートを、Animateの最新版にもとづいて全体に手直ししました。

2016.10.10
FN1610003「Visual Studio Code 1.5でTypeScript 2.0を使う」
Visual Studio Codeは、新しい安定したバージョンのTypeScriptとともに提供されます。2016年8月に正規公開されたVisual Studio Code 1.5.3がサポートするのは、TypeScript 1.8.10です。そこで、TypeScript 2.0を使うためのやり方をかいつまんでご紹介します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第12回「垂直に回転して切り替わる直方体のタブ」
今回のお題は、タブにより表示要素を切り替えます。ただし、例によってこけおどしの3次元の回転を採り入れました。コンテンツの画像と背景は、3面の直方体で組み立てています。タブをクリックすると、対応するコンテンツが垂直に回って正面に向きます。

2016.10.6
FN1610002「Animate CCのHTML5 CanvasドキュメントでJavaScriptコードをどこに書くか」
Animate CCのFLAファイルの中で、JavaScriptコードはメインタイムラインやムービークリップシンボルのキーフレームに書くことができます。もっとも、FLAファイルでコンテンツをすべてつくってしまうというのではなく、HTMLドキュメントや外部JavaScript(JS)ファイルと合わせてオーサリングすることが前提です。すると、FLAファイルのフレームとHTMLあるいはJSファイルのどこに、どういうスクリプトを書けばよいのかが問われます。

2016.10.3
FN1610001「Animate CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す」
Animate CCの[HTML5 Canvas]ドキュメントは、パブリッシュしたコンテンツがCreateJSを用いてHTML5のCanvasに描画されます。CreateJSなどのJavaScriptコードは、メインタイムラインやムービークリップシンボルのキーフレームに書くことができます。ただ、子インスタンスの変数や関数を参照するには、気をつけなければならないことがあります。

2016.9.23
FN1609010「TypeScript入門 09: アロー関数式」
TypeScriptは名前のない関数をアロー関数式で表せます。その書き方と優れた点をご説明します。

2016.9.17
FN1609009「TypeScript入門 08: 型の互換性」
TypeScriptは型づけできることを大きな特長としています。型が合うか合わないかをどのように決めているのかについて、かいつまんでご説明します。

2016.9.14
FN1609008「TypeScript入門 07: ブロックスコープに変数を宣言するー let」
let宣言は、変数をブロックスコープの{}の中に定めます。変数のvar宣言との違いを、ふたつの例でご説明しました。

2016.9.14
FN1609007「TypeScript入門 06: メソッド引数のデフォルト値と省略および定数を定める」
TypeScriptでは、メソッドの引数にデフォルト値を与えたり、引数を省略することもできます。また、値の変えられない定数の定め方についてもご説明します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第11回「鼓動のようにアニメーションするボタン」
今回のお題も、前回に引き続きanimationプロパティを使います。transitionプロパティよりも細かくつくり込めるので、動き方を工夫し、ほかのアニメーションとも組み合わせると、魅力的な表現に仕上げられます。つくるのはマウスポインタを重ねると、鼓動のようにアニメーションするボタンです。

2016.9.12
FN1609006「TypeScript入門 05: get/setアクセサを使う」
get/setアクセサを使うと、メソッドをプロパティのように参照して扱えます。読み取り専用プロパティとして定めたり、値の設定時に他のプロパティを処理するなど、単純なプロパティにはできない機能が加えられます。

2016.9.12
FN1609003「TypeScript入門 02: publicとprivateおよびstatic」
TypeScriptはクラスのプロパティやメソッドに、外部からの参照を許さないようアクセスに制限が加えられます。また、インスタンスなしに、クラスから参照する静的なメソッドも定められます。それらの構文について、簡単なクラスを例にとってご説明しましょう。

FN1609004「TypeScript入門 03: クラスを継承して使う」
クラスを継承するとサブクラスは、スーパークラスのプロパティやメソッドを自らのものとして使えます。サブクラスを定めれば、スーパークラスの機能を拡張したり、使い途に応じたサブクラスをつくるなど、柔軟な開発ができるようになります。

FN1609005「TypeScript入門 04: オブジェクト型リテラルとインタフェースを使う」
TypeScriptでは、変数や関数の引数、戻り値、プロパティあるいはメソッドに型づけできます。その型は予め備わっているデータだけでなく、独自に定めることもできます。型定義に用いられるオブジェクト型リテラルとインタフェースについてご説明します。

2016.9.10
FN1609002「TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く」
「Visual Studio Code」は、「TypeScript」を開発したマイクロソフトが提供する無償の高機能エディターです。本稿では、Visual Studio Codeをインストールして設定したうえで、TypeScriptの簡単なコードをビルドしてみます。

2016.9.1
FN1609001「TypeScript: とにかくJavaScriptファイルをビルドしてみる」
TypeScriptでコードを書いてJavaScriptファイルをビルド(書き出し)するまでには、整えなければならない環境や予備知識が求められます。そうした準備をできるかぎり少なくして、TypeScriptの簡単なコードを動かしてみます。

2016.8.20
FN1608007「React入門 06: ローカルサーバーの立ち上げとJSXのコンパイル」
npmのモジュールでローカルサーバーを簡単に立ち上げてみます。また、ブラウザの負荷が下がるように、JSXをユーザーのブラウザ上でなく、あらかじめ(静的に)コンパイルするやり方についてもご説明します。

2016.8.20
FN1608006「React入門 05: フォームからサーバーにデータを送ってページに加える」
フォームに入力したデータをサーバーに送ったうえで、ページに加えます。Reactが扱うデータとフォームの要素に入力したテキストを連携させることが課題となります。

2016.8.17
FN1608005「React入門 04: JSONデータをローカルサーバーから読み込んでページに表示する」
JSONファイルをローカルサーバーに置いて、そのデータを読み込み、ページに動的に表示します。ローカルサーバーはReactのチュートリアルのファイルを用いて立ち上げます。

2016.8.14
FN1608004「React入門 03: データはJSON形式にしてページをローカルサーバーで表示する」
Reactで差し込む要素のテキストを、JSON形式にまとめます。すると、データをサーバーとやり取りすることもできるようになります。本稿ではその準備としてローカルサーバーを動かし、HTMLドキュメントのページを表示するところまでやってみましょう。

2016.8.13
FN1608002「React入門 01: コンポーネントを組み立てる」
ReactはHTMLの要素を動的につくり上げて、ページに差し込むことができます。「JSX」というJavaScriptを拡張したシンタックスにより、JavaScriptコードの中にXMLと似た階層構造をもつタグが書き込めます。部品となるコンポーネントで要素を組み立ててみましょう。

FN1608003「React入門 02: remarkableでMarkdownの機能を加える」
Reactで差し込む要素のテキストを、Markdownで書いてみます。JavaScriptライブラリremarkableを使えば、MarkdownのテキストをHTMLの記述に変えることができます。また、Reactで生のHTMLを差し込む場合のやり方についてもご説明します。

2016.8.7
FN1608001「React: まずは動かしてみる」
Reactは今もっとも注目されているJavaScriptフレームワークです。HTMLの要素を動的につくり上げて、ページに表示することができます。ただ、なじみの少ない構文などの予備知識や準備が求められるため、初めての方には手をつけにくいきらいがあります。そこで、最小限のコードを示して、とりあえず大枠をご説明します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第10回「画像を3次元で水平に回すアニメーション」
5つの画像で五角柱を組み立てて、水平に回してみます。五角柱にマウスポインタを重ねれば、回転は止まります。ずっと回し続けるために、アニメーションにはanimationプロパティを使いました。

2016.7.20
FN1607002「Animate CC: HTML5 Canvasコンテンツに他のコンテンツのムービークリップを読み込む」
ActiolnScript 3.0では、再生しているSWFコンテンツに他のSWFコンテンツを読み込むことができます。HTML5 Canvasコンテンツには、決まったやり方がなく、JavaScriptコードの中身を確かめたうえで処理しなければなりません。比較的単純なコンテンツを例にして、基本的な考え方についてご説明します。

2016.7.2
FN1607001「JavaScript: オブジェクト複製のメソッドを継承するー Object.prototype.constructorプロパティ」
オブジェクトを複製するメソッドが求められることは少なくありません。基本的な機能ですので、スーパークラスに定めてサブクラスで継承したいこともあるでしょう。けれど、複製するオブジェクトをコンストラクタの呼び出しでつくろうとすれば、関数をどのようにして参照すればよいのかが問われます。

2016.7.1
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第9回「マウスポインタを重ねたテキストのアニメーション（2）」
引き続き、マウスポインタを重ねたときのテキストのアニメーションのご紹介です。前回はお題の3つのサンプルのうち2つ解説したので、残りのひとつを仕上げます。今回も、擬似要素の扱いとそれらのアニメーションが鍵です。

2016.6.29
FN1606001「JavaScript: クラスにゲッター/セッターでプロパティを定める」
ゲッターやセッターを使うと、値の取得あるいは設定をメソッドとして定めつつ、プロパティのように扱うことができます。JavaScriptには、ゲッターとセッターの加え方がいくつかあります。それらを簡単なクラスのサンプルでご説明します。

2016.6.27
2016年6月25日土曜日に催された第41回Creators MeetUpで務めた一席「統計と確率の見方・考え方」のレジュメを公開します。当日の録画(14分間強)も加えました。

2016.6.8
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第8回「マウスポインタを重ねたテキストのアニメーション（1）」
今回から2回にわたって、マウスポインタを重ねたときのテキストのアニメーションをお題とします。「Inspiration for Text Styles and Hover Effects」を参考につくった3つのサンプルから、まずふたつ採り上げて解説しました。HTMLとCSSの構成はわかりやすく改め、コードも絞り込んであります。残るひとつのサンプルは次回の解説になります。

2016.5.25
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第6回「画像をパネルに分けてアニメーションで切り替える」
画像を縦のパネルに分けて切り替えるアニメーションがお題です。数字のボタンを押すと、分かれたパネルが伸縮してクロスフェードします。「Sliding Image Panels with CSS3」の表現を参考にして、HTMLやCSSの構成を改めるとともに、とくにCSSのコードはできるかぎり絞り込みました。仕組みがわかりやすくなるよう心がけたものです。

第7回「追加情報をアニメーションで表示するボタン」
今回のお題は、アニメーションするボタンです。マウスポインタを重ねると追加情報が現れます。「Animated Buttons」の表現を参考にしました。例によって、HTMLとCSSの構成はわかりやすく改め、コードも絞り込んであります。

2016.5.20
FN1605002「AngularJS: コンポーネントを使う」
AngularJSでは、アプリケーションをコンポーネントに分けて構造化できます。コンポーネントはAngular 2にも採り入れられている仕組みで、コンポーネントを単位とすれば、柔軟な開発ができます。簡単なデータバインディングのサンプルを、コンポーネントが使われた構成に書き替えてみます。

FN1605003「AngularJS: コンポーネントを階層化する」
AngularJSでは、大きなアプリケーションもコンポーネントを階層化して、機能ごとにコンポーネントを分けることにより、開発が柔軟に進められます。「AngularJS: コンポーネントを使う」でつくった簡単なデータバインディングのサンプルに、階層化したコンポーネントで機能を加えてみます。

2016.5.11
FN1605001「jQuery: ドキュメントの準備が整ったら関数を呼び出すー .ready()メソッド」
DOMにアクセスする準備が整ったとき実行したい処理を、ハンドラ関数として定めるメソッドです。jQueryの公式リファレンスの情報に説明を補いました。

2016.5.2
2016年4月30日土曜日に催された第39回Creators MeetUpで務めた一席「無限のパラドックス」のレジュメを公開します。当日の録画(13分間)も加えました。

2016.4.7
FN1604002「SoundJS 0.6.2: 読み込んだサウンドファイルを再生する」
SoundJSで外部サウンドファイルを読み込んで再生し、一時停止や再開するといった基本的な操作に用いられるプロパティとメソッドについて解説しました。また、それらを使ったサンプルのコードも掲げてあります。「読込んだサウンドファイルをSoundJSで再生する」を現行バージョンに合わせて全面改訂したものです。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第5回「画像にポインタを重ねるとキャプションが現れる」
今回のお題は、画像にキャプションを示すアニメーションです。マウスポインタを画像に重ねると説明書きが現れます。画像にもちょっとしたアニメーションが加えました。用いる設定は、さほど目新しいものではありません。組み合わせや細かな調整を加えてつくり上げた表現です。

2016.4.6
FN1604001「AngularJS: 送信ボタンでフォームの入力データを扱う」
AngularJSでは、使い回しできる機能(プロパティやメソッド)が備わったモジュールをサービスと呼んでいます。AngularJSにあらかじめ備わったサービスだけでなく、独自のサービスを定めて利用することもできます。本稿は、為替レートにもとづく簡単な計算書を作例として、サービスの使い方やつくり方を解説します。

2016.3.1
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第4回「3次元で垂直に回る立方体のメニュー」
前回と同じく項目を並べたメニューを、今度は3次元のアニメーションにしました。マウスポインタをメニュー項目に重ねると、立方体のように垂直に回ります。CSS3を使えば、このような3次元の表現も可能です。

2016.2.25
FN1602005「AngularJS: 送信ボタンでフォームの入力データを扱う」
AngularJSを使って、フォームの送信ボタンが押されたとき、入力データをどう扱えばよいのかご説明します。送信の処理は、JavaScriptコードでAngularJSのコントローラを定めて行います。

2016.2.18
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第3回「選択項目以外がぼけるメニュー」
今回のお題は項目を並べたメニューです。マウスポインタをメニュー項目に重ねると、他の項目のテキストがぼけます。また、ポインタを重ねたメニュー項目は浮き上がらせたり、マウスボタンを押すと凹むようにアニメーションさせました。

2016.2.10
FN1602004「AngularJS: フォームの入力が正しくないとき送信ボタンを押せないようにする」
AngularJSを使って、フォームの入力が正しく行われたときだけ送信ボタンを押せるようにします。なお、このサンプルでは、JavaScriptコードは書きません。

2016.2.10
FN1602002「AngularJS: フォームに入力されたデータに応じてスタイルを変える」
AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果に応じて要素のスタイルを変えてみましょう。なお、このサンプルでは、JavaScriptコードは書きません。

FN1602003「AngularJS: フォームの入力に応じてクラスを動的に変える」
AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果に応じて要素に与えるクラスを変えてみましょう。なお、このサンプルでは、JavaScriptコードは書きません。

2016.2.8
FN1602001「AngularJS: フォームに入力されたデータを確かめる」
AngularJSは、フォームに入力されたデータを、形式に応じたいくつかの条件で調べることができます。その結果によって、メッセージを表示してみます。なお、このサンプルでは、JavaScriptコードは書きません。

2016.2.5
FN1601002「AngularJS入門 01: AngularJSを始める」
AngularJSのインストールおよび設定を行い、とりあえずごく簡単なアプリケーションとして動かしてみます。

FN1601003「AngularJS入門 02: 要素の属性を動的に変える」
AngularJSには、HTMLドキュメントのデータを他の要素で参照する「データバインディング」の機能があります。この機能により、要素のclass属性をインタラクティブに定めて、スタイルを切り替えてみます。

FN1601004「AngularJS入門 03: コントローラで値を与える」
AngularJSは、JavaScriptコードで定めたコントローラにより、データの扱いを定めることができます。はじめの一歩として、コントローラで初期値をHTMLドキュメントに与えてみます。

FN1601005「AngularJS入門 04: 動的にリストをつくる」
AngularJSは、コントローラで定めた配列の値を取り出して、HTMLドキュメントに動的にリストとして加えることができます。かたちが決まったいくつものデータを、差し込んで表示したいときに便利です。

FN1601006「AngularJS入門 05: コントローラで項目を動的に追加する」
AngularJSのコントローラにメソッドを定めると、データが動的に処理できます。入力フィールドに書いたテキストを、項目としてHTMLドキュメントに加えてみます。

FN1601007「AngularJS入門 06: 項目を数えて表示する」
AngularJSのコントローラで管理している配列の項目を数え上げて、HTMLに動的に表示してみます。配列エレメントをひとつひとつ取り出して処理する関数も、併せてご紹介します。

FN1601008「AngularJS入門 07: 項目を調べて削除する」
AngularJSのコントローラで管理している項目のデータを調べて、条件にしたがって削除してみます。要素のマウスクリックでコードを実行するディレクティブも、併せてご紹介します。

gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第2回「アコーディオンメニューのアニメーション」
マウスポインタをメニュー項目に重ねると、サブメニューが広がります。また、サブメニュー項目は、マウスポインタの動きに応じてハイライトさせます。JavaScriptは使わず、CSS3だけでもアコーディオンメニューの基本的な動きはつくれます。

2016.1.25
2016年1月22日に催された第7回CreateJS勉強会で務めた一席「EaselJS 0.8.2の改訂項目とgskinner labの作例『Arc Rainbow』」のレジュメを公開します。

FN1601001「条件分岐を考える」
Grant Skinner氏のサイトgskinner labに掲げられた作例「Arc Rainbow」は、[Mode]のリンククリックで円弧の配色の決め方が、[monochrome](単色)、[hue shift](色相の変化)、[rainbow](虹の7色)、[random](ランダム)の順に切り替わります。そのための条件分岐の組み立て方について考えてみます。

2016.1.16
2016年1月16日に催された第36回Creators MeetUpで務めた一席「図で数学を考える」のレジュメを公開します。当日の録画(5分間)も加えました。

2015.1.13
gihyo.jp連載「CSS3アニメーションでつくるインターフェイス表現」

第1回「プッシュボタンのアニメーション」
新連載では、CSS3によるアニメーション表現を紹介していきます。その中でも、幅広い読者に応用してもらえるインターフェイスがおもなお題です。CSS3が充実し、ブラウザの実装も進んできたので、JavaScriptコードを書かずとも豊かな表現ができます。第1回は、基本を抑える意味で、プッシュボタンのアニメーションをつくります。

2015.12.14
CreateJSのビルドが2015年11月26日付で改められました。ライブラリごとのVERSIONS.txtの内容に情報やリンクを補いつつ解説しました。

FN1512003「PreloadJS 0.6.2: 改訂された項目」
FN1512004「SoundJS 0.6.2: 改訂された項目」
FN1512005「TweenJS 0.6.2: 改訂された項目」

また、FN1511003「EaselJS 0.8.2候補: 改訂される項目」は題名を「EaselJS 0.8.2: 改訂された項目」に改め、中身も追加・補正しました。

2015.12.10
FN1512001「設定のオン・オフを切り替える－トグルボタンの論理組み立て」
ひとつのボタンで設定のオン・オフを切り替えたいことがあります。EaselJSの表示オブジェクトにドロップシャドウを掛けたり外したりする例で、その論理の組み立て方についてご説明しましょう。考え方は、CreateJSにかぎったものではありません。

FN1512002「CreateJS 15/05/21: Graphicsコマンドでトゥイーンアニメーションを描く」
Grant Skinner氏による作例にもとづき、円弧の描画をアニメーションさせる手法と仕組みについてご説明します。円弧のトゥイーンアニメーションには、Graphcisコマンドが用いられています。

2015.11.26
FN1511002「オブジェクトが配列かどうかを確かめる」
JavaScriptでオブジェクトが配列かどうかを確かめたい場合があります。そのとき、いくつかのやり方が考えられますのでご紹介します。

FN1511003「EaselJS 0.8.2候補: 改訂される項目」
CreateJS次期バージョン(NEXT)に向けた開発が進められています。EaselJSはバージョン0.8.2が予定されているようです。更新が加えられつつあるVERSIONS.txtの内容に情報やリンクを補いつつ解説します。

2015.11.25
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第20回「2つの光源のアニメーションとカメラのパン・チルト」
今回が連載の最終回になります。前回、4つに増やしたロゴでつくったパーティクルのアニメーションを仕上げます。点光源を増やして3次元空間で回すとともに、カメラにパンとチルトのインタラクションを加えます。

FN1511001「Away3D: 2015年10月9日付ビルドに以前のコードを対応させる」
2015年10月9日付でAway3D TypeScript (AwayJS)のビルドが改められました。例によって、これまでのコードはそのままでは動かなくなります。そこで、gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」でつくった作例4点を、2015年10月9日付ビルドに合わせて書き直してみました。それらの修正点をかいつまんでご説明します。

2015.11.24
2015年11月21日に催された第34回Creators MeetUpで務めた一席「方程式のはなし」のレジュメを公開します。当日の録画(25分間)も加えました。

2015.11.5
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第18回「2つのビットマップをパーティクルにしてアニメーションさせる」
前回は、ロゴひとつをパーティクルにしてアニメーションさせました。今回は、ロゴの画像をもうひとつ加えて、ふたつのビットマップでパーティクルのアニメーションをつくります。

第19回「4つのビットマップをパーティクルにしてアニメーションさせる」
画像をさらに2つ加えて、4つのロゴのパーティクルをアニメーションさせます。そして、アニメーションの動きもより細かく手直しします。また、2015年10月9日付のライブラリ改訂にもふれました。

2015.10.21
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第17回「ロゴがパーティクルで弾けるアニメーション」
今回から取り組むお題も、Away3D TypeScriptサイトの「Examples」からパーティクルの作例「Exploding browser logos using particles」を参考にします。まずは、パーティクルのアニメーションをひとつつくるまでのスクリプトです。

FN1510002「バナー広告をつくるときに役立つクラスー AdHelper」
2015年10月5日付のCreateJS Blogの記事「HTML5 Banner Ads With CreateJS」に、新たなクラスとしてAdHelperが紹介されました。バナー広告をつくるときに役立つクラスです。「HTML5 Banner Ads With CreateJS」Appendix「AdHelper」にもとづいてAdHelperクラスの機能をご紹介します。

2015.10.16
FN1510001「HTML5 Canvas書き出しの最適化に役立つツール」
Adobe Flash Professional Team Blog「Behind the scenes of HTML5 Canvas rendering performance」に、Flash Professional CCのHTML5 Canvasドキュメントからの書き出しを最適化するために役立つ無償のJSFLツールが2本紹介されました。この記事とダウンロードページの情報をかいつまんでご説明します。

2015.9.29
FN1509002「Webページの背景に粒子のアニメーションを加えるー Particleground」
jQueryのプラグインParticlegroundを使うと、Webページの背景に粒子のアニメーションが加えられます。マウスポインタの位置に応じた視差効果(パララックス)も備わっています。このプラグインの使い方をかいつまんでご紹介しましょう。

2015.9.28
FN1509001「2進数・16進数とビット演算」
2進数や16進数の表し方と、2進数を基礎としたビット演算について、JavaScriptコードにもとづいて簡単にご紹介します。

2015.9.13
2015年9月12日に催された第32回Creators MeetUpで務めた一席「マイナスと借金と、時々、複素平面」のレジュメを公開します。当日の録画(15分間)も加えました。

2015.9.5
2015年9月4日土曜日開催のCreateJS勉強会(第6回)「最新のCreateJSを取り巻く環境にキャッチアップする」で務めた一席「CreateJSのアップデートとFlash Professional CC 2015のHTML5 Canvasパブリッシュ」のレジュメに加筆・補正を加えたので公開します。

2015.8.14
FN1508001「鉛筆と消しゴムによる描画」
Grant Skinner氏がjsfiddle.netに、CreateJSによる鉛筆ツールと消しゴムツールのような描画の仕方の作例を公開されました。そのコードをもとにして、仕組みを解説するとともに、若干の改善を加えてみます。

2015.8.10
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第16回「炎の照り返しのアニメーションと床の反射を調整する」
前回までつくってきた「Animating particles simulating fire」をお題としたパーティクルによる炎の表現を仕上げます。炎のアニメーションや床への照り返しなどに細かな手を加えましょう。

2015.7.26
FN1507001「HTML5 Canvasから書出したMovieClipインスタンスの座標が基準点にならない」
Flash Professional CCのHTML5 Canvasドキュメントから書出したMovieClipインスタンスにxy座標を与えたとき、意図した位置に定められないことがあります。

2015.7.19
2015年7月18日に催された第30回Creators MeetUpで務めた一席「ネイピア数〜美しきムダな数〜」のレジュメを公開します。当日の録画(15分間)も加えました。

2015.7.14
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第15回「素材に凹凸と反射の強弱を与える──法線マップとスペキュラマップ」
前回は、炎が映り込む光を床に加え、さらにその光にも揺らぐようなアニメーションを与えました。今回は、床の素材に凹凸や反射の強弱といった細かな表現を加えます。「法線マップ」と「スペキュラマップ」という画像により光の反射を扱う技術です。

2015.6.27
FN1506004「Flash Pro CC 2015: HTML5 Canvasパブリッシュの改善」
Flash Professional CC 2015の中からHTML5 Canvasのパブリッシュに関わる新機能をご紹介します。なお、2015年2月にFlash Professional CC 2014がマイナーアップデートされましたので、その内容も含めました。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第14回「床に映る炎の光をアニメーションさせる」
前回は、アニメーションするパーティクルの動きやかたち、色を炎に近づけました。今回は、さらに炎が映り込む光を床に加えます。その光にも、揺らぐようなアニメーションを与えました。

2015.6.16
FN1506003「EaselJS 0.8.1: 破線を描くー Graphics.setStrokeDash()メソッド」
EaselJS 0.8.1に備わったGraphics.setStrokeDash()メソッドは、描画する線に破線のスタイルが定められます。第1引数の配列には数値エレメントをふたつ加え、初めが線の長さ、後が余白の間隔を定めます。第2引数の数値で、描き始める位置が変えられます。他のメソッドの使い方は、実線と同じです。

2015.6.5
F-site:CSS3「Creators Meetup数学ネタまとめ」
毎月第3土曜日に開かれるCreators Meetupの中で、隔月で数学ネタの一席を務めるようになり、数も重ねてきました。そこで、ビデオ録画とレジュメやサンプルのリンクを、分野ごとにまとめてみました。

2015.6.3
F-site:CSS3「CreateJSの2014年12月12日および2015年5月21日の改訂のまとめ」
CreateJSライブラリは、2014年12月12日に大きく改訂されました。EaselJSに多くの修正が加わり、SoundJSとPreloadJSも大幅に書替えられました。さらに、2015年5月21日に0.0.1の更新が行われました。核となる変更は、正規リリースに近づいています。これらの改訂にもとづく記事をまとめました。

2015.6.2
FN1506002「EaselJS 0.8.1: 改訂された項目」
2015年5月21日付で、EaselJS 0.8.1が公開されました。改訂された項目について、VERSIONS.txtにもとづきご紹介します。

2015.6.1
FN1506001「EaselJS 0.8.1: MovieClipオブジェクトの再生の長さ・フレーム数を調べる」
EaselJS 0.8.1のMovieClipクラスには、再生の尺つまり再生にかかる長さを示すプロパティが新たに加わりました。MovieClip.durationとMovieClip.totalFramesがそのプロパティで、いずれも再生し終えるまでのミリ秒数またはDisplayObject.tickイベント数を示します。

2015.5.30
FN1505004「EaselJS 0.8.0: Rectangleクラス」
EaselJS 0.7.1のRectangleクラスには、geomパッケージのクラスの最低限の実装というべきメソッド4つしかありませんでした。EaselJS 0.8.0で、矩形領域の範囲を変えたり、他の矩形領域や座標との関係を調べるメソッドが7つ加わりました。これらについて、簡単にご説明します。

FN1505005「CreateJS 15/05/21: 0.0.1のライブラリアップデート」
CreateJS Blogの2015年5月28日付記事「New versions of CreateJS released!」で、CreateJSのライブラリのバージョンをそれぞれ0.0.1ずつアップデートしたことが公開されました。EaselJSが0.8.1に、他のTweenJSとSoundJS 、およびPreloadJSの3ライブラリはいずれも0.6.1に改められています。blog記事にもとづいて、おもな改善点をご紹介します。

2015.5.27
FN1505002「EaselJS 0.8.0: 改訂された項目」
2014年12月12日付で公開されたEaselJS 0.8.0の改訂された項目について、VERSIONS.txtにもとづきご紹介します。細かい点も含めると数が多いので、この機会にまとめました。

FN1505003「EaselJS 0.8.0: DisplayPropsクラス」
DisplayPropsは、DisplayObjectインスタンスの表示に関わるプロパティ値の計算をまとめて扱う新しいクラスです。これまでは、Matrix2Dクラスの拡張された機能として、表示のためのプロパティを演算するメソッドやプロパティが備えられていました。しかし、EaselJS 0.8.0から、Matrix2Dクラスはもっぱら座標変換を担い、表示のプロパティはDisplayPropsクラスが扱うことになりました。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第13回「パーティクルを炎のように表現する」
前回は、のろしが立ち上るような表現までできました。今回は、パーティクルの動きや見た目を炎らしく整えます。ランダムな動きやアニメーションノードを加え、テクスチャも与えましょう。

2015.5.20
FN1505001「EaselJS 0.8.0: フレームレートを扱う」
新たに加わったMovieClip.framerateプロパティを定めると、インスタンスごとにフレームレートが変えられます。また、Ticker.framerateとTicker.intervalプロパティも備わりました。それらをリファレンスとして解説します。

2015.5.19
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第12回「パーティクルのアニメーションを加える」
前回は、最新のライブラリを使って床の平面に石畳のテクスチャを貼りました。カメラはマウスドラッグで周囲を回ります。今回から、お題にした「Animating particles simulating fire」の本論となるパーティクルをつくり始めます。

2015.5.18
2015年5月16日土曜日に催された第28回Creators MeetUpで務めた一席「ベレの方法ってなんですの？」のレジュメとサンプルに、当日のYouTube録画を加えて公開します。

2015.4.27
FN1504002「TweenJS overhaul: Tweenクラスで相対値を使う」
TweenJS 0.6.0のTweenクラスのメソッドでは、相対値でトゥイーンすることはできません。けれど、相対値を使うためのプラグインが、テスト用にCreateJSのGitHubにアップロードされました。

2015.4.20
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第11回「Away3D TypeScriptが2015年3月13日付でビルドを改めた」
Away3Dのライブラリが2015年3月13日付で改められました。そのJavaScriptファイルに差し替えると、この連載でこれまで書いたコードがおおかた動かなくなります。そこで今回は、その解説をします。

2015.4.19
FN1504001「EaselJS 0.8.0: Flash Pro CCでパブリッシュしたMovieClipオブジェクトの総フレーム数を参照する」
Flash Professional CCは、MovieClipインスタンスをCreateJS向けにパブリッシュできます。ただし、EaselJSのMovieClipクラスには、合計フレーム数を参照するプロパティがありません。けれど、その数値を得ることはできます。

2015.3.31
FN1503001「CSS3: 画像にロールオーバーしたときテキストを表示する」
CSS3のプロパティtransformやtransitionを用いると、要素をアニメーションさせたり変形することができます。ご紹介する3つのサンプルは、マウスポインタを画像に重ねたとき説明のテキストが表れます。JavaScriptコードは書いていません。

2015.3.24
F-site:CSS3「TweenJSの改訂」
今、TweenJSの改訂が進んでいるようです。開発者のGrant Skinner氏から「TweenJS rewrite」と題する投稿がなされました。新しいTweenJSに加えてほしい機能があったら、ぜひ伝えてほしいそうです。たとえ今回のリリースに備えることができなくても、その要望を念頭に開発を進めたいとのことです。投稿の中身をかいつまんでお知らせします。

2015.3.23
2015年3月21日土曜日の第26回Creators Meetupで務めた高座「ベクトルふたたび－外積と内積を使う」のレジュメとサンプルコードを公開します。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第9回「マウスイベントを扱う」
前回は、真ん中のオブジェクトの周りにランダムな位置と大きさで複数のオブジェクトを置いて、カメラで回り込みました。今回は、これらのオブジェクトへのマウスインタラクションを加えます。オブジェクトのマウスイベントをどう扱うかが課題です。

第10回「マウスポインタに応じてカメラを水平および垂直に動かす」
前回は、3次元空間に置いた立方体のオブジェクトにマウスのロールオーバー／ロールアウト、クリックへのインタラクションまで加えました。今回は、これらのオブジェクトを回り込んで捉えるカメラの位置も、マウスポインタの動きに応じて変わるように仕上げます。

2015.2.16
F-site:CSS3「CSS3を使ったアニメーションとインタラクション」
CSS3を使うと、静的な表現だけでなく、アニメーションやインタラクションが加えられます。これまでつくった作例を8つをまとめてご紹介しました。最後の例を除いて、JavaScriptコードは書きません。いずれも中身は、リンクしたノートで詳しく解説しています。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第7回「回り込むカメラの真ん中にオブジェクトを捉える」
今回からのお題は、3次元でインターフェイス風の動きをつくります。サンプルは、マウスポインタの位置に応じて空間に浮かぶ箱が回り、それぞれの箱はロールオーバーとロールアウト、およびクリックに反応します。今回は箱の配置と回転までで、これから都合4回で仕上げるつもりです。

第8回「オブジェクトの位置と大きさをランダムにする」
前回の「回り込むカメラの真ん中にオブジェクトを捉える」では、真ん中のオブジェクトが中心となる円周上に、等しい間隔で複数のオブジェクトを並べ、カメラはその外の円軌道から回り込ませました。今回は、オブジェクトの位置や大きさをランダムにしてみます。

2015.2.11
2015年2月11日CreateJS勉強会 (第5回)「新CreateJSをコンテンツ制作に活かす」で務めた一席「新しいCreateJSで書くコードはどう変わるのか」のレジュメとコードを公開しました。

「EaselJS NEXT: Graphicsクラス」と「EaselJS NEXT: Graphics.commandプロパティ」にリンクや補訂を加えて、それぞれFN1411005「EaselJS 0.8.0: Graphicsクラス」およびFN1411004「EaselJS 0.8.0: Graphics.commandプロパティ」に改めました。

2015.2.6
FN1502001「EaselJS 0.8.0: 使い回すオブジェクトにプロパティを定める」
オブジェクトは、できれば使い回した方がお得です。EaselJS 0.8.0には、そのために使えるプロパティを定め直せるメソッドが加わったり、これまでのメソッドが変わったりしました。そのいくつかを、かいつまんでご説明します。

2015.2.4
FN1501008「Canvas 2D: Path2Dインターフェイス」
Canvas 2D APIのPath2Dインターフェイスはパスを定め、CanvasRenderingContext2Dオブジェクトで用いることができます。Path2Dオブジェクトにつくったパスは、必要なときいつでもCanvasで使えます。

FN1501009「CSS3: 画像とテキストを3次元でアニメーションさせる」
CSS3のプロパティtransformとtransitionを組み合わせると、3次元のアニメーションができます。要素を水平に回したり、手前に押し出したりするサンプルをつくりました。JavaScriptコードは書きません。

2015.1.28
FN1501006「PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す」
PreloadJS 0.6.0から、コンテンツの形式に応じたローダをクラスとして備えました。イメージファイルはImageLoaderクラスで読込みます。読込むのが初めからイメージとわかっているときは、LoadQueueよりImageLoaderクラスを使った方がお得です。そこで、古いバージョンで書いたコードを、ImageLoaderクラスで書替えてみます。

FN1501007「CSS3: transitionを使ったアコーディオンメニュー」
CSS3のtransitionプロパティを使うと、プロパティの値をアニメーションで切替えることができます。この機能を使って、アコーディオンメニューをつくりました。JavaScriptコードは書きません。

2015.1.24
FN1501005「CSS3: 画像をクロスフェードで切替えるインターフェイス」
CSS3のtransitionプロパティを使うと、ふたつの画像をクロスフェードで切替えることができます。さらに、切替えボタンなどのインターフェイスもCSSでつくりました。

2015.1.19
gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第4回「床の追加とカメラのパン・チルト」
前回手直ししたコードに、ふたつ手を加えて仕上げます。第1に、テクスチャが貼られた床を3次元空間に加えます。そして第2に、マウスドラッグでカメラの視界が変えられるようにします。

第5回「スカイボックスで3次元空間に背景をつくる」
今回から取組むお題は、Away 3D TypeScriptサイトから「Examples」の作例「Skybox and environment mapping」を頂戴しました。スクリプトの組立ては、わかりやすさを考えて書き改めます。

第6回「スカイボックスの中に置いたドーナッツ型をカメラで追う」
前回のコードに手を加えて、真ん中にドーナッツ型を加えて背景を映し込むとともに、カメラの向きをインタラクティブに回り込ませます。そして、お題のAway 3D TypeScriptサイトの作例「Skybox and environment mapping」に、さらにもうひと手間加えます。

2015.1.17
2015年1月17日土曜日の第24回Creators Meetupで務めた高座「パスにこだわる」のレジュメとサンプルコードを公開します。

FN1501002「CSS3: transitionを使ってメニューのナビゲーションをつくる」
CSS transitionプロパティを使ってプルダウンメニューのナビゲーションをつくります。サブメニューは不透明度を上げながら広がり、メニューテキストの色も短い時間で変わっています。JavaScriptコードはまったく書かず、transitionプロパティの基本的な使い方でつくれます。

FN1501003「EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算」
EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます。バージョン0.8.0から、多くのメソッドで掛ける順序が変わりました。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介します。

FN1501004「EaselJS 0.8.0: extend()メソッドを使った継承に書替えるときに注意すること」
EaselJS 0.8.0からextend()メソッドが備わり、CreateJSのクラスの継承の仕組みも改められました。そこで、これまでの継承の仕方で定められたクラスを、この新しい仕組みにどう書替えたらよいか、かいつまんでご説明します。

2015.1.7
FN1501001「EaselJS 0.8.0: カラフルに光る円のアニメーション」
さまざまな色と大きさの円を、それぞれの向きに動かすサンプルです。速さは大きさと比例させました。フィルタで縁をぼかし、重なった色を加算することにより、光のような表現にしています。また、簡単な最適化の手法も加えました。

2014.12.31
FN1412009「EaselJS 0.8.0: Pointクラスの実装を見る」
EaselJSは、CreateJS Suiteのおおもととなるライブラリです。その中でも備わるプロパティやメソッドが少なくて簡素なPointクラスの実装を見ることは、CreareJSのライブラリを研究するはじめの一歩に適しているでしょう。

FN1412010「CSS3: transitionを使った回転と伸縮のアニメーション」
CSS transitionは、CSSプロパティをアニメーションさせて変えることができます。つくるサンプルには、img要素が含まれたa要素をそれぞれ少しずつ傾けて並べました。そして、マウスポインタを重ねると、要素は少し大きくなりながら、傾きがまっすぐに戻ります。

2014.12.20
FN1411002「CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド」
次期バージョン候補(NEXT)にもとづいて書いたリファレンスを、正規バージョンリリースにともない、加筆・補正しました。

2014.12.18
FN1412002「Starling 1.6が公開」
Gamuaのblogの2014年12月12日付記事「Starling 1.6」で、Starlingの新たなバージョン1.6の公開が知らされました。これまでと同じ改善や最適化だけでなく、Adobeの最新のStage3D技術を生かした新たな機能も加えられました。この記事にもとづいて、新たな中身についてご説明します。

FN1412003「EaselJS 0.8.0: EaselJSの最適化が進められた」
EaselJS 0.8では、パフォーマンスを最適化するため、テスト用のフレームワークを採入れました。その結果をもとに、大きく3つの変更が加えられました。

FN1412004「PreloadJS 0.6.0: 新たな個別ローダーの仕組み」
PreloadJSはこれまでブラウザごとの違いやくせをうまく扱うため、コードがあちこち複雑になってしまいました。新たなリリースでは、この複雑さをなくすため、内部的な仕組みを改めています。

FN1412005「PreloadJS 0.6.0: ImageLoaderクラス」
ImageLoaderクラスは、イメージファイルを読込みます。コンストラクタで、読込むファイルとXML HTTP Requestsの要否を定めます。そして、読込み始めるには、ImageLoader.load()メソッドを呼出さなければなりません。

FN1412006「PreloadJS 0.6.0: 読込みにwithCredentialsとheadersを定める」
インターネットの性質から、リクエストに手を加えたり、セキュリティフラグを立てなければならないこともあります。そこで、低レベルのリクエストをカスタマイズできるように、ロード項目に新たにwithCredentialsとheadersというふたつのプロパティが加わりました。

FN1412007「CreateJS 14/12/12 : getter/setterプロパティを実装する」
新たなCreateJSでは、内部的にgetter/setterプロパティを大幅に採入れました。すでにあるプロパティに多くの役立つ機能を加え、あるいはいくつかのメソッドはgetterプロパティにしました。

FN1412008「EaselJS 0.8.0 : 新たなイベントー DisplayObject.addedとDisplayObject.removedおよびSprite.change」
DisplayObjectインスタンスの親が変わったとき、またスプライトシートのフレームが切り替わるときに新たなイベントが送られます。

F-site:CreateJS「CreateJSの新バージョンと公式サイトの新装」
2014年12月17日付CreateJSのblog記事「CreateJS Update: New website and releases」で、新バージョンのリリースと公式サイトの模様替えが知らされました。blog記事をもとに、中身をかいつまんでご紹介します。また、すでに日本語で解説した記事のリンクも添えます。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第3回「ライブラリとクラスの読込みが変わった」
予告と内容を変えて、緊急特番です。前回第2回の記事が公開された翌日2014年11月5日付で、Away3Dのビルドが改められました。ライブラリの名前も数も、さらにクラスの読込み方も変わります。そこで、第2回のコードを、新しいビルドで動くように書き直します。

2014.12.12
2014年12月12日金曜日「年末特別号: 月刊ライトニングトーク2014年12月号」で務めた一席「11月にビルドが改められたAway3D TypeScript」のレジュメとサンプルコードを公開します。

2014.12.9
FN1412001「Away3D 14/11/05: スカイボックスをつくる」
スカイボックスは、3次元空間を取り巻く背景画像のテクスチャでつくられます。6面のテクスチャで、3次元空間の物体とカメラを、箱のように囲みます。すると、カメラで周囲を見たときに、それらのテクスチャが遠景のように映るのです。

2014.12.2

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第36回「たくさんのオブジェクトを連結リストで扱う」
今回は本連載の最終回として、たくさんのオブジェクトの扱いについてひとつ知識を深めます。多くのオブジェクトは配列に入れるのがお約束です。ただ、そうした処理を自らクラスでつくろうとするとき、「連結リスト」という仕組みがあるので、ご紹介します。

2014.12.1
FN1411005「EaselJS NEXT: Graphicsクラス」
EaselJS次期バージョンでは、Graphicsオブジェクトに描画するとき、内部的にGraphicsコマンドが用いられることになりました。さらに、Graphicsコマンドオブジェクトも直接扱えるように公開されます。

FN1411004「EaselJS NEXT: Graphics.commandプロパティ」
Graphics.commandプロパティは、Graphicsオブジェクトに対してつくったり、加えたりした直近のGraphicsコマンドの参照をもちます。これを用いると、Graphicsコマンドのプロパティで後から描画が動的に変えられます。

2014.11.21
FN1411003「Away3D: 2014年11月5日付でライブラリとクラスの読込み方が変わった」
Away3D TypeScriptのライブラリが2014年11月5日付で更新され、ライブラリ名やその数、さらにクラスの読込み方が変わりました。これまで、あるいは他のJavaScriptライブラリとは毛色が変わり、戸惑われる人も少なくないと思います。どこが変わったのかをかいつまんでご説明します。

FN1411002「CreateJS NEXT: 新たな継承の仕組みを定めるextend()とpromote()メソッド」
クラスの継承とオーバーライドしたスーパークラスのメソッドの呼出しのため、新たなグローバルメソッドが加わりました。CreateJSのクラスの内部的な組立てを新たにします。

FN1411001「CreateJSの新しいクラスモデル」
CreateJS blogの2014年11月4日「New CreateJS Class Model」で、CreateJSの次期バージョンから用いられるクラスのモデルが改められると発表されました。この記事にもとづいて、かいつまんだ中身をご説明します。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第2回「物体にテクスチャを貼って回す」
前回は、基本的なかたちとして球体をつくって3次元空間に置きました。今回は素材にテクスチャを貼って、アニメーションで回してみましょう。

2014.11.15【レジュメ&サンプルコード公開】
2014年11月15日土曜日の第22回Creators Meetupで務めた高座「sinとcosは何する関数？」のレジュメとサンプルコードを公開します。

[2014.11.17追記] YouTube録画が公開されたので、レジュメに加えました。

2014.10.31
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第35回「たくさんのパーティクルに弾けるようなアニメーションをさせる」
前回はステージにパーティクルをひとつ置き、マウスポインタの座標に向けて弾けるように動かしました。今回はこの数を増やして、パーティクルらしいアニメーションにします。パーティクルのような多くのオブジェクトを、配列でどう扱うかにも触れました。

2014.10.23
FN1410001「EaselJSのTextオブジェクトにテキストを改行して入れる」
Textオブジェクトに示すテキストは、Text.textプロパティで与えられます。その文字列に改行のエスケープ文字が入っていなければ、デフォルトでは1行で表されます。Textオブジェクトの幅を定めたい場合、英文と邦文ではやり方が異なります。

FN1410002「次期Starling 1.6とSprite3D」
Gamuaのblogの2014年10月21日付記事「Sprite3D and What's Next」で、次期Starlingフレームワークについて、とくに新しいSprite3Dの説明がなされました。その中身をかいつまんでご紹介します。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第34回「パーティクルの弾けるような動きをつくる」
新たなお題を3回にわたって説明して、連載を閉じることになりました。そこで、最近の解説のおさらいも兼ね、パーティクルを選びました。先頃大ヒットしたディズニーアニメの雪を想い起こさせる表現です。

gihyo.jp連載「Away3D TypeScriptではじめる3次元表現」

第1回「Away3D TypeScriptで基本的な3次元の形状をつくる」
Away3D TypeScriptを解説する新たな連載が始まりました。初めてのお題は、床に置いたボールです。ドラッグすると、カメラ位置を回すことができます。都合3回で仕上げる予定です。

2014.9.26
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第33回「弾力のある多角形をドラッグして落とす」
前回の解説では、弾力のある四角形をつくり、さらにパラメータを変えて八角形なども試してみました。今回は、弾力のある多角形を、ドラッグして放れるようにします。

2014年9月20日土曜日に催された第20回「Creators MeetUp」で務めた一席「行列？なにそれ？おいしいの？」のレジュメにUSTREAM録画を添えました。

2014.9.13
F-site:CreateJS「CreateJS開発の今とこれから」
CreateJSのライブラリの更新は、2014年7月25日から途絶えています。CreateJS開発の今とこれからについて、[CreateJS Support]の質問に開発者のGrant Skinner氏が答えました。

2014.9.11
FN1409001「Away3D 14/08/18: Away3D TypeScriptが8月26日付でアップデート」
Away3D TypeScriptのビルドが、2014年8月26日付で更新されました。8月は18日にもビルドが改められています。6月13日付アップデートから変わった基本的なことがらをかいつまんでご説明します。

2014.8.29
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第32回「弾力のある多角形を放物線状に落とす」
前回は、ふたつの点を棒でつないで、放物線状に落としました。弾力のある動きが、座標の移動と位置関係や動く範囲を定めるだけの四則演算で表せたのです。今回は、点と棒の数を増やして多角形の動きをつくります。

2014.8.25
FN1408001「Away3D 14/08/18: LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルが読込めない」
LoaderEvent.RESOURCE_COMPLETEイベントは、AssetLibrary.load()で各素材ファイルを読込み終えると配信されます。ところが、イベントのリスナー関数が受取ったイベントオブジェクトから、素材を取出せないことがあります。

2014.8.20
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第31回「位置座標の相互作用で弾力を表す」
今回のお題は、多角形の頂点を結んだかたちが、放物線状に落ちてきて、弾力のある動き方をします。それぞれの頂点の間の力のかかり方や、それらが弾むときの方向、他の頂点への力の変化など、かなり複雑な計算が求められるように感じられます。けれど、実は四則演算を使った簡単な式で、このアニメーションはつくられているのです。

2014.8.4
FN1407004「CSS3: テキストを順に浮かび上がらせては消すアニメーション」
animationプロパティでテキストの影を、ひと文字ずつ時間差で増減させることにより浮き沈みが表現できます。簡単なコードをお題にして、その仕組みをご説明します。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第30回「Box2Dでたくさんのボールを床に落とし続ける」
前回、剛体のボールひとつを床に自由落下させるところまでつくりました。今回は、ボールの数を増やしてランダムな大きさと位置で落とすとともに、スクリプトの組立ても整えます。

F-site:CreateJS「数学を使ったJavaScriptコーディング」
幾何学的な計算や物理運動を表すには、数学の知識が求められます。もっとも、計算は必ずしも難しい訳ではありません。考え方さえわかれば、応用できることが多いです。ここでは、一見難しそうなベクトルの外積と微分のふたつについて、その使い途と考え方をリンクでご紹介します。また、ビデオ映像やjsdo.itのサンプルも掲げました。

2014.7.29
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第29回「Box2Dで落としたボールを床に弾ませる」
自由落下させるボールの下に床にを加えて、その上で弾ませます。剛体がぶつかり合うことによって、物理演算シミュレーションらしくなります。

FN1407003「Flash Professional CCのHTML5 CanvasドキュメントでJavaScriptコードをどこに書くか」
Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。そして、フレームには[アクション]パネルでJavaScriptコードが書けます。もっとも、FLAファイルでコンテンツをすべてつくってしまうというのではなく、外部JSファイルと合わせてオーサリングすることが前提です。すると、FLAファイルのフレームとJSファイルのどちらに、どういうスクリプトを書けばよいかが問われます。

F-site:HTML5「Away3Dでつくる3DのHTML5コンテンツ」
Away3Dエンジンが、「Away3D TypeScript」としてJavaScriptライブラリへの移植が進んでおり、現在アルファリリースが公開されています。いよいよHTML5とJavaScriptを使って、本格的に3次元表現ができるようになるのです。そのAway3Dを学ぶための入門的な解説を、リンクでご紹介します。

2014.7.26【レジュメ&サンプルコード&ビデオ公開】
2014年7月25日金曜日のAway3D勉強会「HTML5とJavaScriptではじめる3D表現」で務めた一席のレジュメ「Away3D TypeScriptで立方体を回してみる」にサンプルコードとUSTREAMビデオを添えて公開します。

2014.7.19【解説&サンプルコード公開】
FN1407001「速度から位置を決めるアニメーションー微分により運動を考える」
物理的なアニメーションを表現しようとするとき、直接位置を計算しようとするより、速度から導いた方が複雑なアニメーションも簡潔に表せたりします。これは数学的には、微分により物体の運動を捉えていることになります。微分の計算そのものはしなくても、考え方を知るだけで見通しはよくなり、応用の幅も広がます。

2014年7月19土曜日の第18回「Creators MeetUp」で務めた同名のセッションのレジュメをもとに、加筆・補正しました。

2014.7.14
FN1407002「Away3D: テクスチャの凹凸と反射ー法線マップとスペキュラマップ」
FN1405001「Away3D: パーティクルのアニメーション」では、Away3D TypeScriptを使った3次元空間のアニメーションで、燃える炎を表現してみました。このサンプルの床にテクスチャを与え、さらに凹凸や反射の表現も加えてみましょう。

2014.7.8
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第28回「物理演算エンジンBox2Dでボールを落とす」
3回ほどにわたって、物理計算にもとづくアニメーションをつくります。物理空間に置かれたものが、落ちたり互いにぶつかり合ったりしたときの位置や速度はライブラリで計算します。今回使うのは、さまざまな言語に移植されていて定評のあるBox2Dという2次元の物理演算エンジンです。

2014.6.30
FN1406001「EaselJS NEXT: Stage.drawRectプロパティ」
EaselJS次期バージョンに加わるプロパティです。Stage.update()メソッドが呼出されたとき、Stageオブジェクトが更新される矩形領域をRectangleオブジェクトで定めます。

2014.6.22
F-site:HTML5「Away3D TypeScriptのビルドがまた5月13日付で変わった」
「Away3D TypeScriptの2014年6月13日付アップデート」
Away3D TypeScriptのライブラリの構成が2014年5月に大きく変わり、また6月13日付でビルドが改められました。それまでのコードが動かなくなった変更もあります。ドキュメントが十分でないため、どこを直せばよいのかわかりにくくなっている面も否めません。基本的なサンプルコードにもとづいて、どこが変わったのかをご説明します。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第27回「ランダムな楕円軌道を描くパーティクルの仕上げ」
前回は、速度からランダムに導いた楕円軌道でパーティクルを回してみました。今回は、そのランダムをさらにばらつかせます。そして、楕円運動の速度から位置を求める方程式についても、数学的な説明を補いました。

2014.5.31
FN1405003「Flash Professional CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す」
Flash Professional CC 13.1から加わったドキュメント形式の[HTML5 Canvas]を用いれば、入れ子にしたタイムラインのインスタンスがCreateJSで親子の階層としてActionScript 3.0のように扱えます。ただし、子インスタンスに定めた関数を呼出そうとすると、かなり勝手が違ってきます。

2014.5.28
FN1405002「Starlingフレームワーク1.5の新しい機能」
Starlingフレームワーク1.5が正規に公開されました。多くの最適化やバグ修正、および新たな機能が加えられています。blog記事「Starling 1.5」にもとづいて、おもな変更点をご紹介します。

2014.5.22
FN1405001「Away3D: パーティクルのアニメーション」
Away3D TypeScriptサイトの「Examples」に掲げられた「Animating particles simulating fire」を参考にして、パーティクルのアニメーションで燃える炎を表現してみます。2014年5月13日付の最新ビルドに対応しました。

2014.5.11
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第26回「パーティクルを使い回しながらさまざまな楕円軌道で回す」
前回は、黒い背景に残像が残るパーティクルを楕円軌道で重ねました。そして、その楕円軌道の中心はCanvasの真ん中に定めました。今回は、違った方程式で楕円軌道を描きます。

2014.4.30
FN1404005「Starlingフレームワーク1.5リリース候補」
Starling 1.5のリリース候補が公開されました。Starling Forumの記事「Starling 1.5 Release Candidate」より、おもな変更点をご紹介します。

2014.4.24
FN1404004「SoundJSの次期バージョンがオーディオスプライトをサポート」
SoundJSでオーディオスプライトが使えるようになります。GitHubのNEXTバージョンにこの機能が加えられました。オーディオスプライトは、CSSスプライトやスプライトシートのように、複数のオーディオ素材をひとつのファイルにまとめて扱います。

2014.4.23
FN1404003「EaselJS NEXT: Event.set()メソッドでオブジェクトにプロパティをまとめて加える」
引数に受取ったオブジェクトからすべてのプロパティを取出して、参照するEventオブジェクトに与えます。複数のプロパティをひとつのオブジェクトに納めてEvent.set()メソッドに渡せば、Eventオブジェクトにまとめて加えられます。

2014.4.21
FN1404002「Away3D: 立方体を回してみる」
オープンソースのリアルタイム3DエンジンAway3Dが、「Away3D TypeScript」としてJavaScriptライブラリに移植が進められており、現在アルファリリースを公開しています。このAway3D TypeScriptを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回してみましょう。

2014.4.17
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第25回「楕円軌道に残像を描きながら回るパーティクル」
今回から、さまざまな楕円軌道を描いて回るパーティクルに取組みます。CreateJSコミュニティエバンジェリストSebastian DeRossi氏による「Fun with Particles」を参考に、仕組みがわかりやすいスクリプトに書直しました。楕円軌道を動かす式の立て方が課題です。

2014.4.11
FN1404001「CSS3: 3次元空間に立方体をつくって回すー transformプロパティ」
CSS3のtransformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。CSSで3次元空間に立方体をつくって回してみます。

2014.4.4
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第24回「マウスポインタの動きに弾みがついた曲線を滑らかに描く」
前回は、マウスポインタの動きに沿って、滑らかに描かれては消える線のアニメーションをつくりました。その線は、マウスポインタの動きに少し遅れて描かれました。今回は、線の表現にもう少し手を入れて仕上げます。

2014.3.19
F-site:CreateJS「オブジェクトが動く速度と加速度と微分の考え方」
物理法則にしたがったオブジェクトのアニメーションをスクリプティングするとき、数学の「微分」の考え方で捉えられると応用の幅が広がります。微分と聞くと難しそうに響きます。けれど、大雑把にいってしまえば、オブジェクトの動きについて変化を見るということです。アニメーションがつぎのフレームでどう変わるかを考える、といってもよいでしょう。

2014.3.6
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」
今回からのお題は、マウスポインタの動きに沿って、滑らかに描かれては消える線のアニメーションです。マウスが大きく動くと、線は太くなります。また、線はマウスポインタの軌跡そのままではなく、動きに少し弾みがついて描かれます。

2014.3.5
FN1403001「バネのような動きを加速度から定めるーオイラー法」
バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。けれど、バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。

2014.2.27
FN1402006「CSS3: テキストをイルミネーションのように点滅させるアニメーション」
CSS3でテキストをイルミネーションのように点滅させます。こうした表現でCSS3アニメーションをどのように定めるのかご説明します。

2014.2.18
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第22回「立方体の6面をx軸とy軸で回す」
前回水平に回した立方体の4面を、6面に増やします。そして、マウスポインタの位置に応じて、水平および垂直に回します。

2014.2.17
F-site:HTML5「JavaScriptで書く3次元表現」
JavaScriptで3次元空間を表現するには、いくつかのやり方があります。そうした解説の中でとくに初心者向けの記事をご紹介しました。JavaScriptライブラリとしては、CreateJSとAway3D、およびthree.jsを使います。

FN1402004「Away3D: 立方体を回してみる」
オープンソースのリアルタイム3DエンジンAway3Dが、「Away3D TypeScript」としてJavaScriptライブラリへの移植が進んでいます。このライブラリを使ったごく簡単なJavaScriptコードで、3次元空間に立方体をつくって回してみましょう。

FN1402005「Flash Player 13ベータリリースの機能」
Flash Player 13のベータリリースには、機能強化とバグ修正に加え、安全性や安定性、パフォーマンス、およびデバイスの互換性などに関わる新機能が備わりました。「Flash Player 13 and AIR 4 Release Notes」からその中身をかいつまんでご紹介します。

2014.2.13
F-site:CreateJS「PreloadJS次期バージョンに読込み順を定めるプロパティが加わる」
PreloadJS次期バージョン(NEXT)に、ファイルの読込み順を定める新たなプロパティが加わることになりました。直近のドキュメントから、かいつまんでご紹介します。

FN1402003「PreloadJS NEXT: LoadQueue.maintainScriptOrderプロパティ」
プロパティにtrueが与えられると、LoadQueue.loadManifest()メソッドによるscript要素の読み込みが、第1引数に渡したマニフェストオブジェクトに記述された順で行われます。次期バージョン候補では、スクリプト以外の項目も、maintainOrderプロパティにtrueを与えれば、記述の順序にしたがって読込まれます。

2014.2.9
本ページ右カラムに、「CreateJS Samples」とFacebook Page「CreateJS」のふたつのリンクを加えました。

2014.2.7
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第21回「水平に回す立方体の面を塗る」
前回つくった立方体の四方の面を塗ります。ただし、面をどの順序で塗るか考えておかないと、面の重ね順が崩れます。今回は、「ベクトルの外積」を使って解決しました。

FN1402001「Starling JSをAway Foundationが引継ぐ」
2014年2月5日付でStarlingの公式ブログに「Starling JS flocking to the Away Foundation」という記事が投稿されました。昨年5月に記事「A Bird For The Modern Web」とMAX2013でStarling JS開発がアナウンスされてから、これまで情報が伝えられなかった事情を語っています。ブログ記事にもとづいてご紹介します。

FN1402002「Away3D TypescriptとWebGL」
2014年2月5日付でAway3Dの公式ブログに「Away Foundation roadmap 2014」と題する記事が公開され、2014年のロードマップが示されました。Away3Dエンジンの利用を拡げる新たなプラットフォームに向けた開発が進められます。その中からAway3D TypescriptとWebGLについて、ブログ記事にもとづいてご紹介します。

F-site:ActionScript: AS3「Flash用Away3D 4.2」
Away3Dの公式ブログの記事「Away Foundation roadmap 2014」から、Flash用Away3D 4.2の計画についてご紹介します。

2014.2.5
FN1401004「等速円運動を三角関数の微分で表す」
等速円運動は、多くの場合三角関数で表します。その場合、運動の式を位置の動きで立てるほかに、速度の変化で扱う考え方もあります。後者は、数学的には「微分」で導かれる関数が使われます。解説では先にJavaScriptコードを示し、数学の考え方は興味ある読者のために後で説明しています。

2014.1.30
FN1401003「EaselJS次期バージョンでWebGLを使う」
2014年1月28日付CreateJS Blogに「WebGL & EaselJS: a Technical Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするWebGLレンダラをどのように使うかの入門的な解説です。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第20回「立方体のワイヤーフレームを水平に回す」
3次元空間の立方体を、マウスポインタの位置に応じて水平および垂直に回すお題に取組みます。今回は、ワイヤーフレームの立方体を、マウスポインタの水平座標に応じてy軸で回すところまでです。

F-site:CreateJS「EaselJS 0.7.1: サンプル「Smooth Line」」
マウスポインタの動きにしたがって、滑らかな曲線が描かれては消えてゆくサンプルです。これまでFumioNonaka.comやgihyo.jpの連載で解説した小技をコードに採入れてみましたので、簡単にご紹介します。

2014.1.20【レジュメ&サンプルコード公開】
2014年1月18日土曜日の第12回Creators Meetupで務めた高座「珍味ベクトル外積3種盛り」のレジュメとサンプルコードを公開します。ベクトルの「外積」は、考え方のわかりにくい計算です。けれど、何に使えるのかを知れば、式そのものは簡単な四則演算です。今回は2次元のベクトルに絞って、3つのインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介します。

2014.1.17
FN1401002「EaselJSがWebGLをサポート」
2014年1月16日付CreateJS Blogに「WebGL Support in EaselJS」という記事が投稿されました。EaselJSでWebGLレンダラがサポートされるということです。現在、パブリックプレビューが公開されています。blog記事にもとづいて、新しいWebGLレンダラについてご紹介します。

2014.1.16
FN1401001「Flash Player 12の新たな機能」
2014年1月14日にFlash Player 12がリリースされました。それを受けて、Adobeからのアナウンスや「Release Notes | Flash Player 12 AIR 4」(いずれも英文)も公開されました。本稿では、これらの記事にもとづき、Flash Player 12で新たに加わった機能を簡単にご紹介します。

2014.1.14
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第19回「3次元空間で弾むオブジェクトとz座標による重ね順の並べ替え」
前回の第18回「クラスの継承と透視投影」では、3次元座標のボールのクラスを定め、100個のオブジェクトをランダムな向きに落としたうえで、2次元平面に透視投影しました。今回は仕上げとして、まずボールを床で弾ませます。つぎに、ステージから見えなくなったオブジェクトは、メモリから片づけます。そして、3次元のオブジェクトの重ね順を整えます。

2013.12.31
F-site:CreateJS「CreateJSのマイナーアップデートが公開される」
CreateJSのマイナーアップデートがリリースされました。ライブラリやAPIの安定性が増し、大きな改善も加えられています。本稿はCreateJS Blog「New Releases of CreateJS posted!」にもとづいて、変更点を簡単にご紹介します。

F-site:CreateJS「EaselJS 0.7.1で復活した細かいこと」
今月マイナーアップデートがリリースされたCreateJSで、EaselJSはバージョンが0.7.1になりました。中には、0.7.0で変わったと思われた動きが、ちゃっかり0.6.1と同じに戻っていたります。地味に愕然とします。

2013.12.29
FN1312002「EaselJS 0.7.1: 他のオブジェクトの後ろに置いたインスタンスがマウスイベントを受取らない」
EaselJS 0.7.0から、ほとんどのマウスイベントはバブリングするようになりました。すると、子インスタンスで起こったマウスイベントが、親インスタンスのリスナーで扱えます。ただし、そのためにこれまでと動きが変わってくるところもあります。

2013.12.28
FN1312004「平面上の2直線の交点を外積で求めるサンプルコード」
平面における2直線の交点は、ベクトルとして外積で考えると、一般的に導けます。コードに細かな場合分けが要りません。また、ふたつの線分が直接交わるかどうかも、外積で調べられます。

FN1312005「EaselJS 0.7.1: ColorFilterクラスでインスタンスの塗りのグラデーションを反転させる」
ColorFilterクラスが定めるのは、インスタンスのカラーをチャネルごとに変換するフィルタです。Shapeインスタンスに塗ったグレースケールのグラデーションを反転してみます。また、使い方が少しわかりにくい、メソッドDisplayObject.getBounds()とDisplayObject.setBounds()についてもご説明します。

2013.12.25【レジュメ&サンプルコード公開】
2013年12月20日金曜日に開かれたCreateJS勉強会「CreateJS今日この頃: EaselJS 0.7.0および0.7.1で何が変わったのか」のレジュメとjsdo.itに加えたサンプルコードを公開します。とくにマウスイベント周りの扱いが変わっています。

2013年12月21日土曜日の第11回Creators Meetupで務めた高座「EaselJS 0.7.0と0.7.1のマウスドラッグとマウスイベントのバブリング」のレジュメとサンプルコードを公開します。マウスイベントの仕組みと流れを少し細かく説明しました。

FN1312003「平面上の2直線の交点を外積により求める」
平面における2直線の交点は、直線の方程式を連立して解くことができます。ただ、その場合は傾きによる場合分けをしなければなりません。ふたつの直線をベクトルとして外積で考えると、一般的に交点が導けます。

2013.12.19
FN1311003「EaselJS 0.7.0: バグが確認されているColorMatrixクラスのメソッド」
EaselJS 0.7.0のColorMatrixクラスには、バグの確認されたメソッドがあります。そして、いくつかは0.7.1で修正されました。ここでは3つのメソッドを、実装にも触れつつご紹介します。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第18回「簡単なクラスを定義する」
今回のお題は、引続きクラス定義と透視投影を使ったコードです。Keith Peters氏がActionScript 3.0でつくられたサンプルの動きをもとに、CreateJSでスクリプティングします。

2013.12.10
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第17回「簡単なクラスを定義する」
前回は、星形の3次元座標をy軸で水平に回し、2次元平面に透視投影したうえでアニメーションにしました。この表現はこのままに、スクリプトの書き方に磨きをかけます。具体的には、簡単なクラスを定義します。

FN1312001「Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS」
Flash Professional CC 13.1から、新たなドキュメント形式として[HTML5 Canvas]が加わりました。これまでの[Toolkit for CreateJS]パネルによる[パブリッシュ]に替えて、ドキュメントからHTML5とCanvasに対応させようというものです。本稿では、FlashドキュメントをHTML5 Canvas形式に変換し、CreateJSで手を加えるまでの流れを簡単にご紹介します。

2013.12.2【CreateJS勉強会】
CreateJSの新バージョンがリリースされました。このリリースでは、イベントモデルの改訂を始め、とくにEaselJSライブラリが大きく変わっています。そこで、おもにEaselJS 0.7.0で扱いの異なるところを説明し、次期バージョン(NEXT)候補にも触れたいと思います。

【お　　題】「CreateJS今日この頃」
【日　　時】2013年12月20日金曜日19:00～20:40
【参加費用】無料 (ATNDにて登録)
【場　　所】アドビシステムズ株式会社会議室(ゲートシティ大崎イーストタワー19F)
【定　　員】30名
【参加申込】ATND「CreateJS勉強会～末～」

2013.11.27
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第16回「3次元空間で座標を回す」
前回は、星形の2次元平面座標をPointオブジェクトで定めて直線で描き、平面上で回るアニメーションまでつくりました。今回は座標を3次元に拡げて、y軸で水平方向に回転させます。そのとき、遠近法の計算も加えてます。

2013.11.17
FN1311002「EaselJS NEXT: MouseEvent.localX/MouseEvent.localYプロパティ」
MouseEvent.localXとMouseEvent.localYプロパティは、イベントが起こったときのマウスポインタのxy座標値を、リスナーが加えられたオブジェクト(Event.currentTargetプロパティの参照)の座標系にもとづいて調べて返します。読取り専用のプロパティです。

2013.11.18
F-site:CreateJS「EaselJS 0.7.0 & NEXT: ColorMatrix.toString()メソッドの戻り値」
EaselJS 0.7.0には、ColorMatrix.toString()メソッドが定義されていません。そのため、継承する基本クラスのメソッドの値がそのまま戻り値になります。次期バージョン候補(NEXT)で、カラー変換行列の成分値を返すように修正されます。

2013.11.17
FN1311001「EaselJS 0.7.0のColorMatrix.concat()メソッドが正しい演算結果を返さない」
EaselJS 0.7.0のColorMatrix.concat()メソッドは、引数に配列でなくColorMatrixオブジェクトを受取ったとき、正しく乗算された行列のオブジェクトを返しません。

2013.11.10
F-site:CreateJS「EaselJS 0.7.0: ColorMatrix.toArray()メソッドが空の配列を返す」
新しいEaselJS 0.7.0のColorMatrix.toArray()メソッドが、カラー変換行列の25成分値を取出すことなく、空の配列を返します。

2013.11.9
F-site:CreateJS「EaselJS 0.7.0: ColorMatrix.clone()メソッドが動かない」
EaselJS 0.7.0のColorMatrix.clone()メソッドが、正しくオブジェクトを返しません。次期バージョン候補(NEXT)で修正されました。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第15回「Matrix2Dクラスで座標を回す」
ワイヤーフレームで描かれた星形を、3次元空間のy軸で回します。CreateJSに3次元座標を扱うクラスはないので、2次元座標の変換を3次元の考え方に応用してつくります。

2013.10.29
FN1303001「CreateJSで関数にスコープを定めるー proxy()関数」
CreateJSのグローバルな関数proxy()は、第1引数の関数に第2引数のスコープを定めた新たな関数を返します。新バージョンにもとづいて、全体に加筆・補正を施しました。

FN1310005「EaselJS NEXTに加わるDisplayObject.tickイベントの流れを止めるプロパティ」
DisplayObject.tickイベントは、Stage.update()メソッドが呼出されたとき、Stageオブジェクトの表示リストに加わったすべてのDisplayObjectインスタンスに配信されます。その無駄な流れは止められるように、DisplayObject.tickEnabledとContainer.tickChildrenプロパティが備わります。

FN1310006「EaselJSのDisplayObject.tickイベント」
Stage.update()メソッドが呼出されると、Stageオブジェクトはその表示リストのすべての階層の子オブジェクトにDisplayObject.tickイベントを送って、Canvasは描き替えられます。アニメーションするオブジェクトのフレームも、DisplayObject.tickイベントを受取って進められます。

2013.10.25
FN1310004「CreateJSの配列エレメントからインデックスを得るユーティリティ関数－ indexOf()」
新しいCreateJSにグローバルに定められた関数で、第1引数に渡された配列から第2引数のエレメントを探し、そのインデックスの整数を返します。

2013.10.25
FN1310003「EaselJS 0.7.0でインスタンスをドラッグ&ドロップする」
EaselJSは0.7.0になって、とくにイベントモデルが大きく変わりました。イベントがより扱いやすくなり、一貫した仕組みになります。前のバージョンとスクリプティングが変わった例として、インスタンスのドラッグ&ドロップを採上げます。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第14回「オブジェクトの使い回しとアニメーション素材の変更」
前回書いたコードでは、マウスポインタの動きに合わせてつくられるオブジェクトが落ちて弾み、残像にモーションブラーがかかりました。これにふたつ手を加えます。ひとつはオブジェクトを使い回すようにすること。そしてもうひとつは、スプライトシートアニメーションの素材を差し替えてみます。

2013.10.18
FN1310002「EaselJS 0.7.0のTickerクラスでrequestAnimationFrameのAPIを使う - Ticker.timingModeプロパティ」
TckerクラスはタイミングのAPIに、setTimeoutかrequestAnimationFrameを使うことができます。EaselJS 0.7.0では、タイミングを決めるプロパティとしてTicker.useRAFに替わってTicker.timingModeが備わり、3つのモードから選べるようになりました。

2013.10.13
FN1302001「EaselJSでイベントリスナーを扱うEventDispatcherクラス」
EventDispatcherクラスのリファレンスをEaselJS 0.7.0にもとづいて改訂しました。新バージョンで新たに加わった項目を明らかにしています。

2013.10.7
FN1309004「EaselJS 0.7.0の改訂」
2013年9月25日にリリースされたEaselJS 0.7.0ライブラリの改訂を、VERSIONS.txtにもとづいて細かな項目まで紹介し、補足するとともに、これまで書いた記事へのリンクも加えました。

FN1310001「EaselJS 0.7.0のTicker.addEventListener()やTicker.on()メソッドが関数を返さない」
EaselJS 0.7.0のTicker.addEventListener()やTicker.on()メソッドが、戻り値に定められている関数を返しません。CreateJS Supportで確認された問題です。

2013.10.2
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第12回「スプライトシートでアニメーションをつくる」
今回は、スプライトシートでアニメーションをつくります。「スプライトシート」というのは、アニメーションのひとコマひとコマをひとつにまとめた画像ファイルです。ファイルをひとつにすると、読込みが1回で済むため効率がよくなります。

第13回「モーションブラーと弾むアニメーション」
前回つくったマウスポインタに合わせて弾けるスプライトアニメーションに、さらにふたつ表現を加えます。第1は、アニメーションの残像に、落ちる動きのぼかしを与える「モーションブラー」です。第2に、ステージの下端まで落ちたインスタンスを弾ませます。コードは最新のCreateJSに対応させました。

F-site:CreateJS「CreateJSの新バージョンがリリース」
CreateJSの新バージョンが公開されました。機能が拡張し、バグは修正されるとともに、APIの安定化もはかられています。CreateJS Blog「New version of CreateJS released!」にもとづいて、その中身をご紹介します。

F-site:CreateJS「EaselJSのDisplayObject.mouseEnabledプロパティで直後のDisplayObject.mouseoutイベントが止められない」
「EaselJSのDisplayObject.mouseEnabledプロパティで直後のマウスイベントが止められない」ことがあります。この問題について、CreateJS Supportから回答がありました。その中身についてご説明します。

2013.9.28
FN1309003「Starlingフレームワーク1.4の新しい機能」
2013年9月23日にStarlingフレームワーク1.4が公開されました。パフォーマンスの向上のほか。そのおもな内容を9月24日づけのblog記事「Starling 1.4」にもとづいてご紹介します。

2013.9.24
FN1309002「EaselJS次期バージョン候補に備わったEventクラスでイベントの流れを扱う」
新たなEventクラスは、イベントオブジェクトの基本クラスとして定められました。また、EventはEventDispatcherクラスとともにDOM Level 2イベントモデルにもとづきます。リスナーを加えたオブジェクトに親子の階層があるとき、その間をイベントが伝わるバブリングとキャプチャの流れもサポートします。

9月21日に開かれた第8回Creators MeetUpでは、この中身を簡単にご紹介しました。レジュメとサンプルファイルを公開します。

2013.9.9
FN1309001「EaselJSのDisplayObject.mouseEnabledプロパティで直後のマウスイベントが止められない」
DisplayObject.mouseEnabledプロパティは、DisplayObjectインスタンスがマウスイベントを起こさないように定めることができます。けれども、直後のマウスイベントが起こってしまうこともあります。

2013.9.7
F-site:CreateJS「EaselJSの次期バージョンに加わるイベントを扱うふたつのメソッドと注意点」
EaselJSの次期バージョンでイベント周りの扱いが大きく変わります。EventDispatcherクラスをDisplayObjectクラスが継承し、イベントオブジェクトの基本クラスとしてEventクラスが定められました。これらのクラスに新たに備わった便利なメソッドをふたつご紹介します。

2013.8.29
FN1302001「EaselJSでイベントリスナーを扱うEventDispatcherクラス」
EaselJS次期バージョン候補(NEXT)に備わるメソッドを加え、変更を補いました。解説すべてを見直して、大幅に書替えています。

2013.8.26
F-site:CreateJS「EaselJSの次期バージョンでオブジェクトの幅と高さを取得する実装」
CreateJS Blogに「Update: Width & Height in EaselJS」という更新情報の記事が公開されました。「EaselJSの次期バージョンにおけるオブジェクトの幅と高さの取得」の04「次期バージョンでgetBounds()メソッドが備わる」で検討されていた矩形領域の調べ方について、DisplayObjectクラスへの実装が決まりました。

2013.8.22
FN1308004「EaselJS次期バージョンのイベントモデル改訂」
EaselJS次期バージョン候補(NEXT)でイベントモデルが大きく変わります。CreateJS Blogの記事「Event Model Updates」にもとづいて、その中身をご紹介します。イベントがより扱いやすくなり、一貫した仕組みになります。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第11回「マウスポインタの動きに合わせてインスタンスをランダムに落とす」
今回から、また新たなお題に取組みます。マウスポインタの動きに合わせてインスタンスがつくられ、ランダムな向きと速さで落ちていく表現です。まずはShapeオブジェクトを使って、ランダムな方向に初速を与え、自然落下させます。

2013.8.20
FN1308002「EaselJS次期バージョン候補の座標系クラスに初期化のメソッドが加わった」
EaselJSのgeomパッケージには座標系のクラスとしてMatrix2DとPointおよびRectangleが定められています。EaselJS次期バージョン候補(NEXT)のこれら座標系クラスに初期化のメソッドが加わりました。クラスのコンストラクタを呼出せば、初期化された新たなオブジェクトはつくれます。けれど、すでにあるオブジェクトを初期化して使い回した方が、ガベージコレクションなどの負荷が減らせ、最適化しやすくなります。

FN1308003「遠近法が投影された座標を求める」
CreateJSには3次元空間の座標を扱う機能はありません。それでも、3次元空間の座標に「遠近法」を加えて2次元平面に投影する計算は、それほど難しくはありません。「透視投影」と呼ばれるこの座標の求め方を説明し、3次元空間の座標を扱うクラスとして定めてみます。

2013.8.10
FN1308001「EaselJSのMatrix2Dオブジェクトの変換行列を適用する」
Matrix2Dオブジェクトの変換行列は、他のインスタンスに適用して座標変換が加えられます。DisplayObjectインスタンスを変形するMatrix2D.decompose()メソッドと、Pointオブジェクトの座標を変換するMatrix2D.transformPoint()メソッドについてのリファレンス解説です。後者は、次期バージョン候補から備わります。

2013.7.29【レジュメ&サンプルコード公開】
2013年7月26日金曜日に開かれたCreateJS勉強会で務めた高座「CreateJS +0.0.1の地味なアップデートとEaselJS次期バージョン候補」のレジュメとjsdo.itに加えたサンプルコードを公開します。

2013年7月12日金曜日に開かれた「『WebクリエイターのためのCreateJSスタイルブック』出版記念特別セミナー」の録画ビデオが公開されました。

FN1307004「EaselJSの次期バージョンにおけるオブジェクトの幅と高さの取得」
EaselJSのDisplayObjectインスタンスについては、基本的にオブジェクトの幅や高さが調べられません。CreateJS Blogの記事「Width & Height in EaselJS」にそれが難しい理由と、次期バージョン(NEXT)に備わる簡易的なメソッドが紹介されました。その記事にもとづいて解説します。

FN1307005「EaselJS次期バージョン候補のGraphics.inject()メソッド」
Graphicsオブジェクトのキューに、Canvas APIの呼出しを挿入します。第1引数のコールバック関数は、参照するGraphicsオブジェクトが描画されるCanvasのContext2Dオブジェクトをスコープとして実行されます。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第10回「ドラッグの軌跡を滑らかな曲線で描く」
前回と同じく、BoxBlurFilterによりぼかしたイメージのインスタンスに、AlphaMaskFilterでマスクしたもとのイメージのインスタンスを重ね、マウスのドラッグでアルファマスクを描きます。今回は、連続する座標を滑らかな軌跡で描く手法について考えます。

2013.7.20【レジュメ&サンプルコード公開】
2013年7月20日土曜日に開かれた東京ひよこの会「SpriteSheet・AIR for Desktop・CreateJS・Scoutについて語り合おう！」で務めた高座「EaselJS NEXTが公開された」のレジュメとjsdo.itに加えたサンプルコードを公開します。

F-site:CreateJS「EaselJSの次期バージョンにおけるイベントのバブリングとマウスイベント」
7月19日にCreateJSの開発者Grant Skinner氏よりEaselJSの次期バージョン(NEXT)について、「Event Bubbling + mousemove & mouseup」と題する投稿がありました。イベントのバブリングとmousemoveおよびmouseupイベントについて、ユーザーの意見を求めたものです。

2013.7.13【レジュメ&サンプルコード公開】
2013年7月12日金曜日に開かれた「『WebクリエイターのためのCreateJSスタイルブック』出版記念特別セミナー」にご参加いただきましたみなさま、ありがとうございました。セミナーのレジュメとjsdo.itに加えたサンプルコードを公開します。

FN1307003「EaselJSで連続した座標の軌跡を描く」
EaselJSで連続した座標の軌跡を描きたいときがあります。たとえば、マウスドラッグにしたがって線を引くような場合です。とくに滑らかな曲線で軌跡を描くやり方について考えます。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第9回「ドラッグでアルファマスクを描く」
BoxBlurFilterによりぼかしたイメージのインスタンスに、AlphaMaskFilterでマスクしたもとのイメージのインスタンスを重ね、ドラッグでアルファマスクを描きます。

2013.7.11
FN1307002「EaselJSの次期バージョン候補でアニメーションの扱いが変わる」
日本時間の7月9日GitHubに、EaselJSの次期バージョン(NEXT)が公開されました。大きく手を加えられたのが、スプライトシートやアニメーションの扱いです。おもな変更点について、簡単に解説します。

F-site:CreateJS「EaselJSの次期バージョン候補が公開される」
EaselJSの次期バージョン(NEXT)の細かな変更点は、EaselJS(NEXT)の「VERSIONS.txt」に書上げられています。これらについて、簡単にご説明しています。

2013.7.8
FN1307001「SoundJSの次期バージョンにbasePathオプションとvolumeおよびpanプロパティが加わる」
SoundJSの次期バージョン(NEXT)に、ふたつの追加がありました。ひとつは、読込むサウンドを登録するときパスの起点となるbasePathのオプションが加えられるようになりました。もうひとつは、SoundInstanceオブジェクトのボリュームとパンが、プロパティで扱えるようになったことです。

2013.6.28
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第8回「ぼかしフィルタとアルファマスク」
アルファマスクは、ベクターマスクとは異なり、AlphaMaskFilterクラスで扱われるフィルタです。さらにBoxBlurFilterクラスを使うと、インスタンスのイメージにぼかしが加えられます。今回は、このふたつのフィルタの使い方を学びます。

2013.6.10
FN1306002「EaselJSのGraphicsクラスで2次ベジエ曲線を描く」
Graphics.quadraticCurveTo()とGraphics.curveTo()メソッドのリファレンスです。両メソッドは、Graphicsクラスの内部では同じ関数を参照し、オブジェクトに2次ベジエ曲線が描けます。加えて、使い始めたとき少し難しく感じるコントロールポイントの計算の仕方も解説しました。

2013.6.201【CreateJSセミナー】

2013年6月26日にマイナビより拙著『WebクリエイターのためのCreateJSスタイルブック』が発売されます。そこで、JaGraプロフェッショナルDTP&Webスクールの主催により「『WebクリエイターのためのCreateJSスタイルブック』出版記念特別セミナー」が開催されます。JavaScriptの基礎を学んだみなさんに、CreateJSのライブラリはどのように使うのか、そしてどういう表現ができるのかを簡単にご紹介します。

【日　　時】2013年7月12日金曜日20:00～21:30
【参加費用】無料 (事前登録制)
【場　　所】株式会社サイバーエージェント本社13階会議室
【定　　員】150名

2013.6.12
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第7回「粒子同士が引き合う力を直線の濃淡で示す」
前回の第6回では、ランダムに動く粒子それぞれの間にバネのような力を与えてアニメーションさせました。もっとも、バネはいくらでも伸び縮みするものではありません。そこで、この粒子のアニメーションでも、互いの間に引合う力が及ぶ距離を決めたうえで、力の働く粒子同士を直線で結んでみます。

2013.6.10
FN1306001「PreloadJSで外部ファイルを読込む」
LoadQueueクラスを用いて外部ファイルを読込むときに用いるメソッドのリファレンス解説です。最新のPreloadJS 0.3.1で加わった項目を明らかにしています。サンプルコードはjsdo.itにも掲げました。

2013.5.30
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第6回「アニメーションする粒子間に引合う力を加える」
今回のお題は、ランダムに動く粒子の間に相互作用を加えたアニメーションです。ランダムな動きにオブジェクト同士のインタラクションを交えると、有機的なアニメーションになります。

2013.5.27
FN1305003「EaselJS 0.6.1のMatrix2Dクラスの基本的なメソッドと行列演算」
EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介しました。

2013.5.22
FN1305004「TweenJS とSoundJS 0.4.1に備わったインスタンスを削除するメソッド」
2013年5月14日付でCreateJSが+0.0.1アップデートされたときに加わったメモリ節約メソッドのご紹介です。バグも見つかったので報告して確認されました。GitHubで修正が加えられる予定です。

2013.5.14
F-site:CreateJS「CreateJSがバグ修正で0.01バージョンアップ」
まだ今のところ、GitHubからのダウンロードです。前のバージョンで起こった問題について、修正されているかどうかを確かめました。

2013.5.13【レジュメ公開】
2013年5月10日金曜日に開かれた第3回「CreateJS勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「EaselJSでBox2Dを使った物理シミュレーションを試す」のレジュメとコードを公開します。

2013.5.8
F-site:CreateJS「EaselJSのMatrex2D.scale()メソッドの演算に誤りがある」
Matrex2D.scale()メソッドの実装が誤っているようです。当座は、替わりにMatrix2D.prependTransform()メソッドを用いてしのぐのがよいでしょう。

FN1305002「EaselJSのMatrix2D.scale()メソッドを他の変換の後に呼出すと正しく伸縮されない」
Matrix2D.scale()メソッドの内部処理や演算結果について詳しく説明しました。また、変換行列の演算や正しい実装についても触れています。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第5回「トゥイーンアニメーションを仕上げる」
同心円のリングが、ステージ上のクリックした位置に、時間差でトゥイーンする「TWEEN CIRCLES」。アニメーションやインタラクションをよく確かめて、スクリプトの仕上にかかります。

2013.5.5
FN1305001「Lo-Dashユーティリティライブラリを使ってみる」を加えました。Lo-Dashは、JavaScriptで配列やオブジェクトの細かな扱いができるユーティリティライブラリです。

F-siteのCreateJSに、つぎの2件を追加しました。

「PreloadJSのLoadQueue.fileprogressイベントで読込みパーセンテージを調べる」
PreloadJSのLoadQueue.fileprogressイベントで読込まれたパーセンテージは、イベントオブジェクトから調べられます。ところが、ドキュメンテーションのプロパティ名が誤っています。

「CreateJSのproxy()メソッドに第3引数が渡せない」
SoundJS 0.4.0のSoundクラスには、グローバルな静的メソッドとしてproxy()が備わりました。ところが、PreloadJSライブラリを読込むと動作が変わってしまいます。

2013.5.2
F-siteの業界ニュースに「ファーストルック: 次世代のFlash Professional」を追加しました。つぎのFlash Professionalの簡単な紹介と、実際に起動したアプリケーションのビデオが掲載されています。

2013.4.15
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

第3回「Canvasの四辺をランダムなイージングで移動する」
前回つくったトゥイーンアニメーションに、さらにふたつの要素を加えます。ひとつは、イージングをランダムに選びます。もうひとつは、行き先をCanvasの四辺に拡げます。
第4回「時間差をつけたトゥイーン」
TweenJSのデモ「TWEEN CIRCLES」をお題にします。同心円のリングが、ステージ上のクリックした位置に、時間差でトゥイーンします。

2013.4.11
FN1304001「Starlingフレームワークで物理演算エンジンNapeを使う」を加えました。CPUの負荷が上がりやすい物理演算は、Stage3Dを試したい処理のひとつです。使いやすさで注目されている「Nape」を採上げました。

2013.3.27
FN1303002「関数に任意のthis参照を定める」を加えました。関数のthis参照を定めるやり方について、SoundJSのproxy()やFunction.bind()メソッドを試し、さらにproxy()メソッドを書直してみました。

2013.3.18
FN1303001「SoundJSで関数にスコープを定めるー proxy()メソッド」を加えました。静的メソッドproxy()のリファレンスです。例や実装についても解説を加えました。

2013.3.17
F-siteのCreateJSに「SoundJSのSoundInstance.completeイベントでSoundInstance.play()メソッドがサウンドを再生しない」を追加しました。SoundInstanceクラスのバグではないかと推測されます。

2013.3.16【レジュメ公開】
2013年3月15日金曜日に開かれた第2回「CreateJS勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「外部ファイルの読込みとサウンドの再生～新しいPreloadJSとSoundJS～」のレジュメを公開します。

2013.3.8
gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」の第2回は、「トゥイーンをランダムに定める」です。 CreateJSのTweenJSライブラリでつくった座標のトゥイーンに、ランダムな繰返しの動きを加えます。また、2月14日(日本時間)にリリースされた新CreateJSにコードを対応させます。

F-siteのCreateJSに「新CreateJSでSoundJS 0.4.0のメモリの扱いが向上した」を追加しました。地味ではあるものの、大きな改善です。

F-site短期連載「Starlingフレームワークを用いたStage3Dによる2Dアニメーション」の最終回となる第8回「Starlingフレームワークの実装に見るオブジェクトのリサイクル」が公開されました。

2013.3.1
F-siteのCreateJSに「CreateJSでダブルクリックを扱うイベントの誤記ー DisplayObject.dblclickイベント」を追加しました。公式ドキュメントの誤記修正です。

2013.2.27
F-siteのCreateJSに「Ticker.addEventListener()メソッドにStageオブジェクトを渡す」を追加しました。第2引数にはStageオブジェクトを渡すと、Stage.update()メソッドが呼出されます。

FN1302001「EaselJSでイベントリスナーを扱うEventDispatcherクラス」に上記記事に関わる解説を加え、新バージョンのCreateJSにもとづく改訂をしました。

2013.2.21
F-site短期連載「Starlingフレームワークを用いたStage3Dによる2Dアニメーション」に、第5〜第7回の記事が公開されています。

第5回「Starlingフレームワークでイベントリスナーを扱う」
第6回「Starlingフレームワーク1.3の新たなフィルタのクラスとトゥイーンのメソッド」
第7回「StarlingフレームワークとBox2Dで物理演算シミュレーションを行う」

2013.2.18【レジュメ公開】
2013年2月15日金曜日に開かれた第1回「CreateJS勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「TweenJSを使ったアニメーションとマウスイベントの扱い」のレジュメを公開します。また、CreateJS.jp「第一回勉強会フォローアップ」に、当日のUSTREAM映像が公開されています。

2013.2.14【レジュメ公開】
2013年2月12日火曜日に開かれた第3回「Stage3D勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「StarlingフレームワークのTweenクラスにおける最適化とJugglerクラスの実装」のレジュメを公開します。詳しい解説や参考サイトはリンクに加えてあります。

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」の第1回は、「読み込んだ画像をトゥイーンアニメーションさせる」です。読込んだ画像を水平にトゥイーンアニメーションさせます。トゥイーンにかける時間と垂直位置は、ランダムに定めます。

2013.2.7
FN1302002「EaselJSのイベントリスナーにFunction.bind()メソッドを適用するとリスナー内から削除できない」を加えました。リスナー関数にFunction.bind()メソッドを適用するときは注意が要ります。この検討にもとづいて、つぎのふたつのノートに改訂を加えました。

FN1302001「EaselJSでイベントリスナーを扱うEventDispatcherクラス」
FN1212001「EaselJSのつぎのバージョンにEventDispatcherクラスが加わる」

2013.2.3
FN1302001「EaselJSでイベントリスナーを扱うEventDispatcherクラス」を加えました。CreateJS次バージョンのイベントモデルを扱うクラスのリファレンスです。

2013.2.1
F-siteの業界ニュースに、つぎの2件を追加しました。

「CreateJSのつぎのリリース候補バージョン(release candidates)が公開」
「Starlingフレームワーク1.3が公開」

F-site短期連載「Starlingフレームワークを用いたStage3Dによる2Dアニメーション」に、第3および第4回の記事が公開されています。

第3回「StarlingフレームワークのTweenクラスによるアニメーション」
第4回「StarlingフレームワークのTweenクラスにおける最適化とJugglerクラスの実装」

2013.1.24
テクニカルノートに、つぎの2件を追加しました。CreateJSの次バージョンリリース候補((release candidates))で変わる予定のクラスの扱い方です。

FN1301008「PreloadJSに備わる予定のLoadQueueクラスで外部画像ファイルの読込みを待つ」
FN1301009「SoundJSに備わる予定のSoundクラスで外部サウンドファイルを再生する」

2013.1.22
FN1301007「Starlingフレームワークで表示リストの子オブジェクトにイベントが起こったことを伝える」を加えました。表示リストの子オブジェクトにイベントを伝えるメソッドのリファレンスです。Starlingフレームワーク内でEvent.ENTER_FRAMEイベントを送るのに用いられています。

2013.1.20
FN1301006「Starlingフレームワークでカラーマトリクスフィルタを使う」を加えました。Starling 1.3で備わった新たなクラスです。

F-siteで「Starlingフレームワークを用いたStage3Dによる2Dアニメーション」と題する全8回の短期連載を始めました。第2回までの記事が公開されています。

第1回「Starlingフレームワークで書く初めてのアニメーション」
第2回「Starlingフレームワークでスプライトシートを使う」

2013.1.18
FN1301005「Starlingフレームワークでぼかし・ドロップシャドウ・光彩フィルタをかける」を追加しました。

2013.1.16
テクニカルノートに、つぎの2件を追加しました。

FN1301003「Starlingフレームワーク1.3の新しい機能」
FN1301004「StarlingフレームワークのJuggler.tween()メソッド」

2013.1.12
FN1301002「Box2dWebを使うときの名前空間の扱い方」を追加しました。

2013.1.8
F-siteのActionScript: AS3に「ループ処理におけるカウンタ変数の減算と加算 3」を追加しました。

2013.1.2
FN1301001「starling.animation.Tweenクラスのインスタンス作成と再設定」を追加しました。

2012.12.24
テクニカルノートに、つぎの2件を追加しました。

FN1212004「EaselJSのPointクラスの実装を見る」
FN1212005「Function.prototypeプロパティ」

2012.12.12
テクニカルノートに、つぎの2件を追加しました。

FN1212002「論理演算子を使った条件判定」
FN1212003「論理和(||)と論理積(&&)演算子」

2012.12.7
FN1212001「EaselJSのつぎのバージョンにEventDispatcherクラスが加わる」を追加しました。

2012.11.30
FN1211003「EaselJSライブラリの短縮版JSファイルについて」を追加しました。

F-siteのActionScript: AS3に、つぎの2件を追加しました。

「Flash Professional CS6のEaselJSプラグインをアップデートする」
「EaselJSでインスタンスにロールオーバーしたとき指差しカーソルにする」

2012.11.27
FN1211002「EaselJSでマウスのロールオーバーとロールアウトを捉える」を追加しました。

2012.11.9【レジュメ&サンプル公開】
2012年11月8日木曜日に開かれた「CreateJSでHTML5向けのJavaScriptコーディングをしよう」のレジュメとサンプルファイルを公開します。

2012.11.1
FN1211001「EaselJSのMatrix2Dクラスで3次元空間の回転を表現する」を追加しました。

2012.10.19
F-siteのActionScript: AS3に「StarlingフレームワークのTweenとJuggler APIがアップデートされる」を追加しました。

2012.10.18
FN1210005「EaselJSのMatrix2Dクラスを使ったインスタンスの変形」を追加しました。

2012.10.16
FN1210004「EaselJSを使ったインスタンスの傾斜・伸縮・移動」を追加しました。

2012.10.14
FN1210003「Function.lengthプロパティ」を追加しました。

2012.10.4
テクニカルノートに、つぎの2件を追加しました。

FN1210001「EaselJSでスプライトシートからアニメーションをつくる」
FN1210002「Internet Explorer 9でEaselJSのコンテンツが表示されない」

2012.9.27
F-siteのCreateJSに「CreateJS: リッチでインタラクティブな体験をHTML5に」を追加しました。

2012.9.26
F-siteのActionScript に「Flash Professional CS6アップデート2が公開」を追加しました。

2012.9.25
FN1209010「Box2dWebで物理ワールドと剛体の定義を定める」を追加しました。

2012.9.22
FN1209009「SoundJSでSoundInstanceオブジェクトを指定して再生する」を追加しました。

F-siteのCreateJSに「SoundJS.play()メソッドを呼出してつくられるサウンドのインスタンスが消えない」を追加しました。

2012.9.17
テクニカルノートに、つぎの2件を追加しました。

FN1209007「読込んだサウンドファイルをSoundJSで再生する」
FN1209008「EaselJSのオブジェクトを物理演算エンジンのBox2Dで落とす」

2012.9.12
FN1209006「Toolkit for CreateJS 1.1の新機能」を追加しました。

2012.9.10
FN1209005「EaselJSでインスタンスにマスクをかける」を追加しました。

F-siteのCreateJSに「EaselJSに新たに加えられたマスク機能」を追加しました。

2012.9.8
FN1209004「Flash Professional CS6でFlash Player 11.4のSWFを書出す」を追加しました。

2012.9.6
FN1209003「EaselJSのフィルタColorMatrixFilterでイメージをセピア調に変える」を追加しました。

2012.9.3
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第63回は、「Starlingフレームワークでインスタンスのクリックをどう扱うか」です。本連載の最終回です。Starlingフレームワークでインスタンスのクリックをどう扱うのか解説します。インスタンスのクリックは、もっとも基本的なマウスインタラクションです。ところが、この扱いというのが、定義済みActionScript 3.0と勝手が違うだけでなく、思いのほかやっかいだったりします。

2012.9.1
テクニカルノートに、つぎの2件を追加しました。

FN1209001「Starlingフレームワークでフレームレート・使用メモリ・描画回数をモニタリングしたい－ Starling.showStatsプロパティとStarling.showStatsAt()メソッド」
FN1209002「StarlingフレームワークのEventDispatcher.dispatchEventWith()メソッドと新しいイベント配信」

2012.8.24
FN1208002「Webアプリケーションの開発に最先端の技術を採入れるー Flash Player 11.4およびAIR 3.4」を追加しました。

F-siteのActionScript: AS3に「Flash Professional CS6のアップデータが9月に公開」を追加しました。

2012.8.18
F-siteのActionScript: AS3に、つぎの2件を追加しました。

「Flash Professional CS6から書出したスプライトシートはどう使うのか」
「Starlingフレームワーク1.2が公開される」

2012.8.15
FN1208001「TweenJSでインスタンスにトゥイーンアニメーションを加える」を追加しました。

2012.8.10
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第62回は、「Starlingフレームワークで動的に置いたビットマップをドラッグする」です。Starlingフレームワークに[ライブラリ]のビットマップからつくったインスタンスを置き、マウスでドラッグしてみます。どちらも定義済みActionScript 3.0の場合とは少し勝手が違います。

2012.8.1【レジュメ公開】
2012年7月31日火曜日に開かれた「Stage3D勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「Starlingフレームワークの最適化」のレジュメを公開します。詳しい解説や参考サイトはリンクに加えてあります。

2012.7.30【レジュメ&サンプル公開】
2012年7月28日土曜日に開かれたF-siteセミナー「Flash Professional CS6がやって来たヤア！ヤア！ヤア！」にご参加いただきましたみなさま、ありがとうございました。務めました高座「FLAからJSへ～CreateJS中級編」のレジュメとサンプルファイルを公開します。

2012.7.23
F-siteのCreateJSに「CreateJSのクラスが呼出せなくなる？」を追加しました。

2012.7.22
FN1207003「CreateJS Suiteのクラスに名前空間が設定される」を追加しました。

2012.7.20
FN1207002「Tickerクラスでtickイベントを配信する」を追加しました。

2012.7.3
F-siteのActionScript: AS3に「Starlingフレームワークの衝突検出」を追加しました。

2012.7.2
FN1207001「Starlingフレームワークを最適化するためのActionScriptの設定」を追加しました。

2012.6.30
FN1206008「Starlingフレームワークでミップマップを使うかどうか」を追加しました。

2012.6.28
FN1206007「Starlingフレームワークで表示オブジェクトの描画を最適化する」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第61回は、「StarlingフレームワークでStage3Dを試す」です。「Starling」は、Flash Player 11の新しい描画機能「Stage3D」にもとづいてつくられた2次元の描画用フレームワークです。ハードウェアの「GPU」を用いることにより、速くて滑らかな描画ができます。今回は、Starlingフレームワークを用いたスクリプトの組立て方、およびStage3Dへの簡単な描画とアニメーションについてご説明します。

2012.6.26
F-siteのActionScript: AS3に「StarlingフレームワークのDisplayObject.hitTest()メソッド」を追加しました。

2012.6.16
F-siteのActionScript: AS3に「Starling Wikiで紹介されたActionScript 3.0最適化のコツ」を追加しました。

2012.6.15
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第60回は、「【特別編】1/0で考えよう − ビット演算」です。コンピュータは内部的に2進数で演算しています。そのため、数値を2進数で扱えばコンピュータにより近い計算になり、お得なことが少なくありません。その考え方も含めて解説します。

2012.6.10
FN1206006「Flash Professional CS6でFlash Player 11.3のSWFを書出す」を追加しました。

F-siteのActionScript: AS3に、つぎの2件を追加しました。

「Flash Player 11.3とAIR 3.3が正式公開」
「Starlingフレームワークを最適化するSpriteオブジェクトのフラット化とQuadBatchクラス」

2012.6.9
テクニカルノートに、つぎの2件を追加しました。

FN1206004「starling.display.QuadBatchクラス」
FN1206005「ラベルが定められたFrameLabelオブジェクトにイベントリスナーを加える」

2012.6.7
テクニカルノートに、つぎの2件を追加しました。

FN1206002「Starlingフレームワークの最適化 − 状態の変更をできるだけ少なく」
FN1206003「starling.display.Spriteクラス」

2012.6.5
F-siteのサロンに「Flashランタイムのロードマップ更新情報」を追加しました。

2012.6.4
FN1206001「EaselJSでインスタンスをドラッグする勢いで回転を加速する」を追加しました。

Adobe Developer Connectionに、つぎのふたつの記事を寄稿しました。

「ActionScript 3.0のフレームアクションをStarlingフレームワークに移行する」
「Starlingフレームワークのスプライトシートを使ったアニメーション」

F-siteに2012年5月23日水曜日20:30から配信したADC OnAirのまとめ記事「ADC OnAir第2回『Stage3Dを学ぼう！Flashで2Dコンテンツ』」を掲載しました。

2012.5.29
2012年5月25日金曜日に開かれた「Stage3D勉強会」にご参加いただきましたみなさま、ありがとうございました。担当した高座「Starlingフレームワークの基本とマウスイベント」のサンプルファイルと参考リンク案内を公開します。

FN1205003「Starlingフレームワークでビットマップ上のクリックを検知する」を追加しました。

F-siteのActionScript: AS3に「Starlingフレームワークのスクリプトをフレームアクションに書いてみる」を追加しました。

2012.5.24
昨晩配信されたADC OnAir第2回「Stage3Dを学ぼう！Flashで2Dコンテンツ」のコーナー「奈緒のトニカクやってみよう！」コーナーのレジュメを「Toolkit for CreateJSでアニメーションをパブリッシュする」として公開しました。

2012.5.23
ADC OnAir第2回「Stage3Dを学ぼう！Flashで2Dコンテンツ」で使うサンプルファイルと視聴者プレゼント紹介ページを公開しました。

F-siteのActionScript: AS3に「StarlingフレームワークにEventDispatcher.dispatchEventWith()メソッドが加わる」を追加しました。

2012.5.21【レジュメ&サンプル公開】
2012年5月19日土曜日に開かれたF-siteセミナー「Flashユーザーが取り組むHTML5」にご参加いただきましたみなさま、ありがとうございました。担当した高座「新登場！CreateJSとは？」のレジュメとサンプルファイルを公開します。

2012.5.16
FN1205002「PreloadJSで外部画像ファイルの読込みを待つ」を追加しました。

2012.5.10
F-siteのサロンに「Adobe Flash Professional Toolkit for CreateJSについて知りたい方のためのリンク紹介」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第59回は、「インスタンスをクリックした点で回しながらドラッグする」で、前編の第57回「インスタンスをクリックした点で回しながらドラッグする」に続く後編です。今回は、まずマウスでドラッグする位置と向き、および速さによって回転に加速を与えます。そして仕上げは、マウスボタンを放すと、慣性で減速しながらやがて止まるようにします。

2012.5.2
FN1205001「EaselJSでインスタンスをクリックした座標で回しながらドラッグする」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第58回は、「【特別編】ビットマップのキャッシュとオブジェクトの使い回し」です。ふたつのお題を採上げました。第1は、アニメーションを滑らかに再生するためのビットマップイメージの扱いです。そして第2は、オブジェクトを使い回すこと、いわばエコなスクリプティングの勧めです。

2012.4.19
テクニカルノートに、つぎの2件を追加しました。

FN1204008「StarlingルートクラスからStarlingオブジェクトを参照したい－ Starling.currentプロパティ」
FN1204009「Starlingフレームワークでフレームレートや使用メモリをモニタリングしたい－ Starling.showStatsプロパティ」

英語blogのJActionScriptersに「Starling.showStats property」を追加しました。

2012.4.13
FN1204007「BitmapData.drawWithQuality()メソッド」を追加しました。

2012.4.11
テクニカルノートに、つぎの2件を追加しました。

FN1204005「EaselJSで外部ビットマップファイルを読込んで回す」
FN1204006「クリックしたインスタンスの外でマウスボタンを放したときのイベント」

英語blogのJActionScriptersに「Click in the Starling Framework」を追加しました。

2012.4.6
FN1204004「Starlingフレームワークで表示オブジェクトと座標の重なりを調べる」を追加しました。

2012.4.4
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第57回は、「インスタンスをクリックした点で回しながらドラッグする」です。どこかで見たことのあるFlashコンテンツの基本的な動きを次回との2回に分けて解説します。前編となる今回は、インスタンスをマウスでプレスしたら、その点を中心に回します。行列を使った座標の変換がお題です。後編では、マウスの動きに応じて、インスタンスが回る速さを変えます。それには、ベクトルの外積を使います。

FN1204003「Starlingフレームワークでインスタンスをクリックする」を追加しました。

2012.4.2
FN1204002「starling.events.Touchクラスと座標の変換」を追加しました。

2012.4.1
FN1204001「Starlingフレームワークでインスタンスをドラッグ&ドロップする」を追加しました。

2012.3.29
FN1203008「Stage.mouseLockとMouseEvent.movementX/MouseEvent.movementYプロパティ」を追加しました。

2012.3.25
FN1203007「Starlingフレームワークで表示オブジェクトのイベントリスナーをすべて削除するメソッド」を追加しました。

2012.3.23
FN1203006「JavaScriptでオブジェクトに設定した関数のスコープ」を追加しました。

2012.3.22
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第56回は、「【特別編】配列エレメントすべてをforループで扱う」です。配列エレメントすべてをforループでいかに速く扱うかがお題です。Vectorクラスで使えるテクニックは、文法の違いを除いて、ほぼ配列でも通用します。しかし逆に、配列にはVectorクラスとは違ったコツがあります。

FN1203005「EaselJSのマウスクリックとドラッグ&ドロップ」を追加しました。

2012.3.19
FN1203004「StarlingフレームワークでつくったテクスチャのボールをBox2Dで弾ませる」を追加しました。

2012.3.11
テクニカルノートに、つぎの2件を追加しました。

FN1203002「MatrixTransformerクラスによりインスタンスを任意の座標で回す」
FN1203003「TLFTextFieldのテキストの一部を指定したTextFormatが設定できない」

2012.3.9
FN1203001「EaselJSで描いた星形を回す」を追加しました。

2012.3.6
F-siteのActionScript: AS3に「45度回転した矩形領域に対するクリック座標の判定」を追加しました。

2012.2.27【レジュメ&サンプル公開】
2012年2月25日土曜日に開かれた「ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す」にご参加いただきましたみなさま、ありがとうございました。[応用編]のレジュメとサンプル(FLA)ファイルを公開します。[基礎編]については、F-siteセミナー「ActionScriptでの最速を求める」の資料をご覧ください。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第55回は、「平面上における三角形の内側か外側かを外積で調べる」です。ベクトルの外積を使ったサンプルをつくります。三角形で分割された領域があるとき、ある座標を与えて、それがどの三角形に含まれるのかを調べます。また、座標などの多くの数値を扱うとき、スクリプトをどのように組立てたらよいかも考えてみましょう。

2012.2.21
FN1202006「Starlingフレームワークで物理演算エンジンBox2Dを使う」を追加しました。

2012.2.15
テクニカルノートに、つぎの2件を追加しました。

FN1202004「StarlingフレームワークのTweenクラスを使ったアニメーション」
FN1202005「EaselJSで図形を描く」

2012.2.13
テクニカルノートに、つぎの2件を追加しました。

FN1202002「<canvas>要素で定めた領域に図形を描く」
FN1202003「Canvasでパスをつくる－ beginPath()/closePath()メソッド」

2011.2.8
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第54回は、「【特別編】配列の処理をVectorオブジェクトで最適化する」です。このたび技術評論社より発売される拙著『ActionScript 3.0パフォーマンスチューニング』から【特別編】としていくつかのネタを紹介します。初めに採上げるのがVectorクラスです。配列を使った処理をVectorオブジェクトに置換えるとき、ちょっとした工夫が要る場合もあります。

2012.2.8
Flash FN1202001「StarlingフレームワークのQuadインスタンスをグラデーションで塗る」を追加しました。

2012.2.6【レジュメ&サンプル公開】
2012年2月4日土曜日に開かれたF-siteセミナー「みんなのFlash効率化大作戦」にご参加いただきましたみなさま、ありがとうございました。担当した高座「ActionScriptでの最速を求める」のレジュメとサンプル(FLA)ファイルを公開します。

2012.2.1【ActionScript 3.0セミナー】
2012年2月25日土曜日に「ActionScript 3.0 パフォーマンスチューニング－速い、軽い、うまいスクリプティングを目指す」というお題で高座を務めることになりました。スクリプトを書くのは、いわば上司としてFlash Playerに仕事を命じることです。Flash Playerの得意・不得意を知り、どうすれば速くはかどるのか知っておくことは、できる上司になるうえで大切です。

【日　　時】2012年2月25日土曜日
・[基礎編] 13:30～14:30 (開場13:00)
・[応用編] 15:00～16:30 (開場14:30)
【参加費用】無料 (事前登録制)
【場　　所】社団法人日本グラフィックサービス工業会セミナールーム
【定　　員】各回40名

2012.1.29
Flash FN1201007「starling.display.Quadクラス」を追加しました。

2012.1.25
F-siteのActionScript: AS3に「Starlingはじめました」を追加しました。

2012.1.23
Flash FN1201005「Starlingフレームワークで物理演算エンジンNapeを使う」を追加しました。

2012.1.21
Flash FN1201006「starling.textures.Textureクラス」を追加しました。

2012.1.19
F-siteのActionScript: AS3に「テキストが入ったAIファイルを読込むと − パンドラの箱」を追加しました。

2011.1.18
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第53回は、「座標にもっとも近い線分上の点を内積で求める」です。ベクトルの「内積」をお題にして新たなムービーをつくります。ステージに階段状の折れ線を描き、インスタンスをマウスでその線に沿ってのみドラッグできるようにします。マウス座標をどのようにして折れ線上の点に投影して、インスタンスの動きを制限するかが課題です。

2011.4.18
テクニカルノートに、つぎの3件を追加しました。

FN1201002「Starlingフレームワークをインストールする」
FN1201003「Starlingフレームワークを使う」
FN1201004「starling.core.Starlingクラス」

2012.1.5【ActionScript 3.0セミナー】
2012年2月4日土曜日開催のF-siteセミナーは、「みんなのFlash効率化大作戦」と題し、JSFL、ワークスペース、ActionScriptと3つの切り口から、効率アップの糸口を掴むためのセミナーをお届けします。

野中は[demo4]「ActionScriptでの最速を求める」を務めます。単にどう書くと速いというだけでなく、それがFlash Playerにとってどういう仕事になっているのかという理屈の説明をしていきます。>>お品書きと口上

【日　　時】2012年2月4日土曜日13:15-17:00
【参加費用】1,000円
【場　　所】国立オリンピック記念青少年総合センターセンター棟1F-102室(小田急線参宮橋駅徒歩7分)
【募集人数】80名
【予定内容】
［demo1］「JSFL入門から上達への道」ロクナナ加茂雄亮氏(30分)
［demo2］「オレオレJSFL自慢！ JSFL友の会」加茂雄亮氏/道家陽介氏/小野田智氏/前田タスク氏(45分)
［demo3］「Flashワークスペース大比較」松本慶一郎氏/蔵下雅之氏/藤村ケンジ氏/沖良矢氏(45分)
［demo4］「ActionScriptでの最速を求める」野中文雄(40分)

2012.1.4
F-siteのActionScript: AS3に「Text Layout Framework(TLF)で悩みがちなこと」を追加しました。

2012.1.3
Flash FN1201001「SafeLoaderクラスを使う」を追加しました。

2011.12.23
Flash FN1112002「シンボルにクラスを定めるときのヒント」を追加しました。

2011.12.22
Flash FN1112001「2次元平面で2直線の交点を求める」を追加しました。

2011.12.18
F-siteのActionScript: AS3に「間違いだらけ(？)のMatrix3Dクラスのドキュメント」を追加しました。

2011.12.15
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第52回は、「ベクトルの外積で回転の軸を定める」です。外積はふたつのベクトルのどちらにも、垂直なベクトルを求める計算です。ふたつのベクトルで、ひとつの面が定められます。したがって、ベクトルの外積は、面に垂直なベクトルを導くことだともいえます。

2011.11.21
Flash FN1111005「Flash PlayerとSWFのバージョンを調べる」を追加しました。

2011.11.17
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第51回は、「ベクトルの内積で面の向きを調べる」です。これから数回にわたって「ベクトルの内積・外積と三角関数」を扱います。少し凝った表現、とくに回そうとしたとき立ちはだかる知識です。まず使い方をご紹介し、数学的な説明は後から加えるかたちをとりました。

2011.11.15
Flash FN1111004「2進数のビット演算を試してみる－奇数と偶数の扱い」を追加しました。

2011.11.11
Flash FN1111003「たくさんのインスタンスのアニメーションをビットマップでキャッシュする」を追加しました。

2011.11.10
Flash FN1111002「オブジェクトを使い回す」を追加しました。

2011.11.2
Flash FN1111001「Flash CS5/CS5.5でFlash Player 11のSWFを書出す」を追加しました。

2011.11.1
サイトを開設して満10年になりました。ご愛顧に感謝いたします。

2011.10.31
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第50回は、「立方体の4面にテクスチャを貼って上下左右に回す」です。前回は、立方体の前後左右4面をビットマップで包み、水平に回しました。4面の塗り順については、裏返った面を消す「カリング」で解決しました。今回は垂直の回転も加えますので、塗り順に正面から取組みます。

2011.10.28
Flash FN1110008「マウスイベントMouseEvent.MOUSE_OVERとMouseEvent.ROLL_OVERの違い」を追加しました。

F-siteのActionScript: AS3に「外部から読込んだSWFをメモリから消し去るには」を追加しました。

2011.10.19
Adobe Developer Cconnection Community Loungeに「地味すぎて伝わらないFlash Player 11の新機能」を投稿しました。Flash Player 11について最近書いたF-siteの記事や私のサイトのリファレンス情報をまとめた記事です。

2011.10.18
Flash FN1110007「System.pauseForGCIfCollectionImminent()メソッド」を追加しました。Flash Player 11で加わったガベージコレクションを制御するメソッドです。

2011.10.15
Flash FN1110006「ByteArrayオブジェクトからサウンドデータをSoundオブジェクトに読込むメソッド」を追加しました。Flash Player 11でSoundクラスに加わったふたつのメソッドです。

2011.10.12
Flash FN1110005「Vector3Dオブジェクトの座標値をコピーや設定するメソッド」を追加しました。Flash Player 11でVector3Dクラスに加わったふたつのメソッドです。

2011.10.11
Flash FN1110004「配列を偏りなくランダムに並べ替える」を追加しました。

2011.10.9
F-siteのActionScript: AS3に「Flash Player 11でMovieClipクラスに唯一備わったプロパティMovieClip.isPlaying」を追加しました。

Flash FN1110003「MovieClip.isPlayingプロパティ」にリファレンスとしてより詳しい解説を書きました。

2011.10.6
Flash FN1110002「Matrix3Dオブジェクトの行列データをコピーするメソッド」を追加しました。Flash Player 11で備わった新たなメソッド群です。

2011.10.5
Flash FN1110001「DisplayObjectContainer.removeChildren()メソッド」を追加しました。

F-siteのActionScript: AS3に「Flash Player 11でビットマップのサイズ制限がなくなる」を追加しました。

2011.10.3
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第49回は、「テクスチャを立方体の4面に貼る4面に貼る」です。前回は、水平に回る正方形の平面にテクスチャマッピングしました。けれど、スクリプトの仕組みとしては、とくに平面にかぎってはいません。そこで今回は、立方体の前後左右4面をビットマップで包み、水平に回してみます。

2011.9.26
Flash FN1109002「数値の切捨てや四捨五入の最適化」を追加しました。

2011.9.23
F-siteのActionScript: AS3に「Flash CS5に潜む謎のクラスWorld II − 内緒の物理エンジン」を追加しました。

2011.9.22
F-siteのActionScript: AS3に「三角関数で座標を回転するふたつの計算方法」を追加しました。

また、この記事の英語版「Calculating coordinates to rotate」をJActionScriptersに掲載しました。

2011.8.15
Flash FN1109001「Graphics.drawPath()メソッドでパスの多いかたちを描く」を追加しました。

2011.9.13
英語blogのJActionScriptersに「Comparing Graphics.drawPath() method with traditional Graphics API」を追加しました。

2011.9.4
F-siteのActionScript: AS3に「Dictionaryオブジェクトのキーにプリミティブ値を指定した場合」を追加しました。

2011.8.28
F-siteのActionScript: AS3に「矢印キーでインスタンスを移動させる」を追加しました。

2011.8.26
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第48回は、「テクスチャに遠近法を適用する－ uvt座標の指定」です。Graphics.drawTriangles()メソッドの第3引数には奥行きのt軸を加えたuvt座標が渡せます。今回は、このuvt座標により、遠近法を適用したテクスチャマッピングに挑戦します。

2011.8.7
Flash FN1108001「TLFテキストが配置されたメインタイムラインの初期化」を追加しました。

2011.7.31
F-siteのActionScript: AS3に、つぎの2件を追加しました。

「Flash CS5に潜む謎のクラスWorld」
「ガベージコレクションを働かせる裏技」

2011.7.29
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第47回は、「遠近法を適用した3次元空間座標へのテクスチャマッピング」です。3次元空間座標を2次元平面に透視投影して、ビットマップの面を貼ってみます。第43回の3次元空間で回転する正方形の座標に、テクスチャマッピングします。

2011.7.26
Flash FN1103001「予め配置したインスタンスの存在しないフレームに移動しても参照が消えない」の「対処法」[2]に、Flash Player 10.2に対応するための大幅な改訂を加えました。

F-siteのActionScript: AS3に「TLFテキストを含むインスタンスがステージの表示リストから除かれるとき」を追加しました。

2011.7.12
Flash FN1107003「Eventのサブクラスでclone()とtoString()メソッドをオーバーライドする」を追加しました。

2011.7.5
Flash FN1107002「ドット演算子と配列アクセス演算子」を追加しました。

2011.7.1
Flash FN1107001「[シンボルプロパティ]のリンケージで[1フレーム目に書き出し]とは」を追加しました。

2011.6.29
Flash FN1106001「[ライブラリ]のビットマップを3次元空間で水平に回す」を追加しました。

2011.6.10
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第46回は、「分割した三角形にビットマップを変形して塗る」です。前回は、Graphics.drawTriangles()メソッドにより、三角形に分けた領域をビットマップで塗りました。このいわゆる「テクスチャマッピング」について、さらに解説を加えます。

2011.5.29
Flash FN1105001「角度のように数値を循環させる」を追加しました。

2011.5.20
F-siteのActionScript: AS3に「ふたつの数値の最大値・最小値を得るにはMathクラスより条件演算子?:の方が速い」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第45回は、「領域をビットマップで塗る－テクスチャマッピング」です。今回から、定められた領域をビットマップで塗りつぶすお題に取りかかります。目指すは、3次元空間から2次元平面に透視投影された面に、素材となるビットマップを貼りつけることです。素材を「テクスチャ」と呼び、貼りつけは「マッピング」といいます。この「テクスチャマッピング」を学びましょう。

2011.4.30
F-siteのActionScript: AS3に、つぎの2件を追加しました。

「Text Layout Framework(TLF)でハマらないために」
「距離はPointやVector3DクラスのメソッドよりMath.sqrt()と三平方の定理で求める方が速い」

2011.4.18
テクニカルノートに、つぎの2件を追加しました。

Flash FN1104001「Vector3D.angleBetween()メソッドの戻り値がNaNになる」
Flash FN1104003「TLFテキストのある外部SWFを読込むとその中のオブジェクトにアクセスできない」

2011.4.12
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第44回は、「ワイヤーフレームの立方体を回す」です。前回は、Vector3Dインスタンスで3次元空間における正方形の4頂点座標をつくり、y軸で水平に回したうえで、2次元平面の座標に透視投影したワイヤーフレームを描きました。今回のお題は、頂点座標を8つに増やして立方体を回します。

2011.3.7
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第43回は、「Vector3Dオブジェクトの座標に遠近法を適用する」です。前回は、3次元空間座標のVector3Dインスタンスで正方形の4頂点をつくって、y軸で水平に回しました。このワイヤーフレームに遠近法の投影(透視投影)を加え、2次元平面の座標に引き写すのが今回のお題です。

2011年3月5日に開かれた東京ひよこの会第1回勉強会「ボタンあれこれ」でご紹介したサンプルファイルとレジュメを公開します。

2011.2.14
F-siteのActionScript: AS3に「キーボードのキー操作をVectorオブジェクトで扱う」を追加しました。

2011.2.13
F-siteのActionScript: AS3に「Vectorインスタンスには長さを定めた方がよい」を追加しました。

2011.2.9
テクニカルノートに、つぎの2件を追加しました。

Flash FN1102002「MouseCursorDataクラス」
Flash FN1102003「Mouse.registerCursor()/Mouse.unregisterCursor()メソッド」を追加しました。

F-siteのActionScript: AS3に「条件演算子?:はいつ使うとよいか」を追加しました。

2011.2.5
Flash FN1102001「条件分岐をポリモーフィズムに置換える」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第42回は、「TextVector3Dクラスの3次元空間座標とインスタンスへの描画」です。新たにVector3Dクラスを学びます。名前が示すとおり、このクラスは3次元空間座標(位置ベクトル)を扱います。初めのお題は例によって、四角形を3次元空間で水平に回すことです。

2011.1.27
F-siteのActionScript: AS3に「配列を初期化するには」を追加しました。

2011.1.22
F-siteのActionScript: AS3に「3次元回転の軸をベクトルの外積で求める」を追加しました。

2011.1.20
F-siteのActionScript: AS3に「直線で閉じた図形を描く」を追加しました。

2011.1.14
テクニカルノートに、つぎの2件を追加しました。

Flash FN1101001「Event.stopPropagation()とEvent.stopImmediatePropagation()メソッドの違い」
Flash FN1101002「DisplayObject.removedとDisplayObject.removedFromStageイベントの違い」

2011.1.13
F-siteのActionScript: AS3に「ふたつの配列を連結する」を追加しました。

同様の内容を英語でJActionScriptersに「Merging two arrays」として追加しました。

2010.12.28
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第41回は、「Text Layout Frameworkへの外部XMLデータの読込みとユーザーインタラクション」です。Text Layout Framework Markup形式のXMLデータを、外部ファイルから読込みます。そのうえで、テキストの選択や編集など、ユーザーインタラクションを加えてみます。

2010.12.26
Flash FN1012002「予め配置したTLFテキストのインスタンスにTextLayoutFormatが適用できない」を追加しました。

2010.12.24
F-siteのActionScript: AS3に「キーボードのキー操作を扱うふたつの手法」を追加しました。

2010.12.17
F-siteのActionScript: AS3に「全角(2バイト)と半角(1バイト)を区別したバイト数の計算」を追加しました。

2010.12.14
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第40回は、「Text Layout Frameworkでテキストコンテンツを表示する」です。Text Layout Frameworkは「高度なテキスト編集およびレイアウト機能」を提供します。このフレームワークは「ActionScript 3.0で記述された独立したコンポーネントライブラリ」です。ライブラリの各クラスは、テキストの構造とフォーマットやその表示、さらに編集操作などの役割を、それぞれ分けて担っています。これらのクラスを使ったテキストコンテンツの扱い方について解説します。

F-siteのActionScript: AS3に「ハッピーマンデーを求める」を追加しました。

2010.12.11
F-siteのActionScript: AS3につぎの2件を追加しました。
「データ型の変換はキャストよりas演算子が速い」
「文字列の検索・置換は正規表現よりStringクラスのメソッドを使う方が速い」

2010.12.8
F-siteのActionScript: AS3に「XORマジック」を追加しました。

2010.12.6
Flash FN1012001「Model-View-Controller (MVC)」を追加しました。

F-siteのActionScript: AS3に「パフォーマンス向上のヒント」を追加しました。

2010.12.1【レジュメ&サンプル公開】
2010年11月30日火曜日に開かれた「ActionScript 3.0の3次元表現と数学の基礎」にご参加いただきましたみなさま、ありがとうございました。高座のレジュメとサンプル(FLA)ファイルを公開します。レジュメには補足解説として、拙著『ActionScript 3.0による三次元表現ガイドブック』よりPDFを抜粋してリンクしました。

2010.11.20
米国Adobe Flash Developer Centerに「Working with Text Layout Framework objects and classes in Flash」を寄稿しました。日本サイトの記事「ActionScript 3.0でFlash Professional CS5の Text Layout Frameworkを使う」をもとに英語化したものです。

2010.11.14
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第39回は、「TLFTextFieldクラスを使う」です。今回から、Flash Professional CS5で加わったテキストレイアウトフレームワーク(Text Layout Framework)について解説します。まずは、TLFTextFieldクラスです。これまでのTextFieldクラスと基本的な扱いは同じものの、より細かな設定ができます。

2010.11.5
テクニカルノートに、つぎの2件を追加しました。
Flash FN1011002「予め配置したMovieClipのリスナーがインスタンスのないフレームに移動してもイベントを受取る」
Flash FN1011003「Flash Player 10で予め配置したMovieClipのないフレームに移動したときイベントリスナーがすぐに消える」

2010.11.4【ActionScript 3.0セミナー】
2010年11月30日火曜日に「ActionScript 3.0の3次元表現と数学の基礎」というお題で高座を務めることになりました。ActionScript 3.0の基礎を学んだ方を対象に、3次元空間の扱いで重要となる数学の基礎と、それがどのようにActionScript 3.0の3次元表現で使われるのかを解説します。

【日　　時】2010年11月30日火曜日
・第1回15:30～17:00 (開場15:00)
・第2回18:30～20:00 (開場18:00)
　*各回の内容は同じ
【場　　所】社団法人日本グラフィックサービス工業会セミナールーム
【参加費用】無料 (事前登録制)
【定　　員】各回40名

2010.11.1
Flash FN1011001「Observer(オブザーバー)パターン」を追加しました。

2010.10.30
F-siteのActionScript: AS3に「Observerパターンのサンプルプログラム」を追加しました。

2010.10.13
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第38回は、「z座標値に応じて重ね順を変える」です。面を4つに増やし、矩形の画像で四方を囲んで、最後は上下左右に回します。前回に続き、面の重ね順をどう決めるかが課題です。

2010.10.12
Flash FN1010002「Iterator(イテレータ)パターン」を追加しました。

F-siteのActionScript: AS3に「連結リストとVectorによるエレメントの追加と削除」を追加しました。

2010.10.6
Flash FN1010001「連結リスト(linked list)」を追加しました。

米国Adobe Flash Developer Centerに、つぎの7本のシリーズ記事を寄稿しました。日本サイトの記事「ActionScript 3.0から見るFlash Professional CS5」をもとに英語化したものです。

2010.10.1
F-siteのActionScript: AS3に「インスタンスをドラッグして回すクラス定義」を追加しました。

2010.9.30
テクニカルノートに、つぎの2件を追加しました。
Flash FN1009002「力のモーメント」
Flash FN1009003「インスタンスをドラッグで回して動かす」

2010.9.15
Flash FN1009001「@属性識別演算子」を追加しました。

2010.9.14
Adobeデベロッパーセンターに「ActionScript 3.0によるFlash Professional CS5のText Layout Frameworkとのインタラクション」を寄稿しました。

F-siteのActionScript: AS3に「ビデオで学ぶActionScript 3.0による3次元表現」を追加しました。

2010.9.2
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第37回は、「インスタンスの回転と重ね順」です。ふたつの面を前後に置いて、y軸で水平に回してみます。インスタンスの数が増えると、座標の変換だけでなく、その重ね順を考えなければならなりません。やり方はさまざまで、厳密に処理するほど負荷も増えやすくなります。いかに単純に扱えるように設計するかが大切です。

2010.8.24
Flash FN1008002「インスタンスのy軸における回転角の値の範囲」を追加しました。

2010.8.22【セミナー映像アップ】
2010年8月2日に開かれたセミナーイベント「ActionScript 3.0による三次元表現 in Apple Store, Ginza」のビデオが公開されました。サンプルファイルもダウンロードできます。

2010.8.13
Flash FN1008001「3次元空間における面の向きを調べる」を追加しました。

2010.8.10
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第36回は、「Matrix3Dクラスの後から加える変換」です。インスタンスに加わる3次元座標変換の中身を明らかにし、後から加えるappendのついた変換のメソッドを試します。

Adobeデベロッパーセンターに「ActionScript 3.0によるText Layout Frameworkを使ったリキッドレイアウトの例」を寄稿しました。

2010.8.4
F-siteのActionScript: AS3につぎの2件を追加しました。
「変数には初期値を与える」
「ラジオボタンのように複数の中のひとつだけ設定値を変える」

2010.7.21
Flash FN1007002「リスナー関数が使う値を外から指定する」を追加しました。

2010.7.11
Flash FN1007001「Stage.scaleModeプロパティ」を追加しました。

2010.7.8
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第35回は、「Matrix3Dクラスによる座標変換」です。3次元空間における(平行)移動や回転および伸縮を、Matrix3Dクラスで行ってみます。座標変換の性質と特徴について解説します。

2010.7.7【ActionScript 3.0セミナー】
2007年から毎年開催のロクナナワークショップ「Summer Campシリーズ」。4年目となる今年は、ActionScript 3.0プログラマーの方々を対象に「 3D表現を身につけよう！」をテーマに、2つのセミナーイベントを開催します。

	【日　　時】2010年8月2日月曜日18:30～20:00 (開場18:15) 【場　　所】Apple Store, Ginza 3Fシアタールーム【参加費用】無料【定　　員】180名 (座席数84) 【出　　演】野中文雄/池田泰延 (出演順)
Flash CS4から搭載されたZ座標・奥行き方向の表現や、テクスチャマッピングなど、3Dコンテンツ制作に必要なコマンド類は、知っているだけで大きく表現の幅が広がります。見た目のインパクトも大きく、制作物のレベルが一気にあがります。

【日　　時】2010年8月6日金曜日11:00～18:00 (開場10:45)
【場　　所】関東ITソフトウェア健保会館 Conference A
【参加費用】9,800円 (書籍なし)/12,800円 (書籍付き)
【定　　員】30名
【出　　演】野中文雄

ActionScript 3.0の基本は学ばれた方を対象として、Flash Player 10/Flash CS4 Professionalから備わった3D空間と座標の扱いについて解説します。

3D表現について学ぼうとすると、ベクトルや行列を始め、馴染みのない用語や考え方に戸惑うかもしれません。けれども、基本さえ理解できれば、自分でスクリプトを組立てることは決して難しくはありません。本講座は、3D空間のスクリプティングについての基礎固めをします。

2010.6.24
Flash FN1006004「Stage.resizeイベント」を追加しました。

2010.6.23
Flash FN1006003「外部XMLファイルからXMLデータを取出す」を追加しました。

2010.6.20
Adobeデベロッパーセンターに「ActionScript 3.0でFlash Professional CS5のText Layout Frameworkを使う」を寄稿しました。

2010.6.19
Flash FN1006002「エレメントをもったVectorインスタンスの生成」を追加しました。

2010.6.8
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第34回は、「3次元空間における回転」です。3次元空間でインスタンスを回すお題です。インスタンスを3次元空間で操作するやり方はいくつかあります。手軽なプロパティから順に試しましょう。

2010.6.1
Flash FN1006001「importディレクティブ(指示子)」を追加しました。

Adobeデベロッパーセンターに「ActionScript 3.0から見るFlash Professional CS5」を寄稿しました。

2010.5.27
Flash FN1005003「[ライブラリ]のビットマップに自動設定したクラスに渡す引数」を追加しました。

2010.5.24
Flash FN1005002「flashx.textLayoutパッケージのクラスを使うとコンストラクタからStageにアクセスできない」を追加しました。

F-F-siteのActionScript: AS3につぎの2件を追加しました。
「Flash CS5の新機能とPlayerのバージョン」
「コードヒントとimport宣言」

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第33回は、「遠近法の投影」です。今回から、Flash Player 10で備わった3次元空間の扱いに入ります。まずは、遠近法の捉え方について解説します。

2010.5.12
F-siteのActionScript: AS3に「DisplayObjectインスタンスの削除とガベージコレクション」を追加しました。

2010.5.5
Flash FN1005001「Matrix3D()コンストラクタ」を追加しました。

2010.5.3
F-siteのActionScript: AS3に「ループ処理におけるカウンタ変数の減算と加算 2」を追加しました。

同様の内容を英語でJActionScriptersに「Decrement versus Increment in Loop 2」として追加しました。

2010.4.15
F-siteのActionScript: AS3に「Vectorクラスの地味な追加機能」を追加しました。

併せて、Flash FN0902001「Vectorクラス」を改訂しました。

2010.4.12
F-siteのActionScript: AS3に「ループ処理におけるカウンタ変数の減算と加算」を追加しました。

2010.4.7
F-siteのActionScript: AS3につぎの2件を追加しました。
「DisplayObjectインスタンスの種類と使用メモリ」
「Vectorクラス対Arrayクラスの処理速度比較」

2010.4.6
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第32回は、「Dictionaryクラスを使う」です。Dictionaryクラスには、独自のメソッドとしてコンストラクタしか備わっていません。しかも、[ヘルプ]を読んでも、何をするクラスなのか要領を得ないのです。しかし、実はかなり使いでのあるクラスです。

2010.4.4
F-siteのActionScript: AS3に「Vector3Dの四元数表現」を追加しました。

同様の内容を英語でJActionScriptersに「Quaternion notation of Vector3D」として追加しました。

2010.4.1
テクニカルノートに、つぎの2件を追加しました。
Flash FN1004001「Matrix3D.rawDataプロパティ」
Flash FN1004002「Matrix3D.transpose()メソッド」

2010.3.31
F-siteのActionScript: AS3に「Dateインスタンスに設定した月が1増える」を追加しました。

2010.3.19
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第31回は、「マウスのロールオーバー」です。前回に続き、マウスイベントの扱いをお題にします。とくにマウスのロールオーバーをネタに、複数のインスタンスを含んだマウスイベントの捉え方について解説します。

2010.3.12
Flash FN1003002「タイムラインに置いたMovieClipからフレーム移動するとrootやstageが参照できない」を追加しました。

2010.3.7
Flash FN1003001「Matrix3D.rawDataプロパティ」を追加しました。

2010.2.27
Flash FN1002002「[ステージのインスタンスを自動宣言] －タイムラインのインスタンスの変数宣言」を追加しました。

2010.2.26
Flash FN1002001「2次元平面で座標が三角形の内側にあるかを調べる」を追加しました。

2010.2.12

2010年1月26日火曜日に催されたイベント「wonderflがやってきた!!〜『ブラウザで無料ではじめるActionScript 3.0』刊行記念トークセッション〜」にご参加いただきましたみなさま、ありがとうございました。イベントのビデオが前編および後編に分けて公開されました。

2010.2.1
英語blogのJActionScriptersに「Calculation in the Utils3D.projectVectors() method」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第30回は、「マウスイベントとインスタンスの兄弟・親子の関係」です。前回に続き、マウスとのインタラクションを扱います。今回のお題は、マウスのイベントです。マウスイベントはとくに複数のインスタンスが絡むので、気をつけなければならないことがいくつかあります。

2010.1.31
Flash FN1001001「Utils3D.projectVectors()メソッド」を追加しました。

2010.1.8【ActionScript 3.0セミナー】
wonderflがやってきた!!
〜『ブラウザで無料ではじめるActionScript 3.0』刊行記念トークセッション〜
面白法人カヤックが提供するサービス「wonderfl build flash online」を使ってActionScriptを学ぶ『ブラウザで無料ではじめるActionScript 3.0—It’s a wonderfl world—』の出版を記念し、執筆者陣によるwonderflのデモ＆トークセッションを行います。

【日　　時】2010年1月26日火曜日19:00～20:00 (開場18:30)
【場　　所】Apple Store, Ginza 3Fシアタールーム
【参加費用】無料
【席　　数】84名
【出　　演】大塚雅和(面白法人カヤック)/道家陽介(面白法人カヤック)/池田泰延/梅原宗士/大重美幸/小林陽介/高輪知明/野中文雄/吉川佳一

2009.12.18

ワークスコーポレーションより共著『ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―』が12月18日に発売されます。共著者は、面白法人カヤックのみなさんを始め、大重美幸さん、高輪知明さん、イズカワタカノブさん、村山健さん、梅原宗士さん、小林陽介さん、池田泰延さん、吉川佳一さん、小林茂さんら豪華執筆陣です。

Flash FN0912002「Dictionary()コンストラクタ」を追加しました。

gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第29回は、「ボタンのコントロール」です。今回から、マウスの操作の扱いについて解説します。まずは、基本となるボタンのコントロールです。本稿では基本的にボタンシンボルは使いません。ボタンもMovieClipシンボルで作成します。

2009.12.6
Flash FN0912001「インスタンスをy軸で回転した角度が正しく設定されない」を追加しました。

2009.12.4
F-siteのActionScript: AS3に「Dictionaryクラスを使ってみる」を追加しました。

2008.12.3

翔泳社より共著『ActionScript 3.0辞典 [FlashPlayer 10/9対応]』を11月16日に発売しました。共著者は、伊藤のりゆき(NORI)さん、大重美幸さん、植木友浩さん、林拓也さんという豪華な顔ぶれです。

2009.11.30
テクニカルノートに、つぎの2件を追加しました。
Flash FN0911001「DisplayObject.rotationX/rotationY/rotationZプロパティ」
Flash FN0911002「角度の値を換算して一定範囲に収める」

2009.11.14
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第28回は、「正規表現で文字列を扱う」です。正規表現は、RegExpクラスを使って処理します。このクラスが扱うのは、文字列のパターンです。そのパターンの表現は多彩で、奥が深いものです。本稿では、いわばその入り口を紹介します。

2009.10.31
F-siteのActionScript: AS3に「TextAreaコンポーネントのテキストを選択できなくする」を追加しました。

2009.10.30
Flash FN0910001「Transformクラスのオブジェクトへのアクセス」を追加しました。

2009.10.29
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第27回は、「XMLデータを扱う」です。XMLデータは、外部ファイルとしてもよく用いられます。ActionScript 3.0におけるXMLの仕様は、「ECMAScript for XML(E4X)」に準拠します。

英語blogのJActionScriptersに「Three types of transformation objects in the Transform class」を追加しました。

2009.9.30
Flash FN0909001「クラス定義にプライベートなクラスが複数あるとコンパイルできない」を追加しました。

オンデマンドのビデオによる情報ソース「Adobe TV」の「Todoketai Channel - 3分でわかる！ActionScript 3.0新機能」というシリーズで、ゲスト講師を担当しました。現在PART-4までが配信されています。

英語blogのJActionScriptersに、つぎの2件を追加しました。
「Calculation of focalLength」
「"Private" classes might cause a compile error」
上記のノートは、後者の記事の日本語版になります。

2009.9.3
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第26回は、「外部データの読込み待ち」です。外部からロードしたデータを操作するために、その読込み待ちの処理を作成します。

2009.8.27
FN0608004「EventDispatcher.addEventListener()メソッド」をFlash CS4 Professionalの[Help]にもとづき、体裁を含めて大幅に改定しました。

2009.8.13
F-siteのActionScript: AS3に「DataGridColumn.cellRendererプロパティに文字列で値を指定する」を追加しました。

2009.8.10
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第25回は、「サウンドと画像の外部読込み」です。Flashムービーで使われるサウンドやMovieClipシンボル、画像、テキストデータといった素材は、外部ファイルにしてあとから読込むようにすれば、起動するためのSWFファイルはサイズを小さくできます。

英語blogのJActionScriptersに「Setting String to DataGridColumn.cellRenderer property」を追加しました。

2009.8.9
Flash FN0908001「ComboBoxコンポーネントの項目を削除してもドロップダウンリストの大きさが変わらない」を追加しました。

2009.7.28
英語blogのJActionScriptersに「Resizing the drop down list of ComboBox when removeItem() is called」を追加しました。日本語版も追って作成する予定です。

2009.7.24
Flash FN0907001「IKArmature.registerElements()メソッド」を追加しました。

2009.6.30
Flash FN0906001「Vector3D.project()メソッド」を追加しました。

2009.6.27【セミナー資料アップ】

2009年6月19日金曜日に催された67WSイベント「Try the ActionScript 3D/のFlash CS4で学ぶ3次元表現」にご参加いただきましたみなさま、ありがとうございました。イベントの内容をもとにした解説記事とサンプルファイルがアップされました。

2009.6.26【セミナー資料アップ】
Adobeデベロッパーセンターに「2行のスクリプトで3次元の消失点をコントロールする」を寄稿しました。2009年5月30土曜日に催されたF-siteセミナー「初心者DAY!～トップランナーの制作現場」のdemo2「Adobe Flash CS4使いこなし大喜利」で披露したネタに、加筆補正を加えた内容です。

2009.6.19
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第24回は、「インスタンスの管理と配列の並べ替え」です。今回の課題は、まずインスタンスの回転するスピードを、マウスポインタの位置によって変えてみます。つぎに、インスタンスの重ね順を、3次元風の表現に対応するよう修正します。

2009.5.19
Flash FN0905003「座標と三角関数と、時々、ベクトル」を追加しました。

2009.5.18
英語blogのJActionScriptersに「Vector3D.w property for multiplication」を追加しました。日本語版は、F-siteのActionScript: AS3に「乗算時のVector3D.wプロパティ」として掲載しています。

2009.5.15
F-siteのActionScript: 業界ニュースに「Flash CS4 Professional 10.0.2アップデートが公開」および「Flash CS4 Professional 10.0.2アップデートの概要」を追加しました。

2009.5.7
Flash FN0905002「Vector3Dクラス」を追加しました。英語版ヘルプを翻訳し、注釈を添えたFN0810002の同名ノートに、全面的な改訂および補足を加えて、オリジナルのリファレンスとしました。

2009.5.4
Flash FN0905001「四元数(クォータニオン)」を追加しました。

2009.5.1【ActionScript 3.0セミナー】
Flash CS4 Professionalには、3次元空間の表現力が加わりました。ActionScript 3.0にも、Flash Player 10対応のこうした機能を実現するつぎのようなクラスやメソッドが備わっています。

Matrix3Dクラス
Vector3Dクラス
Vectorクラス
Graphics.drawTriangles()メソッド

今回のセミナーでは、これらのクラスやメソッドの使い方と、その前提となる3次元座標空間の考え方について、サンプルスクリプトを示しながら解説します。また、ベクトルや行列などの数学的な基礎にも触れる予定です。

【日　　時】2009年6月19日金曜日13:00～16:15 (開場12:30)
【場　　所】TKP代々木ビジネスセンター2号館B1 (JR代々木駅徒歩1分)
【参加費用】4,800円/学生料金2,400円
【募集人数】60名

2009.4.30
Adobeデベロッパーセンターに「三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 2」を寄稿しました。

2009.4.27
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第23回は、「クラスのデザインとループ処理」です。今回は、まずEllipticMotionクラスの処理について、今後の拡張まで考えてデザインを整理してます。その後、タイムラインに複数のインスタンスを配置するといった、繰返し処理のテクニックをご紹介します。

2009.4.18
F-siteのActionScript: AS3に「addChildAt(child, 0)は処理が速い」を追加しました。

2009.4.14
テクニカルノートに、つぎの2件を追加しました。
Flash FN0904001「Vector3D.crossProduct()メソッド」
Flash FN0904002「Vector3D.dotProduct()メソッド」

2009.4.8
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第22回は、「MovieClipシンボルにクラスを定義する」です。MovieClipシンボルにクラスを定義すると、シンボルのタイムラインや配置されたエレメントなどのアセットが、そのクラスに関連づけられます。すると、MovieClipシンボルを[ライブラリ]からステージにドラッグ&ドロップするだけで、クラスに定義した動作が実現されます。

2009.3.31
Flash FN0903001「Graphics.drawTriangles()メソッド」を追加しました。

Adobeデベロッパーセンターに「三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1」を寄稿しました。

2009.3.21
Flashドキュメント正誤表に「Flash CS4 Professionalヘルプ」を追加しました。

2009.3.4
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第21回は、「プロパティのようにアクセスするメソッド－ get/setアクセサメソッド」です。クラスのプロパティを単にデータ型の指定だけでなく、もっと細かく管理する手法について学習します。

2009.2.28
Flash FN0902001「Vectorクラス」を追加しました。英語版ヘルプを翻訳し、注釈を添えたFN0810001の同名ノートに、全面的な改訂および補足を加えて、オリジナルのリファレンスとしました。

2009.2.12
Adobeデベロッパーセンターに「ActionScript 3.0におけるパフォーマンス向上のヒント」を寄稿しました。2009年1月30日金曜日に催されたAdobe MAX Japan 2009セッションB-7「ActionScript 3.0におけるパフォーマンス向上のヒント」での講演内容に、基本的な説明や補足を加えて書下ろしたものです。

2009.2.3【セミナー資料アップ】

2009年1月29日木曜日-30日金曜日に開催されたAdobe MAX Japan 2009にご参加いただきましたみなさま、ありがとうございました。30日15:50-16:50に担当したセッションB-7「ActionScript 3.0におけるパフォーマンス向上のヒント」のレジュメとサンプルファイルをアップしました。

2009.1.18【追加登録開始】
Adobe MAX 2009で昨年中に満席となりました1月30日金曜日15:50-16:50の野中の担当セッションセッションB-7「ActionScript 3.0におけるパフォーマンス向上のヒント」が増員になりました。追加登録の受付が始まりましたので、ご希望の方はお早めにお申込みください。

2009.1.17
F-siteのActionScript: Tipsに「Flash CS4のヘルプ」を追加しました。

2009.1.14
Flash FN0901003「同階層のインスタンスを参照する」を追加しました。

2009.1.13
テクニカルノートに、つぎの2件を追加しました。
Flash FN0901001「FlashVarsでHTMLからSWFに変数を渡す」
Flash FN0901002「LoaderInfo.parametersプロパティ」

2009.1.9
gihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の第20回は、「戻り値をクラスで定義する」です。新たに情報を収めるクラスを定義して、MyTimerクラスと組合わせて使ってみます。

Top 2008年情報 2007年情報 2006年情報 2005年情報 2004年情報 2003年情報 2002年情報 2001年情報