備忘録

備忘録

JavaScript

JavaScriptで正規表現を利用する方法

Ⅰ. はじめに タイトルの通り「JavaScriptで正規表現を利用する方法」です。 Ⅱ. サンプルプログラム const text = ` name:tanaka,age:10 name:yamada,age:20 ` let matches: RegExpExecArray | null = null const reg = new RegExp('name:([a-z]{1,}),age:([0…

Webブラウザでゲームパッドを利用する方法

Ⅰ. はじめに タイトルの通り「Webブラウザでゲームパッドを利用する方法」です。 Ⅱ. 手順 1. サンプルプログラムを書く index.html <html> <body> <script src="/script.js"></script> </body> </html> script.js const buttonPressStates = [] const buttons = [ { id: 12, label: 'UP' }, { id: 13, label: 'DOWN' }, {…

Push APIを利用してPush通知をする方法

Ⅰ. はじめに Ⅱ. 環境 Ⅲ. 手順 1. VAPIDを生成する 2. クライアント側サンプルプログラムを書く 3. Push通知を送信する為のサンプルプログラムを書く 実行結果 FAQ Q1. 通知されない Q2. C#でVAPIDを生成したい 参考 Ⅰ. はじめに タイトルの通り「Push APIを…

JavaScriptで日付をフォーマットする方法

Ⅰ. はじめに タイトルの通り「JavaScriptで日付をフォーマットする方法」です。 Ⅱ. 手順 1. サンプルプログラムを書く function formatDate (date) { return date.toLocaleDateString('ja-JP', { year: 'numeric', month: '2-digit', day: '2-digit', hour: …

axiosを利用してファイルアップロード進捗を表示する方法

Ⅰ. はじめに タイトルの通り「axiosを利用してファイルアップロード進捗を表示する方法」です。 Ⅱ. 手順 1. サンプルファイルを用意する index.html <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <form id="form001"> <input type="file" name="file"> <input type="submit"> </form> <progress id="progress001" value="0" max="100"></progress></body></html>

JavaScriptでセレクターを利用する方法

Ⅰ. はじめに Ⅱ. Webブラウザの場合 Ⅲ. NodeJSの場合 1. 必要なパッケージをインストールする 2. サンプルプログラムを書く 参考 Ⅰ. はじめに タイトルの通り「JavaScriptでセレクターを利用する方法」です。 Ⅱ. Webブラウザの場合 document.querySelector('b…

WebブラウザのJavaScriptでテキストファイルの文字コードを自動判定してUNICODEに変換する方法

Ⅰ. はじめに タイトルの通り「JavaScriptでテキストファイルの文字コードを自動判定してUNICODEに変換する方法」です。 Ⅱ. 手順 1. サンプルプログラムを書く <html> <body> <input type="file" id="file001" accept="text/plain"> <script> const file001 = document.getElementById('file001') file001.addEventListener('change', o</body></html>…

WebブラウザのJavaScriptでテキストファイルの文字コードを取得する方法

Ⅰ. はじめに タイトルの通り「WebブラウザのJavaScriptでテキストファイルの文字コードを取得する方法」です。 Ⅱ. 手順 1. サンプルプログラムを書く <html> <body> <input type="file" id="file001" accept="text/plain"> <script> const file001 = document.getElementById('file001') file001.addEventListener('change', onFileCha</body></html>…

Node.jsでnodemailerを利用してGmailを送信する方法

Ⅰ. はじめに Gmailは2022年5月30日に「安全性の低いアプリ」からのアクセスを終了します。 例えばSMTPでパスワード認証を利用している場合が該当します。 この記事ではOAuth認証をする事によって2022年5月30日以降もメールを送信する方法を紹介します。 Ⅱ. …

Webページの特定要素を画像として保存する方法

Ⅰ. はじめに タイトルの通り「Webページの特定要素を画像として保存する方法」です。 方法 1. サンプルプログラムを書く index.html <html> <body> <button onClick="saveImage()">画像保存</button> <div id="test"> <h1>Hello world!</h1> <table> <tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table> </div> <script> function saveImage() …</body></html>

node-fetchでCookieを設定する方法

Ⅰ. はじめに タイトルの通り「node-fetchでCookieを設定する方法」です。 Ⅱ. やり方 1. サンプルプログラムを書く const fetch = require('node-fetch'); (async () => { const url = 'https://google.com' // 初回リクエスト。Set-Cookieレスポンスヘッダを…

node-fetchでproxyを設定する方法

Ⅰ. はじめに タイトルの通り「node-fetchでproxyを設定する方法」です。 Ⅱ. やり方 1. 必要なパッケージをインストールする npm install node-fetch npm install http-proxy-agent npm install https-proxy-agent 2. サンプルプログラムを書く index.js cons…

Sheets APIを利用してスプレッドシートに値を書き込む方法

Ⅰ. はじめに タイトルの通り「Sheets APIを利用してスプレッドシートに値を書き込む方法」です。 Ⅱ. やり方 1. Google Developers Consoleにアクセスする https://console.developers.google.com/?hl=ja 2. 新しいプロジェクトを作成する 3. ライブラリを選…

Twitterのトレンド(おすすめ)にNGワードを設定して非表示にする方法

Ⅰ. はじめに タイトルの通り「Twitterのトレンド(おすすめ)にNGワードを設定して非表示にする方法」です。 Ⅱ. やり方 1. Tampermonkeyをインストールする https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo 2. 以…

Node.js用のロガー(winston)の使い方

Ⅰ. はじめに タイトルの通り「Node.js用のロガー(winston)の使い方」です。 Ⅱ. やり方 1. winstonをインストールする npm i winston 2. サンプルプログラムを書く const winston = require('winston') const moment = require('moment') const myFormat = …

Moment.jsの使い方

Ⅰ. はじめに タイトルの通り「Moment.jsの使い方」です。 Ⅱ. やり方 1. Moment.js をインストールする npm i moment 2. サンプルプログラムを書く const moment = require('moment') // 現在日時 console.log(moment().format('YYYY/MM/DD HH:mm:ss')) // Da…

Vue.js + Chart.jsで数値をカンマ区切りで表示する方法

Ⅰ. はじめに タイトルの通り「Vue.js + Chart.jsで数値をカンマ区切りで表示する方法」です。 Ⅱ. やり方 1. 必要なパッケージをインストールする npm i vue-chartjs npm i chart.js 2. サンプルプログラムを書く src/components/LineChart.vue <script> import { Lin…

JavaScriptでAESで暗号化と複合する方法

Ⅰ. はじめに タイトルの通り「JavaScriptでAESで暗号化と複合する方法」です。 Ⅱ. やり方 1. crypto-jsをインストールする npm i crypto-js 2. サンプルプログラムを書く import CryptoJS from 'crypto-js' const key = CryptoJS.enc.Utf8.parse('aaaaaaaaaa…

Laravel MixのJavaScriptを難読化する方法

w* Ⅰ. はじめに タイトルの通り「Laravel MixのJavaScriptを難読化する方法」です。 javascript-obfuscator の webpackプラグインである webpack-obfuscator を利用した方法をこの記事で紹介します。 Ⅱ. やり方 1. webpack-obfuscator をインストールする np…

JavaScriptをCLIで整形する方法

Ⅰ. はじめに JavaScript の整形は以下のWebサイト、テキストエディタの拡張機能等があります。https://beautifier.io/ https://marketplace.visualstudio.com/items?itemName=HookyQR.beautifyしかし、ファイルサイズが大きい場合は上記の方法では処理ができ…

Firebase+webpack+Vue.jsでチャットを作る方法

Ⅰ. はじめに Ⅱ. やり方 1. 必要なCLIツールをインストールする 2. Vueプロジェクトを作成する 3. firebaseをインストールする 4. Firebase でプロジェクトを作成する 5. Firebase の Realtime Database のルールを変更する 6. プログラムを書く 7. 実行する …

Puppeteer を利用してWebページのスクリーンショットを撮る方法

Ⅰ. はじめに Ⅱ. やり方 1. Puppeteer をインストールする 2. サンプルプログラムを書く 3. 実行する 実行結果 GUIを持たないLinuxで実行する場合 1. ライブラリをインストールする 2. 日本語フォントをインストールする 3. サンプルプログラムを書く 4. 実行…

OnsenUIのons-listを一番下までスクロールする方法

Ⅰ. はじめに タイトルの通り「OnsenUIのons-listを一番下までスクロールする方法」です。 Ⅱ. やり方 サンプルプログラム <html> <head> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> </link></link></head></html>

JavaScriptで非同期的にsleepする方法

Ⅰ. はじめに タイトルの通り「JavaScriptで非同期的にsleepする方法」です。 Ⅱ. やり方 サンプルプログラム async function sleep (msec) { return new Promise(resolve => setTimeout(resolve, msec)) } (async () => { console.log('hello world 1') await…

Laravel MixにESLintをインストールする方法

Ⅰ. はじめに タイトルの通り「Laravel MixにESLintをインストールする方法」です。この記事は、以下の記事の通り作成した環境にESLintを導入する事を想定して書かれています。 Laravel 7.x で Vue.js を使う方法 - 備忘録 Ⅱ. やり方 1. 必要なパッケージをイ…

iframeの高さを自動調整する方法

Ⅰ. はじめに タイトルの通り「iframeの高さを自動調整する方法」です。 Ⅱ. やり方 サンプルプログラム <html> <body> <div> <iframe id="myiframe"></iframe> </div> <script> let myiframe = document.getElementById('myiframe') // 100行ダミーテキストを入れる let str = ''; for (let i = 0; i < 100; i++) { str += i</body></html>…

Canvasで画像を重ね合わせる方法

Ⅰ. はじめに タイトルの通り「Canvasで画像を重ね合わせる方法」です。 Ⅱ. サンプルプログラム index.html <html> <body> <canvas id="my-canvas" width=300 height=300></canvas> <script src="index.js"></script> </body> </html> index.js // 優先度が低い順に画像パスを指定する。(上に表示したい画像は後ろに指定する) const imgs = ['img/character.png', 'img/frame…

Vue+webpackでlodashを使う方法

Ⅰ. はじめに タイトルの通り「Vue+webpackでlodashを使う方法」です。 Ⅱ. やり方 1. lodashをインストールする npm install lodash 2. src/main.js に 以下をコピペする import lodash from 'lodash' Object.defineProperty(Vue.prototype, '$lodash', { val…

FetchAPIを使ってGET/POSTする方法

Ⅰ. はじめに Ⅱ. GETする サンプルプログラム 実行結果 Ⅲ. POSTする(JSON) サンプルプログラム 実行結果 Ⅳ. POSTする(application/x-www-form-urlencoded) サンプルプログラム 実行結果 Ⅰ. はじめに タイトルの通り「FetchAPIを使ってGET/POSTする方法」です…

HTML5でプログレスバーを使ってカウントダウン、カウントアップをする方法

Ⅰ. はじめに タイトルの通り「HTML5でプログレスバーを使ってカウントダウン、カウントアップをする」方法です。 progress要素とoutput要素はHTML5で導入されました。よって、HTML5以降のみで動作します。 Ⅱ. サンプル 1. 10秒カウントダウン codepen.io 2. …