tag:crieit.net,2005:https://crieit.net/tags/%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0/feed Crieitでタグ「タイムトラッキング」に投稿された最近の記事 2019-05-23T11:54:36+09:00 https://crieit.net/tags/%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0/feed tag:crieit.net,2005:PublicArticle/15013 2019-05-23T11:54:13+09:00 2019-05-23T11:54:36+09:00 https://crieit.net/posts/Hackaru <p><a href="https://crieit.now.sh/upload_images/5f974061f5400e367579c49bfc30ecf45ce60a763e52b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/5f974061f5400e367579c49bfc30ecf45ce60a763e52b.png?mw=700" alt="eyecatch.png" /></a></p> <p>こんにちは。@ktmoukといいます。時間を管理するアプリ「<a target="_blank" rel="nofollow noopener" href="https://www.hackaru.app">Hackaru</a>(測る)」を一人で開発しています。</p> <p>今年の4月に公開したばかりなのですが、すでに本格的に使用されているユーザさんもいて、フィードバックをいただいたり大変助かっています。本当にありがとうございます。</p> <p>今回、投稿を始めた経緯は、個人開発を通して学んだことをシェアしていきたいなと思ったからです。技術的なナレッジはネット上に沢山ありますが、個人開発のナレッジは比べて少ないですし、私自身も試行錯誤しています。今後、個人で開発をされる方の参考に少しでもなれば幸いです。</p> <p>本稿では、私が今開発しているHackaruがどんなアプリか、なぜ作ったのか、どうやって作ったのかを簡単に書いていきたいと思います。</p> <h1 id="どんなアプリ？ - 時間を振り返るためのアプリです。"><a href="#%E3%81%A9%E3%82%93%E3%81%AA%E3%82%A2%E3%83%97%E3%83%AA%EF%BC%9F+-+%E6%99%82%E9%96%93%E3%82%92%E6%8C%AF%E3%82%8A%E8%BF%94%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%A2%E3%83%97%E3%83%AA%E3%81%A7%E3%81%99%E3%80%82">どんなアプリ？ - 時間を振り返るためのアプリです。</a></h1> <p>仕事や勉強などの時間を計測して、日々をどのように過ごしたか振り返りできるアプリです。</p> <p>作業を始める前に計測を開始して、</p> <p><a href="https://crieit.now.sh/upload_images/630a74a1a1db27c0864c22f1cd2104b25ce609384fcbf.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/630a74a1a1db27c0864c22f1cd2104b25ce609384fcbf.png?mw=700" alt="0.png" /></a></p> <p>作業が終わったら計測を停止します。そして、一日の終わりにカレンダーやレポートで振り返ることができます。今日はどんなことをしたか、逆に何もしていない時間がどれくらいあるか確認できます。</p> <p><a href="https://crieit.now.sh/upload_images/ba4b86b4411a613d85a97f918ede6f685ce6094c920ac.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ba4b86b4411a613d85a97f918ede6f685ce6094c920ac.png?mw=700" alt="1.png" /></a></p> <h1 id="なぜ作ったの？ - 自由で連携しやすいタイムトラッキングアプリが欲しかった。"><a href="#%E3%81%AA%E3%81%9C%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F+-+%E8%87%AA%E7%94%B1%E3%81%A7%E9%80%A3%E6%90%BA%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%82%A2%E3%83%97%E3%83%AA%E3%81%8C%E6%AC%B2%E3%81%97%E3%81%8B%E3%81%A3%E3%81%9F%E3%80%82">なぜ作ったの？ - 自由で連携しやすいタイムトラッキングアプリが欲しかった。</a></h1> <p>以下のようなタイムトラッキングアプリが欲しかったからです。</p> <blockquote> <p>・マルチプラットフォームで使用できる。<br /> ・Slackのような外部サービスと連携ができる。<br /> ・サードパーティ製アプリが作りやすい。<br /> ・無料で使用できる。<br /> ・オープンソース。</p> </blockquote> <p><strong>Web、iPhone、Android等のマルチプラットフォームで使用できる。</strong><br /> Hackaruは<a target="_blank" rel="nofollow noopener" href="https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja">PWA</a>という技術に対応しています。ホーム画面に追加するだけで、アプリストアからダウンロードしたアプリのようにさくさく使用できます。</p> <p><strong>Slackのような外部サービスと連携ができる。</strong><br /> Webhookの送信に対応しています。<a target="_blank" rel="nofollow noopener" href="https://cloud.google.com/appengine/docs/whatisgoogleappengine?hl=ja">Google App Engine</a>などを使えば、計測を完了したらSlackに送信、といったこともできます。</p> <p><strong>サードパーティ製アプリが作りやすい。</strong><br /> OAuth2.0を提供しています。サードパーティ製のアプリでも、OAuth経由で時間を測ったり止めたりすることができます。</p> <p><strong>オープンソース。</strong><a target="_blank" rel="nofollow noopener" href="https://github.com/ktmouk/hackaru">GitHub</a>に公開しているので、自宅のサーバでも簡単に構築できます。</p> <h1 id="どうやって作ったの？ - Nuxt.js + Rails + AWSで構築しています。"><a href="#%E3%81%A9%E3%81%86%E3%82%84%E3%81%A3%E3%81%A6%E4%BD%9C%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F+-+Nuxt.js+%2B+Rails+%2B+AWS%E3%81%A7%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82">どうやって作ったの？ - Nuxt.js + Rails + AWSで構築しています。</a></h1> <p>APIサーバとWebサーバに分割しています。お互いはRESTfulで通信しています。</p> <p><a href="https://crieit.now.sh/upload_images/88a9e4f10cd3fbb8f01ea9813ded2ed05ce6096e2be86.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/88a9e4f10cd3fbb8f01ea9813ded2ed05ce6096e2be86.png?mw=700" alt="2.png" /></a></p> <p>APIサーバはRails5のAPIモードを使用しています。OAuth2.0とRESTfulの提供を担当しています。Webサーバからのリクエストをもとにデータを操作します。HTML/CSSは出力しません。表示はすべてWebサーバにお任せします。</p> <p>WebサーバはNuxt.jsを使用しています。APIサーバと通信して、データをブラウザに表示することが役目です。データを直接操作することはありません。APIを経由して操作します。</p> <p>どちらもDockerコンテナ化して、AWSのECSで動作させています。DynamoDBのようなAWS独自のサービスは使っていません。自宅サーバでも構築できるようにするためです。</p> <p>すべて<a target="_blank" rel="nofollow noopener" href="https://github.com/ktmouk/hackaru">オープンソースとして公開しています</a>ので、気になる方は覗いてみてください。</p> <h1 id="デスクトップ版もあります。"><a href="#%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97%E7%89%88%E3%82%82%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82">デスクトップ版もあります。</a></h1> <p>デスクトップ版はElectronとVue.jsで構築しています。特徴として、自動で時間を測ってくれる機能があります。</p> <p>たとえば、プログラミングをするときはAtomEditorを開いたり、絵を書くときにはPhotoshopを開いたり・・・。作業を開始するタイミングとソフトを開くタイミングって同じことが多いですよね。それを利用して、ソフトを開く、閉じるをトリガーに自動で計測してくれます。パソコンで作業される方は、ぜひ使ってみてください。</p> <p><a href="https://crieit.now.sh/upload_images/43a17fbefd64beba83d9a25db2cb1fcf5ce60985558c8.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/43a17fbefd64beba83d9a25db2cb1fcf5ce60985558c8.png?mw=700" alt="3.png" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/ktmouk/hackaru-desktop/blob/master/README.ja.md">インストールはGitHubからできます。</a>　Windows、Mac、Linuxで使えます。</p> <h1 id="ご意見、プルリクエスト、Issueもお待ちしております。"><a href="#%E3%81%94%E6%84%8F%E8%A6%8B%E3%80%81%E3%83%97%E3%83%AB%E3%83%AA%E3%82%AF%E3%82%A8%E3%82%B9%E3%83%88%E3%80%81Issue%E3%82%82%E3%81%8A%E5%BE%85%E3%81%A1%E3%81%97%E3%81%A6%E3%81%8A%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82">ご意見、プルリクエスト、Issueもお待ちしております。</a></h1> <p>こんな機能が欲しい、もっと綺麗にコード書けるよ、バグあるよ、などなどご意見やプルリクエストがあれば気軽にご連絡ください。TwitterのDMやGitHubで受付しています。</p> <p>また匿名で投稿したい方は、<a target="_blank" rel="nofollow noopener" href="https://devtalk.jp/">開発会議</a>の<a target="_blank" rel="nofollow noopener" href="https://devtalk.jp/products/71/feedbacks/new">フィードバックページ</a>からも投稿できます。</p> <blockquote> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/ktmouk/hackaru">GitHub</a><br /> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/hackaru">公式のTwiiter</a><br /> <a target="_blank" rel="nofollow noopener" href="https://twitter.com/ktmouk">開発者のTwitter</a></p> </blockquote> <h1 id="ちなみに本稿の作成には約6時間かかりました。"><a href="#%E3%81%A1%E3%81%AA%E3%81%BF%E3%81%AB%E6%9C%AC%E7%A8%BF%E3%81%AE%E4%BD%9C%E6%88%90%E3%81%AB%E3%81%AF%E7%B4%846%E6%99%82%E9%96%93%E3%81%8B%E3%81%8B%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F%E3%80%82">ちなみに本稿の作成には約6時間かかりました。</a></h1> <p>実は本稿の作成中も時間を計測していたのですが、6時間かかっているようです。初めてのnoteなので仕方ですが、時間かかりすぎですね。</p> <p><a href="https://crieit.now.sh/upload_images/c1c790f2ee7507c00363064ec7df0c635ce6099820fbe.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c1c790f2ee7507c00363064ec7df0c635ce6099820fbe.png?mw=700" alt="4.png" /></a></p> <p>慣れている方ならどれくらいで完成させられるものなのでしょうか。気になります。</p> <p>今回はアプリ紹介だけになりましたが、他にもいろいろ書いていく予定ですので、お暇なときに覗いてくれると嬉しいです。それでは。</p> <p>公式サイト: <a target="_blank" rel="nofollow noopener" href="https://www.hackaru.app">https://www.hackaru.app</a></p> ktmouk