こんにちは、プログラマーの山本です。
企業様からのご依頼で、動物占いの診断システムをwebサイト上に制作しました。
PHPとJavaScriptを使いました。
web上に占い系のシステムを制作したい方は参考にしてください。
占いの入力フォームを作る。
まず、ユーザーが生年月日を入力して送信するフォームを作ります。
form.php
<form action="result.php" method="post">
<input type="number" id="year" name="year">年
<input type="number" id="month" name="month">月
<input type="number" id="date" name="date">日
<input type="submit" value=" 占う ">
</form>今回はシンプルにテキストボックスに数値を入力してもらう形です。
（実際にはCSSでデザインをつけました。）
また、セレクトボックスにして、PHPかJavaScriptで選択肢を自動生成させても良いでしょう。
結果出力ページを作る。
動物占いの計算式は以下のサイトを参考にしました。
http://distance.sub.jp/cyaranavi/
result.php
<?php
if($_POST["year"] && $_POST["month"] && $_POST["date"]){
//POSTしたデータをエスケープして受け取る。
$year = htmlspecialchars($_POST["year"], ENT_QUOTES, "utf-8");
$month = htmlspecialchars($_POST["month"], ENT_QUOTES, "utf-8");
$date = htmlspecialchars($_POST["date"], ENT_QUOTES, "utf-8");
//年別計算表をデータ化する。
$numbers = array(
1926 => [26,57,25,56,26,57,27,58,29,59,30,0],
1927 => [31,2,30,1,31,2,32,3,34,4,35,5],
1928 => [36,7,36,7,37,8,38,9,40,10,41,11],
1929 => [42,13,41,12,42,13,43,14,45,15,46,16],
1930 => [47,18,46,17,47,18,48,19,50,20,51,21],
1931 => [52,23,51,22,52,23,53,24,55,25,56,26],
1932 => [57,28,57,28,58,29,59,30,1,31,2,32],
1933 => [3,34,2,33,3,34,4,35,6,36,7,37],
1934 => [8,39,7,38,8,39,9,40,11,41,12,42],
1935 => [13,44,12,43,13,44,14,45,16,46,17,47],
1936 => [18,49,18,49,19,50,20,51,22,52,23,53],
1937 => [24,55,23,54,24,55,25,56,27,57,28,58],
1938 => [29,0,28,59,29,0,30,1,32,2,33,3],
1939 => [34,5,33,4,34,5,35,6,37,7,38,8],
1940 => [39,10,39,10,40,11,41,12,43,13,44,14],
1941 => [45,16,44,15,45,16,46,17,48,18,49,19],
1942 => [50,21,49,20,50,21,51,22,53,23,54,24],
1943 => [55,26,54,25,55,26,56,27,58,28,59,29],
1944 => [0,31,0,31,1,32,2,33,4,34,5,35],
1945 => [6,37,5,36,6,37,7,38,9,39,10,40],
1946 => [11,42,10,41,11,42,12,43,14,44,15,45],
1947 => [16,47,15,46,16,47,17,48,19,49,20,50],
1948 => [21,52,21,52,22,53,23,54,25,55,26,56],
1949 => [27,58,26,57,27,58,28,59,30,0,31,1],
1950 => [32,3,31,2,32,3,33,4,35,5,36,6],
1951 => [37,8,36,7,37,8,38,9,40,10,41,11],
1952 => [42,13,42,13,43,14,44,15,46,16,47,17],
1953 => [48,19,47,18,48,19,49,20,51,21,52,22],
1954 => [53,24,52,23,53,24,54,25,56,26,57,27],
1955 => [58,29,57,28,58,29,59,30,1,31,2,32],
1956 => [3,34,3,34,4,35,5,36,7,37,8,38],
1957 => [9,40,8,39,9,40,10,41,12,42,13,43],
1958 => [14,45,13,44,14,45,15,46,17,47,18,48],
1959 => [19,50,18,49,19,50,20,51,22,52,23,53],
1960 => [24,55,24,55,25,56,26,57,28,58,29,59],
1961 => [30,1,29,0,30,1,31,2,33,3,34,4],
1962 => [35,6,34,5,35,6,36,7,38,8,39,9],
1963 => [40,11,39,10,40,11,41,12,43,13,44,14],
1964 => [45,16,45,16,46,17,47,18,49,19,50,20],
1965 => [51,22,50,21,51,22,52,23,54,24,55,25],
1966 => [56,27,55,26,56,27,57,28,59,29,0,30],
1967 => [1,32,0,31,1,32,2,33,4,34,5,35],
1968 => [6,37,6,37,7,38,8,39,10,40,11,41],
1969 => [12,43,11,42,12,43,13,44,15,45,16,46],
1970 => [17,48,16,47,17,48,18,49,20,50,21,51],
1971 => [22,53,21,52,22,53,23,54,25,55,26,56],
1972 => [27,58,27,58,28,59,29,0,31,1,32,2],
1973 => [33,4,32,3,33,4,34,5,36,6,37,7],
1974 => [38,9,37,8,38,9,39,10,41,11,42,12],
1975 => [43,14,42,13,43,14,44,15,46,16,47,17],
1976 => [48,19,48,19,49,20,50,21,52,22,53,23],
1977 => [54,25,53,24,54,25,55,26,57,27,58,28],
1978 => [59,30,58,29,59,30,0,31,2,32,3,33],
1979 => [4,35,3,34,4,35,5,36,7,37,8,38],
1980 => [9,40,9,40,10,41,11,42,13,43,14,44],
1981 => [15,46,14,45,15,46,16,47,18,48,19,49],
1982 => [20,51,19,50,20,51,21,52,23,53,24,54],
1983 => [25,56,24,55,25,56,26,57,28,58,29,59],
1984 => [30,1,30,1,31,2,32,3,34,4,35,5],
1985 => [36,7,35,6,36,7,37,8,39,9,40,10],
1986 => [41,12,40,11,41,12,42,13,44,14,45,15],
1987 => [46,17,45,16,46,17,47,18,49,19,50,20],
1988 => [51,22,51,22,52,23,53,24,55,25,56,26],
1989 => [57,28,56,27,57,28,58,29,0,30,1,31],
1990 => [2,33,1,32,2,33,3,34,5,35,6,36],
1991 => [7,38,6,37,7,38,8,39,10,40,11,41],
1992 => [12,43,12,43,13,44,14,45,16,46,17,47],
1993 => [18,49,17,48,18,49,19,50,21,51,22,52],
1994 => [23,54,22,53,23,54,24,55,26,56,27,57],
1995 => [28,59,27,58,28,59,29,0,31,1,32,2],
1996 => [33,4,33,4,34,5,35,6,37,7,38,8],
1997 => [39,10,38,9,39,10,40,11,42,12,43,13],
1998 => [44,15,43,14,44,15,45,16,47,17,48,18],
1999 => [49,20,48,19,49,20,50,21,52,22,53,23],
2000 => [54,25,54,25,55,26,56,27,58,28,59,29],
2001 => [0,31,59,30,0,31,1,32,3,33,4,34],
2002 => [5,36,4,35,5,36,6,37,8,38,9,39],
2003 => [10,41,9,40,10,41,11,42,13,43,14,44],
2004 => [15,46,15,46,16,47,17,48,19,49,20,50],
2005 => [21,52,20,51,21,52,22,53,24,54,25,55],
2006 => [26,57,25,56,26,57,27,58,29,59,30,0],
2007 => [31,2,30,1,31,2,32,3,34,4,35,5],
2008 => [36,7,36,7,37,8,38,9,40,10,41,11],
2009 => [42,13,41,12,42,13,43,14,45,15,46,16],
2010 => [47,18,46,17,47,18,48,19,50,20,51,21],
2011 => [52,23,51,22,52,23,53,24,55,25,56,26],
2012 => [57,28,57,28,58,29,59,30,1,31,2,32],
2013 => [3,34,2,33,3,34,4,35,6,36,7,37],
2014 => [8,39,7,38,8,39,9,40,11,41,12,42],
2015 => [13,44,12,43,13,44,14,45,16,46,17,47],
2016 => [18,49,18,49,19,50,20,51,22,52,23,53],
2017 => [24,55,23,54,24,55,25,56,27,57,28,58],
2018 => [29,0,28,59,29,0,30,1,32,2,33,3],
2019 => [34,5,33,4,34,5,35,6,37,7,38,8],
2020 => [39,10,39,10,40,11,41,12,43,13,44,14],
2021 => [45,16,44,15,45,16,46,17,48,18,49,19],
2022 => [50,21,49,20,50,21,51,22,53,23,54,24],
2023 => [55,26,54,25,55,26,56,27,58,28,59,29],
2024 => [0,31,0,31,1,32,2,33,4,34,5,35],
2025 => [6,37,5,36,6,37,7,38,9,39,10,40],
2026 => [11,42,10,41,11,42,12,43,14,44,15,45],
2027 => [16,47,15,46,16,47,17,48,19,49,20,50],
2028 => [21,52,21,52,22,53,23,54,25,55,26,56],
2029 => [27,58,26,57,27,58,28,59,30,0,31,1],
2030 => [32,3,31,2,32,3,33,4,35,5,36,6]
);
//キャラクター番号表をデータ化する。
$animal = array(
1 => '長距離ランナーのチータ',2 => '社交家のたぬき',3 => '落ちつきのない猿',4 => 'フットワークの軽い子守熊',5 => '面倒見のいい黒ひょう',
6 => '愛情あふれる虎',7 => '全力疾走するチータ',8 => '磨き上げられたたぬき',9 => '大きな志をもった猿',10 => '母性豊かな子守熊',
11 => '正直なこじか',12 => '人気者のゾウ',13 => 'ネアカの狼',14 => '協調性のないひつじ',15 => 'どっしりとした猿',
16 => '子守熊のなかの子守熊',17 => '強い意志をもったこじか',18 => 'デリケートなゾウ',19 => '放浪の狼',20 => '物静かなひつじ',
21 => '落ちつきのあるペガサス',22 => '強靭な翼をもつペガサス',23 => '無邪気なひつじ',24 => 'クリエィティブな狼',25 => '穏やかな狼',
26 => 'ねばり強いひつじ',27 => '波乱に満ちたペガサス',28 => '優雅なペガサス',29 => 'チャレンジ精神の旺盛なひつじ',30 => '順応性のある狼',
31 => 'リーダーとなるゾウ',32 => 'しっかり者のこじか',33 => '活動的な子守熊',34 => '気分屋の猿',35 => '頼られるとうれしいひつじ',
36 => '好感をもたれる狼',37 => 'まっしぐらに突き進むゾウ',38 => '華やかなこじか',39 => '夢とロマンの子守熊',40 => '尽くす猿',
41 => '大器晩成のたぬき',42 => '足腰の強いチータ',43 => '動きまわる虎',44 => '情熱的な黒ひょう',45 => 'サービス精神旺盛な子守熊',
46 => '守りの猿',47 => '人間味あふれるたぬき',48 => '品格のあるチータ',49 => 'ゆったりとした悠然の虎',50 => '落ちこみの激しい黒ひょう',
51 => '我が道を行くライオン',52 => '統率力のあるライオン',53 => '感情豊かな黒ひょう',54 => '楽天的な虎',55 => 'パワフルな虎',
56 => '気どらない黒ひょう',57 => '感情的なライオン',58 => '傷つきやすいライオン',59 => '束縛をきらう黒ひょう',60 => '慈悲深い虎',
);
//生年月日から、年別換算表の数値を取得する。
$number = $numbers[$year][$month-1];
//生まれた日付を足す。
$number += $date;
//60を超えている場合は -60 する。
$number = $number > 60 ? $number -60 : $number;
//最終結果を元に動物を表示する。
echo "あなたは ".$animal[$number]." です。";
}
?>最後の$numberが計算結果です。
今回はそのまま文字を出力しましたが、（別途画像の表示やデザインの調整は行いました。）
占い結果のURLを分岐させても良いと思います。
まとめ
特に難しい点はないと思います。
ポイント
・POSTして受け取るデータは必ずエスケープして用いる。
・年別計算表やキャラクター番号表は、連想配列に入れると便利。
動物占い以外の占いツールについても、
ロジックがわかれば同じように制作することが出来ます。
制作の依頼はこちら
今回ご紹介したシステムなど、
WEB上にシステムを実装したい場合は弊社におまかせください。
簡単なシステムなら１件¥3,000（税別）から承ります。
相場よりも費用を抑えて対応させていただくことが可能ですので、
以下のフォームから相談内容を記入して気軽にご連絡ください。