備忘録

備忘録

JavaScript

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

Ⅰ. はじめに Ⅱ. やり方 1. puppeteer をインストールする 2. サンプルプログラムを書く 3. 実行する 実行結果 参考 その他 Ⅰ. はじめに タイトルの通り「puppeteer を利用してWebページのスクリーンショットを撮る方法」です。 Ⅱ. やり方 1. puppeteer をイ…

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で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.png', 'img/rarity.png']; const context = document…

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する方法

Ⅰ. はじめに タイトルの通り「FetchAPIを使ってGET/POSTする方法」です。 2017/12/16時点でIE11はサポートされていません。 https://caniuse.com/#search=fetch Ⅱ. GETする サンプルプログラム async function Get() { var url = 'https://jsonplaceholder.t…

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="currentPage"></component> </v-ons-splitter-content> import HomePage from './components/HomePage' import AboutPage from './…

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の開発者ツールを無効にする

Ⅰ. はじめに 開発者ツール(デベロッパーツール)を使えなくする方法です。開発者ツールが使える状況ではデバッガ等の強力な機能が利用可能になります。 JavaScriptの難読化を行っていてもデバッガが利用可能なので何らかの解析が可能になります。 そういっ…

Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。 http://kagasu.hatenablog.com/entry/2017/07/24/082405上記で作った環境にBootstrap v4をインストールする方法です。 Ⅱ. やり方 1. bootstrap-vue をインストール $ np…

Vue.js + webpack で helloworld する

Ⅰ. はじめに タイトルの通り「Vue.js + webpack で helloworld する」方法です。 Ⅱ. やり方 1. vue-cliのインストール $ npm install -g vue-cli 2. Vue.js + webpack のテンプレートを使って初期化する $ vue init webpack my-project $ cd my-project $ np…

Vue.jsでaxiosを使ってJSONデータを利用する

Ⅰ. はじめに タイトルの通り「Vue.jsでaxiosを使ってJSONデータを利用する」サンプルです。FetchAPIを使う方法はこちら http://kagasu.hatenablog.com/entry/2017/12/16/163725以下のJSONから [ { "name" : "name001" }, { "name" : "name002" }, { "name" :…

一時的なメールサービスのAPIサーバを作る

Ⅰ. はじめに 一時的なメールアドレスを作成するサービスはいくつか存在します。 一時的なメールアドレスを作成する - 備忘録しかし、どのサービスもAPI経由でのアクセスが出来ないものばかりです。 送信されるリクエストを解析してサービスを利用する事も可…

Chrome UserAgentをワンクリックで切り替える

Ⅰ. はじめに Google Chrome はデベロッパーツールや拡張機能でUserAgentを簡単に変更することが可能です。 しかし、簡単といってもクリック回数が1回で切り替わるわけではありません。1クリックのみでトグル式にUserAgentを変更するツールが存在していなかっ…

Chrome Extension 拡張機能 アイコンクリック時に何かする

Ⅰ. はじめに ウィンドウを持たせずに、アイコンクリックで何かアクションを起こしたい場合に利用できます。 Ⅱ. サンプル manifest.json { "background": { "scripts" : [ "js/background.js" ] } } background.js chrome.browserAction.onClicked.addListene…

JavaScript難読化ツールの紹介と比較

Ⅰ. はじめに Ⅱ. 比較 1. JavaScript obfuscator 2. Javascript Obfuscator 3. jjencode 4. Closure Compiler 5. /packer/ 6. YUI Compressor 7. aaencode 8. emojify-webpack-plugin 複合ツール JavaScriptbeautifier JStillery おまけ SourceMapがある場合…

Highcharts 桁をカンマで区切る

Highcharts.setOptions({ lang: { // 小数点の文字を指定 decimalPoint: '.', // 桁区切りの文字を指定 thousandsSep: ',' } }); var chart = new Highcharts.Chart({ tooltip: { // 桁区切り有効、少数点第1位まで pointFormat: "Value: {point.y:,.1f} mm"…

AngularJS ng-repeatでn以上、n以下の値をフィルタする

Qiitaに投稿しました。 qiita.com

AngularJS ng-repeatで任意のキーを指定する

http://codepen.io/kagasu/pen/qNJLXZ

jQueryMobileでinput type="text"を横に並べる

http://jsfiddle.net/FabyD/ ↑ 百聞は一見にしかずinputのstyle属性とCSSの両方でdisplay: inline;する必要がある。情報元 http://stackoverflow.com/a/17041487

jquery.tablesorter カンマ区切りのソートに対応させる

百聞は一見にしかず https://jsfiddle.net/86rgf7eu/ $(function() { $.tablesorter.addParser({ id: "fancyNumber", is: function(s) { return /^[0-9]?[0-9,\.]*$/.test(s); }, format: function(s) { return $.tablesorter.formatFloat(s.replace(/,/g, '…