05 サーバの立ち上げ

htmlフィルを実行してwebブラウザで見るためにはhtmlを配信するサーバが必要です。その仕組みを簡単に紹介します。

オンプレミスとクラウドサーバ

最近ではクラウド上のサーバを利用するのが一般的になりました。クラウドサーバはとても使い勝手がよく、比較的定額で利用できるのが利点です。例えばAWSなどは無料でサーバを利用することができる範囲があります。もちろん大きなデータを利用するなどの場合は課金されます。AWSの利用は最初にクレジットカードを登録します。このため、無料の範囲を超えると自動的に有料になり、カードから料金が引き落とされます。
一方、作成した小さなコードを試してみたい程度のことであれば手持ちのPC上で確認できると便利です。そのためPC上に簡易サーバを立ち上げる方法もあります。もちろんこのサーバは公開することはできないものです。自分で本格的なサーバを立ち上げて公開することもできますが、幅広い知識が必要になります。無策だと公開したPCを踏み台として利用されることもあります。自作サーバの公開にはそれなりの知識を蓄えてから行うことをお勧めします。

自分のPC上でコードを確認する

お手軽に確認する方法が次のQuitaの記事にありましたのでこれについて簡単にまとめます。詳細はQuitaの記事を見てください。

・Visual Studio Code 拡張機能編 (2018.07.03追加)

・Mac コマンドライン編

visual studio codeのGo live機能によるserver実現

Microsoft社が配信しているVisual studio codeにGo Liveというプラグインをインストールして利用します。
① お使いのOSに合ったVisual Studio Codeをダウンロード(図1)して、インストールし、起動します。
② 下図2a)に示すようにwebでVisual Studio CodeのLive serverを検索してinstallボタンをクリックします。
③ Visual Studio codeにインストールボタンが表示されるのでクリックします。
④ インストールが終わると図2c)のように表示されます。
⑤ 図3のように実行したいコードをクリックし、右下のGo Liveをクリックします。このコードは表示部分した記載していないのでいくつかエラーが表示されますが実行は可能です。

⑥ コードが実行されると図4のようにwebブラウザが起動してコードが実行して表示されます。また、URLのところを見てください。サーバアドレス(IP)は127.0.0.1で、ポート5500を利用してコードをサービスしているのがわかります。

Visual Studio Codeで起動するブラウザやフォルダの指定は以下の図のように行います。参考にしてください。(apatch configに相当します)

Macの場合

古いMacOS(OS 9まで)で動くMac Portというサーバーアプリケーションがありました。OSXになってからはUNIXがOSの下で動いています。 UNIXはLinuxの親戚みたいなものです。多くのweb server はLinuxで動いています。web serverのプログラムはAppachというものです。実は現在のMacOSにはAppachがインストール済みです。 Terminalアプリケーションを開いて、TerminalからAppachを動かすことができます。詳しくはWeb Arch Laboを参考にしてください。

Mac Terminalを起動して以下のように入力するとApache httpd がインストールされていることがわかります。
$which httpd
出力：/usr/sbin/httpd と出力されればAppachがインストール済みです。
次にhttpdを起動します。以下のようにターミナルに入力してください。

$sudo apachectl start (sudo /usr/sbin/apachectl star†)

apatchの環境設定はhttpd.conf ですが、これは/private/etc/apache2/ にあります。
これをエディタで開いてみると以下の記述があります。これがルートになります。先ほどのVisual Studio Code Live serverのhtmlコンテンツホルダですね。ここに一連のhtmlコードを格納すれば実行できるはずです。
ServerRoot "/usr"

実際に利用するには他に幾つかの設定が必要です。試してみたい方はQuitaのMacで開発環境を設定する方法を参考にしてください。
止める場合は以下のコマンドを実行します。

$sudo apachctl stop (sudo /usr/sbin/apachectl stop)

MacのコードエディタXcode

MacOS のコードエディタは XcodeというアプリケーションがAppleから配信されています。MacOSのアプリケーションとしてApple storeでDeveopper用に無料配布されています。誰でも利用することができます。このXcodeはSwiftをサポートしていて、実行ファイルを作ることができます。この機能によって、iOSやiPadOS、Watch OS、 MacOS上で動くソフトウエアを作成することができます。Macをお持ちの方は一度ご覧ください。

HTMLのコードのバグとり

HTMLコードは大きくなるとその間違いを見つけることが難しくなります。また、コマンドの使い方がわからない場合もあります。こうしたときに威力を発揮するのが最近のAI GPTです。GPTはGenerative Pre-trained Transformerです。言語の理解と翻訳のために生まれました。とても賢く正しい文法で理路整然で分かりやすい文章を作成してくれます。文法のお手本のような存在です。何をpre-trainedしたかというと多くはwebにあるコンテンツです。その中にはhtmlコードも含まれます。したがってコードの間違いを訂正するにはもってこいのツールです。是非利用してみてください。
ただし、不足している情報はもっともらしく作成してそれが幻覚、ハルシネーションであることもあります。喋ること全てを鵜呑みにしないでください。
現在利用できるものとしてはOpenAI社のChatGPTとGoogle Geminiなどがあります。
サイインすると書き込み枠が表示されます。2024.5.21時点ではchatGPTは3.5と4oが無料で利用できまうす。無料版4oは1時間に10問までの質問ができるようです。geminiはgoogle acountでログインできます。

例えばa.jpgという画像を表示するコードを書いてくださいとお願いすると以下のようなコードが出力されます。ぜひこれも試してみてください。
6月の wwdcではappleからAIの活用について発表があるだろうと噂されています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像表示</title>
</head>
<body>
<img src="a.jpg" alt="画像A">
</body>
</html>

Page updated

Google Sites

Report abuse