はじめてのアプリづくり - 投資の消費性について

「今度ビールおごる」を記録する*1場面は、どう考えても机の前だけでなく、片手には携帯端末だと思うと、自然にアプリの形が想定されました。ところが、もちろんアプリなんて、つくったことがない。右も左もわからない。まずは言語や枠組みについて検索してみると、しかし当然のように、iOS *2とAndroid *3では要求されるものが異なるわけです。その両者が、どのくらい似ているのか異なるのか、どのくらい移植は面倒なのか。さっぱりわからない。素人が両方を学ぶには、どのくらい時間がかかってしまうのか。さっぱりわからない。

途方に暮れていたところ、Webサイトをアプリのガワで包む「ハイブリッド」なる形態が存在することを知ります。おお、これならできそうな気がするぞ。ちなみに前提として持っていた知識は、1)ブログを書いたことがある、2)お勉強程度にプログラムを書いたことがある、3)統計パッケージを回したことがある、くらい。でも大丈夫。HTMLのタグなら、すこしくらい知ってる。そんなふうに自分を奮い立たせて、しばらく前に勉強を始めました。半年くらい勉強して、半年くらいつくって、とりあえず一年で完成することを、当初の目標としました。結果的には、すこしハミ出ちゃったけどさ。

JavaScript

なんとなくインターフェイスはHTMLで書けそうにしても、ピョコピョコ動くにはJavaScriptだ。よしブラウザで仕事する言語を習得しようと、ここから入門を志します。とはいえ、ドレミファソラシドから学ぶのは面倒と思い、いきなり逆引き辞典を買いました。

JavaScript逆引きレシピ jQuery対応

作者: 山田祥寛
出版社/メーカー: 翔泳社
発売日: 2014/08/29
メディア: 単行本（ソフトカバー）
この商品を含むブログ (1件) を見る

で、1)とりあえず適当にパクって書く、2)右クリックしてブラウザで開く、3)F12を押して下の窓から問題を確認、の繰り返し。いろいろいじってみると、実はコイツ計算も激速です。すごいぞJavaScript。けっこう遊べるぞ。

Monaca

一応はピョコピョコ動くサンプルも、アプリの形にするには、ガワをつくってやる必要があるわけですが、クラウドで開発環境さえ一緒に提供してくれるサービス、それがMonacaだ。職場でも家でも、バリバリ作業できちゃう。

Monaca - HTML5ハイブリッドアプリ開発プラットフォーム
https://ja.monaca.io/

これね、マジ簡単。なんか連中の言いなりに沿ってると、それっぽくアプリになってしまう。具体的には、このMonacaのアプリを端末に入れて自作のサンプルを開くと、エミュレータみたいになってて動作が確認できます。

Onsen UI

作業を進めていくうちに、だんだんアプリの勝手がわかってくると、例えばタップとクリックは似て非なるもので、どうも求められるインターフェイスは、微妙にWebとは異なるようにも感じてきます。そこで、このOnsen UI。Monacaの会社がつくるフレームワーク。これ。

Onsen: HTML5モバイルアプリをもっと速く、もっと美しく
http://ja.onsen.io/

iOSアプリ風の見た目なんかも、このOnsen UIが用意してくれるので、ダサダサの僕らでも、一応シュッとした感じに完成してしまう。ありがとうOnsen UI。ただコレ、各端末のブラウザの問題なんだろうけど、スタイルシートの解釈が微妙にそれぞれみたいで、細かい見栄えを気にし出すと大変です。

jQuery

で、だんだんと機能するものを組み立てていくわけですが、いくつかのJavaScriptライブラリに、大変お世話になります。まずこれだ。漢は黙ってjQuery。

改訂版 Webデザイナーのための jQuery入門

作者: ?津戸壮,小原司
出版社/メーカー: 技術評論社
発売日: 2014/11/14
メディア: 大型本
この商品を含むブログ (4件) を見る

$とか書くと動き出す。マジで。ちょっと感動。操作も簡単で、なんかシュシュシュと書ける。よく考えてから書かないと、あまりにも自由過ぎて、何やってるのかわからなくなるけど、まあよく考えればいいだけ。なんか難しそうなフレームワークが流行ってるらしいけど、俺はjQueryでいいや。

linq.js

Beer Balance*4では、データを集計する仕事のうち、けっこうな部分を端末側で行っています。で、このlinq.jsは、JavaScriptで扱うデータ*5なんかを、SQLの言葉でもって集計させてくれるライブラリ。

linq.js - LINQ for JavaScript
https://linqjs.codeplex.com/

パパパっとGroup Byできる。最高。マジで。なんかもうね、別の話だけど、もうピボットテーブル要らないよ。JSON落っことして、linq.jsで集計して、HTMLで表示。これ。

サーバー側

今度ビールを、1)誰から誰に、2)何杯おごるのか、3)時刻と一緒に、サーバーに記録したり、データを引き出したりするわけですが、そうしたバックエンドを支援してくれるサービスを、最初は使っていました。代表選手としては、先日終了がアナウンスされたParseや、もちろんMonacaが提供するもの、また日本語だとニフティもあります。

mBaaSでサーバー開発不要！ | ニフティクラウド mobile backend
http://mb.cloud.nifty.com/

とはいえ結局その後、借りたサーバー上で、PHPとMySQLの簡単なプログラムを書きました。練習練習。ここでも、いきなり逆引き辞典を買って、とりあえず適当にパクって改変する試行錯誤だ。