AppBeads＋XAMPPで業務アプリ

# はじめに
AppBeadsはノーコードで業務アプリをつくれるオープンソースフレームワークです。
[AppBeads公式HP](https://appbeads.com/index.html)
[AppBeadsのノーコードツール](https://appbeads.com/top_tinyapp.html?page=tinyapp_1_1.html)

この記事では AppBeads を Apache＋PHP＋MySQL で動かす手順を示します。

**実行環境：** Windows11

# 手順の流れ
- **XAMPPのインストール**
XAMPPをダウンロードして、Apache＋PHP＋MySQL をインストールします。
- **XAMPPの設定**
PCの起動時にApacheとMySQLが自動的に起動されるようにします。
- **MySQLの準備**
MySQLに新しいデータベースとユーザーを作成します。
- **AppBeadsの導入**
AppBeadsをインストールしてMySQLへ接続できるようにします。

# XAMPPのインストール
[XAMPPのトップページ](https://www.apachefriends.org/jp/index.html) を開きます。
[Windows向けXAMPP] をクリックしてインストーラーをダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/141c96e0-9d2b-4404-8a8d-c351ec4dd2bd.png" width="70%">

ダウンロードしたインストーラーを実行します。
「このアプリがデバイスに変更を・・・」というメッセージが表示されたら [はい] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/d0f7e133-f392-4e02-840f-7b4ef9c7e290.png" width="50%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/a90222f5-4ac4-4c30-97d0-0f050a94a590.png" width="50%">

もし次のようなメッセージが表示されたら [はい] をクリックしてインストールを続けてください。（ほとんどの場合、このメッセージは表示されません。）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/06f77bc1-b8f3-47dc-80ec-cbd8a12182c3.png" width="60%">

ユーザーアクセス制御に関する警告が表示されたら [OK] をクリックしてインストールを続けてください。
<font color="orange">インストール先を「C:¥Program Files」の配下にしなければ問題ありません。</font>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/5b092338-6ced-41cf-8515-cbb117a9f023.png" width="60%">

XAMPPのセットアップ画面が開いたら [Next] をクリックして先へ進めます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/e5c5b19f-ebc4-46de-acad-76dbe1512e8d.png" width="60%">

インストールするソフトウェアを選択します。
Apache、MySQL、PHP、phpMyAdmin
をチェックします。（ApacheとPHPはチェックを外せません。）
[Next] をクリックして先へ進めます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/500af159-97f1-42ba-88d4-54695f1adadc.png" width="60%">

インストール先のフォルダは特に理由がなければデフォルト(C:¥xampp)のままにして [Next] をクリックします。
<font color="orange">「C:¥Program Files」の配下にはしないでください。</font>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/31fa7be4-cfc5-4062-b5d5-e4c6ee46df5c.png" width="60%">

言語の選択は「日本語」がないので「English」のままにして [Next] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/272f94be-4abe-40fe-b6a7-2c8160a1d602.png" width="60%">

[Next]をクリックしてインストールを開始します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/61c7c7b4-8644-4477-8370-bb2ec07dc7b4.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/f1f7d457-e7c1-47a8-a856-aa73ab1224f8.png" width="60%">

インストールが完了したら
　「Do you want to start the Control Panel now?」
　<font color="silver">（コントロールパネルを今すぐ起動しますか？）</font>
のチェックを外し、[Finish] をクリックして終了します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/9793924d-5439-472a-aa8e-8933f4651fa5.png" width="60%">

# XAMPPの設定
タスクバーの検索ボックスに「xampp」と入力します。
XAMPP Control Panel が表示されるので、管理者として実行します。
「この不明な発行元からのアプリがデバイスに変更を・・・」というメッセージが表示されたら [はい] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/348c3531-3ce6-4e38-92a3-ef691d025ca6.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/00f2bba1-a274-4722-84bd-c8bec2041d07.png" width="50%">

XAMPP Control Panel が開きます。
Apache と MySQL のサービスが :x: なので、これをクリックします。
　「Click Yes to install the Apache service」
　<font color="silver">（[Yes]をクリックしたらApacheサービスをインストールします）</font>
 というメッセ―が表示されたら [Yes] をクリックします。
 なお、MySQLも同様のメッセージが表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/0250f5d3-b37a-4423-b6a5-ab9459d3c519.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/329a51e9-bf82-4188-b7ed-f8fd72b2d45b.png" width="50%">

Apache と MySQL のサービスが :white_check_mark: になります。
これで、PCを起動したときに Apache と MySQL が自動で起動されます。
ただ、今は設定したばかりなので、[Start] をクリックして起動します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/bf1459fc-6756-413e-960c-e6489d9d7a02.png" width="60%">

Apache と MySQL が起動しました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/8a2c1950-71fe-4b8e-a6f7-e0844cbed6b1.png" width="60%">

# MySQLの準備

MySQL の [Admin] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/eab1a0a3-4d3b-435c-88b2-dbcb86b125e3.png" width="60%">

phpMyAdmin が開かれたら [ユーザアカウント] タブに切り替えて、
[ユーザアカウントを追加する] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/83fcaeb2-50f7-4a52-94e4-9c4ca8207885.png" width="80%">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/7435f116-c6bf-4fd6-bafb-1c0f4de34ed7.png" width="80%">

任意のユーザー名とパスワードを入力して
　[同名のデータベースを作成してすべての権限を与える。]
をチェックします。
画面を下にスクロールして、左下にある [実行] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/310a1e12-da1d-4889-b9e2-42bef8b4aa04.png" width="80%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/651a97d7-b818-43a1-90b4-a696a73e1c19.png" width="80%">

これで、MySQLに新しいデータベースとユーザーが作成されます。

# AppBeadsの導入

[AppBeadsの導入と設定](http://appbeads.com/top_settings.html?page=settings_1_1.html) を開きます。
<font color="deepskyblue">appbeads_full.zip</font> をクリックしてダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/a5cdbf53-a9bb-4186-8a0a-c5d379bc72fa.png" width="80%">

ダウンロードしたzipファイルを展開します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/8f6a5524-4d93-44cf-9ea4-06e22d2b257e.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/72408173-3fa9-4d41-963c-6bbe0cc6c813.png" width="60%">

展開した appbeads_full フォルダの中に appbeads というフォルダがあるので、これをドキュメントルートに移動します。
XAMPPのインストール先がデフォルトのままなら
ドキュメントルートは「C:¥xampp¥htdocs」です。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/b30b90b7-ce03-42fd-9b19-970b8f62b585.png" width="60%">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/91f71776-179c-458a-891d-6b42a3c46ba8.png" width="60%">

AppBeads をブラウザで開いて [ログイン] をクリックします。
<font color="orange">AppBeads導入直後はユーザーがいないのでユーザー名とパスワードは入力不要です。</font>
**AppBeads：** http://localhost/appbeads

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/8ce3a925-4398-4532-9cae-2800e5448fcb.png" width="80%">

メニューから [設定] を開きます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/75aed439-3491-494e-b4ff-c54e72d3b6e7.png" width="80%">

[データベースを追加する] をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/5ad4c87c-0ea7-4c49-932e-3ce0acce1a4c.png" width="80%">

任意のデータベース名<font color="silver">(１)</font>と表示名を入力し、製品でMySQLを選択します。
<font color="silver">ここではデータベース名を「TESTDB」、表示名を「テストDB」にしています。</font>
続けて「サーバー、データベース名<font color="silver">(２)</font>、ユーザー、パスワード」を入力します。
サーバーは localhost で、それ以外は前述の MySQLで作成したユーザーの情報です。
[接続テスト] をクリックして MySQL に接続できることを確認します。
最後に画面右上の [保存] をクリックして設定情報を保存します。

::: note info
２つのデータベース名
データベース名(１)は AppBeads 内でのデータベースの名前です。
データベース名(２)は MySQL のデータベース名です。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4112475/612d97dd-fcc1-47a2-aae0-61f22d09924e.png" width="80%">

以上で、AppBeads を Apache＋PHP＋MySQL で動かす作業は完了です。