Cordovaで声優ラジオ音泉をダウンロードするAndroidアプリを作ってみた

はじめに

初めてCordovaでAndroidアプリを作ってみました。
声優ラジオの音泉をダウンロードできます。

開発当初、温泉卵が食べたかったので「音泉」と「温泉卵」を掛けて、「音卵」という名前にしました。

UI

ぱぱっと作ったので、雑ですがこんな感じになってます。
最初は、番組ごとにサムネイルをつけていたんですが審査に通らなかったので無くしました。

番組一覧

ダウンロード画面

ダウンロード状況

内容

仕組みは、cordovaアプリがxhrでAPIにリクエストを送って、レスポンスの情報を元にUIの構築 & ダウンロード先のURLの取得を行う感じのシンプルな設計です。

音泉の情報を取得するAPIは、僕が開発した「onsen-node」を元に開発して、Herokuにあげました。

コードは、こんな感じですごく簡単なものです。

api.coffee

onsen   = require 'onsen-node'
express = require 'express'
app     = express()

##
# 番組リスト
##
app.get '/', (req, res) ->
    onsen.getList (list) =>
        if list isnt null
            res.json list
        else
            res.json { error: '番組一覧の取得に失敗しました。' }

##
# 番組情報
##
app.get '/:name', (req, res) ->
    name = decodeURIComponent req.params.name
    onsen.getInfo name, (info) =>
        if info isnt null
            res.json info
        else
            res.json { error: '番組が見つかりません。.' }

##
# 番組検索
##
app.get '/search/:keyword', (req, res) ->
    keyword = decodeURIComponent req.params.keyword
    onsen.search keyword, (list) =>
        if list isnt null
            res.json list
        else
            res.json { error: '番組が見つかりませんでした。' }

app.listen process.env.PORT || 8080, ->
    console.log 'Server Running...'

ハマった点

パーミッションの要求の存在を忘れていて一日くらい積みました。

cordovaでのパーミッション要求は

プラグインを追加して

cordova plugin add cordova-plugin-android-permissions --save

こんな感じのコードを書けば、OKでした。
※下記は、ストレージの書き込み要求。

sample.coffee

permissions = cordova.plugins.permissions
    permissions.requestPermission permissions.WRITE_EXTERNAL_STORAGE, (status) ->
        if not status.hasPermission
            alert '権限を有効にしないとダウンロードできません。'

さいごに

初めてCordovaを使ってみて、AndroidSDKあたりで積み書けましたが設定さえ終われば、作るのはすごく楽でした。
ただ、Chromeのリモートデバッグだとデバッグしづらいので、その点ではmonacaを使うのもありなのかなと思います。

アプリは、Google Playで公開しているのでよかったらインストールしてみてください。
https://play.google.com/store/apps/details?id=com.yuki540.ontama

コードは、GitHubにあげてるのでそちらもよかったらみてください。
https://github.com/yuki540net/ontama

GitHub: https://github.com/yuki540net
Twitter: https://twitter.com/eriri_jp