毎日のオンライン会議・授業でちょっとだけ楽できるアプリをつくりました こんにちは．kakekakemiyaと申します． 現在は東京大学工学部電子情報工学科というところに所属しております． 今回は，私の作ったアプリの紹介をさせていただきたく投稿させていただきました． なお，本記事では「オンライン会議ツール」と書けばいいところを「ZOOM」で統一させていただきますが，国内シェアの高さと，自分が普段使っているというだけの理由なので，ZOOMアプリへの宣戦布告でもなければ他競合製品では使えないアプリであるというわけでもありません． ZOOMへの不満 ZOOMは今やコロナ禍において欠かせないアプリの一つとなりました． 特に，オンライン授業を行なっている大学では，学生は毎日各授業のURLに接続してリモート受講をしているので大学生活に欠かせない存在となっています． 私自身もコロナ直撃大学生なので，2年生のころから毎日オンライン授業を受けているわけですが，兼ねてから生じているZOOMへの不満が， URL管理が面倒くさいーーー ということです． メモ帳やslack等に自分の受けている授業のURLを保存しておいて，時間になったら今日は何曜日で今何時だからこのURLか！といちいち選ぶのが面倒くさがり屋の私にはなかなか鬱陶しいものでした． この不満に共感してくださる方がどれくらいいるのかわかりませんが，世界のどこかにはいるだろうということで，今回はこのイライラを解消するアプリをつくりました． その名も，AUTOZOOM3!! (↑アプリアイコンです) AUTOZOOM3 AUTOZOOM3の機能は非常にシンプルで，「事前に登録しておいたURLの中から，今の曜日の今の時間に入らなければならないミーティングに自動で入れてくれる．」というアプリになっています． 使い方 URLの登録 メニューからADD URLを選び，曜日，時刻，登録名，ZOOMのURLを入力してRegisterを押せばOKです！！ このとき，時間についてはミーティングの開始時刻ではなく，自分が参加したい時刻にしてください 授業開始時刻にすると冒頭遅刻します 例えば，ミーティング A が 10:00，ミーティング B が 11:00 で登録されていた場合，10:00-10:59 は A に，11:00-は B に入ります． なお，登録済みのURLを消したい場合は一覧のdeleteを押すだけで消えます． ZOOMへの参加 ZOOMに参加したい時は，アプリを起動してJoin the Meetingをクリックするだけで，その曜日その時間に入るべきZOOMに入れてくれます． （gifがなんかもっさりしていますが，実際はもっとサクサク動きます） お気づきの方もいらっしゃるかとは思いますがAUTOZOOMによるJoinはURLを開くだけなので，ZOOM以外にもリンク踏む系のものなら使用できます！！ 実装と仕様 HTML+CSS+JavsScriptで作ったものをElectronでアプリ化しています． 実装方針は非常に簡単で，現在の曜日と時刻を取得してきて，保存されたURLの中から入るべきURLに飛ばすという形になっています． その他ポイントになりうる実装・仕様としては， * URLは，Electron内で動いているChromium上のLocalStorageに保存している * Join the Meetingは該当URLを直に貼っているので，実は押した時ではなく起動時に入るべきURLを選択する(これは僕自身がアプリを常駐させない派なので問題を感じなかったのですが，常駐させる派からクリック時にしてほしいとの意見があったのでアップデートかけるかもです) * 既に登録済みの曜日時刻に登録すると上書きしてしまう あたりだと思われます． https://github.com/Kakeru-Miyazaki/autozoom3/ にソースコードは置いてあります．今後適宜アップデートしていきます． なお，このアプリ自体「こんなのあったら便利じゃない？笑」くらいのノリで AUTOZOOMコマンド として実装して自分で使っていたもの(初代AUTOZOOM)を友達に配布するためにGUIをつくって(AUTOZOOM2)，それをさらに良い感じにしてできたのが AUTOZOOM3 なので構想が雑というか作り込みが甘いのはご了承ください アプリの配布 https://github.com/Kakeru-Miyazaki/autozoom3/releases/tag/ver2.0.0 にて，本アプリを配布しています！ dmg,exe,debを用意しているので，Mac,Windows,Ubuntu等でお使いいただけます． 拙いアプリですが，気になった方はお試しいただけると嬉しいです！ 最後まで読んでいただきありがとうございました． kakekakemiya

毎日のオンライン会議・授業でちょっとだけ楽できるアプリをつくりました こんにちは．kakekakemiyaと申します． 現在は東京大学工学部電子情報工学科というところに所属しております． 今回は，私の作ったアプリの紹介をさせていただきたく投稿させていただきました． なお，本記事では「オンライン会議ツール」と書けばいいところを「ZOOM」で統一させていただきますが，国内シェアの高さと，自分が普段使っているというだけの理由なので，ZOOMアプリへの宣戦布告でもなければ他競合製品では使えないアプリであるというわけでもありません． ZOOMへの不満 ZOOMは今やコロナ禍において欠かせないアプリの一つとなりました． 特に，オンライン授業を行なっている大学では，学生は毎日各授業のURLに接続してリモート受講をしているので大学生活に欠かせない存在となっています． 私自身もコロナ直撃大学生なので，2年生のころから毎日オンライン授業を受けているわけですが，兼ねてから生じているZOOMへの不満が， URL管理が面倒くさいーーー ということです． メモ帳やslack等に自分の受けている授業のURLを保存しておいて，時間になったら今日は何曜日で今何時だからこのURLか！といちいち選ぶのが面倒くさがり屋の私にはなかなか鬱陶しいものでした． この不満に共感してくださる方がどれくらいいるのかわかりませんが，世界のどこかにはいるだろうということで，今回はこのイライラを解消するアプリをつくりました． その名も，AUTOZOOM3!! (↑アプリアイコンです) AUTOZOOM3 AUTOZOOM3の機能は非常にシンプルで，「事前に登録しておいたURLの中から，今の曜日の今の時間に入らなければならないミーティングに自動で入れてくれる．」というアプリになっています． 使い方 URLの登録 メニューからADD URLを選び，曜日，時刻，登録名，ZOOMのURLを入力してRegisterを押せばOKです！！ このとき，時間についてはミーティングの開始時刻ではなく，自分が参加したい時刻にしてください 授業開始時刻にすると冒頭遅刻します 例えば，ミーティング A が 10:00，ミーティング B が 11:00 で登録されていた場合，10:00-10:59 は A に，11:00-は B に入ります． なお，登録済みのURLを消したい場合は一覧のdeleteを押すだけで消えます． ZOOMへの参加 ZOOMに参加したい時は，アプリを起動してJoin the Meetingをクリックするだけで，その曜日その時間に入るべきZOOMに入れてくれます． （gifがなんかもっさりしていますが，実際はもっとサクサク動きます） お気づきの方もいらっしゃるかとは思いますがAUTOZOOMによるJoinはURLを開くだけなので，ZOOM以外にもリンク踏む系のものなら使用できます！！ 実装と仕様 HTML+CSS+JavsScriptで作ったものをElectronでアプリ化しています． 実装方針は非常に簡単で，現在の曜日と時刻を取得してきて，保存されたURLの中から入るべきURLに飛ばすという形になっています． その他ポイントになりうる実装・仕様としては， URLは，Electron内で動いているChromium上のLocalStorageに保存している Join the Meetingは該当URLを直に貼っているので，実は押した時ではなく起動時に入るべきURLを選択する(これは僕自身がアプリを常駐させない派なので問題を感じなかったのですが，常駐させる派からクリック時にしてほしいとの意見があったのでアップデートかけるかもです) 既に登録済みの曜日時刻に登録すると上書きしてしまう あたりだと思われます． なお，上述の通り登録したURLのデータをローカルファイルに保存するのではなく，Electronのレンダリングに使われているChromiumのLocalStorageを利用しているので，ファイルアクセス権限を当アプリに与えなくても良い というのは個人的に推しポイントです． また，完全にアプリで完結しているため，環境構築が不要 であることも売りです． https://github.com/Kakeru-Miyazaki/autozoom3/ にソースコードは置いてあります．今後適宜アップデートしていきます． なお，このアプリ自体「こんなのあったら便利じゃない？笑」くらいのノリで AUTOZOOMコマンド として実装して自分で使っていたもの(初代AUTOZOOM)を友達に配布するためにGUIをつくって(AUTOZOOM2)，それをさらに良い感じにしてできたのが AUTOZOOM3 なので構想が雑というか作り込みが甘いのはご了承ください アプリの配布 https://github.com/Kakeru-Miyazaki/autozoom3/releases/tag/ver2.0.0 にて，本アプリを配布しています！ dmg,exe,debを用意しているので，Mac,Windows,Ubuntu等でお使いいただけます． 拙いアプリですが，気になった方はお試しいただけると嬉しいです！ また，別記事の【VSCode】Undo/Redoに革命を起こしたい も読んでいただけたら幸いです． 最後まで読んでいただきありがとうございました． kakekakemiya

タイトルのとおりなのですが、うっかりしそうな内容だったので記事にします。 インラインブロックの下マージンがずれる きっかけは teratail のこの質問でした。 「インラインブロックの下マージンがずれる」という問題で、なかなか理由がわからなかったのです。 <div class="empty"></div> <br> <div>&nbsp;</div> <br> <div>&nbsp;</div> div { display: inline-block; width: 10em; height: 1em; box-sizing: border-box; border: 1px solid; margin-bottom: 1em; } .empty { border-color: red; } スクリーンショットのとおり、下マージンよりも大きい余白があります。 「改行の問題だろう」と当たりをつけたのですが、そうだとしても空白文字を入れるだけで解消されてしまうのは解せない感じでした。 ベースラインの問題 改行タグを削除してみたところ、こうなりました。 明らかにベースラインの問題のように見えたのでググったところ、このような仕様が。 If an atomic inline (such as an inline-block, inline-table, or replaced element) does not have a content-derived baseline set in the inline axis of the inline formatting context in which it participates, then the UA must synthesize its baselines as follows in order to align it. These baselines are assumed to be at its line-under margin edge: A.3: Synthesizing Baselines for Atomic Inlines | CSS Inline Layout Module Level 3 ということで、空のインラインブロックや画像でマージンの下端に揃ってしまう現象が起きるということでした。 件の質問は<br>が入っていたため、そのベースラインがマージン下端に揃って下がってしまい行ボックスが大きくなったため、その分だけ下に余白ができた、ということのようです。 なお、画像で試したところ問題が再現したのですが、空の<input>では再現しませんでした。 その理由はまだわかっていないです。 　 　 　

概要 HTMLのTABLEタグでテーブルを作るとき、いろんなタグが使うことができる。 <table>からはじまり、<thead>、<tbody>、<tr>、<th>、<rd>など、 Tableを作るのにたくさんタグが使うことができ、複雑でややこしい。 この記事では、テーブルで使うことができるタグの役割を会せる、 テーブルができる最小のサンプルと アクセシビリティを意識したサンプルの解説を行います。 TABLEで使えるタグについて <table> : 表要素 テーブル形式のデータを表すフローコンテンツです。 <table> <!-- 以下にテーブルの要素が入ります。--> </table> <caption> : 表キャプション要素 テーブルのキャプション (またはタイトル) を指定する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <!-- 以下にテーブルの要素が入ります。--> </table> <colgroup> : 列グループ定義要素 テーブル内の列(column)のグループを定義する要素です。 子要素の、<col>のspan属性を指定することで、列をグループ化できます。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <!-- 以下にテーブルの要素が入ります。--> </table> <thead> : 表ヘッダー要素 テーブルの列の見出しを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <!-- 以下にテーブルの要素が入ります。--> </table> <tbody> : 表本体要素 テーブルの本体要素で、行要素の<tr>を内包します。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <!-- 以下にテーブルの要素が入ります。--> </table> <tfoot> : 表本体要素 テーブル内の列を総括する行を追加する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> <tr> : 表本体要素 表内でセルの行を定義する要素で、<th> と <td>を内容します。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <!-- 以下にテーブルの要素が入ります。--> </tr> </thead> <tbody> <tr> <!-- 以下にテーブルの要素が入ります。--> </tr> <tr> <!-- 以下にテーブルの要素が入ります。--> </tr> </tbody> <tfoot> <tr> <!-- 以下にテーブルの要素が入ります。--> </tr> </tfoot> </table> <th> : table header要素 表のセルのヘッダーであるセルを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <!-- 以下にテーブルの要素が入ります。--> </tr> <tr> <th>二郎くん</th> <!-- 以下にテーブルの要素が入ります。--> </tr> </tbody> <tfoot> <tr> <th>合計</th> <!-- 以下にテーブルの要素が入ります。--> </tr> </tfoot> </table> <td> : table data要素 表のセルのデータを定義する要素です。 <table> <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th>りんご</th> <th>みかん</th> <th>にんじん</th> <th>とまと</th> </tr> </thead> <tbody> <tr> <th>太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th>二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> TABLEの最小サンプル <table>タグは以下の要素が必要になります。 <table>タグの中には以下コンテンツが入る 1 任意の1個の<caption> 要素 省略可 2 0個以上の<colgroup> 要素 省略可 3 任意の1個の<thead> 要素 省略可 4 次の2つの選択肢から1つ ・ 0個以上の<tbody> 要素 ・ 1個以上の<tr> 要素 5 任意の1個の<tfoot> 要素 この要素をかみすると最小でテーブルを作るとこうなります。 <table> <tr> <th>太郎くん</th> <td>１０さい</td> </tr> </table> アクセシビリティを意識したサンプル <table > <caption>太郎くんと二郎くんがスーパーで買った果物と野菜の表</caption> <colgroup> <col span="2"> <!--果物--> <col span="2"> <!--野菜--> </colgroup> <thead> <tr> <td> </td> <th scope="col">りんご</th> <th scope="col">みかん</th> <th scope="col">にんじん</th> <th scope="col">とまと</th> </tr> </thead> <tbody> <tr> <th scope="row">太郎くん</th> <td>5個</td> 　　　　　　　　　　　　<td>10個</td> <td>3個</td> 　　　　　　　　　　　　<td>2個</td> </tr> <tr> <th scope="row">二郎くん</th> <td>2個</td> 　　　　　　　　　　　　<td>15個</td> <td>2個</td> 　　　　　　　　　　　　<td>4個</td> </tr> </tbody> <tfoot> <tr> <th scope="row">合計</th> <td>7個</td> 　　　　　　　　　　　　<td>25個</td> <td>5個</td> 　　　　　　　　　　　　<td>6個</td> </tr> </tfoot> </table> アクセシビリティで、意識すること caption要素やsummary属性を追加することで、スクリーンリーダーユーザーが概略を理解できるようにする HTML5では、summary属性は廃止されたので使う際は注意が必要。 summary属性をサポートしている人としてない人で情報に差が出てしまうので、要注意と評価される。 そのため、サンプルでは、caption要素しか追加してません。 ただ、caption要素とsummary属性を追加する場合は、違う内容を提供しなければなりません。 ref H39: データテーブルのキャプションとデータテーブルを関連付けるために、caption 要素を使用する H73: データテーブルの概要を提供するために、table 要素の summary 属性を使用する データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する th要素全てに、scope 属性があることが必要です。 見出しとしての役割を果たす全ての td 要素に、scope 属性があることが必要です。 全てのscope属性に、値として row、col、rowgroup、又は colgroup があることを確認する。 ref H63: データテーブルで見出しセルとデータセルを関連付けるために、scope 属性を使用する

今回はリアカメラ編を作成しようと思います リアカメラとは、キーボードがある方向のカメラです じゃ作ってみるでー <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li> <li><a href="#area-3">フロントカメラでの撮影</a></li> <section class="area" id="area-1"> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="area" id="area-1"> <h2>WEBカメラの映像を表示</h2> </head> <body> <div> <h1>WEBカメラの映像を表示</h1> <div> <video id="video"></video> </div> </div> <script> const video = document.getElementById("video") navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play() }).catch(e => { console.log(e) }) </script> </body> </html> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Camera Test</title> <style> canvas, video{ border: 1px solid gray; } </style> </head> <body> <html> <body> <ol> <pre> <section class="area" id="area-2"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 1.5秒後にカメラ再開 }, 1500); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <html> <body> <ol> <pre> <section class="area" id="area-3"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 3秒後にカメラ再開 }, 3000); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <p class="js-pagetop scroll-top"><a href="#">Page Top</a></p> <small>&copy; copyright.</small> </footer> すべてコピペで使用できます 保存名は、その時の時間を、秒数で表します まとめ　　　　　 参考になると嬉しいです

カメラ機能が、パソコンに入ってなかった人優先でカメラ機能を 作ってみました 有線カメラを、パソコンに付けると監視カメラにもなりますね それとピクチャインピクチャを利用するといつでも見れますね それじゃ作ってみよう <li><a href="#area-1">WEBカメラの映像を表示</a></li> <li><a href="#area-2">リアカメラでの、撮影</a></li> <li><a href="#area-3">フロントカメラでの撮影</a></li> <section class="area" id="area-1"> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <section class="area" id="area-1"> <h2>WEBカメラの映像を表示</h2> </head> <body> <div> <h1>WEBカメラの映像を表示</h1> <div> <video id="video"></video> </div> </div> <script> const video = document.getElementById("video") navigator.mediaDevices.getUserMedia({ video: true, audio: false, }).then(stream => { video.srcObject = stream; video.play() }).catch(e => { console.log(e) }) </script> </body> </html> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Camera Test</title> <style> canvas, video{ border: 1px solid gray; } </style> </head> <body> <html> <body> <ol> <pre> <section class="area" id="area-2"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, facingMode: "user" // フロントカメラを利用する // facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 1.5秒後にカメラ再開 }, 1500); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <html> <body> <ol> <pre> <section class="area" id="area-3"> <h1>撮影します。</h1> 撮影したものは、右側の画面です。 <video id="camera" width="300" height="200"></video> <canvas id="picture" width="300" height="200"></canvas> <form> <button type="button" id="shutter">撮影する</button> </form> <audio id="se" preload="auto"> <source src="camera-shutter1.mp3" type="audio/mp3"> </audio> <script> window.onload = () => { const video = document.querySelector("#camera"); const canvas = document.querySelector("#picture"); const se = document.querySelector('#se'); /** カメラ設定 */ const constraints = { audio: false, video: { width: 300, height: 200, // facingMode: "user" // フロントカメラを利用する facingMode: { exact: "environment" } // リアカメラを利用する場合 } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) .catch( (err) => { console.log(err.name + ": " + err.message); }); /** * 撮影 */ document.querySelector("#shutter").addEventListener("click", () => { const ctx = canvas.getContext("2d"); // 演出的な目的で一度映像を止めてSEを再生する video.pause(); // 映像を停止 se.play(); // シャッター音 setTimeout( () => { video.play(); // 3秒後にカメラ再開 }, 3000); // canvasに画像を貼り付ける ctx.drawImage(video, 0, 0, canvas.width, canvas.height); const c = document.getElementById('picture'); c.toBlob((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); var nowDate = new Date(); var year = nowDate.getFullYear(); var month = nowDate.getMonth()+1; var date = nowDate.getDate(); var hours = nowDate.getHours(); var minutes = nowDate.getMinutes(); var Seconds = nowDate.getSeconds(); var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒'; a.download = today + '.png'; a.href = url; a.click(); a.remove(); setTimeout(() => { URL.revokeObjectURL(url); }, 1E4); }, 'image/png'); }); }; </script> </body> </html> <footer id="footer"> <p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p> <p class="js-pagetop scroll-top"><a href="#">Page Top</a></p> <small>&copy; copyright.</small> </footer> すべてコピペで使用できます まとめ 今回はフロントカメラ編を作成してみました 今度は、リアカメラ編を、投稿します お待ちください 参考になってくれると辛いです 　

Vuetifyではルールに従ったクラス名を設定するとCSSを書かなくてもスタイルが適用されることを知りました。 そんな便利なCSSのクラスを書き溜めていきます。 文字 スタイル クラス名の書き方 例 参考リンク 文字色 {色名}--text red--text カラーネーム一覧 濃さ text--{lighten｜darken}-{n} text--lighten-1 マテリアルカラーパレット — Vuetify Display 設定したいこと クラス名の書き方 例 参考リンク 画面用 d-{breakpoint(省略可)}-{value} d-lg-none Display helpers — Vuetify 印刷用 d-print-{value} d-print-table-row Flexbox 設定したいこと クラス名の書き方 例 参考リンク コンテナの幅 d-{breakpoint(省略可)}-{flex｜inline-flex} d-sm-flex FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）｜IT工房｜AI入門とWeb開発 方向(flex-direction) flex-{breakpoint(省略可)}-{row｜column}-{reverse(省略可)} flex-column-reverse CSS Flex helpers — Vuetify 横方向の寄せ(justify-content) justify-{breakpoint(省略可)}-{start｜end｜center｜space-between｜space-around} justify-sm-start 【CSS】Flexboxの各プロパティの挙動を確認してみる｜KuzLog 縦方向の揃え(align-items) align-{breakpoint(省略可)}-{start｜end｜center｜baseline｜stretch} align-sm-start 折返し(flex-wrap) flex-{breakpoint(省略可)}-{nowrap｜wrap}-{reverse(省略可)} flex-wrap-reverse 順番(order) order-{breakpoint(省略可)}-{first｜last｜{n(1~12)}} order-md-first marginとpadding 設定したいこと クラス名の書き方 例 参考リンク margin m{direction}-{breakpoint(省略可)}-{size｜auto} ma-auto CSS スペーシング・ヘルパー — Vuetify padding p{direction}-{breakpoint(省略可)}-{size｜auto} pa-md-4 Vue.js】Vuetify初心者が知っておきたい便利な知識5選｜まさきのエンジニア図書館 size 4px毎に増えて、0~16まで指定可能 nをつけると負の値になる direction : 適用対象の位置指定 凡例) o:適用される x:適用されない direction 上 下 左 右 t o x x x b x o x x l x x o x r x x x o x x x o o y o o x x a o o o o