Books

HTML5

テクニカルノート一覧

スクリプティング | CSS3 | jQuery | Angular | React | Vue.js | D3 | three.js | TypeScript | トラブルシューティング | リファレンス | 数学 |


スクリプティング

FN1202002 <canvas>要素で定めた領域に図形を描く
FN1202005 EaselJSで図形を描く
FN1203001 EaselJSで描いた星形を回す
FN1203005 EaselJSのマウスクリックとドラッグ&ドロップ
FN1203006 JavaScriptでオブジェクトに設定した関数のスコープ
FN1204005 EaselJSで外部ビットマップファイルを読込んで回す
FN1205001 EaselJSでインスタンスをクリックした座標で回しながらドラッグする
FN1205002 PreloadJSで外部画像ファイルの読込みを待つ
FN1206001 EaselJSでインスタンスをドラッグする勢いで回転を加速する
FN1207003 CreateJS Suiteのクラスに名前空間が設定される
FN1208001 TweenJSでインスタンスにトゥイーンアニメーションを加える
FN1209005 EaselJSでインスタンスにマスクをかける
FN1209006 Toolkit for CreateJS 1.1の新機能
FN1209008 EaselJSのオブジェクトを物理演算エンジンのBox2Dで落とす
FN1210001 EaselJSでスプライトシートからアニメーションをつくる
FN1210004 EaselJSを使ったインスタンスの傾斜・伸縮・移動
FN1210005 EaselJSのMatrix2Dクラスを使ったインスタンスの変形
FN1211001 EaselJSのMatrix2Dクラスで3次元空間の回転を表現する
FN1211003 EaselJSライブラリの短縮版JSファイルについて
FN1212001 EaselJSのつぎのバージョンにEventDispatcherクラスが加わる
FN1212002 論理演算子を使った条件判定
FN1212004 EaselJSのPointクラスの実装を見る
FN1301002 Box2dWebを使うときの名前空間の扱い方
FN1301008 PreloadJSに備わる予定のLoadQueueクラスで外部画像ファイルの読込みを待つ
FN1301009 SoundJSに備わる予定のSoundクラスで外部サウンドファイルを再生する
FN1303002 関数に任意のthis参照を定める
FN1305001 Lo-Dashユーティリティライブラリを使ってみる
FN1307001 SoundJSの次期バージョンにbasePathオプションとvolumeおよびpanプロパティが加わる
FN1307002 EaselJSの次期バージョン候補でアニメーションの扱いが変わる
FN1307003 EaselJSで連続した座標の軌跡を描く
FN1307004 EaselJSの次期バージョンにおけるオブジェクトの幅と高さの取得
FN1308003 遠近法が投影された座標を求める
FN1308004 EaselJS次期バージョンのイベントモデル改訂
FN1309004 EaselJS 0.7.0の改訂
FN1310003 EaselJS 0.7.0でインスタンスをドラッグ&ドロップする
FN1312001 Flash Professional CC 13.1のHTML5 CanvasドキュメントとCreateJS
FN1312002 EaselJS 0.7.1: 他のオブジェクトの後ろに置いたインスタンスがマウスイベントを受取らない
FN1312004 平面上の2直線の交点を外積で求めるサンプルコード
FN1312005 EaselJS 0.7.1: ColorFilterクラスでインスタンスの塗りのグラデーションを反転させる
FN1401002 EaselJSがWebGLをサポート
FN1402001 Starling JSをAway Foundationが引継ぐ
FN1402002 Away3D TypescriptとWebGL
FN1403001 バネのような動きを加速度から定める ー オイラー法
FN1404002 Away3D: 立方体を回してみる
FN1404004 SoundJSの次期バージョンがオーディオスプライトをサポート
FN1405001 Away3D: パーティクルのアニメーション
FN1405003 Flash Professional CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す
FN1407002 Away3D: テクスチャの凹凸と反射 ー 法線マップとスペキュラマップ
FN1407003 Flash Professional CCのHTML5 CanvasドキュメントでJavaScriptコードをどこに書くか
FN1410001 EaselJSのTextオブジェクトにテキストを改行して入れる
FN1411001 CreateJSの新しいクラスモデル
FN1411003 Away3D: 2014年11月5日付でライブラリとクラスの読込み方が変わった
FN1412001 Away3D 14/11/05: スカイボックスをつくる
FN1412003 EaselJS 0.8.0: EaselJSの最適化が進められた
FN1412004 PreloadJS 0.6.0: 新たな個別ローダーの仕組み
FN1412006 PreloadJS 0.6.0: 読込みにwithCredentialsとheadersを定める
FN1412007 CreateJS 14/12/12 : getter/setterプロパティを実装する
FN1412008 EaselJS 0.8.0 : 新たなイベント ー DisplayObject.addedとDisplayObject.removedおよびSprite.change
FN1412009 EaselJS 0.8.0: Pointクラスの実装を見る
FN1501001 EaselJS 0.8.0: カラフルに光る円のアニメーション
FN1501003 EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算
FN1501004 EaselJS 0.8.0: extend()メソッドを使った継承に書替えるときに注意すること
FN1501006 PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す
FN1502001 EaselJS 0.8.0: 使い回すオブジェクトにプロパティを定める
FN1504001 EaselJS 0.8.0: Flash Pro CCでパブリッシュしたMovieClipオブジェクトの総フレーム数を参照する
FN1504002 TweenJS overhaul: Tweenクラスで相対値を使う
FN1505002 EaselJS 0.8.0: 改訂された項目
FN1505005 CreateJS 15/05/21: 0.0.1のライブラリアップデート
FN1506002 EaselJS 0.8.1: 改訂された項目
FN1506004 Flash Pro CC 2015: HTML5 Canvasパブリッシュの改善
FN1508001 鉛筆と消しゴムによる描画
FN1510002 バナー広告をつくるときに役立つクラス ー AdHelper
FN1511001 Away3D: 2015年10月9日付ビルドに以前のコードを対応させる
FN1511002 オブジェクトが配列かどうかを確かめる
FN1511003 EaselJS 0.8.2: 改訂された項目
FN1512001 設定のオン・オフを切り替える − トグルボタンの論理組み立て
FN1512002 CreateJS 15/05/21: Graphicsコマンドでトゥイーンアニメーションを描く
FN1512003 PreloadJS 0.6.2: 改訂された項目
FN1512004 SoundJS 0.6.2: 改訂された項目
FN1512005 TweenJS 0.6.2: 改訂された項目
FN1601001 条件分岐を考える
FN1606001 JavaScript: クラスにゲッター/セッターでプロパティを定める
FN1607001 JavaScript: オブジェクト複製のメソッドを継承する ー Object.prototype.constructorプロパティ
FN1607002 Animate CC: HTML5 Canvasコンテンツに他のコンテンツのムービークリップを読み込む
FN1610001 Animate CCのHTML5 Canvasドキュメントで子インスタンスに定めた関数を呼出す
FN1610002 Animate CCのHTML5 CanvasドキュメントでJavaScriptコードをどこに書くか
FN1704008 CreateJS: StageGL ー EaselJSのWebGL対応が新たに


CSS3

FN1402006 CSS3: テキストをイルミネーションのように点滅させるアニメーション
FN1404001 CSS3: 3次元空間に立方体をつくって回す ー transformプロパティ
FN1407004 CSS3: テキストを順に浮かび上がらせては消すアニメーション
FN1412010 CSS3: transitionを使った回転と伸縮のアニメーション
FN1501002 CSS3: transitionを使ってメニューのナビゲーションをつくる
FN1501005 CSS3: 画像をクロスフェードで切替えるインターフェイス
FN1501007 CSS3: transitionを使ったアコーディオンメニュー
FN1501009 CSS3: 画像とテキストを3次元でアニメーションさせる
FN1503001 CSS3: 画像にロールオーバーしたときテキストを表示する


jQuery

FN1509002 Webページの背景に粒子のアニメーションを加える ー Particleground


Angular

AngularJS 1.5

FN1601002 AngularJS入門 01: AngularJSを始める
FN1601003 AngularJS入門 02: 要素の属性を動的に変える
FN1601004 AngularJS入門 03: コントローラで値を与える
FN1601005 AngularJS入門 04: 動的にリストをつくる
FN1601006 AngularJS入門 05: コントローラで項目を動的に追加する
FN1601007 AngularJS入門 06: 項目を数えて表示する
FN1601008 AngularJS入門 07: 項目を調べて削除する
FN1602001 AngularJS: フォームに入力されたデータを確かめる
FN1602002 AngularJS: フォームに入力されたデータに応じてスタイルを変える
FN1602003 AngularJS: フォームの入力に応じてクラスを動的に変える
FN1602004 AngularJS: フォームの入力が正しくないとき送信ボタンを押せないようにする
FN1602005 AngularJS: 送信ボタンでフォームの入力データを扱う
FN1604001 AngularJS: コントローラから切り分けたサービスでサーバーのデータを読み込む
FN1605002 AngularJS: コンポーネントを使う
FN1605003 AngularJS: コンポーネントを階層化する

Angular 2

FN1611004 Angular 2: とにかくAngular 2でコードを書いて動かす
FN1611005 Angular 2入門 01: 編集ページをつくる
FN1611006 Angular 2入門 02: リストを加える
FN1611007 Angular 2入門 03: コンポーネントを分ける
FN1612001 Angular 2入門 04: サービスをつくる
FN1701001 Angular 2入門 05: Routerを使う
FN1701007 Angular 2入門 06: HTTPサービスでデータを取得・保存する
FN1701008 Angular 2入門 07: HTTPサービスでデータを追加・削除する
FN1704002 Angular 2入門 08: HTTPサービスが返すObservableを使ったデータの検索


React

FN1608001 React: まずは動かしてみる
FN1608002 React入門 01: コンポーネントを組み立てる
FN1608003 React入門 02: remarkableでMarkdownの機能を加える
FN1608004 React入門 03: データはJSON形式にしてページをローカルサーバーで表示する
FN1608005 React入門 04: JSONデータをローカルサーバーから読み込んでページに表示する
FN1608006 React入門 05: フォームからサーバーにデータを送ってページに加える
FN1608007 React入門 06: ローカルサーバーの立ち上げとJSXのコンパイル

React + ECMAScript 6

FN1704003 React + ES6: まずは動かしてみる
FN1704005 React + ES6 入門 01: ゲームの盤面をつくる
FN1704006 React + ES6 入門 02: マルバツゲームの勝ちを決める
FN1704007 React + ES6 入門 03: ゲーム管理のコンポーネントを分ける
FN1704009 React + ES6 入門 04: ゲームの履歴をさかのぼる


Vue.js

FN1702003 Vue.js入門 01: Vue.jsを始める
FN1702005 Vue.js入門 02: 要素のclass属性を動的に変える
FN1702006 Vue.js入門 03: データから動的にリストをつくる
FN1702007 Vue.js入門 04: フィールドに入力したテキストを動的に項目として加える
FN1702008 Vue.js入門 05: 項目を数えて表示する
FN1702009 Vue.js入門 06: 項目を調べてデータから削除する
FN1702010 Vue.js入門 07: データを項目ごとに削除する
FN1703004 Vue.js: 簡単なMarkdownエディタをつくる


D3

FN1701003 D3.jsを使う
FN1701004 D3.js入門 01: 棒グラフを描く
FN1701005 D3.js入門 02: 外部ファイルのデータからSVGで棒グラフを描く
FN1701006 D3.js入門 03: 立て棒グラフに軸の記載を加える
FN1702001 D3.js入門 04: グラフにアニメーションを加える
FN1702011 D3.js入門 05: グラフの棒にラベルを加える


three.js

FN1704010 three.js入門 01: 3次元空間で立方体を回す
FN1704011 three.js入門 02: フォンマテリアルとライトを使う


TypeScript

FN1609001 TypeScript: とにかくJavaScriptファイルをビルドしてみる
FN1610003 Visual Studio Code 1.5でTypeScript 2.0を使う
FN1610004 TypeScript 2.0のreadonly修飾子
FN1702012 Visual Studio Code 1.9でTypeScript 2.2を使う

TypeScript入門

FN1609002 TypeScript入門 01: Visual Studio CodeでTypeScriptのコードを書く
FN1609003 TypeScript入門 02: publicとprivateおよびstatic
FN1609004 TypeScript入門 03: クラスを継承して使う
FN1609005 TypeScript入門 04: オブジェクト型リテラルとインタフェースを使う
FN1609006 TypeScript入門 05: get/setアクセサを使う
FN1609007 TypeScript入門 06: メソッド引数のデフォルト値と省略および定数を定める
FN1609008 TypeScript入門 07: ブロックスコープに変数を宣言する ー let
FN1609009 TypeScript入門 08: 型の互換性
FN1609010 TypeScript入門 09: アロー関数式
FN1610005 TypeScript入門 10: モジュール ー exportとimport
FN1611001 TypeScript入門 11: 名前空間 ー namespace
FN1611003 TypeScript入門 12: デコレータ(Decorator)を使う

TypeScript公式Handbookを解説し直す

FN1701009 TypeScript: 基本型
FN1701010 TypeScript: 変数の宣言
FN1702002 TypeScript: インタフェース
FN1703001 TypeScript: クラス
FN1703003 TypeScript: 関数
FN1701002 TypeScript: ジェネリック型
FN1703005 TypeScript: 列挙型
FN1704001 TypeScript: 型推論
FN1704004 TypeScript: 型の互換性


トラブルシューティング

FN1210002 Internet Explorer 9でEaselJSのコンテンツが表示されない
FN1302002 EaselJSのイベントリスナーにFunction.bind()メソッドを適用するとリスナー内から削除できない
FN1305002 EaselJSのMatrix2D.scale()メソッドを他の変換の後に呼出すと正しく伸縮されない
FN1309001 EaselJSのDisplayObject.mouseEnabledプロパティで直後のマウスイベントが止められない
FN1310001 EaselJS 0.7.0のTicker.addEventListener()やTicker.on()メソッドが関数を返さない
FN1311003 EaselJS 0.7.0: EaselJS 0.7.0: バグが確認されているColorMatrixクラスのメソッド
FN1408001 Away3D 14/08/18: LoaderEvent.RESOURCE_COMPLETEイベントで素材ファイルが読込めない
FN1507001 HTML5 Canvasから書出したMovieClipインスタンスの座標が基準点とずれる


リファレンス

FN1202003 Canvasでパスをつくる − beginPath()/closePath()メソッド
FN1207002 Tickerクラスでtickイベントを配信する
FN1209003 EaselJSのフィルタColorMatrixFilterでイメージをセピア調に変える
FN1209009 SoundJSでSoundInstanceオブジェクトを指定して再生する
FN1209010 Box2dWebで物理ワールドと剛体の定義を定める
FN1211002 EaselJSでマウスのロールオーバーとロールアウトを捉える
FN1212003 論理和(||)と論理積(&&)演算子
FN1212005 Function.prototypeプロパティ
FN1302001 EaselJS 0.8.1: イベントリスナーを扱うEventDispatcherクラス
FN1303001 SoundJSで関数にスコープを定める ー proxy()メソッド
FN1305003 EaselJS 0.6.1のMatrix2Dクラスの基本的なメソッドと行列演算
FN1305004 TweenJS とSoundJS 0.4.1に備わったインスタンスを削除するメソッド
FN1306001 PreloadJSで外部ファイルを読込む
FN1306002 EaselJSのGraphicsクラスで2次ベジエ曲線を描く
FN1307005 EaselJS 0.7.0のGraphics.inject()メソッド
FN1308001 EaselJSのMatrix2Dオブジェクトの変換行列を適用する
FN1308002 EaselJS次期バージョン候補の座標系クラスに初期化のメソッドが加わった
FN1309002 EaselJS 0.7.0: Eventクラスでイベントの流れを扱うメソッド
FN1310002 EaselJS 0.7.0のTickerクラスでrequestAnimationFrameのAPIを使う - Ticker.timingModeプロパティ
FN1310004 CreateJSの配列エレメントからインデックスを得るユーティリティ関数 − indexOf()
FN1310005 EaselJS NEXTに加わるDisplayObject.tickイベントの流れを止めるプロパティ
FN1310006 EaselJSのDisplayObject.tickイベント
FN1311002 EaselJS NEXT: MouseEvent.localX/MouseEvent.localYプロパティ
FN1402003 PreloadJS NEXT: LoadQueue.maintainScriptOrderプロパティ
FN1404003 EaselJS NEXT: Event.set()メソッドでオブジェクトにプロパティをまとめて加える
FN1406001 EaselJS NEXT: Stage.drawRectプロパティ
FN1411002 CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド
FN1411004 EaselJS 0.8.0: Graphics.commandプロパティ
FN1411005 EaselJS 0.8.0: Graphicsクラス
FN1412005 PreloadJS 0.6.0: ImageLoaderクラス
FN1501008 Canvas 2D: Path2Dインターフェイス
FN1505001 EaselJS 0.8.0: フレームレートを扱う
FN1505003 EaselJS 0.8.0: DisplayPropsクラス
FN1505004 EaselJS 0.8.0: Rectangleクラス
FN1506001 EaselJS 0.8.1: MovieClipオブジェクトの再生の長さ・フレーム数を調べる
FN1506003 EaselJS 0.8.1: 破線を描く ー Graphics.setStrokeDash()メソッド
FN1604002 SoundJS 0.6.2: 読み込んだサウンドファイルを再生する
FN1605001 jQuery: ドキュメントの準備が整ったら関数を呼び出す ー .ready()メソッド


数学

FN1312003 平面上の2直線の交点を外積により求める
FN1401004 等速円運動を三角関数の微分で表す
FN1403001 バネのような動きを加速度から定める ー オイラー法
FN1407001 速度から位置を決めるアニメーション ー 微分により運動を考える


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.