Paymoã‚¿ã‚¹ã‚¯ã®è¨ˆæ™‚ãŒç´ æ—©ãã§ãã‚‹ã‚¢ãƒ—ãƒªã€ŒQuickPaymo」を作りました

QuickPaymoとは？

以前のエントリーでご紹介したように、筆者は日々のタスク時間の記録・集計に、Paymoというサービスを使っています。

ponpoko1968.hatenablog.com

www.paymoapp.com

Paymoにはもともと計時用のデスクトップアプリが用意されています。

しかし、定期的に測定するタスクの計時を始める場合、すべてのプロジェクトとタスクの中から毎回選択する必要があり煩雑に感じていました。

そこで、あらかじめよく使うタスクだけをリストアップして、こまめに計時できるようなアプリを作ってみました。

github.com

使いかた

paymoに登録しているメールアドレスとパスワードでログインします。

ログインしたら、このアプリのメイン画面である、登録したタスクの一覧画面が表示されます。

左端の「▶」ボタンを押すと、計時が始まり、下の画面のように、画面の下部にタスクの経過時間が表示されます。

メイン画面にタスクを登録するには右上の「＋」ボタンを押して、プロジェクトを選択します。プロジェクトはクライアントごとにグループ化されて表示されます。クライアント名はiOSネイティブアプリで言うところのセクションヘッダーに表示されます。

さらにプロジェクトをタップして選択すると、タスクの一覧が出るので、チェックをいれると、タスクが登録されます。

動作環境

私の場合、このアプリはデスクトップで使うことが多いので、上述したように、src/ディレクトリの中身をelectron化して使っています。

筆者の環境ではMacOSXでのみ動作を確認しています。特に特殊なことはしていないつもりですし、もともとmonaca/OnsenUIで作っているので、monacaやcordovaを使ってスマホアプリとして使うことも出来ると思います。

一点、注意点としては、パスワードをキーチェーンに格納したかったため、keytarというパッケージを使用しています。もしかすると、この部分がネックになるかもしれません。

www.npmjs.com

感想

このアプリはAngularとOnsenUIを使って書かれています。

筆者は、ObjC/SwiftでのiOSネイティブアプリ開発、もしくはJavaでAndroidネイティブアプリの開発を本業としています。

昨今、スマホの世界はもとより、最近はAtomやVS:Codeのように、Mac/Winでのデスクトップアプリでもネイティブと遜色ないハイブリッドアプリが出てきており、要件によってはHTML5/JSでのアプリ開発も選択肢にできるよう、スキルを持っておく必要を感じていました。

そこで今回は、昨今話題のmonacaを用いて、プロジェクトの大まかな部分を実装した後、できあがったHTML/JSファイルをelectronで動くよう手直ししました。*1

実際やってみて、JavaScript独特のデバッグのしにくさには困惑しつつも、感覚値としては、それでもネイティブで開発した場合の半分くらいで実装できたような印象です。WebAPIで情報を取得して、テーブルビューに表示するような、割とありがちなアプリであれば、ハイブリッドでぜんぜんいけるなぁ。。。という印象です。

このアプリは規模もそこそこで、この手のアプリに必要な要件も含まれているので、"練習問題"としてはちょうどいいのではないかと思っており、ハイブリッドアプリの世界でのもう一つの雄であるIonic版を作ってみたり、ロジック部分をTypesScriptで書き直してみるのもいいかもしれないなと考えています。

参考文献

monaca/OnsenUIの本は、開発元であるアシアルさんが書かれたこの本がオススメです。

[asin:4798140287:detail]

おなじく、monacaを構成するcordovaをはじめとするハイブリッドアプリの基礎技術については、同じくアシアルのエンジニアの方がかかれたこの本を読みました。monacaはOSSの技術を元に、スマホアプリ特有の煩わしい部分を解消し、ワンストップでアプリを作ることが出来る素晴らしいサービスだと思います。この本を読んでいると、サービスの構築にあたってはこうした技術を相当研究されたのだろうなというエンジニアの方の苦労が偲ばれます。

[asin:B00HEB6UFM:detail]

*1:初めてなので、もしかすると見る人が見たらいろいろツッコミどころがあるかもしれません。ご興味のある方はぜひプルリクエストをお願いします。