- 1. CloudFrontの署名付きCookieを用いてプライベートコンテンツを配信する
- 2. Exceljs でシートを保護し、特定のセルだけロックを解除して編集可能にする
- 3. 【Deno Deploy】md5sum api【md5】
- 4. [AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
- 5. Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
- 6. Denoってなに？試しに使ってみよう
- 7. Node.jsでHTML、CSSを反映させる（自分用メモ）
- 8. [パート２：実行]S3に保存する前ラムダでサムネイルに画像圧縮の前処理
- 9. [パート１：概要の設計] S3に保存する前ラムダでサムネイルに画像圧縮の前処理
- 10. node js でdiscord のbot作成#1 nodejsの導入botを起動
- 11. IP アドレス確認くんを作る!! powered by Node.js on Azure App Service
- 12. PowerShellでyarnをインストールしようとしたら、「yarn : このシステムではスクリプトの実行が無効になっているため～」とエラーが出た
- 13. Vite + React + Typescript 環境構築おためし
- 14. almalinuxにnode.jsとexpressをインストールする
- 15. ExpressにおけるRate Limitの実装ガイド
- 16. Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その2)
- 17. nodeのバージョンアップ
- 18. VS2022 17.8 の React テンプレート (Vite) でホロジュール Web アプリを作り直した
- 19. WSLのUbuntuにプログラミング言語の管理ツールasdfを導入する
- 20. 【TypeScript】画面表示までの流れを図解で理解しながら環境構築する
CloudFrontの署名付きCookieを用いてプライベートコンテンツを配信する
# はじめに
この記事は、CloudFrontの署名付きCookieを用いたプライベートコンテンツ配信についてまとめています。
# 背景
現在開発しているWebアプリケーションに、以下のような追加実装を行うことになりました。
– 認証されたユーザーのみがアクセス可能なコンテンツを作成する
– コンテンツは静的なWebページ
– 認証機能は既存のものを使用するこの仕様を踏まえて、実装方法を検討した結果、CloudFrontの署名付きCookieを採用することにしました。
Webアプリケーションの特徴的に、ユーザー数（コンテンツへのアクセス数）はそこまで多くならない想定であり、既にあるWebアプリケーションのインフラは全てAWSで構築されていますので、運用コスト・実装コスト面でも最適な選択肢と考えました。# 前提
## CloudFrontの署名付きCookieとは
CloudFrontはAWSのCDNサービスであり、Webアプリケーションのフロント画面や、サイト内で使用される画像等の静的コンテンツをパブリックに配信するという使い方をよく耳にします。
ただ、開発物によ
Exceljs でシートを保護し、特定のセルだけロックを解除して編集可能にする
# 概要
一部セルのロックを無効にした後で、シートの保護を有効化すれば良い
# コード例
– 以下の例では `B1` というようにセル位置を直接指定している
– Aliceの年齢だけが編集可能になる“`js
const workbook = new Excel.Workbook()// Sheet
const worksheet = workbook.addWorksheet(‘My Sheet’)// Header
worksheet.columns = [
{ header: ‘Name’, key: ‘name’ },
{ header: ‘Age’, key: ‘age’ },
]// Rows
worksheet.addRow({ name: ‘Alice’, age: 20 })
worksheet.addRow({ name: ‘Bob’, age: 30 })// Lock cell
const cell = worksheet.getCell(‘B2’)
cell.protection = { locked: false }//
【Deno Deploy】md5sum api【md5】
javascriptでmd5するの結構めんどいのでAPI作った
# 使い方
“`javascript
const md5 = text => fetch(‘https://md5sum.deno.dev/’ + text).then(r=>r.text())console.log(await md5(‘abc’))
“`# ソースコード
“`typescript
import { Md5 } from “https://deno.land/std@0.119.0/hash/md5.ts”const headers = { ‘Access-Control-Allow-Origin’: ‘*’ }
Deno.serve((req: Request) => new Response(new Md5().update(req.url.slice(24)).toString(), { headers }));
“`
[AWS]Serverless Frameworkを使ってAPI Gateway×Lambda×DynamoDBを使用したWebAPIを構築する
## インフラ構成
WebAPIの作成に当たって今回使用するAWSの各サービスを簡単にまとめてみます。・API Gateway
HTTPリクエストを受け付けて、他のAWSサービス(Lambda等)にルーティングする機能です。REST APIやWebSocket APIを簡単に作成できます。API Gatewayでは、リクエストのパスやクエリパラメータ、ヘッダー、ボディなどをLambda関数に渡すことができます。
https://aws.amazon.com/jp/api-gateway/・Lambda
サーバレスコンピューティングのサービスです。コードをアップロードするだけで、イベントやトリガーに応じて自動的に実行されます。サーバの管理やスケーリングを気にする必要がありません。Lambdaは、Node.js、Python、Java、Go、Rubyなどの言語に対応しています
https://aws.amazon.com/jp/lambda/・DynamoDB
DynamoDBは、NoSQLデータベースのサービスで、高速でスケーラブルなキーバリューストアやドキュメントストアを提
Vue.js + LaravelでシンプルなSPA構築チュートリアルについて
完全honaki用悪しからず
php7.4
Laravel6.x
node.js20## PHP7.4の導入
### homebrewのインストール### PHPの導入
https://c-limber.co.jp/blog/1691## Composerの導入
ターミナルで以下を実行
“`
curl -sS https://getcomposer.org/installer | php
“`ターミナルで以下を実行でComposerインストール 確認
“`
composer -v
“`
以下画像の通りならOK
## NPMの導入(mac)
### Node.jsのインストール
https://nodejs.org/en/download
上記UR
Denoってなに？試しに使ってみよう
2か月前に投稿してそのまま放置してました。
~~まあUbuntuやらなんやらで遊んでただけですが~~
さて本題に戻って、今回はDenoってなに？って人向けに簡単に説明を書きます。# Denoとは
Node.jsの作者のライアン・ダールがJSConf EU 2018での公演「Node.jsに関する10の反省点」で発表されたJavascirpt・Typescirptのランタイムです。# インストール方法
Windowsは
“`powershell:PowerShell
irm https://deno.land/install.ps1 | iex
“`
Mac・Linuxは
“`sh:Bash
curl -fsSL https://deno.land/install.sh | sh
“`
のコマンドを実行するとインストールされます。# 実際に使ってみよう
:::note warn
自分が使っているDenoのバージョンはv1.41.0です。
なのでバージョンが上がるにつれ動かなくなる可能性があります。
:::
まずDenoを実行してみましょう。
“`
deno run
Node.jsでHTML、CSSを反映させる（自分用メモ）
# はじめに
ポートフォリオ用にウェブサイトを作りたいけどやり方が分からねぇってことで勉強したことをまとめました。最初の導入部分的なことしかまだわかっていませんが、もし似たようなことをしたくて困っている人の助けになればと思います。# 1.プロジェクトを作成
（最初はNode.jsの導入をする必要があります）
ターミナルにて好きなフォルダに行く
“`
cd プロジェクトファイル
“`
package.jsonの作成
“`
npm init
“`
express（モジュール）をインストール
“`
npm install express –save
(npm install モジュール名 オプション)
“`こんな感じにファイルを置く（by ChatGPT）
GPT先生は偉大
“`
プロジェクトフォルダ/
│
├── node_modules/ # npmによってインストールされたモジュール
│
├── public/ # 静的ファイルを格納するディレクトリ
│ ├── css/
[パート２：実行]S3に保存する前ラムダでサムネイルに画像圧縮の前処理
# 前提
せめてS3・Lambda・IAM権を持っているAWSアカウントそれともIAMアカウント用意
# 概要
こちら記事では詳細な実行を説明させて頂きます。主な内容が下記のように進めています。
1. バケツ作成
1.1 バケツ作成
2.2 ライフサイクル作成
2. ポロシー・ロール作成
2.1 ポリシー作成
2.2 ロール作成
3. ラムダファンクション作成
3.1 環境作成
3.1.1 初期設定
3.2 ファンクション作成
3.2.1 ロールや処理時間を設定
3.2.2 トリガー設定
3.2.3 環境変数
3.3 ラムダのNode modulesについて
4. テスト行い
4.1 S3アップロード
4.2 結果をチェック
4.3 ログをチェック
## 1. バケツ作成
2つのバケツを作成し、そのうち1つを一時的なバケツとして使用します。この一
[パート１：概要の設計] S3に保存する前ラムダでサムネイルに画像圧縮の前処理
前の[記事](https://qiita.com/17021084/items/e1078bacc2fbc32d3183)の次に、今回は実践のユーケースを説明させて頂きます。
以下の２つのパートに分かれています。
– パート１：概要の設計（本記事）
– パート２：[詳細な実行](https://qiita.com/17021084/items/0e077c7c85bd5fce657d)## **概要**
1. 前提
2. 背景
3. 目的
4. 構成・経過
5. 評価
6. その他## 1.前提
– Node Js 20.xx
– Lambda x86_64
– [sharp](https://sharp.pixelplumbing.com/install) (os linux, cpu x86)
– AWS console 操作ため、管理権があるアカウントは必要## 2.背景
SNS系アプリでよく見かけるサムネイルです。これらの処理には時間がかかりますが、たまにしか実行されません。メインのサーバーにサムネイル処理を置くと、他のサービスに影響を与える可能性があ
node js でdiscord のbot作成#1 nodejsの導入botを起動
# この記事を書いた自分の環境
| 名前(アプリ名とか)| バージョン |
|:-:|:-:|
| pc | Windows10 |
| nodejs | v21.6.2 |
| discord js | 14.14.1 |
# node js 導入
まず以下のリンクに飛びましょうhttps://nodejs.org/en
そしたら Current
Latest Features
って書いてある方を選びましょう
って感じのやつです21.6.2って書いてあるけれどこれが違ってもok“`bash:cmd
node -v
“`
って打ったら
“`console:cmd
v●●.●.●
“`
って出たら成功です※●はバージョン# bot制作
そしたら次のリンクに飛んでhttps://discord.com/dev
IP アドレス確認くんを作る!! powered by Node.js on Azure App Service
こんにちは、アーキテクトのやまぱんです。
補足コメントや質問、いいね、拡散、是非お願いします🥺！
間違ってたら優しく教えてください！node.js を触るのはこれが 5 回目ぐらいなんですけど、今回本来のメインの検証をするための下準備でハマってしまった。
## きっかけ
・検証のため IP アドレス確認くんを作りたくなった
・作ってみるとつまった
・**ローカルでは動くのに、Azure App Service にデプロイすると動かないっていう状態**にハマる、沼る
・他にも詰まってる人がいそうだった
Stack over flow や Qiita でも同じようなエラーになってる人がいた
・今後も作ることありそうなのでメモしとこ## 事前準備
node.js、Azure CLI ,Express Generator などはインストール済の Windows 環境で実施## 手順
+ 1.管理者権限のターミナルにて express のひな形を作る
“`powershe
PowerShellでyarnをインストールしようとしたら、「yarn : このシステムではスクリプトの実行が無効になっているため～」とエラーが出た
# 今回困ったこと
タイトルの通りですが、PowerShellで`yarn`を使おうと`npm`でインストールしようとしたら、以下のようなエラーが出て手詰まりになりました。
“`
yarn : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\hogehoge\nodejs\bin\yarn を読み込むことができません。詳細については、「about_Execution_Policies」(https://
go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:3
+ . ‘C:\Users\hogehoge\nodejs\bin\yarn
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : U
Vite + React + Typescript 環境構築おためし
# 概要
[vite](https://ja.vitejs.dev/)はwebpackの欠点を解消するように作られたビルドツール。
最近巷でよく聞くので、本家のサイトを参考にしてビルドをやってみようと思う。# 参考
https://ja.vitejs.dev/guide/#%E6%9C%80%E5%88%9D%E3%81%AE-vite-%E3%83%95%E3%82%9A%E3%83%AD%E3%82%B7%E3%82%99%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B
# 環境
今の環境はこんなかんじ。– OS
– MX 21.3 Wildflower (64bit)
– CPU
– Intel(R) Core(TM) i3-2350M CPU @ 2.30GHz
– RAM
– 4G
– nvm
– version 0.35.0
– node
– version 20.11.1やけにスペックが低いのは古くなった大学生協PCに
almalinuxにnode.jsとexpressをインストールする
# almalinuxでnode.jsを開発したい -まずはコンソール-
※ここでの環境は2024年 almalinux9.3 node.js20.9 express4.18.2で検証しています。
バージョン違いでコマンド入力や記法が変わることも有るのであしからずご了承ください※ここではエディタにvimを使っていますが、jsファイルの編集なら他のIDEとかを使ってもいいかもです。
visual studio codeなら公式サイトのRPMでインストールできるし日本語化もできるからいいかも？
https://code.visualstudio.com/download## 手順
node.jsのパッケージをインストール
expressをインストール
maria dbをインストール
hallo world## node.jsのパッケージをインストール
ターミナルで以下の操作をする
> dnf module list nodejsこれでバージョン確認2024年現在では20と18が使えるようです。
> sudo dnf module -y install nodejs:20
ExpressにおけるRate Limitの実装ガイド
# Rate Limitの概要
Rate Limitは、APIへのリクエスト数を制御するためのシステムです。
これは、APIを過剰に使用したり、悪意のある攻撃を防ぐために使用されます。
Rate Limitによって、一定期間内に許可されるリクエストの数が限定されることで、サーバーの過負荷を防ぎ、サービス品質を維持することができます。## Rate Limitの利点
### サービスの過負荷防止
APIへの過剰なリクエストがサーバーのリソースを圧迫し、サービスが遅くなったり、最悪の場合はダウンしたりすることを防ぎます。
Rate Limitによって、予期せぬトラフィックの急増による障害からAPIを守ります。### 悪意のある利用の防止
DDoS攻撃など、悪意のあるユーザーによる過剰なリクエストを防ぎます。
これにより、APIが安全に運用されることを確保します。### 公平なリソースの利用
全てのユーザーに対して公平にAPIリソースへのアクセスを提供します。
一部のユーザーによる過剰なリクエストが他のユーザーの利用機会を奪うことを防ぎます。### コスト管理
クラウドサービ
Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その2)
この記事は、[Node.js (Typescript) で Bluesky に画像を自動投稿する Bot を作る (その1)](https://qiita.com/eXpresser/items/fce2066f442bd37c8a36) の続きになります。
前の記事では、Node.js から Bluesky へ API 経由で投稿する部分まで実装しました。
今回の記事では、 Azure Function のタイマートリガーを使用して定期的に画像を投稿する Bot にしていきたいと思います。Twitter での完成イメージ
## 完成像
 でホロジュール Web アプリを作り直した
## はじめに
Visual Studio 2022 17.8 以降より、ASP.NET Core をバックエンドとした React/TypeScript Webアプリケーションを開発する際のテンプレートが Vite ベースになりました。
Vite や 標準で組み込まれた Swagger UI および HTTP リクエストファイルなどを試してみたいので、以前開発したホロジュールの React/TypeScript Webアプリケーションに検索機能を追加しつつ、新しいテンプレートを利用してあらためてゼロから開発してみました。
日付の移動だけではなく、グループの選択やキーワード検索、表示日数の変更を可能としています。
## Vite とは
[Vite 次世代フロントエンドツール](https://ja.vitejs.dev/)
> Vi
WSLのUbuntuにプログラミング言語の管理ツールasdfを導入する
# はじめに
WSLのUbuntuにプログラミング言語をインストールする際、通常はaptなどの標準パッケージ管理ツールを利用すると思います。aptでインストールする場合、例えばプログラミング言語ごとにバージョンを切り替える手順が違ったりと面倒なのですが、asdfを使用すると、asdfが提供する統一されたコマンドインターフェースで言語のバージョンの切り替えが行えたりします。
本記事では、asdfのインストール手順、asdfによる言語のインストール手順、言語バージョンの切り替え方法をご紹介します。
asdfについては、以下のページをご参照ください。
https://asdf-vm.com/
本記事の前提環境としては、以下の記事をご参照ください。
「WSL+Ubuntu+Docker+VSCode+Githubの構築手順」
https://qiita.com/perilla/items/ef73cf57ade24bc94f19# asdfインストール
asdfの導入手順につきましては、以下のページを参照ください。
https://asdf-vm.com/guide/gett
【TypeScript】画面表示までの流れを図解で理解しながら環境構築する
# はじめに
最近、個人で作りたいアプリが見つかったので、そのアプリをTypeScriptで実装しようと考えています。まずはTypeScriptで実装するにあたって環境構築を実施したのですが、reactなどみたいに`npx create-react-app`を打つのみでなく、若干複雑だったので記事にまとめようと思いました。
下記で環境構築を動画で説明してくださっている方がいたので、それを元に構築したのですが、この記事では図解することで、視覚的にわかりやすく説明できればと思います。参考動画：https://www.youtube.com/watch?v=qSHlXcSces8
# 全体観
上記がTypeScriptを用いて画面表示するまでの流れとなっています。
詳しい仕組みの説明は下記記事を参考してみてください。仕組みの説明：ht
