JSONファイルをURLで公開
サンプルデータもモックのレスポンスも、デモページと同じドメインに
バックエンドがまだないときのデータ置き場
フロントエンドの試作では、APIの完成を待たずにJSONを読み込んで画面を組むことがあります。Tiiny Hostには、JSONファイルを単体でも、HTMLのデモと一緒にZIPでもアップロードできます。同じZIPに入れたdata.jsonは、JavaScriptから相対パスで読み込めます。
データを置く側の機能
📁 デモと同じドメインに
同じZIPに入れたindex.htmlとdata.jsonは、fetch('./data.json')でつながります。
✏️ ブラウザで値を修正
デモのZIPに入れたJSONは、Soloプランのコードエディタで値を書き換えられます。
🔁 パスは変えずに更新
中身を変えたZIPで更新しても、/data.jsonのパスとドメインは同じです。
🤖 APIで差し替え
スクリプトからAPIキー付きでアップロードし、同じドメインへのPUTで中身を入れ替えます。APIはSoloプランからです。
🕓 直近5つの版
Tinyプラン以上は、更新前の版に戻せます。
🔒 社内向けのデモに
社外に見せたくないデモのページは、Soloプランでパスワードをかけられます。
json-serverやMSWを使う場合
テスト用のデータなら無料プランで
3MBまでのJSONやデモのZIPは、無料プランで公開できます。APIによる自動更新とコードエディタは、Soloプランからです。
- ✓ 公開できるサイトは1つ
- ✓ HTML・ZIPは3MBまで
- ✓ 月5,000回の訪問と5GBの転送量
- ✓ SSL付きの無料アドレス（名前.tiiny.site）
- – 小さなTiiny Hostバナーが表示されます
- Tiny $5 · バナーなし、アップロード回数無制限、25MBまでアップロード、アクセス解析、QRコード、フィードバックモード
- Solo $13 · 5サイト、独自ドメイン、パスワード保護、コード・ビジュアルエディタ、API
- Pro $31 · 15サイト、メールアドレス収集、チームメンバー、優先サポート
- Pro Max $74 · サイト数無制限、ストレージ2TB
プラン別の容量
アップロードできる容量の上限インデントや改行を除いたJSONは、整形したものより小さくなります。大きなデータは、ファイルを分けて置く方法もあります。
ビルドのたびにデータを差し替え
CIのジョブやcronのスクリプトから、APIキー付きでZIPを送信します。中身を入れ替えるときは、同じドメイン宛てにPUTリクエストを送ります。
curl -X POST https://ext.tiiny.host/v1/upload \
-H "x-api-key: $TIINY_API_KEY" \
-F "files=@demo.zip" \
-F "domain=mock-api-demo.tiiny.site"
# → https://mock-api-demo.tiiny.site
# 差し替えは同じドメインにPUTJSONの置き場が必要な場面
APIのモック
バックエンドの完成前に、レスポンスの形をJSONで決めて画面を作る。
設定ファイル
デモアプリの文言や色を、ビルドし直さずにJSONで切り替える。
オープンデータの可視化
自治体のオープンデータを加工したJSONを、地図やグラフのデモで読み込む。
Link JavaScript to HTML: Create and Share Dynamic Webpages
HTMLにJavaScriptを読み込む2つの方法と、動きのあるページを公開するまでの流れ。
The Complete Static Website Guide | What are they, How to Create One and Publish them
静的サイトのしくみと動的サイトとの違い、作成から公開までを1本にまとめたガイドです。
