注意
各サービス
- RDBMS
  - Neon
  - Vercel Postgres
  - Cloudflare D1
  - Supabase
- NoSQL
  - Firestore(Firebase) / Cloud Datastore
  - MongoDB Atlas
- DWH(Data ware house)
  - BigQuery
- 比較的安価なサービス
  - さくらのレンタルサーバー
  - Heroku
  - PlanetScale
  - Render
- 期間限定無料枠のあるプラットフォーム
  - AWS
  - GCP
- 僕はこう思ったっス

Herokuに引き続き、PlanetScaleの半永久無料枠が終了してしまいました。

個人開発でサービスを公開したいけど維持費を無料にしたいとか、法人でもサービス開発初期の費用を抑えたいときはどうしましょう、という話。

注意

紹介しているサービスの内容は変更されている可能性があります。また、筆者の調査が不十分なこともあります。

この記事によって損害を被っても補償しかねます。必ず自身の目でサービスの契約内容をお読みになって下さい。

あとデータ容量/通信量等の単位はGBとGiBとか厳密に区別せずに全部GBの表記にしています（1つのサービス内でもドキュメントによって混在したりしていて1つ1つ確認が大変だったため）。

2024-04-20

Astroでローカル開発中に別のマシンから動作確認する

WEB

Astroでローカル開発中に別のマシンから動作確認する

Astroで静的サイトの開発中にローカルで動かしている時、別のマシンから動作確認したいときがあります。

スマホ実機での表示、動作の確認をしたいときとかね。

そんなときにデフォルトの状態ではローカルipアドレスでアクセスできません。

http://192.168.0.19:4321/sub_dir みたいな感じ。

そんなときはhostオプションを指定します。

astro dev --host 0.0.0.0

こうすると以下のように標準出力に他のローカルネットワーク上のマシンからアクセスするためのアドレスが出力されます。

（※環境によって出力されるIPアドレスは異なります。念の為。）

┃ Local    http://localhost:4321/sub_dir
┃ Network  http://192.168.0.10:4321/sub_dir

注意

公衆無線LANなどにつないでいる際は有効にしないようにしましょう。

悪戯攻撃される恐れがあります。

デフォルトで有効になっていないのはこういうケースがあるからだと思います。

ランキング参加中

プログラミング

2024-04-18

ボタンが押されたら現在のURLをQRコードにして出力する

javascript

この前任意の文字列をQRコードで出力するのをGithub Pagesのお試し用に作ったんですが

百徳ツール | QRコード生成

現在のURLをQR出力するだけのスニペットもほしいかもと思い書いてみました。

というかボタン押してモーダルを出すところまではChatGPTに書かせました。

QR出すところだけ人力(つっても3行くらい)。

ライブラリはqrcodejsを使わせてもらってます。

https://github.com/davidshimjs/qrcodejs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Example</title>
<style>
  /* スタイルを追加して、モーダルが中央に表示されるようにする */
  dialog {
    width: 80%;
    max-width: 600px;
    padding: 20px;
    border: 1px solid #888;
    background-color: #fefefe;
  }

  /* ボタンを画面の右下に配置するスタイル */
  #myBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
</head>
<body>

<!-- モーダルを開くボタン -->
<button id="myBtn">Open Modal</button>

<!-- モーダル本体 -->
<dialog id="myModal">
  <button id="closeBtn">&times;</button>
  <div id="qr"></div>
</dialog>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
// ボタンを取得
var btn = document.getElementById("myBtn");

// モーダルを取得
var modal = document.getElementById("myModal");

// 閉じるボタンを取得
var closeBtn = document.getElementById("closeBtn");

// ボタンをクリックした時にモーダルを表示する
btn.onclick = function() {
  modal.showModal();
}

// 閉じるボタンをクリックした時にモーダルを非表示にする
closeBtn.onclick = function() {
  modal.close();
}

new QRCode(document.getElementById("qr"), window.location.href);
</script>
</body>
</html>

既存のHTMLにモーダル出すscriptタグ埋め込むならこんな感じ。

コードは適当です。QRコードクリックで閉じるようになっています。

style当てるなり閉じるボタン作るなりはお好みでどうぞ。

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
var modal = document.createElement('dialog');
var qr_area = document.createElement('div');
qr_area.id="qr";
modal.appendChild(qr_area)
document.body.appendChild(modal);
new QRCode(document.getElementById("qr"),window.location.href);
qr_area.onclick = function(){modal.close()}
var btn = document.createElement('button');
btn.textContent = 'QRコード表示';
btn.style.position = 'fixed';
btn.style.bottom = '20px';
btn.style.fontSize = '16px';
btn.onclick = function(){modal.showModal()}
document.body.appendChild(btn);
</script>