クレープ屋的お勧めアニメ/Template

テンプレ作成機: https://s3f95k.csb.app/

source code

import React, { useState } from "react";
import { render } from "react-dom";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  useQuery,
  gql
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://graphql.anilist.co/",
  cache: new InMemoryCache()
});

function template({ title, imgUrl, siteLink, type, prod, aniLink }) {
  return `
== ${title} ==

{{infobox
|title= ${title}
|image = [[${imgUrl}|150px]]
|label1 = 公式サイト
|data1 = ${siteLink}
|label2 = 原作
|data2 = ${type}
|label3 = 制作
|data3 = ${prod}
|label4 = ネット配信
|data4 = TBD
|label5 = List
|data5 = [${aniLink} Anilist]
}}

=== あらすじ ===


=== 主題歌 ===

==== OP ====


==== ED ====


=== レビュー ===

{{テンプレート:CrepeQuote
|score=
|body=
|name=
}}
`;
}

const types = {
  ORIGINAL: "オリジナル",
  MANGA: "漫画",
  LIGHT_NOVEL: "ライトノベル",
  VISUAL_NOVEL: "ノベルゲーム",
  VIDEO_GAME: "ゲーム",
  OTHER: "その他",
  NOVEL: "小説",
  DOUJINSHI: "同人誌",
  ANIME: "アニメ",
  WEB_NOVEL: "ネット小説",
  LIVE_ACTION: "実写",
  GAME: "ゲーム",
  COMIC: "コミック",
  MULTIMEDIA_PROJECT: "マルチメディアプロジェクト",
  PICTURE_BOOK: "写真本"
};

function getType(type) {
  return types[type];
}

function AniTemp({ id }) {
  const { loading, error, data } = useQuery(
    gql`
      query MediaQ($id: Int!) {
        Media(id: $id) {
          title {
            native
          }
          source
          coverImage {
            extraLarge
          }
          siteUrl
          externalLinks {
            site
            url
          }
          studios(isMain: true) {
            nodes {
              name
            }
          }
        }
      }
    `,
    { variables: { id } }
  );

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  console.log(data.Media.studios.nodes.map((v) => v.name).join(", "));
  const temp = template({
    title: data.Media.title.native,
    imgUrl: data.Media.coverImage.extraLarge,
    siteLink: data.Media.externalLinks
      .filter((v) => v.site.includes("Official"))
      .map((v) => v.url)
      .join(""),
    type: getType(data.Media.source),
    prod: data.Media.studios.nodes.map((v) => v.name).join(", "),
    aniLink: data.Media.siteUrl
  });

  return (
    <div>
      <textarea style={{ height: "200px" }} value={temp} />
      <p>
        <img src={data.Media.coverImage.extraLarge} />
      </p>
    </div>
  );
}

function Spotifyiframe() {
  const [url, setUrl] = useState("");
  const [out, setOut] = useState("");

  const change = (e) => {
    setUrl(e.target.value);
    try {
      const url = new URL(e.target.value);
      if (url.pathname.startsWith("/track/") && url.pathname.split("/")[2]) {
        setOut(url.pathname.split("/")[2]);
      }
      console.log(url);
    } catch (e) {}
  };

  return (
    <div>
      <h2>Spotify変換くん</h2>
      <span>URL: </span>
      <input type="text" value={url} onChange={change} />
      {out ? (
        <p>{`<iframe style="border-radius:12px;border:none;" src="https://open.spotify.com/embed/track/${out}" width="600" height="80" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>`}</p>
      ) : (
        <p>URLが正しくないよ</p>
      )}
    </div>
  );
}

function AMiframe() {
  const [url, setUrl] = useState("");
  const [out, setOut] = useState("");

  const change = (e) => {
    setUrl(e.target.value);
    try {
      const url = new URL(e.target.value);
      if (url.href.includes("https://music.apple.com/")) {
        setOut(url.href.replace("music.apple", "embed.music.apple"));
      }
      console.log(url);
    } catch (e) {}
  };

  return (
    <div>
      <h2>AppleMusic変換くん</h2>
      <span>URL: </span>
      <input type="text" value={url} onChange={change} />
      {out ? (
        <p>{`<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="150" style="width:600px;max-width:660px;overflow:hidden;border-radius:10px;border:none;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="${out}"></iframe>`}</p>
      ) : (
        <p>URLが正しくないよ</p>
      )}
    </div>
  );
}

function App() {
  const [inpt, setInpt] = useState(0);
  const [id, setId] = useState(0);

  const change = (e) => setInpt(e.target.value);
  const set = () => setId(parseInt(inpt));
  return (
    <div>
      <h2>anilist</h2>
      ID: <input type="number" value={inpt} onChange={change} />{" "}
      <button onClick={set}>FETCH</button>
      {id > 0 ? <AniTemp id={id} /> : <p>set id</p>}
      <Spotifyiframe />
      <AMiframe />
    </div>
  );
}

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

レビュー用テンプレ

{{テンプレート:CrepeQuote
|score=40
|body= ここに内容
|name=名前
}}

配信サイトのアイコン

左から配信日時が早い順に3つぐらい並べられたらいいかな

ウィキメディアコモンズの画像はアップロードしないと編集するとき重くなるっぽい

[[ファイル:Amazon icon.svg|24px|link=]] 

[[ファイル:Animestore.png|24px|link=]]

[[ファイル:Netflix icon.svg|24px|link=]]

[[ファイル:Cib-crunchyroll (CoreUI Icons v1.0.0) orange.svg|24px|link=]]

[[ファイル:AbemaTV logo.svg|64px|link=]] 

[[ファイル:YouTube Logo 2017.svg|64px|link=]] 

[[ファイル:Niconico(2020).svg|48px|link=]] 

[[ファイル:Hulu_Logo.svg|48px|link=]]

[[ファイル:Prime_Video.svg.png|64px|link=]]