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

Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

Kanazawa.rb用iPhone・iPadアプリ作って、使ってきたよ

昨日、3/30(土) 13:00 〜 17:00 ITプラザ武蔵 研修室2で開かれた「Kanazawa.rb meetup #7」に参加してきた。

今回のメインテーマは「アジャイルプラクティスとわくわくする現場作り」というメインテーマで株式会社チェンジビジョン代表取締役社長、永和システムマネジメント副社長の平鍋 健児さんの講演が開かれました。

アジャイルは名前だけ知っていましたが、今回は実際に話をきいて誤解していたことの誤解が解けました。また、週明け早速現場に導入できることもたくさんあったので即実践していきたいと思います。

また、アジャイルの話の後には LT (Light Talking) が行われました。

LT登壇リスト

  • うばた(@jaVuBax) : そうだ京都へ行こう
  • たちばな(@toybox_design) : Compass で遊ぼう
  • いざわ(@Yukimitsu_Izawa) : Rubyでトライ!
  • おかもと(@haraguro3) : UML使いませんか
  • ささき(@shirokuro331) : (´・ω・`)人(´・ω・`)ルビー
  • かとう(@PharaohKJ) : 俺とアジャイル
  • かわぐち(@kawaguti) : アジャイルってなに?

さて、感想はその程度にして記事タイトルにした「Kanazawa.rb用iPhone・iPadアプリ作って、使ってきたよ」についてそろそろ書きますね。

銅鑼アプリ作りました

LTは5分という決まりがありました。 @kitak さんが作ってくれていた 5分計れるiPad アプリがなくなってしまったというトラブルを開催6日前に Tweet で見たので、「じゃあ、俺がやってやる(心配だけど)」と思って作ってみました。 iPad の標準タイマーでは文字が小さ過ぎるので LT する人が見にくいはず。 そこで次の仕様を自分で痂せました。

  1. 5分だけ計れる
  2. 大きい文字で表示する
  3. 5分経ったら銅鑼(ドラ)がなる
  4. 私以外の人間が触ってもトラブル無く利用できるように分かりやすいUIにする
  5. Monacaという開発環境を利用する

Monaca

Monaca - HTML5モバイルアプリ開発プラットフォームという開発環境を利用して作るというルールを自分に痂せました。3日ぐらいで実装できたかな。 ▼ Monacaのトップページ f:id:miyakawa244:20160511222102p:plain

▼ Monacaの開発環境はブラウザベースです f:id:miyakawa244:20160511222128p:plain

クラウド上でHTML5, JavaScript, CSS を利用した開発環境ですが、プロジェクトが完成してビルドすれば iOS, Android, WindowsPhoneなどのプラットフォームで利用できるものが作れます。Titanume Mobaile みたいなやつですといえば分かりやすいでしょうか? もちろん、Objective-C や Java でネイティブなアプリを開発できるほうが速いアプリが作れるかもしれませんが、monaca に興味があったのでこれで作ってみた次第です。それに5分計るだけですから、正確な時間が計れれば HTML5, JavaScriptベースでも問題ありません。

作り方

Monaca の開発環境の使い方は Monaca が公開しているサンプルコードやチュートリアルを触ることですぐ理解できました。 ベースが HTML と JavaScript ですから難しくはありませんでした。

基本的な Monaca の使い方を理解したところで、実装の流れを考えました。 最初に「カウントダウンアプリを用意する」。 次に「サウンドファイルをならすアプリを作る」。 最後にこの2つを合体させるといった流れです。

  1. カウントダウンアプリは次のサイトを参考にして用意しました。 countdown | search - jsdo.it - Share JavaScript, HTML5 and CSS
  2. サウンド再生のサンプルは monaca のサンプルコードにベースになるものがあったので、その Code を改修して利用しました。
  3. 最後はカウントダウンアプリで、表示時間が「00:00」になったときにサウンドをならす関数 (function) が発動するように if文を仕込んで完成しました。

▼完成した iPad の銅鑼アプリ画面 f:id:miyakawa244:20160511222146j:plain

開発中はいろいろとトラブルもありましたが、Kanazawa.rb 本番ではトラブルもなく LT が無事行われて良かったです。

発表者の皆さんがチラチラと私の iPad を覗きながら発表する姿が微笑ましかったですw