setTimeoutを用いて、非同期関数を同期的に動かす
JavaScriptやjQueryでプログラミングしていると、非同期関数を使用する箇所で、自分が意図しているのとは違う動きになることがあります。 その際、非同期関数を同期的に動かすことができれば、問題は解決します。 &n
続きを読む
プログラム
SVGでタイマーを作る
Scalable Vector Graphics（SVG）を用いて、「タイマー」を作りました。 長方形（バー）が縮むことで、時間経過が見えるタイマーです。 記事「1
続きを読む
SVGで長方形を描く
Scalable Vector Graphics（SVG）を用いて、「長方形」を描画するプログラムを作ります。そして、描いた「長方形」を移動させます。 （注）SVG（Scalable Vector Grap
続きを読む
１分タイマーの作り方２
時間の経過が見えるタイマーを作りました。 棒（バー）の長さが縮んでいくことで、時間経過を表現します。 以前、記事「１分タイマーの作り方」で、１分のカウントダウンタイマーをプログラミングしました
続きを読む
高解像度写真をサイト背景にする
高い解像度の写真を、サイトの背景画像にするプログラムを作りました。 写真を自動でクリッピングすることで、写真を縮小することなくサイトの背景画像にします。 （注）クリッピング：写真の一部を切り取ること この部分はifram
続きを読む
１分タイマーの作り方
ページを開けると、１分のカウントダウンが始まる、１分タイマーを作ります。 下図は、１分タイマーのフローチャートです。 とても簡単なフローチャートです。 文章にすると、以下の手順となります。
続きを読む
Canvasに点を描く
ページ上にJavaScriptを用いて点を描画します。 ここでも、やはり、Canvasを使用します。 （注）Canvasの詳しい説明は、記事「Canvasに長方形を描く」をご参照ください。 点の描画は、以下
続きを読む
Canvasに長方形を描く２
前回記事「Canvasに長方形を描く」の続きです。 ボタン操作で、Canvas上の長方形を描画し、また、消去します。 前回のプログラム <!DOCTYPE html> <html> <hea
続きを読む
Canvasに長方形を描く
ページ上にJavascriptを用いて長方形を描画します。 Javascriptで長方形などの画像を描画する際、「canvas」を使用します。 canvasは、教室の黒板やスケッチブックに相当するもので、画像を描画する「
続きを読む
効果音が鳴るキーボード
キーボードから文字を入力するのときに、楽しい効果音が鳴るプログラム（Javascript）を作りました。 【音量注意】 大まかな手順は、以下となります。 効果音の素材作成 Audioオブジェクトの生成
続きを読む