アプリ開発

【ハイブリッドアプリ】学習ポイントがはっきりしてきたのでまとめる

さっそくですが、僕はこんな記事を出したんですね。

個人開発でSNSをどうやって作るか考えてみたどうも!とりもです。 今回は、自分がいつか作ってみたいSNSをどうやったら作れるのか?という事を考えてみました。僕のレベルはプログ...

ハイブリッドアプリでSNSを作ってやるぜ!みたいな事を思っていたのですが、未経験者なので「なんか出来そう」ぐらいの感覚でこの時は喋っていました。

今でも「なんか出来そう」とは思っているのですが、何を学習するべきか見えてきたので今回はそれをまとめようと思います。ちなみに開発環境はMonacaを使っています。

ハイブリッドアプリ開発のポイント

現在特に学習が必要だなと思っているのが2点です。

  1. UIとUX
  2. サーバー通信

サーバー通信に関しては、想像はついていたので「まぁ…」って感じなのですがUI面に関しては全く想像していなかったので、ちょっと驚いています。UIなんてHTMLとCSS使えるからそれっぽくできるんじゃないの?ぐらいの感覚でいました…各々細かく書いていきます。

UIとUX

簡単にUIとUXの説明を書きます。

UI:ディスプレイにどう表示されているか

UX:サービスを通してユーザーがどう感じるか

ハイブリッドアプリでどう関係するかと言うと、ハイブリッドアプリはWebで使用される言語であるHTMLやCSSで表示物を作っていくことになります。これらはブラウザで表示されてきましたが、このハイブリッドアプリはスマートフォンのアプリをつくるためのものです。

という事はユーザーのデバイスはPCではなくスマートフォンになるわけです。スマートフォンで普段使い慣れてるような表示(UI)や操作感(UX)でないとアプリを使っている人が「このアプリ使いずらい…」となるわけです。

じゃあそれっぽいUIやUXをHTMLとCSSとJavaScriptで作ればいいやん!って僕は思ってた訳なんですが、そんな事しなくていいらしいんです!なんとそのUIとUXを補ってくれる素晴らしいライブラリがあったのだ!それがこいつだ!?

 

OnsenUI

 

とりも
とりも
うわ~名前いかすわ~(棒読み)

でも温泉みたいに癒されるのは間違いない!だって僕がやろうとしていた事をやってくれるライブラリだもん!まじで神です!

先ほどの文章だけだとわかりづらいと思うので、OnsenUIを使うと簡単に作れちゃう見慣れたUIをいくつかご紹介します。

どうどう?見たことあるでしょ?これを使えばこいつらがサクッと作れちゃうらしいよ!

ただ、ちょっとした懸念点がある…OnsenUIはAngularJSというJavaScriptフレームワークの上に構築されているらしい…JavaScriptの基礎すらおよよ???って感じなのにまたなんか新しいの出てきた!って感じです。まとめると学習コストが懸念点です。

AngularJSについてはまだ詳しく調べてないので後々記事化しようと思います。

最後にUIとUXの学習ポイントをまとめます。

要点まとめ
  1. OnsenUIというライブラリを使うとスマートフォンライクなUIとUXを提供できる
  2. AngularJSというフレームワークを学習する必要がある

サーバー通信

これは経験があるプログラマーの方だったら余裕なのかもしれませんが、僕はサーバーサイドのプログラムを書いた事がないです。そもそもサーバーサイドのプログラムをMonacaで書けるのか?って思ってたらこんなの見つけました。

アプリはスマートフォンなどのモバイル端末上で動作しますので、サーバー上で動作するプログラムは動きません。ただしサーバーとアプリを通信させることで連携アプリを作ることは可能です。

MonacaEducation:FAQより引用

 

ほ、ほう?Monaca上ではクライアント側の処理しか書けないけどサーバーと通信してあんな事やこんな事は出来るって感じか…どっちみちやった事ないからわからんけどな!

外部のサーバーと通信するって事は分かったと…じゃぁどうやってやるの?調べてみたらAjax(Asynchronous JavaScript + XML)通信とかいうのがあった。

これをアジャックスって言うてたけどエイジャックスのが適切だと思う。Wikipedia大先生はAjax(エイジャックス、アジャックス)って書いてあるけどAsynchronousを聞いた感じ頭でエイって言うてるからエイジャックスと呼ぶ事にしている。

ちなみにこのAjax通信で外部サーバーと通信できそう!という事がわかっただけで、詳しくは知らない!これも後から記事化していきます!

また、サーバーサイドプログラミングはNode.jsとかも興味あるのでこれも学んでいけたらなと思っております。

まとめ

ハイブリッドアプリ開発の学習ポイントは2点

要点まとめ
  1. UIとUX(OnsenUI,AngularJS)
  2. サーバー通信(Ajax通信)

今回は、ハイブリッドアプリの学習ポイントを書かせていただきました。作りたいアプリによってはデバイス機能を利用する為にどうすればいいのか?など他にも学習するポイントが出てくると思います。

結局作りたいものに応じて、新しい知識をつけていくのは当たり前ですからね。僕も意欲的にお勉強出来たらと思っています。最後まで見てくださりありがとうございました。