クレープ屋的お勧めアニメ/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=]]