JavaScript関連のことを調べてみた2022年10月07日

会議設計サービスに Lexical を利用して同時編集機能を導入する

こんにちは [UNIBA](https://uniba.jp/ “UNIBA inc.”) 株式会社 の [Z1チーム](https://z-1.works/ “Z1 Web Site”) です。
この記事では [Lexical](https://lexical.dev/ “Lexical.dev”) を用いた同時編集機能を実現し、プロダクトに組み込んだという話をします。

[Lexical](https://lexical.dev/ “Lexical.dev”) を使うと比較的簡単に 同時編集機能ができるかと思います。
プロダクトの一部に同時編集機能を導入したい・・・と思っている方とかの参考になればと思います。

Lexical の使い心地や実装のポイントやハマりどころなどの技術詳細に対しては、別途記事を書きたいと思っています。
今回はそこまで踏み込んで書いていません。あしからず。

## プロダクト紹介と宣伝

Z1 チームでは [SuperGoodMeetings](https://supergoodmeetings.com/) (以下 SGMs)という、会議を中心にプロジェク

chroma.jsについて

## はじめに

色を扱うことの出来る、Javascriptライブラリーのchroma.jsについて調べることがありましたので、書きました
内容は公式ドキュメントと大差ありません

## 概要

– Javascriptでの色の扱いが便利になるライブラリー、カラーマップなども手軽に作成出来る

ドキュメント兼ホームページ

https://gka.github.io/chroma.js/

Github

https://github.com/gka/chroma.js/

ライセンスが若干特殊っぽい

Apache2.0のライセンスを持った色が同梱されてる？
この辺は少し注意した方が良さそうかも

## インストール

– npmの場合

“`
npm install chroma-js
“`

“`
import chroma from “chroma-js”;
“`

– CDNのURL

“`
https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.4.2/chroma.min.js
“`

## 基本機能を触ってみる

稀に使うコード集

## 稀に使うコード集
### ページ内のリンクアドレスを一括コピーします。
※googleやYOUTUBEページではコピーメソッドが使用できないようです。
“`javascript:Chromeコンソール画面にて
copy([…document.querySelectorAll(“a”)].map(e=>e.href).join(“\n”));
//copy(Odocument.querySelectorAll(“a”)).map(key=>document.querySelectorAll(“a”)[key].href).join(“\n”));
“`

### ページ内の画像アドレスを一括コピーします。
※googleやYOUTUBEページではコピーメソッドが使用できないようです。
“`javascript:Chromeコンソール画面にて
copy([…document.querySelectorAll(“img”)].map(e=>e.src).join(“\n”));
//copy(Object.keys(document.querySelectorAll(

TypeScriptでカスタムイベントの型定義をする方法

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要

TypeScriptでカスタムイベント（CustomEvent）の型を定義する方法を紹介します。

CustomEvent定義が必要な要素は以下の三つかと思います。

– `Window`
– `Document`
– `HTMLElement`

それぞれの`EventEmitter`のTypeScriptのデフォルトのEvent定義を拡張する方法を解説していきましょう！

# WindowのCustomEventを登録する

まず、`Window`に対してCustomEventを配信するようなコードがあった場合の解説をします。

`Window`が配信元の場合、`WindowEventMap`というTypeScriptの中に入っている定義を拡張する必要があります。

https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_dom_d_.windoweve

要素のドラッグ移動、回転、拡大などが簡単に実装できるJavaScriptライブラリ「Moveable」の紹介

# はじめに
本記事はページ上の要素のドラッグ移動、回転、拡大縮小などを手軽に実装できるJavaScriptライブラリ、「Moveable」の紹介記事です。
日本語の導入記事があまりなく、「使ってみた」系の記事の数も少ないので導入の手助けになればと思い執筆しています。
初学者のため間違いなどありましたらご指摘いただけますと幸いです。

# Moveableとは
上記でご紹介した通り、要素にさまざまな動きをつけることができるjsライブラリです。
MoveableGithub→https://github.com/daybrush/moveable

# 導入において
導入に関しては[こちら](https://blog.logrocket.com/5-things-you-can-do-with-moveable/)の記事と同じ手順で進めていきます。
またこの記事においては参考記事に
>We’ll use the vanilla JavaScript environment to discuss the features of Moveable.

とあるように、他のライブラリやフレーム

setTimeoutを書くのがめんどいから少し楽にしてみた

1ヶ月ぶりですねこんにちはトマトです

“`js
setTimeout(() => {
console.log(“Hello World”)
},5000)
“`
いっつもsetTimeoutをこんな風に書いていてめんどいなって思って色々してたら
`timers/promises`っていうのが元々入ってるのを発見
使ってみたところ結構楽になったので紹介します。

早速ですがコード
“`js
const time = require(“timers/promises”).setTimeout

async function main() {
await time(5000)
console.log(“Hello World”)
}
main()
“`

自分的にはこっちの方が書いてて楽なので見つけてよかったなと改めて思った。多分みんな知ってる

JavaScriptはやめれないっす
ではまたー

【パブリッシャー】Googleマップにデータを表示してみる（応用：京都編）

GoogleマップAPIを利用したレポート作成についてはこれらの記事
* [Googleマップにデータを表示してみる](https://qiita.com/Miki_Yokohata/items/d781a68c729974c9ddb6)
* [Googleマップにデータを表示してみる（拡張）](https://qiita.com/Miki_Yokohata/items/09b9cffd9ad2dad88465)

で簡単にみてきました。その時はカスタムデータを手作りで作成しました。
またこの記事
* [Googleマップにデータを表示してみる（応用）](https://qiita.com/Miki_Yokohata/items/db7efa7fd7a134094feb)

では札幌市が提供しているデータを利用し応用例として投稿しました。

今回は、京都市が提供しているデータを利用した応用例をもう一例として投稿したいと思います。
京都市のオープンデータポータルサイトでは、数多くのデータが提供されています。その中で**京都市認定レンタサイクル店一覧**といったデータを利用してみます。

JavaScriptで昔懐かしのスネークゲームを作ってみたよ。

# はじめに

JavaScriptの復習もかねて、スネークゲームを作ってみたよ。
ついでにPHPでWebAPIを実装して非同期処理にも挑戦してみた。

# ゲーム画面


# ゲーム本体

https://imoimo.xyz/games/snake_game

# ソース

https://github.com/imoimo2009/snake_game

TypeScript(恐らくJavaScriptでも)で読み込むモジュールを切り替えたかった話

# そもそも何しようとしてたか

`.env`ファイルや環境変数等の情報を元に、使うモジュールが切り替わる場合、使われないモジュールを読み込まなければ、CPUやメモリのリソースを削減できそうだと思い、色々試してみていました。
結論としては、どうしても使われる可能性のあるモジュールは全部読み込ませないといけないようだ、ということに至りました。

# 何をしたか

## `import`文に可変な文字列を仕込む

“`javascript
const param = ‘hoge_1’;
import hoge from `./util/${param}.js`;
“`

これに関しては、`error: The module’s source code could not be parsed: Unexpected token “`. Expected a string literal`と出ました。

同じように、
“`javascript
const param = ‘hoge_1’;
import hoge from ‘./util/’ + param + ‘.js’;
“`

簡単なMarkdownワープロを作りました！

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要

Electronを使って、パソコン上でMarkdownのファイルを編集できるソフトを作ってみましたので、ご紹介したいと思います。

https://tronicboy1.github.io/markdown-editor/

最近は、グループ会社のブログむけに記事を書くことが多くて、いつもQiitaのMarkdownワープロを拝借していました:sweat_smile:が、Qiitaさんに出さないのに申し訳ないなと思い、自分で作っておこうというのがその経緯です。

グループ会社のブログでちょこちょこ出していただいているのでご関心あれば読んでいただければと思います。

FirebaseのFirebase Cloud Messaging 機能でユーザーに通知をNode.jsサーバーから送る方法

## 機能紹介

様々な面白いことができるので以下の動画で思う存分、自慢させていただきます。

### Markdownを一瞬でレンダーする！

筆者が作った[lit-markdown](https://www.npmjs.com/packa

Shopifyテーマ「Dawn」のマイページでYubinBangoを実装する際に都道府県のプルダウンにも適用させたよという話

タイトルの通りだが、ShpopifyのOS2.0デフォルトテーマ「Dawn」でのマイページで使われている都道府県のvalueがローマ字表記のため、YubinBangoを使った都道府県選択がスルーされてしまう現象を解決してみました。

そこまでややこしい実装ではなかったですが、しばらくこの対応が続きそうなので備忘録として。
YubinBangoの使い方や設定の方法は、公式のgithubを見てください。

# アプローチ
* YubinBangoでキャッチした都道府県名をhiddenフィールドに保存
* 都道府県のselectタグからhiddenフィールドの値と合致するoptionを検出
* 検出したoptionに対してselectedを付与して選択状態にする

# リファレンス

YubinBango
https://github.com/yubinbango/yubinbango

# サンプルコード
YubinBangoの設定を行なった後、以下のコードを main-addresses.liquid の“`