読者です 読者をやめる 読者になる 読者になる

日報をしゃべらせて聴くアプリ「Nippou Player for esa.io」を作った

みなさん日報書いてますか。

私が所属する Misoca でも、全員が毎日日報を書いています。ただ、メンバーが増えてくると、全員の日報を読むことが地味に大変だったりします。

日報を「聴く」

しかし読みたい。

もし、音楽のように日報を聴くことができたら、聴きながら作業もできるし読む辛さもなくなるかも。というわけで、勉強がてらアプリを作ってみたので紹介します。

Nippou Player for esa.io

f:id:hidakatsuya:20170303004032p:plain:w350

特徴

GitHub - hidakatsuya/nippou-player: A client for playing NIPPOU in esa.io.

  • esa.io の日報を音声として再生することができるデスクトップアプリ
  • Mac, Windows, Linux をサポート(ただし、Mac 以外は動作確認してない)
  • Electron, Vue.js 2.x, Photon, Webpack, axios, karma, mocha などでできている
  • 音声の再生は Web Speech API を使っている

必要なもの

Nippou Player は esa.io 上の日報を再生するアプリなので esa.io のアカウントが必要です。

使い方

Releases at Github より、パッケージをダウンロードできます。起動すると、

f:id:hidakatsuya:20170303010337p:plain:w350

こんな感じの設定画面が表示されるので、それぞれ以下のように設定します。

Access token for esa API

Nippou Player は esa API を使って日報を取得するので、そのアクセストークンの設定が必要です。アクセストークンの発行方法は以下を参考にしてください。

https://docs.esa.io/posts/102#3-0-0

日報一覧のパス

esa 上の一日分の日報一覧のパスを設定します。

日報/2017/03/03/
  ├ hidakatsuya の日報
  ├ hoge の日報
       :

例えば、日報をこのようなカテゴリで管理している場合は esa検索クエリの書式 を使って以下のように設定します。

in:日報/YYYY/MM/DD

YYYYMM は日付書式キーワードで、日報一覧を取得する際に日付に展開されます。「2017/3/3」の日報を取得するときは、

in:日報/2017/03/03

となる具合です。

この展開は Moment.jsmoment#format() によって行なっています。使えるキーワードは以下を参考にしてください。

Moment.js | Docs

以上で設定は完了です。メイン画面に戻ると日報一覧が表示されるはずなので、再生ボタンを押せばしゃべり出すはずです。

バグを踏んだりわからないことがあったら

ソースコードGitHub に公開しています。Pull request お待ちしております。または @hidakatsuya に質問してもらっても構いません。

github.com

作ってみて

感想

  • 今回初めて Electron アプリを作ったけど、別の OSS (thinreports-editor) でも Chrome Apps から Electron へ移行しようとしているので良い練習になった
  • 日報の内容をほぼそのまま Web Speech API に食わせているので、スピーチがわりと微妙
  • Vue.js の Single File Component が非常にわかりやすくて良い。次は Vuex を使って書き換えていきたいと思ってる
  • vue-clielectron-vue というテンプレートを使うと、babel とか webpack 周りが設定済みで、すぐにアプリ本体の開発に集中できて良い。ちょっと設定いじろうとすると何やってるかわかんなくて辛い部分もあるけど
  • UI は Photon が便利だった。が、微妙に足りてないところがある。メンテされていないのも気になるけど簡単で素晴らしい

今後

  • スピーチが微妙。ちょっと調べた感じ、やりようはありそうなので気が向いたら改善したいと思っている
  • ユースケース的にモバイルアプリに適しているツールなので、次は Swift の勉強がてら iOS 版を作ってみるつもり
  • TravisCI による自動ビルドがうまくいってなくてなんとかしたい。もしくは WerckerCI を使ってみようかと