MotoJapan's Tech-Memo

技術めも

web

【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】カメラ起動前後のvideoタグのサイズ変化を検出する 【お家IT#12】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 具体例:Video要素のプレビューの中央に撮影領域を作りたい 実装:Video要素のサイズ変化を検出、確定時のサイズを取得 前回は、UserMediaのカメラリソースを切り替えるなどの話…

【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…

【flask to Javascript】jsonデータを送信/受信する方法(jsonify) 【お家IT#9】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装 (python:flask) 受信側実装 (javascript) 前回までで、javascript->flaskへbase64を送信した。 これを画像処理して、その結果を返信するときjsonだと汎用性も高い。 …

【flask】Replyヘッダーに「Access-Control-Allow-Origin」を追加する【お家IT#8】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 対策 参考資料 前回は、base64でバックエンドに画像を送信したが、次のエラーが表示れている。 XMLHttpRequest cannot load https://192.168.0.100:12345/hoge_image_processing.…

【Javascript to flask】base64で画像を送信/受信する方法 【お家IT#7】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 base64とは 送信側実装(Javascript) 受信側実装(python : flask) 参考資料 前々回、ChromeでWebカメラを起動/撮影した後、Canvasに書き出すところまで進めた。 前回は、Ajaxを利…

【Javascript to flask】FormDataを送信/受信する方法 【お家IT#6】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 送信側実装(Javascript) 受信側実装(python : flask) 対応関係 前回まででWebカメラで撮影した画像をCanvas領域にコピーするところまで終えた。 が、根本的にJavascript - python…

【flask】https対応Webサーバーをバックグランド実行する方法 【お家IT#5】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 標準入力をバックグラウンドで無視すると落ちる バックグラウンド実行対策 参考資料 標準入力をバックグラウンドで無視すると落ちる 前回 flaskをhttps化 (http over ssl)したが…

【flask】Webサーバーをhttps対応する方法 【お家IT#4】

本件の実装の一部 motojapan.hateblo.jp前回の続き motojapan.hateblo.jp目次 SSL対応の手順 秘密鍵を作成 秘密鍵から公開鍵を作成 デジタル証明書を作成 flask上でHTTPSサーバー起動 おまけ JavascriptからWebカメラを起動しようとしたら下記コードで怒られ…

【Javascript】Webカメラを起動&撮影する 【お家IT#3】

本件の実装の一部 motojapan.hateblo.jp カメラ起動 参考にした記事① 参考にした記事② カメラ撮影 Webアプリ上でHTML+JSでWebカメラを動作させたい。 私の場合、それほど特殊なWebカメラの使い方をするわけでもないし、こういった類の記事は山のようにあるの…

【お家IT#2】Webアプリと画像認識で家の食品名と賞味期限を簡単に登録したい(構想編)

下記記事の続きです。 motojapan.hateblo.jp 構想 Google Spreadsheetを探して、食品名と賞味期限を手入力するのは、実は結構めんどくさい。 なので、Webアプリ開発と画像認識の勉強も兼ねて、下のような構成を構想。 写真を撮影すると商品情報が取得でき、…

【Python】【Webアプリ】flaskで外部公開できないとき

flaskを使っていてウェブアプリを作成時に気づいたことの書き留め何故か外部公開できない。。。 from flask import Flask, render_template, request app = Flask(__name__) .... if __name__ == "__main__": app.run(port=9999) host設定が必要でした! fro…

【 位置情報まわりWebサービス 基礎知識1 】 位置情報を活用したプライベートサービス作り① - 背景、作りたいもの、触りたいもの、制約について

web

位置情報絡みが楽しくなってきてしまったので、画処理プロトは一旦お休みです。 前々回からGPSの話題を取り上げていますが、スマホのGPSのデータとかを他のリソースを組み合わせて、毎日がちょっと便利になるプライベートサービス作ったりできると楽しいんじ…