00:00
アシカガCAST。 こんにちは、アシカガコウジです。
AIを使ってウェブサイト、ウェブアプリを作る人が増えています。 特に、Claudeコードはプロの開発者が
仕事で使えるレベルのものを作れるということで、非常に話題になっています。 Googleのアンチグラビティというツールも話題になりました。
そういったツールを使って、ランディングページであったり、簡単なウェブサイト、何かしらのツールとして動くウェブアプリを作ってみたと。
作ることにチャレンジした。これからしてみたいという人も多いと思います。 そして、AIで簡単に作れるようになって、
作ったはいいけども、これを最後どうやってネットに公開するの? その辺がよくわからない。ピンとこないという人もいると思います。
まず自分のパソコン上で動いているけど、 これを友達に見せたい。SNSで自慢したいと。
じゃあどうしたらいいの?と。 まあそれもAIに聞けば教えてくれるんですが、ちょっとハードルが高いという人もいると思います。
またiPhoneやiPadは ローカル上にあるファイルを
ウェブページとして開けないんですね。 ファイルアプリでアクセスできるファイルを
SafariとかChromeで開いてウェブページ、ウェブアプリを表示することができません。 なので何かしらのツールを使ってブラウザ上で動かしたいんだけど
ネットに公開する必要はないんだけど、iPhone、iPadで動かしたいとなると、 やっぱりネット上で公開するというのが簡単な解決法になります。
ということで今回はAIでサイトを作った初心者の人が最初に当たるであろう壁、 ネットへの公開について話をしたいと思います。
ネットに公開する方法を選ぶ上で作ったサイト、ページがファイルをサーバーに乗っけるだけで動くタイプのものなのか
サーバー側に動かす仕組み的なものが必要なのかについて変わってくるので、 まずはその辺の話からです。
ウェブページというのは基本的にはサーバー上に配置してある、置いてあるファイルをブラウザーが読み込んでそのまま表示します。
ネット上にカタログとかチラシが置いてあってそれを読み込ませて表示する。 誰がいつ見ても同じものが表示される
03:07
タイプのものがまず基本です。 じゃあ例えばアマゾンのサイトはどうなのかというと
すべての商品ごとにページがあらかじめ作られているわけではないんですね データベース上に商品の情報は入っていて
ページを見る人のリクエストに合わせて サーバー上でその都度ページを作ってからブラウザーに送ってるんですね
その都度作ってるということで動的 動くに目的の的ですけども動的サイト動的ページみたいに呼びます
英語だとダイナミックです そして一方のそうじゃない
さっき言ったあらかじめ用意されたページをただ表示するという方は静的静かな静止画のせいですね
それに目的の的で静的 サイト静的ページと
言いますこれが音だけだとちょっと紛らわしいというか ポッドキャストの機械での文字起こしでも静的のせいが違うせいになっちゃってる
場合があるんでなんか別の言葉で言い換えたいんですが 英語で言うとスタティックです
静的がスタティックで動的がダイナミックと 今はブラウザー上で動くツールというのがいっぱいあって
キャンバーとかフィグマとかノーションとか 全部 web ブラウザー上で動きますが
あれもまあ言ってみればダイナミック動的なんですけども ああいうツール類は動的サイトみたいな言い方はあまりしなくて
web アプリとかオンラインツールと呼びます そしてここでちょっと難しいのが
スタティックなページ静的なページでもユーザーのアクションに合わせて動きをつけ たり
なんだったらデータベースと連携して表示内容を変えたりとかもできるんですね なのでスタティックなページでも web アプリを作ることはできます
その場合 javascript というプログラミング言語を使います 静的サイト
スタティックなサイトの場合 html というのがページのベースになっていて
css というのは見た目のコントロールをするもので javascript は仕掛けを作るもの
この3つで基本慣れ立てます あとは画像とかですね
でここでさらにややこしいのが html と css と javascript は別々なファイルとして作るのが
06:07
web デザインをしている人にとっては一般的ですが html ファイルの中に css も javascript も書くことができるんですね
なので ai に頼んで web サイトや web アプリを作ってもらうときに1個のファイルに html ファイル1個にまとめてもらうことも
大体の場合ではできます なのでファイルとして1個しかなくても css を使ってないとか
javascript を使ってないというわけではなかったりします javascript を使えば簡単なゲームとかも作れます
診断プログラムみたいなものもお手のものだと思います ちなみに私が今まで ai を使って
html と css と javascript だけで作った静的な スタティックなものとして作ったことがあるものをいくつか紹介するのでなんとなくの
イメージをつかんでもらえばと思います まず上から落ちてくるものをただひたすら避けるという
障害物を避けるゲームを作ったことがあります あと最近じゃんけんゲームというのを作りました
あとちょっとテスト的に作ってみたのが podcast の名前で podcast を検索して見つかったpodcast の
rss のリンクを取得するというツールを使っ 作ってみたこともあります
あと結構前に url を入力すると qr コードを生成するというツールも作りました
あとプロフィールシートみたいなのを作るツールを作ったことがあります テンプレートを選んで写真をアップロードして
テキストを入力していったらそのテンプレート上にレイアウトされて出来上がった画像をダウンロードするというツールです
例えばこれを保存しておいてログインしてまた続きを編集できるみたいにしたくなってくると データベースが必要になって動的なダイナミックなサイトにしないといけなくなりますが
そこまで必要なければ十分 javascript だけで大丈夫なんですね 他にもアナログ時計を作ってみたり
現在の時刻とイベントが終了するまであと何時間何分かと天気予報等を一つの画面に表示する ものを作ったこともあります
AI に作ってもらったウェブサイトウェブアプリがどっちなのかの見分け方はそんなに難しくないです
09:03
AI が作ってくれたサイトの html のファイルをダブルクリックしたりブラウザーにドラッグ&ドロップしたりして開いて
それでちゃんと動いていれば静的なスタティックなサイトです パソコン上で動いていても
AI にいろいろ指示をしてもらって いわゆる黒い画面ターミナルで
npm run dev みたいなコマンドを打ってそれから動かすみたいなものは動的なサイトです
あれは自分のパソコン上でサーバーを動かしてそこでウェブアプリを動かしてるんですね
その場合はネットで公開するときにもサーバー側で同じようなエンジン的なものが動いてないといけないんですね
ランディングページとかウェブサイトを AI に作ってもらった場合にはだいたい静的サイトになってるはずです
診断プログラムとか簡単なゲームとか計算ツールとかもデータベースに保存する仕組みが必要なければ
html と css と javascript だけで十分作れるので静的なサイトになっていることが多いと思います
ログインしたら自分専用のマイページが表示されるとか
掲示板に書き込んだ内容がデータベースに保存されてみんなが見られる
そういうものは動的なサイトでしか作れないですね
そしてやっとでネット上に公開する話です
今時のウェブ開発ではサーバーレスとか言って昔ながらのレンタルサーバーを使うのではなくて
バーサルとかクラウドフレアページとかのホスティングプラットフォームを使うのが主流になっています
詳しく説明しようとすると難しいですし私もちゃんと理解してないんですが
レンタルサーバーとはちょっと違う新しいものがあると思ってください
AAを使って開発した場合には大体公開するときにバーサルというサービスを進めてくると思います
ただバーサルを使うにはGitHubというところにファイルをアップロードして
GitHubとバーサルを連携してと手順が多いんですね
初心者の人は大体使ったことないと思うのでユーザー登録して設定してみたいな作業も必要になりますし
多くの作業をターミナルで黒い画面でやらないといけないので
12:04
初心者の人にはハードルが高いと思います
確かに今時の開発ではGitHubを使ってバージョン管理してそこから本番環境にデプロイする
デプロイという言葉がよく出てくるんですが公開するといった感じの意味です
厳密にはデプロイという言葉をわざわざ使っている意味はあるんですがその方法はちょっと難しいよねと
先ほどから説明しているスタティックな静的なページの場合だと必ずしもバーサルを使う必要はありません
ただサーバーにアップすればいいので昔ながらのレンタルサーバーにファイルをアップロードするという方法が使えます
既に使っているレンタルサーバーがあってそこにアップするんだったらいいんですが
いきなり初心者の人が試しにAIで作ってみたウェブサイトやウェブアプリをアップするためにレンタルサーバーを借りるのもそれなりにハードルが高いですよね
基本的にはお金がかかります無料のレンタルサーバーもないことはないんですが必ず何かしら制限があって
だいたいページに広告が一緒に表示されるんですね
なのでそうじゃないバーサルでもないレンタルサーバーでもないという選択肢として私がお勧めするのが
ネットリファイかクラウドフレアーページズというサービスです
これらを使えばウェブブラウザ上にファイルをドラッグ&ドロップするだけで公開することができます
静的ページの場合はですね
これらのサービスもユーザー登録はちょっと必要なんですが
ネットリファイのネットリファイドロップという機能を使うと
なんとユーザー登録すら不要でネットリファイドロップのページを開いてファイルをドラッグ&ドロップするとすぐ公開されますネット上に
たださすがにユーザー登録もなく無料で使えるので制限はあって1時間の期間限定で公開されます
なおかつパスワード付きで公開されます
パスワードはもちろん教えてもらえるんですがページにアクセスしてパスワードを入力したら開くページということになります
悪用されないための制限ということなんでしょうね
その後ユーザー登録すればその2つの制限はなくなって使い続けることができます
ネットリファイもクラウドフェアページズも無料で使うことができます
15:01
ネットリファイは基本的にはファイルの転送量どれだけデータをやり取りしたかによって金額がかかっていく
いわゆる重量性の金額システムなんですがここまでは無料で使えますよという枠が十分にあるので
普通に個人の人が作ったサイトやアプリを公開して友達に見てもらったりSNSで見てもらったりする分には十分かなと思います
大バズりしてすごい数のアクセスが来たみたいになってくると厳しいかもしれませんが
その場合もページが表示されなくなるだけで勝手に課金されるみたいなことはありません
一方でクラウドフレアページズの方は転送量の制限がなくて無料でいくらでも使えるという太っ腹なことになっています
じゃあこの2つのツールどっちか使ってみたいという人のための解説の記事を私書いています
ノードにタイトルがレンタルサーバーもバーサルも使わないAIで作ったサイトをドラッグ&ドロップで公開できる無料サービスという記事を公開していますので
ぜひそちらをご覧くださいスクリーンショットもふんだんに載せて使い方を順を追って説明しています
画面で見て目で見てわかりやすい説明の方はノートの記事にして
静的サイトと動的サイトの違いみたいな整った文章だけでの説明よりも
もうちょっと余計な情報も含めて言葉で説明した方がわかりやすいんじゃないかなというものは
ポッドキャストで説明するという試みでした
いい感じにポッドキャストとノートの記事等が補完関係になっていればいいなと思います
ご意見ご感想などあればハッシュタグアシカガCASTをつけてXに投稿していただくか
お便りのフォームとメールアドレスもありますのでそこからメッセージを送っていただけたら嬉しいです
それではまた次回お会いしましょうアシカガコウジでした
キャストアシカガ
