![]() |
![]() |
![]() |
遊 び 部 屋 | ![]() |
![]() |
![]() |
![]() |
タイトル | 対応ブラウザ | ソース | 説 明 |
---|---|---|---|
アクセク カウンタ | 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 コード作成 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 ゲーム | OP71 | ソース |
JavaScript を使わず,スタイルシートだけで作った 15 ゲームです. プログラム(?)の説明は「スタイルシート 15 ゲーム の説明」をご覧ください. Opera 71 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認). |
スタイルシート シューティング ゲーム | OP80 | ソース |
JavaScript を使わず,スタイルシートだけで作ったシューティング ゲームです. プログラム(?)の説明は「スタイルシート シューティング ゲーム の説明」をご覧ください. Opera 80 以上用ですが,Google Chrome 107 で動くことが確認できています(Google Chrome の他のバージョンでの動作は未確認). |
四字熟語ジェネレータ | NS6,IE5,OP7 | ソース |
ランダムに漢字を選んで新しい四字熟語を作ります. プログラムの説明は「四字熟語ジェネレータの説明」をご覧ください. |
ルーレット | 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 4 NS4 Netscape Communicator 4.75 Netscape 6 NS6 Netscape 6.2.3 (Gecko/20020508) Netscape 7 NS7 Netscape 7.1 (Gecko/20030624) Netscape 9 NS9 Netscape Navigator 9.0 (Gecko/20071015) Firefox 3 FF3 Firefox 3.0 (Gecko/2008052906) Firefox 3.5 FF3.5 Firefox 3.5 (Gecko/20090624) Firefox 4 FF4 Firefox 4.0.1 Firefox 5 FF5 Firefox 5.0.1 Firefox 6 FF6 Firefox 6.0.1 Firefox 7 FF7 Firefox 7.0.1 Firefox 13 FF13 Firefox 13.0.1 Firefox 15 FF15 Firefox 15.0.1 Firefox 18 FF18 Firefox 18.0.1 Firefox 19 FF19 Firefox 19.0.1 Firefox 20 FF20 Firefox 20.0.1 Firefox 21 FF21 Firefox 21.0 Firefox 23 FF23 Firefox 23.0.1 Firefox 25 FF25 Firefox 25.0.1 Firefox 27 FF27 Firefox 27.0.1 Firefox 35 FF35 Firefox 35.0.1 Firefox 37 FF37 Firefox 37.0.1 Firefox 43 FF43 Firefox 43.0.1 Firefox 50 FF50 Firefox 50.0.1 Firefox 54 FF54 Firefox 54.0.1 Firefox 57 FF57 Firefox 57.0.1 Internet Explorer 5 IE5 Internet Explorer 5.00 Internet Explorer 5.5 IE5.5 Internet Explorer 5.50 Opera 6 OP6 Opera 6.06 Opera 7 OP7 Opera 7.11 Opera 8 OP8 Opera 8.01 Opera 9 OP9 Opera 9.01 Opera 10.5 OP10.5 Opera 10.52 Opera 11.5 OP11.5 Opera 11.50 Opera 12 OP12 Opera 12.01 Opera 15 OP15 Opera 15.0.1147.130 Opera 16 OP16 Opera 16.0.1196.62 Opera 19 OP19 Opera 19.0.1326.47 Opera 20 OP20 Opera 20.0.1387.64 Opera 25 OP25 Opera 25.0.1614.50 Opera 36 OP36 Opera 36.0.2130.32 Opera 39 OP39 Opera 39.0.2256.43 Opera 71 OP71 Opera 71.0.3770.148 Opera 80 OP80 Opera 80.0.4170.16
![]() |