遊 び 部 屋
戻る

JavaScript とスタイルシートを使って,おもしろそうなことをいろいろやってみようというページです.一部,スタイルシートのみで作ったものもあります.
JavaScript やスタイルシートの書き方の解説や,ウェブ ページ作成にすぐ使えるサンプルではありませんので,そのようなものをお探しの方にはあまり役に立たないでしょう.
表の説明など詳しいことはこのページの最後をご覧ください.
作成した 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 もどきです.

[使い方]
スタイルシート xeyes もどき OP80 ソース JavaScript を使わず,スタイルシートだけで作った xeyes もどきです.
プログラム(?)の説明は「スタイルシート xeyes もどき の説明」をご覧ください.

Opera 80 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
拡大鏡 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 の変換を,変換テーブルを使って行っていますが,それをフォーム送信時のコード変換機能を使って行うようにしたものです.
(Firefox 57 以上および Opera 9 以上では動かなくなりました.Firefox 20,21 では,ページ ロード直後の 1 回しか正しく動きません.)
IE5.5 ソース
新・QR コード作成 NS7 ソース Mozilla では,"data" URL を利用してシフト JIS → Unicode の変換を行うことができるので,それを応用して Unicode → シフト JIS の変換テーブルを自動作成するようにしたものです.
ついでに QR コードの表示方法を,画像ファイルを使う方法からスタイルシートで色を変更する方法に変えてみました.
(Firefox 57 以上では動かなくなりました.)
今どきの 新・QR コード作成 FF15,OP15 ソース 「新・QR コード作成」では "data" URL を使ってシフト JIS → Unicode の変換を行っていますが,Firefox 57 以上ではその方法が使えなくなりました.
今どきのブラウザでは Blob を使って同様のことができるので,Blob を使うように変更した「新・QR コード作成」です.
以前の QR コード作成では,ブラウザがクラッシュしたりしないよう,念のため型番を最大 10 に制限していましたが,今どきのブラウザでそのような心配は無用ですので,型番の制限を外しました.
(Opera 64 以上では動かなくなりました.)
今どきの 新・QR コード作成
(TextDecoder 版)
FF19,OP25 ソース シフト JIS → Unicode の変換を TextDecoder で行うようにした「今どきの 新・QR コード作成」です.
今どきの 新・QR コード作成
(FileReader 版)
FF15,OP15 ソース シフト JIS → Unicode の変換を FileReader で行うようにした「今どきの 新・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 より前のブラウザでは一部の機能について,動作が不安定だったり極端に遅かったりすることがあります.

Firefox 59 以上では Firefox の設定(about:config)を変更する必要があります.「IBM PC エミュレータ JavaScript の説明」の最後にある「追記」をご覧ください.

English version here
文字コード変換 FF6,OP20 ソース テキスト データの文字コード変換を,変換テーブルを使わずに行います.
プログラムの説明は「文字コード変換 JavaScript の説明」をご覧ください.
ハイパー 15 ゲーム NS7 ソース 古典的な 15 ゲームです.
何が「ハイパー」かと言うと,ハイパー テキスト マークアップ ランゲージ(つまり HTML です)のページを背景に使うからです.
いや別に… HTML じゃなくても,画像やテキストでも使えるんですけど…

[使い方]
ハイパー 15 ゲーム
(SVG フィルタ版)
FF57 ソース 「ハイパー 15 ゲーム」では IFrame エレメントを 16 個使って駒を表示していますが,これはスタイルシートの SVG フィルタを使って,ひとつの IFrame エレメントの表示を 16 個に分割して表示するようにしたものです.
プログラムの説明は「ハイパー 15 ゲーム(SVG フィルタ版) JavaScript の説明」をご覧ください.

Firefox 97 以上では,プログラムのページと「URL」で指定するページが同一オリジン ポリシーの条件を満たす必要があるようです.
ハイパー 15 ゲーム
(element() 版)
FF21 ソース 「ハイパー 15 ゲーム(SVG フィルタ版)」と同様,ひとつの IFrame エレメントの表示を分割して表示しますが,分割にスタイルシートの element() を使います.

Firefox 97 以上では,プログラムのページと「URL」で指定するページが同一オリジン ポリシーの条件を満たす必要があるようです.
15 ゲーム NS4 ソース 「ハイパー」ではない 15 ゲームです.
使い方は「ハイパー 15 ゲーム」とほとんど同じですが,背景に使えるのは GIF や JPEG など画像のみです.
NS6 ソース
IE5 ソース
OP7 ソース
ビデオ 15 ゲーム FF20 ソース 背景にカメラの映像を使う 15 ゲームです.
ブラウザが認識できるカメラが接続されている必要があります.

Firefox 68 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
スタイルシート 15 ゲーム OP76 ソース JavaScript を使わず,スタイルシートだけで作った 15 ゲームです.
プログラム(?)の説明は「スタイルシート 15 ゲーム の説明」をご覧ください.

Opera 76 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
スタイルシート ライツ アウト OP74 ソース JavaScript を使わず,スタイルシートだけで作ったライツ アウト ゲームです.
プログラム(?)の説明は「スタイルシート ライツ アウト の説明」をご覧ください.

Opera 74 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
スタイルシート ハノイの塔 FF78,OP74 ソース JavaScript を使わず,スタイルシートだけで作ったハノイの塔です.
プログラム(?)の説明は「スタイルシート ハノイの塔 の説明」をご覧ください.

Firefox 78 以上および Opera 74 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
スタイルシート シューティング ゲーム OP80 ソース JavaScript を使わず,スタイルシートだけで作ったシューティング ゲームです.
プログラム(?)の説明は「スタイルシート シューティング ゲーム の説明」をご覧ください.

Opera 80 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
スタイルシート ドライブ ゲーム OP76 ソース JavaScript を使わず,スタイルシートだけで作ったゲームです.
プログラム(?)の説明は「スタイルシート ドライブ ゲーム の説明」をご覧ください.

Opera 76 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
四字熟語ジェネレータ NS6,IE5,OP7 ソース ランダムに漢字を選んで新しい四字熟語を作ります.
プログラムの説明は「四字熟語ジェネレータ JavaScript の説明」をご覧ください.
スタイルシート 四字熟語ジェネレータ OP80 ソース JavaScript を使わず,スタイルシートだけで作った四字熟語ジェネレータです.
プログラム(?)の説明は「スタイルシート 四字熟語ジェネレータ の説明」をご覧ください.

Opera 80 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
ルーレット FF15 ソース ルーレット式の抽選機(くじ)です.
(Firefox 27 以上では動かなくなりました.)

[使い方]
ルーレット
(Web Audio API 版)
FF27,OP15 ソース 音の発生に Web Audio API を使ったルーレットです.
ルーレット
(Web Audio API 版 2)
FF27,OP15 ソース 「ルーレット(Web Audio API 版)」では ScriptProcessorNode を使って曲を演奏していますが,こちらは OscillatorNode を使います.
スタイルシート ルーレット OP80 ソース JavaScript を使わず,スタイルシートだけで作ったルーレットです(音は出ません).
プログラム(?)の説明は「スタイルシート ルーレット の説明」をご覧ください.

Opera 80 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認).
勝手に字幕 FF3.5,OP10.5 ソース 動画に,テキトーな字幕を勝手に付けてしまうジョーク ソフトです.

[使い方]
勝手に字幕
(ローカル ファイル用)
FF18,OP19 ソース 「勝手に字幕」では,ローカル ファイルは“file:/// 〜”で指定しますが,Firefox ではオンラインでローカル ファイルを再生することができません.
Opera も Opera 15 からは同様の制限がかかりました.
そこで,オンラインでも使える別のファイル読み込み方法を使って,ローカル ファイル専用の「勝手に字幕」を作りました.
特殊効果ビデオ FF20,OP12 ソース カメラの映像をいろいろに加工します.
ブラウザが認識できるカメラが接続されている必要があります.

Firefox 68 以上および Opera 34 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
特殊効果ビデオ
(スタイルシート版)
FF54 ソース 「特殊効果ビデオ」ではカメラの映像を Canvas エレメントに取り込んで加工していますが,効果の中には,スタイルシートを使って同じことができるものがあります.
可能なものをスタイルシートで作ってみました.
ブラウザが認識できるカメラが接続されている必要があります.

Firefox 68 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
アナログ時計 NS4 ソース 針の位置で時刻を示す時計です.
NS6,IE5,OP7 ソース
マンデルブロ アート NS4 ソース お馴染みのマンデルブロ集合の画を作成します.
芸術は発散だ!

[使い方]
NS6 ソース
OP8 ソース
万華鏡 FF20,OP12 ソース カメラの映像を使って,万華鏡のような映像を作成します.
ブラウザが認識できるカメラが接続されている必要があります.

Firefox 68 以上および Opera 34 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
スパイログラフ 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 の説明」をご覧ください.
GIF アニメーション FF20,OP25 ソース 動画ファイルを基にして GIF アニメーションを作ります.
プログラムの説明は「GIF アニメーション JavaScript の説明」をご覧ください.
FLAC プレイヤー FF3.5 ソース Audio エレメントを使って FLAC 形式のオーディオ ファイルを再生します.
プログラムの説明は「FLAC プレイヤー JavaScript の説明」をご覧ください.
(Firefox 51 からは Firefox 自体の機能で FLAC を再生できるようになりましたので,このようなものはもう不要です.)
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 以上では動かなくなりました.)
蓄音機 FF37,OP16 ソース オーディオ ファイルを蓄音機のような音で再生します.
プログラムの説明は「蓄音機 JavaScript の説明」をご覧ください.
活動写真 FF35,OP16 ソース 動画ファイルを古いフィルム映像のように再生します.
プログラムの説明は「活動写真 JavaScript の説明」をご覧ください.
ボイス レコーダー FF25 ソース マイクからの音声を録音します.
プログラムの説明は「ボイス レコーダー JavaScript の説明」をご覧ください.

Firefox 68 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
緊急警報信号 FF25 ソース 緊急警報信号をマイクから入力して,その中の情報を表示します.
プログラムの説明は「緊急警報信号 JavaScript の説明」をご覧ください.

Firefox 68 以上でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
Exif ビューア FF3 ソース Exif 形式画像ファイルのビューアです.

[使い方]
「ファイル」で Exif 画像ファイルを選択します.圧縮データ(JPEG),非圧縮データ(TIFF)のどちらも扱えます.
「表示サイズ」で画像を表示するサイズを指定します.
補色残像 FF3.5,OP11.5 ソース 補色残像の実験をします.
プログラムの説明は「補色残像 JavaScript の説明」をご覧ください.
Land の二色法 FF23,OP39 ソース Land の二色法の実験をします.
プログラムの説明は「Land の二色法 JavaScript の説明」をご覧ください.
ブラウザが認識できるカメラが接続されている必要があります.

Firefox 68 以上および Opera でオンラインで実行する場合は,セキュアな通信(HTTPS)でページをロードする必要があります.
波形合成 FF20 ソース 音の倍音成分の含まれ方による音色の違いを試す実験をします.
プログラムの説明は「波形合成 JavaScript の説明」をご覧ください.
(Firefox 27 以上では動かなくなりました.)
波形合成
(Web Audio API 版)
FF25,OP15 ソース 音の発生に Web Audio API を使った波形合成です.
FM 音源みたいなもの FF50,OP36 ソース Web Audio API を使って FM 音源(みたいなもの)を作ってみます.
プログラムの説明は「FM 音源みたいなもの JavaScript の説明」をご覧ください.


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

対応ブラウザの略称と動作確認に使用したブラウザの詳細なバージョンは以下のとおりです.
対応ブラウザ略称動作確認バージョン
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 6FF6Firefox 6.0.1
Firefox 7FF7Firefox 7.0.1
Firefox 13FF13Firefox 13.0.1
Firefox 15FF15Firefox 15.0.1
Firefox 18FF18Firefox 18.0.1
Firefox 19FF19Firefox 19.0.1
Firefox 20FF20Firefox 20.0.1
Firefox 21FF21Firefox 21.0
Firefox 23FF23Firefox 23.0.1
Firefox 25FF25Firefox 25.0.1
Firefox 27FF27Firefox 27.0.1
Firefox 35FF35Firefox 35.0.1
Firefox 37FF37Firefox 37.0.1
Firefox 43FF43Firefox 43.0.1
Firefox 50FF50Firefox 50.0.1
Firefox 54FF54Firefox 54.0.1
Firefox 57FF57Firefox 57.0.1
Firefox 78FF78Firefox 78.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 16OP16Opera 16.0.1196.62
Opera 19OP19Opera 19.0.1326.47
Opera 20OP20Opera 20.0.1387.64
Opera 25OP25Opera 25.0.1614.50
Opera 36OP36Opera 36.0.2130.32
Opera 39OP39Opera 39.0.2256.43
Opera 74OP74Opera 74.0.3911.107
Opera 76OP76Opera 76.0.4017.107
Opera 80OP80Opera 80.0.4170.16
メジャー バージョンが同じでもマイナー バージョンの違いによって,うまく動かない場合もあるかも知れませんが,その場合はご容赦ください.
対応ブラウザが Netscape のバージョン 6 以降のものには,Firefox でも動くものがあります.
対応ブラウザが Opera のバージョン 15 以降のものは,他の Blink ベースのブラウザでも動くかも知れません.

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

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

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

戻る