tag:crieit.net,2005:https://crieit.net/tags/%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA/feed Crieitでタグ「ポートフォリオ」に投稿された最近の記事 2021-10-25T15:31:36+09:00 https://crieit.net/tags/%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA/feed tag:crieit.net,2005:PublicArticle/17721 2021-10-25T15:29:45+09:00 2021-10-25T15:31:36+09:00 https://crieit.net/posts/Nuxt-js-Rails-OSS-GitHub-web <h1 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h1> <p>今回、個人で開発したWebサービス「Itamaster」の本番稼働版をリリースすることが出来ました！<br /> こちらのサービスを開発しようと思った経緯は、ある日会社で、統合テストの管理・実行を行っていたときに、<strong>「何故ソースコードの管理プラットフォーム（GitHub等）はあるのに、結合テストの管理プラットフォームは無いんだろう」</strong>と思った事がきっかけです。<br /> 開発期間は八ヶ月ほど、作業工数は大体700時間です。</p> <p>弊社、私の所属しているチームは結合テストはExcelによって管理しており、実行記録もExcelを利用しています。<br /> Excelでの管理・実行には、以下のような不便な点がありました。</p> <ul> <li><p>Excelでの作業は、PCにかかる負荷が大きかったこと。<br /> 会社のPCは自宅で扱うようなハイスペックなものではないため、Excelで作業を行っていると、セルをコピーしたりした時に<strong>PCがフリーズしたり、突然Excelが落ちて、保存していないデータが復旧しなかったり</strong>と、作業中に感じる<strong>ストレス</strong>がとても大きかったです。</p></li> <li><p>Excelだと、複数人で一つのファイルに対する作業が出来ないこと。<br /> 共有設定にして複数人で同時に作業すると、Excelが一層重くなったりして、とても実用出来るものではありませんでした。<br /> Excelだと、<strong>一つのファイルは同時に一人でしか作業が出来ず、待ち時間の発生</strong>するメンバーがいました。</p></li> <li><p>ローカルで作業しているメンバーの作業状況が把握出来ないこと。<br /> 私は管理者経験はありませんが、毎日の定時報告会や、Slackでのメッセージを見る限り、作業状況の把握が少しアナログに感じました。<br /> Redmine等の進捗管理ツールも利用していますが、結局は自己申告であり、<strong>「どのくらいの作業が終わっていて、残っているのか」</strong>を管理者が一目で把握することが出来れば、課題を解決できると考えました。</p></li> <li><p>サマリーレポートや、結果一覧表の作成が面倒<br /> Excelから情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......<br /> テストが追加されたり、状況が変わると、また、情報を整理して、Excelに表を作って、割合を求めて、グラフ化して......<br /> <strong>「あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"あ"！！！！！！！」</strong><br /> ってなりました。</p></li> </ul> <p>開発告知記事を書くのは初めてで、至らない点が多々あるかと思いますが<br /> サービスの紹介、開発時の苦労や反省、所感を統括して書きたいと思います。<br /> 最後まで読んでいただければ幸いです。</p> <p>【Twitterリンク】<br /> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/@itamaster_">https://twitter.com/@itamaster_</a></p> <p>【Itamaster】<br /> <a target="_blank" rel="nofollow noopener" href="https://itamaster.work">https://itamaster.work</a><br /> PC推奨です。</p> <p>【Itamaster　操作ガイド】（Itamasterのヘッダーと、フッターにも操作ガイドリンクを設置しています。）<br /> <a target="_blank" rel="nofollow noopener" href="https://qiita.com/Itamaster/items/3c271181e0c9c06d1d08">https://qiita.com/Itamaster/items/3c271181e0c9c06d1d08</a></p> <h1 id="使用技術"><a href="#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93">使用技術</a></h1> <ul> <li>npm 7.6.3</li> <li>nuxtjs 2.15.3 (SPA モード) <ul> <li>サクサクと、Excelのようなもっさり感やストレスの無いUXにしたかったため、SPAによって構築しました。</li> </ul></li> <li>@nuxtjs/storybook 4.0.2 <ul> <li>コンポーネントのレイアウト・動作を開発中にリアルタイムで確認出来る、コンポーネントカタログ作成ツール。<br /> フロントエンドの単体テストの役割も果たします。</li> </ul></li> <li>vuetify (@nuxtjs/vuetify 1.12.1) <ul> <li>MaterialDesignベースのデザインライブラリです。<br /> 少し挙動が不安定な点が目立ちました。</li> </ul></li> <li>ruby 2.6.8</li> <li>Ruby on Rails 6.1.4 (APIモード)</li> <li>Device <ul> <li>ログイン周り。フロントエンドにはトークンを渡します。フロントエンドではトークンをsession storageに一時保存し、axiosのインターセプターに噛ませることで、ログイン機能付きの認証認可を実現しました。</li> </ul></li> <li>EC2(t2.small)</li> <li>S3</li> <li>ALB</li> <li>ACM</li> <li>RDS (mysql)</li> <li>Route53</li> <li>nginx</li> <li>Stripe <ul> <li>クレジットカード決済機能をAPI利用できます。<br /> 顧客情報や、クレジットカード情報を自サーバーで持たなくてよいため、セキュアなシステムの構築が可能です。<br /> また、同様に、決済機能のAPI利用はリスク管理の面からも有効です。</li> </ul></li> </ul> <h1 id="アプリ概要"><a href="#%E3%82%A2%E3%83%97%E3%83%AA%E6%A6%82%E8%A6%81">アプリ概要</a></h1> <p><strong>結合テストの自動化を行わないチームや、手動でのテストを行いたい状況が対象のWebサービス</strong>です。<br /> ユーザーをメールアドレスで招待し、チームを結成。<br /> プロジェクトを立ち上げて、テストスイート毎にテストケースを管理・実行が出来ます。</p> <p>⇓チームの情報を表示するダイアログ<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/865d4a70-6ed5-c5ba-391f-ced31d721833.png" alt="image.png" /></p> <p>⇓プロジェクト、プロジェクト内のテストスイートの管理を行う画面<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/b55c1892-1c76-b9aa-37aa-b0eabc7842b4.png" alt="image.png" /></p> <p>⇓テストスイートの情報を表示するダイアログ<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/c64f28f2-eab8-c765-a40e-284b299735bc.png" alt="image.png" /></p> <p>⇓テストケースの情報を表示するダイアログ<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/e43628c2-0dec-5a4d-c14c-fe672a860915.png" alt="image.png" /></p> <p>⇓テストスイート内のテストケースを実行する画面<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/002c37d0-8c55-ab2d-6415-e45e3d331894.png" alt="image.png" /></p> <p>また、テスト結果一覧表や、テストサマリーレポートも出力可能です。<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/5ce63e70-6a27-8f4c-65a9-f1da499f672f.png" alt="image.png" /></p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/c230b738-0ed5-be27-1e32-2983c6c48d98.png" alt="image.png" /><br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/d80d35c5-4b9e-204f-d960-f9f4a9ececad.png" alt="image.png" /></p> <h1 id="こだわった箇所"><a href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%81%A3%E3%81%9F%E7%AE%87%E6%89%80">こだわった箇所</a></h1> <h2 id="全体的に、明るい色を起用すること"><a href="#%E5%85%A8%E4%BD%93%E7%9A%84%E3%81%AB%E3%80%81%E6%98%8E%E3%82%8B%E3%81%84%E8%89%B2%E3%82%92%E8%B5%B7%E7%94%A8%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8">全体的に、明るい色を起用すること</a></h2> <p>テストという地味な作業は、設計書作成の次に気が滅入り易くなります。<br /> 暗い気持ちになってしまわぬよう、明るい色を起用しつつ、<br /> 緑や薄めの青色をメインに使う事で、ユーザーのモチベーションを維持します。</p> <h2 id="アイコンを多用し、直感的な操作を可能にすること"><a href="#%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E5%A4%9A%E7%94%A8%E3%81%97%E3%80%81%E7%9B%B4%E6%84%9F%E7%9A%84%E3%81%AA%E6%93%8D%E4%BD%9C%E3%82%92%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8">アイコンを多用し、直感的な操作を可能にすること</a></h2> <p>画面にはアイコンを多用して、文字を読まなくても色とアイコンから、ボタンの機能を推測することが可能です。<br /> 直感的に操作することが可能で、作業の効率を向上します。</p> <h2 id="進捗バーをプロジェクトと、テストスイート毎に表示可能にし、一目で状況を確認可能に"><a href="#%E9%80%B2%E6%8D%97%E3%83%90%E3%83%BC%E3%82%92%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A8%E3%80%81%E3%83%86%E3%82%B9%E3%83%88%E3%82%B9%E3%82%A4%E3%83%BC%E3%83%88%E6%AF%8E%E3%81%AB%E8%A1%A8%E7%A4%BA%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%97%E3%80%81%E4%B8%80%E7%9B%AE%E3%81%A7%E7%8A%B6%E6%B3%81%E3%82%92%E7%A2%BA%E8%AA%8D%E5%8F%AF%E8%83%BD%E3%81%AB">進捗バーをプロジェクトと、テストスイート毎に表示可能にし、一目で状況を確認可能に</a></h2> <p>色分けされた進捗バーは、ホバーすることでそれぞれのステータスの件数を確認可能です。<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/7046daf8-49c5-af8c-1ab4-6df7b1d35f1c.png" alt="image.png" /><br /> チームの管理者が、「現在プロジェクト全体で、どれだけのテストが完了しているのか」を一目で確認することが可能です。</p> <h2 id="自分独自のアイコンを設定可能にすること"><a href="#%E8%87%AA%E5%88%86%E7%8B%AC%E8%87%AA%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%82%92%E8%A8%AD%E5%AE%9A%E5%8F%AF%E8%83%BD%E3%81%AB%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8">自分独自のアイコンを設定可能にすること</a></h2> <p><strong>Itamasterは、GitHubのように、OSSのテストをオープンに行う事の出来るプラットフォームを目指します。</strong><br /> アイコンを設定可能にし、画面に多用することで、<strong>今後実装するSNS的な機能が違和感なく利用できます。</strong><br /> （Publicなプロジェクトを表示・検索し、運営しているチームとダイレクトにメッセージをやり取りし、テストを世界中のメンバーと共同して行うような）<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/ffa5c1bf-3579-4550-5ba6-0f913b99be1d.png" alt="image.png" /><br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/875d80d2-7653-19ce-0beb-9829b3f94ab6.png" alt="image.png" /></p> <h1 id="サービス改善告知"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E6%94%B9%E5%96%84%E5%91%8A%E7%9F%A5">サービス改善告知</a></h1> <p style="color:red;"> 2021/10/17 サービスに、操作ガイドページ・Demoページを追加実装しました！ </p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/bacb5f22-edac-0a85-d19d-26cf94088f9a.png" alt="image.png" /><br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/a4f28d96-928e-6da4-52be-6153e3a6488f.png" alt="image.png" /></p> <p>操作ガイドページでは、サービス内の全てのボタンや、項目の意味、操作方法やユースケースを記述しております。<br /> Demoページでは、実際の画面にモックデーターを流し込んだものを使い、操作感や使用イメージを持っていただくことを目的としています。<br /> どちらも無料でご利用いただける機能ですので、よろしければお楽しみください！</p> <p style="color:red;"> 2021/10/20 トップページのレイアウトを変更しました！ </p> <p>旧：<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/d16ed7d0-f360-5ebf-1ae2-76809f111587.png" alt="image.png" /><br /> 新：<br /> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1869061/5752c7cd-dd2e-784d-1ac9-fec76e29f3a8.png" alt="image.png" /></p> <p><strong>変更にあたって、具体的に意識した点</strong></p> <ul> <li>設計思想をメインコンセプトとして表示</li> <li>注目線を意識し、印象付けたい文言を左側に配置する</li> </ul> <p><strong>アニメーション</strong>が少しだけ配置されているので、実際に見ていただければ、と存じます！</p> <h1 id="サービスのこれから"><a href="#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E3%81%93%E3%82%8C%E3%81%8B%E3%82%89">サービスのこれから</a></h1> <h2 id="トップページのレイアウト改善"><a href="#%E3%83%88%E3%83%83%E3%83%97%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E6%94%B9%E5%96%84">トップページのレイアウト改善</a></h2> <p>とりあえず、第一課題です。<br /> 現状注目線があっちこっちに行ってしまっており、とてもわかりにくいページになっています。<br /> デザインを勉強しつつ、わかりやすく、「使ってみたい」と思っていただけるようなトップページにしたいと思っております。</p> <h2 id="チーム公開機能の実装"><a href="#%E3%83%81%E3%83%BC%E3%83%A0%E5%85%AC%E9%96%8B%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F%E8%A3%85">チーム公開機能の実装</a></h2> <p>public設定のチームをいくつか表示し、興味の出たOSSのテスト等に世界中から参画希望を出せるようにします。<br /> 本来の設計思想である、「何故OSSをGitで管理するように、テストを世界中のエンジニアと管理実行するプラットフォームは無いのか」という疑問を解決する機能なので、じっくり作り込みたいと思っています。<br /> 現状は、<br /> ・Topics<br /> ・Search<br /> ・Explore<br /> の三画面を開発して、世界中のチームを見られるようにしたいと思っています。</p> ふぁる@個人開発 tag:crieit.net,2005:PublicArticle/14513 2018-08-22T23:41:11+09:00 2021-02-26T14:50:30+09:00 https://crieit.net/posts/0352bad1af555a5f381102ee17f1ddea <p><a target="_blank" rel="nofollow noopener" href="https://dala00.alphabrend.net">WebVR版</a></p> <h2 id="書籍（単著）"><a href="#%E6%9B%B8%E7%B1%8D%EF%BC%88%E5%8D%98%E8%91%97%EF%BC%89">書籍（単著）</a></h2> <p><a target="_blank" rel="nofollow noopener" href="https://www.shuwasystem.co.jp/book/9784798059310.html">個人開発のための Webサービス公開マニュアル</a><br /> 秀和システムより出版<br /> <a href="https://crieit.now.sh/upload_images/01b220b58fd2f913ea6f07542d8741565dff7796566f3.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/01b220b58fd2f913ea6f07542d8741565dff7796566f3.png?mw=700" alt="" /></a></p> <h2 id="自作アプリケーション"><a href="#%E8%87%AA%E4%BD%9C%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">自作アプリケーション</a></h2> <h3 id="フォーメーションバトル"><a href="#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%90%E3%83%88%E3%83%AB">フォーメーションバトル</a></h3> <p>集めたキャラクターでパーティーを作り、フォーメーションを組んで敵を倒して進んでいくレトロでシンプルでカジュアルなロールプレイングゲーム。</p> <p>Android<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=com.alphabrend.formationbattle">https://play.google.com/store/apps/details?id=com.alphabrend.formationbattle</a></p> <p>iOS<br /> <a target="_blank" rel="nofollow noopener" href="https://apps.apple.com/us/app/id1527275998">https://apps.apple.com/us/app/id1527275998</a></p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5f6beb1256390.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5f6beb1256390.png?mw=700" alt="" /></a></p> <p>Godot</p> <h3 id="iOS Screenshot Resizer"><a href="#iOS+Screenshot+Resizer">iOS Screenshot Resizer</a></h3> <p>iOSアプリ用に使用する5.5インチ用スクリーンショットを6.5インチ、iPadサイズにリサイズするツール</p> <p><a target="_blank" rel="nofollow noopener" href="https://ios-screenshot-resizer.alphabrend.com/">https://ios-screenshot-resizer.alphabrend.com/</a></p> <p>React, PHP, Bulma</p> <h3 id="誰でも作曲家、演奏家"><a href="#%E8%AA%B0%E3%81%A7%E3%82%82%E4%BD%9C%E6%9B%B2%E5%AE%B6%E3%80%81%E6%BC%94%E5%A5%8F%E5%AE%B6">誰でも作曲家、演奏家</a></h3> <p>音楽に詳しくなくてもオリジナルの曲を演奏できるアプリ</p> <p>Android<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=com.alphabrend.composer">https://play.google.com/store/apps/details?id=com.alphabrend.composer</a><br /> iOS<br /> <a target="_blank" rel="nofollow noopener" href="https://apps.apple.com/us/app/anyone-composer/id1512752830?l=ja&ls=1">https://apps.apple.com/us/app/anyone-composer/id1512752830?l=ja&ls=1</a></p> <p><a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5ebbf56f4febb.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5ebbf56f4febb.png?mw=700" alt="" /></a></p> <p>Flutter, Dart, Kotlin, Swift</p> <h3 id="リバーシ棋譜ツール"><a href="#%E3%83%AA%E3%83%90%E3%83%BC%E3%82%B7%E6%A3%8B%E8%AD%9C%E3%83%84%E3%83%BC%E3%83%AB">リバーシ棋譜ツール</a></h3> <p>リバーシの棋譜を簡単に残せるツール<br /> <a target="_blank" rel="nofollow noopener" href="https://reversi-game-record.appllis.net">https://reversi-game-record.appllis.net</a></p> <p><a href="https://crieit.now.sh/upload_images/61fd069846dedc576771f87b342990b95ea6d5632e171.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/61fd069846dedc576771f87b342990b95ea6d5632e171.png?mw=700" alt="" /></a><br /> Next.js, Vercel</p> <h3 id="はなまるスケジュール"><a href="#%E3%81%AF%E3%81%AA%E3%81%BE%E3%82%8B%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB">はなまるスケジュール</a></h3> <p>毎日のタスクの達成を記録</p> <p>Android版<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=com.alphabrend.hanamaru">https://play.google.com/store/apps/details?id=com.alphabrend.hanamaru</a><br /> iOS版<br /> <a target="_blank" rel="nofollow noopener" href="https://apps.apple.com/us/app/hanamaru-achievement/id1504011585?l=ja&ls=1">https://apps.apple.com/us/app/hanamaru-achievement/id1504011585?l=ja&ls=1</a><br /> <a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5e7f45fe70435.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5e7f45fe70435.png?mw=700" alt="" /></a></p> <p>Flutter, Dart</p> <h3 id="何度もアラームスケジューラー"><a href="#%E4%BD%95%E5%BA%A6%E3%82%82%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%A0%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%BC">何度もアラームスケジューラー</a></h3> <p>アラームアプリ<br /> Android版<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/details?id=com.alphabrend.reminder">https://play.google.com/store/apps/details?id=com.alphabrend.reminder</a><br /> iOS版<br /> <a target="_blank" rel="nofollow noopener" href="https://apps.apple.com/us/app/alarm-and-alarm/id1501942438?l=ja">https://apps.apple.com/us/app/alarm-and-alarm/id1501942438?l=ja</a><br /> <a href="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5e6ce95f892ee.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/6e2af66c610d88bc766649f72032893a5e6ce95f892ee.png?mw=700" alt="" /></a></p> <p>Flutter, Dart</p> <h3 id="Sound Shooter"><a href="#Sound+Shooter">Sound Shooter</a></h3> <p>Oculus Quest向けWebVR 音ゲー<br /> <a target="_blank" rel="nofollow noopener" href="https://sound-shooter.webvr-game.net/">https://sound-shooter.webvr-game.net/</a><br /> <img src="https://sound-shooter.webvr-game.net/images/card.png" alt="" /></p> <p>Vue.js, A-Frame, Laravel6.0, Netlify, Heroku</p> <h3 id="WebVRポートフォリオ"><a href="#WebVR%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA">WebVRポートフォリオ</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://dala00.alphabrend.net">https://dala00.alphabrend.net</a><br /> <img src="https://dala00.alphabrend.net/images/card.png" alt="" /><br /> Vue.js, Netlify, A-Frame</p> <h3 id="100の質問メーカー"><a href="#100%E3%81%AE%E8%B3%AA%E5%95%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC">100の質問メーカー</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://questions.appllis.net">https://questions.appllis.net</a><br /> <img src="https://questions.appllis.net/img/main.png" alt="" /><br /> Nuxt.js2.4, Express4, TypeORM0.2, Google Compute Engine, Cloud SQL(MySQL5.7)</p> <h3 id="Crieit"><a href="#Crieit">Crieit</a></h3> <p>エンジニア、クリエイターのためのコミュニティ<br /> <a href="https://crieit.net">https://crieit.net</a></p> <p>PHP7.2, Laravel5.8, MySQL8.0, Vue.js, Cloud Run</p> <h4 id="日本で最速の技術系記事投稿サービス"><a href="#%E6%97%A5%E6%9C%AC%E3%81%A7%E6%9C%80%E9%80%9F%E3%81%AE%E6%8A%80%E8%A1%93%E7%B3%BB%E8%A8%98%E4%BA%8B%E6%8A%95%E7%A8%BF%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9">日本で最速の技術系記事投稿サービス</a></h4> <p><a href="https://crieit.net/posts/Crieit-5c7c535c6fca2">Crieitの記事詳細ページが日本の技術系投稿サービスで最速になった</a></p> <h4 id="OGP画像生成サーバー"><a href="#OGP%E7%94%BB%E5%83%8F%E7%94%9F%E6%88%90%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC">OGP画像生成サーバー</a></h4> <p><a href="https://crieit.net/posts/Node-Chrome-Twitter">NodeでChromeを操作してTwitterシェア用画像を生成するサーバー作った</a></p> <h4 id="Nowを使ったCloud Storageのキャッシュサーバー"><a href="#Now%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9FCloud+Storage%E3%81%AE%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC">Nowを使ったCloud Storageのキャッシュサーバー</a></h4> <p><a href="https://crieit.net/posts/Now-Cloud-Storage">NowのエッジキャッシュでCloud Storage節約サーバー作成</a></p> <h3 id="ネココさんトーク"><a href="#%E3%83%8D%E3%82%B3%E3%82%B3%E3%81%95%E3%82%93%E3%83%88%E3%83%BC%E3%82%AF">ネココさんトーク</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://nekoko.alphabrend.com">https://nekoko.alphabrend.com</a><br /> Nuxt.js, Firebase, Google App Engine</p> <h3 id="とりまプロフィール"><a href="#%E3%81%A8%E3%82%8A%E3%81%BE%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB">とりまプロフィール</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://torima.appllis.net">https://torima.appllis.net</a><br /> Elixir1.5, Phoenix1.3, Vue, MySQL5.7, GCE</p> <h3 id="TLシェア（削除済み）"><a href="#TL%E3%82%B7%E3%82%A7%E3%82%A2%EF%BC%88%E5%89%8A%E9%99%A4%E6%B8%88%E3%81%BF%EF%BC%89">TLシェア（削除済み）</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://tlshare.appllis.net">https://tlshare.appllis.net</a><br /> <img src="https://tlshare.appllis.net/img/card.png" alt="" /><br /> PHP7.3, Laravel5.8, Vue.js, Google Compute Engine, Cloud SQL(MySQL5.7)</p> <h3 id="Bill Builder（システム売却済みのため終了）"><a href="#Bill+Builder%EF%BC%88%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E5%A3%B2%E5%8D%B4%E6%B8%88%E3%81%BF%E3%81%AE%E3%81%9F%E3%82%81%E7%B5%82%E4%BA%86%EF%BC%89">Bill Builder（システム売却済みのため終了）</a></h3> <p>請求書作成サービス。終了したけど自分用にアクセス制限して運用中。ハンコも登録できるし無限に作れる。</p> <p><a target="_blank" rel="nofollow noopener" href="https://bill.alphabrend.com">https://bill.alphabrend.com</a></p> <p>Elixir1.5, Phoenix1.2, MySQL5.7, GCE</p> <h3 id="Copying Live（削除済み）"><a href="#Copying+Live%EF%BC%88%E5%89%8A%E9%99%A4%E6%B8%88%E3%81%BF%EF%BC%89">Copying Live（削除済み）</a></h3> <p>サイボウズLiveのコピー企画<br /> <a target="_blank" rel="nofollow noopener" href="https://live.alphabrend.com">https://live.alphabrend.com</a></p> <p>Elixir1.5, Phoenix1.3, Vue2, MySQL5.7, GCE</p> <h3 id="ひとりもくもく会（放置のため実質終了）"><a href="#%E3%81%B2%E3%81%A8%E3%82%8A%E3%82%82%E3%81%8F%E3%82%82%E3%81%8F%E4%BC%9A%EF%BC%88%E6%94%BE%E7%BD%AE%E3%81%AE%E3%81%9F%E3%82%81%E5%AE%9F%E8%B3%AA%E7%B5%82%E4%BA%86%EF%BC%89">ひとりもくもく会（放置のため実質終了）</a></h3> <p>プログラミング作業ログサービス<br /> <a target="_blank" rel="nofollow noopener" href="https://mokumoku.alphabrend.com">https://mokumoku.alphabrend.com</a></p> <p>PHP5.6, CakePHP3, MySQL5.6, Angular2, wercker</p> <h3 id="はてなブックマーク増加チェッカー（削除済み）"><a href="#%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E5%A2%97%E5%8A%A0%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC%EF%BC%88%E5%89%8A%E9%99%A4%E6%B8%88%E3%81%BF%EF%BC%89">はてなブックマーク増加チェッカー（削除済み）</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://hatena.alphabrend.com">https://hatena.alphabrend.com</a><br /> Elixir1.5, Phoenix1.3, Vue, MySQL5.7, GCE</p> <h3 id="こども向けアプリ等"><a href="#%E3%81%93%E3%81%A9%E3%82%82%E5%90%91%E3%81%91%E3%82%A2%E3%83%97%E3%83%AA%E7%AD%89">こども向けアプリ等</a></h3> <p>簡易なりきりゲーム<br /> <a target="_blank" rel="nofollow noopener" href="https://play.google.com/store/apps/developer?id=Alphabrend">https://play.google.com/store/apps/developer?id=Alphabrend</a></p> <p>Godot, Cocos2d-x(JavaScript)</p> <h3 id="Yahoo! mobageにてRPG (終了)"><a href="#Yahoo%21+mobage%E3%81%AB%E3%81%A6RPG+%28%E7%B5%82%E4%BA%86%29">Yahoo! mobageにてRPG (終了)</a></h3> <p>ブラウザ＆Android<br /> Cocos2d-x(JavaScript), PHP5.6, CakePHP2</p> <h3 id="その他"><a href="#%E3%81%9D%E3%81%AE%E4%BB%96">その他</a></h3> <ul> <li>AndroidアプリにてRPGリリース</li> <li>mixiアプリいくつかリリース</li> <li>PHP4フレームワークちいたんリリース</li> </ul> <p>等</p> <h2 id="unityroom"><a href="#unityroom">unityroom</a></h2> <h3 id="テストリリトステ"><a href="#%E3%83%86%E3%82%B9%E3%83%88%E3%83%AA%E3%83%AA%E3%83%88%E3%82%B9%E3%83%86">テストリリトステ</a></h3> <p><a target="_blank" rel="nofollow noopener" href="https://unityroom.com/games/tetrisirtet">https://unityroom.com/games/tetrisirtet</a></p> <h2 id="書籍"><a href="#%E6%9B%B8%E7%B1%8D">書籍</a></h2> <h3 id="個人開発をはじめよう！クリエイター25人の実践エピソード"><a href="#%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%82%92%E3%81%AF%E3%81%98%E3%82%81%E3%82%88%E3%81%86%EF%BC%81%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%82%BF%E3%83%BC25%E4%BA%BA%E3%81%AE%E5%AE%9F%E8%B7%B5%E3%82%A8%E3%83%94%E3%82%BD%E3%83%BC%E3%83%89">個人開発をはじめよう！クリエイター25人の実践エピソード</a></h3> <p>技術書典６で販売され、最終的に商業出版された合同誌です。参加させていただきました。</p> <p><a target="_blank" rel="nofollow noopener" href="https://www.amazon.co.jp/dp/B086DBQC8L/ref=cm_sw_r_tw_dp_x_BYjaFbQ0NX06F">個人開発をはじめよう！クリエイター25人の実践エピソード</a></p> <p><a href="https://crieit.now.sh/upload_images/b85273b68db8285e6f96cb1ee8c954d65f01d7e6379aa.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/b85273b68db8285e6f96cb1ee8c954d65f01d7e6379aa.jpg?mw=700" alt="51pao82KtBL.jpg" /></a></p> <p>下記は技術書典版</p> <h4 id="個人開発がやりたくなる本 - クリエイター13人の実録エッセイ"><a href="#%E5%80%8B%E4%BA%BA%E9%96%8B%E7%99%BA%E3%81%8C%E3%82%84%E3%82%8A%E3%81%9F%E3%81%8F%E3%81%AA%E3%82%8B%E6%9C%AC+-+%E3%82%AF%E3%83%AA%E3%82%A8%E3%82%A4%E3%82%BF%E3%83%BC13%E4%BA%BA%E3%81%AE%E5%AE%9F%E9%8C%B2%E3%82%A8%E3%83%83%E3%82%BB%E3%82%A4">個人開発がやりたくなる本 - クリエイター13人の実録エッセイ</a></h4> <p><a target="_blank" rel="nofollow noopener" href="https://booth.pm/ja/items/1313332">【電子版】個人開発がやりたくなる本 - クリエイター13人の実録エッセイ - #IndieCoderJP - BOOTH</a></p> <h2 id="登壇"><a href="#%E7%99%BB%E5%A3%87">登壇</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://yahoo-osaka.connpass.com/event/99917/">Osaka Mix Leap Joint #16 - 制作物天下一武道会</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://vuekansai.connpass.com/event/110542/">v-kansai Vue.js/Nuxt.js meetup #1</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://laravel.connpass.com/event/126917/">[PHP] laravel.osaka #14</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://vuekansai.connpass.com/event/122664/">v-kansai Vue.js/Nuxt.js meetup #5</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://osaka-driven-dev.connpass.com/event/136211/">【大阪】XRミーティング 2019/07/17【AR/CR/MR/SR/VR】</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://0215-freelance.peatix.com/?lang=ja">Freelance Talk Session Kansai</a></li> </ul> <h2 id="執筆"><a href="#%E5%9F%B7%E7%AD%86">執筆</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://findy-code.io/engineer-lab/remote-work-with-children">楽しい？　大変！？　子育てをしながらのリモートワーク | Findyブログ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://offers.jp/media/sidejob/workstyle/a_1760">PHPの副業事情。開発案件の注意点や個人開発での学び | Offers Magazine</a></li> </ul> だら@Crieit開発者