「クレープ屋的お勧めアニメ/Template」の版間の差分
ナビゲーションに移動
検索に移動
細 (→配信サイトのアイコン) |
編集の要約なし |
||
(同じ利用者による、間の1版が非表示) | |||
1行目: | 1行目: | ||
テンプレ作成機: https:// | テンプレ作成機: https://s3f95k.csb.app/ | ||
source code | source code | ||
38行目: | 38行目: | ||
=== あらすじ === | === あらすじ === | ||
=== 主題歌 === | |||
==== OP ==== | |||
==== ED ==== | |||
102行目: | 110行目: | ||
if (loading) return <p>Loading...</p>; | if (loading) return <p>Loading...</p>; | ||
if (error) return <p>Error :(</p>; | if (error) return <p>Error :(</p>; | ||
console.log(data.Media.studios.nodes.map((v) => v.name).join(", ")); | |||
const temp = template({ | const temp = template({ | ||
title: data.Media.title.native, | title: data.Media.title.native, | ||
108行目: | 116行目: | ||
siteLink: data.Media.externalLinks | siteLink: data.Media.externalLinks | ||
.filter((v) => v.site.includes("Official")) | .filter((v) => v.site.includes("Official")) | ||
.map(v => v.url) | .map((v) => v.url) | ||
.join(""), | .join(""), | ||
type: getType(data.Media.source), | type: getType(data.Media.source), | ||
115行目: | 123行目: | ||
}); | }); | ||
console.log( | 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 ( | return ( | ||
<div> | <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> | </div> | ||
); | ); | ||
132行目: | 199行目: | ||
return ( | return ( | ||
<div> | <div> | ||
<h2>anilist</h2> | |||
ID: <input type="number" value={inpt} onChange={change} />{" "} | ID: <input type="number" value={inpt} onChange={change} />{" "} | ||
<button onClick={set}>FETCH</button> | <button onClick={set}>FETCH</button> | ||
{id > 0 ? <AniTemp id={id} /> : <p>set id</p>} | {id > 0 ? <AniTemp id={id} /> : <p>set id</p>} | ||
<Spotifyiframe /> | |||
<AMiframe /> | |||
</div> | </div> | ||
); | ); | ||
145行目: | 215行目: | ||
document.getElementById("root") | document.getElementById("root") | ||
); | ); | ||
</pre> | </pre> | ||
2024年7月13日 (土) 16:42時点における最新版
テンプレ作成機: 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=]]