Python
jQuery
Flask
python3
HTML,CSS

ゲーミングPCのパーツ選びに役立つサイトを作ってみた

はじめに

自作初心者がゲーミングPCを組む時に、パーツ選びで苦戦することが本当に多いため(自分もそうでした)少しでも楽にパーツを選べたらいいなと思って作ってみました。(まだ未完成ですが...)

サイト紹介

ゲーミングPCっぽいデザインにしてみました。
Gaming PC Picker
IMG_20180712_140505.png

サイトタイトルがまだ仮なので独自ドメインなどはまだ取得していません。

また現在herokuの無料枠ですので快適に使用することができないかもしれません。

特に30分アクセスがないとsleep状態になるため30分アクセスがなかったあとに、アクセスするとherokuがsleepから覚めるまで待つ必要があるので非常に読み込みが遅くなります。

開発環境

Windows10
Python3、flask、Beautifulsoupなど

使い方

最初に遊びたいゲームを選ぶ(必ず選んでください 特に遊びたいゲームがない場合、ゲームなし の選択肢もあります)と、選んだゲームが要求するスペックに応じてCPU、GPU、メモリのセレクトボックスの選択肢が変化します。

またCPU、メモリを選ぶことでマザーボードのセレクトボックスの選択肢が変化します。マザーボードを選ぶことでPCケースの選択肢が...といったように選んだパーツに応じて、他のパーツの選択肢がそれに合ったものを表示するように変化します。

PCパーツ選びの際に何かと面倒な規格合わせの手間を短縮してくれます。

開発にあたって

パーツの情報はPythonとBeautifulsoupを使って価格.comさんから情報をスクレイピングしています。

BeautifulSoupで日本語のテキストを抽出したとき、文字化けが起こって大変だったのですが、chardetライブラリをインストールし、BeautifulSoupにRequestsライブラリで取得したHtmlデータを渡す際にResponseオブジェクトのtextプロパティではなくcontentプロパティを使うことで文字化けを解決できました。
参考: 2017-01-09 RequestsとBeautiful Soupでのスクレイピング時に文字化けを減らす

scraping.py
html = requests.get(url).content #ここの.contentの部分
bs0bj = BeautifulSoup(html,"html.parser")

パーツの情報はすべて読み込んでおりパーツを選んだ時の他パーツの選択肢の表示変更はJavascript(JQuery)を用いて表示非表示を切り替えているという感じです。

デザイン面で工夫した点としては、ゲーミングPCっぽい雰囲気を出すことです。

style.css
body{
  color:#00FF00;
  background-color: black;
  text-shadow: 0 0 25px #2EFE2E, 0 0 20px #2EFE2E, 0 0 0.40px #2EFE2E;
  border: solid #00FF00;
  box-shadow: 0 0 20px #2EFE2E, 0 0 15px #2EFE2E, 0 0 0.35px #2EFE2E;
  max-width: 100%;
}

背景を暗くし、CSSのshadowを用いて、テキストや枠線に用いた色より明るい色で影を付けることでゲーミングPCっぽい光った感じを出しています。

開発で躓いた点

当初はセレクトボックス内でゲームの推奨要求スペックを満たすパーツを青色で、最低要求スペックは満たすが推奨要求スペックを満たさないパーツを赤色で表示するようにしていたのですが、スマホ表示したときに色が反映されないことがわかりました。
またスマホ版だと画面の小ささから文章が画面に収まりきらず苦い思いをしました。
これに関してはCSSを用いて

style.css
@media (max-width: 768px) {
  html{
    font-size: 45%;
  }
}

とすることでmax-width、つまり最大横幅が768px以下、つまりスマホサイズの画面では文字の大きさを45%に縮小することでスマホでも自然なデザインになりました。

改善したい点

・パーツ表示に関して、セレクトボックスではパーツの名前しか選択肢に表示できず、価格などの他の情報がパーツ一覧からわからず少し使いにくいため別の表示方法を検討中
・ソート機能の追加

終わりに

ここはこうしたらいいんじゃないかと思う点があったらコメントください。