adb is ARISA Idol Database
アイドルデータベースを更新し続けるのです!
これは非公式にアイマスの情報をまとめたWebサイトです。 Gatsby を使って、YAMLファイルなどに定義されたデータを GraphQL でまとめて React で表示しています。
node npm が入っているか確認
$ node --version
v8.0.0
$ npm --version
5.0.2
Gatsby をインストール
$ npm install --global gatsby-cli
Clone してサイト立ち上げ
$ git clone [email protected]:whoiron/adb.git
...
$ gatsby develop
http://localhost:8000 にアクセス
データを定義して
# discord.yaml
- id: "ありさーばー☆"
link: http://google.com
character: "松田亜利沙"
GraphQL でまとめると
{
allDiscordYaml {
edges {
node {
id
link
character
}
}
}
}
JSON が取得できます。
{
"data": {
"allDiscordYaml": {
"edges": [
{
"node": {
"id": "ありさーばー☆",
"link": "http://google.com",
"character": "松田亜利沙"
}
},
]
}
}
}
この JSON を React で表示します。
export default ({data}) => (
<div>
<table>
<thead>
<tr>
<th>キャラクター</th>
<th>discord名</th>
</tr>
</thead>
<tbody>
{data.allDiscordYaml.edges.map(({node}, i) => (
<tr key={`${i}`}>
<td>{node.character}</td>
<td><a href={node.link}>リンク</a></td>
</tr>
))}
</tbody>
</table>
</div>
);
GraphQL は http://localhost:8000/___graphql で実際に試すことができます。
さらに詳しい情報は Gatsbyのチュートリアル へ
Issue に変更・追加してほしい情報をください。
- これを Fork ( https://github.com/whoiron/adb/fork )
- feature ブランチを作成 (
git checkout -b feature/my-new-feature
) - 変更を Commit (
git commit -am 'Add some feature'
) - Push (
git push origin feature/my-new-feature
) - Pull Request を作成