マンガ、進撃の巨人が熱い展開を迎えてますね。
その展開に呼応するがごとく、沖縄めちゃくちゃ暑いです。
３月１日は２０度だそうです。orz..それはともかく、
ジュニアプログラミングスクールコードではHTML、CSS,
javascriptの３つの技術をメインで教えています。
※エイチティーエルエム・シーエスエス・ジャバスクリプトと読みます。
基本的にはウェブサイトやウェブアプリを作るための技術です。

スマホアプリ作りは学べないのか

それじゃあスマホアプリは作れないの？
と思われる方がいらっしゃるかもしれないのですが、３つの技術でも
スマホアプリを開発する事ができます。
ということで、今回はionic（アイオニック）を用いたハイブリットアプリ開発
について書きたいと思います。

アプリが作れる新技術、ionic（アイオニック）とは

一言で説明すると、iosやandroid向けのモバイルアプリが
作れるフレームワーク（ソフトウェア）です。

アイオニックの特徴を刮目せよ

• シンプルでオシャレなUI(ユーザインターフェース）を提供してくれる。
• オープン ソース モバイル開発フレームワークで
  HTML5、CSS3、JavaScript 等のweb 開発技術を使用したアプリ（ハイブリットアプリ）
  を作成する事ができる。※厳密にはjavascriptではなくAngularJS
• クロス プラットフォームである

上の2つの特徴（UIとハイブリットアプリ）についてはなんとなく
理解できると思います。
ここでは特徴の3番目に挙げた、クラスプラットフォームについて少し細かく説明します。

クロスプラットフォームでアプリ作りが半分の手間に

あなたが日常で利用しているスマホは、2つのタイプに分けることができます。
ios(iphone)とandroidです。両方とも、ストアからアプリをインストールする事
ができたり、lineでお互いにコミュニケーションが取れたり等、共通点が多く
見られますが、大きく異なるところがあります。

それはアプリを作成する際に使用するプログラミング言語です。
ios(iPhone)は主にswiftという言語を用いてアプリを開発していきますが
androidはjavaという言語で開発をします。

もしあなたがiphone向けにswiftでゲームを開発したとしましょう。
あなたが作ったゲームをandroidのスマホを持っている人に遊んでもらう
ためには、swiftで書いたゲームのプログラムをjavaで書き直さなければいけないのです。
書き直すだけならまだいいでしょう。でも考えてみてください。
ゲームに追加機能やバグの修正があった場合、swift、javaの両方の言語で
対応しなければならなくなります。単純に手間が2倍になってしまいます。

1つのプログラムでios、androidの両方に対応できたらいいのに・・・。
これです。
クロスプラットフォームというのは1つのコードでiphoneやandroidといった異なる環境で
動作するプログラムを生成することができる優れものです。
冒頭で名前を出したionicはHTMLやCSS,javascriptといったWEBサイト構築
の技術を利用してios、andoroid両方のスマホで動作するアプリを作成することができます。
つまりPCでWEB作成の経験があれば、
ある程度のスマホアプリを開発する事ができます。

Ionic（アイオニック）のデメリット

いままで、いい事ばっかりかいてきましたが、
もちろん良いところばかりではありません。
先ほどに述べた通り、両方のプラットフォームで動作するアプリは、
HTML、CSS、javascriptで作られたアプリ（ハイブリットアプリ）となります。
そのため、swiftやjavaと比べて実行速度が遅い傾向があります。
最近の技術の発達により速度のデメリットは改善してきていますが、
まだ早いレスポンスを必要とするタイプのアプリケーションには不向きです。

さっそくIonic（アイオニック）を使ってみよう！

 

スマホアプリ開発環境構築

ここからは、お手持ちのMacを使ってアプリ開発の環境を構築してみましょう。
ここからは実際に入力を行っていきます。作業に入っていくので、「とりあえず
頭に入れときたい」という方は「ふーん」程度に読んでもらえればと思います。
もっと興味がある方は今から開発してみませんか？（笑）

今回はmacOSを使用しています。
macOSの『ターミナル』を開いて以下のコマンドを実行します。
なお、Node.jsとnpmが入っている事が前提となります。

コマンドが完了し以下のコマンドでionicのバージョンが表示されればOKです。

チュートリアル体験
それでは、チュートリアルのアプリ作成を体験してみましょう。
ionicはアプリを作る際にコマンドひとつで必要なフォルダ、ファイルを作成してくれます。
下のコマンドを実行すると、次のような画面になります。

プロジェクト名を入力をもとめられますので
今回はionic_projectと入力しました。

その後、テンプレートとして７つのサンプルが用意されているので、tutorialを選択します。
以下の確認が表示されたらyを入力してEnterを押します（スマホビルド用のファイルを利用するかの確認です）

ファイルのダウンロード等でしばらく時間がかかるので待ちます。
しばらくすると次の確認が表示されます

tutorialではionic proの機能は利用しないのでnでを入力してEnterを押してください
Next Stepが表示されればOKです。

 

作成されたionic_projectに移動します。

続いて次のコマンドを実行します

すると自動的にブラウザが立ち上がり次のような画面が表示されます。
もちろん画面上のボタンやメニューを操作することが可能です。

ionic-labという機能を利用すると、ios,android,windows等で表示した時の見え方を
プレビューしてくれます。
ionic-labで見るためには、URLを『localhost:8100/ionic-lab』としてアクセスする
ことで、次の画面のように確認する事ができます。
コマンドを入力するだけでこんなに簡単にアプリが作れてしまいます。

アイオニックでさっそく作ってみよう
ここでは、ionicを使って作成できる簡単なモバイルアプリの例を紹介します。

アプリの定番。仕事を整理するタスクリストを作ってみる。ionicのtutorialから簡単に作成する事ができます。
タスクの登録、削除、変更等が可能です。
データを登録するので、データベースが必要なのかな？と思うかもしれませんが
WEBストレージを利用することでブラウザ自身にデータを格納出来き、簡単に
作成する事ができました。

 

プログラミングスクールコードビューワー（wordpressビューワ）

プログラミングスクールコードのホームページはwordpressを用いて作成されています。
投稿されたデータをWordpressのRestAPIで取得してアプリ内に表示したものです。
ionicで採用されているAngularはフルスタック（全部入り）なので通信に必要なライブラリ等が
すでに組み込まれています。
そのため、このサイトの閲覧専用アプリを簡単に作成する事ができます。

自分のお気に入りのサイトからデータを集めて、自分専用のアプリを作成することもできそうですね。
javascript(AngularJS)がかければもっともっと複雑なモバイルアプリも作成できます！

あなたもHTML、CSS、javascript(Angular)を学んでスマホでアプリを作ってみませんか？