- 1. はじめに
- 2. Why GCP? Vertex AI?
- 2.0.1. GCP(GoogleCloud)とは
- 2.0.2. VRT用の大量パターンのStory作成をコード生成で自動化した話
- 2.0.3. Spotify物理リモコンを作ってみた
- 2.0.4. Code Engineで Node.jsサーバーを試して OpenTelemetryで Instanaにトレースを送るメモ
- 2.0.5. 今ChatGPTで話題のOpenAiのDALL-E APIを使ってAIでイメージを生成するアプリを作ったら結果が非道かった
- 2.0.6. フルスタック機械学習エンジニア(MERN)
- 2.0.7. [Windows対応]直接ブラウザをインストールしなくてもSafari・Chrome・FireFoxでテストする方法
- 2.0.8. Cloud Functions+Node.jsを秒速でローカル実行する備忘録
- 2.0.9. firebase login Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
- 2.0.10. Node.js で小さな Docker イメージを求めて
- 2.0.11. CloudFunctions(Node.js, 第2世代)でDiscordのslashコマンドを実装する
- 2.0.12. DIALというプロトコルについて足を突っ込んでみた
- 2.0.13. AWS Lambdaでnode_modulesを使う時のメモ
- 2.0.14. Node.jsでAzure Key Vaultに格納されたシークレットを取得してみる(超簡単)
- 2.0.15. PipedreamとAirtableで緩く作るQRコード受付(の基盤サイド)
- 2.0.16. 日報作業でちょっと楽するCUIツールの作り方
- 2.0.17. CSSのLiveReloadする!開発環境でのCSSのビルドをViteに任せてバックエンドとViteの開発サーバーを連携させる
Node.js(TypeScript) からAzure AD に認証をして、ついでにGraph APIからユーザ情報を取得する
# はじめに
前回の記事で、MSALの力を借りてSPA(React)からAzure AD認証を行いました。https://qiita.com/ryuichi-f/private/392fae9ed74eeba5c397
今回は、サーバサイドからNode.jsを使って、Azure AD認証を行いたいと思います。あ、あとついでに認証後に取得できるアクセストークンを使って、Microsoft Graph APIにリクエストを送り、現在ログイン中のユーザのデータも引っ張ってきたいと思います。
# Azure ADにアプリケーションを追加する。
今回は、azure ポータルからではなく、az CLIからアプリケーションの追加を行います。ポータルから追加する方法は、以下の記事を参考にしてださい。
https://qiita.com/ryuichi-f/private/392fae9ed74eeba5c397
`アプリ名`は任意の名前で、`Redirct URL`はNode.jsサーバーが動いているURLで設定してください。
“`bash
az ad app create –d
import/export, require/exports って何が違うの?
いつまで経っても使い分けが分からないので調べてみました。
## モジュールとは
まずは「モジュール」について理解する必要があります。
モジュールとは JavaScript プログラムの一部を分割したものです。何かアプリを作成するときには1つのファイルに全てを書き込むのではなく、メインのファイル + 一部機能に特化したファイル という構成にしますよね。このうち一部の機能に特化したファイルをモジュールといいます。
当然分割しっぱなしではいけないので、メインのファイルからモジュールを読み込んで使う必要がありますね。
import/export や require/exports はそんなモジュールを利用するために存在する構文です。## import/export
> ネイティブの JavaScript モジュール機能は、import と export 文を利用します。
[JavaScript モジュール – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Mo
Docker+nginx+Express(Node.js)で簡易なAPIサーバーを作る
# 概要
この記事は「[【マイスター・ギルド】本物のAdvent Calendar 2022](https://adventar.org/calendars/7794)」9日目の記事です。まぁかくかくしかじかありまして、JavaScriptの練習としてAPIを叩いて返ってきた値(JSON)を画面に表示してみよう、そのための環境を作ろうってなったんです。
JavaScriptの練習だからフロントはもちろん使うけど、API側もNodeで書けばより理解も深まるだろうということでExpressなるフレームワークがあると知ってそれを使って環境構築をしてみました。
最近nginxの勉強もしたのでプロキシ設定を使った構成の練習台にもちょうどよかったです。# 環境を作ろう
## 準備
こんな感じのディレクトリ構成にします。今回はデスクトップに作成しました。
“`text:ディレクトリ構成
js-practice
├─ backend
├─ docker
│ ├─ nginx
│ └─ node
└─ frontend
“`## nginxの設定
nginxで設定するところは
【GCP】Node.jsでVertex AI AutomlのAPIを叩く方法【機械学習】
はじめに
今回業務でVertexAI Automlを使用する機会がありましたので、備忘録がてらここに記しておきます。
テストで動かしただけなので自分のローカル環境からAPIを叩けるようになるまでが今回のゴールとしています。
GCPをほとんど触ったことのない状態からのスタートだったので適宜色々調べながら実装を行いました。
なので自分みたいな「なにもわからん!」みたいな人にも分かるように書けたら良いなと思っています。
経験者の方は知ってる所は飛ばしながら読んでいただけると幸いです。
それではいってみましょ〜!Why GCP? Vertex AI?
GCP(GoogleCloud)とは
Googleが提供しているクラウドコンピューティングサービス(クラウド)になります。
要はサーバーとかネットワークとかその他諸々便利機能を誰でも登録してお金さえ払えば(従量課金)使えるようにしてくれている訳です。
最近呼び方がGCPからGoogleCloudに変わったみたいで、Google Cloudの方がより広義で広い意味で使われてるっぽいです。
VRT用の大量パターンのStory作成をコード生成で自動化した話
[去年のアドカレ記事](https://qiita.com/sakamuuy/items/44a109532f06e0b619e3)もVRTのネタで書いて、今年は違うのにしようと思っていたのですが、またVRTのネタです。よろしくお願いいたします。
## はじめに
現在参画しているプロジェクトにて、下のような課題を持つ画面がありました。– 1画面内で表示されるレイアウトが9パターン(今後更に増える想定)と、同画面内に入稿されるHTMLで使われるCSSが約40パターン(こちらも今後更に増える想定)存在し、これらの特有の組み合わせのみスタイルの崩れが発生することがある。
– これらを全パターン目視で確認することはかなり大変…今回の記事はこの課題をVRTを使って解決した話と、その際に苦労した話です。
前半で軽く実装内容を紹介しますが、技術的な話はあまりしません。また、前提としてVRTは[storycap](https://github.com/reg-viz/storycap)と[reg-cli](https://github.com/reg-viz/reg-cli)を使
Spotify物理リモコンを作ってみた
# はじめに
2022年のIoTLTにて何度かLTさせていただきましたが、アプリやWebのソフトウェアUIではなくコンポのリモコン感覚で物理ボタンをポチポチしてSpotifyをコントロールしたい、という思いからSpotify物理リモコンを作りました。**[Spotify物理リモコン(ProtoPedia)](https://protopedia.net/prototype/3314)**
Spotify物理リモコンの本運用版はこんな感じです!
ダイソーリモコン
↓
M5ATOM Liteで赤外線受信
↓
M5ATOMとopnizでペアリングしてるラズパイからSpotify Web APIを実行#Spotify #M5ATOM #DAISO #opniz https://t.co/TS0qaA2NM9 pic.twitter.com/SxRocJXAS3— 田中みそ (@miso_develop) May 28, 2022
# できること
赤外線リモコン(NEC、AEHAフォーマットのものならなんでもOK)でSpotifyを操作できます。操作できることとしては、* 再生/停止
* 曲送り
* リピート切替
* シャッフル切替
* 音量調節
* 任意のプレイリスト再生
* 再生機器の変更(Google HomeやAmazon Alexa、スマホアプリやWeb UI等)
* 今聴いているプレイリストをもとにラジオ(関連楽曲プレイリスト)生成といった感じで結構いろいろできて、それらの操作を
Code Engineで Node.jsサーバーを試して OpenTelemetryで Instanaにトレースを送るメモ
# はじめに
この投稿では、 [Code Engine](“https://www.ibm.com/jp-ja/cloud/code-engine”)を使ってアプリケーションの開発・運用する際のモニタリングツールとして、
[OpenTelemetry](“https://opentelemetry.io/”) と APMツールの[Instana](“https://www.ibm.com/jp-ja/products/instana”)でアプリケーションの性能情報(呼び出し数、エラー数、遅延)を可視化する方法を試した時のメモになります。# OpenTelemetryとは
[OpenTelemetry](“https://opentelemetry.io/”)は、テレメトリデータ(メトリクス、ログ、およびトレース)を計測、生成、収集、そしてエクスポートを行うOSSのオブザーバビリティのフレームワークです。 OpenTelemetryはテレメトリデータを分析する機能がありません。ですので、今回は、Instanaにテレメトリデータを送信して表示・分析することにします。# 前提作業
今ChatGPTで話題のOpenAiのDALL-E APIを使ってAIでイメージを生成するアプリを作ったら結果が非道かった
## OpenAiのDALL-E APIを使ってアプリを作る
今ChatGPTで話題、イーロンマスクも出資して設立に関わっている[Openai](https://openai.com/)ですが、チャットだけではなく、色々なAPIを公開しています。
イメージで言うと、彼らの作り上げた巨大な電脳の脳味噌に、APIを通じて接続し、色々なデーターを取得できると言うものです。
で、今回Traversy Mediaを見ていると、言葉でこんな画像ちょうだいって言うと、Aiがそれを生成して送り返してくれると言う暗黒アプリが簡単に作れそうだったので、作ってみる事にしました。Node.jsにて、製作時間1時間ほど。で、出来たのがこれ![openai_api_indexpage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1204968/23031f04-62ab-1fc8-9c14-493c6b79c14f.png)
欲しいイメージを入力するインプットと、画像の枚数を入れるインプットの2箇所だけの超シンプルなUIで
フルスタック機械学習エンジニア(MERN)
MERNとは、MongoDB、Express、React、Node.jsの4つのテクノロジーを組み合わせたフルスタックのWebアプリケーションフレームワークです。MERNスタックは、フロントエンド(React)とバックエンド(Node.js、Express、MongoDB)を提供することで、Webアプリケーションの開発を効率化します。
MongoDBは、ドキュメント指向のNoSQLデータベースです。このデータベースは、非構造化データをスキーマレスで保存し、JSONのような形式でデータを扱うことができます。
Expressは、Webアプリケーションフレームワークです。このフレームワークは、Node.jsで実装され、Webサーバーを構築するための様々な機能を提供します。
Reactは、JavaScriptのライブラリです。Reactを使用することで、Webアプリケーションのユーザーインターフェイス(UI)を構築することができます。
Node.jsは、JavaScriptの実行環境です。Node.jsを使用することで、JavaScriptをサーバーサイドで実行することができます。
[Windows対応]直接ブラウザをインストールしなくてもSafari・Chrome・FireFoxでテストする方法
## はじめに
[Playwright](https://playwright.dev/)というライブラリを使用して、各種ブラウザの起動ができるようになるまでを記載しています。
特に、windowsでsafariが(webkitですが)起動できるようになるのはうれしいです。
Playwright自体はNode.jsのE2Eテストライブラリですが、ブラウザを起動するだけならNode.jsのプロジェクトでなくても大丈夫そうです。## 前提
サーバーはNuxt3を動かしていますが、適宜ご自身のアプリケーションに置き換えていただければと思います。
WEBアプリケーションでローカルのURLがわかれば大丈夫です。## インストール方法
https://playwright.dev/docs/intro#installing-playwright
を参考にしながらインストールしていきます。“`
yarn create playwright
“`
“`
// E2Eテストのディレクトリ。デフォルトのe2eでいいと思います。
Where to put your end-to-en
Cloud Functions+Node.jsを秒速でローカル実行する備忘録
[PONOS Advent Calendar 2022](https://qiita.com/advent-calendar/2022/ponos)の12日目の記事です。
昨日は[@sumborn](https://qiita.com/sumborn)さんでした。
# はじめに
Cloud Functionsを開発する場合、当然ローカルで実行させたくなります。その手順は[Googleの公式](https://cloud.google.com/functions/docs/running/overview?hl=ja)に載っています。
しかし、久々にFunctionsを触る時に “どうだったかな?” となることがあるので、今回は最低限の情報だけで秒速でローカル実行できる手順のみ記しておこうと思います。# プロジェクト準備
1. とりあえず空のフォルダを作る
1. package.jsonを用意する。
なんでもいいですが、npmを使って用意しました。ここではエントリーとなるポイントはindex.jsとしておいてください。
“`console
npm ini
firebase login Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
# [エラー]firebase login( Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0)
## 環境
MacBook Air (M1, 2020)
nodeバージョン v16.00## ぶつかったエラー
“`
Firebase CLI v11.16.0 is incompatible with Node.js v16.0.0 Please upgrade Node.js to version ^14.18.0 || >=16.4.0
“`
日本語訳
Firebase CLI v11.16.0 は Node.js v16.0.0 と互換性がありません Node.js をバージョン ^14.18.0 にアップグレードしてください
( Firebase CLIにnode.jsのバージョンを合わせる必要があるようです)## やったこと
1. エラーメッセージをgoogle翻訳する。
1. ダ
Node.js で小さな Docker イメージを求めて
## 小さなイメージを求めた時の記録
Node.js のイメージを小さくするという記事を読んで、以前、使っていた Dockerfile ではどの程度のサイズだったかを記録しておきたく思った。
読んだ記事と同じアプリケーション([Node.js Web アプリケーションを Docker 化する | Node.js](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/))で。ポイントは 2 つ。
– ncc を使う。 [vercel/ncc: Compile a Node.js project into a single file. Supports TypeScript, binary addons, dynamic requires.](https://github.com/vercel/ncc)
– 過去に ncc について書いていた。 [zeit の ncc コマンドで node.js アプリを 1 ファイルにコンパイルしてみたメモ – Qiita](https://qiita.com/high-u/ite
CloudFunctions(Node.js, 第2世代)でDiscordのslashコマンドを実装する
↓のGCP版です。AWS以外の部分は下の記事を参照してください。
https://dev.classmethod.jp/articles/discord-application-commands-aws-lambda-aws-cdk/
なぜかGCP版の記事が日本語にない。
※ URLやTokenが見え隠れしていますが、この記事の編集過程で作ったリソースはすべて削除してから投稿しています。
## discord の app を作る
https://discord.com/developers/applications
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45240/0553954d-0faa-1fda-ea95-05700ab22341.png)
## bot を作る
アプリを作った画面から、そのままBotも作っておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com
DIALというプロトコルについて足を突っ込んでみた
お久しぶりです。1年に1回 Qiita へ投稿する @Momijinn です。
この記事では DIAL というプロトコルについて軽く触れてみたという記事になります。## DIAL とは
DIAL (DIscovery And Launch) とは、セカンドスクリーン端末(主にスマートフォン)が、ファーストスクリーン端末(主にテレビ)にインストールしているアプリを検出して、簡単にアプリを起動するためのプロトコルです。
※ あくまで DIAL はファーストスクリーン端末にインストールしてあるアプリを簡単に起動や終了をするのみ(ここ大事)。### 分かりづらいので例を挙げて説明
スマートフォンにて動画再生アプリで再生している動画を、TVで再生したいとします。
このとき、DIALなしの場合だと以下の手順を踏むことになると思います。“`
1. TVリモコンでTVにインストールしている動画再生アプリを立ち上げる。
2. TVで動画再生アプリをが立ち上がる。
3. TVの動画再生アプリと、スマートフォンの動画再生アプリをペアリング(PINコード等)する
4. ペアリングできたら、ス
AWS Lambdaでnode_modulesを使う時のメモ
AWS LambdaでNode.jsを使っていた時にnode_modulesにあるライブラリを使おうとした時にちょっと詰まったので、備忘録として残そうと思います。
あとは、アドベントカレンダーに沿ってアウトプットの大切さを書きます。
# node_modulesの導入
## 前提条件
– npm コマンドが使える環境があること
– ローカルマシンでも問題ありません## 簡単な流れ
1. ディレクトリの用意
1. 必要なライブラリをインストール
1. ディレクトリのzip化
1. レイヤー登録
1. Lambda関数でレイヤー追加
1. Lambda関数のコードでライブラリを読み込む## ディレクトリの用意
初っ端から一番大事です。作成する場所はどこでも良い(ローカルマシンでも可)ですが、ディレクトリの名前が重要です。
「nodejs」という名前のディレクトリを生成します。“`
$ mkdir nodejs
“`これについては[ドキュメント](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/conf
Node.jsでAzure Key Vaultに格納されたシークレットを取得してみる(超簡単)
# はじめに
従来のソフトウェア開発において、本番環境でのパスワードや暗号鍵、デジタル証明書、APIキーなどといったシークレットは環境変数に保管してアプリケーションからアクセスします。しかしクラウドサービスを利用したモダンなソフトウェア開発においては、アプリケーションは様々な実行環境に分散していて、それぞれ個別に設定ファイルを用意し、環境変数を設定する必要があります。Azure Key Vaultを利用すると、そのようなシークレットをクラウド上で一元管理することができ、それらの情報に対するアクセスをAzure ADによる認証で保護することができます。今回の記事では、Node.jsを用いて、Azure Key Vault上に保存されているシークレットにアクセスする方法をまとめていきたいと思います。# Azure Key Vault リソースを作成する
Azure Key Vault リソースをAzure CLI を使用して作成していきます。
Azure Portal を使用したAzure Key Vault リソースの作成方法は以下の公式の記事を参考にしてください。
https
PipedreamとAirtableで緩く作るQRコード受付(の基盤サイド)
前回[「Pipedreamの紹介」と「ワークフローの作成例」](https://qiita.com/attakei/items/1455e56634db57e479b9)を書きました。
今回は、これを使って社内向けに作ったちょっとしたサービスの話をします。## 何を作ったの?
社内のオフライン交流会向けに「QRコードによる受付」を作ってみました。
大まかには次のコンポーネントに分かれるのですが、今回話題の対象となるのは1.と2.です。1. **Airtable上での、出席者・出席記録管理**
1. **Pipereamを使った、出席者用QRコード表示画面**
1. QRコード表示画面を案内するための、メール送信用ツール
1. QRコードをかざして出席記録を取るための、受付アプリ![html-with-qrcode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6805/57c2345a-cd54-c64c-5172-1709be7cfc23.png)
## Airtableって何?
ま
日報作業でちょっと楽するCUIツールの作り方
# はじめに
アドカレに乗っかって初Qiitaを書きます。
私の所属先ではSlackに勤怠チャンネルがあり、業務終了時にその日の業務内容について投稿するようにしています。(ミニ日報みたいな感じです。)
投稿する内容はこんな感じです。
“`
【勤務時間】10:00 ~ 19:00
【稼働時間の合計】8時間00分(休憩:1時間00分)
【本日の作業】○○○_初回リリース, △△△_コンテンツ追加
【明日の作業】△△△_コンテンツ追加, □□□_リファクタリング
【共有・相談事項】
“`
特に大変というわけではないのですが、毎日「よし!業務終了だ!」と思ってから、このミニ日報を書くのは少し面倒でした。
そこで、その少し面倒くさい作業で楽するためにCUI上で簡単に日報を書いて投稿できるツールを作成したので、今回はそのツールの作成に使った技術について共有します。(以降作成したツールを退勤ツールと呼びます。)面倒くさい作業で楽するために退勤ツールで実装したいと思ったことは以下の4つです。
1\. 時間を記入するときに対話型で入力する
2\. 作業内容はチケット管理ツールからデータを取得して
CSSのLiveReloadする!開発環境でのCSSのビルドをViteに任せてバックエンドとViteの開発サーバーを連携させる
この記事は「[はてなエンジニア Advent Calendar 2022](https://qiita.com/advent-calendar/2022/hatena)」の10日目の記事です。9日目は[@dekokun](https://qiita.com/dekokun)さんの「[みんなで会議をよくしていこう!と思ってやってるTips](https://dekotech.dekokun.info/entry/2022/12/09/143600)」でした。
—-
# はじめに
Webページはさまざまなファイルから成り立っており、それぞれのファイルはソースファイルをビルドすることで作られています。従って、ソースファイルの更新をブラウザから確認するためには、単純に考えればソースファイルをビルドしてファイルを配置してからWebページをブラウザから更新する必要があるように思えます。しかし、開発中これらの作業を都度するのは大変なので、開発サーバーを立ち上げてビルドの工程を自動化します。すなわち、ソースファイルの更新に応じてブラウザのリロードなしにWebページの表示にその変更を反映させる