- 1. APIでkintoneのレコード操作(Node.js環境)
- 2. AWS Amplify Hosting に Next.js 14 をデプロイする
- 3. 【Day 4】Web環境構築 – Next.jsの起動まで
- 4. AWS DynamoDB で超低コストな全文検索を実装しよう 〜設計編〜
- 5. スキャフォールディングツール Scaffdog 使ってみた
- 6. MapLibre Nativeを使ってNode.jsで地図をレンダリングする
- 7. Azure TextToSpeech APIでストリーム処理する – Node.js
- 8. React&Node.jsでアプリ作ってみた
- 9. 猫でもできる！Next.jsを一瞬でVercelへデプロイする方法
- 10. Vercelでできること総まとめ(2023)
- 11. E2Eテストツール「playwright」
- 12. GraphQLとPrismaの連携
- 13. Puppeteerでold Headless deprecation warningが出た時の話
- 14. nodejsのソースコードのビルド
- 15. brewでNode.jsを導入後、npmが使えなくなった
- 16. ブロックチェーンで元気玉を作って投げる
- 17. 2023年度版フロントエンド開発環境構築徹底解説
- 18. BunアプリをPM2で動かしてデーモン化する
- 19. socket.ioを型安全に使えるライブラリを考えている
- 20. 上腕二頭筋とサーボモーターが奏でる至高のプロテインシェイク
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が動くことを
Vercelでできること総まとめ(2023)
Vercel は Web フロントエンドアプリのホスティングサービスとして有名ですが、他にもたくさんの便利な機能・サービスがあります。
この記事を読んで、Vercel でできることをまるっと把握しましょう！
:::note
`2023/12/3` 時点の [Vercel の公式ドキュメント](https://vercel.com/docs) を元に作成しています。
個人的に知らなかったり、いいなと思った機能には :star: をつけています。
:::## [基本的な機能](https://vercel.com/docs/fundamentals)
### [フレームワーク](https://vercel.com/docs/frameworks)
Vercel は [Next.js](https://nextjs.org/) のメンテナではありますが、幅広いフロントエンドフレームワークに対応しています。現在、38種のフレームワークに対応しているようです。
– [Angular](https://angular.io/)
– [Astro](https://astro.b
E2Eテストツール「playwright」
## はじめに
ありがたいことに、今いるチームにはテストチームがいるのですがシステムの規模が大きくなっていく中で、最近大変そうな様子を感じます。
E2Eテストツールを導入したら軽減できる部分もあるのかな？ということで **playwright** を試してみました。## Playwrightとは
Microsoftが 2020年1月31日 に初回リリースがされたE2Eのためのテスト自動化ツールです。
Chromium、WebKit、Firefox などの最新のレンダリング エンジンをすべてサポートしています。https://en.wikipedia.org/wiki/Playwright_(software)
一般的には劇作家という意味の単語でした。
https://ja.wikipedia.org/wiki/%E5%8A%87%E4%BD%9C%E5%AE%B6
## はじめかた
https://playwright.dev/docs/intro“`
yarn create playwright
“`インストールコマンドの選択はこんな感じにしました。
GraphQLとPrismaの連携
この記事は [セゾン情報システムズ Advent Calendar](https://qiita.com/advent-calendar/2023/sisco) 2023 2日目の記事です。
# はじめに
GraphQLはAPIに関わる部分で、開発者にとっての利便性を向上させてくれるツールだと考えています。
例えば、
– クライアント側からのリクエスト過多によるパフォーマンスを改善したい
– 強固な型安全性を担保したい
– Swagger的な役割のものが欲しいといったニーズに応えてくれると思っています。
ただし、クライアント側、サーバー側両方との連携が要求されるため考慮することは多くなります。
サーバー側であれば、データベース連携がその1つです。
この部分をなるべくシンプルに連携するために、Prismaを使用して検証してみました。
本記事では、GraphQLの基礎について理解を深めるとともに、Apolloを用いてGraphQLサーバーを実装し、Prismaとの連携手順を知ることを目的とします。## 前提と対象読者
以下の知識や経験があり、
–
Puppeteerでold Headless deprecation warningが出た時の話
久々にPuppeteerを使おうとしてプログラムを動かそうとしたらWarningで怒られました。
> 
## こんな感じで解消できます。
Node.js 21.2.0です。`headless: ‘new’`をつけて起動します。
“`js
const puppeteer = require(‘puppeteer’);
// import puppeteer from ‘puppeteer’;(async () => {
const browser = await puppeteer.launch({
headless: ‘new’,
});const page =
nodejsのソースコードのビルド
今現在(2023-08-01)raspbian はbullseyeベースなのでaptでnodejsをインストールするとnodejs12が入ります。
ただ、zenn-cliがnodejs12以下はサポート切ってたりで、bullseyeのnpmからzenn-cliをインストールしようとすると怒られます。一応zenn-cliは入りますが、警告だが、非推奨だかのメッセージが出ます。よってraspberry piからapt->npm->zenn-cliという感じに怒られずにええ感じにインストールできない。
単純にnodejs関連のパッケージだけstable bookwormのレポジトリを向くようにしてもいいですが、それでも最新のLTSでないし、どうせ最新のLTS使わないならまあせっかく?なんでビルドしましょうと思ってやってみました。## 前提条件
github cliインストール済み
tmuxインストール済み。
sysstatインストール済み（統計取るのに必須。特に取るつもりがないなら不要）。## ソースコードの準備
“`bash
# gh repo clone用のディレクトリ
brewでNode.jsを導入後、npmが使えなくなった
## brew installでnodeの導入。
これでnpmも付随してインストールされるはず。
~~~terminal
brew install node
==> Downloading https://formulae.brew.sh/api/formula.jws.json
##################################################################################################################################################################################################### 100.0%
==> Downloading https://formulae.brew.sh/api/cask.jws.json
###############################################################################################
ブロックチェーンで元気玉を作って投げる
# はじめに
下記の仕組みを作ってみました。
– 元気玉をイメージした、ブロックチェーンで送信する際に複数の署名が必要な形式のトランザクションを利用した仕組み(元気玉トランザクション)
– 集まっている署名の数に応じて画像（今回は🍅）サイズが変動する仕組み(サイズ可変式トマト)
– 自身の管理していないコンテンツから、自身の管理しているコンテンツに影響を与える仕組み(外部コンテンツからの干渉)# 背景
Symbolブロックチェーン界隈にはトマトを模したデジタルトークンをユーザが作成・配布し、デジタルトマトトークンをブロックチェーンのトランザクションとして投げつけたり(送信)、トマトを投げつけるようなゲームをプレイする事ができるお祭りがあります。(スペインのトマトを投げ合う収穫祭のラ・トマティーナを模したもの)
このお祭りに合わせて、自身の開発しているゲームにて複数人でトマトを大きくしてボスにぶつけて攻撃するというコンセプトでイベントをやってみたいと思い、今回の仕組みを作りました。# 使ったもの
ブロックチェーン：Symbol
Webサーバ： Node.js+TypeScript
2023年度版フロントエンド開発環境構築徹底解説
この記事は[Nuco Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nuco)の1日目の記事です。
# はじめに
2023年最新のフロントエンド開発環境についての紹介記事です。
分野別に、おすすめツール群と、その特徴などを紹介していきます。
デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。
これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。::: note
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=1b97cb3d9f43c5828adf)まで。
:::# フロントエンド開発おすすめツ
BunアプリをPM2で動かしてデーモン化する
実行しているプログラムを、ユーザーがログアウトしたり、シェルセッションを閉じてもプロセスを続行したいとか、アプリケーションがクラッシュしても自動的に再起動したいなどという需要は結構あります。
そんな場合に Node.js で良く使われるのは、デーモン・プロセス・マネージャーPM2 です。
https://pm2.keymetrics.io/
https://github.com/Unitech/pm2
PM2は、複数のプロセスを一覧管理し、その log や error log などをリアルタイムに監視もできるなどの豊富な機能を持つ優れたツールです。
# PM2 に Bun アプリを登録する
さて、今回はその PM2 に Bun アプリを登録しようという企画になります。
例えば先日書いた「[BunでWebSocketのデータ配信サーバ
socket.ioを型安全に使えるライブラリを考えている
自分のためにつくっているが、まだいろいろ考えないといけないことがある。
ひとまず、どういうものなのかをここに記す。
まず、serverが受信、clientが送信とする。
基本的なsocket.ioのコードだと、client側は以下になる。“`ts
const socket = io(“http://localhost:3000”);
socket.emit(“eventName”, data);“`
emit時に、必ず存在するeventに、正しい型のdataを送りたい。
一応、socketの初期化時にname spaceごとに型を与えて推測するようにできる。[https://socket.io/docs/v4/typescript/](https://socket.io/docs/v4/typescript/)
個人的には、trpcやts-restのように、自動生成される型安全な送信用のクライアントがほしい、と考えた。
サーバー側の実装を考える。
“`ts
export type ServerAppRoute = {
data:
上腕二頭筋とサーボモーターが奏でる至高のプロテインシェイク
こんにちは、普段デザイナーをしている**ウエハラ シンペイ**です。
前回開発したChatGPTによるヘルシーレシピBotで、
食事改善に取り組めたのですが、目指すべきモテボディにはそれだけでは足りませんでした。https://qiita.com/PEI__/items/2418a985f9b2539f26cf
### そう、チカラ is パワー「筋肉」ですね。
知識先行型ダイエッターの私が調べた限り、筋肉は１日のエネルギー代謝量が最も多いとされていて、筋肉をつけるほど太りにくい体になるらしいです。なので今回はマッスルボディを生み出すアプリケーションを作っていきます。
# プロテインはしっかり混ざってないとマズい
筋肉愛好家からプロテイン飲んどきゃなんとかなる勢まで、全員が悩んでいるプロテインの
