Annict API の実装メモ

アニメ番組管理の自分用Webアプリとか作れないかな。（ぼんやり。）
新アニメとか、とりあえず１話見てみるってのが多いからな。
スタート直後はタイトルだけ見ても見てたかどうか分からんことが多いし。。

アニメ番組情報を取れそうなAPI

　・annict.js
　・ShangriLa Anime API Server
　・しょぼいカレンダー(json.php)

Annict API（Annict.js） サインインできない
Annictは個人開発っぽい。番組表を自分で管理できるWebアプリの模様。そのままでも使えそう？
ただ、、メールアドレスを入れて「Send」してもメールが届かない？サインインできない。意味不明。
　※追記：かなり遅れてメールが届いた。（時間帯？）

ShangriLa Anime API Server
APIの仕様も使いやすそう。ただ放送時間は取れない。基本情報のみ。

しょぼいカレンダー(json.php)
オタク系番組表。仕様が分かり辛い。放送時間を取れそうだけどxml形式。
　・タイトル取得（例）：http://cal.syoboi.jp/json.php?Req=TitleLarge
　・番組時間取得（例）：http://cal.syoboi.jp/db.php?Command=ProgLookup&TID=5766

実装

エラー１：CodePenではformタグは使えない。
　
エラー２：axios読み込み忘れ。CodePen「Settings」の"JS"タブから追加。

リンク先Webページのサムネイル表示したい

link-prevueライブラリ
　title、descriptionでサイトカードを生成しているっぽい。
　・リンクのプレビュー機能を「link-prevue」を使って実装する
　・link-prevue -GitHubリポジトリ
　※上手く取得できないサイト多数。説明に表示された言語もバラバラだったので利用見送り。

LinkPreview API
　URLからサイトサムネイル画像のURLや簡単な説明を返してくれそう。よさげ。
　・LinkPreview
　※エラー423が返される場合がある。（リクエスト先Webページで拒否される場合。）
　※エラー429が返される場合がある。（リクエスト上限がかなり低いっぽい。）

そもそもWebページの画像って？OGPイメージなのでは？
　APIだとなんか微妙なので、OGPイメージを取ればよいって考え方にシフト。
　※取得はうまいことできそう。非同期の罠にはまる。→解決せず。
　・JavaScriptでURLからOGP取得する - Qiita

imgが表示されない、、
　・【Vue.js】なぜかimgが表示されない時の解決法とその理由
　・Vue.js imgタグのsrc要素は指定の仕方によって読み込み方が違う -Qiita
　・vueで画像が表示されない
　※良く分からん、、とりあえず以下で上手くいった。（上手く表示しないイメージもあったけど。）

<img class="img" v-bind:src="urlを指定" width="200"> </img>

カード表示で横並びにしたい
　・よく使うタイル（カード）デザインを CSS のパターン別でご紹介
　・フレックスボックス（フレキシブルボックス）とはなにか？

その他参考

　・Vue.jsを100時間勉強して分かったこと - Qiita
　・Vue.jsでv-forをネストする - Qiita
　・忘れやすい、複雑なJSONの要素をfor...in文で取り出す方法