アイマスワールドのオープンデータプラットフォーム「im@sparql」のデータダッシュボードです。

概要

収録されているデータ件数をまとめてみられたらいいな〜と思ったのでつくりました。
Deno の Web フレームワーク、fresh を使用しています。

ひとこと

Deno / TypeScript / fresh / Twind / im@sparql (SPARQL) / Deno Deploy

使用技術

制作期間

im@sparql Data Dashboard

アイマス CD のアートワーク情報を検索できる Web アプリ・API です。

SolidJS / hono / MongoDB を触るついでにつくりました。
Vercel にデプロイすることが多いので、今回は Cloudflare Pages を使用しました。

【フロントエンド】
SolidJS / TypeScript / Milligram / Cloudflare Pages / Vite / Depfu
【バックエンド】
Deno / TypeScript / hono / MongoDB Atlas / Deno Deploy / GitHub Actions

【フロントエンド】
2日間 (2022/06)
【バックエンド】
約1週間 (2022/04)

imas-artwork-search

お誕生日までの秒数をカウントダウンするサイト

アイドルマスターシリーズに登場する全アイドルの「お誕生日までの秒数」をカウントダウンするサイトです。


以前に作った morino.deno.dev の全アイドル対応版です。
白菊ほたるさんのお誕生日用に急いで作りました。

Next.js / TypeScript / Tailwind CSS / im@sparql (SPARQL) / Vercel / Cloudinary / Github Actions / Depfu

アイマスアイドルのお誕生日まで…？

オモコロラジオの JSON / 非公式 Podcast フィード

Web メディア「オモコロ」で配信中のラジオの JSON データ及び、非公式 Podcast フィードです。

JSON データは専用プレイヤー「匿名Player++」を作るために、Podcast フィードは自分用に作成しました。
定期的に RSS フィードを取得・解析し、ほぼ自動で更新されています。

omkr-radio

ポートフォリオサイトのようなもの (4代目)

つくったものをまとめた、ポートフォリオのようなサイトです。

Gatsby から Next.js へ移行したほか、ヘッドレス CMS を導入しました！
※ 2022/03/28 : デザインを刷新しました。

Next.js / TypeScript / Tailwind CSS / Framer Motion / plaiceholder / microCMS / Vercel / Cloudflare / Playwright / GitHub Actions / Depfu

www.arrow2nd.com (Gen 4)

凛世さんのお誕生日をカウントダウンするサイト

アイドルマスターシャイニーカラーズに登場するアイドル、杜野凛世さんの「誕生日までの秒数」をひたすらカウントダウンするサイトです。

動的に生成された OGP 画像とともに、残りの秒数を SNS で共有することができます。

特徴

せっかくのお誕生日、何か作りたいな……って思っていたらこれが降りてきたので勢いで作りました。
Deno Deploy を使ってみたかったというのもあります。

HTML / CSS / Deno / esbuild / party.js / Deno Deploy / Cloudinary / Github Actions

morino

アイドルマスターシリーズに登場する、アイドルの「バッジ」をつくることができる Web アプリです。

README.md に貼りたくなったので作りました。

Next.js / Deno / TypeScript / Tailwind CSS / im@sparql (SPARQL) / shields.io / Vercel / GitHub Actions / Depfu

idol-badge-generator

ポートフォリオっぽいサイト (3代目)

今までにつくったものをまとめた、ポートフォリオ的なサイトです。

はじめてドメインを取りました 🎉
記事ページは JSONファイル から自動生成しています。

Gatsby / TypeScript / Tailwind CSS /  Font Awesome / GitHub Actions / GitHub Pages / Cloudflare

arrow2nd.com (Gen 3)

アイドルマスターシリーズに登場する、アイドル・ユニットのイメージカラーが検索できる Web アプリです。

名前の一部や色味からイメージカラーを検索し、カラーコードをコピーすることができます。
また、よく使うカラーを Keep しておくこともできます。


Next.js / TypeScript / Tailwind CSS / im@sparql (SPARQL) / Jest / Playwright / Vercel / GitHub Actions / Depfu

im@s-palette

ゲーム「アイドルマスターシャイニーカラーズ」に登場する、衣装説明の検索・共有ができる Web アプリです。

自動生成された OGP 画像を利用して、SNS 等で共有することができます。

「万年筆で書かれたポエムって良いよね〜」と思ったので、インクの色であるブルーブラックをメインカラーとし、シンプルかつどこか情緒的なデザインにしました。

Next.js / TypeScript / Tailwind CSS / Cloudinary / im@sparql (SPARQL) / Jest / Playwright / Vercel / GitHub Actions / Depfu

ShinyPoems

ポートフォリオ的なサイトです。

Vue から React へ移行するとともに、デザインを刷新しました。

arrow2nd.github.io (Gen 2)

初めてフレームワークを使って作った、ポートフォリオ的なサイトです。


Vue 2 / Bootstrap 4 / Fort Awesome / Google Analytics / GitHub Pages

works