Webフロントエンジニアのためにアプリ開発の導入部分を説明する

アプリとか作ってみたいね、ってことで友人たちといろいろ計画したときに、アプリ開発に明るくないメンバ向けに情報をまとめた時のメモ。
皆さん、HTMLとCSSでウェブサイト作ったことはあったり、Webアプリの考え方は何となくわかるようだったので、若干Webアプリ開発との対比のような内容になってます。

背景

有識者は多くないけど折角ならWebアプリで終わりたくない、ということでハイブリッド(後述)を採用。

実際に手を動かそう！の前に、スマホアプリ開発のイメージを持ってもらうことを重視したので、「説明が雑すぎる」とか「厳密に言ったらそれ違うでしょ」とかあるかもしれませんが、ご容赦ください。

筆者は正しく理解してますよ。理解してますってば。

ハイブリッドアプリ

Webアプリとネイティブアプリの良いとこ取りをした開発方式として、ハイブリッドアプリがあります。

• Webアプリ

  • メリット
    • 基本的にブラウザでアクセスするので、難しい実装しなくても最悪HTMLとかCSSとか書ければOK。
    • PCのブラウザからもアクセス可能。（⇒ウェブサイトとかのことですね。）
  • デメリット
    • スマホへのプッシュ通知や、アルバムやアドレス帳との連携など、スマホの機能を取り入れたものは作れない。

• ネイティブアプリ

  • メリット
    • スマホの機能を存分に使ったアプリが作れる。（⇒スマホアプリ、と言うと、この方式のことを指すのが普通なのではないでしょうか。）
  • デメリット
    • AndroidとiOSなど、OS別に専用のプログラミング言語で作る必要があり、開発のハードルが高い。
    • その言語の知識がないと作れない。
    • OSの知識も求められる。

ハイブリッドアプリの仕組み・特徴

• 実装には主に、HTML、CSS、JavaScriptを使用。
• HTMLとCSSでレイアウトを作成できる。
• Cordovaというアーキテクチャが、スマホ本体をjavascriptで操作できるように橋渡しをしてくれるため、OS毎にいろいろな言語をかき分けなくてよい。

※ここではCordovaと言い切ったけど、多分それ以外のものを使ったハイブリッドアプリもあります。けど今回はCordova使います。

開発方法のイメージ

この辺から著しく雑になってきます。今後の知識習得の邪魔になったらごめんなさい・・・。
なんとなくイメージができるようになることを重視します。

上記の通り、お手軽感のあるハイブリッドアプリ。とは言えそれを開発する環境は必要です。

HTML、CSS、JavaScriptだけだったら、極端なこと言えばエディタだけでも書けるし、ブラウザ起動すれば動作確認も出来ないことはないですね。

でも今回はスマホアプリ。

• Cordovaが上手いこと橋渡ししてくれるって言うけど、Cordovaどこにいるの？開発PCに入れたりするの？
• そもそもパソコンでデザイン書いてるのに、そこからスマホの機能を使う、っていうのが意味わからない。
• 動作確認したいけど、パソコンで書いたデザイン達はどんな風にアプリの形にして、スマホに入れればいいの？

というような事、思いませんか？

実際のところ、

• CordovaがPCで動くようにいろいろダウンロードしてセットアップ
• Cordovaとデザイン達を繋いで、スマホ機能を使えるように設定
• エミュレータと呼ばれる、PC上で動く擬似スマホを開発 PCにインストール
• Cordovaとデザインをまるっとパッケージングして、擬似スマホ内に配置

みたいな事をすれば、コストかけずに実現可能です。
実際、そうやって開発してる人たくさんいると思います。
でもこれだけ見ると、開発環境作るのがすでに面倒そうですね。

Monacaを使うことにした

Monaca
https://ja.monaca.io/

基本的にコストかけないで進めたいねー、とか話していたのですが、環境構築の方法についてもレクチャーが必要そうだな、と。
構築しても使い方を共有して、、、とか考えると、作り始めるの何か月後になるんだろう？と思いました。

なので今回は、多少コストがかかってもより早く簡単にできる方法として、Monaca採用しました。
ただ、今回私たちが作ろうとしているアプリは、コストかけないと実現できない、というだけです。
Monacaは無料で使うこともできるようなので、ちょっとやってみようかな、くらいだったら無料枠でOKだと思います。

monacaとは

• ブラウザでMonacaにログインして、ブラウザ内でデザインとかJavaScriptとかを実装できます。（インストールして使うクライアントソフトもあるみたい。）
• デザインとかが出来上がったら、Cordovaとデザインを結びつける部分を実装します。（この辺が若干特殊に感じるかも。AngularJSとかのフレームワーク知ってればなんてことはない。）
• ブラウザ上でポチポチ操作していくと、デザイン＆Cordovaをパッケージングしたものが、インターネット経由で自分のスマートフォンから開けるようになります。（出来立てホヤホヤアプリの動作確認が、スマホ実機でできます。）

自分のPCには何も準備せずに、ブラウザさえあれば動作確認まで完了です！

Monacaについて詳しく知りたい人は、入門系の記事書いてる人がたくさんいるので、検索してみてください。

おわりに

アプリ開発に限らない話ですが、何か新しいことに手を出そうとすると、コアとなる部分にたどり着く前に、設定やら環境構築で打ちのめされたりすることが多々あります。

まずは最短ルートでやりたいこと（今回でいえばアプリ作成）に触ってみて、わかってきてからほかの方法も試してみる、というほうがモチベーションも保ちやすい！

そういった意味で、Monacaはなかなかおすすめです。
もちろん、わかってきたら自分で環境作ってみたりすると、いろいろ幅が広がるとは思います！

※本記事はざっくりとイメージをつかむことを重視しているので、少しわかってきたら「正しく詳細な情報」を調べなおすことをオススメします。