Help us understand the problem. What is going on with this article?

アニメ情報のWebアプリ開発してみたけど上手くいかず、、(要改善)

出来たもの

「検索」で、指定した年度・クールごとのアニメ番組一覧を表示してくれるWebアプリ。
 ※実際に動くものはコチラにアップしてます。

利用ライブラリ

 ・Vue.js
  CDN:https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
 ・Bootstrap
  CDN:https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  CDN:https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js
 ・axios
  CDN:https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js
 ・ShangriLa Anime API

やりたかったこと

新アニメが始まった時にとりあえず1話見てみて、減らしていくことが多い。(1話すら見ないこともあるが。)
始まってすぐだと、タイトルだけだと分からないことが多いので、自分用で優先順位を管理できるようなWebアプリを作ってみたかった。
 ・年度、クールでアニメ番組を取得して取捨選択。
 ・優先順付けて並び変え。または削除。
みたいなことをやりたかった。

出来なかったこと

四苦八苦の様子、参考にしたURLなどは自分用メモとして保管してます。
Webサイトのサムネイル画像を取得して表示したかったが、上手くいかず。。
色々調べて試してみて、最終的にはWebページのOGPイメージ(og:image)を取得すれば良い考えにシフトしたが時間が足りなくイメージ画像の取得が上手くいってません。

改善点(今後に期待)

今回時間なくて断念したが、色々改造したい。
 ・ちゃんとサムネイル画像を表示できるようにしたい。
 ・ビジュアルをもっとかっこよくしたい。
 ・番組の曜日、時間、PV再生など追加したい。
 ・検索結果の保存。
 ・カードの並び変えや削除。

コード

html
<!-- 全体をVue.js有効にする -->
<div class="container text-center text-white bg-dark" id="app">

  <!-- タイトル行 -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto"><h1>ANIME Watch</h1></div>
  </div>

  <!-- 検索フォーム -->
  <div class="form-inline justify-content-center">
    <input v-model:value="Year" placeholder="2020" class="form-control">
    <label class="col-sm-1"></label>

    <select v-model:value="Cours" class="custom-select">
      <option></option>
      <option></option>
      <option></option>
      <option></option>
    </select>

    <div class="col-sm-2">
      <button v-on:click="Search" class="btn btn-primary">検索</button>
    </div>
  </div>

  <!-- 全てのタスクをクリアするボタン -->
  <div class="row my-3">
    <div class="col-sm-6 mx-auto">
      <button v-on:click="clearAll" class="btn btn-danger">検索結果のクリア</button>
    </div>
  </div>

  <!-- タスク追加されると表示される部分 -->
  <div class="flex-container">
      <p v-for="Anime in AniData">{{Anime.Title}}<br>
      <a v-bind:href="Anime.WebUrl" target="_blank">
        <img v-bind:src="Anime.ImgUrl" width="250" height="150"></img>
      </a>
      </p>
  </div>
</div>
js
const app = new Vue({
  el: '#app', // Vueが管理する一番外側のDOM要素

  data: {
    // Vue内部で使いたい変数は全てこの中に定義する
    Year: '2020',  // 年
    Cours: '',   // クール
    Animes: '',    // APIで取得したアニメ情報JSON
    AniData: [],   // 表示するアニメ情報配列
  },
  methods: {
    // 関数はココに記述
    Search: async function() {
      // 検索時の関数
      try {
        // クール値を取得
        let CoursNo=4;
        switch (this.Cours){
          case '': CoursNo=1; break;
          case '': CoursNo=2; break;
          case '': CoursNo=3; break;
          case '': CoursNo=4; break;
        }

        // ShangriLa Anime API Server
        let response;
        response = await axios.get(`https://api.moemoe.tokyo/anime/v1/master/${this.Year}/${CoursNo}`);
        this.Animes = response.data;

        // アニメ情報表示用配列作成
        this.AniData = [];
        for (var item in this.Animes) {
          var data = {Title: this.Animes[item].title, 
                      WebUrl: this.Animes[item].public_url,
                      ImgUrl: ""};
          this.AniData.push(data);
        }

        /*
        // OGP取得 上手くいかないからあきらめ。
        const CORS_PROXY = 'https://cors-anywhere.herokuapp.com/'
        for await (var item of this.Animes) {
          await fetch(CORS_PROXY + this.Animes[item].public_url)
            .then((res) => res.text())
            .then((text) => {
              const el = new DOMParser().parseFromString(text, 'text/html')
              const headEls = el.head.children
              Array.from(headEls).map((v) => {
                //console.log(v)
                const prop = v.getAttribute('property')
                if (!prop) return
                if (prop == "og:image") {
                  //console.log(prop, v.getAttribute('content'))
                  var ogimg = v.getAttribute('content')
                }
              })

              var data = {Title: this.Animes[item].title, 
                          WebUrl: this.Animes[item].public_url,
                          ImgUrl: ogimg};
              this.AniData.push(data);
            })           
          }*/
      } catch (error) {
        console.error(error);
      }
    },

    clearAll: function() {
      // 表示クリア時の関数
      this.AniData = [];
      console.log('クリア');
    },
  },
});
css
.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  flex-wrap: wrap;
}

感想

Web開発は初でしたが、色々勉強にはなったかな。。
経験積んで、技術力を上げたいと思う。(Web開発は非常に興味あるので。)

protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。
https://protoout.studio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away