bnsgt's diary

個人的な備忘と日記

JavaScript

【JavaScript】特定のDOM内のgetElementsByNameは取得出来ない

getElementsByNameを使うと、name属性から要素を指定出来る。 document.getElementsByName('input-name')とすると、ページ内の全てのinput-nameというname属性を持つ要素全て取得できる。 例えばformが複数ある中で、特定のformのinput-nameというname属性を…

Pure JSでREST APIの取得方法

webアプリでREST API操作する場合、大体のプロジェクトでaxiosがインストールされていて、webサイト制作だとjQueryがインストールされていて、$.ajax〜で書いていた。 Pure JS(フレームワークなし)での書き方はいつもググっていたので、メモしておく。 var…

Google Chromeの拡張機能(アドオン)を作成・公開する手順

最近、ちょっとしたGoogle Chromeのアドオンを作成・公開してみたので、その手順をメモしておく。 1.作成 manifest.jsonを作成する。 content_scriptsに、使用するcss/jsを指定する。 matchesは、特定のURLで動作させたい場合に指定する。 iconsは、16,48,12…

【JavaScript】レイアウトの中で文字サイズを画面幅に応じて可変にする

cssのfont-sizeの指定の仕方で、vwがある。 100vwで今の画面の横幅いっぱいのサイズを指定できて、10文字で横幅いっぱいにしたければ、font-size: 10vwを指定すれば大丈夫。 ただこれだと、「画面幅」に対して計算されるので、divの中のdivとか、「レイアウ…

JavaScriptのobjectをvalueで並べ替えたい場合

JavaScriptのobjectは、順番は保障されないとのこと。 teratail.com なので、配列に変換してsortしたので、メモ。 // 並べ替えたいオブジェクト const obj = { "a": 0, "b": 3, "c": 1, "d": 2, }; const arr = []; const keys = Object.keys(obj); const va…

未使用なnpm packageを調べる

開発時に入れたものの、結局使わなかったpackageは、なるべく削除したい。 depcheckというコマンドで、不要なパッケージを調べてくれる。 www.npmjs.com インストールして実行の場合 インストール npm install depcheck -g 実行 depcheck インストールせずに…

JavaScriptで、文字列の中からURLを検知してリンクにする

フロントエンドで、文字列の中からURLの部分を検知して、自動的にaタグのリンクを生成する方法をメモ。 こちらの記事の内容で出来た。 ginpei.hatenablog.com サンプル テキストエリアに、URLを含んだ文字列を入力して送信すると、aタグに変換されたhtmlがdi…

JavaScriptでcanvasタグで円グラフを描画する

canvasタグをJavaScriptで制御して、グラフを描画することがあるので、メモ フォームに何パーセントかを入力し、送信したらcanvasタグでそのパーセンテージを描画するサンプル <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Canvasで円グラフ…</meta></meta></meta></head></html>

Cognito Identity PoolsとJavaScriptで、AWSのS3にファイルアップする方法

1.AWSコンソール上で、CORSの設定をする。 以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-exa…

JavaScriptで、AWSのS3にファイルアップする方法

1.AWSコンソール上で、CORSの設定をする。 以下を参考に実施。設定をしないと、クロスドメインリクエスト許可されていないのでエラーになる。 https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html#s3-exa…

Vue.jsで、特定の要素が画面に表示されたら実行したい時に便利なvue-intersect

vue-intersectがシンプルで便利だったので、使い方をメモ。 こちらを参考にインストール github.com NPM npm install vue-intersect --save Yarn yarn add vue-intersect 使い方 使いたいVueファイルに、importして、@enter=で表示した時に実行したいmethods…

JavaScriptだけで、訪問者のIPアドレスをGoogleAnalyticsで取得する方法

静的サイトや外部サービスを利用したサイト等で、PHPの埋め込み不可でJavaScriptだけで訪問者のIPアドレスを取得したい場合についてメモ。 グローバルIPアドレスを取得出来るipifyのAPI(https://api.ipify.org/?format=json)を読み込む。 jsonの中のipとい…

キャンペーン等で使える1日に1回日付が変わると表示されるポップアップの実装方法

サイトに訪れるたびに表示されるのではなく、1日に1回、日付が変わるごとに表示されるポップアップの実装方法についてメモ 方法 初回アクセス時はポップアップモーダルを表示し、cookieを利用してその日の23:59:59まで再度表示されないようにmax-ageプロパ…

年月の選択によって、選択可能な日付が変更されるプルダウン(うるう年判定付き)

inputタグの type=”date” は使わず、年・月・日のプルダウンを分けて、作成したい場合についてのメモ 方法 年が変わるとメンテが必要だったりするのでHTML側には、selectタグ内のoptionを直接記述せず、JavaScriptで生成する。 参考にした記事(https://nkmr…