ひとつのiOSアプリができるまで – Lluminoを支えてくれたものたち。

2013-03-25

たくさんのひとのおかげで、シンプルで美しい(をめざした)電卓「Llumino」を無事に仕上げることができました。

今回は感謝を込めて、Lluminoを支えてくれたものたちを紹介したいと思います。アプリ制作に携わる人の参考になればうれしいです。

10年後でも(たぶん)通じる最強のエディタ – Vim

言わずと知れた、流行に左右されない最強のテキストエディタ。 Macなら、さかもとさんが公開してくれているmacvim-kaoriyaがオススメ。

hjklカーソル移動の壁を越えると、脳がキーボードと直結します。プラグインを入れれば、補完もできます。静的解析もできます。

それでもない機能は、自分でVim script書いてつくりましょう。

Inkscapeは、オープンソースのベクター系のお絵描きソフト。

アイコンも、UIデザインも、Webページも。 Lluminoのデザインに使っているのは、ほぼこれだけです。

一番お世話になっているであろうこのソフト。そのうち連載記事を書きたいなぁ。

Reflector.appは、AirPlayミラーリングを利用して、Mac上でiPhone実機の画面を表示するアプリ。

iOSシミュレータはマウス操作なので、そのまま録画するとどうしても違和感が出てしまいます。このアプリなら実機の操作を録画できるので、自然な仕上がりに。

紹介ページ内の動画に、このアプリを使っています。

Reflector.appで録画すると、タッチ位置が見えません。そこで、KTouchPointerWindowの出番です。

いとーけーさんが作ったこのライブラリは、タッチ位置をカッコよく表示してくれます。

アプリへの組み込みは、たった1行書き足すだけ。超便利です。

KTouchPointerWindowInstall();

Reflector.appと組み合わせて、紹介ページ内の動画で利用しています。

HTML5からvideo要素が追加され、動画が簡単に埋め込めるよう……なステキな時代は、残念ながらまだ来ていません。

ブラウザごとに対応フォーマットが異なるため、何種類も用意する必要があるのです。主要なモダンブラウザを網羅するなら、「.mp4 (MP4/H.264)」「.webm (WebM/VP8)」「*.ogv (Ogg/Theora)」の3種類。

(対応ブラウザについては、こちらをどうぞ: Can I use the HTML5 video element?)

これらすべてに対応しているのが、このMiro Video Converter。オープンソースです。

オープンソースなものはUIが軽視されがちですが、このアプリは「beautiful」と謳っていてすばらしい。

Reflector.appで録画した動画を、このアプリで上記3フォーマットに変換しています。

動きのあるWebページをつくるにはJavaScriptを使うわけですが、そこで用いているライブラリがGoogle Closure Library。紹介ページ内のHTML5ビデオプレイヤーやカウントダウン表示は、このライブラリを基盤に開発しています。

「ぼくのかんがえたさいきょうのコンポーネント」を書きはじめる前に、このライブラリの中身を探してみましょう。たいていのものが揃っています。

環境構築が少し面倒なのですが、ここさえ越えれば、あのカオスなJavaScriptを比較的素直に扱えるようになります。

開発をはじめる際の負担を減らすため、コマンド一発でセットアップできる「goog-starter-kit」を作成し、実戦投入しています。 (その後、「goog-starter-kit」は「Googkit」と名前を変え、機能と利便性が大幅に向上しました！)

興味があれば、ぜひお試しください。

紹介しきれないので、思い出せる範囲で箇条書きにしておきますね。

動画系にはAdobeの製品群がガッツリ入ってきます。

今回のためにカメラを買い、Adobe Create Cloudに加入したのです。月額料金が、ボディーブローのようにジワジワ効いております…(T_T)

こうやってまとめてみると、本当にたくさんのものに支えられていますね。きっと他にも、たくさんあるはず。

感謝を忘れず、自分は何が貢献できるか考えつつ、また次のステップへ進んでゆきます。