PHPでWebサイト作りに挑戦してみた
記事IT・テクノロジー
今回はPHPを1から勉強して、Webサイトが作れるのか挑戦してみました。PHPは動的なWebサイトを作ることができるプログラミング言語で、例えばDBから取得したデータを画面に表示したり、APIを使って他のサービスを利用したりすることが可能です。
どんなWebサイトを作るかですが、テーマを決めました。先日、オープンデータの活用で紹介しました、地域検索のWebサイトの完成を目指します。
１．仕様
①スマートフォンで利用できるWebサイトを構築する。PCでもWebサイトを利用できるが、スマートフォン対応を優先した画面デザインとする。
②市区町村毎の各種データが多い順に並べ替え、上位10件の市区町村のデータをWeb画面に表示する。各種データとは、オープンデータで公開されている下記のデータのことである。
・保育所の数
・公立小学校の数
・国立小学校の数
・私立小学校の数
・小児科の医療施設数
・生活利便施設数
③検索条件から都道府県を選択して、検索範囲を絞ることができる。都道府県を選択せずに、検索範囲を全国にすることも可能とする。
④オープンデータをDBに手動で登録する。
⑤オープンデータは、政府統計の総合窓口(e-Stat)で公開されているデータを利用する。
２．DB設計
オープンデータを確認すると分かりますが、市区町村毎に下記のようにコードが割り当てられています。そのコード体系をそのまま利用します。
（例）
コード, 市区町村名
1101, 札幌市 中央区
1202, 函館市
2201, 青森市
3201, 盛岡市
コード, 都道府県名
1, 北海道
2, 青森県
3, 岩手県
テーブルは
①市区町村情報テーブル
②コードマスタテーブル
の2つを新規作成します。
（１）市区町村情報テーブル
■カラムの情報（実際のカラム名は英語表記）
・市区町村コード（プライマリキー）
・都道府県コード（インデックスキー）
・保育所の数
・公立小学校の数
・国立小学校の数
・私立小学校の数
・小児科の医療施設数
・生活利便施設数
データが登録された場合のテーブルのイメージ
（xxxは実際の数値）
市区町村で一意となるテーブルです。また、Web画面から都道府県で検索対象を絞ることができるので、都道府県コードにインデックスキーを設けます。こうすることで、検索が速くなります。
（２）コードマスタテーブル
■カラムの情報（実際のカラム名は英語表記）
・コード（プライマリキー）
・コード分類（インデックスキー）
（1のときは値が都道府県名を表し、2のときは市区町村名を表す）
・値
データが登録された場合のテーブルのイメージ
３．完成したWeb画面について
PHPのプログラムでは、コードマスタテーブルからコード分類 = 1の都道府県名を取得して、都道府県の数だけラジオボタンを表示しています。スマホの画面幅は広くありませんので、ラジオボタンを3つ表示したら改行しています。さらに空白の行を挿入してから再度ラジオボタンを3つずつ表示して間隔を空けていますが、これはモバイルユーザビリティを考慮した結果です。小さな画面だとラジオボタンが密集していると押しづらいので、少し離して表示しているのです。
さらに下へ画面スクロールすると、「指定しない」というラジオボタンが表示されます。都道府県を指定せずに全国で検索する場合、これを選択します。もちろん、ラジオボタンを何も選択しない状態でも全国で検索できるようにしています。しかし、一度、都道府県のラジオボタンを選択してしまうと、やっぱり全国で検索したいと思ったときにラジオボタン選択をクリアするよりも「指定しない」を選んでもらう方が良いと思い、このような作りにしました。
そして、並び順を指定するプルダウンですが、これはコードマスタテーブルにコード分類 = 3というデータを作って、そのデータから生成したものです。DBの市区町村情報テーブルからSELECTでデータ取得するときに、ORDER BYを利用して降順に並び替えるための項目です。
例えば、都道府県を指定せずに、公立小学校の数で並び替えて検索してみた結果が下図の画面です。
78、75、70と多い順に市区町村が表示されているのが分かるでしょうか？
公立小学校の数の1位は広島県福山市でした。
また、市区町村情報テーブルだけをSELECTしても市区町村名を画面に表示することはできません。そこで、SQLのJOINを利用してコードマスタとテーブル結合しています。市区町村名の上に都道府県名が表示されているのも、同じようにJOINで名称を取得したからです。市や町の合併などで市区町村名が変わることは今後有り得ますので、そのような時はコードマスタテーブルの値だけupdate文で変更することになります。（市区町村が増える場合は、insert文でコードマスタテーブルに追加します）
４．まとめ
検索時はPOSTによって、ラジオボタンや並び順から何を選択したのかの情報をサーバに渡して、SELECT時に利用しています。Javascriptは今回使っていません。このように、検索だけの機能をWeb画面に持たせるのであれば、容易に作ることができました。insertやupdateをする画面を作る場合は、画面で入力した値のチェックなどを行ったりすると、もう少し手間がかかります。
未経験の方が初めてWebサイトを作ってみたいと思ったときに、PHPを勉強してみるのは良いかもしれないですね。htmlやcss、Javascriptにも触れることになるので、フロントエンドの知識は自ずと増えてくるでしょう。
