HTML input要素をラップしたlabel要素

<label> <input type="checkbox"> <div>testtesttesttesttesttesttesttest</div> </label> input要素をlabel要素でラップするとラベル要素自体がチェックボックスのクリック判定対象となる ※divなど他タグではクリック判定対象とはならない <div> <input type="checkbox"> <div>testtesttesttesttesttesttesttest</div> </div> ::beforeなどと組み合わせてinp…

AWS ロードバランサーによるオートスケーリング設定

AWS

①EC2からロードバランサーを作成 ターゲットグループは新規で作成 ②ELB用のセキュリティグループをEC2のあるVPCに新規作成 接続先に既存EC2セキュリティグループを設定 ③ロードバランサーにセキュリティグループを設定 ロードバランサー越しにEC2への接続テ…

AWS 見積もり

AWS

https://calculator.aws/

AWS 見積もり

AWS

https://calculator.aws/

AWS NFS

AWS

①NFS用セキュリティグループを作成 ②NFSを作成 ③EFSのマウントターゲットを設定 ※以下EC2へマウントする場合 ④EC2にEFSクライアントのパッケージをインストール sudo yum install -y amazon-efs-utils ⑤マウント用のディレクトリを作成 ┗mkdir data ⑥NFSのID…

AWS VPC

AWS

サブネットでCIDERを設定(サブネット=ルートテーブル) NACLS(サブネットレベル) VPCごとにセキュリティグループ(インスタンスレベル){プロトコル、ポートなどを設定}

AWS ピアリング接続

AWS

ピアリング接続により、異なるVPCを接続(異なるアカウント間でも可)してVPN化する ①ピアリング接続の作成 ②ピアリング接続の承認 データの通信を許可するにはNACLSとセキュリティグループの許可設定も必要 ③ピア接続するインスタンスのセキュリティグルー…

CORSをプロキシサーバーから解決する

herokuなどでプロキシサーバーを立ててURLを発行 (https://github.com/Rob--W/cors-anywhere/) const response = await fetch(proxyUrl + apiUrl);

gitを使ったherokuへのアプリのデプロイ

git init brew tap heroku/brew && brew install heroku heroku login heroku create git push heroku master

javascript textContent innertext innerHTMLの違い

textContent;改行コードもHTMLタグも処理されない innertext;改行コードが有効、white-spaceが適用される innerHTML;HTMLタグが処理される //参考URL https://qiita.com/RyBB/items/c87af2413c34f9367d00 https://note.affi-sapo-sv.com/js-innerhtml-inn…

Javascript 宣言していないオブジェクトを戻り値にする場合にエラーになる

戻り値などで宣言していないオブジェクトを関数内に直接記述する場合は オブジェクトリテラルを丸括弧()で囲う let func = val => ({ prop1:"val1", prop2:val2 })

HTML/CSS 既存faviconをインポート

<rel="icon" type = "image/png" href="http://www.google.com/s2/favicons?domain=○○○○"> ※domain部分にはamazon.co.jpなどfaviconを実装しているドメインを指定する</rel="icon">

HTML/CSS box-sizing

box-sizing: border-box; paddingとborderを含める box-sizing: content-box; paddingとborderを含めない box-sizing: inherit; 親要素のborder-boxを引き継ぐ //参考URL https://saruwakakun.com/html-css/reference/box-sizing

正規表現

^hoge :hogeから始まる hoge$ :hogeで終わる hoge.fuga :hogeで始まり 任意の文字 fugaで終わる hoge.*fuga :hogeで始まり 任意の文字がn回 fugaで終わる \d{4} \d{1,4} \d{1,4}? [\u \l] [^\u \l] [ab].*$ \bhoge\b //単語として独立したhogeのみにマッ…

javascript setTimeoutのコールバック関数に引数を取る場合の書き方

setTimeoutは引数に関数をとるが、 関数に引数を渡すために()を使用すると関数が実行された評価がsetTimeoutに渡ってくる ・第三引数にとる setTimeout(console.log,1000,"test"); ・無名関数にする setTimeout(function(){ console.log("test"); }, 1000); …

React イベントハンドラー

イベントハンドラーのイベント名はキャメルケースで記述 function App() { return ( <div onClick={()=>{alert("clicked")}}> TEST </div> ); }

mapによる特定のキーバリューの取得

var foodList = { 'オムライス': 450, '焼きそば': 500, 'お好み焼き': 600, '焼き飯': 400 }; //任意のキーワードを指定する var order = ['焼き飯', 'お好み焼き']; var result = order.map( function( value, index, array ) { //配列のキーワードを使っ…

React propsをスプレッド演算子で渡す

const bluelogProps = {title: "TITLE", message:"MESSAGE"} function App() { return ( <div> {/* 個別に入れ込んで渡す*/} <Bluelog title={"asfasdfasdfasdf"} message={"ssdfaf"} /> {/* スプレッド演算子でまとめて渡す*/} <Bluelog {...bluelogProps} /> <FuncSample/> </div> ); } function Bluelog(props) { return( <div> <h1>{props.title}…</h1></div>

React props.childrenによるコンポジション(継承)

{/* 子コンポジション*/} function ColoredText(props){ return ( {props.children} {/ 渡ってきたJSXにアクセスしてレンダリング /} ); } {/*親コンポジション*/} function Bluelog(props) { return( {/子コンポジションにXMLを渡す/} {props.title} {props…

aws cli S3ファイルのキャッシュ設定

AWS

Cloud Frontでキャッシュ更新がされない問題が発生 └S3のファイルのメタデータでCache-Controlを設定することで解決した aws s3 cp s3://dejima/test3/ s3://dejima/test3/ --recursive --exclude '' --include '' --cache-control "max-age=2" --profile ho…

javascript addEventListenerで引数を渡す

const room ; target.addEventListener('click', {_room:room, handleEvent:onClickEvent}); function onClickSend(_room) { console.log(this._room); }; 実引数はthis.〜の形で利用する //参考URL https://note.com/yamanoborer/n/n2e4cc40328b7

ffmpeg フォルダの動画を一括処理

フォルダ内の動画を一括軽量化 for f in */.mp4; do ffmpeg -i "$f" -c:a aac -c:v libx265 -crf 22 -b:v 2500k -s 1280x720 -tag:v hvc1 "${f%.mp4}_.mp4"; done; //参考URL ffmpegでフォルダ内の動画を一括変換する - Qiita

ターミナル 新規テキストファイルを作成

echo text > newfile script text.txt

blender playcanvas用のFBX出力

確認事項 UV設定 └UV展開の乱れを確認 マテリアルシェーダー └余分なノードを削除 書き出し設定 └パスモードをコピーに └FBXバイナリにテクスチャを埋め込み

blender playcanvas用のFBX出力

確認事項 UV設定 └UV展開の乱れを確認 マテリアルシェーダー └余分なノードを削除 書き出し設定 └パスモードをコピーに └FBXバイナリにテクスチャを埋め込み

blender grease pencile

Shift + A グリースペンシルを追加 スナップを切り替え オブジェクトモードでパスやポリゴンラインに変換 オブジェクトデータプロパティ>ジオメトリ>ベベル ポリゴン変換 //参考URL https://www.youtube.com/watch?v=AK94nPjexDo&t=688s

javascript デバッグログの色を変える

console.log('\u001b[31m' + 'Red TEXT '); black: '\u001b[30m', red: '\u001b[31m', green: '\u001b[32m', yellow: '\u001b[33m', blue: '\u001b[34m', magenta: '\u001b[35m', cyan: '\u001b[36m', white: '\u001b[37m' //参考URL https://qiita.com/shuh…

ターミナルからクイックタイムを起動

open -a "quicktime player" //参考URLhttps://chocola.work/mac_os_x_terminal_quicktime_player_starting_command/ オプション -n をつけることによって複数アプリを立ち上げる ブレンダーを複数立ち上げる open -n /Applications/blender.app blender pyt…

ターミナル プロセスを強制終了させる

lsof または ps でPIDを検索 kill -9 PID ※-9で強制終了オプション lsof -P -i:3000 sudo kill -9 13 //参考URL https://it-afi.com/linux/kill-9-%E5%BC%B7%E5%88%B6%E7%B5%82%E4%BA%86%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3-%E3%81%A4%E3%81%91%E…

Google APIで400エラー

GoogleAPI作成の際OAuthの認証情報で"承認済みのリダイレクト URI"の記述で解決 エラー内容 S3のURI https://BUCKETNAME.s3.DOMEIN.amazonaws.com/FOLDERNAME/index.html index.html必要 ローカルホスト https://localhost:5500/ /index.htmlは❌ 127.0.0.1と…