「クレープ屋的お勧めアニメ/Template」の版間の差分

提供:クレープ屋まとめwiki
ナビゲーションに移動 検索に移動
編集の要約なし
編集の要約なし
1行目: 1行目:
テンプレ作成機: https://44uswy.csb.app/
source code
<pre class="mw-collapsible mw-collapsed wikitable>
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]
}}
=== あらすじ ===
=== レビュー ===
{{テンプレート: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>;
  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
  });
  console.log(temp);
  return (
    <div>
      <textarea value={temp} />
    </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>
      ID: <input type="number" value={inpt} onChange={change} />{" "}
      <button onClick={set}>FETCH</button>
      {id > 0 ? <AniTemp id={id} /> : <p>set id</p>}
    </div>
  );
}
render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);
</pre>
[https://anilist.co/graphiql?query=query%20MediaQ%20(%24id%3A%20Int!)%20%7B%0A%20%20Media(id%3A%20%24id)%20%7B%0A%20%20%20%20title%20%7B%0A%20%20%20%20%20%20native%0A%20%20%20%20%7D%0A%20%20%20%20source%0A%20%20%20%20coverImage%20%7B%0A%20%20%20%20%20%20extraLarge%0A%20%20%20%20%7D%0A%20%20%20%20siteUrl%0A%20%20%20%20externalLinks%20%7B%0A%20%20%20%20%20%20site%0A%20%20%20%20%20%20url%0A%20%20%20%20%7D%0A%20%20%20%20studios%20(isMain%3Atrue)%20%7B%0A%20%20%20%20%20%20nodes%20%7B%0A%20%20%20%20%20%20%20%20name%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%7D%0A%7D&operationName=MediaQ&variables=%7B%20%22id%22%3A%201%20%7D graphql]
== 編集用テンプレ ==
== 編集用テンプレ ==
<pre>== タイトル ==
<pre>== タイトル ==

2022年3月27日 (日) 22:57時点における版

テンプレ作成機: https://44uswy.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]
}}

=== あらすじ ===


=== レビュー ===

{{テンプレート: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>;

  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
  });

  console.log(temp);

  return (
    <div>
      <textarea value={temp} />
    </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>
      ID: <input type="number" value={inpt} onChange={change} />{" "}
      <button onClick={set}>FETCH</button>
      {id > 0 ? <AniTemp id={id} /> : <p>set id</p>}
    </div>
  );
}

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

graphql

編集用テンプレ

== タイトル ==
{{infobox
|title= ""タイトル""
|image = [[ファイル:"ここにファイル名"|150px]]
|label1 = 公式サイト
|data1 = ""ここに公式サイトのURL""
|label2 = 原作
|data2 = ""ここに原作のメディア""
}}
=== あらすじ ===
""ここにあらすじ""

=== レビュー ===

{{テンプレート:CrepeQuote
|body= ""ここに内容""
|name= ""ここに自分の名前""
}}

レビュー用テンプレ

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

配信サイトのアイコン

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

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

Amazon icon.svg Docomoanime.png Netflix icon.svg Cib-crunchyroll (CoreUI Icons v1.0.0) orange.svg AbemaTV logo.svg YouTube Logo 2017.svg Niconico(2020).svg Hulu Logo.svg


[[ファイル:Amazon icon.svg|24px|link=https://www.amazon.co.jp/]] 

[[ファイル:Docomoanime.png|24px|link=https://anime.dmkt-sp.jp/animestore/tp_pc]]

[[ファイル:Netflix icon.svg|24px|link=https://www.netflix.com/]]

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

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

[[ファイル:YouTube Logo 2017.svg|64px|link=https://www.youtube.com/]] 

[[ファイル:Niconico(2020).svg|48px|link=https://www.nicovideo.jp/]] 

[[ファイル:Hulu_Logo.svg|48px|link=https://www.hulu.jp/]]