ペンギン超選挙をグラフで振り返ろうじゃないか2018

##はじめに
こちらはクソアプリ2 Advent Calendar2018 12月20日の投稿です。
もう40個もクソアプリが発表されているとは、ゾクゾクしますね！

クソアプリ
クソアプリ2

##何を作ったか
「「LOVE推しペン超選挙」の各ペンギンのフォロワー数をグラフ化するだけのクソアプリ」
作りました。

推しペンの順位を見るだけのアプリ

推しの順位って気になりますよね。

個人的にデータを取っていたので、日本に2名くらいいそうな、推しペン過激派の方のために
グラフ化してみようと思いました。

※推しペン超選挙とは？な方はこちらをご確認ください。
LOVE推しペン超選挙(すみだ水族館)
LOVE推しペン超選挙(京都水族館)

###使用したもの
今回以下を試してみました。

• 使用したことのないグラフ用ライブラリを使ってみる
  　使用したもの→ C3.js
• 軽くVue.jsを使って見る

###ペンギンデータのグラフ化
今回は以下のようなグラフを描画します。
データはjson形式で自前のペンギンデータAPIから取ります。

####C3.jsを使用する
CDNが無いため、C3.js公式サイトからダウンロードして読み込みます。
D3.jsをベースにしているとのことで、D3.jsも併せて読み込みます。

index.html

<!-- Load c3.css -->
<link href="/path/to/c3.css" rel="stylesheet">

<!-- Load d3.js and c3.js -->
<script src="/path/to/d3.v5.min.js" charset="utf-8"></script>
<script src="/path/to/c3.min.js"></script>

グラフ描画用にdivを用意します。

index.html

<div id="chart"></div>

app.js

DrawPenguinChart(t_pen) {
    setTimeout(function() {
         /*
        取得するjsonデータの例
        {
         "follower":"483","522","553",...],
         "datetime":"2018/10/20/00:00","2018/10/21/00:00","2018/10/22/00:00",...],
         "rank":[7,6,6,...]
        }
        */

        var chart = c3.generate({
            bindto: '#chart',
            data: {
                x: 'datetime',
                xFormat: '%Y/%m/%d/%H:%M',     //x軸に使用する値のフォーマット(日付として認識させるために指定)
                url: 'https://path/to/api.php',
                mimeType: 'json',
                type: 'bar',       //フォロワーは棒グラフで表示
                types: {
                    'rank': 'line' //順位はラインで表示
                },
                axes: {
                    follower: 'y',
                    rank: 'y2'
                },
                labels: true,
                colors: {
                    'follower': '#b8e6e6',
                    'rank': '#708090'
                }
            },
            axis: {
                x: {
                    type: 'timeseries',
                    tick: {
                        culling: {
                            max: 10
                        },
                        format: '%m/%d',     //x軸に表示する値のフォーマット
                    }
                },
                y: {
                    label: 'フォロワー数',
                    max: 1600
                },
                y2: {
                    label: '順位',
                    show: true,
                    inverted: true,          //trueにすると縦軸の値が逆順になる(上から1～)
                    min: 1,
                    max: 22
                }
            },
            size: {
                height: 300
            }
        });
    }, 1000);
}

C3.jsは、公式サイトのExampleを見て感覚的に使用できました。
説明が短く図とコードを見れば動かせるよう工夫されているのかなと思いました。

###ハマったところ
####Vue.jsでInstagramの埋め込みコードがうまく表示できない
枠は表示されるのですが、肝心の天使(ペンギン)が表示されません…

表示されない時(v-ifを使用)

ng

<div v-if="target=='edocco'">ここにInstagramの埋め込みコード</div>

表示できた時
v-showを使用すれば埋め込みコードも表示されるようです。

ok

<div v-show="target=='edocco'">ここにInstagramの埋め込みコード</div>

公式サイト v-if vs v-show

v-if は 遅延描画 (lazy) です。 初期表示において false の場合、何もしません。条件付きブロックは、条件が最初に true になるまで描画されません。

一方で、v-show はとてもシンプルです。要素は初期条件に関わらず常に描画され、シンプルな CSS ベースの切り替えとして保存されます。

##感想
そうだ、京都、行こ…！(水族館的な意味で)

総選挙中は、「マゼランペンギン(すみだ水族館)」と「ケープペンギン(京都水族館)」の
代理戦争だわ…！と思いましたが、露出の差か、すみだ水族館のペンギン達のフォロワー数が圧倒的でした。

マゼランペンギン推しの皆さん、ケープペンギンも、いいぞ。

クリスマスも近いので、お近くの方は京都水族館でペンギンを見れば良いと思います！