初日 ~サーバーの環境を用意する~

イメージ画像

今日から実際にAPIアプリケーションを開発していきましょう。

まずは生成AI(ChatGPT)を利用するためのアカウントを開設します。
(すでにアカウントを持っている方は読み飛ばしてください)

ChatGPTの公式サイトには、Log in(ログイン)とsign up(サインアップ)の2つのボタンがあります。
新規登録の場合は’sign up’をクリックして、メールアドレスとパスワードを登録してください。

なお、GoogleアカウントやMicrosoftのアカウントがある場合、どちらかで登録すると今後のログインがより簡単になります。

メールアドレスを登録すると、すぐに確認用メールが届きます。

確認用のボタンを押すと、ユーザー名と生年月日の入力画面に遷移します。

それぞれ入力して「同意する」ボタンを押すと、アカウント開設が完了します。

英語表示は、右クリックから「日本語に翻訳」できます。

ChatGPTの月額有料サービス(月3,000円強)は必須ではありませんが、できれば契約されることを推奨します。
(ChatGPT3.5は、機能が格段に劣るため非推奨)

生成AIの無料利用にこだわる場合

無料の生成AIを利用し続けるなら、Claude AI(https://claude.ai/chats)のアカウントも開設しておきましょう(開設手続きの手順はChatGPTとほぼ同様です)

アカウントを開設したら、ウェブブラウザ(Chrome)でChromeウェブストア(https://chromewebstore.google.com/)を開いて、そこで’ChatHub’を検索します。

「ChatGPT、Gemini、Claude、およびLlamaを一つのプラットフォームで使用します」という拡張機能が表示されますので、”Chromeに追加”ボタンをクリックしてインストールしてください。

するとブラウザ(Chrome)のツールバーにChatHubのアイコンが表示されます。
(表示されない場合はchrome拡張機能からアイコンを探してください)

アイコンをクリックするとchrome-extension://iaakpnchhognanibcahlpcplchdfmgma/app.html#/settingの設定画面が表示されます。

中段あたりに「自分のアカウントを使用する」というタブがありますので、そこでClaude3とGeminiの2つを選んで使用すると良いでしょう(すでにGoogleのアカウントがあることを前提としています)

ChatHubでは無料で2種類の生成AIを同時利用できます。

2つの回答を比べることで、より理解も深まることでしょう。

アプリケーションの開発環境を用意する

次は「APIを開発するための環境(=アプリケーション開発用サーバー)」をパソコンの中に構築します。

そのためには、XAMPP(ザンプ)という開発者向けの無料ツールがあります。それをあなたのパソコンにインストールしてください。

XAMPP(ザンプ)には、パソコンをウェブサーバーとして機能させる’サーバーソフトウェア’や、APIの構築や運用に用いるデータベース、そしてデータベース操作ツールなどが含まれています。

サーバーソフトウェア:
Apache(アパッチ)

データベース:
MySQL/MariaDB(マイエスキューエル/マリアデータベース)

データベース操作ツール:
phpmyadmin(ピーエイチピーマイアドミン)

XAMPPをインストールする

XAMPP公式ダウンロードサイトを開いてください。
(「XAMPPダウンロード」で検索してもらっても結構です)

下記の画像が公式ダウンロードページです。

公式サイトには3種類のOS(Windows、Linux、OS X)向けインストーラーが用意されています。

あなたのパソコンのOSにあわせて、XAMPPのインストーラーをダウンロードします。
(それぞれ3つのバージョンがあります。最新バージョンを選んで問題ありません。)

ダウンロードボタンを押すと、下記2つのページが表示されますが、気にせずにそのまま少し待ちましょう。

しばらくするとダウンロードが完了します。
Windows11の場合、「ユーザー」フォルダ内の「ダウンロード」フォルダ内に、ダウンロードしたインストーラーが見つかるはずです。
(またはPC → ドキュメント → Downloadsフォルダ内にあります)

これをクリックして、あなたのパソコンにXAMPPをインストールします。

インストールの最中は、英語で色々と聞かれますが、どれも「OK」や「Next」を選んで前に進めてください。
(言語選択に「日本語」はないため「English」でOKです)

XAMPPのインストールが完了したら、次は’管理者権限’を設定します。

XAMPPコントロールパネルを開いて、右側にある’Explorer’をクリックしてください。(注)Windows利用の場合

ファイルが開きますので、下段に移動して’xampp-control’を見つけ、そこで右クリックしてください。

’プロパティ’をクリックします。

上部にある「互換性」タブをクリックして「管理者としてこのプログラムを実行する」にチェックを入れ、OKボタンを押してください。

これでXAMPPのインストールと設定が完了しました。

データベースを確認する

XAMPPのコントロールパネルには、Apache、MySQL、FileZilla、Mercury、Tomcatという5つの項目があります。

このうちApache(アパッチ)とMySQLそれぞれの右側にある「Start」ボタンをクリックしてください。

これでローカル環境上(=あなたのパソコン上)に、ウェブサーバーソフトウェア(Apache)とデータベース(MySQL/MariaDB)が起動します。

次は、あなたが使用しているブラウザ(Google Chrome、safari、Edgeなど)で、以下のURLを開いてください。
http://localhost/phpmyadmin/

すると、下記画像と同じ画面が表示されます。

左側にはinformation_schema、mysql、performance_shema、phpmyadmin、testの5つのフォルダがあります。
test以外のフォルダは削除したり、フォルダ名や中のファイルを変更しないように気をつけてください。

それぞれのフォルダの解説はここでは省きますが、もし気になるようなら、下記をコピーしてAIに聞いてみると良いでしょう。

http://localhost/phpmyadmin/を開くと、左側にinformation_schema、mysql、performance_shema、phpmyadmin、testの5つのフォルダがありますが、このフォルダは何ですか?

http://localhost/phpmyadmin/について

http://localhost/phpmyadmin/の「localhost(ローカルホスト)」とは、ここでは「あなたのパソコン」を指します。

‘ローカル環境’や‘ローカル開発’という言葉が出てきた場合、それはあなたのパソコン上のことだと考えて問題ありません。

そして「phpmyadmin(ピーエイチピーマイアドミン)」は、ブラウザ上でデータベース(MySQL/MariaDB)を操作するためのツールです。

つまり、あなたのパソコン(localhost)にあるphpmyadminを、ブラウザで開くためのURLが「http://localhost/phpmyadmin/」になるわけです。

phpmyadminを使うとデータベースを視覚的に確認できる

phpMyAdminを使えば、データベースに新しい情報を追加したり、削除したりといった操作をブラウザ上で視覚的に行うことができます。

なお、データベースの操作はphpMyAdminを使わなくても、パソコン上でコマンドを入力することでも出来ますが、慣れないうちはphpMyAdminを利用する方が簡単です。

このphpMyAdminを使ったデータベースの操作方法は、6日目の教材で詳しく解説します。

とりあえず初日は、APIアプリケーション開発のために必要なサーバー環境をあなたのパソコン上に立ち上げた、というところで一旦終了にしましょう。

次回はこちら

「XAMPP」利用時の注意点

MySQL(データベース)をStartしたままの状態でXAMPPを閉じたり、パソコンの電源を切ったりすると、次回にXAMPPのMySQLをStartしても、起動せずにエラーになってしまう場合があります。

XAMPPを閉じる時やPCの電源を切るときには、必ずMySQLやApacheのStopボタンを押してから、右側中段にあるQuitボタンでXAMPPを閉じるようにしてください。

もし今後、XAMPPのMySQLをStartしたままPCの電源を切ってしまい、MySQLをStartできなくなった時には、下記URLの記事を参考に修正できます。

https://tak-tech.net/blog/xampp-mysql-shutdown-unexpectedly/

データベースの中身をまだ作成していないうちは、XAMPPをアンインストールして、もう一度XAMPPを再インストールしても問題ありません。その方法でもエラーは解決できます。

ただし、アンインストールしてもPC上には空のXAMPPフォルダが残っているため、再インストールをする際には、あらかじめ空のフォルダを手動で削除しておく必要があることを覚えておいてください。

次回はこちら