Qiita

Qiita’s articles imported from Qiita

Qiita

D3のコードをES5からES6に書き直す場合はthisの扱いに注意

はじめに ES5書かれていたd3のコードをES6に書き直した際に、文法的には間違っていないのにエラーが発生したのでメモ。 問題 selectAll()で取得した要素をeach()でループ処理する際に、各要素を適切に取得できていなかった。 エラー箇所 修正後 d3.selectAll('.hoge') .each(d => { const fuga = d3.select(this); // DOM内にhogeクラスはあるのに変数fugaがundefinedてしま...
Qiita

気象庁防災情報XMLとD3.jsを使って地震の震度分布図を作る

はじめに ちょっとした要望から地震の震度分布図を作ることになりました。 この記事では構成の解説や感想をまとめています。 震度分布図を作るといってもやり方はいろいろあります。例えばArcGISのようなGIS系ソフトを使えば、手軽にグラデーションで表現することも可能です。 引用元: ユーザーのデータを活かす、豊富なオンラインマップコンテンツ ただし今回は画像生成機能をシステムに組み込む予定だったため 、GUIソフトは利用しませんでした。 また仕様(要望)として「高品質かつ後の編集用にベク...

Qiita

傾斜をつけた割り勘計算ツールを作ってみた

はじめに 忘年会等の飲み会イベントで幹事を任されるのは若手の宿命。 かく言う私も例外ではありませんでした。私の勤務先の場合、社員の年齢差が大きいため傾斜をつけることがほとんど。ただ、この傾斜計算、参加者全員分の年次を把握したり傾斜の具合を微調節したりと意外に面倒で時間をとられます。 いい感じのサービスがないか検索してみたものの、PCサイト用のものはスマホでレウアウトが崩れるし、スマホ向けにはネイティブアプリばかりでPCからは利用できず。意外にもPC・スマホ双方で適切に動くものは見つけられ...

Qiita

vue.jsで画像中にバウンディングボックスを表示させてみる

はじめに 機械学習関連で検出や認識などをしていると、下図みたいに画像中の結果部分を強調表示したくなるときがありました。今回は、デモサイトの開発にvue.jsを利用していたので、コンポーネントとして実装してみました。 やり方 調べてみると、いろんなやり方があるようで SVG Canvas 外部のサーバで処理して結果を受け取る etc... 試してみた結果、vueのテンプレート操作と相性が良かったSVGを使うことにしました。 コンポーネント内での処理 至って簡単。 svg...
Qiita

Nuxtで特定パス配下にサイトを公開する際の設定

はじめに 最近、Nuxtを利用してサイトを作りましたが、諸事情によりドメインのルート配下ではなく、特定パス配下で公開する必要がありました。ルーティングに加えて、今回導入していたPWAにおいても設定が必要でしたので、そのメモです。 想定するサイト公開URL https://yourdomain.com/yourpath サイト開発環境 Nuxt @nuxtjs/pwa (@nuxtjs/onesignal) 設定内容 /* ** Module configuration *...
Qiita

QiitaにCodePenを埋め込めない問題の対策

はじめに QiitaにはCodepenを埋め込めるはずですが、新しく作成したCodepenはなぜか正常に埋め込めませんでした。 Qiitaで記事にCodePenが埋め込めるようになりました 埋め込んだ結果はこんな感じ。 原因 codepenが生成する埋め込み用コード内に含まれるscriptのsrcが変更されていた。 赤枠の部分

<script async src="https://static.codepen...