作品にする
総仕上げ:画像ギャラリーを公開する
部品を1つの作品にまとめます
部品はもう全部そろっています。倉庫があり、入れる窓口があり、出す窓口があり、並べる仕組みがあります。この章では、それを人に見せられる1つの作品にまとめて、公開します。
この章でできるようになること
- ここまでの部品をつなげて、画像ギャラリーとして完成させる
- 人に見せる前の最終チェックを、自分で通す
- 公開して、リンクを誰かに渡す
作るもの
特別なものは足しません。すでにあるものを、使いやすい形に並べ直すだけです。
- 画像を選んでアップロードできる(第10章)
- アップロードした画像が一覧に並ぶ(第12章)
- クリックすると大きく表示される(第11章・第13章)
- いらない画像を、確認してから消せる(第12章)
ここまで作ってきた機能を、1つの画像ギャラリーとして仕上げてください。 ・アップロード、一覧、拡大表示、削除が、1つのページから使える ・アップロード中は「送信中です」と分かる表示を出す ・失敗したときは、何が起きたかを日本語で表示する(英語のエラーをそのまま出さない) ・スマホで見たときに操作しやすいレイアウトにする ・見た目は落ち着いた雰囲気で、装飾を盛りすぎない 作り終わったら、動作確認の手順を日本語で教えてください。
ここで初めて「見た目」の指示を出しています。動くものができてから整える。この順番だと、途中で心が折れません。
人に見せる前の最終チェック
自分だけで使うものと、人に渡すものは違います。渡す前に、この6つを通してください。
人に公開する前の最終チェックをしてください。次の6点を、実際に動かして確認して、結果を日本語で報告してください。問題があれば直してください。 1. 画像以外のファイルを送ったときに、きちんと断るか 2. 大きすぎるファイルを送ったときに、きちんと断るか 3. 存在しない画像のURLを開いたときに、404が返るか 4. スマホの画面幅で、レイアウトが崩れていないか 5. アップロードした画像に、種類の情報が正しく付いているか 6. R2バケットが公開設定になっていないか(Worker経由だけで配れているか)
誰でもアップロードできる、ということの意味
URLを知っている人は、誰でも画像を送れる状態です。友人に見せるだけなら問題ありませんが、URLが広まると、知らない人が何を上げるか分かりません。長く公開するなら、アップロードだけは合言葉を入れないとできない形にするのがおすすめです。「アップロードに簡単な合言葉をかけてください」と頼めば実装できます。
公開する
完成したギャラリーをCloudflareに公開してください。公開後のURLを教えてください。 公開したあと、そのURLに実際にアクセスして、トップページと画像の表示が正しく動いているかを確認してから報告してください。
URLが出たら、スマホで開いてみてください。Wi-Fiを切って、モバイル回線で。そこで自分の作ったギャラリーが表示されたら、完成です。
ここまでで、何ができるようになったか
振り返ると、けっこうな距離を歩いています。
- 自分のページをインターネットに公開できる
- アクセスに応じて答えを作るプログラムを動かせる
- ファイルを保管する倉庫を作って、出し入れできる
- 画像を受け取り、保存し、一覧し、配信できる
- お金がどこでかかるかを、数字で把握している
そして、これをコマンドを1つも覚えずにやりました。AIに日本語で頼み、返ってきた日本語を読み、目で確認する。この進め方は、Cloudflare以外でもそのまま通用します。
次の一歩
もし続けたくなったら、この順番がおすすめです。
- 投稿にタイトルや説明を付けたい → D1(表)を足します。第8章の「倉庫と台帳」の話です
- 自分だけが管理できるようにしたい → ログインの仕組みを足します
- 毎朝自動で何かしたい → 決まった時刻に動くCron Triggersです
- AIを組み込みたい → Workers AIで、画像の説明文を自動生成するなどができます
どれも、これまでと同じ頼み方で進められます。「◯◯をしたいです。初心者にも分かるように、まず方針を提案してください」から始めてください。
そして、コードそのものをもっと知りたくなったら、付録Cで紹介している教材へ進んでください。この教科書は、その手前の段差を埋めるためのものでした。段差はもう越えています。
章末チェックリスト
完成です。おつかれさまでした。
おつかれさまでした
完成したものを、見せてもらえませんか。
ここまで通した人は、決して多くありません。公開できたURLがあれば、ぜひ送ってください。僕が見に行きます。
「ここが分かりにくかった」「この手順で止まった」という報告も歓迎です。次に読む人のために直します。
なお、セミナーや講座を開いている方には、過去の録画や資料を動画講座に変換する無料のオンライン説明会もやっています。ここで身につけた「AIに頼んで作る」やり方が、そのまま使えます。