- 1. Node.js: docxをhtmlにするMammoth
- 2. OSSのライブラリを作ったので、立ち上げからリリースまでを時系列に書いていく
- 3. Reactをexpressにホストする
- 4. 新たなJLCPCBの紫のプリント基板
- 5. nvmを利用して、Node.jsをセットアップする方法のチートシート
- 6. node-webrtcでWebRTCを入門
- 7. AzureにNode.jsから画像を保存したりDLしたりする
- 8. AzureにNode.jsから画像を保存する 準備編
- 9. 手を動かして GraphQL を順番に理解していく
- 10. Nest.jsでGuardからControllerへデータを渡す方法
- 11. npm workspace の使い方
- 12. node.js超入門ノート9(Sequelizeでのレコード検索編)
- 13. 最小構成の Pulumi project (TypeScript) を作成する
- 14. node.js超入門ノート8(Sequelize導入編)
- 15. オンラインゲーム(GunZ)のマップをWEBに移植してみた【Three.js】
- 16. Firebaseのサーバレス運用に移行して良かったこと
- 17. puppeteerを用いたブラウザ操作自動化 メモ
- 18. JavaScriptモジュールシステムのこれまでとこれから
- 19. Node-RED 2系をAzure Web Appsで利用する #noderedjp #azure
- 20. TypeScript + CDK で理解する AppSync: はじめの一歩
Node.js: docxをhtmlにするMammoth
## Mammoth .docx to HTML converter
https://github.com/mwilliamson/mammoth.js
## 導入
`npm –save-dev install mammoth`## お試し
`npx mammoth sample.docx output2.html`### Before
＊[テンプレート](https://template.k-solution.info/2017/05/18084425.html)
### After
##
OSSのライブラリを作ったので、立ち上げからリリースまでを時系列に書いていく
# まえがき
ちょうど３年前に「[初心者3人でwebサービス(webアプリ)を作ったので、立ち上げからリリースまでを時系列に書いていく](https://qiita.com/yuno_miyako/items/d6595719ae7065927499)」なる記事を書いたことがあり、いまだにいいねをつけてもらえることがあります。そこで、**３年の時を経て**似たような記事を書いてみようと思いました。
Webアプリの開発経験はあるものの、**npmパッケージを公開したことはありません**でした。手探りからどのようにリリースまで、残したドキュメントをもとに振り返っていきたいと思います。
これを読んで「OSSを作ってみたいけどどう進めていけばいいか分からない」という人の一助になれば嬉しいです。誰か0から10までの流れを書いててくれないかな〜と思っていたので、きっと誰かには届く気がします。# 作ったOSSについて
[Realtimely](https://kitaharamugiro.github.io/Realtimely/jp/)という、Reactアプリに楽しい**リアルタイム要
Reactをexpressにホストする
やり方を聞かれて調べたのでメモ。
react-router-domでルーティングされているページをbuildしてexpressにホストしたい。## Reactでの作業
とりあえず何でもいいのですが、react-router-domで最低限のルーティングを設定します。
### 簡易仕様
* / → Home.js
* /about → About.js
* それ以外だと、Page not found.を表示。### プロジェクトの作成
とりあえずcreate-react-appでプロジェクトを作成。
“`bash
npx create-react-app react-test
cd react-test
“`最低限のルーティングを設定したいのでreact-router-domのインストール。
“`bash
npm install react-router-dom
“`Home.jsとAbout.jsを生成。
“`bash
touch src/Home.s src/About.js
“`### Home.js
Home.jsの実装。Hom
新たなJLCPCBの紫のプリント基板
紫のプリント基板今日からロールアウト！
いつでも発注できる
新たな色は君たちに刺激を与え創造力を与える。
pcbの変革は今から始まる:grinning:https://jlcpcb.com/JPA
によると、ユーザごとにインストールされて、シェルごとに呼び出される様に設計されているとのこと。sh、dash、ksh、zsh、bash、特にUNIX、macOS、WindowsWSLで動作するそうです。
# Gitからnvmをインストール
インストールスクリプトを使用する方
node-webrtcでWebRTCを入門
# 環境
– Ubuntu 20.04 (AWS)
– node v10.19.0 (npm 6.14.4)
– npm packages
– wrtc 0.4.7 (node-webrtc)
– mkdirp 1.0.4
– chokidar 3.5.2
– dateformat 4.5.1# 作ったもの
– WebRTCのデータチャンネルを使って文字列データのやり取りをするサンプル
– オファー側、アンサー側、共に `node.js` で実装、コマンドで実行
– P2Pを始めるまでの情報のやり取りをファイルシステム経由で行っている
# WebRTCでP2P通信をする流れ
– オファー側とアンサー側の２つあったり、イベントハンドラが複数あったりして混乱しがちだが、
– `setLocalDescriptio
AzureにNode.jsから画像を保存したりDLしたりする
何かと画像を保存したいってシーンは出てきますよね。
[AzureにNode.jsから画像を保存する 準備編](https://qiita.com/n0bisuke/items/fb422677505da6c0997d)の続きですが、Azure Blob Storageに画像をアップロード、逆にダウンロードしてローカルに保存を試してみます。
とりあえず、Blob Storage内での概念として、`コンテナ=フォルダ的な概念`、`blob=ファイル的な概念でコンテナ内に作成される`と現状思っています。
## 画像用意など
まずは利用する画像を用意してみました。`n0bisuke.jpg`
> 
前回試したコードで`hell
AzureにNode.jsから画像を保存する 準備編
画像の保存などをやりたいなと思ってAzureでやってみよ〜と思った時の話です。
## まずは情報に行き着くまでが大変でした
Azureに限らずAWSもGCPもそんな感じだとは思いますが、サービス多いので概念理解をするのに時間がかかるといったやつです。
### Azureに画像を保存したいけどBlobストレージとかFilesとか調べるとごちゃごちゃ…
って感じです。
調べるとAzureのBlob Storageというサービスが画像とか保存できるっぽい話が出てきます。ただAzure Filesってのも出てきたり、なんかもっと色々出てきます。 ~~少しイラつき。笑~~
[Azule Filesとは](https://docs.microsoft.com/ja-jp/azure/storage/files/storage-files-introduction#why-azure-files-is-useful)とかを調べてみて雰囲気こんなかなぁという印象が
– Azure Blob Storage => API経由で利用想定
– Azure Files => NASとか社
手を動かして GraphQL を順番に理解していく
# はじめに
最終的には AWS AppSync を使いたいため、なんとなく GraphQL や AppSync の使い方を流し読みしたが、やっぱり実際に使ってみないとよくわからない。
そこで、まずは第一歩としてローカルに [Apollo サーバー](https://www.apollographql.com/) を立てて、手作業でクエリを発行したりしながら GraphQL の理解を試みる。なお、この記事では「GraphQLのメリットや良さ」については取り扱わない。 簡単なサンプルを動かしながら GraphQL を使う手順の理解をすることに注力する。
# GraphQL とは
Wikipedia では [GraphQL（グラフQL）はAPI向けに作られたクエリ言語およびランタイムである](https://ja.wikipedia.org/wiki/GraphQL) と説明されている。 クエリ言語およびランタイムである、という説明から分かるとおり、複数の項目を含む概念であるため、簡潔に説明するのは難しい。
そこで、GraphQL を理解するために関連項目を以下の通り図で表した
Nest.jsでGuardからControllerへデータを渡す方法
Nest.jsでは[公式ドキュメント](https://docs.nestjs.com/guards)にも書いてあるとおり、Guardを作成する際には
1. `CanActivate`インターフェースを継承する
2. `canActivate`メソッド中でbooleanを返却するという実装をすることで対象のリクエストの呼び出し可否をコントロールするというのが基本的な使い方です。
しかし、実務で色々なGuardを実装していると、Guardで取得したデータをControllerでも使いたくなるケースに時々出くわします。
GuardとControllerとで同じデータを取得する処理を重複して実装するのは無駄なので、今回はこのGuard内で取得したデータをControllerへと渡す実装をしてみようと思います。# 1. Guardのベースとなる抽象化クラス「BaseGuard」を実装する
公式ドキュメントのPassportの実装を参考にします。
認証用モジュールである`@nestjs/passport`を利用する際には、Guard内の`handleRequest`メソッドの中で任意の
npm workspace の使い方
npm v7 で追加された workspace 機能の使い方について紹介します。
記事中で使用している npm のバージョンは [v7.22.0](https://github.com/npm/cli/releases/tag/v7.22.0) です。## workspace 機能とは
[yarn workspace](https://classic.yarnpkg.com/en/docs/workspaces/) のような機能です。
単一のルートパッケージから複数のパッケージを workspace として管理することができます。つまり、次のような monorepo を管理するための機能です。
“`
.
├── package.json
└── packages
├── a
│ └── package.json
└── b
└── package.json
“`workspace 機能を使うことによって、`package-a`, `package-b` のような複数のパッケージをトップレベルの npm プロジェクト (トッ
node.js超入門ノート9(Sequelizeでのレコード検索編)
# テーブルを表示する
以下のように修正します。“`javascript:routes/users.js
const express = require(‘express’);
const router = express.Router();
const db = require(‘../models/index’);/* GET users listing. */
router.get(‘/’, (req, res, next) => {
db.User.findAll().then(users => {
var data = {
title: ‘Users/Index’,
content: users
}
res.render(‘users/index’, data);
});
});module.exports = router;
“`
以下のファイルを作成します。“`html:views/users/index.ejs
最小構成の Pulumi project (TypeScript) を作成する
## これはなに
Pulumi の新規 Project 作成に関して公式ドキュメントでは、AWS, Google Cloud, Azure, Kubernetes を管理する前提となっており、 `pulumi new aws-typescript`, `pulumi new azure-typescript`と記述されている。
複数クラウドを管理したい場合や、クラウドを管理する目的以外に Pulumi を利用する場合、余計な設定など含まれてしまうため以下のように作成しているのでメモです。## Pulumi CLI のインストール
以下 URL を参考に Pulumi CLI をインストールしてください。
https://www.pulumi.com/docs/get-started/install/
## 使用する Node をインストール
今回は、 `v16.3.0` を [nodenv](https://github.com/nodenv/nodenv)[^1] 経由で設定する。
“`bash
nodenv install 16.3.0
“`## Pulumi
node.js超入門ノート8(Sequelize導入編)
# 準備
以下のコマンドでインストールします。“`
npm install sequelize
npm install sequelize-cli
“`以下のコマンドでsequelizeを初期化します。
“`
npx sequelize-cli init
“`
config.jsonを以下のように修正します。“`json:config/config.json
{
“development”: {
“database”: “db-development”,
“dialect”: “sqlite”,
“storage”: “db-dev.sqlite3”
},
“test”: {
“database”: “db-test”,
“dialect”: “sqlite”,
“storage”: “db-test.sqlite3”
},
“production”: {
“database”: “db-product”,
“dialect”: “sqlite”,
“storage”:
オンラインゲーム(GunZ)のマップをWEBに移植してみた【Three.js】
### 一週間前の自分： 3dゲームの知識皆無。Three.js使ったことない
### 一週間後（今）：???
ってことでタイトルにもある通り
**GunZ The Duel (or GUNZWEI)** っていう
昔流行ったオンラインTPSゲームのマップをwebに移植してみたので
デモ貼っておきます。
自分は今大学生ですが、昔GunZよくプレイしていましたGunZ, GUNZWEIを愛した人たちに届けばと思ってデモ置いていきます
エピソードとか書こうと思いましたが
**みんなが見たいのは結果の部分**だと思うので先にそれをお見せします# 移植したデモ、コード
WEBでThree.jsを使ってGunZのマップを描画したものです
」というサービスをリリースしました。
https://h-anke.net/
今までのサービスではCentOS＋Nginx＋PHP＋MySQLという構成を使用していましたが、今回はFirebase＋Node.jsというサーバーレス構成に移行しました。
その前後を比較して、良かった点とそうでなかった点をまとめます。※このサービスを作ろうと思った経緯や企画的なこだわりポイントは、[Zennの記事](https://zenn.dev/sanjimonica/articles/a535b304cd95b7)にまとめています。
併せてご覧いただけると嬉しいです。https://zenn.dev/sanjimonica/articles/a535b304cd95b7
# 環境
##### 移行前
* CentOS + Nginx + PHP + MySQL##### 移行後
* Firebase（Hosting / Functions / RealtimeDatabase / Authentication）
puppeteerを用いたブラウザ操作自動化 メモ
## puppeteerとは
* プログラムから API で Chromeブラウザ を制御できる Node.jsライブラリ。
* ブラウザ制御にはコマンドラインAPI といった開発者モードで使用できる API をそのまま使用できる。## 事前準備(puppeteerインストール)
※Node.jsはインストール済みとする。
“`shell
npm init
npm install puppeteer
“`## コード
`test.js`
* `puppeteer`でGoogle検索を行い、検索結果の1番上のページにアクセスし、スクリーンショットを取得する。
“`javascript
const puppeteer = require(‘puppeteer’);(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// Googleページを開く
await pag
JavaScriptモジュールシステムのこれまでとこれから
JavaScriptは当初モジュールシステムを持っておらず、実装されるまでに長い時間がかかりました。
その過程で様々な手法が考案され、今なお統一されておらずプロジェクトによって異なる方式を採用しているのが現状です。
本稿ではJavaScriptがここに至った経緯と各種モジュールシステムの概要を紹介し、今後どのようにモジュールを設計していくべきかを考えます。JavaScriptには複数の言語仕様が存在してとてもややこしいのですが、言語の**仕様を策定する団体**と各種プラットフォームで言語を**実装する団体**が異なる点に注意して読むと理解を助けると思います。
内容に誤りがある場合はご指摘いただけると幸いです。
# 年表
| 年 | 出来事 |
| —— | ———————————————————— |
| 1995年 | Brendan Eichによって**JavaScrip
Node-RED 2系をAzure Web Appsで利用する #noderedjp #azure
## Node-RED 2系をAzure Web Appsで使いたい
最初に、AzureでNode-RED動かしたいなと色々と調べてて動作したのが[こちら](https://github.com/jmservera/node-red-azure-webapp)のやりかたでした。
> https://github.com/jmservera/node-red-azure-webapp
ただ、こちらはv1.0.6で固定されてたので2系にしようとしたらうまくデプロイできず。（まだ検証ちゃんとしてないけど）
Node-REDは最近2系にアップデートされて結構中身が変わってるので2系をなんとか使いたいところ。。。ということで調べてましたが@horihiroさんのリポジトリからうまくいけました。
> [ほりひログ 2018-12-09 （勝手に）続・Azure Web AppでNode-REDを動かす手順](https://uncaughtexception.hatenablog.com/entry/2018/12/09/071216)
## 終わってみると簡単にいけた2系のデプ
TypeScript + CDK で理解する AppSync: はじめの一歩
この記事は TypeScript の CDK で単純な Hello, World! を返却する AppSync の GraphQL API を作成することを通して AppSync や GraphQL API に関する基本的な内容を段階を踏んで理解できるように構成されたものです。
あわせて作成した GraphQL API を curl、Node.js アプリケーション、React アプリケーションから呼び出す方法についても確認していきます。
これらのステップを踏むことにより、さらに複雑で実践的な GraphQL や AppSync に関する内容を掴むための足掛かりとなるかと思います。
なお、本記事中の各種コードは [GitHub](https://github.com/53ningen/CDK-AppSync) にて公開しています。
“`
$ git clone git@github.com:53ningen/CDK-AppSync.git
“`## 1. Hello, World!
まずは GraphQL クエリを投げると、Hello, World! が帰ってくる画期
