ZawaWorks’s diary

プログラミング技術メモ

標高からきんモザのアリスちゃんを探してみた

JavaScript WebAPI Webサービス gif

はじめに

今回は大学のプログラミング授業で「APIを使ってWebサービスを作ろう」という課題で自分が提出した作品について語ろります。

Webサービスの説明

左にある地図をタップするとそこの標高が取得され、その標高に合わせてアニメ「きんいろモザイク」のアリスちゃんのgif画像を表示します。

f:id:ZawaWorks:20171206032036p:plain

完成図

youtu.be

試したブラウザ

使用したAPI

プログラムの仕組み

1.緯度・経度を取得

Yahoo！JavascriptマップAPIを使い地図の表示と、そこをタップした座標（緯度・経度）の取得に使いました。

html

 <script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=[ここにapikeyを入れる]"></script>
 <div id="map"></div>

Javascript

 var ymap = new Y.Map("map");

//地図の表示
    ymap.drawMap(new Y.LatLng(35.36055, 138.72777), 15, Y.LayerSetId.NORMAL);//緯度・経度は富士山を基準の座標に指定

//緯度・経度を取得するメゾット
 ymap.bind('click', function (latlng) {
console.log("緯度:" + latlng.lat() + ",経度:" + latlng.lng());
});

2,標高の取得

国土地理院が提供している標高APIは緯度・経度を入力すればそこの標高を返してくれます。

var URL = "http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=" +[経度]+ "&lat=" + [緯度] + "&outtype=JSON"
        
$.getJSON(URL, function (response) {
console.log(response.elevation.);//標高を表示
})

3.きんモザAPIを叩く

きんモザAPIはきんいろモザイクのアリスちゃんのgif画像を返してくれるAPIです。一話から十二話までの話数を指定する「ep」とその中で何番目のgif画像を指定するかという「no」を指定するとgif画像を返してくれます。

<iframe id="gif"></iframe>

    var gif_url = 'http://mogashi.com/alice/?ep=' + ep + '&no=' + no;
        document.getElementById('gif').src = gif_url;

4.APIを組み合わせる

大雑把な流れは緯度・経度の取得->標高の取得->標高から「ep」、「no」を指定してgif画像を呼び出すです。 「ep」は標高を300で割った値にして、「no」は十の位と一の位を4で割った値にしている。

最終的なコード

index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>

<body>
    <div style="width:1020px; display:table;">
        <div id="map" style="width:600px; height:300px;display: table-cell;"></div>

        <div style="width:600px; display:table-cell;">
            gif画像
            <br><br>
            <iframe id="gif" src="http://mogashi.com/alice/?ep=2&no=50" name="gif" width="500" height="300"></iframe>
        </div>
    </div>
    好きなところにクリックしてね
    <script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=[ここにapikeyを入れる]"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>

</html>

main.js

window.onload = function () {
    var ymap = new Y.Map("map");
    ymap.drawMap(new Y.LatLng(35.36055, 138.72777), 15, Y.LayerSetId.NORMAL);

    ymap.bind('click', function (latlng) {
        var URL = "http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=" + latlng.lng() + "&lat=" + latlng.lat() + "&outtype=JSON"
       
 $.getJSON(URL, function (response) {
            console.log(response.elevation);
            var ep = Math.floor(response.elevation / 300);
            var no = Math.floor((response.elevation - Math.floor(response.elevation / 100) * 100) / 4);
            AliceGif(ep, no);
        })
    });

    //アリスちゃんのgif画像を返してくれる関数
    function AliceGif(ep, no) {
        if (ep < 1) ep = 1;
        if (ep > 12) ep = 12;
        var gif_url = 'http://mogashi.com/alice/?ep=' + ep + '&no=' + no;
        document.getElementById('gif').src = gif_url;
    }

}

おわりに

我ながら意味不明なWebサービスを作ってしまったと思っています……。ただこれによりどんなgif画像が見つかるか予測することが難しいため、未知との遭遇を演出できるのではないでしょうか？今回紹介したAPIやそのソースコードが何かの役に立てたなら光栄です。