Webアプリケーション「箱人形マンガ」本体を開く
つくった人 : クロノス・クラウン 柳井政和
Twitter:ruten    Facebook:Masakazu Yanai

「Three.js」関係

3Dの描画には、3Dライブラリの「Three.js」を利用しています。強力なAPIですが、ドキュメントがきちんと整備されていないのが難点です。

HTML5による物理シミュレーション環境の構築 ~WebGLライブラリThree.js 入門(1/3)~

「Three.js」をどんな感じで使うのか、日本語で読めます。

mrdoob/three.js · GitHub

「Three.js」の配布元。「ZIP」ボタンを押して、「mrdoob-three.js-~」を丸ごとダウンロードするとよいです。きちんとしたドキュメントはなく、サンプルが実際にはドキュメント代わりになります。

Three.js doc

「Three.js」の各オブジェクトとそのソースにアクセスできるページです。実質的なAPIリファレンスとなっています。角オブジェクトのプロパティやメソッドは、直接ソースを見ると分かりやすいです。それほど複雑なコードはありません。

サンプルとソースコード

使用ライブラリ

「Three.js」以外に使用しているライブラリです。

jquery.js
jQuery

言わずと知れたjQueryです。これなしでJavaScript+HTML開発は、もうあり得ないです。

jszip.js
JSZip: JavaScript zip class

ZIPを利用して箱キャラを読み込む処理に利用しています。

base64.js
404 Blog Not Found:javascript - Yet Another Base64 transcoder

Base64関係の処理で使用しています。

tabs.js
Simple tabs のデモ、検証

ペイントツールで、色のタブ切り替え部分で利用しています。デザインは一部書き換えて使っています。

scanlineseedfill.js
JavaScript, Canvas スキャンライン・シードフィル アルゴリズムによる塗り潰し : Serendip - Webデザイン・プログラミング

ペイントツールで、バケツの処理をする部分で利用しています。アルファ値の処理に難があったので、一部書き換えて使っています。

jquery.colorbox.js
Colorbox - a jQuery lightbox

jQuery用プラグイン。ライトボックスを簡単に実現してくれます。。

HTML5 / Canvas 関係

HTML5関係、特にCanvas関係で調べた情報です。

Canvasリファレンス - HTML5.JP

Canvasn関連のメソッドやプロパティがまとまっています。

HTML5 Canvas Oval Tutorial

Canvasで手軽に楕円を描く方法。この方法が、調べた中では一番簡単でした。

ペイントツール関係

ペイントツール作成時に参考にしたサイトです。

ASCII.jp:HTML5とjQueryでブラウザーがペイントツールに!|古籏一浩のJavaScriptラボ

ペイントツールを作る際の基礎的なことがまとまっています。

HTML5のcanvasを使ったお絵かきツール詳説: 小粋空間

シンプルにまとまっているので主に参考にしました。

WingMemo: HTML5でお絵かきツールを作ってみた

1つ上のツールを元にして改良しているサイト。上のツールに付いていない機能は、こちらを参考にしました。

Action Script 関係

Action Script関係で調べた情報です。

JavaScriptの値をローカルファイルに保存する方法について調べた2 - いろいろな何か

JavaScriptのデータを、Flash経由でファイルに保存するコードが掲載されています。

フォント関係

マンガに使うのに便利な、商用利用可能なフリーのフォントです。

何も設定しない場合のフキダシのフォントの設定は、以下のようになっています。そのため「Rounded M+」フォントをインストールしておくと、標準的な見栄えになります。

IPAexフォント/IPAフォント

オープンソースのフォントです。

コミックW4-IPA | フォント910

漫画のセリフなどで一般的に使われている「アンチック」系の2byte合成フォントです。

M+ OUTLINE FONTS

ゴシック系フォント。かなり太い文字もあるので、描き文字の代わりに便利です(表示一覧)。

Rounded M+

丸ゴシック系フォント。太めで、やさしい感じ。描き文字の代わりに便利です。

たぬき油性マジック

マジックインキで描いたようなフォント。描き文字の代わりに便利です。

やさしさゴシックボールド

ゴシック系フォント。太めで、やさしい感じ。描き文字の代わりに便利です。

あずきフォント

手書き系フォント。割と整った感じ。描き文字の代わりに便利です。

あんずいろフォント

手書き系フォント。かわいらしい感じ。描き文字の代わりに便利です。

ロゴ作りに、フォントビューワ!

PCにインストールされているフォントの一覧を、Web上で確かめられるサービスです。

その他

その他の情報です。

Loader Generator - Ajax loader

Loader画像を作成しました。

HTTP Server Anywhere - 地平線に行く

ローカルで、サーバー上でHTMLファイルを確認するために利用しています。