【9】 投稿日：2025-12-28 /制作工程

root で MariaDB に入ってデータベースの作成を進めます。
vagrant ssh で仮想サーバーに入った状態で以下コマンドを打ちます。
unix_socket 認証を使って root ユーザーとして MariaDB にログインするためのコマンドです。
パスワード入力が不要なのは、OSのroot権限と連携した認証方式だからです。
sudo mariadb
DBに入ったらデータベースの作成のSQLを実行します。
作成と同時に文字コードの指定と照合順序の指定もしちゃいます。
CREATE DATABASE データベース名
　DEFAULT CHARACTER SET utf8mb4
　COLLATE utf8mb4_unicode_ci;
「データベース名」は任意の名前をアルファベットで指定してください。
文字コードは絵文字や拡張文字など4バイト文字も扱える「utf8mb4」にしました。
照合順序に選択した「utf8mb4_unicode_ci」は、アルファベットの大文字・小文字を区別せず、Unicode のルールに基づいた自然な並び順で比較・ソートされる設定です。
ちなみに文の最後に「;」をつけるまでSQLは実行されません。
「;」を忘れてEnter押すと「->」と表示されますが、コマンドの続きを待ってる状態なので「;」だけ入れて実行させましょう。

続いて作成したデータベースにログインするユーザーを作ります。
CREATE USER 'admin'@'localhost'
　IDENTIFIED BY 'パスワード';
今回は分かりやすさ重視でユーザー名を「admin」にしましたが、ここは任意です。
実務ではアプリケーション専用のユーザー名を付けることが多いです。
「@'localhost'」は接続元を表しており、同じサーバー内からの接続のみに制限しています。
「IDENTIFIED BY」で、このユーザーのログイン用パスワードを設定します。

作成したユーザーに対して、データベースの操作権限を付与します。
GRANT ALL PRIVILEGES ON データベース名.* TO 'admin'@'localhost';
FLUSH PRIVILEGES;
指定したデータベースに対して、すべての操作ができる権限を admin に付与しました。
ローカルのadminだから全権与えましたけど、本番では必要最低限にしましょうね。
最後の1行は、ユーザー権限に関するキャッシュを再読み込みするコマンドです。最近の MariaDB では自動反映される場合もありますが、変更を確実に有効化するために実行しています。

データベースとユーザーの作成が完了したので
exit で MariaDB を抜けて仮想サーバーから接続テストを行います。
mysql -u admin -p データベース名
上記コマンドを打つと Enter password と表示されるので、設定したパスワードを入力します。
パスワードの文字列は表示されません。最初は戸惑いますが、パスワードの文字列を打ち込んで Enter を押せばいいのです。
無事にログインできれば「MariaDB [データベース名]>」と表示されます。
ちなみにこのコマンドは、「admin というユーザー（-u）で、パスワード認証（-p）を使って、指定したデータベースにログインする」という意味です。

とりあえずこれでローカル環境にMariaDBを設定することができました！
本番環境のバックアップデータ（.sqlファイル）を流し込んだら、ローカル環境でブログページの表示もできるようになった！
……と思ったら「接続エラー：ドライバーが見つかりませんでした」

えっと......？ぁ、PDO MySQL ドライバが無いと。
②でPHPインストールはしましたが、あれはPHP本体をインストールしただけで MySQL（MariaDB）用のPDOドライバは含まれておらず、php-mysql を別途インストールする必要があったそうです。

さて、vagrant ssh の状態で次のコマンドを実行します。
sudo apt-get install -y php-mysql
sudo systemctl restart apache2
インストール完了したら、無事にローカルでも表示できました。

確認や管理をしやすくするために phpMyAdmin の導入もしておきます。
sudo apt-get install -y phpmyadmin
途中、ダイアログが出てきます。
まずWebサーバーの選択。
今回は Apache を使用しているため、phpMyAdmin の設定対象としては apache2 を選択します。
次に出てくるダイアログはデータベースの設定について。
「Configure database for phpmyadmin with dbconfig-common?」
これは「phpMyAdmin 自身が使う管理用DBを自動で作る？」と聞いているのでYesです。
するとパスワードの設定画面になります。
空欄のままEnterを押すとランダムで自動生成されます。
このパスワードは phpMyAdmin が内部で MariaDB に接続するためのもので、設定ファイルに保存されて通常ユーザーが使うことはありません。
なので自動生成でOKです。

そして Apache に phpMyAdmin を認識させます。
今回使用している jammy では自動で有効化されますが、念のためです。
sudo phpenmod mysqli
sudo systemctl restart apache2
「phpenmod」はPHP拡張モジュールを有効化するためのコマンドです。
phpMyAdmin は内部で mysqli 拡張を利用して DB に接続するので mysqli を有効化してます。

これで original-domain.local/phpmyadmin で表示されるはず！
と、思ったら404エラーでした。

えっとですね……Apache が /phpmyadmin のURLと実体ディレクトリを結びつける設定を読み込んでなかったことが原因でした。
「/phpmyadmin に来たら /usr/share/phpmyadmin を見せてね」というApache向け指示書が必要です。
sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf-available/phpmyadmin.conf
「ln -s」ファイルの実体をコピーするのではなく、別の場所から参照できる「シンボリックリンク」を作るコマンドです。
そして「sudo a2enconf phpmyadmin」で設定ファイルを有効化。
無事に http://original-domain.local/phpmyadmin で表示ができました。

これで Apache + PHP + MariaDB + phpMyAdmin のローカル検証環境が一通り完成です！

【8】 投稿日：2025-12-21 /制作工程

それでは、セキュリティの初期設定をします。
sudo mysql_secure_installation
上記コマンドを打つと「Enter current password for root (enter for none)」と出てきます。
現在のパスワードはまだ設定してないのでEnterで進みます。
すると6つの質問が続くので Yes[Y] か No[n] で答えていきます。

■Switch to unix_socket authentication [Y/n]
Ubuntu環境では、MariaDBのrootユーザーはパスワード認証ではなく、
unix_socket認証を使うのが標準なので[Y]を入力してEnterを押します。
これでOSにログインしてsudo権限を持つユーザーのみがデータベース管理を行えるようになります。
MySQL(MariaDB)単体のパスワード管理に依存しないため、より安全な方式です。

■Change the root password? [Y/n]
rootユーザーはunix_socket認証を使用するため、
パスワードによるログイン自体を想定していないので[n]を選択します。

■Remove anonymous users? [Y/n]
初期状態で用意されている匿名ユーザーを消しますかと聞かれています。
ローカル環境といえどリスクになるので[Y]を選択して削除します。

■Disallow root login remotely? [Y/n]
リモートからのrootユーザーでのログインを禁止するか、こちらも[Y]です。
誰もが知る「root」というユーザー名は攻撃対象になりやすく
ネットワーク越しにログインできるのは非常に危険なのでローカルのみに制限します。

■Remove test database and access to it? [Y/n]
動作確認用に「test」というデータベースあるけど消しますか？
おまけで入ってるものですが、実務では使われることはなく
セキュリティ上も不要なので [Y] で削除します。

■Reload privilege tables now? [Y/n]
[Y]でリロードして権限を再読み込みしたら完了です。

これで MariaDB の初期セキュリティ設定は完了です。
次回はデータベースとユーザーの作成を進めていきます。

【7】 投稿日：2025-12-14 /制作工程

さて、いよいよMariaDBをインストールします。
VMに入ってまずは必要なツールを入れます。
sudo apt-get install -y curl software-properties-common
「curl」は外部からデータを取得するためのコマンドライン用の通信ツール、「software-properties-common」はaptのリポジトリを追加するための管理用ツールです。
今回はUbuntu標準パッケージのみを使用するので必須ではないですが、実務を考慮するとよく使うものらしいのでひとまず入れておきます。

次にMariaDB公式リポジトリを追加します。
本番で使われているバージョンに合わせて指定してみました。
curl -LsS https://r.mariadb.com/downloads/mariadb_repo_setup | \
sudo bash -s -- --mariadb-server-version=10.5
これはパイプ（ | ）で2つのコマンドをつないでいるのでまとめて実行できます。
バックスラッシュ（ \ ）は改行用の記号で次の行も同じコマンドですよってことで
curlで取得したスクリプトをsudo bashに渡して実行してるってことです。
ちなみにどんなスクリプトを取得したか明確じゃないときは使わないほうが良いです。

さて、リポジトリを追加しただけでは apt がその存在をまだ認識していないため、パッケージの一覧を更新して情報を反映させます。
sudo apt-get update
apt は Ubuntu で使われているパッケージ管理ツールです。
ソフトウェアのインストールや更新を、依存関係も含めて一括で管理してくれます。

update が終わったらついに MariaDB をインストールです。
sudo apt-get install -y mariadb-server
インストールができたら MariaDB をOS起動時に自動起動するよう設定して、起動させます。
sudo systemctl enable mariadb
sudo systemctl start mariadb

ここまで出来たらインストールしたMariaDBのバージョンを確認しておきましょう。
mysql --version
バージョン確認をすると、指定したはずの 10.5 ではなく
MariaDB 10.6 がインストールされていました……

しかし、これは失敗というわけではありません。
Ubuntu 22.04（jammy）では MariaDB 10.6 が標準世代となっており、MariaDB公式リポジトリでも 10.5 は基本的に focal（20.04）向けとして扱われているためです。
mariadb_repo_setup でバージョン指定をしても、OSと組み合わせて利用できない場合は、自動的にそのOSで推奨されるバージョンが選択されるのです。

本番環境とまったく同じになりませんでしたが
MariaDB 10.5 → 10.6 はメジャーバージョン違いではなく、
SQL互換性も高いため、今回のローカル検証環境では 10.6 を採用します。

次回からMariaDBの初期設定などを進めていきます。

【6】 投稿日：2025-12-07 /制作工程

ローカル環境ができたと思ってサイトのデータを置いたら500エラー……
いったん初期表示用のHTMLファイルだけに戻す、表示される……？

ぁ。
Apacheだけで構築したってことはPHPが使えない状況か。
当然ながらサイトデータにはPHPを使ってるので、ApacheがPHPを解釈できずにエラーになっちゃったわけですね。

ということで、PHPのインストールをしなくては。
まず「vagrant ssh」でVMに入ります。
そしてPHPインストールするには以下コマンドを入力！
sudo apt-get install -y php libapache2-mod-php
途中で「Daemons using outdated libraries」というダイアログが出てきます。
「アップデートで使ってるライブラリが変わったから、再起動した方がいいサービスあるけど、どうする？」って聞かれます。
Ubuntuでは「apt install」や「apt upgrade」をしたときに
古いライブラリを掴んだまま動いてるデーモンがあると、これが出るそうです。
ダイアログで[＊]がついているものが再起動推奨のサービス。
特に問題がなければ、普通にEnter押して＜OK＞で進めて大丈夫。
PHPインストールが終わったらApacheを再起動します。
sudo systemctl restart apache2
「info.php」を作ってPHPバージョンとか情報出たら成功！
ちなみに情報出すためのファイルの中身は以下。
<?php
phpinfo();
確認が終わったら info.php は削除。
サーバー情報が丸見えになったままはセキュリティ的に危ないので。

【5】 投稿日：2025-11-30 /制作工程

DB系知識の復習もかねてブログを設置することにしたのですが、ローカル環境からXserverのDBには接続できなかったんですよ（あたりまえですね）。
だからXserverと同じDB環境をローカルに構築することにしました。
ちゃっぴーに教えてもらいながら進めたところ以下のことが判明しました。

Ubuntu 20.04 は 2025年5月にサポート終了（EOL）になってる
→ MariaDB公式リポジトリももう対応を打ち切ってる

「ubuntu/focal64」はサポート期限2030年4月までだし～って言ってなかったか？
今後のためにもUbuntu 22.04 か 24.04 のBoxで環境を作り直すのが一番安全で早いってしれっと言ってきたけど、最初にUbuntu 20.04で良いって言ったのちゃっぴーだから……
ぇ？Box自体は残っていても、OSやミドルウェアの公式サポートとは別物……？
ふーん、まぁ、そういうことにしておきましょう。

まぁ、気を取り直して……
vagrant destroy -f
既存の環境を削除したらUbuntu 22.04で再構築していきます。
vagrant box add ubuntu/jammy64
vagrant init ubuntu/jammy64
Vagrantfileが生成されたらその中身を書き換えです。
Vagrant.configure("2") do |config|
　config.vm.box = "ubuntu/jammy64"
　config.vm.hostname = "lamp-jammy"
　config.vm.network "private_network", ip: "192.168.33.10"
　config.vm.synced_folder "./htdocs", "/var/www/html"
　config.vm.provider "virtualbox" do |vb|
　　vb.name = "lamp-jammy"
　　vb.memory = 1024
　end
　config.vm.provision "shell", inline: <<-SHELL
　　timedatectl set-timezone Asia/Tokyo
　　apt-get update -y
　　apt-get install -y apache2
　　systemctl enable apache2
　　systemctl start apache2
　SHELL
end
前回と違うのはまず2行目、Ubuntu 22.04 LTSを使いますよ。
3行目は将来VMを複数立てた場合の管理性向上のために追加しました。
必須じゃないけど実務向けの設定だそうです。
6～8行目では仮想マシンのメモリを調整しています。
デフォルトの512MBだと重いので、開発向けに少し増量です。
11行目でタイムゾーンを設定。実務ではかなり重要なんですって。
前回はLAMP環境まとめてインストールしましたけど、今回はとりあえずApacheから段階的に進めていこうと思います。
「とりあえず動かす」構成から「実務を意識して段階的に構築する」構成に変更ってことです。
ローカル設定のいろいろをしてデフォルトページも表示できたので今日は終了。

【4】 投稿日：2025-11-22 /制作工程

ウェブページを作る工程で、私がいちばん厄介だと思うのがデザイン。
なかなか納得できるものができず、何回作り直したことか……

まず背景画像を探し彷徨う……
風景画を求めてたどり着いたのが「きまぐれアフター」様のこちらの素材でした。

これだけではちょっと寂しいので右下に猫シルエットを配置。
猫シルエットは「シルエットデザイン」様の素材を使わせていただきました。
どーんと背景にして、少し全体の色を薄くしてみたり、コンテンツに半透明の背景色を敷いたりしてみたものの、ごちゃついてる感が否めず、最終的に右下部分だけが残って現在の形です。
上下に入れた水彩画のような柔らかい装飾は「イラストAC」で見つけた おかか様 の作品（ID: 22902963）です。
1枚絵を background-size: cover で表示していましたが、そうすると主にスマホでスクロール時に画像がカクっとなる時があるんです。ブラウザのアドレスバーが出たり消えたりすることで height が微妙に変化するのが原因。
それがどうしても気になってしまうので、右上と左下で画像を分けることにしました。
右上をbodyの背景で background-attachment: fixed にして、左下は position:fixed にした body:after の背景にしています。
コンテンツの配置も display: grid を使ってみたりいろいろ試行錯誤をしましたけど、最終的にシンプルが一番だと思ってたどり着いたのが現在のデザイン。

デザインって作る人の趣味嗜好が少なからず出ちゃうのは仕方ない。
作ったものを悉く否定され続けたのでデザインは苦手です。
でも嫌いなわけじゃないし、今のサイトは私らしいデザインで良いと思ってます。
流行とかテクニックとかあるけど、デザインは自分が好きなものを作りたいと思っちゃうからやっぱり私にデザインは向いてない……

【3】 投稿日：2025-11-11 /制作工程

とりあえず「http://192.168.33.10/」で表示できるようになったけど、私はhtdocs内で複数サイトを運用できるようにしたかったのです。
そしてローカル用のドメイン、例えば「http://original-domain.local/」とかで表示したい。

まず、hostsファイルに下記のように追加します。
192.168.33.10 original-domain.local
メモ帳を右クリックして管理者として開いたら「Ctrl + O」でhostsファイルを開きます。
ちなみにWindowsだと「C:\Windows\System32\drivers\etc\hosts」がパスです。

しかしこのままではhtdocsがトップのままなので、「vagrant ssh」で仮想マシンに入ります。
ホスト側には「htdocs/original-domain」とフォルダを作成しておきます。
そうすると仮想マシン内では「/var/www/html/original-domain」で同期されるはず。
以下コマンドで設定ファイルを作成します。
sudo nano /etc/apache2/sites-available/original-domain.local.conf
「sudo」は管理者権限でコマンド実行、「nano」はUNIX/Linuxシステムで使えるシンプルなテキストエディタです。つまり、指定したパスで「original-domain.local.conf」という名前のファイルを管理者権限で作りますよってことです。
ファイルの中身は下記のとおりとしました。
<VirtualHost *:80>
　ServerName original-domain.local
　　DocumentRoot /var/www/html/original-domain
　　<Directory /var/www/html/original-domain>
　　　　Options Indexes FollowSymLinks
　　　　AllowOverride All
　　　　Require all granted
　　</Directory>
</VirtualHost>

「Ctrl + O」→「Enter」で保存、「Ctrl + X」で終了します。
作成した設定ファイルを有効化して、Apacheを再起動。
sudo a2ensite original-domain.local.conf
sudo systemctl reload apache2
これでブラウザで http://original-domain.local/ を表示すると
/htdocs/original-domain/ をルートとしたローカル環境が完成するはず！

途中、original-domain.local.confでちょっとミスって「sudo systemctl reload apache2」が実行できないトラブルがあったんだけど、下記コマンドで構文チェックして間違いを修正したりした。
sudo apache2ctl configtest
「Syntax OK」と出たら問題なし。

あと vagrant halt して再度 vagrant up したときに起動できなかったとか。
「vagrant up --debug」でエラーを表示させたら、Windows 側で「VirtualBox Host-Only ネットワークアダプター」に異常があったようで、下記のようなエラーが出てた。
VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Adapter #2' (VERR_INTNET_FLT_IF_NOT_FOUND)

「VirtualBox Host-Only Ethernet Adapter #2」が無効になっていると。
「Windows + R」の検索で「ncpa.cpl」と入力してネットワーク接続の一覧を表示させたところ、確かに無効になっていたので有効にする。
しかし、上手くいかず…… PC再起動してみたら解決した。。

そしてもう1つ設定が必要なのが.htaccessの有効化。
初期では無効になってることが多いので、vagrantにSSHで入ってApacheの設定ファイルを開きます。
sudo nano /etc/apache2/apache2.conf

ファイルを開いたら「<Directory /var/www/>」の部分を探します。
nanoでは「Ctrl + w」で検索できますが「Ctrl + V」で貼り付けはできません……
<Directory /var/www/>
　　Options Indexes FollowSymLinks
　　AllowOverride None
　　Require all granted
</Directory>

真ん中の「AllowOverride None」を「AllowOverride All」にして保存。
「Ctrl + O」でEnter、「Ctrl + X」で終了し、Apache再起動。
sudo systemctl restart apache2
これで .htaccess も使えるようになって、サイト制作の準備は整ったはず。

【2】 投稿日：2025-11-10 /制作工程

昔はXAMPPを使っていました。
しかし、ウェブデザイン技能検定1級の実技試験ではVagrantが使われるということで、普段から慣れておこうと開発環境をVagrantに移行することに。
もともとインフラ系の知識にも興味があったのでちょうど良い。

公式サイトから「VirtualBox」と「Vagrant」をそれぞれダウンロード。
Vagrantのダウンロードは「AMD64」と「I686」というのがあったけど、「I686」は32bit版Linuxや古い環境用とのことで64bit版Windows用の「AMD64」を選択しました。
私が使ってるPCは「Intel」だけどそこは関係なく「AMD」で良いそうです。
ちなみにインストール中に出てくる選択は「Yes」と「Next」で大丈夫でした。

インストールが完了したらとりあえずPCを再起動。
任意の場所にフォルダ作って、そこでターミナル開いて下記のコマンドを入力！
vagrant init ubuntu/focal64
「ubuntu/focal64」は2020年4月リリースのUbuntu 20.04 LTS（Focal Fossa）でサポート期限は2030年4月までだし勉強・開発用途ならこれで良いってちゃっぴーが言ってた。
（そして後ほど作り直すはめに……）
フォルダ内にVagrantfileが生成されたら今度はその中身の書換え。
初期のままだとただUbuntuが起動するだけらしいので、ちゃんとウェブサーバーとして機能するように、まるっと下記のように書き換えました。
表示用に全角スペース使ってるので丸コピは注意です。
Vagrant.configure("2") do |config|
　config.vm.box = "ubuntu/focal64"
　config.vm.network "private_network", ip: "192.168.33.10"
　config.vm.synced_folder "./htdocs", "/var/www/html"
　config.vm.provision "shell", inline: <<-SHELL
　　apt-get update
　　apt-get install -y apache2 mysql-server php libapache2-mod-php php-mysql
　　systemctl enable apache2
　　systemctl enable mysql
　SHELL
end

1行目：VagrantのVer.2形式で設定しますよ、という宣言。
　2013年頃にVagrant1.1で構文が大きく変わったそうで、今は"2"と指定するのが基本。
　config はこの中で設定項目を定義していくための変数。
2行目：どのOSの仮想マシンを使うか。ここでは「Ubuntu 20.04 LTS」を指定。
3行目：ホスト（自分のPC）からアクセスできるように仮想マシンのIPアドレスを設定。
　Vagrantのチュートリアルなどでよく使われる「192.168.33.10」を指定しました。
　VirtualBoxのHost-Only Adapterが「192.168.33.1」なので、同じ帯域で通信できるように。
　「33」の部分はVirtualBox側のAdapterと一致させておく必要がある。
　「10」の部分は2～254の範囲で自由に使ってOK。
4行目：ホスト側のhtdocsフォルダを仮想マシン内の/var/www/htmlに同期する設定。
　vagrantfileと同じ階層に「htdocs」を作ってそこにHTMLファイルとかを入れる構成。
5行目：仮想マシン起動時に実行するシェルスクリプトの開始宣言。
　provision は「初期セットアップ」を意味する。
6行目：パッケージリストを更新（定番）
7行目：Apache, MySQL, PHP関連のパッケージをまとめてインストール
8、9行目：ApacheとMySQLを起動時に自動起動するように設定
10行目はシェルスクリプトの終了、endは設定全体の終わりを意味する。

Vagrantfileを保存したら、ターミナルで「vagrant up」と入力して起動。
しばらくすると仮想マシンが立ち上がるので、ブラウザで「192.168.33.10」にアクセス。
「Apache2 Ubuntu Default Page」が表示されたらOK！

これでとりあえずhtdocsをルートとするウェブサーバー環境の完成です。