公開する
手元で動くだけでは誰も見られない
ここまで作ってきた画面は、あなたの手元でしか動きません。家族や友人に見せるには、インターネット上のどこかに置いて、その場所を指す住所を渡す必要があります。この住所が URL です。URL とは、インターネット上の置き場所を表す文字列のことで、ブラウザの上のほうに出ている http から始まる文字がそれです。
手元にあるものを、その住所で誰でも見られる状態にすることを公開と呼びます。公開そのものは、今どきは無料の置き場がいくつもあり、ファイルを預けるだけで数分で終わります。この回で押さえてほしいのは、公開の手順よりも、公開する前に整えておくべき中身のほうです。
公開の前に整える3つ
ページの題名
ブラウザのタブに出る文字と、リンクを送ったときに相手の画面に出る文字は、ページの題名から来ています。題名は title という指定で書きます。ここが空だと、タブには住所がそのまま出て、何のページか分かりません。「おこづかい帳」のように、中身がひと目で分かる短い言葉を入れます。
ページの説明文
題名の下に出る短い紹介文は、description という指定から来ています。description とは、そのページが何であるかを1文で説明する文字のことです。検索結果や、メッセージアプリでリンクを送ったときのプレビューに使われます。「毎日のおこづかいの記録をつけられるアプリです」のように、誰の何に役立つかを書きます。
文字の種類の宣言
日本語のページでは、文字の種類を宣言しておかないと、環境によって文字化けすることがあります。charset という指定で utf-8 と書いておけば防げます。utf-8 とは、世界中の文字を扱える文字の表し方の名前です。
この3つは、AIに一言頼めば全部入ります。忘れやすいので、公開の直前に必ず確認する項目として覚えておいてください。
頼み方の型
プレーンテキスト
悪い例
公開できるようにしてください。プレーンテキスト
良い例
公開する前の準備をしてください。index.html に次の3つを入れてください。
1. title を「おこづかい帳」にする
2. description を「毎日のおこづかいの記録をつけられるアプリです」にする
3. charset を utf-8 にする公開できるようにという言葉は、AIから見ると意味の幅が広すぎます。置き場所の選び方の話なのか、中身の整備の話なのか判断できません。何を入れてほしいかまで書きます。
公開したあとにやること
URL が手に入ったら、まず自分のスマホで開いてください。手元では動いたのに公開先では真っ白、ということはよくあります。画像が出ない、ボタンが反応しない、といった症状が出たら、その症状をそのまま言葉にしてAIに伝えます。
自分の目で確かめたあとに、はじめて人に送ります。感想をもらうときは「どうですか」と聞くより「最初の画面で何のアプリだと思いましたか」と聞くほうが、返ってくる言葉が具体的になります。
この回の演習
おこづかい帳を公開できる形に整えます。公開の作業そのものはこの画面の外で行うので、採点では公開に必要な中身が入ったかどうかを見ます。題名と説明文と文字の種類の3つを、AIへの指示だけで入れてください。
完成条件
- 公開の作業そのものはこの画面の外で行います。ここでは公開に必要な中身が入ったかを見ます
- 題名と説明文と文字の種類の3つを、名指しで頼んでください