2021-09-02
オンライン開催中のjigインターン、みんなでポーズしながら記念撮影の課題、撮る人は片手が取られる問題。 カメラのタイマー撮影のような機能を持ったスクショ(スクリーンショット)があれば欲しくなったので作成。

スクショタイマー - screenshot-timersrc on GitHub
WebAPIで作ったのでブラウザで開くだけで動かせます。「準備する」ボタンを押して、キャプチャーする範囲を画面全体を選んで「共有」し、画面キャプチャーボタンを押すだけ。カウントダウンの音がして、シャッター音。 撮影したJPGの写真データは即ダウンロードが始まります。何枚か連続して撮る機能があるので、ベストな写真を後からじっくり選べます。

写真データをサーバーには一切を送らないので、プライベートな会議でも使えます。(心配な方、ソースをご確認ください src on GitHub


スクショタイマー - screenshot-timersrc 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⭐

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS