アプリランキングを作ろう～ランキング表示編(HTML/CSS)～
こんにちは！
Roji(ろじ)です！
今回は、アプリランキング作成の続きで、
保存したランキングをHTMLで表示していきます。
この記事では、僕が開発した流れを説明します。
プログラムの」詳しい解説等は行いません。
ご了承ください。
【概要】
前回出力したランキングデータはCSVファイルに保存されています。
今回は、CSVファイルからデータを読み込み、
HTMLに表示します。
ファイルの読み込みにはJavaScriptを使用しています。
【開発】
まずは、HTMLを記述します。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8”>
<title>アプリランキング</title>
</head>
<body>
<ul id=”data-list”>
</ul>
<input type=”file” id=”file” name=”file”>
<script type=”text/javascript” src=”script.js”></script>
</body>
</html>HTMLは特に特殊なことをしておらず、
ランキング表示用に「ulタグ」に「data-list」というIDをつけています。
この「ulタグ」内に、ランキングが入るようにJavaScriptを書いていきます。
「inputタグ」で今回作成したCSVファイルを読み込ませます。
最後にJavaScriptを呼び出しています。
今回は、「script.js」という名前でファイルを作っています。
次にJavaScriptを書いていきます。
まず、CSVを読み込みます。
var appList = []; var file = document.getElementById(‘file’); if(window.File && window.FileReader && window.FileList && window.Blob) { function loadLocalCsv(e) { var fileData = e.target.files[0]; var reader = new FileReader(); reader.onload = function() { var cols = reader.result.split(‘\n’); for(var i = 0; i < cols.length; i++) { appList[i] = cols[i].split(‘,’); } } reader.readAsText(fileData); } file.addEventListener(‘change’, loadLoacalCsv, false); } else { file.style.display = ‘none’; result.innerHTML = ‘File APIに対応していません。’; }
これで、CSVに保存したランキングデータを「appList」に格納できます。
var file = document.getElementById(‘file’);
HTMLの方で、「inputタグ」に「file」というIDを付けたので、
そのIDを指定します。
if(window.File && window.FileReader && window.FileList && window.Blob)
ここで、File APIに対応しているかどうかを確認しています。
reader.onload = function() { var cols = reader.result.split(‘\n’); for(var i = 0; i < cols.length; i++) { appList[i] = cols[i].split(‘,’); } }
ここでは、読み込んだファイルから、改行コードを外し、
「appList」にデータを入れています。
file.style.display = ‘none’; result.innerHTML = ‘File APIに対応していません。’;
もし、File APIに対応していない場合は、そのことを伝えます。
次に、読み込んだデータをHTMLの形にしていきます。
function createList() { for(var i = 0; i < 10; i++) { var li_element = document.createElement(‘li’); var appTitle_element = document.createElement(‘h2’); var div_element = document.createElement(‘div’); var img_element = document.createElement(‘img’); var h2_element = document.createElement(‘h2’); appTitle_element.textContent = “第” + (i + 1) + “位”; img_element.src = “画像が保存されているパス/Image” + appList[1][i] + “.png”; h2_element.textContent = appList[0][i]; appTitle_element.className = “ranking-point”; div_element.className = “app-container”; li_element.appendChild(appTitle_element); li_element.appendChild(div_element); div_element.appendChild(img_element); div_element.appendChild(h2_element); document.getElementById(“data-list”).appendChild(li_element); } }
これで、HTMLの形を作り、ランキングデータを格納できます。
var li_element = document.createElement(‘li’); var appTitle_element = document.createElement(‘h2’); var div_element = document.createElement(‘div’); var img_element = document.createElement(‘img’); var h2_element = document.createElement(‘h2’);
ここでは、必要なHTMLタグを作成しています。
appTitle_element.textContent = “第” + (i + 1) + “位”; img_element.src = “画像が保存されているパス/Image” + appList[1][i] + “.png”; h2_element.textContent = appList[0][i];
ここでは、作成したタグに必要なデータを格納しています。
「appTitle_element」には、順位を入れています。
「img_element」には、画像を入れています。
今回の画像は「Image0.png」「Image1.png」．．．
というように保存しているので、「appList[1][i]」で画像番号を指定しています。
「h2_element」には、アプリタイトルを入れています。
li_element.appendChild(appTitle_element); li_element.appendChild(div_element); div_element.appendChild(img_element); div_element.appendChild(h2_element);
ここでは、それぞれを入れ子にして、HTMLに適応させています。
今回は、
「li > div > img, h2」
のような入れ子にしています。
document.getElementById(“data-list”).appendChild(li_element);
最後に、HTMLの方で指定していた「ulタグ」に入れていきます。
出力例
これで、アプリランキングが完成しました。
ここまで、調べながらなんとか形にできました。
作ってみて思ったことなどは、
別の記事で書きたいと思います。
以上！
アプリランキングを作ろう～ランキングリスト作成編～
こんにちは！
Roji(ろじ)です！
今回は、アプリランキングの続きで、
抽出したデータにポイントを割り振り、
ソートするところまでやってきます。
この記事では、僕が開発した流れを説明します。
プログラムの詳しい解説等は行いません。
ご了承ください。
【概要】
ランキング用のデータは、
「アプリタイトル、ポイント、画像番号」
のリストで扱っていこうと思います。
CSVファイルに保存したタイトルを、
重複なしで、リストに格納し、
対応するアイコン画像の番号を割り振ります。
リストが完成したら、
ポイントの大きい順にソートして完成です。
【開発】
まず、CSVに保存したアプリタイトルをリストに格納します。
import csv
path = 'CSVファイルを保存したパス'
app_list = []
title_list = []
with open(path + 'AppTitle.csv', encoding='utf_8_sig') as f:
reader = csv.reader(f)
for i in csv.reader(f):
app_list.append(i)
for i in app_list:
for j in i:
title_list.append(j.replace('\n', ''))これで、CSVファイルからリストを生成できます。
「app_list」は、CSVファイルから直接読み込んだアプリタイトル用のリスト、
「title_list」は、「app_list」を成形したデータを格納するためのリスト
として、使用しています。
with open(path + 'AppTitle.csv', encoding='utf_8_sig') as f:
reader = csv.reader(f)
for i in csv.reader(f):
app_list.append(i)ここは、前回の書き込みの逆です。
指定したパスのCSVファイルを読み込んでます。
ファイル内のすべてのデータを「app_list」に格納しています。
for i in app_list:
for j in i:
title_list.append(j.replace('\n', ''))データをそのまま格納した「app_list」には、
改行コードが付いていたりするので、
ここで改行コードを外し、1次元リストに成形しています。
次に、ランキング用のリストを作っていきます。
リストの中身は、
「アプリタイトル、ポイント、画像番号」
にします。
rank_list = []
count = 0
for i in title_list:
f = False
for j in rank_list:
if i == j[0]:
j[1] = j[1] + 10 - count % 10
f = True
break
if not(f):
rank_list.append([i, 10 - count % 10, count])
count += 1これで、リストに
「アプリタイトル、ポイント、画像番号」
の順にリストを生成できます。
rank_list = [] count = 0
ここでは、ランキング格納用に「rank_list」を作り、
画像番号と関連付ける「count」を初期化しています。
今回のプログラムでは、
アイコン画像は「Image0」「Image1」．．．
と、保存されているので、画像のファイル名に記載されている番号と、
CSVファイルのタイトルの順番が同じになっています。
これを利用して、アプリタイトルとアイコン画像を紐づける作戦です。
f = False
for j in rank_list:
if i == j[0]:
j[1] = j[1] + 10 - count % 10
f = True
break最初の「f」は重複フラグを意味しています。
アプリタイトルの重複を確認するために用意しています。
ここのループは、すでに生成されたランキング用のリストの中に、
重複タイトルがあるかどうかを確認しています。
このときの「i」には、アプリタイトルリストの中のタイトルが１つ入っています。
そのタイトルと、ランキングリストのタイトルの部分と比較し、
同じタイトルがあった場合、ポイントを加算します。
ポイントは、1位が10ポイント、2位が9ポイント．．．となるようにしています。
重複タイトルがあった場合、フラグを建てて、新規のタイトルでないことを示します。
if not(f):
rank_list.append([i, 10 - count % 10, count])ループを抜けた後、
もし、重複フラグが建っていない場合、新規のタイトルということになるので、
ランキングリストに追加します。
ランキング用のリストが生成できたので、
そのリストをポイントでソートします。
import pandas as pd
df = pd.DataFrame(data=rank_list, columns=["Title", "Points", "Image"])
df = df.sort_values("Points", ascending=False)今回、ソートは「pandas」を利用します。
「Points」でソートします。
これで、ソートが完了しました。
ソートしたリストを整えます。
list = df.values
re_list = [[0 for in range(10)] for j in range(2)]
for j in range(10):
re_list[0][j] = list[j][0]
re_list[1][j] = list[j][2]これで、リストの成形が完了しました。
最後に、完成したリストをCSVファイルとして書き出します。
with open(path + "RankingData.csv", "w", newline="", encoding='utf_8_sig') as f:
writer = csv.writer(f)
writer.writerows('ランキングリスト')CSVファイルへの出力は、サイトからデータを抽出したときと同じです。
これで、ランキングリストを出力できました。
今回目標としていたことは完了できました。
次回は、ランキングを表示するところまでいきます。
以上！
【ソース】
import csv
import pandas as pd
def MakeRanking():
path = 'CSVファイルを保存したパス'
app_list = []
title_list = []
with open(path + 'AppTitle.csv', encoding='utf_8_sig') as f:
reader = csv.reader(f)
for i in csv.reader(f):
app_list.append(i)
for i in app_list:
for j in i:
title_list.append(j.replace('\n', ''))
rank_list = []
count = 0
for i in title_list:
f = False
for j in rank_list:
if i == j[0]:
j[1] = j[1] + 10 - count % 10
f = True
break
if not(f):
rank_list.append([i, 10 - count % 10, count])
count += 1
df = pd.DataFrame(data=rank_list, columns=["Title", "Points", "Image"])
df = df.sort_values("Points", ascending=False)
list = df.values
re_list = [[0 for in range(10)] for j in range(2)]
for j in range(10):
re_list[0][j] = list[j][0]
re_list[1][j] = list[j][2]
with open(path + "RankingData.csv", "w", newline="", encoding='utf_8_sig') as f:
writer = csv.writer(f)
アプリランキングを作ろう～データ抽出編(BeautifulSoup)～
こんにちは！
Roji(ろじ)です！
今回は、前回計画したアプリランキングの作成に取り掛かっていきます。
最初は、ランキングデータの抽出です。
【概要】
データの抽出には「BeautifulSoup」を使用していきたいと思います。
今回は、アプリのタイトルとアイコン画像を抽出します。
そのために、サイトのURLとそれぞれを囲むHTMLタグで指定します。
取得したタイトルはCSVファイルに記述し、
アイコン画像は指定ファイルに保存します。
この記事では、僕が開発した流れを説明します。
プログラムの詳しい解説等は行いません。
ご了承ください。
【開発】
まず、データを抽出したいサイトのHTMLを取得します。
import requests
from bs4 import BeautifulSoup
html = requests.get("サイトのURL")
soup = BeautifulSoup(html.content, "html.parser")このように記述し、HTMLを取得します。
その後、取得したHTMLの中の欲しいタグのクラス名やID名を指定します。
element_data = soup.select("取得したいタグ")
今回はHTML内のアプリタイトルとアイコン画像を取得したいので、
それらが含まれるタグのクラス名やID名を指定します。
element_data = soup.select("アプリタイトルのタグ")
img_data = soup.select("アイコンのタグ")これで、取得したHTMLから、
アプリタイトルとアイコン画像が含まれるタグを取得することができました。
次は、取得したアプリタイトルとアイコンを保存していきます。
今回は上位10位のアプリタイトルとアイコンを取得します。
import csv
save_path = 'データ保存用パス'
data_list = list(range(10))
for i in range(10):
data_list[i] = element_data[i].text
img_src = img_data[i].get('src')
re = requests.get(img_src)
with open(save_path +"Image" + f'{i}' + '.' + 'png', 'wb') as f:
f.write(re.content)
with open(save_path + "AppTitle.csv", "a", newline="", encoding='utf_8_sig') as f:
writer = csv.writer(f)
writer.writerow(data_list)これで、データ保存用パスにアプリタイトルとアイコンを保存できます。
data_list[i] = element_data[i].text
上のように記述し、
「data_list」に、取得してきたタイトルが含まれるタグ内のテキストを格納します。
img_src = img_data[i].get('src')
re = requests.get(img_src)アイコンのタグの「src」からアイコン画像を取得します。
with open(save_path +"Image" + f'{i}' + '.' + 'png', 'wb') as f:
f.write(re.content)今回、
「Image0.png」「Image1.png」．．．
のようにアイコンを保存していきます。
あらかじめ「save_path」にデータを保存したいパスを指定しているので、
上のように記述することで、
取得した画像を、指定パスに指定した名前で保存できます。
with open(save_path + "AppTitle.csv", "a", newline="", encoding='utf_8_sig') as f:
writer = csv.writer(f)
writer.writerow(data_list)アプリタイトルを10個取得した後、
アイコン画像と同じ要領で指定したパスに保存していきます。
今回、CSVファイルに保存するので、CSVファイルを開きます。
複数のサイトのデータを取得することを考え、追記モードで開いています。
これで、アプリタイトルとアイコン画像を、指定したファイルに保存できました。
ということで、
今回目標としていたことは達成できました。
次回は、抽出したデータにポイントを割り振り、
ソートするところまで進めようと思います。
以上！
【今回のソース】
import requests
from bs4 import BeautifulSoup
import csv
def ScrapingApp():
save_path = ‘データ保存用パス’
data_list = list(range(10))
for i in range(10):
data_list[i] = element_data[i].text
img_src = img_data[i].get(‘src’)
re = requests.get(img_src)
with open(save_path + “Image” + f’{i}’ + “.” + ‘png’, ‘wb’) as f:
f.write(re.content)
with open(save_path + “AppTitle.csv”, “a”, newline=””, encoding=’utf_8_sig’) as f:
writer = csv.writer(f)
writer.writerow(data_list)
アプリランキングを作ろう～計画編～
こんにちは！
Roji(ろじ)です！
【はじめに】
高校生の頃は、色々なアプリゲームに触れていましたが、
大学生になってから、
あまり触れることが格段に減っていました。
最近、改めて新しいアプリゲームに触れてみようと思いました。
そこで、どんなゲームがあるのか探すために、
様々なランキングサイトを見ました。
その中で、ランキングサイトによって、
書かれてるアプリが全く違うことがあることに気づきました。
また、AppStoreやGooglePlayのランキングも、
web広告でよく見かけるものが首位を独占していることもありました。
そこで、色々なランキングサイトのランキングを統合して、
表示できたら、ゲームアプリ探しが楽になると思いました。
ということで今回は、
色々なランキングサイトからランキングを取得して、
統合するプログラムを組んでいこうと思います。
【概要】
①ランキングサイトからランキングの情報を抽出します。
②抽出したランキングデータに、順位ポイントを振ります。
③全体のポイントが高い順にソートして新しいランキングを作ります。
④最後にランキングを表示して終了。
という流れです。
とはいえ、ランキングの基準などもサイトによって異なるとは思いますので、
このランキングの作り方が正しいとは思えませんが、
プログラミングの勉強という意味も込めて、この手法で進めていこうと思います。
実際の開発は次回から行っていこうと思います。
言語はPython。
ランキングデータの取得にはBeautifulSoupを使用するつもりです。
ランキングの表示はとりあえずHTMLで書きます。
特にサーバーなどにデプロイする予定はなく、
自分用としてローカルな開発をしていきます。
というわけで、次回から開発に入っていこうと思います。
以上！
アプリランキングを作ろう！
こんにちは！
Roji(ろじ)です！
高校生の頃は、色々なアプリゲームに触れていましたが、
大学生になってから、
あまり触れることが格段に減っていました。
最近、改めて新しいアプリゲームに触れてみようと思いました。
そこで、どんなゲームがあるのか探すために、
様々なランキングサイトを見ました。
その中で、ランキングサイトによって、
書かれてるアプリが全く違うことがあることに気づきました。
また、AppStoreやGooglePlayのランキングも、
web広告でよく見かけるものが首位を独占していることもありました。
そこで、色々なランキングサイトのランキングを統合して、
表示できたら、ゲームアプリ探しが楽になると思いました。
ということで今回は、
色々なランキングサイトからランキングを取得して、
統合するプログラムを組んでいこうと思います。
概要
①ランキングサイトからランキングの情報を抽出します。
②抽出したランキングデータに、順位ポイントを振ります。
③全体のポイントが高い順にソートして新しいランキングを作ります。
④最後にランキングを表示して終了。
という流れです。
とはいえ、ランキングの基準などもサイトによって異なるとは思いますので、
このランキングの作り方が正しいとは思えませんが、
プログラミングの勉強という意味も込めて、この手法で進めていこうと思います。
実際の開発は次回から行っていこうと思います。
言語はPython。
ランキングデータの取得にはBeutifulSoupを使用するつもりです。
ランキングの表示はとりあえずHTMLで書きます。
特にサーバーなどにデプロイする予定はなく、
自分用としてローカルな開発をしていきます。
というわけで、次回から開発に入っていこうと思います。
以上！
