記憶はそのうち消えてしまうので、備忘録を作ってみました。
まとめるのも得意ではないので取り留めのないメモかもしれませんけど、まぁ、自分用なので。
誰かの役に立つこともあるかもしれないのでとりあえず公開しておきます。

Ubuntu 22.04に変更

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

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から段階的に進めていこうと思います。
「とりあえず動かす」構成から「実務を意識して段階的に構築する」構成に変更ってことです。
ローカル設定のいろいろをしてデフォルトページも表示できたので今日は終了。

この記事を読む

デザインを考える。

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

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

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

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

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

この記事を読む

ローカル環境の設定いろいろ

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

とりあえず「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 も使えるようになって、サイト制作の準備は整ったはず。

この記事を読む

開発環境について

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

昔は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をルートとするウェブサーバー環境の完成です。

この記事を読む

ブログを作ってみた。

投稿日：2025-11-09 /日常と易の話【1】

ふと思ったことや、勉強メモなどを気軽に吐き出せる場所として。
PHPやSQLも書かないと忘れるし、ブログ構築は良い練習になるはず。
このサイトの制作工程についても記事に残していく予定です。

7月末頃から玄易鑑定士の修行を始めて約3ヵ月……
易だけではなく、五行や四柱推命、九星気学などの勉強もする日々です。
人生に行き詰ったとき、悩んだ時によく相談する先生が師匠です。
自分の人生を自分で切り開いていけるように。
そして、まわりの人が悩んでいる時に適切なアドバイスで助けになれるように。
まだまだ易の卦をどう読み解けば良いのかわからない状態ですが
占ってみて、その時感じたことなども記録して、理解を深めていければと思っています。

この記事を読む