PHPでおみくじを作ろう

a-ki

2023年12月18日 15:16

このnoteは2023年12月9日～12日の間、エックスにポストした「#年末PHP講座」を転載したものです。有料の追記部分はおみくじをWordPressプラグインにする方法を解説しています。

「最低限のHTMLが書けて、FTPクライアントでレンタルサーバーにファイルをアップロードしたことがある」程度の知識を持ったブログ運営者を対象にしています。

コピペではなく自分で手を動かしてこそ身につくと思っているので、コードは画像で表示しています。頑張って写経してください。

なお私自身は日曜大工レベルのプログラミング技術しかありません。
職業としてプログラマーを目指す方は、おすすめのプログラミングスクールなどをご利用ください→（アフィリンク）

では、始めましょう！

2023-12-30
有料エリアomikuji.zipのダウンロードリンクが消失していました。（現在は訂正済）

【1日目】

まずは予備知識です。

この講座の目標

おみくじプログラムの作成を通じて、変数や配列、条件分岐等の基本的な書き方を覚える。

PHPとは

正式にはPHPハイパーテキスト・プロセッサーといいます。
文字通りハイパーテキスト（HTML）を生成することを主目的としたプログラム言語です。

PHPはサーバー上で動作します。サーバーに届いたリクエストを処理してHTMLを生成します。

なじみ深いものでは、みんな大好きWordPressもPHPで作られています。

用意するもの

テキストエディタとPHPが動くサーバーが必要です。

テキストエディタは、VScord（Visual Studio Code）がおすすめですが、VScordの使い方を覚えるのに時間をかけるくらいなら、Windows標準のメモ帳アプリでも十分対応できます。

サーバーは一般的なレンタルサーバーならほとんどがPHPに対応しています。PHPファイルをサーバーにアップロードすれば、特別な設定なしに動作します。

PC上（ローカル環境）で動かすには環境構築が必要です。
本格的に開発するなら、dockerやxamppをインストールするのが一般的ですが、初心者ならammpsで十分でしょう。
https://ampps.com/

amppsは無料で使う場合、PHPのバージョンが一世代前（2023年現在ではPHP7.4）になりますが、今回作る程度のものなら特に問題ありません。

amppsをインストールして起動すると画面右下に画像のようなパネルが表示されます。
メニューのフォルダアイコンをクリックするとファイルを置くディレクトリ(Ampps/www/)が表示され、地球儀アイコンをクリックすると、ブラウザにその場所が表示されます。

今回はwwwフォルダ内に「work」というフォルダを作りその中で作業をしましょう

環境が整ったら早速PHPコードを書いてみましょう。
PC上で作業するのでamppsを起動してください。

Hello World

workフォルダに新規ファイル「index.php」を作成します。

index.phpをテキストエディタで開き、画像のようにコードを書きます。

保存したら、ブラウザで
http://localhost/work/
を開いてください。

Hello World
と表示されましたか？

PHPプログラムは
<?php ~ ?>
の中に書きます。

// のついた行はコメントアウトです。
プログラムに影響を与えないメモを残すときの書き方です。

echo は出力する命令です。

出力とは処理した情報を出すことを言います。
この場合Hello Worldという文字列を表示せよという意味ですね。

文字列は引用符「”」や「’」で囲みます。
数値や変数は囲みません。

また命令のあとは、必ず「; (セミコロン)」で閉じます（←重要）
Hello Worldを好きな言葉に書き換えてみましょう。

変数

index.phpを少し書き換えましょう。

$aは変数といいます。
変数は文字や数値、配列など「なんでも入る箱」と考えておけば良いでしょう。
「$マーク＋変数名」で作ります。
変数名は任意ですが、数字だけもしくは数字から始まる文字列はNGです。
例）
$1 , $1a → NG
$a1 → OK

プログラミングで「=」は、数学でいう等号ではなく「左辺に右辺を代入する」という意味になります。

代入なのでこういう書き方もできます。
$a = “Hello”;
$a = $a . “World”; // 文字列はピリオドで連結できます。
echo $a; // HelloWorld と出力します。

HTMLに組み込む

PHPのコードはHTMLの中に直接組み込むことができます。

<?= $var ?>
という書き方は
<?php echo $var ?>
の省略記法です。

HTMLに組み込むときはこちらのほうがスマートですね。

余談ですが、VScordでは「! + tab」でHTMLの雛形を挿入することができます。覚えておくと便利です。

【2日目】

プログラミングの勉強を始めたら、誰もが一度は作る「おみくじプログラム」を作ってみましょう。
最終的にこのようなアプリっぽいものが出来上がります。
https://aki-f.net/note/omikuji/

おみくじプログラムの仕組み

おみくじプログラムの仕組みは

リロードのたびに乱数を生成する
生成された数値を条件に結果を呼び出す処理をする

という単純なものです。

条件分岐

与えられた条件によって処理を変える仕組みを条件分岐と言います。
書き方はいくつかありますが、まず基本的なif~else文を覚えましょう。

if文の構造は

if( 条件１ ){ 
   　処理１
}elseif( 条件２ ){
    処理２
}else{
    処理３
}

となります。

プログラミング言語は英語をもとにしていますので、日本語に翻訳するように読み下すとわかりやすくなります。

（読み下し）
if : もし条件１ならば、処理１を実行しなさい
elseif : それ以外で条件２ならば、処理２を実行しなさい
else : どれにも当てはまらなければ、処理３を実行しなさい

おみくじの条件分岐は以下のようになります。

$n === 1 は「$nが1に等しい」の意味です。
数学でいう等号は「＝＝＝」と３つ重ねて書きます。
２つ（$n == 1）でも良いですが、３つ重ねるのはより厳密な書き方です。

$n を２や３に書き換えて表示が変わるか確かめてみましょう。

ランダムに表示する

さて、$nの数値をいちいち手動で書き換えていたのではおみくじになりません。

$nの数値をランダムに入れ替えるにはmt_rand関数を使います
mt_rand関数は乱数を生成する関数です。

mt_rand(最小値, 最大値)と指定するとページを開く度に範囲内の整数をランダムに生成します。

$n = mt_rand(1, 3);

と指定すると「1, 2, 3」がランダムに代入されます。

ページをリロードするたびに、大吉、吉、凶が入れ替わったら成功です。

応用すればじゃんけんアプリも作れますね。
elseif()の部分を増やせば結果を増やすこともできます。
いろいろ試してみてください。

【３日目】

前回は結果が３つだけだったのでif文で条件分岐しても問題ありませんでした。

しかし結果が５つ６つと増えてくるとif文が冗長になり可読性が悪くなります。

今回は配列を使うスマートな書き方にチャレンジしましょう。

配列とは

配列も変数と同じように何でも入る箱のようなものです。
変数と違って複数の値を格納することができます。

また取り出しやすいように0から始まる数値のインデックスで整理されます。「番号の付いた仕切りのある箱」と理解すれば良いでしょう。

配列は大括弧（角括弧）で囲みカンマ区切りで値を書きます。

$array = [ “大吉”, ”吉”, ”中吉”, “小吉”, ”凶”];
（文字列は引用符で囲みます）

インデックスの番号を指定することで値を取り出せます。

echo $array[2] ; // “中吉”と出力

インデックスをmt_rand関数で生成すればスッキリと書けますね。

txtファイルを配列に読み込む

さらにデータの数が増減したときプログラムに手を加えなくて良いようにデータとプログラムを分離してみましょう。

データファイルは新たにdata.txtファイルを作ります。
１行１要素になるよう作成しindex.phpと同じフォルダに保存します。

file関数はtxtファイルを読み込み、改行区切りで配列に変換します。
data.txtをfile関数で配列に変換しましょう。
$array = file(“data.txt”);

txtファイルの行が増減するとmt_rand関数の最大値も変わります。
データを増減してもプログラム自体に手を加えなくて良いようにしておきましょう。

一番大きなインデックス番号は(配列の要素の数-1)です。
配列の要素数を数えるsizeof関数を使い１を引いた数をmt_rand関数の最大値に当てます。

$max = sizeof($array) - 1;
$n = mt_rand(0, $max);

これで要素が増えてもプログラムを書き換えずに済みます。

3.セキュリティ対策

今回は自分で作ったデータを読み込むので問題ありませんが、実際の運用では他人が作ったデータを利用することがあります。

仮に悪意のあるコードが埋め込まれていた場合ユーザーに迷惑をかける可能性もあるので、出力のタイミングでコードを無効化する対策（サニタイジング）を施します。

サニタイジングにはhtmlspecialchars関数を使います。
htmlspecialchars関数は「<」や「>」などHTMLの中で特別な意味を持つ文字をエスケープしコードを無効化します。

少し面倒ですが、出力の際はサニタイジングする習慣を付けておきましょう。
参考：https://qiita.com/wakahara3/items/ec8c9b6cbdfef78d3a64

【４日目】

txtファイルでは、1行に1つの値しか入れられません。
データファイルにCSVを使ってより多くの情報を取り扱えるようにしましょう。

CSVとは

CSVファイルとは「Comma Separated Values」の略で、要素をカンマで区切ったテキストファイルです。
拡張子は.csvで、エクセルやスプレッドシートなどでインポート、エクスポートに使われます。

CSVファイル自体はただのテキストファイルですから、普通のメモ帳でも編集可能です。

今回使うCSVは下記のスプレッドシートからカンマ区切り形式(.csv)に指定してダウンロードしてください。
おみくじデータ

CSVを取り扱う方法

PHPではCSVを直接配列に変換する関数はありません。
手順としてはfile関数で行単位の配列に変換したあと、１行をカンマで区切った配列に変換するという手順を踏みます。

file関数で生成した配列がどのようになっているか見てみましょう。
print_r関数を使うと配列の構造を出力できます。

各要素の値はカンマを含んだ文字列になっていますね。
$data[$n]をさらにexplode関数を使ってカンマ区切りで配列化しましょう。

explode関数は第１引数に任意の区切り文字を指定して配列に変換する関数です。

$array = explode(“,”, $data[$n]);

完成形

配列から取り出した値をサニタイジングし、わかりやすい変数に代入してHTMLに配置します。
リロードするための自己リンクを置き、CSSで見た目を整えれば完成です。

＼ここで一旦CMです／

プログラミング入門者向きの教本は数あれど、このシリーズが一番わかり易いと思います。私もJavascriptとPythonの巻を持っています

【おまけ】WordPressプラグインを作ろう

ここからは有料です。
投稿ページ、または固定ページにショートコードを貼るだけで動作するおみくじプラグインを作ります。

正直、検索すればすぐ出てくるような内容です。
自分で使うプラグインを作るための最低限のことしか書いていません。

なお、作成したプラグインの使用によるいかなる不利益も一切責任を負いません。自己責任でご利用いただける方のみご覧ください。

ここから先は

2,310字 / 6画像

¥ 300

ログイン

この記事が気に入ったらサポートをしてみませんか？