🗓

学生が終わるので今まで作ったもの50個を振り返ってみる

2022/11/05に公開約21,800字

はじめに

こんにちは、あろーです。

いつの間にか学生が終わりに近づいていて、来年度から社会人になります。
このひとつの節目を迎えるにあたって、(ちょっと早いですが)学生時代に作ったものを一気に振り返ってみようと思います。

ところどころ割愛したのですが、全部合わせて50個というなかなかの量になってしまったので、適宜、読み飛ばしていただけますと幸いです。

振り返る

プチコン

プログラミングに触れるきっかけが、小学生のころに出会ったDSiウェア「プチコンmk2」です。
このころも何か作っていたはずですが、手元に何も残っていませんでした…。

ですので、その次のバージョンにあたる3DS専用ソフト「プチコン3号」での制作物から列挙しています。

東方風弾幕ゲーム(非公開)

ゲーム画面

制作時期 開発・動作環境
2016年 プチコン3号(3DS)

2画面を縦に活用した、縦スクロール弾幕シューティングです。

弾幕の軌道を実装しながら「数学ってこんなところで使うんだ…!」と思った記憶があります。
完成していないところをみると、おそらく数学的知識が足りずにフェードアウトしていったのだと思います。

Android風ツール集

ゲーム画面

制作時期 開発・動作環境
2016年 プチコン3号(3DS)

時計・タイマー・ストップウォッチ・カレンダー・電卓などを集めた雑多なツール集です。
無駄にパターンロックや、ちょっとリッチなUIアニメーションが実装されていました。

まーじゃんのようなもの。ぷち

ゲーム画面

制作時期 開発・動作環境
2016年12月〜2017年9月 プチコン3号(3DS)

思考ルーチンを搭載した、COMがイカサマしないオーソドックスな4人打ち麻雀ゲームです。

多くの方がテストプレイやデバッグ、コードの改善に協力してくださり、完成させることができました。

また、旧3DSとnew 3DSでの処理性能に大きな差があったので、はじめてパフォーマンスを意識してコードを書くということをしました。

https://www.arrow2nd.com/works/mj-3ds

まーじゃんのようなもの。for Switch

ゲーム画面

制作時期 開発・動作環境
2019年8〜12月 プチコン4(Switch)

「誰でも遊べる明るい麻雀」をコンセプトとした、4人打ち麻雀ゲームです。

捨て牌のサジェスト機能や役・用語図鑑、ルール解説を内蔵しているので、初心者の方でも安心して遊び始められるところが特徴です。

当初の目標通り、麻雀を知らなかった方にも触っていただけているようで、作って良かったな…と思っています。

https://twitter.com/arrow_2nd/status/1457189680978350087?s=20&t=O_UWpxAEMnmHk0BbID-KEw

https://www.arrow2nd.com/works/mj-sw

にゃんこだいせんせぇ

ゲーム画面

制作時期 開発・動作環境
2019年12月 プチコン4(Switch)

次々に出てくる式とその答えが合っているか、すばやく「シュッ」っと採点する脳トレゲームです。

プチコンの開発元であるスマイルブームさんが開催する、第五回プチコン大喜利 の応募作品として制作しました。
結果、TSUKUMO賞をいただくことができました 🎉

https://twitter.com/arrow_2nd/status/1214409406026153984?s=20&t=VsCWAVxWmHl2lFK9bT6ylQ

https://www.arrow2nd.com/works/nyanko

#syntax

ゲーム画面

制作時期 開発・動作環境
2020年5月〜8月 プチコン4(Switch)

アルファベットのパネルを並び替えてプチコンの命令文を完成させるパズルゲームです。

マニュアルを読んでいたところ、知らない命令がかなりあることに気がついたので「遊びながらいろんな命令が知れたらおもしろいかな〜」と思い制作しました。

https://twitter.com/arrow_2nd/status/1297872774577262593?s=20&t=VsCWAVxWmHl2lFK9bT6ylQ

https://www.arrow2nd.com/works/syntax

PC・スマホ向けミニゲーム

以下の3作品はいずれも学校の課題として制作したものです。
特に制約があったわけではないのですが「ねこ & シンプル」というコンセプトで統一しました。

ねこ、走る。(非公開)

ゲーム画面

制作時期 動作環境 使用技術
2020年7月 Windows C++, DirectX 11

次々に現れる障害物をジャンプで避けて走り続けるシンプルなランゲームです。

ねこの走るスピードは時間とともに速くなっていくほか、障害物に混じって現れる「ネコ缶」を拾うことで加速・減速を調整できます。

ねこの走るスピードが速いほど高いスコアが入りやすくなりますが、そのぶん避けるのが難しくなっていきます。

ねこ、のびる。(非公開)

ゲーム画面

制作時期 動作環境 使用技術
2020年9月 Windows C++, DirectX 11

空を流れるりんごの内、紫の毒りんごを避けつつねこを伸び縮みさせて1分間りんごを食べ続けるタイムアタックゲームです。

外部ファイルの素材を一切使用せず、標準のグラフィック描画命令のみで構成しています。

ねこ、とぶ

ゲーム画面

制作時期 動作環境 使用技術
2021年5〜7月 Android Java

傾け操作でねこを操作し、足場を踏んで飛びまくるゲームです。

ジャンプ台を連続で踏むとコンボが発生し、スコアとコンボ数に応じてゲーム内で使用できるねこが増えたりします。

端末毎に異なる画面サイズへの対応に頭を抱えたり、学校側から提供されたライブラリを修正して使ったりと、いろいろな面で苦労した記憶があります…。

https://www.arrow2nd.com/works/neko-tobu

Webサイト・アプリ

作ったものまとめサイト

制作時期 使用技術
2020年上旬? HTML, CSS, jQuery, GitHub Pages

HTML, CSSをはじめて触った際に作ったWebサイトです。
同時にGitやGitHubの使い方も学びました。

ポートフォリオサイト(Gen 1)

サイト画面

制作時期 使用技術
2020年8〜9月 Vue 2, Bootstrap 4, GitHub Pages

はじめてフレームワークを使って作ったWebサイトです。
これ以降Vueは触っていません(その内勉強し直したい)

https://www.arrow2nd.com/works/arrow2nd-gen1

ポートフォリオサイト(Gen 2)

サイト画面

制作時期 使用技術
2021年3月 Gatsby, GraphQL, Semantic UI, GitHub Pages

Reactの学習を始めた際に作り直したポートフォリオサイトです。
デザインもちょっとかわいくしました。

https://www.arrow2nd.com/works/arrow2nd-2

ShinyPoems

サイト画面

制作時期 使用技術
2021年4〜5月 Next.js, TypeScript, Tailwind CSS, Cloudinary, SPARQL, Vercel, Jest, Playwright, GitHub Actions

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

ポエミーで独特な衣装説明が好きで、いっぱい並べて見たかったので作りました。

デザインは2,3回大きく変更した後、現在のものに落ち着きました。ポエムのエモい感じを表現したかったので、「紙と万年筆のインク」をイメージしています。

https://www.arrow2nd.com/works/shiny-poems

im@s-palette

サイト画面

制作時期 使用技術
2021年7月 Next.js, TypeScript, Tailwind CSS, SPARQL, Vercel, Jest, Playwright, GitHub Actions

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

カラーパレットツールを使っていたときに「これのアイマス版が欲しいな〜」と思ったので作りました。

性質上、1画面に表示するコンポーネントの数がかなり多くなるので、無限スクロールで段階的に表示したり useMemo で再描画を抑制したりと、パフォーマンス面でいろいろ試行錯誤しました。

https://www.arrow2nd.com/works/imas-palette

ポートフォリオサイト(Gen 3)

サイト画面

制作時期 使用技術
2021年7月 Gatsby, TypeScript, Tailwind CSS, GitHub Pages

こちらもポートフォリオサイトです。

JSONから記事ページを自動生成させることで、以前は必要だった記事ページ毎にJavaScriptファイルを作る作業がなくなり、記事の更新がしやすくなりました。

arrow2nd.com のドメインを設定する際に不手際があり、Let’s Encryptのレート制限に引っかかってSSL証明書がなかなか発行されず困ったりもしました。

https://twitter.com/arrow_2nd/status/1468874302426869760

https://www.arrow2nd.com/works/arrow2nd-gen3

idol-badge-generator

サイト画面

制作時期 使用技術
2021年8月 Next.js, Deno, TypeScript, Tailwind CSS, SPARQL, shield.io, Vercel

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

自分のGitHubプロフィールに貼りたかったので作りました。

https://www.arrow2nd.com/works/idol-badge

オモコロラジオのPodcastフィード

フィードの購読例
フィードを macOS の Podcast で購読しているところ

制作時期 使用技術
2021年9月 Deno, TypeScript, GitHub Actions, GitHub Pages

Webメディア「オモコロ」で更新されているWebラジオの非公式Podcastフィードです。

Google Podcastsで配信されているものが、番組毎に別れておらず使いにくかったので作りました。

GitHub Actionsにより1日に2回、オモコロの新着記事RSSフィードを取得・解析し、JSONデータとPodcastフィードを自動生成しています。

https://www.arrow2nd.com/works/omrk

morino

サイト画面

制作時期 使用技術
2021年10月 Deno, HTML, CSS, esbuild, Cloudinary, Deno Deploy

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

杜野凛世さんのお誕生日、10月19日に合わせて作りました。

https://www.arrow2nd.com/works/morino

ポートフォリオサイト(Gen 4)

サイト画面

制作時期 使用技術
2021年12月 Next.js, TypeScript, Tailwind CSS, Framer Motion, microCMS, Vercel, Playwright, GitHub Actions

2022年11月現在、運用しているポートフォリオサイトです。

GatsbyからNext.jsのSSGに移行し、コンテンツの管理にヘッドレスCMSを導入して簡単に記事の追加・更新ができるようになりました。

ゆるい雰囲気のサイトにしたかったので、デザインを一新し、アニメーションも実装しました。
画面遷移のアニメーションについてはQiitaに記事を書いています。

https://qiita.com/arrow2nd/items/b16385cf22c567fbbf33

https://www.arrow2nd.com/works/arrow2nd-gen4

シャニマスの4コマ漫画まとめ

制作時期 使用技術
2022年3月 Node.js, Twitter API v2, GitHub Actions, GitHub Pages

アイドルマスターシャイニーカラーズの公式Twitterに投稿される、Web4コマ漫画を集めたJSONデータです。

本来は「4コマ漫画まとめ」みたいなサイトを作りたくてそのために収集したのですが、公式ですでに存在していたので没になりました。

GitHub Actionsにより1日に2回、Twitterの投稿をチェックしてデータを自動更新しています。

https://github.com/arrow2nd/shiny-yonkoma

アイマスアートワーク画像検索 / API

サイト画面

制作時期 使用技術
2022年4〜6月 フロント: SolidJS, TypeScript, Milligram, CloudFlare Pages, Vite
バック: Deno, TypeScript, Hono, MongoDB Atlas, Deno Deploy

アイドルマスターシリーズのCDのアートワークを検索できるWebアプリ・APIです。

CDを取り込んだ際にアートワークが自動取得されなくて不便に思っていたのと、SolidJS を触ってみたかったので作りました。

バックエンドのフレームワークには当初oakを使っていたのですが、後からおもしろそうだったので Hono に乗り換えました。

https://www.arrow2nd.com/works/imas-artwork

idol-birthday(Gen 1)

サイト画面

制作時期 使用技術
2022年5月 Next.js, TypeScript, Tailwind CSS, SPARQL, Cloudinary, Vercel, GitHub Actions

アイドルマスターシリーズの全アイドルのお誕生日をカウントダウンするサイトです。

白菊ほたるさん のお誕生日をカウントダウンしたくなったので即席で作りました。

https://www.arrow2nd.com/works/idol-birthday

im@sparql Data Dashboard

サイト画面

制作時期 使用技術
2022年7月 Deno, TypeScript, Fresh, Twind, SPARQL, Deno Deploy

アイドルマスターの非公式オープンデータセット im@sparql の収録データ数を見ることができるサイトです。

DenoのWebフレームワーク、Fresh を触ってみたくて作りました。

収録データ数を取得するSPARQLクエリを書くのに手こずった記憶があります。スラスラ書けるようになりたい…。

https://space.pikopikopla.net/query/e640e69c8e

https://www.arrow2nd.com/works/imasparql-dd

idol-birthday(Gen 2)

サイト画面

制作時期 使用技術
2022年8〜9月 Remix, TypeScript, Tailwind CSS, daisyUI, SPARQL, Cloudinary, Vercel, GitHub Actions

以前作ったサイトがいろいろな面で雑だったので、ゼロから作り直したものです。

気になっていたWebフレームワーク Remix とTailwind CSSのプラグイン daisyUI を使って再構築しました。

私自身の配色センスが微妙なので、daisyUIのテーマ機能は非常にありがたかったです。
その内、Vitest を使ってテストを書きたいな〜と思っています。

https://www.arrow2nd.com/works/idol-birthday-2

ツール

プロデュースノート!

LINEのトーク画面

制作時期 使用技術
2020年3月 Node.js, Express, LINE Messaging API, SPARQL, Vercel, Jest, GitHub Actions

アイドルマスターシリーズのアイドルのプロフィール情報を検索できるLINE Botです。

始めたてのころ、なかなかアイドルの顔と名前が一致しなかったので作りました。

初めはHerokuにデプロイしていましたが、スリープ状態からの復帰に時間がかかるので、しばらくしてVercelへ移行しました。

https://www.arrow2nd.com/works/produce

突然の死ジェネレーター

LINEのトーク画面

制作時期 使用技術
2020年5月 Node.js, Express, LINE Messaging API, Vercel, Mocha

突然の死のアスキーアートを作ることができるLINE Botです。

Web上のジェネレーターからLINEにコピー&ペーストするのが面倒に感じたので作りました。

https://www.arrow2nd.com/works/totsuzen

Twitterの検索結果をSlackに投稿

制作時期 使用技術
2020年12月 Google App Script, Twitter API v1.1, Slack API

スプレッドシートに書いておいたキーワードを定期検索してSlackに投げるBotです。

Slackの通知が頻繁に鳴って心臓に良くなかったので、すぐ使わなくなりました。

https://github.com/arrow2nd/gas-twitter-search

燃費計算するLINE Bot

LINEのトーク画面

制作時期 使用技術
2021年1月 Node.js, Express, LINE Messaging API, Vercel

距離と給油量を投げると、満タン法での計算結果が帰ってくるLINE Botです。

車とバイクによく乗る友人のために作りました。
まだ使ってくれているみたいです。うれしい。

https://github.com/arrow2nd/linebot-fuel

共有ドライブの更新通知

Discordでの通知例

制作時期 使用技術
2021年4月 Google App Script, Discord Webhook API

指定したGoogle Driveのディレクトリに更新があるとDiscordに通知するBotです。

学校のチーム制作で、素材共有時のやりとりをスムーズに行いたくて作りました。

https://github.com/arrow2nd/gas-gdrive-notice

Twitterの検索結果をRSSフィード化

制作時期 使用技術
2021年5月 Google App Script, Twitter API v2

スプレッドシートに書いておいたキーワードをTwitterで定期検索して、RSSフィードにするやつです。

エゴサを自動化したくて作りました。
Zennに記事も書いています。

https://zenn.dev/arrow2nd/articles/0955d0135b5b75

https://github.com/arrow2nd/gas-twitter-rss

Amazonの商品値下がり通知

Slackでの通知例

制作時期 使用技術
2022年1月 Google App Script, Slack API

Amazonのほしい物リスト内の商品が値下がりしたらSlackに通知するBotです。

コロナビールの価格変動が激しく、最安値のときに買い逃したのが悔しくて作りました。
いまだにあのとき見た価格で買うことはできていません…。

https://github.com/arrow2nd/gas-pricedown-notify

KiaTool(非公開)

アプリ画面

制作時期 使用技術
2022年8月 Kodular, open-meteo API, OpenStreetMap API

現在地のこれからの気圧変化が分かるAndroidアプリです。

ビジュアルプログラミングでアプリ開発ができるプラットフォーム「Kodular」を触ってみたくて作りました。

ライブラリ

godic

制作時期 使用技術
2020年5月 Go, codic API

プログラマー向けのネーミング辞書「codic」のAPIライブラリです。
後述するCLIツール「codic-cli」を作るために作りました。

https://github.com/arrow2nd/godic

line2json

制作時期 使用技術
2021 年 10 月 Deno, TypeScript

LINEのトーク履歴ファイルをJSON形式にパースするライブラリです。
トーク履歴からマルコフ連鎖でメッセージを自動生成したりして遊ぶために作りました。

https://github.com/arrow2nd/linetalk-markov

https://github.com/arrow2nd/line2json

デスクトップアプリ

匿名Player

アプリ画面

制作時期 使用技術
2020年5月 Electron, HTML, CSS, jQuery

Webラジオ「匿名ラジオ」を再生するデスクトップアプリです。
ブラウザを開くことなく垂れ流したかったので作りました。

https://github.com/arrow2nd/tokumeiPlayer

匿名Player+

アプリ画面

制作時期 使用技術
2021年2月 Electron, React, TypeScript, Tailwind CSS, Webpack

「匿名Player」の機能向上版です。

前述したオモコロラジオのPodcastフィードで生成されるJSONデータを使用することで、匿名ラジオを含む全てのオモコロ系Webラジオに対応しました。

https://github.com/arrow2nd/tokumei-player-plus

serizawa

アプリ画面

制作時期 使用技術
2021年8月 Electron, React, TypeScript, Tailwind CSS, Webpack, GitHub REST API

ゲーム「アイドルマスターシャイニーカラーズ」の非公式専用ブラウザです。

普通のブラウザだとウィンドウが非アクティブ状態になると音が出なくなってしまうので、それを解決するために作りました。

1クリックでスクリーンショットを保存&クリップボードへコピーする機能もあります。

https://www.arrow2nd.com/works/serizawa

匿名 Player++

アプリ画面

制作時期 使用技術
2021年9月 Electron, React, TypeScript, Tailwind CSS, Webpack, GitHub REST API

「匿名Player+」の機能向上版です。
各エピソードのタイトルが表示できるようになりました。

Podcastフィードを作ったので、最近はあまり使わなくなっています。

https://www.arrow2nd.com/works/tokumei-pp

VSCode拡張

sb4-extention

拡張機能の使用例

制作時期 使用技術
2020年8月 Node.js, TypeScript, Webpack, GitHub Actions

プチコン4で動く言語「SMILE BASIC 4」のVSCode用拡張機能です。

シンタックスハイライトや入力補完、スニペット入力、変数・関数宣言のコメントのホバー表示ができます。

PC上でコードの閲覧・編集を快適に行いたかったので作りました。

https://www.arrow2nd.com/works/sb4-ext

Idol RDF Maker

拡張機能の使用例

制作時期 使用技術
2022年4月 Node.js, TypeScript, Webpack, SPARQL, GitHub Actions

im@sparql のRDFデータの作成を支援するVSCode拡張です。

今までは既存のデータをコピペ改変して新規作成していたのですが、打ち損じが起きたり、そもそも量が多いと疲れるので作りました。

最近はVimに移行したので、同じことができるVimプラグインを作りたいなと考えています。

https://www.arrow2nd.com/works/rdf-maker

CLIツール・TUIアプリ

tw-nyaan

実行例

制作時期 使用技術
2020年6月 Node.js, Twitter API v1.1

ターミナル上でTwitterの閲覧・ツイートの投稿ができるCLIツールです。

Node.jsを勉強し始めたときから「Twitterクライアント作りたいな〜」と思っていたので作りました。

作りやすいからという理由でCLIツールを選んだのですが、これがきっかけでCUIな環境に興味を持ちました。

https://github.com/arrow2nd/tw-nyaan

twnyan

実行例

制作時期 使用技術
2020年11月 Go, Twitter API v1.1, GitHub Actions

こちらもターミナル上で動くTwitterクライアントです。
Go言語を勉強するついでに作りました。

tweet コマンド実行時にツイート文を省略すると「にゃーん」とツイートする謎機能があります。

https://www.arrow2nd.com/works/twnyan

nimotsu

実行例

制作時期 使用技術
2021年10月 Go, GitHub Actions

荷物の追跡ができるCLIツールです。
毎回Web上で確認するのが面倒に感じたので作りました。

https://www.arrow2nd.com/works/nimotsu

codic-cli

実行例

制作時期 使用技術
2021年12月 Go, codic API, GitHub Actions

日本語からネーミングを生成できるCLIツールです。
作ったものの、あまり使っていません…。

https://www.arrow2nd.com/works/codic-cli

nekome

実行例

制作時期 使用技術
2022年5〜7月 Go, Twitter API v2, GitHub Actions

TUIなTwitterクライアントです。

ターミナルに引き篭もってTwitterするために作りました。

Twitter API v2に振り回されつつ、現在も開発を続けています。
Zennに記事も書きました。

https://zenn.dev/arrow2nd/articles/4c88a8d43f3a82

https://www.arrow2nd.com/works/nekome

longdeno

実行例

制作時期 使用技術
2022年5月 Deno, TypeScript

Denoくんが伸びます。
Sheeeeeplaさんのツイートに誘発されて作りました。

https://twitter.com/arrow_2nd/status/1522495467552083968?s=20&t=VsCWAVxWmHl2lFK9bT6ylQ

ライブラリとしても機能します。

import { longdeno } from "https://deno.land/x/longdeno@v1.0.3/mod.js";
console.log(longdeno(20));

https://github.com/arrow2nd/longdeno

gomi-rename

実行例

制作時期 使用技術
2022年8月 Go, GitHub Actions

最悪なファイル名に自動でリネームするCLIツールです。
ゴミファイル名メーカー というのがTwitterでプチバズりしていたので作りました。

https://github.com/arrow2nd/gomi-rename

bondrewdsay

実行例

制作時期 使用技術
2022年8月 Rust

メイドインアビスのボンドルドっぽい何かのcowsayオマージュです。
Rustの勉強ついでに作りました。

肝心のRustの勉強はイマイチ使い所が見出せず、中断しています…。

https://github.com/arrow2nd/bondrewdsay

gh-todo

実行例

制作時期 使用技術
2022年10月 シェルスクリプト(bash)

GitHub Issuesで管理しているTodoを操作するためのCLIツールです。

GitHub CLIのコマンドにaliasを貼って運用していたのですが、編集や削除の際にIssue番号を指定するのが煩わしかったので作りました。

ファジーファインダーで絞り込めるのが便利で気に入っています。

https://www.arrow2nd.com/works/gh-todo

その他

ねこを見せつけるUSBデバイス

制作時期 使用技術
2021年4月 Digispark(互換)

Windows PCに接続すると、勝手にブラウザを立ち上げてねこを見せつけるUSBデバイスです。

「ファイルを指定して実行」を起動してURLを入力、ブラウザが立ち上がった後F11で最大化させています。

https://twitter.com/arrow_2nd/status/1384427785062555648?s=20&t=Owudx4pVf9D2ND67QkD2Ng

Twitterのタイムラインでodannyさんがやっているのを見かけて楽しそうだったので作りました。

https://odanny.com/tech/20210417-badusb-open-website/

https://github.com/arrow2nd/digispark-bad-usb

振り返ってみて

続けていきたいこと

やっぱり「自分のほしい物」を作っているときが一番楽しかったです。

なので、社会人になってもいろいろ作り続けていきたいなと思います。

また、「自分が作った物を誰かに使ってもらう」「フィードバックをもらう」という体験もすごく楽しく感じたので、自分だけでなくいろんな方に使ってもらえるようなものを作りたいです。

気をつけたいこと

自分が今持っているスキルの範疇で作りたいものを考えてしまっている節があるので、それにとらわれすぎないよう気をつけたいなと思いました。

あくまでも趣味なので必ず完成させる必要はないですし、ちょっと背伸びするくらいの気持ちで楽しく開発していきたいです 🐈

これからやりたいこと

まだまだ作りたい物や触ってみたい技術、勉強したい言語・フレームワークが沢山あります。

もちろん、今あるスキルも伸ばしつつですが、好奇心の赴くままに沢山挑戦していきたいな〜と思います。

終わりに

当初の想定を大幅に超える長さになってしまい、途中からは正直「誰が読むんだ…?」と思いながら書いていました。

ここまで読んでくださった方、とんでもなく長い自分語りにお付き合いくださり本当にありがとうございました。

GitHubで編集を提案

Discussion

ログインするとコメントできます