モノラルログ

マツオ ( @matsuoshi / monaural.net ) のざっくりしたブログです

javascript

Next.js + GitHub Pages でブログを作った

タイトルのとおりです blog starter とかもあったけど、Next.js 全然触ったことなかったのでスターターは使わずに自分で実装してみた https://matsuoshi.github.io/ やったこと マークダウンパーサ (mdx) frontmatter 記事詳細ページ インデックスページ タ…

Add to Trello の代わりになる、Trello用ブックマークレットを作った

愛用していた Trello用の Chrome拡張 "Add to Trello" が、しばらく前から使えなくなってしもうた ので、自分でブックマークレットを作った話です やりたいこと 現在ブラウザで開いているページを、サクッとTrelloにカードとして追加したい。 あとで読む 開…

module.exports されていない関数を rewire でテストする

JavaScript + jest で古いコード、module.exports されていない関数をテストしたかったのですが、rewire というのを使えば可能でした、というメモ たとえばこんなコード function privateSum(a, b) { return a + b } とだけ書かれたファイルがあるとします。…

開いているURLとタイトルを、Markdown形式でクリップボードにコピーするブックマークレット

小ネタすぎてすまん。タイトルのとおりです。 現在開いているページのURLとタイトルを、Markdown形式 ([タイトル](URL) の形) でクリップボードにコピーする、ブックマークレットになります。 javascript:(()=>{d=document;e=d.createElement('textarea');e.…

vue.js で v-for を使って <dl> リストを作るとき

今さら知ったメモ 前提 vue.js で、配列のデータを定義リスト (<dl><dt><dd>) として出力したい。 あれ、v-for でどう書けばいいんだっけ、となった <template> というタグが使える 結論、こんな感じ <dl> <template v-for="item in items"> <dt>{{ item.title }}</dt> <dd>{{ item.description }}</dd> </template> </dl> <template> タグ自体は、実際のレンダリング</template></template></dd></dt></dl>…

Nuxt.js で underscore.js を使う

Nuxt.js で underscore.js を使うためのメモ。 1. vue-underscore を入れる yarn add vue-underscore 2. プラグイン化する /plugins/underscore.js ファイルを作成、中身は以下3行 import Vue from 'vue' import underscore from 'vue-underscore' Vue.use(u…

nuxt.js で scss のグローバルな変数を使用する

nuxt.js で開発するとき、自分で定義した scss の変数や mixinをどのコンポーネントからでもグローバルに使えるようにしたい、というメモ まずは共通のファイルを、/assets/styles/_var.scss あたりに作り、その中で各種変数などを定義しておきます。 // ass…

Vue.js で、フォームの初期値を html側で設定する

インターンの子が困ってたので、一緒にしらべたやつのメモ Vue.js でフォームを扱う 入力フィールド (input や textarea) の初期値は、Vue.js 側ではなく、html にあらかじめ埋め込んだ値を設定したい (この場合は laravel の blade で入れたかった) でまあ…

Googleの検索結果から、日本語ページを対象外にしたり、日本語のみを対象にしたりするブックマークレット

Qiitaに書いた記事の続き qiita.com 英語のみでググりたい 技術系のことをググるとき、検索対象を英語のみにしたい(というか、日本語ページを除外したい)場合が多い 検索結果画面の「ツール」のところからだと すべての言語 日本語のみ の2つしか選べない。 …

Safari や IE で、Cookie を追加・編集・削除したい

メモメモ。 Safari や IE で Cookie を操作したい、という話がありました。 Chrome系なら拡張機能 "Edit This Cookie" あたりを使えば簡単ですね。 chrome.google.com では Safari では? それっぽい拡張機能が見つからない……? ということで、こんな感じで…

ES6 で GAS を書きたくて clasp を導入した

Google Apps Script Advent Calendar 2018 の 7日目です。昨日 6日目は tryforthさんの「CDN版Vue.jsで作るGoogleSpreadsheetお手軽サイドバー」でした。 GAS を ES6 で書きたい…… Googla Apps Scriptは、JavaScript的な文法で気軽に書けるのでありがたいで…

「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」をちょっとずつ読んでるけど、毎日開眼している

まだ読みかけなんですが、いいですねこの本。 タイトルが「開運!なんでも鑑定団」みたいだけど、ほんとに開眼するわ。 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質作者: Cody Lindley,和田祐一郎出版社/メーカー: オライリージャパン発売日: 2013/…

Amazon で今見ているページを、画像つきでMarkdown記法でブログに貼る用のブックマークレット

はてなブログ移行記念のテスト書き込みを兼ねて Amazon で今見ているページを、画像つきでMarkdown記法でブログに貼る用のブックマークレットです javascript:var a = location.href.replace(/^.*\/dp\/(\w+).*$/, '$1'); prompt('','[!['+document.title+']…

javascript で、イベントハンドラのコールバック関数に引数を渡す時の書き方

タイトルどおりですが、javascriptでイベントハンドラのコールバック関数に引数を渡す方法です。 今までは呼び出し時に一度無名関数で囲む、という方法↓でやってたんですが var callback_func = function(arg) { // コールバック処理 console.log(arg); }; $…

tumblr ちょっといじった

■ stereomonaural http://stereomonaural.tumblr.com/僕の tumblr は javascript でちょこちょこいじっておって、画像を鏡面なかんじ(?)で表示するようにしてみたりしています。 ちょこっと修正を加えました。 マウスカーソルがブラウザの右半分にあるときと…

delicious のブックマークレットをポップアップするように+α

最近、はてなブックマークから delicious に乗り換えました。 で、delicious にブックマークを追加するブックマークレットはポップアップする仕様じゃないみたいなので、ポップアップするようにちょっといじってみました。こんなかんじ。 javascript:(functi…