{ "inspiredBy": [ { "id": "photo-of-outer-space", "type": "background", "icon": "/images/inspired-by/photo-of-outer-space.webp", "label": "photo of outer space", "href": "https://unsplash.com/photos/photo-of-outer-space-Q1p7bh3SHj8" }, { "id": "macos-sequoia", "type": "visual", "icon": "/images/inspired-by/macos-sequoia.webp", "label": "macOS Sequoia", "href": "https://www.apple.com/jp/newsroom/2024/09/macos-sequoia-is-available-today/" }, { "id": "visionos-2", "type": "visual", "icon": "/images/inspired-by/visionos-2.webp", "label": "visionOS 2", "href": "https://www.apple.com/jp/newsroom/2024/09/visionos-2-for-apple-vision-pro-is-available-today/" }, { "id": "google-gemini", "type": "visual", "icon": "/images/inspired-by/google-gemini.webp", "label": "Google Gemini", "href": "https://gemini.google.com/" }, { "id": "regloss", "type": "visual", "icon": "/images/inspired-by/regloss.webp", "label": "ReGLOSS", "href": "https://www.youtube.com/@hololiveDEV_IS" }, { "id": "midnight-grand-orchestra", "type": "visual", "icon": "/images/inspired-by/midnight-grand-orchestra.webp", "label": "Midnight Grand Orchestra", "href": "https://www.youtube.com/channel/UCnVbtCwr-5LXxUlGxsgD7sQ" }, { "id": "urbanist", "type": "font", "icon": "/images/inspired-by/urbanist.webp", "label": "Urbanist", "href": "https://fonts.google.com/specimen/Urbanist" }, { "id": "ibm-plex-sans-jp", "type": "font", "icon": "/images/inspired-by/ibm-plex-sans-jp.webp", "label": "IBM Plex Sans JP", "href": "https://fonts.google.com/specimen/IBM+Plex+Sans+JP" }, { "id": "x14y24px-head-up-daisy", "type": "font", "icon": "/images/inspired-by/x14y24px-head-up-daisy.png", "label": "x14y24pxHeadUpDaisy", "href": "https://hicchicc.github.io/00ff/" } ], "bgm": [ { "title": "full of spells (feat. Such)", "artists": ["MOTTO MUSIC", "kamome sano", "Such"], "artwork": "https://i.scdn.co/image/ab67616d0000b273ebbee820a0fefe02ee245426", "youtubeId": "mlhDpSGerlw" }, { "title": "wiz Satellite (feat. 紫崎 雪)", "artists": ["muyu", "紫崎雪"], "artwork": "https://i.scdn.co/image/ab67616d0000b2733309251604f357e0027f49b6", "youtubeId": "gfFVBYf2Oy0" }, { "title": "lovesick (feat. ぷにぷに電機)", "artists": ["kamome sano", "ぷにぷに電機"], "artwork": "https://i.scdn.co/image/ab67616d0000b273d532a45edb59a1fa0c7cb6a0", "youtubeId": "Fm3o1SYs44U" }, { "title": "Lonely Shooter", "artists": ["ぷにぷに電機", "kamome sano"], "artwork": "https://i.scdn.co/image/ab67616d0000b2737487deb5121d8f09e22b90b9", "youtubeId": "oY7jf3kptIg" }, { "title": "Mewton", "artists": ["yuma yamaguchi", "ハル"], "artwork": "https://i.scdn.co/image/ab67616d0000b2731a5885d3518ec63f7b51cc38", "youtubeId": "99fGCDhgE6k" }, { "title": "My medicine (feat. RANASOL)", "artists": ["KOTONOHOUSE", "RANASOL"], "artwork": "https://i.scdn.co/image/ab67616d0000b273d64811b623aa9758f9ffa240", "youtubeId": "HUiDUtqGdmQ" }, { "title": "めろめろグルーヴ", "artists": ["メトロミュー"], "artwork": "https://i.scdn.co/image/ab67616d0000b2737a98ebafc278c407ae126fdd", "youtubeId": "WSYYBGTPZ_U" }, { "title": "haze", "artists": ["EMMA HAZY MINAMI", "Mikazuki BIGWAVE", "R Sound Design"], "artwork": "https://i.scdn.co/image/ab67616d0000b273d827218bd1f7e2b742d41aea", "youtubeId": "oYjNJPKGcLM" }, { "title": "metro", "artists": ["EMMA HAZY MINAMI", "Mikazuki BIGWAVE", "R Sound Design"], "artwork": "https://i.scdn.co/image/ab67616d0000b273ddf452cedc5040c81e25b5f9", "youtubeId": "cTWrQi2eVpA" }, { "title": "After The Rain - Instrumental", "artists": ["Neko Hacker"], "artwork": "https://i.scdn.co/image/ab67616d0000b273ffd491e847ce218c0165dc65", "youtubeId": "qC3-tHPN2aE" }, { "title": "あやふわアスタリスク - Instrumental", "artists": ["DIALOGUE+"], "artwork": "https://i.scdn.co/image/ab67616d0000b2738c2829297e37a6cd8d361cae", "youtubeId": "OSQ_HF5sJ30" }, { "title": "infomorph", "artists": ["kamome sano"], "artwork": "https://i.scdn.co/image/ab67616d0000b273a2e1f7e509dccf576a4355d9", "youtubeId": "gURem8Jp-Zc" }, { "title": "スノードーム銀河 - Instrumental", "artists": ["mekakushe"], "artwork": "https://i.scdn.co/image/ab67616d0000b2737196dcece299134bee0b766b", "youtubeId": "rDxTr8OOJgk" }, { "title": "フレンドコード", "artists": ["THE LUV BUGS", "Saku", "somunia"], "artwork": "https://i.scdn.co/image/ab67616d0000b273ab006ce78fdce27696d943db", "youtubeId": "IRsXLmj92-o" }, { "title": "瞬間ハートビート（Instrumental）", "artists": [ "火威青", "音乃瀬奏", "一条莉々華", "儒烏風亭らでん", "轟はじめ", "ReGLOSS" ], "artwork": "https://i.scdn.co/image/ab67616d0000b27347b7db7f21fe1857ef89b00a", "youtubeId": "LulvQAkZoDA" }, { "title": "アワータイムイエロー - Instrumental", "artists": ["ReGLOSS"], "artwork": "https://i.scdn.co/image/ab67616d0000b2735fdf65245a170b190d35ac6e", "youtubeId": "biyyOyIiJjc" }, { "title": "メタモルフォシス - Instrumental", "artists": [ "電音部", "Zekk", "Shinpei Nasuno", "東雲和音 (CV: 天音みほ)" ], "artwork": "https://i.scdn.co/image/ab67616d0000b273ceea94a7231b301d6b20ce66", "youtubeId": "TXs1rCA5Jcs" } ], "works": [ { "id": "kakei-board", "icon": "/images/works/icons/kakei-board.webp", "thumbnail": "/images/works/thumbnails/kakei-board.webp", "logo": "/images/works/logos/kakei-board.svg", "tags": ["2026年リリース", "Next.js", "Supabase"], "description": "自分にとってちょうど良い家計簿サービスやアプリが存在しなかったため、スプレッドシートにて家計簿を自作して運用していた。\n1年以上にわたって運用を継続したことで必要な機能を整理できたため、その内容を基にしてWebサービス化したものが本作である。\nバックエンドには拙作としては初めてSupabaseを採用し、楽観的更新の導入はもちろん、一連の処理における不要な認証確認の削減、RPCの利用といったパフォーマンスチューニングを実施。性能面を含めたUXの向上を目指した。\nその他にもバナー広告をMisskey.ioに出稿するなど、マーケティング施策にも取り組んだ。", "referenceLinks": [ { "text": "家計ボード", "href": "https://kakei-board.com" }, { "text": "ブログ記事", "href": "https://dagashi.pw/kakei-board" } ] }, { "id": "quick-flash", "icon": "/images/works/icons/quick-flash.webp", "thumbnail": "/images/works/thumbnails/quick-flash.jpg", "logo": "/images/works/logos/quick-flash.png", "tags": ["2026年リリース", "Tauri", "React"], "description": "DJとして楽曲ファイルを管理する上で、ID3タグの内容(メタデータ)をSpotifyから引っ張ってきたいケースがあったのでTauriの学習も兼ねて開発。\nアルバムアートワークの表示箇所は純粋なHTML+CSSでも実現可能であったが、Tauriの特性上OSによってレンダリングに差異が生じてしまうため、Three.jsで実装している。\nUIデザインはフルスクラッチで作成。", "referenceLinks": [ { "text": "GitHub", "href": "https://github.com/FUGAMARU/QuickFlash" } ] }, { "id": "dagashipw-astro", "icon": "/images/works/icons/dagashipw-astro.svg", "thumbnail": "/images/works/thumbnails/dagashipw-astro.webp", "logo": "/images/works/logos/dagashipw-astro.svg", "tags": ["2025年リリース", "Astro", "React"], "description": "2016年よりWordPressを使ったブログを約9年間コツコツと書き続けていたが、拡張機能の乱立やブラックボックスなバックエンドに課題を感じていた。\nそこで、オウンドメディアこそ自分のエンジニアリングの力を発揮すべき領域ではないかという考えのもと、モダンフロントエンドの技術スタックでリニューアルすることにした。\n開発だけでなく、Figmaによるフルスクラッチのデザインや、WordPressから新CMS（Strapi）へのコンテンツ移行も並行して進めたため、構想策定からリリースまでおよそ2年弱を要した。", "referenceLinks": [ { "text": "麩菓子の雑記帳", "href": "https://dagashi.pw" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/dagashipw-astro" } ] }, { "id": "instant-queue", "icon": "/images/works/icons/instant-queue.svg", "thumbnail": "/images/works/thumbnails/instant-queue.jpg", "logo": "/images/works/logos/instant-queue.svg", "tags": ["2025年リリース", "Qwik"], "description": "MixJuiceというSpotifyとWebDAVを統合した楽曲再生サービスを2年前に開発・リリースしたが、Spotify Web Playback SDKの技術要件のハードルが高く、特にiOSではバックグラウンド周りの動作が不安定であった。\nこの2年間でクラブミュージックをよく聴くようになったこともあり、自分の中でWebDAV対応の必要性が薄れていたため(クラブミュージックはほとんどの曲がSpotifyで聴ける)、WebDAVとの統合を捨て「どのデバイスでも安定して複数のSpotifyプレイリストをまたいでシャッフル再生できる」ことを目的として本作を開発した。", "referenceLinks": [ { "text": "InstantQueue", "href": "https://iq.fugamaru.com" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/InstantQueue" } ] }, { "id": "lazybox", "icon": "/images/works/icons/lazybox.webp", "thumbnail": "/images/works/thumbnails/lazybox.webp", "logo": "/images/works/logos/lazybox.webp", "tags": ["2024年リリース", "Electron"], "description": "業務で毎日どれぐらいキーボードを打鍵、マウスをクリックしているのか、そしてそれが社内で何番目のスコアなのかが気になっていた。\nWhatPulseといった有名ツールもあるが、社内コンプラ的にかなりグレーゾーンなため同様の機能を持つツールを自分で開発することにした。\n社内コンプラ遵守のためにインターネットを経由しないランキングシステムを構築する必要があり、UDPのブロードキャストパケットを用いて各PCの打鍵数やクリック数をP2Pで集計する仕組みを実装した。", "referenceLinks": [ { "text": "GitHub", "href": "https://github.com/FUGAMARU/LazyBox" }, { "text": "ブログ記事", "href": "https://dagashi.pw/introducing-lazybox" } ] }, { "id": "mixjuice", "icon": "/images/works/icons/mixjuice.webp", "thumbnail": "/images/works/thumbnails/mixjuice.jpg", "logo": "/images/works/logos/mixjuice.png", "tags": ["2023年リリース", "Next.js", "Firebase"], "description": "SpotifyとWebDAVサーバー上にある音源の統合再生環境。\nSpotifyのスマホ・PCアプリからでもローカルファイルを再生することはできるが、不特定多数のローカルファイルが再生できない問題を少なくとも (2023年時点で) 5年以上は抱えており、サポートに問い合わせても解決される気配がないため、それに対するソリューションとして開発を決意した。\nまた、複数のプレイリストを選択してその中でミックス再生するといった機能が無かったのも開発の決め手。(スマートシャッフルという機能が存在するがプレイリスト外の曲も混ざってくるのでちょっと違う)。\n内部的にSpotify Web Playback SDKをはじめ、Media Session API、パフォーマンスチューニングとしてウィンドウィング (windowing) や、IndexedDBを用いたキャッシュロジックを実装している。", "referenceLinks": [ { "text": "MixJuice", "href": "https://mixjuice.fugamaru.com" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/MixJuice" } ] }, { "id": "mac-home-end", "icon": "/images/works/icons/mac-home-end.svg", "thumbnail": "/images/works/thumbnails/mac-home-end.gif", "logo": "/images/works/logos/mac-home-end.svg", "tags": ["2023年リリース", ".NET Framework"], "description": "macOSではCommandキーと矢印キーを同時押しすることによってHomeキーやEndキー押下時同様の操作ができるが、このキーバインドをWindowsでも利用したいと考えた。\nただ、サードパーティーのツールで同様の機能を実現しているものは調べた限りでは存在しなかったので自分で作ることにした。\n(2023年当時)中学生以来約7年ぶりに.NET FrameworkとC#を使ってコーディングしたが、当時よりもレベルの高いコーディングができ、自身の成長を実感した。", "referenceLinks": [ { "text": "GitHub", "href": "https://github.com/FUGAMARU/MacHomeEnd" }, { "text": "ブログ記事", "href": "https://dagashi.pw/mac-home-down" } ] }, { "id": "shiftup", "icon": "/images/works/icons/shiftup.svg", "thumbnail": "/images/works/thumbnails/shiftup.png", "logo": "/images/works/logos/shiftup.svg", "tags": ["2023年限定リリース", "卒業制作", "Next.js"], "description": "学生時代に学校のオープンキャンパスのアルバイトに参加することがあったが、参加申し込みから実際に出勤するまでにGoogleフォームやDiscordを行き来して数々の操作を行う必要があり、かつそれを1ヶ月毎に繰り返さなければならないという問題があった。\nそんな問題に切り込むべく卒業制作として開発したWebサービス。\n初のグループ開発で、バックエンド以外の全てを担当した。(フロントエンドやインフラ、構想策定、ポスター制作等)", "referenceLinks": [ { "text": "ShiftUP! (デモ)", "href": "https://shiftup.fugamaru.com/" }, { "text": "紹介動画", "href": "https://www.youtube.com/watch?v=VCDzlg5iJpU" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/shiftup" } ] }, { "id": "color-junction", "icon": "/images/works/icons/color-junction.svg", "thumbnail": "/images/works/thumbnails/color-junction.png", "logo": "/images/works/logos/color-junction.svg", "logoScale": 0.9, "tags": ["2022年リリース", "React"], "description": "昔よく遊んでいたiGoogleのミニゲーム、Color Junctionの存在をふと思い出した。\n久々にプレイしてみたくなって探してみたところ、一応当時のColor Junctionを模倣したものが公開されているのを見つけられたものの、ピースが画像による描画だったりと時代遅れ感があったので、リファクタリングして現代に蘇らせてみようと意気込んで開発に着手した。\n右下の方から1列ずつ消していき、半分ぐらいの列まで消し終わったら今度は左下の方から1列ずつ消していくとクリアできる確率が高い？", "referenceLinks": [ { "text": "Color Junction", "href": "https://color-junction.fugamaru.com" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/color-junction" }, { "text": "ブログ記事", "href": "https://dagashi.pw/color-junction" } ] }, { "id": "forex-memo", "icon": "/images/works/icons/forex-memo.svg", "thumbnail": "/images/works/thumbnails/forex-memo.png", "logo": "/images/works/logos/forex-memo.svg", "logoScale": 0.8, "tags": ["2022年リリース", "Nuxt.js"], "description": "ReactとVueの違いを知るため、Vue入門用として開発。\n趣味で外国為替の相場分析をすることがあり、シンボルごとのメモをわかりやすく管理したいと思っていたので、それをそのまま開発コンセプトとした。\n本作を通してVueを学習したが、やはりプログラムっぽい書き方をするReactの方が自分の好みであった。", "referenceLinks": [ { "text": "ForexMemo", "href": "https://forex-memo.fugamaru.com" }, { "text": "GitHub", "href": "https://github.com/FUGAMARU/ForexMemo" } ] }, { "id": "melocure", "icon": "/images/works/icons/melocure.svg", "thumbnail": "/images/works/thumbnails/melocure.jpg", "logo": "/images/works/logos/melocure.svg", "logoScale": 0.8, "tags": ["2021年リリース", "React", "WebSocket"], "description": "2021年当時、レガシーフロントエンドの経験はあったものの、モダンフロントエンドの経験がなかったので手始めにReactに入門することにした。\nその際の題材として「誰かがおすすめしたい曲がラジオ感覚で聴ける、音楽をリアルタイムで共有再生できるサービス」をコンセプトに開発したのが本作である。\n初めてのReactだったのでHooksの使い方などを試行錯誤しながら完成まで持っていった。\nSpotifyとYouTubeに対応している。\nSpotify for Developersの制限がキツくなったので今現在サイト自体は閉鎖している。", "referenceLinks": [ { "text": "GitHub", "href": "https://github.com/FUGAMARU/MeloCure-React" } ] }, { "id": "quartz", "icon": "/images/works/icons/quartz.svg", "thumbnail": "/images/works/thumbnails/quartz.jpg", "logo": "/images/works/logos/quartz.svg", "tags": ["2020年限定リリース", "WebSocket"], "description": "高校の文化祭がコロナの影響で映像コンペに変わり、配信が必要になったため開発。(詳しくは添付のブログ記事を参照)\nWebSocket経由で各クラスに配置したクライアントで再生中のYouTubeソースを一括切り替えするのが主な機能。\n他にも、教室によってはネットワークが不安定な場合もあるので、クライアントごとの再生位置なども管理画面から一括して見れる機能も設けている。", "referenceLinks": [ { "text": "Quartz-Client", "href": "https://quartz.fugamaru.com/" }, { "text": "Quartz-Admin", "href": "https://quartz.fugamaru.com/control.html" }, { "text": "ブログ記事", "href": "https://dagashi.pw/youtube-live/" } ] }, { "id": "twicolle", "icon": "/images/works/icons/twicolle.svg", "thumbnail": "/images/works/thumbnails/twicolle.jpg", "logo": "/images/works/logos/twicolle.svg", "tags": ["2020年リリース", "PHP", "MySQL"], "description": "Twitterを眺めている時間が多く、この時間を他のことに使えないかなと思ったことからユーザー参加型のTwitterまとめサイトを開発した。\n当時もTwitterまとめサイトは存在したが「管理人が投稿した記事をユーザーが読む」という、いわゆるWeb1.0のような形式が多かったため差別化できると考えた。\n外部APIの呼び出し部分やバックエンド側のSQLを初めて実装したのが本作。\nTwitterがXに変わり、API仕様も大幅に変わったためサイトは閉鎖した。", "referenceLinks": [ { "text": "GitHub", "href": "https://github.com/FUGAMARU/Twicolle" } ] }, { "id": "easy-chat", "icon": "/images/works/icons/easy-chat.svg", "thumbnail": "/images/works/thumbnails/easy-chat.png", "logo": "/images/works/logos/easy-chat.svg", "tags": ["2017年リリース", "Socket.IO", "PHP"], "description": "「Minecraft PEサーバーのチャットにWebからでも参加できたら面白そう！」\nその思いつきから開発を始めたEasy-CHAT。本格的かはさておき、いかにも「Web開発」と呼ばれるようなことをしたのは本作が初めて。\nHTML5、CSS3、JavaScriptから始まり、jQuery、MySQL、Node.js(Socket.IO)など、当時の自分が今まで触れたことの無かった技術スタックを用いて開発した。", "referenceLinks": [ { "text": "Easy-CHAT", "href": "https://fugamaru.com/projects/EasyCHAT/index.html" }, { "text": "YouTube①", "href": "https://www.youtube.com/watch?v=COxUN6VmwgU" }, { "text": "YouTube②", "href": "https://www.youtube.com/watch?v=Uzx_Xq4ZBuw" } ] } ] }