ブログ

読んで思い出す。忘れるために書く

JavaScript

Nuxt.js + Firestore でデータを引っ張ってくる

Nuxt.js + Cloud Firestore でドキュメント データを引っ張ってくるコードが書けた、のでその記録 とくに手順とかは説明しない リポジトリは gouf/firebase_demo で、実際にデータを表示させてる部分は ここ, 設定は ここ 詳しくは公式ドキュメントを参照さ…

Nuxt.js + Netlify に入門した

とりあえず、「ボーナスステップ」まで進めてのデプロイまで リポジトリを作った github.com Netlify に デプロイした Netlify にデプロイした Hello ページ このコミット で、Hello の表示以外に /fun で ページが表示される ように設定してる Nuxt.js を利…

Q. ワークポート「eコンシェル」でマッチしてない求人情報を非表示化したい

A. つぎのコードスニペットを開発者コンソール上で実行する // 地域絞り込み Array.from(document.querySelectorAll('.card-info__text.ng-binding')) .filter(x => { return !x.innerHTML.match(/.+万.+/) }) /* 年収レンジの表示以外を収集 */ .filter(x =…

OpenWeatherMap API と連携して天気予報を表示する

「Ruby on Rails - Rails 天気予報取得 表示|teratail」で、質問者によって書かれた JavaScript との連携方法を調べてみた リポジトリ 書いたコード 大まかな処理内容 Links リポジトリ GitHub にリポジトリを作った : gouf/open_weather_map_demo - GitHub…

HTML Drag & Drop API で要素を直感的に移動する

モクモク会でも同様のコードを書いた gouf.hatenablog.com 今回はコードの公開が目的 教材の部分と絡んだコードにならないよう、Rails から分離した See the Pen Drag & Drop API Demo by Gou Furuya (@gouf) on CodePen. Links HTML ドラッグ&ドロップ API…

Q. 求人情報サイトで重複表示されている企業名を一括削除したい (type)

A. 次の JavaScript を開発者コンソール上で実行する var companyNameSet = [...new Set(Array.from(document.querySelectorAll('p.company-name')).map(elm => elm.textContent))] var duplicatedElements = companyNameSet.map(name => Array.from(documen…

Q. 求人情報サイトで古くなった情報を一括削除したい (type)

A. 次の JavaScript を開発者コンソール上で実行する document.querySelectorAll('.mark').forEach(function(elm) { elm.click() }) 対象ページは「type.jp/mypage/scout_list.do」 削除ボタンとして用意されている ☓マーク (.mark) が拾えれば 別ページでも…

Q. HTML 入力フォームの「onpaste 無効化」を解除したい

A. 開発者コンソール から当該要素を見つけて、onpaste 設定値を無効化したノードに差し替える // 開発者コンソール上での操作 // eg.「パスワードの入力を確認してください」 // がペースト無効化状態にされた input 要素 el = document.querySelector('inp…

Q. クリックしたときに指定した anchor タグへスムーズにスクロール移動させたい

A. querySelector() + scrollIntoView({}) を使う // 次のような例が考えられる $('#foo').on('click', function() { document.querySelector('a[name="hello"]').scrollIntoView({ behavior: 'smooth' }); }); Links Smooth Scrolling | CSS-Tricks Element…

10分で学ぶ Vuex (参考リンク)

結構駆け足だけれど 最初の一歩としては実際に動作するものができるのでよい動画だと思った Learn Vuex In 10 Minutes (Vue.js State Management) - YouTube 公式ドキュメントも併せて読みたい 動画を観ながら手を動かして git にコミットしたモノを GitHub …

いくつかのランダムな数を書き出す

teratail.com 質問を見掛けて、コードを書いたので、こちらにメモ // Accepts size of generates and number of upto with Object function randomNumbers (params) { return ( Array.apply(null, Array(params.size)) .map(() => { return Math.floor(Math.…

キーボード操作で <input/> を"インデント"させる

前回に続き、機能を作る gouf.hatenablog.com IndentInput.vue, Editor.vue 2つのコンポーネントを作る まとめ わからなかったこと ゴール <template/> を記述する <script/> を記述する <style/> を記述する Link まとめ Vue.js 上で使える CSS の scoped はコンポーネントの中でスタイ</style/></script/></template/>…

キーボード操作で <input/> を増減させる

ゴール 前提 説明しないこと コンポーネントの作成 <tamplate/> の記述 <script/> の記述 $nextTick $refs キーコード デフォルト キーコード一覧 キーコード 一覧の拡張 Links ゴール コンポーネント、「InputEditor」を作成する 機能は次の通り実装する: ボタンクリックで要素</script/></tamplate/>…

Rails に WYSIWYG エディタ Froala を召喚する

リポジトリつくった(全体で7コミット) github.com 詳細はコミットログ参照のこと <textarea/> に JavaScript での初期化を仕掛けて、いい感じのエディタを召喚できる キャプチャ画像はプラグインとか何も入れてないスッピンの状態 30 に届きそうな数のプラグインで拡張</textarea/>…

<img/> 要素上にマウスカーソルがある時 src 属性値を表示する

たぶんスマホだと動かない... codepen.io 質問を見かけたので、なんとなくメモ teratail.com

数値に対して桁区切り文字を挿入する

小ネタ codepen.io 手順・考え方 右から数えて3桁ごとに ,を挿入する 数値を配列として1字ずつに分解 並びを反転 左から数え上げて3で割ったあまりが0のときが , を挿入するタイミング あとはまた配列を反転して結合、一連の文字列として返す、それだけ まと…