【個人開発】LIFF×LINE ID連携で簡単！活動時間記録アプリ「cheers-timer」を作りました

Last updated at 2025-12-11Posted at 2025-12-10

はじめに

初めましてこんにちは、ほげがめのてー（@sss__727）と申します。
現在、完全未経験からWebエンジニアを目指してオンラインプログラミングスクールRUNTEQにてRuby on Railsを学習しています。

この度、11月20日に卒業制作として、

簡単！活動時間記録アプリ「cheers-timer」

をリリースいたしました。

今回はcheers-timerに込めた思い、使用した技術、感想などについてまとめさせていただきます。
どうぞよろしくお願いいたします。

1.開発の経緯

プログラミングスクールRUNTEQの卒業制作を遂行するにあたり、「課題解決力」が問われると聞きました。
自分自身、日常に不便を感じていることが特になかったので、だったら自分より深刻な悩みを持つ方の課題を解決できる一助になるアプリを作れないかと思い、友人に相談したのが事の発端です。
弁護士として様々なクライアントと接している友人に聞いたところ、現在は過重労働で相談に来るクライアントが後を立たないそうです。
その大体はタイムカードを会社が管理しているとのこと。
定時にタイムカードを強制的に切るよう指示されサービス残業を強いられたり ”現場職”では本社にタイムカードがあるのに現場出勤だと押す機会もなかったりして正確な労働時間を可視化できない問題があると聞きました。
”フリーランス風”と言われる問題ーー個人事業主を事実上時間で縛っておいて正当に評価されない問題も近年の働き方が広まってきてから抱えている闇もあるそうです。
その方々のために、個人利用向け活動時間記録アプリを開発しようと思った次第です。
一番のターゲットは過重労働で疲れている方々。
掲げるスローガンは
「操作は簡単に！　機能は確かに！」
ユーザーの負担を減らすために使用頻度が高いであろうLINE内で完結するLIFF、LINE ID連携アプリとしました。
また、そんな方々に少しでも元気を届けられればとパートナーの観葉植物を導入。
Cheers!という感謝をあいさつを開始打刻時に交わすだけで、何か力が湧いてきたらいいなとの願いを込めました。

2.サービスの概要

ボタンタップ一つで活動時間の記録をつけられるアプリです。
パートナーとなる観葉植物があなたの一日を応援します。
パートナーには名前がつけられて（初期設定はSunny）、愛着が湧くよう設計しております。
チェックインボタンを押すと、パートナーがポワンと光り、ユーザーに元気を与えるアニメーションが仕組まれています。
チェックインボタンで活動開始時刻を記録し、チェックアウトボタンで活動終了時刻を記録します。
記録はマイページにて確認できます。
チェックイン後〜チェックアウト前までなら、チェックアウトページにて
「気分ボタン」と「気分メモ」を任意で投稿でき、その日の気分を絵文字や140字以内の文字で残せます。
チェックアウト前であったら、気分の変更、メモの編集（上書き）も可能です。

機能紹介

簡単会員登録・ログイン	説明
	・一般的なwebブラウザから開くと認証が必要なページは表示されず、公式LINEアカウントへ遷移するよう促されます。・公式LINEアカウントを友達追加、トークルームに飛び、下部にある「メニュー▼」をタップするとリッチメニューが現れ、アプリのロゴをタップするとLIFFページに遷移します。・リンクが開く際、認証画面に切り替わり「許可する」を押すと、認証されLINE IDとアプリが連携し会員登録・ログインが実行されます。・2回目以降はこの手順は実行されず自動でログインが完了します。・ヘッダーの右上にある「○○（ご自身のユーザーネーム）の活動記録」と表示されていればログインが完了しています。
チェックイン（活動開始時間の記録）チェックイン後、気分ボタン・気分メモを任意で投稿できます。	チェックアウト（活動終了時間の記録）チェックアウト前までなら気分ボタン・気分メモを編集できます。

気分グラフ任意で登録した気分ボタンの統計をグラフで確認できます。	パートナーに名前をつけるパートナーの観葉植物に名前をつけられます。初期設定はSunny。

3.技術スタック

使用技術

カテゴリ	技術内容
サーバーサイド	Ruby on Rails 7.2.1・Ruby 3.6.6
フロントエンド	Ruby on Rails ・LIFF
CSSフレームワーク	TailwindCSS ・ daisyUI ・ LIFF
データベースサーバー	PostgreSQL
アプリケーションサーバー	Render
データベースサーバー	Neon

選定理由

Ruby on rails
Ruby on Railsのカリキュラム・個人開発のミニアプリ「KANIDIAN POKER」（以下、カニポカ）で学んだ結果を出力する作品だと思ったので、そのままRuby on Railsにしました。カニポカをver.8で開発した際、互換性に苦しめられたので今回はLIFFとの提携もありますし安全にバージョン7.2.1を選択しました。
LIFF
友人からヒアリングを行った際に聞いた「既存のアプリ、機能は多いかもしれないけれど情報が多くて操作も複雑でわかりにくい。クライアントにどうぞと手放しで勧められない。もっと簡単でシンプルなもの、かつLINEとかで手軽にできたらありがたい」との相談を実現しようとアプリの機能はもちろんフロントエンドでのLIFF提携を実現しました。
また、先述しましたが、ログイン方法はLINE IDを連携させた独自認証機能を採用しており、わざわざユーザーがメールアドレスやPWを入れたりせずともアプリのページに飛びルートをたどりながら「許可」を押すだけで会員登録ができる仕様に実装しました。これにより、煩わしい会員登録・ログイン機能とはおさらばしたのです。
daisyUI
カニポカを作る際にtailwindCSSを導入しましたが、冗長的なコードがどうも苦手で。
先輩に教えてもらったdaisyUIだとコードがスッキリする他、ボタンなどの実装も手軽そうだったので採用しました。
既存のテーマは使わず、色は全てカスタマイズし、アプリの世界観を統一させました。

4.こだわり

1 .LIFF+LINE ID連携

しつこいようですが、これがアプリの要ですので。
開発においてアプリ側とは別にLINE developersとLINE Official Accoount Managerの設定も必要でした。
また、LIFFアプリは今後LINEミニアプリに統合される関係上MessaginAPIの紐付けもややこしく、心折れそうになったのはここだけの秘密です。（※公にリリースした記事ですね）
LINEミニアプリでデプロイしなかったのは、ミニアプリは認証が必要だったからです。
特に個人レベルのものは認証がおりづらい、認証に時間がかかるとの記事を読みました。
卒制を作るにあたり、一旦デプロイしてから開発をしていきたいこと、卒業認定に間に合わせないといけないことなどさまざまな理由で最初はLIFFでデプロイしつつ、今後LINEミニアプリに移動しようと考えた次第です。
（※後日、開発中に発覚したのですが、LINEミニアプリもLIFFと統合する関係で認証なしでも作成できるようになっていました。どちらにしても今後移行できるよう動いていこうと思います）
これに関連する技術記事は後日執筆予定です。

2 .元気を贈るSunnyコンセプト

背景のクリーム色みの強いイエローだったり、チェックインは晴れやかな空色、チェックアウトは労いのウォームカラーを使用するなど色味をこだわりました。
それもこれもパートナーであるSunny（初期設定）のキャラが映えるように演出したかったのです。
チェックインボタンを押せばSunnyがポワンと光り、「いってらっしゃい！」と応援しているかのようなコンセプトを守るために相応しい色味をつけました。
いつでもユーザーの味方であること、いってらっしゃいとおかえりが言える相手、たまには一緒に乾杯したりもして。
ターゲットがターゲットなので、少しでも寄り添えるアプリになれたらと願いを込めました。

3 .追加実装

まだ実装したい機能が残っています。
一例ですが

気分ボタンの種類に対してSunnyがコメントをくれるアニメーション
通知機能（難しければ代替機能）
記録の期間検索機能

などなど。
一つずつ実装していきたいと思います！

4 .おまけ

本リリース後、様々なフィードバックをいただくなかで、こだわりの2点（上記1,2）を触れてくださる方が多く、開発者の思いが少しでも伝わったのかなと思うと嬉しかったです。
それと同時に、自分が軸として捉え開発を進めればユーザーに届くんだという成功体験を得られた気がします。
実は、2のSunnyについては少し設計・実装において迷子になった時期がありまして、最終的に「タイマーだけでいいのではないか？」と実装計画をナシにするか？のギリギリまでいきました。
今考えるとUIが固まっていない、JSアニメーションがめんどくさそうという自身の怠惰からくる感情を優先させた最悪の展開だったと思います。
しかし卒制を作る上で今一度初心に戻って開発経緯や自身のオリジナリティーを詰めていくうちに必ず必要な機能（パートナー）であることを確信し実装にこぎつけました。（そうなの！？）
誰のために何を誰が作るのか、そのゴールを目指して様々な設計図を書いて実装していく、ゴールがぶれないように自分を律しながら開発を進める重要性を学ぶいい機会となりました。

5.反省点

本リリース後も改善点がたくさん見つかった。

当初MVPはその名に相応しく本当に最小限の機能のみを実装し、本リリースまでにある程度仕上げる予定でした。
そして、より利便性の高い機能やちょっとした装飾などを追加で実装していく計画だったのです。
そのため、MVPは人様にお見せできる状態ではなかったこともあり本リリースと同時にいろいろな方にアプリを触ってもらった形となりました。
そのため、自分では「（ある程度）完成！」と思っていたアプリに見つかった“改善点”がフィードバックとしてたくさん返ってきたのです。
例えば、ユーザーが迷子になってしまう問題。
アプリを開いても、使い方がいまいち直感的にわからず何をすればいいのかわからないという声を多数いただきました。
自分自身、他のアプリを使いながら「チュートリアル」や「使い方ページ」がTOPページに強制的に表示されることに嫌気が差していて、その部分を取り除いたつもりだったのですが、逆に何もなさすぎて（実際は「使い方ページ」はあれど、リンクで飛ばないといけない状態）初めましてのユーザーの操作を迷わせてしまったと省みました。
他にも「気分ボタン」の色がページを跨ぐと統一されていなかったり、活動中なのに「お疲れ様」とメッセージが出ていたりと、大きな機能から細かいUIまでありがたいFBをいただき、連日修正に励みました。
本リリース……人様に見せられるくらいの機能を実装したら「おしまい！」と思っていた自分の怠惰でしたし、なんとも素人っぽさが出てしまったな、と猛省しております。
本リリースの完成度を詰めきれませんでした。
今後の対策としましては、MVP後から本リリース前までに自分でさらに改善点を見つけブラッシュアップしていくのはもちろんのこと、テストユーザーを複数人にFBをもらいながら「もう治すところないだろう」というレベルまで仕上げてから本リリースをしたいと思います。
また、cheers-timerに関してはすでにリリースされていることから、今後もアプリを運営し続けながらより使いやすいアプリとなるよう善処していきます。

6.感想

カニポカ記事の最後にこう記しました。
「これから卒業制作でまたアプリを開発する予定ですが、これもまた誰かの笑顔を増やす一助となるよう進めていきたいと思います。」
cheers-timerも誰かの笑顔を増やす一助となれたでしょうか。
今はまだわかりませんが、そのようなアプリとなるよう今後も改善、追加実装していきたいと思います！

ご一読いただきありがとうございました！

以上、ほげがめのてーでした！

カニポカの記事はコチラ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up