遊 び 部 屋
戻る

JavaScript を使って,おもしろそうなことをいろいろやってみようというページです.
JavaScript の書き方の解説や Web ページ作成にすぐ使えるサンプルではありませんので,そのようなものをお探しの方にはあまり役に立たないでしょう.
表の説明など詳しいことはこのページの最後をご覧ください.
作成した JavaScript プログラムをここでは「おもちゃ」と呼ぶことにします.


おもちゃの一覧

タイトル対応ブラウザソース説 明
アクセク カウンタ NS4,NS6,IE5,OP6 ソース アクセクとただひたすら数え続ける(何を?)カウンタです.
すみません,単なるダジャレだけで作ってしまいました.
なめらかに回るカウンタ NS4 ソース 機械式のカウンタのようにじわーっと回るカウンタです.…と言っても単に画像をずらして表示しているだけで 3D 表示している訳ではないので,そう見えるかどうか?
NS6,IE5,OP6 ソース
ぶるぶる NS4,NS6,IE5 ソース 画面がぶるぶると震えます.
このおもちゃではずっと震え続けますが,たまに震えるようにして「地震」などというのもいいかも.
パレット アニメーションもどき NS4 ソース 透過 GIF の透過部分の背景色を変化させることで,見た目としては画像の一部の色が変っているように見えます.
パレット アニメーションのような使い方ができます.
NS6,IE5,OP6 ソース
xeyes もどき NS4 ソース X Window の代表的なアプリケーションのひとつ xeyes の真似です.
NS6,OP7 ソース
IE5 ソース
OP6 ソース
xeyes もどき 其の二 NS7 ソース 移動とサイズ変更ができる xeyes もどきです.

[使い方]
拡大鏡 NS4 ソース 画像の一部を拡大して表示します.

[使い方]
画面上部にある画像の上にマウス ポインタを置くと,その箇所を拡大して画面下部の拡大表示領域に表示します.
「倍率」で拡大倍率(2 倍/4 倍)を選びます.
NS6,OP7 ソース
OP6 ソース
オセロ NS4 ソース オセロ ゲームです.コンピュータと対戦するものではなく,二人のプレイヤーが対戦するものです.(交互にマウスを使わなければならないのでやりにくいかな?)

[使い方]
プレイヤーが交互に,自分の石を置きたいマスをクリックします.
1 ゲーム終了すると「もう一度遊ぶ」という表示が出るので,その表示をクリックするとまたプレイできます.

私はあまりオセロをやったことがないので,もしルールを間違えていたらごめんなさい.

オセロは株式会社パルボックスの登録商標です.
NS6,IE5,OP7 ソース
OP6 ソース
QR コード作成 NS4 ソース QR コード サンプル QR コード(右の図形のようなやつです)を作成します.
プログラムの説明は「QR コード作成 JavaScript の説明」をご覧ください.
あくまでも「お遊び」です.「こんなもの使い物にならん!」というようなお叱りはどうぞご勘弁を.

QR コードは株式会社デンソーウェーブの登録商標です.
QR コードについては株式会社デンソーウェーブが特許を保有していますが,株式会社デンソーウェーブは特許の権利行使を行わないことを宣言しています.
NS6,OP6,IE5.5 ソース
続・QR コード作成 NS7,OP8 ソース 「QR コード作成」では Unicode → シフト JIS の変換を,変換テーブルを使って行っていますが,それをフォーム送信時のコード変換機能を使って行うようにしたものです.
(Opera 9 以上では動かなくなりました.Firefox 20,21 では,ページ ロード直後の 1回しか正しく動きません.)
IE5.5 ソース
新・QR コード作成 NS7 ソース Mozilla では,"data" URL を利用してシフト JIS → Unicode の変換を行うことができるので,それを応用して Unicode → シフト JIS の変換テーブルを自動作成するようにしたものです.
ついでに QR コードの表示方法を,画像ファイルを使う方法からスタイルシートで色を変更する方法に変えてみました.
Tiny BASIC NS6 ソース 一世を風靡した Palo Alto 版 Tiny BASIC と互換(?)のインタープリタです.
(インタープリタでインタープリタを書くという暴挙!)
プログラムの説明は「Tiny BASIC JavaScript の説明」をご覧ください.
IE5.5 ソース
OP7 ソース
IBM PC エミュレータ FF43 ソース 初期の頃の IBM PC のエミュレータです.
プログラムの説明は「IBM PC エミュレータ JavaScript の説明」をご覧ください.

Firefox 37 以上で一応動きますが,Firefox 43 より前のブラウザでは一部の機能について,動作が不安定だったり極端に遅かったりすることがあります.
文字コード変換 FF13 ソース テキスト データの文字コード変換を,変換テーブルを使わずに行います.
プログラムの説明は「文字コード変換 JavaScript の説明」をご覧ください.
OP20 ソース
ハイパー 15 ゲーム NS7 ソース 古典的な 15 ゲームです.
何が「ハイパー」かと言うと,ハイパー テキスト マークアップ ランゲージ(つまり HTML です)のページを背景に使うからです.
いや別に… HTML じゃなくても,画像やテキストでも使えるんですけど…

[使い方]
15 ゲーム NS4 ソース 「ハイパー」ではない 15 ゲームです.
使い方は「ハイパー 15 ゲーム」とほとんど同じですが,背景に使えるのは GIF や JPEG など画像のみです.
NS6 ソース
IE5 ソース
OP7 ソース
ビデオ 15 ゲーム FF20 ソース 背景にカメラの映像を使う 15 ゲームです.
ブラウザが認識できるカメラが接続(搭載)されている必要があります.
四字熟語ジェネレータ NS6,IE5,OP7 ソース ランダムに漢字を選んで新しい四字熟語を作ります.
プログラムの説明は「四字熟語ジェネレータの説明」をご覧ください.
ルーレット FF15 ソース ルーレット式の抽選機(くじ)です.
(Firefox 27 以上では動かなくなりました.)

[使い方]
ルーレット
(Web Audio API 版)
FF27,OP15 ソース 音の発生に Web Audio API を使ったルーレットです.
勝手に字幕 FF3.5,OP10.5 ソース 動画に,テキトーな字幕を勝手に付けてしまうジョーク ソフトです.

[使い方]
特殊効果ビデオ FF20,OP12 ソース カメラの映像をいろいろに加工します.
ブラウザが認識できるカメラが接続(搭載)されている必要があります.
アナログ時計 NS4 ソース 針の位置で時刻を示す時計です.
NS6,IE5,OP7 ソース
マンデルブロ アート NS4 ソース お馴染みのマンデルブロ集合の画を作成します.
芸術は発散だ!

[使い方]
NS6 ソース
OP8 ソース
万華鏡 FF20,OP12 ソース カメラの映像を使って,万華鏡のような映像を作成します.
ブラウザが認識できるカメラが接続(搭載)されている必要があります.
スパイログラフ NS7 ソース スパイログラフ(内トロコイド)と呼ばれる図形を描画します.
プログラムの説明は「スパイログラフ JavaScript の説明」をご覧ください.

スパイログラフ(Spirograph)は Hasbro, Inc. の登録商標です.
スパイログラフ
(Canvas 版)
NS9,OP9 ソース スパイログラフを Canvas エレメントを使って描くようにしたものです.
高速に描画できるので,作図の基になっている二つの円も表示してみました.
ラングトンの蟻 NS7,OP8 ソース ラングトンの蟻と呼ばれるものです.説明は面倒くさいので省略.(コラッ!)
とりあえず,初期パターン「なし」で 1万回を少し超えるくらいまで見ていると,変化が起こります.
せっかちな人は「スキップ」を.
IE5 ソース
トーン ダイアラー NS6,OP8 ソース MIDI を使ってダイアル トーン(DTMF)を発生します.

[使い方]
トーン ダイアラー
(Audio 版)
FF3.5,OP10.5 ソース 音の発生に Audio エレメントを使ったトーン ダイアラーです.
トーン ダイアラー
(Web Audio API 版)
FF27,OP15 ソース 音の発生に Web Audio API を使ったトーン ダイアラーです.
Web Audio API にはトーン ジェネレータが用意されているので,DTMF 音の合成は簡単にできます.
フルカラー GIF 作成 NS9 ソース 256 色より多い色数を表示できる GIF を作成します.
プログラムの説明は「フルカラー GIF 作成 JavaScript の説明」をご覧ください.
フルカラー GIF 作成
(Canvas 版)
NS9 ソース フルカラー GIF 作成の処理を,Canvas エレメントを使うことで簡単にしたものです.
プログラムの説明は「フルカラー GIF 作成(Canvas 版) JavaScript の説明」をご覧ください.
FLAC プレイヤー FF3.5 ソース Audio エレメントを使って FLAC 形式のオーディオ ファイルを再生します.
プログラムの説明は「FLAC プレイヤー JavaScript の説明」をご覧ください.
FLAC プレイヤー セブン FF7 ソース 「FLAC プレイヤー」は対応ブラウザの最低バージョンが Firefox 3.5 ですが,これは対応ブラウザを Firefox 7 以上に限定して,メモリの使用量を少なくしたものです.
(Firefox 18 以上では動かなくなりました.)
帰ってきた FLAC プレイヤー FF4 ソース Firefox 4 から,動的にオーディオを生成できるようになったので,その機能を使うようにした FLAC プレイヤーです.
オーディオ データはすべてをメモリ上に置かなくてもよいので,メモリの使用量はかなり減ります.
(Firefox 27 以上では動かなくなりました.)
FLAC プレイヤー ダイナ FF5 ソース Firefox 5 以上では,File オブジェクトの slice(mozSlice)メソッドを使うと,ファイルの一部のみを読み込むことができます.(mozSlice は Firefox 4 でも使えますが,Firefox 5 以上と仕様が異なるので除外します.)
「帰ってきた FLAC プレイヤー」で動的にオーディオを生成するようにしましたが,さらに slice によるファイル読み込みを使うことで,完全に動的(ダイナミック)にファイルの再生を行えます.
これで,大きいファイルの再生時もメモリ不足になることはなくなるはずです.
(Firefox 27 以上では動かなくなりました.)
ボイス レコーダー FF25 ソース マイクからの音声を録音します.
プログラムの説明は「ボイス レコーダー JavaScript の説明」をご覧ください.
Exif ビューア FF3 ソース Exif 形式画像ファイルのビューアです.

[使い方]
「ファイル」で Exif 画像ファイルを選択します.圧縮データ(JPEG),非圧縮データ(TIFF)のどちらも扱えます.
「表示サイズ」で画像を表示するサイズを指定します.
補色残像 FF3.5,OP11.5 ソース 補色残像の実験をします.
プログラムの説明は「補色残像 JavaScript の説明」をご覧ください.
波形合成 FF20 ソース 音の倍音成分の含まれ方による音色の違いを試す実験をします.
プログラムの説明は「波形合成 JavaScript の説明」をご覧ください.
(Firefox 27 以上では動かなくなりました.)
波形合成
(Web Audio API 版)
FF25,OP15 ソース 音の発生に Web Audio API を使った波形合成です.


ご使用のブラウザに対応する略称をクリックすると該当のおもちゃを表示します.
おもちゃのページには「戻る」ボタンがありませんので,このページに戻るときはブラウザの機能を使ってください.

対応ブラウザの略称と動作確認に使用したブラウザの詳細なバージョンは以下のとおりです.
対応ブラウザ略称動作確認バージョン
Netscape 4NS4Netscape Communicator 4.75
Netscape 6NS6Netscape 6.2.3 (Gecko/20020508)
Netscape 7NS7Netscape 7.1 (Gecko/20030624)
Netscape 9NS9Netscape Navigator 9.0 (Gecko/20071015)
Firefox 3FF3Firefox 3.0 (Gecko/2008052906)
Firefox 3.5FF3.5Firefox 3.5 (Gecko/20090624)
Firefox 4FF4Firefox 4.0.1
Firefox 5FF5Firefox 5.0.1
Firefox 7FF7Firefox 7.0.1
Firefox 13FF13Firefox 13.0.1
Firefox 15FF15Firefox 15.0.1
Firefox 20FF20Firefox 20.0.1
Firefox 25FF25Firefox 25.0.1
Firefox 27FF27Firefox 27.0.1
Firefox 43FF43Firefox 43.0.1
Internet Explorer 5IE5Internet Explorer 5.00
Internet Explorer 5.5IE5.5Internet Explorer 5.50
Opera 6OP6Opera 6.06
Opera 7OP7Opera 7.11
Opera 8OP8Opera 8.01
Opera 9OP9Opera 9.01
Opera 10.5OP10.5Opera 10.52
Opera 11.5OP11.5Opera 11.50
Opera 12OP12Opera 12.01
Opera 15OP15Opera 15.0.1147.130
Opera 20OP20Opera 20.0.1387.64
メジャー バージョンが同じでもマイナー バージョンの違いによって,うまく動かない場合もあるかも知れませんが,その場合はご容赦ください.
対応ブラウザが Netscape のバージョン 6 以降のものには,Firefox でも動くものがあります.
対応ブラウザが Opera のバージョン 15 以降のものは,他の Blink ベースのブラウザでも動くかも知れません.

ここにあるおもちゃはすべて,サーバーの CGI などは使わず JavaScript 単独で動作します.おもちゃの HTML をダウンロードしてローカルで実行しても動きます.

JavaScript のソースを見るには「ソース」をクリックします.(もちろんブラウザのソース表示の機能でもご覧いただけます.)

ここにあるおもちゃはすべて私が作成したものです.著作権は私,馬渕 義彦が有します.
ご利用はご自由にどうぞ.そのままでの使用,改変しての使用,ソースの一部の流用など,どのようにご利用いただいても構いません.
ここにあるおもちゃで使用している画像ファイル(“http://www.kero2.org/js/images/” ディレクトリの各ファイル)もすべて私が作成したものです.それらについてもそのままで,あるいは加工して,ご自由にご利用ください.
なお,私はこれらのプログラムの動作について何の保証もしませんので,ご利用はご自身の責任にてお願いします.

戻る