備忘録

備忘録

JavaScript

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を難読化する方法

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

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する方法」です。 Ⅱ. やり方 サンプルプログラム function sleep (msec) { return new Promise(resolve => setTimeout(resolve, msec)) } (async () => { console.log('hello world 1') await sleep…

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

Vue.js + Onsen UI で ページを切り替える方法

Ⅰ. はじめに タイトルの通り「Vue.js + Onsen UI で ページを切り替える方法」です。 Ⅱ. やり方 1. App.vue を書き換える <v-ons-splitter-content> <component :is="$root.currentPage"></component> </v-ons-splitter-content> 2. main.js を書き換える import HomePage from './components/HomePage' const app = new Vue({ data () { return { currentPage:…

Cordova + Vue.js + Onsen UI + ESLint + webpack で helloworld する

Ⅰ. はじめに Ⅱ. やり方 環境準備 1. vue-cliのインストール 2. cordovaのインストール 3. Vue.js +Onsen UI + webpack のテンプレートを使って初期化する 4. Cordova で 対象プラットフォームとして Android を追加する 実行 Cordova で Androidアプリとして…

Vue.js で 子から親のdataにアクセスする

Ⅰ. はじめに タイトルの通り「Vue.js で 子から親のdataにアクセスする」方法です。 この記事の方法でもアクセスできますが、推奨しません。他componentのデータやメソッド等にアクセスする必要を感じたときはStoreパターンやVuexを学んだ方が良いです。 ま…

ChromeやFireFoxの開発者ツールのブレークポイントを制限する方法

Ⅰ. はじめに Ⅱ. やり方1(シンプルな実装) 1. 以下のHTMLをindex.htmlとして保存する 2. WEBブラウザでindex.htmlを開く 3. 開発者ツールを開く 4. 無限にブレークポイントで止まります。 Ⅲ. やり方2(devtools-detectを利用する方法) 1. 以下のHTMLをinde…

Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。 http://kagasu.hatenablog.com/entry/2017/07/24/082405上記で作った環境にBootstrap v4をインストールする方法です。※2018/12/04追記 現在のbootstrap-vue最新版である…