オンライン開催中の
jigインターン、みんなでポーズしながら記念撮影の課題、撮る人は片手が取られる問題。
カメラのタイマー撮影のような機能を持ったスクショ(スクリーンショット)があれば欲しくなったので作成。
「
スクショタイマー - screenshot-timer」
src on GitHub
WebAPIで作ったのでブラウザで開くだけで動かせます。「準備する」ボタンを押して、キャプチャーする範囲を画面全体を選んで「共有」し、画面キャプチャーボタンを押すだけ。カウントダウンの音がして、シャッター音。
撮影したJPGの写真データは即ダウンロードが始まります。何枚か連続して撮る機能があるので、ベストな写真を後からじっくり選べます。
写真データをサーバーには一切を送らないので、プライベートな会議でも使えます。(心配な方、ソースをご確認ください src on GitHub)
「スクショタイマー - screenshot-timer」src on GitHub
プログラムはシンプル、1つのHTMLと効果音ラボさんのサウンドファイルのみ。
過去の一日一創で作ったいろんなESモジュールとして組み合わせて、プログラミング!
import { css } from "https://js.sabae.cc/stdom.js";
import { Base64 } from "https://code4fukui.github.io/Base64/Base64.js";
import { sleep } from "https://js.sabae.cc/sleep.js";
import { fix0 } from "https://js.sabae.cc/fix0.js";
import { downloadZip } from "https://code4sabae.github.io/js/downloadZip.js";
import { DateTime } from "https://code4fukui.github.io/day-es/DateTime.js";
import { Sound } from "https://js.sabae.cc/Sound.js";
ボタンが押されたら、カウントダウンして、撮影の流れ(setTimerではなくawait sleep)
btncapture.onclick = async () => {
btncapture.disabled = true;
if (countdown.value) {
message.textContent = "撮影カウントダウン!";
for (let i = countdown.value; i >= 1; i--) {
message.innerHTML = "撮影カウントダウン!<br>" + i;
sndCountdown.play();
await sleep(1000);
}
}
const delay = delaycapture.value;
let cnt = ncapture.value;
if (cnt == 1) {
message.innerHTML = "撮影!";
sndShutter.play();
const canvas = video2canvas(videoin);
downloadJPEG("ss.jpg", canvas);
プログラミングが苦手という人は、そもそも英語に苦手な人が多そうです。
関数や変数を日本語にしたり、日本語プログラミング言語を使う手もありますが、圧倒的大多数の英語ベースで書かれたプログラミング資産を使わず、また、世界に共有できないのももったいない。
小学校で必修化された英語と合わせて、シンプルな英語でカタカタかっこよく作るIchigoJam BASICで慣れておけば、違和感なくすっと本格プログラミングの世界に入っていけます。
いよいよ、大詰めjigインターン生の記録
「⭐jigintern diary⭐」
スクショタイマーのことも書いてくれてます
「jigintern 第3週4日目 team-B - ⭐jigintern diary⭐」