tag:crieit.net,2005:https://crieit.net/users/Itamaster_/feed Crieitでユーザーふぁる@個人開発による最近の投稿 2021-10-25T15:31:36+09:00 https://crieit.net/users/Itamaster_/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> ふぁる@個人開発