- 1. Lambda(Node.js)のDockerイメージをデプロイしてみた。(その4,ECRへ登録とLambdaの実行)
- 2. Discord BotでYoutubeの情報を取得する
- 3. inspectでデバッグログの快適性を爆上げする
- 4. アプリケーションのプラットフォームをReact, Next.jsで作る
- 5. Saas(scss)でLegacy JS APIによるエラーが起きた(;;)→解決方法
- 6. がんばらない競プロ千里行 〜AtCoder入緑を目指して〜【1日目:JavaScriptで始める茨の道】
- 7. Notion APIを使ってデータベースからページの内容を得る
- 8. 友達と遊ぶ用のSpigotサーバーの便利ツールを作る #1
- 9. React開発入門④ 〜時刻表示&ヘッダー実装(UseEffect)〜
- 10. npm publishで大きいファイルを扱う
- 11. Ubuntu 20.04 Apache2 node.jsを動作させる(SSL対応)
- 12. Single executable applicationsを使ってnodeアプリケーションを簡単にビルドできるようにする
- 13. Node.js app Apache2下で起動
- 14. Node.jsでログインサーバーを作る – 2
- 15. npm script で呼ばれたjs内でTerminal側の作業ディレクトリを参照する
- 16. GROWI7.1へのアップデート
- 17. nvmのインストール(MacBook Air, M1, 2020)
- 18. tsxでError [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol ‘c:’
- 19. フォローしているQiitaユーザが作成した記事を1日1回、スラックに通知してみた ~AWS100本ノック~ 13/100
- 20. discord bot (discord.js)を GCP 無料VM で常時実行
Lambda(Node.js)のDockerイメージをデプロイしてみた。(その4,ECRへ登録とLambdaの実行)
# はじめに
LambdaをDockerイメージでデプロイする方法を、調査する機会があったので自分の備忘用にメモ書きを残します。実行環境は、前回から引き続きになります。
今回は、ECRにデプロイしてLambdaとして動作させる所をメモ書きします。# AWS CLIを利用できるようにConfigureを実施
ECR関連を操作できるアクセスキーを用意して、configureする
“`shell
aws configure
“`
+ アクセスキー:払い出した物
+ シークレットキー:払い出した物
+ Default Region:ap-northeast-1
+ Default 出力フォーマット:json# ECRにデプロイする
“`shell
aws ecr get-login-password –region ap-northeast-1 | docker login –username AWS –password-stdin 【AWSアカウントID】.dkr.ecr.ap-northeast-1.amazonaws.com
“`
「Login Succee
Discord BotでYoutubeの情報を取得する
## 概要
PCではコピペでいいのですが、スマホユーザーはコピペをする際にアプリ離脱してしまうので、
リアルタイムでフレンドと情報の共有をするためにDiscordのみで完結するBotを作成します。“`
Discord.js v13
Node.js v22“`
# 1.Discord Botの準備
Discord Botを用意します
作成方法やトークンの払い出し方法は公式にも記載されているので割愛します。
[参考](https://note.com/exteoi/n/nf1c37cb26c41)https://discord.com/developers/applications
# 2.Nodeのインストール
Nodeをインストールします
LTS版で問題ありません。https://nodejs.org/en/
# 3.Discord.jsのインストール
コンソールより下記コマンドを叩きます。
“`
# npm
npm i discord.js# yarn
yarn add discord.js
“`# 4.Youtube APIの用意
①
inspectでデバッグログの快適性を爆上げする
## はじめに
Node.jsでオブジェクトや配列を`console.log`でデバッグ表示した際の`[Object]`や`[Array]`に辟易していませんか?`inspect`関数はオブジェクトやデータ構造を可読性の高いフォーマットで出力できる、デバッグやロギングに活用できる非常に強力なツールです。本記事では、`inspect`関数の使用方法、便利なオプションをいくつかのコード例を交えて解説します。## Node.jsの`inspect`関数とは?
Node.jsの`util`モジュールに含まれている`inspect`関数は、オブジェクトを文字列として表示する際にその内容を詳細に確認できるように設計されています。`console.log`と比べて、`inspect`を使うと以下のような利点があります。– ネストされたオブジェクトの深さを指定できる(無限も可)
– 色付きで出力することができ、見やすい
– 配列やマップなど特殊なデータ型にも対応## `inspect`関数の基本的な使い方
まず、基本的な使用方法を見てみましょう。以下のコードは、`inspect`を使ってオ
アプリケーションのプラットフォームをReact, Next.jsで作る
アプリケーションのプラットフォームを現在制作しております。
特徴:
旅行、就職活動、引っ越しなど、長期的な計画を立てる際には、複数のアプリケーションやサービスを利用したり、さまざまなウェブサイトを参照したりするため、情報が分散するといったことがよくあります。また、そのような計画は今取りかかるか迷うことも多く、後回しにしがちです。
そんな課題を解決するために、直感的にアプリケーションやサービスのアイコンを配置して情報源、ツールを一元管理できるプラットフォームを作りました!
GitHubリポジトリ:https://github.com/takuto-abc/app_platform_v2
![2024-11-10 16.27のイメージ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3785352/f428b6ed-bce0-2a69-b0f0-a1fcbf4153b6.jpeg)
![2024-11-10 16.27のイメージ.jpeg](https://qiita-imag
Saas(scss)でLegacy JS APIによるエラーが起きた(;;)→解決方法
# はじめに
Sassを使っていた時に以下のようなエラー文がでてsassのスタイリングが反映されない状態に陥りました。このようなときの解決方法を共有しようと思います。“`
⚠ ./src/styles/globals.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[11].use[3]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[13].oneOf[11].use[4]!./node_modules/ne
がんばらない競プロ千里行 〜AtCoder入緑を目指して〜【1日目:JavaScriptで始める茨の道】
# はじめに
Qiitaを見ていると競プロの色の話がよく出てくる。それを見て自分もやる気が出てくる日が今までに何回かあったけど(今日)、持続した最高日数は2日。
習慣化と、成長記録+備忘録も兼ねてQiitaにこの長い長〜い道のりを残したいと思います。まず筆者はこういうステータスの持ち主です。
# 筆者(@KyongminS)のスペック
– 学部までは電気電子工学系、大学院は情報系の研究室にいた
– 来年(2025年)で社会人4年目
– プログラミングは完全独学から始めて今年(2024年時点)で6年目
– 仕事以外はプログラミングしない(ただ土日に友達の仕事を手伝うとかで大体触っている)。独学は必要になったらやる程度
– 3日坊主。好きな言葉は「YAGNI」
– 好きな言語はJavaScript。フロントエンド、バックエンド、ブラウザ、アプリまでなんでも作れるから
—
今までの挫折の原因の一つに「ゴールを決めていなかったこと」があると思うので、ゴールを設定します。
あと、やらないことも決めておきます。変にやる気が出そうなことは特に除外します。# ゴール
:::note
20
Notion APIを使ってデータベースからページの内容を得る
Notion APIを使ってデータベースにアクセスして、ウェブサイトを表示する方法が、WordPressにとってかわるという内容の話をXの投稿で見かけました。
投稿ではBolt.newを使って作っていましたが、私はBolt.newの無料版のせいか上手くできませんでした。
それでNotion APIでデータベースの内容を得る方法や、記事の内容を得る方法を勉強しようと思いました。
今回は、備忘録の意味も込めて記事にしました。
コードは、GPT-4oを使って制作しました。このコードで、Notion APIの動作確認ができます。
## データベースから記事IDを得て記事の内容を得る
### 必要なパラメーター
こちらのページで、インテグレーションの作成をします。
https://www.notion.so/profile/integrationsデータベースのIDの確認方法
下記の記事などを参考されると、分かりやすいです。
https://note.com/amatyrain/n/ncf7111f74ffa### コマンド
npmを使います。
Notion API SDKを
友達と遊ぶ用のSpigotサーバーの便利ツールを作る #1
最近友達とSpigotの自宅サーバーを立てて遊んでます。
そのサーバーで使える便利ツールを作って行きます。
今回はパート1です# サーバー環境
記事執筆時の環境です。
“`
サーバー:Spigot
環境: Windows11 Home
ポート開放: SecureShareNet
主なプラグイン: DiscordSRV,WorldEdit,BlueMap,GeyserMCなど その他合計30個
“`
# 便利ツール
今回作るツールでは、主にやりたいことが2つあります。
・自作DiscordBotで サーバーのアドレス、などをいちいち送らなくていいようにする。
・メンテ起動をできるようにする。(DiscordBotにメンテって言ってもらう)ん? それくらい自分でやれって? めんどくさいから楽にしたい。
# DiscordBot
今回は、discordのJavaScriptパッケージの`discord.js`を使います。
基本的にはNode.jsでつくる。# discord.js
“`shell
npm install discord.js
“`# テスト
試しに
React開発入門④ 〜時刻表示&ヘッダー実装(UseEffect)〜
## 目的
・リアルタイムな時刻表示を実装
・ヘッダーを作成&CSS適用していい感じにする## 成果物のイメージ
![スクリーンショット 2024-11-10 150758.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3801383/f8d96bc1-f723-4330-6d7a-81483f215a5e.png)こんな感じの奴を作ります
## 実装
### ヘッダーコンポーネント作成
別ファイルにヘッダーコンポーネントを作成します。
・ログインユーザー名(後々の実装になるため仮置き)
・ページネーション
の2つをとりあえずヘッダーに配置します。
(CurrentTimeは次に作成するコンポーネントです。)“`PageHeader.jsx
import React from “react”;
import { Link } from “react-router-dom”;
import { CurrentTime } from “./CurrentTime”;export cons
npm publishで大きいファイルを扱う
## 経緯
形態素解析の辞書ファイルをアップしたかったんだけど、ファイルが大きすぎてnpm publishができなかった。
https://www.npmjs.com/package/kuromoji-neologd
https://github.com/sushigadaisuki/kuromoji-ipadic-neologd
“`
npm error code E413
npm error 413 Payload Too Large – PUT https://registry.npmjs.org/kuromoji-neologd – Payload Too Large
npm error A complete log of this run can be found in: C://xxxxx.log
“`
## 概要
1. Github releaseで圧縮してアップロード
1. ファイルダウンロード、解凍するpostscriptを作成
1. npm install したときに自動的にファイルがダウンロード、解凍される## 1. Github releaseで圧縮して
Ubuntu 20.04 Apache2 node.jsを動作させる(SSL対応)
Kagoya.js VPS(Virtual Private Server)を利用し、Ubuntu 20.04をセットアップ。
更にApache2及び、Nodeをインストール。
“`
# apache2 -v
Server version: Apache/2.4.41 (Ubuntu)
node -v
v20.17.0
“`
を確認。
更に
proxy及びproxy_http moduleを有効にする。
“`
a2enmod proxy
a2enmod proxy_http
“`
SSL対応は
“`
certbot –apache -d www.example.com
“`
/etc/apache2/sites-enabled/下にwww.example.com.confが生成されるので、
“`
cd /etc/apache2/sites-enabled/
vi www.example.com.conf
ServerAdmin webmaster@localhost
ServerName www
Single executable applicationsを使ってnodeアプリケーションを簡単にビルドできるようにする
# はじめに
こんにちは、Never3924です。
NodeのSingle executable applicationsを使って簡単にビルドができるようにしよう、という記事です。# 環境
NodeJSのv20.1.2
Windows 10
で動作確認。# 本題
早速やりましょう。ていうか以下のコードをコピペです。
“`build.bat
@echo off
setlocal enabledelayedexpansion
chcp 65001mkdir dist
cd distset CALLPOWERSHELL_RETURN=””;
echo Collecting information…
call :CALLPOWERSHELL “$text = Get-Content -Path “../package.json” -Raw; $pattern = ‘\s+\”main\”\s?:\s?\”(.*)\”‘; if($text -match $pattern) { $filename = $matches[1] };echo $filename”
set F
Node.js app Apache2下で起動
Node.jsアプリをApacheサーバのVirtualHostにて、ドメインを割り当て、更にアプリを起動し、Proxy設定にて、起動したlocalportを指定し、80のPortとして、アクセスさせる。
下記にその手順を記載します。
1、nodeの環境に、foreverモジュールをInstallしてあること。2、httpd.confのVirtualHost設定例を下記に示します。
“`
ServerAdmin webmaster@mail.example.com
DocumentRoot /var/www/html/example
ServerName message.example.com
ErrorLog logs/example.com-error_log
CustomLog logs/example.com-access_log common
ProxyRequests off
Order deny,allow
Node.jsでログインサーバーを作る – 2
# 初めに
今回は、前回のログインサーバーを改造します(?)
# 前回とちがうところ
前回は一つのユーザーまでしか認証ができませんでしたが、今回はユーザーデータをjson形式で管理して複数のユーザーの認証ができるようにします# ファイル構成
今回のファイル構成は以下の通りです。
“`
—|–public |
|–main.html
|–style.css
|–main.js|–Server.js
|–userdata.json“`
# 準備
まず、以下のコマンドをcmdで実行して、ログインサーバーのフォルダーに移動ください
“`
cd C:\Users\\Downloads\
“`
※仮のpathです。実行するときはC:\~の部分を作成したフォルダのpathに変更してください次に、以下のコマンドを入力します
“`
npm install express cor
npm script で呼ばれたjs内でTerminal側の作業ディレクトリを参照する
“`js:runner.cjs
const process = require(“node:process”);// これは nodejs の作業ディレクトリ
const CWD = process.cwd();// こっちは terminal(bash | PowerShell | CMD) の作業ディレクトリ
// PWD – bashから参照可
// INIT_CWD – bash | PowerShell | CMD で参照可
const PWD = process.env.PWD || process.env.INIT_CWD;
“`
GROWI7.1へのアップデート
# 概要
今回、家の環境でGROWIを7.0.15から7.1にあげようという試みをしてたんですが、結構変更点が多くて思いのほか引っかかってしまったので、備忘録的な意味も込めて記しておきます。誰かの参考になれば幸いです。# 環境
* Ubuntu22.04(wsl)
* GROWI 7.0.15→7.1へのアップデート
* docker compose# ハマった点1
今回のGROWIのアップデートでハマってしまったのは、おそらくyarnからpnpmに変わった部分が大きいのではないかなと思います。
GROWIのアップデート時に`docker compose build`を実行するタイミングがあるかと思いますが、これがうまくいきません。こちらの問題は中津川さんのQiitaを参照して解決しました。本当に感謝です。。
https://qiita.com/goofmint/items/69171d242b342d97650a#dockerfile%E3%81%AE%E4%BF%AE%E6%AD%A3やることとしては、growiフォルダ内の`Dockerfile`の編集です。
nvmのインストール(MacBook Air, M1, 2020)
# はじめに
Macにnvmをインストールしていきまーすhttps://github.com/nvm-sh/nvm
# 開発環境
– MacBook Air, M1, 2020
– nvm 0.39.7# 導入
1.ターミナルを開きます2.nvmをインストールします
~~~bash
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
~~~3.~/.zshrcを編集します
~~~bash
$ vi ~/.zshrc
~~~~~~.zshrc
export NVM_DIR=”$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm
[ -s “$NVM_DIR/bash_completion” ] && \. “$NVM_DIR/bash_completion” # This loads nvm bash_completion
~~~4.変更を反
tsxでError [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol ‘c:’
# 本記事について
tsxでTypeScriptを実行しようとして出たエラーがデバッグできず、ググっても対処法が出てこなかったので、同様の症状を経験する方のために記事に残そうと思いました。# 結論
表題のエラーが出たらNode.jsをアップデートすると直るケースがある。# 症状
“`package.json
{
“name”: “***”,
“type”: “module”,
“scripts”: {
“dev”: “tsx src/index.local.ts”
},
“devDependencies”: {
},
“dependencies”: {
}
}
“`
からの
“`
npm run dev
“`
で出たエラー
“`> dev
> tsx src/index.local.tsnode:internal/errors:496
ErrorCaptureStackTrace(err);
^Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs wit
フォローしているQiitaユーザが作成した記事を1日1回、スラックに通知してみた ~AWS100本ノック~ 13/100
# はじめに
Qiitaにはユーザのフォロー機能がありますが、フォローしている人が投稿した記事を確認するには、`フォロー中のユーザ`タブで記事を一覧表示して、当日の記事を確認するしか現状なさそうです 😥
まぁ、それでもいいっちゃいいんですが、せっかくなら日常で使っているコミュニケーションツールに通知してくれた方が良いなーと思い、自動で通知する機能を作ってみました!
![スクリーンショット 2024-11-05 153409.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87924/9acf3762-1985-2c11-1796-051d53f8075f.png)
# 試してみる
では、さっそく試してみます。
Qiita APIを利用して情報を取得し、Slackに通知します。
※公式のQiita APIリファレンスは[こちら](https://qiita.com/api/v2/docs)全体像としては以下になります。
![フォローしているQiitaユーザの投稿をスラックに通知.d
discord bot (discord.js)を GCP 無料VM で常時実行
ローカルPCのnode.jsをつけっぱなしにするはイヤだったので、もともと維持しているGCPの無料VMで実行させることにしました。
## 無料VM
https://cloud.google.com/free?hl=ja
に詳しく載っています。VMの構築方法の詳細は、ググると詳しく載っているのと、自分の過去記事にも少し触れていますので、省略しますが、要は、e2-microという小さなサーバをUS-WEST(オレゴン)で作ると無料って感じです。
あたりさわりのない「ubuntu」で作っています。
実は、ずっと18のままだったんですが、サポート切れたので、今日、20に上げました。## nodejs インストール
nodesoource経由でインストールしてみます。
“`
$ sudo su
# apt update
# apt upgrade
# curl -fsSL https://deb.nodesource.com/setup_23.x -o nodesource_setup.sh
# chmod 777 nodesource_setup.sh
# ./nodesour