Chrome エクステンションで JSONP を呼び出し、結果を background.js に送る方法

※この記事では、Google Chrome エクステンションで、JSONP で提供されている API を呼び出して、その結果を `background.js` に送る方法を説明しています。これがなかなか素直に実装することが出来ず、色々と工夫が必要なのですが、[背景](#背景)だの[問題点](#問題点)だのはいいから結論だけ欲しい方は[解決編](#解決編)を直接ご覧下さい。

# 背景

3 年近く前の更新からずっと何もしていなかったのに、突然思い立って最近フルスクラッチで書き直した「[Feedly はてブ](https://chrome.google.com/webstore/detail/feedly-%E3%81%AF%E3%81%A6%E3%83%96/ggaaakgimbjhmglfoahnaoknmceipgni)」という Google Chrome エクステンションがあります。この記事はその Ver2 を書いている際、はてなブックマーク API の呼び出しで色々と詰まった点ならびにその解決策を知見としてまとめています。

このエクステンションは、Feedly で読み込んでい

JSの文字列比較で少しつまずいたのでメモ

文字列比較で長さが違う場合、不思議なことが起こりました。
意外と知らなかったので記事にしてみました。

JavaScriptでは、大なり小なり演算子を用いてnumber, bigint, string型を比較できます。(大体の言語でできると思うけど)
文字列同士を文字コードで比較できるんです。便利ですね～。
そこでですね、使っていると不思議なことが起こりました。(仕様通りで何も不思議ではないんですが)

“`js
“A” < "A" // > false
“A” < "AA" // > true !?
“B” < "AA" // > false
“`

何故だっ…何故っ…

[仕様書]: https://tc39.es/ecma262/#sec-abstract-relational-comparison
調べても中々出て来ないし[仕様書]まで読みに行くもわからずじまい。(わかってから見返すとちゃんと3のcに書いてあるんですが、仕様書がむずすぎた)
そこに颯爽と現れる神ページ
[javascript 文字列のまま数字を比較すると危険が危ない。](https://chaik

【JavaScript 2020】音声ファイルの可視化をブラウザ上で簡単に試す（Web Audio API）

タイトル通りの内容です。
JavaScriptネタなので、後付けで [JavaScript のアドベントカレンダー](https://qiita.com/advent-calendar/2020/javascript2)の 23日目に登録をしてみたりもしました。

## さくっと可視化を試す
### ソースコードを探す
サンプルは探せばいろいろありそうでしたが、とりあえずサクッと試せそうで分かりやすそうなものを選んでみました。JavaScript関連でよくお世話になる MDN の以下のページのものをそのまま利用できました。

●AnalyserNode.getFloatFrequencyData() – Web APIs | MDN
　https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getFloatFrequencyData

ほぼサンプルそのまま、という利用方法です。ただし注意点があるので補足します。
まずは、以下が手を加える前のサンプルです。

“`html

Amazon Location Serviceプレビューを試してみた

re:Invent 2020で発表され、現在プレビューのAmazon Location Serviceを試してみました。
プレビュー段階ながら東京リージョンで利用できるのは有り難いですね。

# マップリソースを作成する
コンソールへログイン後、Amazon Locationのページへ遷移し、左メニューの`Manage Resources`の`Maps`をクリック
続いて`Create map`をクリック

Nameに任意の名前を入力し、Mapsセクションにてマップタイプというかスタイルを選択、`Create map`ボタンをクリック
![location1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44921/678421b9-d182-3a5c-47

JavaScriptの配列操作でハマった話

つまらないことでハマったので備忘録を残します。

## やりたいこと
長さの決まった2次元配列（`arr`）に`arr[index]`でアクセスして値を更新したい。

## 問題が起きるコード

“`javascript
(function(size){
const arr = new Array(size).fill([]);

for(let i=0;i

[Laravel] 入力フォームにJQuery-UIを使ってサジェスト機能を実装する

## 概要

Laravelプロジェクトを作成後にマイグレーションすると生成されるusersテーブルのデータに対して、JQuery-UIを使ってサジェスト機能を実装するサンプルです。
こんな感じの、名前を途中まで打ち込むとDBから取得したデータを元にサジェストが出るフォームを作ります。

## 実装

コントローラー側は名前(`name`カラム)のコレクションを取得してViewに渡します。

“`php
public function showIndex()
{
$user = new User();
$suggests = $user->select([‘name’])->get();

return view(‘index_view’, compact(‘sugge

VSccodeでの初歩的なミス

フロントエンド開発へのスキルチェンジを目指してUdemyを使って学習していて
その過程でやってしまった本当に初歩中の初歩のミスを書いていきます。
学習している技術はVuejsです。
動画の教材通りにコードを書いて
いざ、ブラウザで表示させようとするのですが
「Failed to compile.　./src/components/HelloWorld.vue Module build failed (from ./node_modules/eslint-loader/index.js): Error: ENOENT: no such file or directory, open ‘C:\Users\user\udemy-test\src\components\HelloWorld.vue’」
のエラーメッセージが。。
「あれ、教材通りのコードを書いたのどうして？」と混乱しました。
Udemyの動画にはQ&Aの項目があり、そちらに講師に直接、質問できる
機能があるのでさっそく質問してみました。
しかし、質問したのが夜だったこともありすぐには返信が来ず、
エラーの原因もわからず焦るばかり

JavaScriptの演算子について

こんにちは。
今回はまた[JavaScript本格入門](https://www.amazon.co.jp/dp/B01LYO6C1N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)の内容のアウトプットをしようかと思います。
##等価演算子と同値演算子とは？
###等価演算子とは
等価演算子「==」は左辺と右辺の値を比較して、等しい場合にはtrue、等しくない場合にはfalseを返す演算子です。
しかし、**オペランドのデータ型によって比較の基準が違ってくる**ので注意しましょう。

[JavaScript本格入門](https://www.amazon.co.jp/dp/B01LYO6C1N/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)では等価演算子を**「オペランドのデータ型が異なっていてもデータ型を変換して『なんとか等しいと見なせないか』を試みる」**と説明しています。
例えば以下のような数値と論理値の比較も等価演算子を使用するとtrueと返ってきます。

“`JavaScript
con

nuxt/content + netlify で爆速ブログ構築

## はじめに
@nuxt/contentを使ってブログを作って公開してみたので備忘録的に一通りの手順を残しておきます。

## @nuxt/content
GitベースのヘッドレスCMSとして動作するモジュールで、“`/content“`ディレクトリ内のマークダウン、JSON、YAML、CSVファイルを取得できます。

## まずは環境構築
create-nuxt-app を使う

“`
$ yarn create nuxt-app プロジェクト名

…
? Choose rendering mode Universal (SSR)
…

“`

一通り終わったら、

“`
$ yarn add @nuxt/content
“`

nuxt.config.jsで以下の設定をします。

“`nuxt.config.js
modules: [‘@nuxt/content’],
generate:{
async ready () {
const { $content } = require(‘@nuxt/content’)
cons

PlayCanvas EditorのコードをGitで管理をするために使えるライブラリ「playcanvas-sync」

PlayCanvas Editorで開発をしていると、ソースコードの管理をPlayCanvas Editorのバージョン管理機能を使用しないで、Gitで管理をしたい場合があります。その際に使える便利なライブラリがplaycanvas/playcanvas-syncです。

ライブラリ(GitHub)
https://github.com/playcanvas/playcanvas-sync

このライブラリは、`PlayCanvas Editor`の`API Token`を使い、ローカルマシーンのアセットをPlayCanvas Editorへ`REST API`経由で同期できるライブラリです。

## 使い方
### PlayCanvas Editorのアセットをローカルマシンに同期する

#### インストール
`pc-sync`は`node.js`の環境で動くライブラリですが、`npm`では公開されていないのでGitHubのリポジトリからインストールする必要があります。

##### 1. リポジトリをクローンします。

“`zsh
git clone git@github.c

リファクタリングに使える俺的JavaScript小技テクニック集5選

JavaScriptとちょっとしたリファクタリングにおすすめのテクニックを晒します。

* 俺的ラインナップ
* ① if文よりも&&演算子
* ② nilガード
* ③ reduce
* ④ enumもどき
* ⑤ ピュアなObject

## ①if文よりも&&演算子
よくあるif文。

“`javascript
const array = []
if (isHoge) {
array.push(“hoge”)
}
if (isFuga) {
array.push(“fuga”)
}
“`

上記の文を `&&` 演算子を使うとすっきり書けます。

“`javascript
const array = []
isHoge && array.push(“hoge”)
isFuga && array.push(“fuga”)
“`

`&&` 演算子は左側がtrueの場合は右側が評価されるので上記のように書くことができます。
なお、配列での処理を例に挙げましたが、オブジェクトでの処理でも活用できます。

“`javascript

2019年警察庁交通事故統計データをdeck.glで可視化してみました

# はじめに
– [2019年警察庁交通事故統計データ](https://www.npa.go.jp/publications/statistics/koutsuu/opendata/index_opendata.html)がオープンデータとして公開されましたので、[deck.gl](https://deck.gl/)の[ScatterplotLayer](https://deck.gl/docs/api-reference/layers/scatterplot-layer)と[HeatmapLayer](https://deck.gl/docs/api-reference/aggregation-layers/heatmap-layer)を用いて可視化してみました。

– 交通事故統計データは以下の警察庁のHPよりcsvファイルがダウンロードできます。
※本記事では、事故発生地点の座標（緯度、経度）を10進数に変換したデータを用いています。
https://www.npa.go.jp/publications/statistics/koutsuu/opendata/2019/open

【Vue.js】メニュー機能の実装　Vue.js導入編 rails6

#はじめに

クリックするとメニューが開いたり閉じたりする機能をVue.jsで実装します。

この記事はrails6でのVue.js導入編です。
また、rails6からはwebpackerが標準装備されてるのでこちらでは省略します。

###目次
1.Vue.js導入
2.Vewのインストール
3.ファイルの読む先を指定
4.エラーの解決方法

#開発環境
Vue 2.6.12
rails 6.0.0
ruby 2.6.5

#実装
それでは実装して行きます〜

#1.Vew導入

###1.1Vewのインストール
まずはVueインストールします。

“`:ターミナル
rails webpacker:install:vue
“`

`hello_vue.js’`と`app.vue`が

React HOOKs×FirebaseでInstagramクローンを作った

## 概要

React×FirebaseによるSPA開発を学ぶために開発しました。



[demo](https://instagram-clone-react-b796c.web.app/)
[github](https://github.com/newt0/instagram-clone-react)

HOOKsやFunctional Componentを使用したReact

React HOOKs×FirebaseでTwitterクローンを作った

## 概要

React×FirebaseによるSPA開発を学ぶために開発しました。


[demo](https://twitter-clone-318d7.web.app/)
[github](https://github.com/newt0/twitter-clone-react)

HOOKsやFunctional Componentを使用したReactの最新の書き方に則ったコードを心掛けているので、Reactを勉強中の方にはGithubレポジトリが参考になると思います。

味気ないので、[レバテック](https://px.a8.net/svt/ejp?a8mat=3BKFPU+5WJRQQ+2JK4+ZTV6Q)と[Lenovo](//af.moshimo.com/af/c/click?a_id=1970216&p_id=1079&p

超爆速でWYSIWYGエディターを組み込む

こんなオーダーが。

「いい感じで記事をかける機能導入して！」
「ヘッドレスCMS使えばすぐできるから！」

ほほう。では軽く調査しよう。

〜数日後〜

いや、簡単にはできないですぜ。少なくとも使用するメリットないっすね。
そもそも、ランニングコストかかりますぜ。

「じゃあ**いい感じに**導入して！」
「できるだけ早くね！」

そんなこんなで、**超爆速**でWYSIWYGエディターを組み込んだ話を。

# 初めに

既存システムは割とレガシー。

– PHP 7.2
– Laravel Framework 7.25.0
– MySQL 5.7
– jQuery 3.5.1
– Bootstrap

# そもそもWYSIWYGエディターとは？

>WYSIWYG（アクロニム: ウィジウィグ）とは、コンピュータのユーザインタフェースに関する用語で、ディスプレイに現れるものと処理内容（特に印刷結果）が一致するように表現する技術。What You See Is What You Get（見たままが得られる）の頭文字をとったものであり、「is」を外したWYSWYG（ウィズウィグ）と呼ばれ

JavaScript + CSS: AnimXYZでCSSアニメーションを簡単に定める

# AnimXYZとは
[AnimXYZ](https://animxyz.com/)は、CSSアニメーションのライブラリ(ツールキット)です。アニメーションさせたい要素にクラスと属性を与えるだけで、簡単にCSSアニメーションが表現できます。

さまざまなアニメーションは組み合わせることが可能です。また、親要素に統一した設定を定めたうえで、アニメーションさせる子要素にはそれぞれ異なる属性を与えることもできます。

本稿がつくる作例は、つぎのサンプル001です。

#### サンプル001■JavaScript + AnimXYZ: Example of CSS animation

時間になったら動画が再生されるサイトを作った

## はじめに

年越しは「ウルトラソウル ハイッ！」でしたいですよね？

でもタイミングを合わせるのが難しい…

そういうときは！

## 時間になったら勝手に動画が再生されるアプリ

令和が始まる瞬間の画像（2019年の年越しのときは撮るの忘れてた）

## なぜこんなアプリを作ったか

「12月31日の23時58分54秒にウルトラソウルを流すとウルトラソウル ハイッ！でちょうど新年を迎えられる」ということをTwitterなどで見て、
もっと楽にウルトラソウルを流したい…なんて思ったのがきっかけです。

それと、他の曲一緒に流して~~うるさい~~**楽しい年越しを迎えたい**ということでこのアプリを作りました。

## 使い方

1. 動画をリストから選ぶ

ランチメンバーをランダムでいい感じに選ぶGASスクリプト


以下のようなURLをクリックするだけで、規定の配列から何人か選んでくれる。

“`
https://script.google.com/macros/s/XXXXX-XXXX/exec
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=2
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=3
https://script.google.com/macros/s/XXXXX-XXXX/exec?num=4
“`

以下のようなスクリプトをGASにいれて、Webアプリケーションとして公開したらOK

“`js
function doGet(e) {
if(!isOurG

JavaScript　DOM操作で要素の追加と削除を行う

#要素を追加する
“`html:index.html

JavaScript Practice

今日の天気