- 1. Creating vector tiles from Esri Feature Service using nodejs and tippecanoe
- 2. GitHub Actionsのcronが60日で止まる件対応をしてみる
- 3. nodebrewを使用したNode.jsのバージョン切り替え
- 4. npmでプロジェクトを作成する
- 5. Node.jsの基礎をまとめる1
- 6. 【Node.js入門】いままで避けてきたから特徴だけはおさえておきたい
- 7. node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。
- 8. Node.jsのインストールが失敗した原因と解決方法
- 9. node.jsでブラウザーテストをするselenium-webdriverのセットアップ
- 10. Discord.js これだけはするな!もしくは陥りやすい間違い集
- 11. SDKを使わずにNode.jsからAzure IoT HubへMQTT接続する
- 12. ES Lintの導入
- 13. ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法
- 14. cpxが更新されないのでfsで置き換えてみる
- 15. SvelteKitでPostgresSQLへデータの登録・取得をしてみる
- 16. Rails7 のフロントエンド関連の Gem を分類
- 17. Puppeteerを使ってMoneytreeの口座情報をスクレイピングする
- 18. socket.ioを利用したアプリのデプロイをしたい(攻略編)
- 19. 【Windows/Mac/Linux(Ubuntu)】Node.jsインストール方法
- 20. Next.jsもとい、Node.jsでprofilerを簡単に使う方法
Creating vector tiles from Esri Feature Service using nodejs and tippecanoe
# Introduction
This article is written for my colleague M.L. and G.L.S. This article explains how I made vector tiles from Esri Feature services.Originally, this method was developed in December 2022 and that effort was summrized in this article (in Japanese): https://qiita.com/T-ubu/items/17cb65754a54aa5ffb21
If you have the data in GeoJSON, just use it because it is much easy. This is a work flow for a case that you only have an access to the data as FeatureService.
This is a part of my wo
GitHub Actionsのcronが60日で止まる件対応をしてみる
こちらの記事になるように60日間動きがないとcronが止まってしまう模様です。
https://zenn.dev/hellorusk/articles/fc6d4696f5b269
定期的に定期実行処理が止まってる。。
## 現在時刻をもとにファイル作成してGit Pushしてみる
– 現在時刻取得
– JSONファイル作成
– GitHub Actions側からGit Pushをして定期実行すれば常に動き(commitやpush)がある状態になりそう。
## JavaScriptの処理でJSONファイルを書き出す
現在時間を取得してJSONに書き出す処理です。
時間はday.jsを使用“`js
const fs = require(‘fs’);
const LOGFILE_NAME = `log.json`;//日本時間
const dayjs = require(‘dayjs’);
const utc = require(‘dayjs/plugin/utc’);
const timezone = require(‘dayjs/plugin/timezo
nodebrewを使用したNode.jsのバージョン切り替え
Node.jsを使用していると、バージョンダウンさせたい時ってありますよね。
nodebrewでバージョン管理する場合、以下の方法でバージョンを切り替えることが可能です。以下コマンドで、切り替え可能なバージョンを確認します。
`nodebrew ls-remote`
以下のように切り替え可能なバージョンが表示されます。
~~~
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6v0.1.0 v0.1.1 v0.1.2 v0.1.3 v0.1.4 v0.1.5 v0.1.6 v0.1.7
v0.1.8 v0.1.9 v0.1.10 v0.1.11 v0.1.12 v0.1.13 v0.1.14 v0.1.15
v0.1.16 v0.1.17 v0.1.18 v0.1.19 v0.1.20 v0.1.21 v0.1.22 v0.1.23
[…]
io@v3.0.0 io@v3.1.0 io@v3.2.0 io
npmでプロジェクトを作成する
nvmでNode.jsをインストールし、
その後npmでVue.jsプロジェクトを作成した。## 手順
#### 新しいプロジェクトの作成
latestだけでもOK、コマンド実行後にプロジェクト名、使用するテンプレート、言語を選択する。
viteはビルドツール。
“`bash
npm init vite@latest [プロジェクト名] — –template vue
“`#### 作成したプロジェクトフォルダへ移動
今回はfirst-vue-appという名前のプロジェクトを作成したので、そこに移動する。
“`bash
cd first-vue-app
“`#### Vue.jsを動作させるためのパッケージをインストール
“`bash
npm install
“`
自動的に色々と作成してくれる。
#### 開発サーバを起動
“`bash
npm run dev
“`
Node.jsの基礎をまとめる1
node.jsとはJavaScriptでサーバーまで作れるよという設計手法のことである。
JacaScriptやReactというのはクライアントサイドをつくるものである。
そして、非同期処理を得意とするため、リアルタイムの処理を得意とする。処理の速さも優秀である。
プロジェクトのディレクトリを作成したら、以下のコードを入力する。
“`
npm init -y
“`
これを行うとpackage.jsonが作成される。これによって、作成するプロジェクトの依存関係を管理してくれる。そして、モジュールをインストールするやり方を示す。
httpモジュールをインストールするには以下のように入力する。“`
npm install –save-dev http
“`
そうすると、package.jsonのdevDependenciesのところにパッケージが追加されているのが分かる。![Untitled (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2971002/82832b38
【Node.js入門】いままで避けてきたから特徴だけはおさえておきたい
Node.jsをこれまでほとんど勉強してきませんでした。
普段触れることもある言語ですが、ないがしろにしてきたので改めて学んでみました。:::note
【こんな方にオススメ】
・Node.jsについて勉強したことがない
・Node.jsを勉強しようと思っているけど1歩踏み出せない
:::本記事は下記書籍の要約です。
気になった方はぜひ読んでみてください!:::note note
解釈が間違っている場合は遠慮なくコメントをいただけると大変嬉しいです!
:::https://gihyo.jp/book/2023/978-4-297-12956-9
## 本書の構成
ざっくり下記のような構成でした。
– Node.jsについて
– JavaScriptの基本的な構文
– Node.jsの活用
– フロントエンドとバックエンド
– 運用とチューニング私は初学者なのでその中でもNode.jsの特徴について触れたいと思います。
## Node.jsってなに?
Node.jsはChromeに内蔵されているV8というJavaScriptの実行環境のこと。
2009年に登場して
node.jsのアプリケーションをAWS ElasticBeanstalkにデプロイしてみる。
node.jsの非常に簡素なアプリケーションをAWS ElasticBeanstalkを用いて公開するやり方をまとめていく。
これは下の動画に従ったものであるので下の動画を見てもいい。また、公式のドキュメントにもnode.jsとExpressを用いたアプリケーションの公開の仕方があった。この記事では最低限のことしか書かないので実際に実用性のあるアプリケーションを公開する際には公式ドキュメントを参照してほしい。https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html
まず、作業に移る前に必要なことがいくつかある。
Gitへの登録とAWSアカウントの作成である。
こちらは行っていることを前提に進めていく、難しい作業ではないので各自調べて行ってほしい。そして、ElasticBeansをコマンド上で操作するためにEB CLIのダウンロードをする必要がある。
ht
Node.jsのインストールが失敗した原因と解決方法
Vue.jsの学習のための環境構築中、Node.jsをインストールしようとした時にエラーが発生したので、その対応についてのメモ。
#### 実施していた環境構築
Node.jsのアップデートは頻繁に行われるため、バージョン管理ツールとして**nvm-windows**を利用した。githubからnvm-setup.zipをダウンロードし、nvm-setup.exeを実行してインストールする。
[https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)インストールウィザードに従い、インストール先とシンボリックリンクを指定します。
インストール完了後に、nvmコマンドを使ってNode.jsをインストールしようとすると、エラーが発生した。
## Node.jsのインストール
nvmコマンドからNode.jsをインストールするのに使用したコマンド↓
“`bash
nvm install latest
“`
バージョンを指定
node.jsでブラウザーテストをするselenium-webdriverのセットアップ
## はじめに
この記事はnode.jsでE2Eテストを構築する、Selenium-Webdriverのセットアップと更新の方法を記録、共有するためのものです。
:::note warn
Seleniumは幅広い環境をサポートしていますが、この記事ではnode.jsでのセットアップのみを取り扱います。
:::Seleniumは幅広い環境とシナリオを対象にブラウザーテストを提供していますが、情報量が多すぎて特定環境でのセットアップ手順が調べにくいです。この記事はnode.jsに限ってSeleniumの構築方法を解説します。
### 想定する環境
_▼システムバージョン_
“`bash
% sw_vers
ProductName: macOS
ProductVersion: 12.6.1
BuildVersion: 21G217% brew –version
Homebrew 3.6.19
Homebrew/homebrew-core (git revision e8a1e49d82b; last commit 2023-01-18)
Homebrew/homebrew
Discord.js これだけはするな!もしくは陥りやすい間違い集
## Discord.js 禁忌リスト
### なんでこれを書こうと思った?
初心者のときバカなことばっかりやってたからです### client.on(“messageCreate”)の濫用
“`javascript
//長いのでカット!client.on(‘messageCreate’, async msg => {
if(msg.content === “hello”) {
msg.reply(“HELLO!”);
}
});
client.on(‘messageCreate’, async msg => {
if(msg.content === “good morning”) {
msg.reply(“GM”);
}
});
client.on(‘messageCreate’, async msg => {
if(msg.content === “good afternoon”) {
msg.reply(“Good afternoon!”);
}
});
client.o
SDKを使わずにNode.jsからAzure IoT HubへMQTT接続する
MQTT.jsでIoT Hubに接続したときのメモです。
# 準備
とりあえずテストしたかったので無料プランを利用しました。デバイス作成までは以下が参考になりました。
– [Azure IoT Hub に Mosquitto™ から MQTT なげてみる](https://qiita.com/narutaro/items/1a16ff1321f5044afaf0)
認証はSAS(Shared Access Signature)を利用しました。
# 接続に必要な情報
AzureポータルからIoT Hubのリソースを表示し、必要な情報を取ってきます。(一部伏字にしています)
①ホスト名
②デバイスID
③主キー– 概要ページ
– ①ホスト名は[IoT Hubの名前].azure-device.netというフォーマットです。![iothub-info1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3116301/80589988-c940-88ad-afd0-b1a9f203e
ES Lintの導入
## 本記事を読んでできること
+ ES Lintを導入できる## ES Lintとは
+ https://eslint.org/## 環境
+ Windows10 Pro 64bit
+ Node.js v16.17.1## 手順
1. Node.jsをインストールします。
[Nodejsのダウンロード](https://nodejs.org/ja/download/)1. ターミナルを開き、以下のコマンドを実行してESLintをグローバルにインストールします。
“`
npm install -g eslint
“`1. プロジェクトのルートディレクトリに移動し、以下のコマンドを実行してプロジェクトにESLintをインストールします。
“`
npm install eslint –save-dev
“`1. 以下のコマンドを実行して、ESLintの設定ファイルを作成します。
“`
eslint –init
“`1. package.jsonに以下を追加
ElasticBeanstalkのUnknown or duplicate parameter: NodeCommandの対処法
昨日、下に貼ったこちらの動画と公式のドキュメントを基にnode.jsのアプリケーションをAWS Beanstalkでデプロイすることを試みた。
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_nodejs_express.html
ということで上の資料ではエラーが起きてしまうところの対処法を先に記述する。
その後、全体の流れを記述する。“`
C:\Users\yusuk\nodejs-project>eb deploy
Creating application version archive “app-c698-230118_133959827133”.
Uploading nodejs-project/app-c698-230118_133959827133.zip to S3. This may take a while.
Upload Complete.
2023-01-18 04
cpxが更新されないのでfsで置き換えてみる
npm script で一部の素材ファイルやディレクトリをまるごとコピーするのに便利な cpx だが、すでに6年も更新されておらず、最近になって npm audit に警告がでるようになった。
https://www.npmjs.com/package/cpx
流石に6年放置は修正が期待できないので代替案を考えた。
以下は私のプロジェクトで利用しているスクリプト例(webfont用のファイルをコピーしている)
これをベースに書き換えを行ってみる。“`json
“font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\””,
“watch:font”: “cpx -C \”./dev/assets/fonts/*\” \”./public/assets/fonts\” -w”,
“`### 1. cpコマンドを使う
“`json
{
“font”: “cp -r ./dev/assets/fonts ./public/assets/fonts”
}
“`私がWindows派なのでな
SvelteKitでPostgresSQLへデータの登録・取得をしてみる
# はじめに
SvelteKitは公式ドキュメントが(体感)読みやすいですね!
しかし、公式ドキュメントではDBを利用するにはどうすればいいのかが、
ふんわりとしか書かれていないため、実際に理解のためにSvelteKitからDB接続を試してみたいと思います。
個人的に理解した内容になるため、誤りやもっと良い方法などがあればコメント頂けると嬉しいです。# 前提
– 開発環境:Windwos10
– 主なバージョン
– SvelteKit:1.0.0
– Node.js:v16.16.0
– Postgresql:PostgreSQL 12.2, compiled by Visual C++ build 1914, 64-bit# Postgresqlの準備
今回はDBに特にこだわりがなかったため、PostgreSQLを使用しました。
ローカル開発環境用にインストールする場合、次の記事が参考になると思われます。https://qiita.com/tom-sato/items/037b8f8cb4b326710f71
# SvelteKitの準備
公式ド
Rails7 のフロントエンド関連の Gem を分類
## はじめに
最近の Rails にはフロントエンドに関係する `ooooo-rails` といった Gem がたくさんあります。
たくさんありすぎてよくわからなかったので、分類してみました。## 結論
| 関心 | Gem |
| ———————————————— | ————————————————– |
| アセットパイプライン | sprockets-rails, propshaft |
| JavaScript, CSS の管理(Node.js を使う場合) | jsbundling-rails, cssbundling-rails
Puppeteerを使ってMoneytreeの口座情報をスクレイピングする
家計簿アプリのMoneytreeを使うと銀行口座や証券口座、カードの情報が一元化されてとても便利ですよね。
今回はMoneytreeに連携された口座情報をスクレイピングで引っ張ってくる方法を紹介します。
(引っ張ってきたデータはExcelに積み上げたり、差分をSlackに投稿したり出来ますね)スクレイピングというと、Seleniumを思い浮かべる方も多いかと思いますが、今回はNode.jsのライブラリであるPuppeteer(パペティア)を使います。
理由としては以下の通りいくつか挙げられます。
– Puppeteerをインストール(`npm install puppeteer`)すると、ヘッドレスブラウザのChromiumがセットでインストールされ、手軽にスクレイピングができる。(Seleniumの場合はWebDriverのバージョンを合わせたりPathの設定が必要だったりハードルが若干高い)
– AWSやGCPに乗っける際に苦労が少ない。(こちらの利点がかなり大きいです。)別記事で、PuppeteerをGCPのCloud Functionsで動かす方法を紹介します。
socket.ioを利用したアプリのデプロイをしたい(攻略編)
昨日、サーバーサイドがあるウェブのデプロイに苦戦したが振り返ると検索の仕方が悪かった。
サーバーサイドがあるウェブサイトの公開という部分がメインでsoket.ioを利用しているという点はメインではない。
ということで、Node.jsを含めての検索に変えてやり方を模索した。
https://yu-teck.com/programming/node-js/node-chat-app/
https://noauto-nolife.com/post/heroku-counter-plan/
上の2つの記事を読んでわかった重要な点が2つある。
・Netlifyはあくまでフロントサイドだけホスティングするサービスであり、サーバーサイドがあるウェブには向かないという点。
・Herokuの無料プランはなくなっており、Herokuでデプロイするにはお金がかかる点。Herokuでデプロイするのが一番簡単そうだが、勉強のためにもAWSで公開したいなと思っている。
ブログの後半にはまた違うことを言っているかもしれない。https://www.youtube.com/watch?v=0oIc
【Windows/Mac/Linux(Ubuntu)】Node.jsインストール方法
# Node.jsインストール方法【Windows】
1. 以下のURLにアクセスする。
– [インストーラー](https://nodejs.org/ja/)
2. 推奨版を押下する
![Node01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/173ab336-bda5-a92f-df04-d69cd01edd22.png)
3. フォルダを開く
![Node02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/f61aebfa-00b3-a777-5990-98278771e367.png)
4. `node-v16.14.0-x64`をダブルクリックする
![Node03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/89dd9db9-6563-6e3b-2b9f-43679d4
Next.jsもとい、Node.jsでprofilerを簡単に使う方法
現在、Chromeを使うことでGUIベースでProfilerを使用することが可能になっています。
その方法の紹介です。# 手順
## Next.jsをProfilerを有効な状態で立ち上げる
Next.jsを立ち上げる際に次のようにNODE_OPTIONSをしてして起動してください。
“`
NODE_OPTIONS=’–inspect’ next dev
“`## ChromeのInspect画面を表示
[chrome://inspect](chrome://inspect) にアクセスすると、inspectorが利用可能です。
Devices > Remote targetにinspectオプションを有効にしたプロセスがリストされているので、`inspect`リンクをクリックしてください## Profilingする
以上
後は開いたウィンドウのProfilerタブからCPUのProfile、MemoryタブからMemoryのProfileを取得できます。# 参考
https://medium.com/@paul_irish/debugging