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

##はじめに
こちらは[クソアプリ2 Advent Calendar2018 12月20日](https://qiita.com/advent-calendar/2018/kuso-app2)の投稿です。
もう40個もクソアプリが発表されているとは、ゾクゾクしますね！

[クソアプリ](https://qiita.com/advent-calendar/2018/kuso-app)
[クソアプリ2](https://qiita.com/advent-calendar/2018/kuso-app2)

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

[推しペンの順位を見るだけのアプリ](https://penguin-mall.com/get_penguin/)


![result.png](https://qiita-image-store.s3.amazonaws.com/0/177998/e25ee98c-ea59-a418-4cbb-6c58f0170979.png)




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

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


※推しペン超選挙とは？な方はこちらをご確認ください。
[LOVE推しペン超選挙(すみだ水族館)](https://www.sumida-aquarium.com/oshipen/)
[LOVE推しペン超選挙(京都水族館)](https://www.kyoto-aquarium.com/oshipen/)


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

- 使用したことのないグラフ用ライブラリを使ってみる
　使用したもの→ [C3.js](https://c3js.org/)
- 軽くVue.jsを使って見る


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

![chart_sample.png](https://qiita-image-store.s3.amazonaws.com/0/177998/72074189-c0e9-efe8-1e78-ab78ecd63d0f.png)


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


```html: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を用意します。

```html:index.html
<div id="chart"></div>
```


```javascript: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](https://c3js.org/examples.html)を見て感覚的に使用できました。
説明が短く図とコードを見れば動かせるよう工夫されているのかなと思いました。




###ハマったところ
####Vue.jsでInstagramの埋め込みコードがうまく表示できない
枠は表示されるのですが、肝心の天使(ペンギン)が表示されません…
![v-if-insta.png](https://qiita-image-store.s3.amazonaws.com/0/177998/ec2b5a30-3247-fe52-005d-2cf136cd7276.png)

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

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


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

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

[公式サイト v-if vs v-show](https://jp.vuejs.org/v2/guide/conditional.html#v-show)

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

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


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

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

![result2.png](https://qiita-image-store.s3.amazonaws.com/0/177998/6200c87f-d5ca-1878-1db9-bd7982cdc671.png)


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

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