- 1. Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/現在)
- 2. 外部トリガーからカメラを起動してTeachable Machineに繋げてみる
- 3. クライアント側での添付ファイル読み込みとアップロード
- 4. global object 【JavaScript】
- 5. Qiita APIで特定ユーザーのQiitaの記事を検索する
- 6. Discord.js v14 botの作り方【基礎・メッセージ編】 (2024/現在)
- 7. 遅延シーケンス in JavaScript
- 8. 遅延シーケンスを用いた無限素数列 in JavaScript
- 9. 【TypeScript】オブジェクトリテラルからUnion型を取得するジェネリック型をつくってみた
- 10. 正規表現の先読みを使ってテキストを文区切りで改行する
- 11. 【JavaScript】要素にフォーカスした際にスクロールされないようにする方法
- 12. オフラインでも動く！音声入力メモ帳「タスクス」を開発しました！
- 13. CesiumのQuickStartからつまづいた人がQuickStartを完全に理解してnode.jsで動かすまで
- 14. LeafletでGeoJSONファイルを読み込み、人口で色分けを行ってみる
- 15. 〜家庭内DX〜 バーコードリーダーの作成
- 16. [Obsidian] Calendarが日付以外も書いたタイトルのDaily Notesを認識しないので、直す
- 17. Discord.js v14 botの作り方【基礎・ワークスペース作成編】 (2024/5/21現在)
- 18. Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)
- 19. Discord.js v14 botの作り方【基礎・環境構築編】 (2024/5/21現在)
- 20. Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)
Discord.js v14 botの作り方【基礎・埋め込み編】 (2024/現在)
# 準備中…
2024/5月中に公開します！
外部トリガーからカメラを起動してTeachable Machineに繋げてみる
Node-REDからTeachable Machine（以下、TM）を使う時に[node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils)のカメラで写真を撮影してを使うのが一般的？です。
## カメラボタン以外から起動させたい
このやり方だとカメラボタン以外からの起動ができず、外部のスイッチを押して起動、何かLINEが届いたらカメラ起動など外部トリガーからの起動ができません。
> 
[@sumit_shinde_84/node-red-dashboard-2-ui-webcam](https://flows.nodered.org/node/@sumit_shinde_84/node-red-dashboard-2-ui-webcam)というノードを使うことで外部トリガーからカメラ起動ができます。
> こちらのノードは入力の口
クライアント側での添付ファイル読み込みとアップロード
VercelのNext.js/Reactアプリでファイルアップロードを実装しようとしましたが、アップロードする画像を保存したいわけではない（生成AIに画像ファイルの解釈をしてもらうだけなので処理後は破棄してOK）ので、簡易的な方法を探しました。
結果、クライアント側でBase64に変換してからサーバー側に送信することにしました。
デメリットとしては通信量が多くなります。“`TypeScript
{
// Read the file content and convert to data URI in the client side
const selectedFile = evt.target.files![0];
if (!selectedFile) {
setImageUrl(”)
global object 【JavaScript】
# はじめに
global object とは、簡単に言えば「コードのどこからでもアクセスできるオブジェクト」です。
ホスト環境（Node.jsや各種ブラウザなど）によって実装が変わります。※コメントいただきました。
`globalThis`を使用すればホスト環境に関係なくglobal objectにアクセスできるようです。
ただし、挙動が変化することはないようです。Node.jsの`globalThis`は`global`と同じ挙動をし、ブラウザの`window`もしくは`globalThis`とは違う挙動をします。# ブラウザの場合：`window`
Chrome, Firefox, Safari, Edgeの各ブラウザはglobal objectとして`window`を使用します。
Qiita APIで特定ユーザーのQiitaの記事を検索する
以前、
[[Qiita記事を量産している人必見！]自分の記事を検索する](https://qiita.com/ELIXIR/items/ff7a9ce49476c6161ed0)
という記事で特定ユーザーの記事を検索するツールを公開しました。https://elix.jp/app/tools/qiita_index.html
投稿した記事も200を超え、投稿したことすら忘れているような記事も見つけられるので個人的に重宝していますが、それ以外にも、自分が興味を持った記事を投稿したユーザーがどんなジャンルの記事が多いのかを調べたりするのにも使用しています。
そんなとき、上には上がいるもので、200どころか1000を超える記事を投稿していらっしゃる方もおります。
記事が多い場合、現状は記事を集めている間はフリーズしたような感じに見えてしまうので、
“`処理中…“`の表示を出すように改良しました。
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 今回の目標
メッセージの仕組みと、複数の送信方法を理解する。
いろんな種類があるので、できるだけわかりやすく簡単に説明します！# メッセージについて
送信方法は大きく分けて3つあります。
1. チャンネルを探して、送信する
1. メッセージに対して、返信する
1. ユーザーを探して、ダイレクトメッセージ (DM) を送信するそれぞれ方法を簡単に説明します！
## チャンネルを探して、送信する
### チャンネルを探す とは
まず`探す`ってどういうことでしょうか？
Botは、複数のサーバーに導入されます。
また、チャンネルにはそれぞれ唯一無二のidが紐づけられ
遅延シーケンス in JavaScript
[遅延シーケンスを用いた無限素数列 in JavaScript](https://qiita.com/kohyama/items/0f6643d30ce2ffa98572)
で使っている遅延連結リストの動作原理とそれを理解
するために必要な前提知識の再確認および演習です.# function と =>
「function」で関数を定義する場合と「=>」で関数を定義する場合で
| | function | => |
|:——————–|:——–:|:——-:|
|prototype | 使える | 使えない|
|名前を使った再帰 | 使える | 使えない
|new で呼び出して
コンストラクタとして | 使える | 使えない |のような違いがあります.
上記機能と無関係なものは「=>」を使い,
本記事では, 上記機能を使いたい場合は「function」を使っていきます.
(function を使わない版もそのうち…)基本的
遅延シーケンスを用いた無限素数列 in JavaScript
JavaScript で Project Eular に挑む後輩のために, 過去の記事
https://qiita.com/kohyama/items/b0f87160605560bae2f8
でご紹介しました, Clojure による素数列の定義“`clojure
(def prime-numbers
((fn f [x]
(cons x
(lazy-seq
(f (first
(drop-while
(fn [n]
(some #(zero? (mod n %))
(take-while #(<= (* % %) n) prime-numbers))) (iterate inc (inc x)))))))) 2)) ``` を, なるべくそのままのアルゴリズムで JavaScript で実装します. # 遅延連結リスト 準備として, 遅延シーケンス
【TypeScript】オブジェクトリテラルからUnion型を取得するジェネリック型をつくってみた
# 導入
TypeScriptでenum（列挙型）を検索すると、非推奨の文字がちらつくかと思います。
実際にいつもお世話になっているサバイバルTypeScriptでは以下の様に記載されています。
> #### 列挙型はTypeScript独自すぎる
> TypeScriptの列挙型に目を向けると、構文もJavaScriptに無いものであるだけでなく、コンパイル後の列挙型はJavaScriptのオブジェクトに変化したりと、型の世界の拡張からはみ出している独自機能になっています。TypeScriptプログラマーの中には、この点が受け入れられない人もいます。> #### 数値列挙型には型安全上の問題がある
> 数値列挙型は、number型なら何でも代入できるという型安全上の問題点があります。次の例は、値が0と1のメンバーだけからなる列挙型ですが、実際にはそれ以外の数値を代入できてしまいます。https://typescriptbook.jp/reference/generics
上記の通り、`Enum`は型安全上の観点から、積極的に利用しないほうが良さそうです。
そこで、代替案とし
正規表現の先読みを使ってテキストを文区切りで改行する
## 前提
文章を句点 (。) で改行して、1行に1文だけ保持されているような文字列を得たいです。たとえば以下の文章があるとき、
“`
叢の中からは、暫く返辞が無かった。しのび泣きかと思われる微かな声が時々洩れるばかりである。
ややあって、低い声が答えた。「如何にも自分は隴西の李徴である」と。
“`
以下の出力を得たいです。
“`
叢の中からは、暫く返辞が無かった。
しのび泣きかと思われる微かな声が時々洩れるばかりである。
ややあって、低い声が答えた。
「如何にも自分は隴西の李徴である」と。
“`## 方法
正規表現の先読みアサーション (Lookahead assertion, たんに先読みとも) を使います。
先読みアサーションとは、「後ろに *x* という表現が続くような(または続かないような) *exp*」にマッチさせる表現のことです。
| 種類 | 記述例 | マッチ例 |
|:-:|:-:|:-:|
| ポジティブアサーション | /exp(?=ress)/g | ‘**exp**ress explosion experiment’
ではじめの e
【JavaScript】要素にフォーカスした際にスクロールされないようにする方法
`focus()`の引数に`{ preventScroll: true }`を渡すとフォーカス時にスクロールしないようにできます。
“`js
document.getElementById(“focus_no_scroll”).addEventListener(“click”, () => {
document.getElementById(“myButton”).focus({ preventScroll: true });
});
“`クリックすると`textarea`が表示されフォーカスされる場合に、`{ preventScroll: true }`を指定せずに`textarea`の一部が画面からはみ出した状態でフォーカスすると以下のように`textarea`が画面の中央付近に来るまでスクロールされます。
」に参加するため、記載しています
いつかAmiVoiceAPIとWeb Speech APIの認識速度の比較もやってみたいなぁ、なんて思ってますが、今回の記事では扱ってません！ごめんなさい！
# まずは成果物
実際に動かせるものをGitHub Pagesに載せてあります
こちらからご覧ください！https://kazu-iroiro.github.io/TaskScheduler/
CesiumのQuickStartからつまづいた人がQuickStartを完全に理解してnode.jsで動かすまで
いやほんとJavaScriptとか普段触ってないから無理です……
# 概要
Cesiumを使って3次元データを可視化したいと思い立ったのがここ数日。ま，とにかく触ってみるか，ということで公式のQuickStartを動かしてみる……動かしてみる……動かない……
ということでイライラしていたものの最終的に動いたので備忘録。
# 注意
新しい技術なので仕方がないことだが，Cesiumは，たびたび，破壊的に仕様が変わるらしい（未確認情報）。なので，この内容がこの先どれだけ使えるか不明。
そもそも，同様の情報が見つからないところを見ると，とんでもなく基礎的なところで私が躓いているか，私の環境特有の問題なのかもしれない。
# QuickStartで詰まるまで
公式はココ
https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
アカウントを作って，tokenを取得する。
取得したtokenに合わせてQuickStartのコードが変わるという近未来な仕様にビビる。さて，2つのコードがサンプルで掲載されている。きち
LeafletでGeoJSONファイルを読み込み、人口で色分けを行ってみる
## はじめに
[弊社の記事](https://qiita.com/organizations/mapmarketing)では、いろいろな地図ライブラリでGeoJSONのポリゴンを表示してきました。今回は、Leafletを用いて地図上に町丁目ポリゴンを表示し、人口総数によって色分けを行いたいと思います。## 表示する町丁目ポリゴン（GeoJSON）
人口総数を属性に持つ町丁目ポリゴンについては、[TerraMap API](https://www.mapmarketing.co.jp/terramap-api?grid=qiita&utm_source=qiita.com&utm_medium=referral&utm_campaign=qiita_leaflet_chomoku_population_colors_e15987624aa614faba36_01)から取得できるものを利用しました。一部省略しておりますが、以下のようなGeoJSONファイルになります。
`features[0].properties.data[0].value` が人口総数の値になっています。
`
〜家庭内DX〜 バーコードリーダーの作成
# 〜家庭内DX〜 バーコードリーダーの作成
26卒予定のしがない学生エンジニアです。この記事では、日常のDX化としてちょっとしたバーコードリーダーを作成したので、ご紹介します。
リポジトリは以下に公開してますが、4時間程度で作ったものなので、クオリティは低いです。
https://github.com/ei-sugimoto/barcodeScan## 背景
大学院のオンライン授業を受けたあと、昼飯を食べつつ母親の愚痴を聞く、というのが日課になっていました。ある時に、バーコードの写真を消すを見たのでなぜ消しているのか尋ねると、「箱のバーコードを読み取るのが面倒」とのことでした。母は配達業をしており、配達終了時にバーコードを会社の端末で読み取るのですが、配達用の箱が大きいので、事前に自分の携帯で写真を撮って、それを読み取っていました。しかし、毎回バーコードの写真を消すのが大変でした。母親のフォルダがバーコードの写真ばかりになり、icloudの容量がなくなる未来を危惧した私は、早速バーコードを読み取るwebアプリを作成しようと思いました。
## 要件
– バーコード(
[Obsidian] Calendarが日付以外も書いたタイトルのDaily Notesを認識しないので、直す
# 本稿でやれること
Daily Notesのタイトルにその日やったことを追記して一覧から内容がわかりやすくできる上、カレンダーからアクセスできるようになる。
具体的には、`MM-DD ほげほげ`という形式のファイルの日付を正しく認識できるようにする。# 問題と解決方針
Daily Notesのタイトルにその日のメモの概要を書くと一目で確認が可能になるが、カレンダー機能はJavaScriptの`.moment()`を使ってタイトルの日付を見て同定しているので日付以外の文字列が入ると認識しなくなる。https://momentjs.com/
図1 Daily Notesのタイトル一覧。04-05と04-06は追加の文字列が入っている。をごらんください！# ワークスペースとは
ワークスペースとは、簡単に言うとBotのプログラムのごちゃごちゃをまとめるフォルダのことです。
フォルダを作成するだけではなく、パッケージのインストールなどいくつかやることがあるので頑張ってください！また、僕はMacbookで作業しますが、Windowsの方もやることは同じです！
# ディレクトリの作成
ディレクトリ…? なにそれおいしいの って人向けに説明するつもりなので、分かる人は飛ばし飛ばしでも大丈夫です！
|手順|説明|備考|
|—|—|—|
|1|`エクスプローラー`または`Finder`を開きます。 (以下Finde
Discord.js v14 botの作り方【基礎・動作確認編】 (2024/5/21現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 今回の目標
実際にbotを起動し、チャンネルにメッセージを送信してみることが目標です！
そんなにたくさんやることはありませんが、難しいので頑張ってついてきてください！# Botの情報をあつめる
Botを起動・動作させるうえで、botを操作させるための情報がいくつか必要になります。
|手順|説明|備考|
|—|—|—|
|1|[Discord Developer Portal](https://discord.com/developers/applications)にアクセスし、自分が作っているbotを選択します。|
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。
詳しくは[こちら](https://qiita.com/minoru_kinugasa/items/e1bdee4ca016b2a38e2c)をごらんください！# 環境構築とは
discord.jsというパッケージをインストールする`npm`と、
discord.jsを実行する`Node.js`をインストールしなければ、botを開発したり、動かしたりすることができません。そのための環境を作り、開発や実行を行える状況にすることを`環境構築`といいます。
# インストール方法
:::note warn
Node.jsのインストール方法は頻繁に変更される可能性がございます。
現時点でのインストール方法を記載しますが、できない場合は`Node.js install`などとググったほうが早いと思われます。
:::
|手順|説明|備考|
Discord.js v14 botの作り方【基礎・下準備編】 (2024/5/21現在)
# Discord.js とは
Discord.js (以下d.js) とは、discordのbotを開発するときに使用するパッケージの1つです。
同様に、Discord.pyというものがあります。これはpythonで開発する場合のパッケージになります。今回は、botをプログラムするために、bot自体を作成していきます！
**※ 現時点での情報ですので、見た目などが今後変更される可能性がございます。**# Botを開発するサーバーを作ろう
|手順|説明|備考|
|—|—|—|
|1|Discordの画面左上にある「**サーバーを追加**」をクリックします。||
