プログラマってこんなかんじ??

アプリ作ったり歌ったりしてます

中洲ジャズ 2019 非公式アプリを作りました (Android/iOS)

本エントリは Android #2 Advent Calendar 2019 の 2日目 になります。

今年はこんなアプリ作りました、実際作ってどうだったか、頑張ったので褒めて、というポエムになります。

自分は福岡で Web/スマホアプリ/LINE Bot、、いろいろと節操なく開発している雑食系エンジニアです。自社サービス開発や、趣味で ボーカル(ジャズメイン) としても活動しています。

今回、福岡の中洲で毎年行われているジャズフェス、 中洲ジャズ の非公式アプリを勝手に作りました。(今年で 3回目)

play.google.com

中洲ジャズ 2019【非公式】

中洲ジャズ 2019【非公式】

  • daisuke hirata
  • ミュージック
  • 無料
apps.apple.com

経緯

nakasujazz.net

公式サイトが、

  • 当日ダウンすることが多い
  • 同じ時間に誰と誰が演奏、がわかりにくい

これだと自分が効率的にまわれなくて非常に困るので、これを解決できるアプリが欲しくなって作りました。

どんなアプリか

シンプルに地図+タイムテーブルのみの最小限のアプリです。

  • 「この時間に」「どのアーティストが」を横断的に見れる
  • オフラインで見れる

タイムテーブル

特に力を入れたのが「上下左右斜めへのスムーズなスクロール」。去年は自前で作ろうとして断念したのですが、、今年はこの神ライブラリを本アプリ用にカスタム+チューニングして実現。これらのライブラリがなければ、自分のやりたいことは実現できていません。(この場を借りてお礼を言わせてください)

github.com github.com

オフライン対応

スケジュールの各セルをタップするとアーティストページに飛ぶのですが、サイトがダウンしても見れるように、そのページをキャッシュ表示可能にしています。

www.letitride.jp qiita.com

リリースまでの流れ

今年は去年までに比べると平和。去年は「はじめての iOS アプリリリース」だったり、特急申請出したり。だいぶ地雷を踏み抜いていたおかげで、そこまで詰まることもなくリリースできました。

去年の開発奮闘記はこんな感じです。 http://daichan4649.hatenablog.jp/entry/nakasujazz2018daichan4649.hatenablog.jp

去年までと違う点は以下。

Android が即日公開されなくなってた

自分の場合は 丸2日 ほどかかりました。「どうせすぐ反映されるだろう」とのんびりしてたら、いつのまにか審査が厳しくなっていた模様。いつもだと Play Console 上で公開すると数時間後には公開されていたのに。イベント直前だったのでこれは本気で焦りました。 qiita.com

iOS の公開は早くなった

今年も このサイト を見ながら一喜一憂すると思ってたのに、、公開して 1日 で「In Review」状態に。逆にこれは嬉しかったです。

リリースしてどうだったか

累計ダウンロード数

こんなニッチなアプリなのにありがたい。開発者的には Android により力入れて作ってたのに・・iOS のが多いのか・・これが現実か・・

開発環境とか

最後に

個人アプリ作ってて思うのですけど、「いまの技術を実験、運用できる場」「今年のトレンドを強制的に勉強しなおす場」としてすごくよいなーと感じてます。たとえば、Android は特にここ数年の進化がおそろしく早いですよね。自分は正直ついていけてない部分も多いです。なのでこのアプリを実験の場にすることで、自分の技術をなんとか現代人レベルまでもっていくことができる気がします。気はします。あとは、職場やまわりでこういう話があまりできないのが悩みなので、個人サービス作る仲間がまわりにも増えるとよいなー

アプリを使ってる方に会えました

そうそう。今年もこのジャズフェス中に路上 (↓の写真の場所) で歌っていたのですね。そのときの MC で「中洲ジャズアプリ、ダウンロードした人??」と聞いたら、、手を挙げてくれる方が何名か!これはさすがにうれしかった。やったぜ。

明日は @FujiKinaga さんによる 詳細AdMob です。長文を読んでいただきありがとうございました。

中洲ジャズ 2018 非公式アプリを作りました (Android/iOS)

福岡の中洲で毎年開催されているジャズフェス 「中洲ジャズ」。その非公式アプリを今年も勝手に作ってみました。

今年は初めての iOS アプリに挑戦したので、今回はそのあたりを中心にまとめてみます。これから作る方にとって何かの目安になれば幸いです。

こんなアプリ作りました

公式サイトは当日になるとアクセス爆発でダウンすることが多いです(今年も落ちました)。

当日スケジュールが見れないと非常に困るので、「オフラインで見れるスケジュール」 をコンセプトとして作成しました。

中洲ジャズ 2019【非公式】

中洲ジャズ 2019【非公式】

  • daisuke hirata
  • ミュージック
  • 無料
apps.apple.com play.google.com

スケジュールを横断的に見れます

「同じ時間帯に」「誰のステージがかぶってる」 が公式サイトの情報では非常にわかりづらいです。表形式で一覧表示することで、ステージ全体を横断的に見れるようにしました。

近隣のコンビニ載せてます

野外フェスなのでお酒などを飲みながら歩いてまわることが多いです。トイレにも行きたくなりますよね。そんなときに便利な神施設、「コンビニ」 の情報載せてます。

近隣のジャズバー載せてます

ジャズというジャンルに興味をもつ方も多いかと思います。そんな方のために、中洲近隣のジャズバー情報を載せてます。

リリースまでの流れ

イベントまでの直前2週間を、自分の所感をこめて時系列にまとめてみます。

イベントスケジュール正式公開 (8/31)

  • 公式サイトでスケジュールが公開される
  • 自作ツールで表示用 JSON 作成 (SpreadSheet+GAS)
  • 土日で最後の作りこみ+最終動作確認

Developer 登録 (9/2 22:00)

  • このタイミングで Developer 登録してないことに気づく(!)
  • 登録してたつもりだったけど、途中でやめてた
  • 登録しなくてもローカルでは問題なく開発できてた
  • 課金して登録手続き完了
  • 登録完了通知が来るまではリリース作業進められない
  • 登録完了通知メールが届く (9/3 16:00)
  • 意外と時間がかかるのでこれは早めにやるべき

初アップロード (9/4 1:30)

  • 手順がわからず、かなり時間かかった
  • Archive+Validate+Upload のループ
  • 主に 画像、バージョン番号問題
  • アプリアイコンにはアルファ値含んではいけない

不安になる

  • 夜になっても何の連絡も動きもない
  • 裁きがなかなか行われないことが不安になる
  • 平均レビュー待ち時間 が「9 days」になっていることに気づく
  • 9日後はイベント前日。これはやばい。

特急申請 提出 (9/4 23:30)

  • @konifar さんのブログ で「特急申請 (expedited review)」というものがあると知る
  • 英語でお願いするのでなかなかハードル高いが、、懇願することを決意

konifar.hatenablog.com

ちなみに自分が送った文章はこんな感じ。英語がひどい。よく伝わったなと思う。

9/14に開催される中洲ジャズイベント用アプリ作った。9/12までにレビューを終わらせてほしい。このイベントはボランティアベースで運営されている。自分も協力したいから何とかしてリリースしたい。iPhoneイベント忙しいだろうけどなんとかしてー

Dear person in charge.

There is a Jazz Festival called "Nakasu Jazz" in Japan. This application is for viewing the time schedule of this event.

This event starts at September 14. So, I would you like to finish the review phase by September 12.

This event is operated by volunteers. I created this application because I thought "I also want to cooperate". 

For this reason, I absolutely want to publish this application. I think you are too busy at the iPhone event in September, 

I hope this request will be under reviewing soon.

Sincerely.

特急申請 受領 (9/5 2:30)

  • ステータスが「In Review」に
  • 裁きを待つ

v1.0 公開 (9/5 2:45)

  • リジェクトなし (!)
  • ステータス「Ready for Sale」

特急申請についてはこんなメールが来てました。

Thank you for contacting App Store Review to request an expedited review.

At this time, your app is "Ready for Sale", and will be available on the App Store shortly, unless you have specified a release date or your app is pending your release.

Please visit App Store Connect for additional information. 

Best regards, 
App Store Review

公開されたと思いきや、App Store で検索してもしばらくは出てこなかったです。最終的に、この日の夕方くらいに検索結果に表示されるようになりました。

v1.1 アップデート申請

  • 提出 (9/7 1:00)
  • ステータス「In Review」(9/7 23:30)
  • 公開 (9/8 9:00)
  • 特にメールで連絡なかった

v1.2 アップデート申請

  • 提出 (9/8 21:00)
  • ステータス「In Review」(9/10 4:00)

v1.2 リジェクト

「位置情報取得する理由を書かないとダメー」とのことです。

修正前

修正後

レビュー担当の方がわざわざスクショまで送ってくれました。ここまでしてくれるのかーとびっくり。

ただ、この点については、最初の申請時点から何も変わっていないのになぜこの時点でチェックされたのかがいまだに謎です。

v1.2 アップデート再申請

  • 提出 (9/11 1:00)
  • ステータス「In Review」(9/12 9:00)
  • 公開 (9/13 9:00)
  • こちらも特にメールで連絡なかった

というわけで、特急申請を提出したらなんだかあっさりと公開されてしまいました。この一連の流れで、久々にいろんな汗をかきました。

さて、ここからはポエムです。

よかったこと

リリースできた

いちばんは 「初の iOS アプリをなんとかリリースできたこと」 です。これでネイティブアプリ 両 OS リリースの実績ができて個人的に満たされました (メンタル)。

iOS アプリ開発の勘所がわかった(気がする)

  • どこが地雷なのか
  • どこが苦労しそうのか
  • どうすれば開発が楽になるか

あえてフルスクラッチで作ったので、特にこのあたりは試行錯誤できました。

苦労したこと

ツール

初めての Swift コーディング自体はそんなに苦労はないのですが、、とにかく Storyboard。

  • UI での手順をおぼえていないと同じ設定ができない
  • あとから git diff 見ても何の設定をしたかわからない
  • そもそも何をどう変えていいのかわからない

UI メインで開発することに慣れていない、コードしか信じていない自分にとってこれは本当につらかったです。「Storyboard の使い方、運用方法」 については有識者にレクチャーしてもらいつつ・・な開発ができたら工数だいぶ削減できたなーと思います。定石がわからない状態での手探り、辛かったです。

情報に踊らされた

すべて自分のせいなのですが、、こんな感じでした。(ここでも Storyboard を使いこなせかったグチ)

  • 書籍とネットの情報を試しまくったが本当にさまざま
  • 選択肢が複数あるときにどれが最適なのか、開発経験がないので判断できない
  • たとえば「どこまでを Storyboard、どこからが コード、はたまた全部コード」 など

よく言われることですけど、実際に自分の手を動かして、苦労して、試行錯誤して、経験してみないとわからんことが多かったです。「脳内ではもう完成してる」と「実際に作って完成した」はぜんぜん違うなーと感じました。

リリース手順

リジェクトされてもいいからとりあえず早めに一度リリース作業しておけば安心だったかなと思います。自分にとっては普段やらない作業のオンパレードだったので、わけがわからず、非常に厄介で時間がかかりました。

作り終わっていろいろ

今年も公式サイト落ちた

  • 午前中にはもう落ちてた
  • 落ちたとたん、アプリインストール数が跳ねあがった

アドバイスや意見をたくさんいただいた

プレスリリース出してみた

  • 採用されなかった
  • Webニュース系サイトのみ(10社ほど)
  • 出すのが遅すぎた感
  • 紙媒体へのプレスリリースも挑戦したかった

そのほか

  • 見ず知らずの方が会場で使っているのを目撃できた
  • あんみつ姫のURLが okama.com だったことに衝撃
  • 路上で全方位を人に囲まれて歌うのは最高だった!(アプリ関係なし)

最後に

自分のアプリが AppStore、GooglePlay で表示されるとやっぱり感動します。。

ダウンロードしてくださった皆さま、協力してくださった皆さま、本当にありがとうございました。それではまた来年!!

GooglePlayAppStore

参考

http://daichan4649.hatenablog.jp/entry/nakasujazzdaichan4649.hatenablog.jp

中洲ジャズ 2017 非公式アプリを作りました (Android)

福岡の中洲で毎年開催されているジャズフェス、中洲ジャズの非公式版クライアントアプリを勝手に作ってみました。

play.google.com

どんなアプリか

全体のタイムスケジュールが見やすい

まず、公式サイトでは 「誰と誰の演奏がかぶっているか」 がちょっとわかりづらいです。ステージごとのスケジュールはわかりますが・・

nakasujazz.net

本アプリでは、

  • 同じ時間帯に
  • 各ステージで
  • 誰の演奏があっているか

が、 横ならび で一目でわかります (誇張)

近くのコンビニの場所がわかる

中洲ジャズは路上での無料イベント。ビール片手に歩きながら音楽を聴けるとか最高ですよね。ビール飲むとお手洗いも近くなりますよね。

  • ビールが買える場所
  • おつまみも買える場所
  • お手洗いがある場所

そう、コンビニ です。載せてます。

ジャズスポット載せてます

ふだんあまり聴けないジャズの生演奏。最高ですよね。もっと聴いてみたくないですか?

  • お酒飲みながら
  • ジャズが聴ける
  • しかも至近距離で

そう、ジャズバー です。載せてます。

中洲近辺にはいくつかそんなお店があります。これを機会に足を運んでみてはいかがでしょうか?

なぜ作ったのか?

公式サイトのタイムスケジュールがよくわからない

上のほうにも書いたのですが、公式サイトの各アーティストのタイムスケジュール。これが自分にはなかなか見づらくて。

自分が知りたい観点は

  • 各ステージで誰が演奏なのか?
  • おなじ時間帯に誰のライブがあっているのか?

これを何とか見やすくできないものか?と考えたのがきっかけです。公式サイトだと 前者 はわかるけど 後者 は・・という感じでした。聴きたいアーティストたくさんなので、効率よくまわらないといけないミッションがあるのです!

オフラインで情報を見たい

毎年恒例なのですが、開催期間中にサーバーがよく落ちます。。イベント当日にタイムスケジュールが見れないのはつらい。。自分のまわりでは、公式サイトのタイムスケジュールをキャプチャしたり画像保存して見てる人が多いです。

地元ミュージシャンの応援

自分の周りの友人たちから「生演奏が聴きたい」と話によくあがるのだけど、実は福岡でもたくさん聴ける場所あるし、今回もこんなにたくさんすごい地元ミュージシャンが演奏しているんだぜ、的なところを少しでも伝えれたらいいなーなんて。公式サイトの情報だと、演奏している方が「地元」の方なのかどこの方なのか一目でわからないのです。

自己スキルアップ

プログラマとしての話になるのですが、実は最近 Android アプリを実案件で作っていなかったので技術的に不安を感じていました。Android は、以前は OS のソースを読んでたくらい大好きな技術。最近は情報は追ってるけども「実際に使って試行錯誤する」というフェーズをほとんどできてない状態。アプリをしっかり作れば知見もたまるし一石二鳥かな、という点。

よかったこと

ひとまずリリースできた

最低限の機能を実装して最後までリリースできた、これは本当によかったです。公式サイトそのままよりは「少しだけ」見やすいものができた気がしてます。ひとまず目標達成。

Android の技術再確認

よく見る構成のアプリを「今の」「スタンダード技術」で 「丸ごと作成する勘所」はある程度身についたかなーと感じています。これで Android 老害な自分から少しは脱出できたかもしれませんw

よくなかったこと

ノリだけでプログラムファースト

「とにかくコード書きたい!作りたい!」が先行してしまい。プログラムファーストで進めた結果、UI 部分で何度も手戻りが発生してしまいました。時間が少ない時こそ、先にUIプロトタイピングツール等を使って先に検討したほうがよかったのかなーなんて思います。

\カラフル!/

\唐突な CardView !/

\迷走しだした!/

次回やりたいこと

ミュージシャン情報をもっと前面に表現したい

本当は地元ミュージシャンの特設ページ等を作りたかったのです。直接インタビューしたメッセージだったり、写真だったり。ミュージシャンのみなさま、来年はなにとぞご協力よろしくお願いいたします!!

地元の生演奏スポットへの誘導

中洲ジャズに行かれた方は、ジャズの生演奏を聴いて気持ちが高揚していると思うので、「ジャズバーや生演奏のお店に行ってみたい」という気持ちを後押しするような何かしらの導線を作りこみたかったです。

もっと見やすくしたい

正直まだまだ見にくいです。「どうせなら全ステージを同時に俯瞰したい」と友人からも意見をいただき。情報量を整理してうまいことできないかなーって思ってます。

モバイルサイトにすればいいのに

聞こえません。その話題には触れません。

アプリ作りの参考にしたもの

DroidKaigi 2017 official Android app

Android の技術イベント DroidKaigi の公式アプリです。アプリ内のパーツや作りは参考にさせていただいた部分が多いです。ソースの中身、非常に勉強になりました。Android オールスターズの集合知、すごい。 github.com

Material Design

UI、デザイン知識がほぼ皆無なので、色や各パーツの配置等はなるべくマテリアルデザインの原則に基づくように作ってみました。 material.io

最後に

実案件ではいくつかリリースしてるものがあるのですが、個人でアプリ作成してリリースしたのは今回初でした。副産物として、各種データのスクレイピングツールなどもできました。いまの実業務ではあまり使わないようなスキルが芋づる式に必要になってくるので、刺激も多くてやってて本当に面白かったです。エンジニアとしてチャレンジしてよかったなー、来年はもっと「ユーザ目線で」「実用的な」ものを作れたらなーって思ってます。

リリース後

いろんな方からアドバイスいただいたのですが、イベント当日までの期間が迫っており、すべてを対応することができませんでした。もっと早くから開発スタートしていればできたのに・・エンジニアとして悔しい気持ちです。特に @konifar さん、@fkm さん、@yuki930 さんに感謝。ありがとうございました。今後のアプリづくりと来年の中洲ジャズアプリに活かします!

AndroidStudio+GAE/J+JAX-RS(Jersey)

Java でサーバサイド書きたいけど Eclipse に戻りたくない、という理由で、まずは GAE/J+JAX-RS(Jersey) の環境構築手順を調べてみた。

手順

module 作成

  • [File > New > New Module] を選択
  • [Google Cloud Module] を選択
  • [App Engine Java Servlet Module] を選択

build.gradle

Servlet 作成

  • Jersey 実装した Servlet を作成

web.xml

コード

gist.github.com

動作確認

  • [Run > Run モジュール名] で作成した module を実行
  • アクセスして JSON 返却されることを確認
curl localhost:8080/jersey/events | jq .

f:id:dai4649:20160404130556p:plain

参考

qiita.com

Google Apps Script で spreadsheet のデータを JSON として読み込む

Android アプリに限らず、JSON データを表示するようなアプリって作ること多いですよね。で、自分はその時いつもサーバサイド作るのがめんどくさくなっちゃう。なので、spreadsheet のデータをそのまま JSON として返すようなサーバーサイドアプリを GAS(Google Apps Script) で書いてみました。いまさら何言ってんだ、いつのネタだよという感じだけど、がしがし開発するときにこういうのあるとやっぱり便利だった。

目的

こんな感じで spreadsheet に定義したデータが JSON で一括で欲しい。


f:id:dai4649:20140208155408p:plain


やること

  • spreadsheet 作成
    • 1行目は タイトル行(JSON のキーに該当)
    • 2行目以降は データ行
  • spreadsheet のスクリプトエディタに以下の gas を貼り付け
  • gas 内に以下を自分の環境に合わせて修正
    • spreadsheet のURL
    • spreadsheet のシート名
  • gas をウェブアプリケーションとして公開

確認

cURL で確認。

# curl -L 'GASの公開URL'
[{"name":"あああ","memo":"ジェッタシー"},{"name":"いいい","memo":"早寝早起き"},{"name":"ううう","memo":"ロングブレス"},{"name":"えええ","memo":"Aチーム"}]

ちなみに「curl 'GASの公開URL'」だとエラーになるので注意。


所感

GAS 便利。超便利。