3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

アニメ番組管理のWebアプリ開発(メモ)

Last updated at Posted at 2020-10-27

#Annict API の実装メモ

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

###アニメ番組情報を取れそうな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

###実装
**エラー1:**CodePenではformタグは使えない。
 
**エラー2:**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で画像が表示されない
 ※良く分からん、、とりあえず以下で上手くいった。(上手く表示しないイメージもあったけど。)

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

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

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?