- 1. ProtoPediaの作品データを簡易的に取得して指標分析など
- 2. 色々な言語で簡単なREPLを実装する #typescript
- 3. [5日目] 学校の食堂をIT化させる話 混雑度カメラのサーバー構成を考える（技術的に）
- 4. 【TypeScript】バックエンド・フロントエンドで共有できるプライベートGithubPackagesの作り方
- 5. @cap-js/notificationsプラグインでSAP Build Work Zoneに通知を送る
- 6. AWS DynamoDB で超低コストな全文検索を実装しよう 〜実装編〜
- 7. Node.js で地震情報の取得とか
- 8. 【Bun】先日試したベンチのどの行が速いのか確かめて、最後に少し驚いた。
- 9. S3へのアップロードをLambdaで検知してslackに通知する
- 10. Puppeteerでpage.waitForTimeout’ is deprecated.
- 11. ゼロからWindowsにNext.js＋Gitの環境構築
- 12. APIでkintoneのレコード操作(Node.js環境)
- 13. AWS Amplify Hosting に Next.js 14 をデプロイする
- 14. 【Day 4】Web環境構築 – Next.jsの起動まで
- 15. AWS DynamoDB で超低コストな全文検索を実装しよう 〜設計編〜
- 16. スキャフォールディングツール Scaffdog 使ってみた
- 17. MapLibre Nativeを使ってNode.jsで地図をレンダリングする
- 18. Azure TextToSpeech APIでストリーム処理する – Node.js
- 19. React&Node.jsでアプリ作ってみた
- 20. 猫でもできる！Next.jsを一瞬でVercelへデプロイする方法
ProtoPediaの作品データを簡易的に取得して指標分析など
## ヒーローズリーグ2023お疲れ様でした！
ヒーローズリーグは老舗のものづくり開発コンテストって感じで2023年の決勝が先日終わりました。
ヒーローズリーグとは？はこちらの記事を読んでみましょう。
https://note.com/otama_kum_akero/n/nd43ffa03aba4
僕も出しましたけど賞に引っかからず…
https://protopedia.net/prototype/4902
## 288作品の情報を一覧化してみる
個人的な興味（理由はあるけど深くは言わない）で作品の情報を抜き出しつつソートしたりしたいなと思いました。
https://protopedia.net/event/hl2023
今回の応募作品は288作品でした。
この情報を手で取るのは大変で、ProtoPediaのAPIはあるけどなんか **挙動が怪しかったのでAPIは使わず**にサイトから抜き出してみるチャレンジをしてみます。
### サイトの構成
こんな感じで作品がdivタグ要素のBOXに入っています。 **”proto-box”というclass**
色々な言語で簡単なREPLを実装する #typescript
続きです。
# REPLとは
[こちらの記事](https://qiita.com/runeleaf/items/7615afd7abc79c9b3c01)を参照してください。## Typescriptで実装する
nodejsのreadlineを利用しています。“`bash
$ pnpm init
$ pnpm add -D typescript @types/node
$ vim package.json
// scriptsに追加
“dev”: “node main.js”,
“build”: “tsc main.ts”,
“`main.ts
“`typescript
import * as readline from ‘readline’const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
})rl.setPrompt(‘node> ‘)
rl.prompt()rl.on(‘line’, line => {
try
[5日目] 学校の食堂をIT化させる話 混雑度カメラのサーバー構成を考える（技術的に）
こんにちは、なりかくんと申します。
この記事はなりかくん Advent Calender 2023の5日目の記事です。この話は、1日目から始めた学校の食堂をIT化させる話の続きとなります。前回は、混雑度カメラのサーバー構成を考える案をメモ程度に書きました。（時間が無くなって5日目に続きを書いてます。）
今回は、技術的に考えていこうと思います。
# 最初に思いついた構成案
今回、とにかくお金が無いんです！！なので、年6,000円程度で使えるレンタルサーバーを私は契約していたのでそれにドメインを追加して使ってやろうと考えました。
また、レンタルサーバーではデータベース（MySQL）が標準搭載されていたのでビックデータ化も非常に楽でいいなと思ったのもあります。サーバー側の言語はPHPで、書きました。以下が実際に作ったプログラムの画像のアップロードとデータベース挿入のコードです。
なんと簡単なコードなのでしょうか(*´ω｀)
“`php
$filename = $_FILES[‘image’][‘name’];
$uploaded_path = ‘../images/camera
【TypeScript】バックエンド・フロントエンドで共有できるプライベートGithubPackagesの作り方
## 🌟はじめに
本記事はプロもくチャット Adevent Calendar2023の5日目ですhttps://qiita.com/advent-calendar/2023/puromoku
## 🤔 なんで必要なの？
### 🔥 Firestoreを使っている
僕が所属しているプロダクトでは、下記のような構成を取っています
– フロントエンド: Vue3/TypeScript
– バックエンド: Node.js/TypeScript
– インフラ: Firebase/GCP### 📚 Firestoreはカスタムオブジェクト経由でRead/Writeできる
DBは基本的にはFirestore、一部CloudSQLを使っています。
フロントエンドから直接Firestoreの読み書きする部分が多く、随所でバックエンド経由でFirestoreへアクセスするため、フロントエンド・バックエンドともに同じドキュメントやコレクションにアクセスするのが多いです。FirestoreはNoSQLのため基本的にはスキーマがありませんが、下記のようにモデルクラスと変換メソッド（`toFires
@cap-js/notificationsプラグインでSAP Build Work Zoneに通知を送る
## はじめに
この記事は [SAP Advent Calendar 2023](https://adventar.org/calendars/8870)の 12月5日分の記事として執筆しています。### SAP Build Work Zoneの通知機能とは
SAP Build Work Zone, standard editionでは、ユーザに対してアプリケーションなどから通知を送ることができます。通知はシェルバーのベルのアイコンをクリックすると表示されます。
サイトの設定で”Show Notifications”に”Yes”を設定することで、通知を受け取れるようになります。
」 の続きです。
:::https://qiita.com/Michinosuke/items/f0406bce43bc243d2629
## Serverless Framework の設定
Amazon DynamoDB と AWS Lambda を構築する必要があるので、[Serverless Framework](https://www.serverless.com/) を利用します。
インストールしていない場合は、インストールします。
“`sh
$ npm i -g serverless serverless-offline
“`それから、プロジェクトを初期化し、AWS にデプロイします。
“`sh
$ serverl
Node.js で地震情報の取得とか
これは [防災アプリ開発 Advent Calendar 2023](https://adventar.org/calendars/9301) 5日目の記事です。
前日 (12月4日) は Fukushimacam｜黒板ちゃん さんの「[アナログ情報で防災・減災](https://fukushimacam.hatenadiary.com/entry/Advent_Calendar_2023)」でした。# はじめに
:::note warn
– 初めて記事を書いたので、誤字・脱字等が多分あります
– この記事はプログラミングはじめたてほやほやな方に向けて書いています
– わかりやすくするため、解説を雑にしたり、端折ったりしてることがあります:::
## 自己紹介
はじめまして、しろねです。
中学3年生で受験生の人です。私は今年に入ってからプログラミングを勉強し始め、Pythonで地震情報を通知するソフトを作ったり、JavaScriptなどで地震情報の震度情報を地図に描画するWebアプリを作ったりしてました。
ですが、11月になって全くコードを書いていなかった
【Bun】先日試したベンチのどの行が速いのか確かめて、最後に少し驚いた。
先日試したこのベンチのどの行が速いのかちょっと確かめてみたくなった。
https://qiita.com/toshirot/items/c4d090bc38f9b85d8cdd
このコードは「郵便局の郵便番号データ 18M のcsv(124,332行) を for で回しながら行数カウントするだけのスクリプト」です。やってることはそれほど多くないので、上から順番にベンチを試してみたいと思います。
ただ、今回は Bun と Node.js を完全に区別するべく、node_modules の無いBun用と node_modules の有る Node.js 用のふたつのディレクトリを作って試してみようと思います。
# 今回の環境
クラウド： Azure VM (これはオンプレでも何でも良い)
OS： Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1050-azure x86_64)
Bun： 1.0.15 ( https://bun.sh/blog )
Node.js： v20.9.0# 準備
#### 共通の作業“`sh:bun用ディレクトリ
S3へのアップロードをLambdaで検知してslackに通知する
## 概要
業務フローの最適化を目指してS3へのアップロードを検知してslackに知らせるシステムを構築してみようと思います。イメージはこんな感じ。
## 前提条件
– Awsアカウントを作成済みであること（自由に触れる）
– S3のバケットが用意してあること
– slackアカウントを持っていること## Lambda環境の用意
こちらにまとめてあるので割愛https://qiita.com/nero-15/items/7a4b6e1b9a273c68159b
## トリガーを設定する
これは編集画面ですが、新規作成もほぼ一緒です。s3のバケットの特定のディレクトリにアップロードされた際にLambdaが動くように設定
になってました。
– Puppeteer v21.5.2
– Node.js v21.2.0の環境です。
## “node:timers/promises”を使うように
こちらにあるように`.waitForTimeout()`は公式の`setTimeout()`を使いましょう的な感じでした。
https://stackoverflow.com/questions/77078345/how-to-fix-issue-that-deprecated-page-waitfortimeout-method-usage
“`js
const setTimeout = require(“node:timers/promises”).setTimeout;
//import {setTimeout} from “node:timers/promises”;// …
await setTimeout(3000);
“`とすればOKです。
## なるべく時間で待つのは使わない方がよい
S
ゼロからWindowsにNext.js＋Gitの環境構築
## 初めに
## インストールするもの
1.WSL2(Ubuntu)
2.Node.js
3.VScode
4.Git
5.Next.js## 目次
1.[WSLのインストール](#anchor1)
2.[Node.jsをWSL上にインストール](#anchor2)
3.[VScodeをインストール](#anchor3)
4.[gitのインストール](#anchor4)
5.[Next.jsを使ってみる](#anchor5)
6.[GitHubにアップロードしてみる](#anchor6)
## WSLをインストールする
初めに参考にしたものを記載します。https://learn.microsoft.com/ja-jp/windows/wsl/setup/environment#set-up-your-linux-username-and-password
powershell もしくはコマンドプロンプトを右クリックから、管理者権限で実行します。
次のコマンドを実行します。
“`
wsl –install
“`
する
APIでkintoneのレコード操作(Node.js環境)
kintoneを初めて触ってみたのでメモです。
## kintoneのアプリを作成する
**1. kintoneアプリが必要なので作成**
サイボウズの開発者アカウントを取得し、右下のアプリの”+”から作成できます。
**2. 「はじめから作成」を選択**
今回は簡単なアプリなので「はじめから作成」を選択します。
**3. 「数値」と「日付」を選択**
左のカテゴリから選択します。
https://docs.amplify.aws/gen2/start/quickstart/
従来のAmplifyと、先日Previewで公開されたばかりの Gen 2 でも試してみようと思います。こちらも手順の中で `next-app@14` と指定されています。
# 問題発生
—
**2023年アドベントカレンダー4日目**です。
https://qiita.com/advent-calendar/2023/life-sync-app
昨日は画面デザインを作るストーリーを消費しました。
今回は「開発者はWebの開発を進めることができる」を消費していこうと思います。
## Next.jsの環境構築
### NodeJSのインストール
記事を書いている現在のLTSを調べたところ、
* [plop](https://plopjs.com/)
* [scafffdog](https://scaff.dog/)npm trands
https://npmtrends.com/hygen-vs-plop-vs-scaffdog
今回は、scaffdogについてまとめていきます🧑💻
## scafffdog について
Markdownに記載したテンプレートに従ってファイルを生成するツールです。ロゴのスカーフつけている犬🐕
かわゆす…😍## scaffdog install 方
MapLibre Nativeを使ってNode.jsで地図をレンダリングする
[MapLibre User Group Japan](https://dayjournal.notion.site/MapLibre-User-Group-Japan-Official-Web-Site-4ecb7ea313f945f39ccc2ca8dfbaad4f)の@Kanahiroです。今回はMapLibre Nativeを紹介します。
# TL;DR
– MapLibre NativeとNode.jsでStyle Specificationをレンダリング
– ラスタータイルをレンダリングできたりした
– MapLibre Nativeのドキュメントはショボいのびしろがある
– そんなわけで依存関係がわかりにくくてDockerfileも作りにくかった# MapLibre Native
https://githu
Azure TextToSpeech APIでストリーム処理する – Node.js
AzureのSpeech ServiceでTTS（Text to speech）のAPIを使用して、受け取ったデータを逐次的にStreamで処理をする方法が判明したので紹介します。~~（なぜ、こんな書き方をするのかというと、MSが詳細なドキュメントを公開していないからです。MS仕事しろ！）~~
# 前提
AzureのSpeech Serviceを使える環境を用意してください。
Speech Serviceで合成音声(Speech Synthesis)の始め方はこちらをご覧ください。（C＃ですが・・・）https://qiita.com/1mono2/items/aa66bf485ede8ec94152
# 結論
`SpeechSynthesizer.speakTextAsync`の引数に`PushAudioOutputStreamCallback`を継承したクラスを用意します。また、`SpeechSynthesizer`の引数には`AudioConfig`を設定してはいけません。
詳細は後からします。
### コード全体
“`jsx
import * as MsTt
React&Node.jsでアプリ作ってみた
# 概要
現在地から1km圏内の飲食店をランダムで選んでくれるアプリNode.jsでGoogleMapsAPIのPlacesにあるNearbySearchでレストラン探してフロントに投げる
# 背景
友人と遊んでいるときに飲食店選びで困ったので作ってみようと思って作ったアプリ# 使ったもの
* React
* Node.js
* ChatGPT
* github copilot(educationで無料)
* GoogleMapsAPI# 実装
https://github.com/sushi404/choice_shop
## 現在地取得
フロント
“` jsx
export function getUserLocation() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
position => {
resolve({
lat: position.coords.latitude
猫でもできる！Next.jsを一瞬でVercelへデプロイする方法
## はじめに
React、Next.jsに触れてみたいと思ったのでNext.js + TypeScriptの環境構築をしてみました。
Vercelはフロントエンド向けのホスティングサービスで，GitHubなどと連携すると簡単にデプロイできます！ちなみに環境はwindows10です。
Next公式ドキュメント：https://nextjs.org/docs
## Next.jsプロジェクトを用意
### Node.jsのインストール
ここからダウンロードして展開してインストール。
https://nodejs.org/en/download
今回はWindowsで環境構築するため Windows Installer を選択
### Nextプロジェクトを新たに作成
– “`node –version“`でNodeが動くことを
