アプリランキングを作ろう～ランキング表示編(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-Lab)

毎日ダラダラゆらゆらと過ごす大学生のめんどくさがりなブログ。

アプリランキングを作ろう～ランキング表示編(HTML/CSS)～

【概要】

【開発】

出力例