deno deployのテンプレート機能を使っておみくじを公開する

10197 ワード
JavaScript denodeploy TypeScript deno JavaScript テキストリンク

deno deloyのテンプレート機能が面白かったので紹介したいと思います。

deno deployのテンプレート機能を使っておみくじを公開する

サンプルとしておみくじのテンプレートを用意したので、これを使ってテンプレート機能の使い方を解説していきます。

まず、下のリンクをクリックします。

サインアップを終えると、以下のような画面が表示されるので、順番に入力していきます。

おみくじ1～4におみくじの種類を入力して[Create]をクリックすると、おみくじを引けるwebサイトが公開されます。（文章欄は空でも可）

サンプル：https://omikuji-up.deno.dev/

deno deployのテンプレート機能を使うと、このようにコードを書くことなく一瞬でwebサイトが公開できました。

今回はおみくじのテンプレートを使いましたが、公式サイトや公式リポジトリにはHello Worldや外部APIを叩く例がテンプレートとして用意されています。

テンプレートの作成方法

webフレームワークなど、ライブラリの作者は自分のコードをテンプレートとして公開することが出来ます。

これもおみくじの例を使って解説していきます。

①環境変数を使ってコードを書く

ユーザーが設定できるようにする部分（この場合はおみくじの種類）を、Deno.env.get()を使い環境変数から読み込むようにします。

import { listenAndServe } from "https://deno.land/[email protected]/http/server.ts";
import { sample } from "https://deno.land/[email protected]/collections/sample.ts";

// おみくじの種類を環境変数から取得
const omikujis = [
  Deno.env.get("おみくじ1"),
  Deno.env.get("おみくじ2"),
  Deno.env.get("おみくじ3"),
  Deno.env.get("おみくじ4"),
].filter((v) => v).map(escapeHTML);

// サーバーを建てる
listenAndServe(":80", (request) => {
  if (new URL(request.url).pathname === "/") {
    // パスが"/"の場合はおみくじを引く
    return new Response(getOmikuji(), {
      status: 200,
      headers: { "content-type": "text/html; charset=utf-8" },
    });
  }
  return new Response('404 Not Found <a href="/">top</a>', {
    status: 404,
    headers: { "content-type": "text/html; charset=utf-8" },
  });
});

/** おみくじを引く関数 */
function getOmikuji() {
  const result = sample(omikujis) ?? "おみくじが空でした。"; //length===0
  return `<h1>${result}</h1>`;
}

/** HTMLをエスケープする関数 */
function escapeHTML(str?: string) {
  return str
    ?.replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

②web上にコードを公開する

テンプレートはURLで指定するため、コードはweb上に公開する必要があります。（といっても、githubに置くだけで大丈夫です。）

コードを公開したら、

https://dash.deno.com/new?url=＜コードが公開されているURL＞&env=＜環境変数＞

というURLからテンプレートが利用できるようになります。環境変数を複数指定する場合はカンマ区切りにします。

例えば、上で紹介したおみくじの例では、

https://dash.deno.com/new?url=https://raw.githubusercontent.com/ayame113/omikuji_deploy/main/serve.ts&env=おみくじ1,おみくじ2,おみくじ3,おみくじ4,文章

というURLになります。

※コードをgithubに置く場合は、rawボタンを押してhttps://raw.githubusercontent.com/以下のURLを取得する必要があります。

まとめ

  • テンプレート機能を使うと、webサイトが簡単に公開できる
  • まだベータ版なので使えるテンプレートは少ない
  • webサイトのひな型をテンプレートにしておくと便利かも

この機能（https://dash.deno.com/newのクエリパラメータにenvを付ける方法）は公式ドキュメントの例で使われているものの、正式名称が分からなかったので、記事中ではテンプレート機能と呼称しています。正式名称が分かる方は教えてください！