ゆるくつながるコミュニケーションサービス

「ゆるくつながる」コミュニケーションサービス。 デスクトップの右上に常駐するUIによって、チームメンバーのステータスを簡単に確認でき、話しかけるハードルをぐんと下げます<h1 id="h142cfcc5c2">リモートワークでの課題</h1><img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/b4d2746907454cd5815c50e4032b0341/kxbzdtly2flpwbhkvnxt.jpg" alt=""> リモートワークをしていて、「質問しづらい」「声をかけづらい」と感じたことはないでしょうか？対面であれば、簡単に声をかけることができますが、リモートではハードルが高くなってしまいます。<h1 id="hf840b06580">SOBANI</h1>SOBANIは、リモートワークでも「ゆるく」繋がるコミュニケーションサービスです。常にディスプレイの右上に常駐するデスクトップアプリケーションで、チームメイトのステータスが簡単に確認できます。 <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/7ec8ad9df2764ecc85645b2dd09bf540/apftbqznjphxhsfih4t5.png" alt=""> 簡単なチャット機能も実装しており、絵文字によるリアクションなども可能です。<h2 id="hd86356006e">ホウレンソウを促進</h2>1時間に1回、ステータスの更新を促すダイアログが表示されます。これによって、ステータスを更新し忘れることはありません。 <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/77c6e50b0daf4af7994e0cc1f20818a1/etkwkhgkrq4t8y5nl8wb.png" alt=""> また、「おたすけを出す」ステータスも表示しています。実装に詰まった場合は、おたすけステータスを選択した上でその内容をコメントすることで、手が空いているチームメンバーに助けてもらうことが可能です。<h2 id="h2509a8eb25">VSCode拡張</h2> <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/35db35a26dbf4d59bdb267bc9796ed4d/nspfnhaubjdkrqzdvjbs.png" alt=""> VSCode拡張も提供しています。コードを書かないまま、一般的に相談の目安とされている15分が経過すると、おたすけのリクエストを促すダイアログが表示されます！<h1 id="h23061a5cab">技術構成</h1> <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/3136bc7a962c4b6eb65d6341a57c8dc1/vumbrsp1uo9neqojys9d.jpg" alt=""> フロントエンドに Electron/React/Vite、バックエンドに firebase を利用しています。

SOBANI

【乾杯で友達になる】カップホルダー型デバイス カップホルダーを使って乾杯をすると、ユーザープロフィールを自動で交換。乾杯するごとに他の参加者のプロフィールがアンロック。目指せ全員と乾杯！

<h1 id="he3ab77d407">懇親会で自分から話しかけるのが一番緊張する</h1> 最近はコロナの制限がなくなり、オフラインのイベントや懇親会が増えてきましたし、今後も更に増えていくでしょう。 しかし、オフラインの懇親会では知らない人に話しかける勇気がでなかったり、そもそも話すきっかけがなかったりすることがあると思います。 懇親会に参加しているということは、話しかけられた側も嬉しいはずなのに、最初の一言目のハードルがとんでもなく高いんですよね…。 ましてや、「SNS交換しよう」と自分から言い出すのはかなりのハードルの高さです！ 私たちが開発した「Kanpai!」では、乾杯の動作に合わせて SNS の交換を行うことができます。これにより、話すきっかけが生まれ、また、SNS の交換を忘れることもありません。 乾杯するごとに相手のプロフィールがアンロックされるのでゲーム要素を楽しみつつ、相手のことが知れるようになっています。話の種があるので、何を話せばいいのか分からないという方も安心です！ また、会場にプロジェクターがあれば、会場内の総乾杯数を表示し、会場の盛り上がりを演出することもできます。色んな人とKanpai!して、盛り上がりましょう！ <h2 id="habbbd8be43">解決する課題</h2> <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/e0af61b5d4ad44a6a4936d471080be1b/97260a00-600b-43c7-b459-99f1a0aff2b8.png?w=1024&amp;h=576" alt=""> <h2 id="h70589a8995">機能</h2> 1. 事前に回答した質問の答え（例えば、自分の役職や話したい内容など）に応じて、コップの底面のLEDの色が変化！話しかける <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/b78856917ab44a1f8b07c36e67898dd5/dfdfb4f5-ca66-4274-ad2c-1afa58a11d24.png?w=1024&amp;h=576" alt=""> 2. 乾杯したら乾杯相手のプロフィールがアンロック！たくさんの人と乾杯しよう！ <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/c849c3d5786045c8b8d22abda7399e39/c2c4e4ac-0658-421b-8f6a-df1b04933a37.png" alt=""> 3. 話題がなくなったら、アプリで相手のプロフィールを確認しよう！直近で乾杯した相手のプロフィールが表示されています <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/9c665d61a25f458a9f8889bb345515df/1b72ee24-b645-4f8c-969a-04d859a50ead.png" alt=""> 4. 乾杯した時に交換されたSNS情報は後からでも確認可能！連絡先を交換し忘れる心配はなし <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/8dd138b30c694fbfb548f156f5d46bd7/de579e5e-37d3-4644-ba6c-278e33b3f992.png" alt=""> 5. （実験的機能）乾杯後の会話を文字起こし → ChatGPTで要約し、会話した内容からキーワードを抽出。後から、誰とどんな会話をしたか思い出す手掛かりになります。 <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/c71e4fc7912c4b11ad5cb7a5a63d65f4/a533a62a-b59b-442c-b62d-0900507d63e8.png" alt=""> <h1 id="hdf8a4d8b2f">システム構成</h1><ol><li>IoTデバイスのIMUで乾杯を検知</li><li>テープLEDの発光とともに、互いの固有IDを赤外線で送受信する</li><li>受け取った固有IDをBLEでスマートフォンのKanpai!アプリに送信</li><li>Kanpai!アプリがIDを受け取り、サーバー（Firestore）に該当IDに対応するユーザー情報をリクエスト</li><li>サーバーから受け取ったユーザー情報をアプリ画面上に表示</li></ol><img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/4ba5fdb2e59c48fd93f1fa150794dc86/08e12470-a25c-4526-b1af-78de3ce73363.png" alt="">

Kanpai!

子育て日記から不安や悩みをAIによって抽出し、同じ悩みを抱える育児者とマッチングさせるサービス

CSRやSSRなどのレンダリング手法それぞれのメリットを活かし、表示速度の速いサービスを構築します。

Next.js

React Hookなどの最新の技術を活かし、高品質でモダンなWebサイトを短期間で制作します。規模に関わらず、さまざまなWebサイトを制作できます。

React

React( or Next.js), TypeScriptによるWebアプリの開発に主に用います。フロントエンドとして最も使用する技術であり、深い知見があります。 バックエンドとして使用することもあります。フレームワークはExpressを採用することが多く、主にハッカソン等で、堅固な実装よりも効率的な実装が求められる際に使用します。

フロントエンドとして最も使用する技術で深い知見があります

TypeScript

Tailwind CSS

Node.js

Express

このアプリでは、ユーザは日々の育児の出来事を日記に記録することができる。記録された日記の内容をAIで分析し、不安や悩みを抽出する。そして、その不安や悩みの解決策をさまざまな観点から提供することで、育児の不安を解消することを目指す。例えば、同じ悩みを抱え、解決した他のユーザーとマッチングさせ、相談の機会を提供する。また、行政と連携させることで、育児支援情報の提供などの地域包括的なサポートも視野に入れている。 このアプリの最大の特徴は、日記から育児の不安を抽出する点にある。日記形式にすることで、人には話さない本音の気持ちを引き出すことができる。これにより、カウンセラーに相談するよりも、より当事者に寄り添ったサポートが可能となる。また、日記から抽出した不安に沿った情報を提供することで、ユーザーは能動的に育児の情報を収集する必要がなくなる。行政と連携することで、効果的な情報を適切なタイミングで提供できる。 将来的には、全国の自治体への導入を目指す。このアプリを活用することで、子育て世代の不安を解消するだけでなく、出生率の向上や少子化の課題解決にも貢献することが期待される。

babyC

様々なインフルエンサーが色んな個性が溢れるテーマでセレクトしたお洋服を販売するセレクトショップ

Shopify

Cuteee Select(キューティーセレクト)は、様々なインフルエンサーが色んな個性が溢れるテーマでセレクトしたお洋服を販売するセレクトショップです。	こだわりの詰まったそれぞれの『好き』をファッションで表現してみませんか？憧れのインフルエンサーと共に自分らしさを全力発信！！

Cuteee Select

キャラクターが喋る、見て！聞いて！楽しい！ビンゴアプリ

※デスクトップアプリのため、<a href="https://github.com/yuuumiravy/tsumugi-kasukabe-bingo#%E6%98%A5%E6%97%A5%E9%83%A8%E3%81%A4%E3%82%80%E3%81%8E%E3%81%AE%E3%83%93%E3%83%B3%E3%82%B4%E5%A4%A7%E4%BC%9A" target="_blank" rel="noopener noreferrer">こちら</a>からインストールしていただくことを推奨します。<a href="https://miravy.com/tools/bingo/" target="_blank" rel="noopener noreferrer">Web版</a>は一部動作が利用できませんので予めご了承ください <h2 id="h0e9e252bf8">もう全てのマスを探さない。</h2>従来のビンゴアプリでありがちな「どの列の番号が当たったのかが分かりにくい」という問題を解消！ このアプリでは、ビンゴカードの 5 つの列ごとに色分けしました。これによって、いちいちすべてのマス目を確認する必要はありません！ <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/80513483b53847bb934d83c3831226b7/bingo-start.png" alt=""><h2 id="h08721ed19e"> さっき当たった番号なんだっけ？を解消</h2>直近に当たった番号を履歴として表示。もう隣の人にイヤな顔をされることもありません！ <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/00fcd2df329a42918ceb8d9657298c92/bingo1.png" alt=""><h2 id="h362da824e4"> 見て、聞いて、楽しいルーレット！</h2>スタートボタンを押すと、ルーレットが回ります。さらに、春日部つむぎが声で番号を教えてくれます。 <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/7cd40b9fcacd423898faaaf35871c0aa/bingo-roulette.gif" alt=""><h2 id="hbe277dc989"> 途中から再開</h2>「パソコンが落ちてしまった！」といった時にもご安心ください。このアプリには、オートセーブ機能があります。ホーム画面の「つづきから」ボタンからはじめれば、再開できます。 もちろん、リセットして最初から始めたいという場合は、「はじめから」ボタンから始めることもできます。&nbsp; <img src="https://images.microcms-assets.io/assets/00cb1ab6881848cb95a552ddfc343925/7588316f4785429395bc82266eaae5f1/home.png" alt="">

春日部つむぎのビンゴ大会

GMOインターネットグループ株式会社のハッカソンで開発した。

echoを用いてバックエンドAPIを構築します。チーム開発で使用することが多いです。

echo

Ticketman

上位１％の学生エンジニアが100名以上所属するコミュニティ「STECH」のメンバー向けサイト

上位１％の学生エンジニアが100名以上所属するコミュニティ「STECH」のメンバーが利用するWebサイトです。 メンバーのプロフィールページを通じて交流をお互いのことを知ることができます。 現在は、イベント機能やポイント・ランク機能などを開発中です。 なお、内部メンバー向けサイトではありますが、外部にも<a href="https://www.stech-membership.com/home" target="_blank" rel="noopener noreferrer">一部ページ</a>を公開をしています。

STECHメンバーズサイト

リアルタイム＆自動保存ができるモダンな文字数カウントツール

様々なライブラリやAPIを用いて、高機能なコンポーネントを素早く実装します。表示速度を意識し、モバイル端末でも表示が早く離脱率の低いサイトをお作りします。	部品ごとの実装もお任せください。

jQuery

HTML5の知識があり、セマンティックマークアップを意識的に行なっています。 フリーランス時代は、HTMLと<a href="/works/php">PHP</a>を用いてWebサイト制作を行なっていました。 現在は、HTML単体で開発することはなく、<a href="/skills/react">React</a>のJSXで利用することが多いです。 以下で掲載しているWorksは、HTMLの要素が強いものに絞っています。 特に、<a href="/works/old-portfolio" target="_blank" rel="noopener noreferrer">旧PORTFOLIO</a>はHTMLとCSSを学び終えてすぐに制作したWorkですので、ぜひご覧ください！

HTML

Sassを用いて、より効率的に制作します。積極的に共通部分を纏めることで、全体の見通しの良い、保守性の高いコードを目指します。また、ブラウザ間の互換性も確保します。

Sass

従来のカウントツールでは、ブラウザを閉じてしまうとデータが永久に消えてしまったり、文字入力スペースが小さく不便という問題がありました。このツールを使えば、そのようなストレスからは解放されます。UI/UXへ最大限配慮したこだわりの文字カウントツールです。

文字数カウントツール

毎日のストア運営業務を一元管理することのできるアプリ

Laravelを用いることで、よりセキュリティの高いアプリケーションを素早く開発します。機能ごとに記述場所を分けることで、保守性の高い見通しのよいコーディングが可能です。

Laravel

LaravelによるバックエンドのAPI開発等に使用します。Laravelを通してAPIの設計思想については一通り触れているため、他の言語でも活躍できる自信があります。フリーランス時代は、WordPressによるブログ制作にも使用していました。

Mainchi - Everyday Todo App

「何色にも変幻自在」というテーマのもとに、グラデーションをあしらうことで私の多様な可能性を表現

PORTFOLIO

WebRTC技術を用いたクルマとクルマと繋ぐ新しいマッチングアプリ パイオニア株式会社のハッカソンで開発

CSSのみでは表現できない機能や、条件による動的表示をするサイトをお作りします。アプリケーション開発では、入力に対するリアルタイム処理やAjax	などを実装し、機能の幅を大きく広げます。

JavaScript

クルマッチング

JPHACKS2022で製作した「令和の貯金箱」！！PayPayやAmazonと連携することで報酬管理も容易に可能！

貯Pay箱

食事のカロリーを負債に見立て、それを運動によって返済するダイエットサイクルを促進するアプリ

MySQL

負債くん

ゲーム「ドット＆ボックス」をCUIアプリにしました！

主にスクレイピングを行うために使用することが多いです。CUIアプリケーションを開発した経験もあります。

Python

アイスブレークで、紙とペンを渡されてドット＆ボックスをしました。その時に、「ペンのインクがもったいない！」と思い、CUIアプリをその日のうちにリリースしました。

dot-and-box-cui

アンティーク家具&amp;雑貨を取り扱うアンティークショップ

チェルシーオールド

jQueryのみで動的な診断ツールを実装しました。

もともとWebサイト制作を生業にフリーランスエンジニアとして活動していたため大変自信があります。特に、UI/UXが好きなため、CSSを活用してデザインを実現する技術に関しては誰にも負けません。最近ではReactを用いたWebアプリ開発を行うことが多く、その開発でTailwind CSSやMUIといったUIライブラリを活用します。CSSの知見を最大限活かした開発を行うことができます。

思い描いたデザインを表現できる部分が好きです

心理的安全性診断ツール

美女率名古屋No.1のレンタル彼女サイト

WordPress

保守契約で長期的に機能追加やバグフィックスも行いました。 WordPressで制作しました。モバイルユーザーをメインターゲットとして構成されておりますので、ご覧になる際はぜひスマートフォンをご使用ください。

Works