クレープ屋的お勧めアニメ/Template
ナビゲーションに移動
検索に移動
テンプレ作成機: 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") );
編集用テンプレ
== タイトル == {{infobox |title= ""タイトル"" |image = [[ファイル:"ここにファイル名"|150px]] |label1 = 公式サイト |data1 = ""ここに公式サイトのURL"" |label2 = 原作 |data2 = ""ここに原作のメディア"" }} === あらすじ === ""ここにあらすじ"" === レビュー === {{テンプレート:CrepeQuote |body= ""ここに内容"" |name= ""ここに自分の名前"" }}
レビュー用テンプレ
{{テンプレート:CrepeQuote |score=40 |body= ここに内容 |name=名前 }}
配信サイトのアイコン
左から配信日時が早い順に3つぐらい並べられたらいいかな
ウィキメディアコモンズの画像はアップロードしないと編集するとき重くなるっぽい
[[ファイル:Amazon icon.svg|24px|link=]] [[ファイル:Docomoanime.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=]]