【PSYCHO-PASS風】おみくじサイトを作りました【開発方法紹介】

Art Programming

こんにちはナンブです。今回は2020年1月につくったおみくじサイトをついてはなしていきます。
アニメPSYCHO-PASSが好きでおもいきってつくってみたものなので、まとめんのをわすれてたのでここにかいときます。

スポンサーリンク

サービスの説明

アナタの色相がわかっちゃいます(笑)
2020年に制作したおみくじサイトです。おみくじの種類として、大吉、中吉、小吉、吉、凶、大凶を犯罪係数式で判定します。PSYCHO-PASSシリーズでおなじみのキャラが一言アナタにことばなげかけてくれます。しってるひとしらないひとでも関係なく、お暇な方はやってみてください。

※犯罪係数:犯罪を犯すかどうかを判断する数値。0~99までは正常値であるが100を超えると潜在犯となり、更生施設に隔離される。300をこえると殺処分領域に入り、公安局刑事課が所持している銃<ドミネーター>で執行される(こ〇される)

開発方法を軽くまとめ

開発環境 

XAMPP ザンプですね。これをつかいました。

デザイン

背景の赤はお正月という感じで紅白の紅にして、
餅と着物を着たキャラをだしてお正月っぽさを出しました
イラストはいちから自分で描きました!

ツール:ClipStudio Paint EX

アニメPSYCHO-PASSシリーズでおなじみのキャラを4名描いた感じです。
知らないかたむけに説明すると

軽いあらすじ

人間の心理状態などが数値化されて計測できる社会。犯罪係数が規定値を逸脱すると潜在犯となり隔離。住民のメンタルケアや生活管理のほか各省庁のトップに君臨している厚生省の巨大監視ネットワーク シビュラシステムによって管理されている2112年の日本が舞台となってます。その管理社会で潜在犯の確保などを行う厚生省の公安局刑事課の方たちの活躍と奮闘を描く話です

常守朱、狡噛慎也、霜月美佳、宜野座伸元という四名のキャラがでてきます

ちなみにUNEXTでみれます。一番アニメをみることができるサイトですね
アニメ観るなら<U-NEXT>

コーディング

Sublime Text3:現在はVisual Studio Codeを使ってます。変えた理由として、このツールの情報が豊富でエンジニアにとって便利でコスパがいいからですね

サーバー

Xserverを使用(有料ですが、王道です)
お名前ドットコム

Codeを公開&解説

おみくじサイト【PSYCHO-PASS風】
解説というまでではないですが以下の通り↓

CODE

  • HTML
  • CSS
  • JavaScript【超難関 ググって解決しました】

おみくじサイトCODEです
JSに関してはいちからコードを入力したわけでなく、
元の記事はなにを参考にしたか覚えてないので、元の外部記事が紹介できない感じですがご了承を(涙)すみません・・・エンジニアとしてのミスですね
以上ですね。

おみくじサイトでちょこっと運勢占いした方が暇つぶしに使ってみてください(笑)



スポンサーリンク