MotoJapan's Tech-Memo

技術めも

css

【Javascript】非同期実行を実装し、ボタンを押したフィードバックを全画面に行う 【お家IT#16】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 そもそもの問題 非同期にする方法 実装 前回までで、javascript/CSSを用いて撮影画面を作成した。 最後にUIの完成度を高めたいので撮影ボタンを押したらバックグラウンド全体が青…

【CSS】接頭句の違い "#"と"." 【お家IT#15】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 前回は、ボタンの透過度を設定した。 今回は、基礎的な話でなんとなく使っていたCSSの接頭句の違いを書く。 前々回のコードをコピーしたのが下記。"."で開始するstyleは、classに…

【CSS】半透明(透明度)の設定方法 【お家IT#14】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 実装 結果 前回は、レイアウトの重ね合わせを実装した。 今回は、ボタンの透過度を設定したい。 完成イメージ 前回からの続きだが、ボタンが透過して下レイヤーの映…

【Javascript / CSS】divタグでcanvas等のレイアウトを重ねる方法 【お家IT#13】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 完成イメージ 基本方針 div要素で重ねわせ方法と実装 ポイント 実装 結果 前回は、カメラ撮影枠を作成するために、カメラリソースの切り替えによるVideo要素のサイズ変化を検出し…

【Javascript】カメラ(インカメラ/アウトカメラ)を切り替える方法 【お家IT#11】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp 目次 参考資料 MediaDeviceInfoの解説とUserMediaの使い方手順 前回からWebカメラ周り(Video要素やwebRTC, UserMedia)の操作を進めていたが、カメラリソース周りを今回進める。 やり…

【Javascript】video/canvasを上下180度反転(回転)させる方法 【お家IT#10】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 Videoの回転 Canvasの回転 参考資料 前回までの投稿でバックエンドとフロントエンドの通信周りは整理した。 ここからはWebカメラの操作を進める。今回は、video/canvasを上下180…