- 1. Next.jsでホワイトリスト形式のIP制限をかける
- 2. リセットボタンでJSが走る処理を書いたらうまくいかなかった
- 3. SvelteKitでView Transitions APIを使う方法
- 4. MIDI.js Soundfontsを使ってみた
- 5. Railsバージョンを5.2.8→7.0.6へ上げたときにスクリプト系が動かなくなった件
- 6. コピーライトのyearをJavaScriptを使用して自動で更新する方法
- 7. プロトタイプオブジェクト
- 8. HTML+CSSでPhotoshop風選択範囲のアニメーションを再現しようとしたら凄く面倒くさかった
- 9. JavaScriptでスクロールアクションを実装する
- 10. Stripeのカスタマーポータルを利用した、請求マイページやプラン変更・解約画面のローコード開発入門
- 11. Node.js APMエージェントをどうしても試してみたいので、Node-Redにエージェント導入を試みる
- 12. plunkerでvue その64
- 13. [Ruby JavaScript] ハッシュ、オブジェクト比較
- 14. ES2015を学ぶ
- 15. 3次元物体の回転~javascript~
- 16. Ubuntu Wallpapersのすべて
- 17. はじめてのブロックチェーン実践講座その２
- 18. plunkerでvue その63
- 19. create-react-app で作った Reactプロジェクト から Hello World (不要ファイル削除)
- 20. 2023年におけるアプリケーション開発向けの5つの主要なノードJS統合開発環境（IDE）
Next.jsでホワイトリスト形式のIP制限をかける
## 概要
Next.js（v13.4.12）の環境でMiddlewareを利用してIP制限をかける方法を共有します。## サンプルコード
“`TypeScript:/src/middleware.ts
import { NextRequest, NextResponse } from ‘next/server’// IPホワイトリスト
const IP_WHITELIST = [‘xxx.xxx.xxx.xxx’, ‘yyy.yyy.yyy.yyy’]; // IPアドレスをマスクしています。export async function middleware(request: NextRequest) {
const res = NextResponse.next();// IPアドレスを取得
let ip: string = request.ip ?? request.headers.get(‘x-real-ip’) ?? ”;// プロキシ経由の場合、x-forwarded-forヘッダーからIPアドレスを取得
if(!ip && for
リセットボタンでJSが走る処理を書いたらうまくいかなかった
## たとえばこんなコード
“`HTML
“`
“`js
“`
リセットボタンがクリックされた時、「sampleselected」のチェック状態の値でテキストボックスの活性状態を制御しています
値
SvelteKitでView Transitions APIを使う方法
# はじめに
SvelteKit [v1.24.0](https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%401.24.0)がリリースされ、[onNavigate](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate)というライフサイクル関数が追加されました。
[onNavigate](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate)を使用することでURLに移動する直前に指定したコールバックを実行することができます。
[onNavigate](https://kit.svelte.dev/docs/modules#$app-navigation-onnavigate)を使うことでSvelteKitで[View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transit
MIDI.js Soundfontsを使ってみた
https://github.com/gleitz/midi-js-soundfonts
# mp3を鳴らす
“`play1.html