HTML5・ CSSで作れるハイブリットアプリ開発

おはようございます！りーさんです。

機能の授業で扱ったMonacaという開発クラウドでアプリを作成しました。

iPhoneアプリ開発iOSならSwift/Xcodeで開発、Androidアプリ開発ならAndroid studio/Java・Kotlinで開発でしたよね！しかし、Monacaは両方のアプリ開発をHTML5できるハイブリットアプリ開発です。

今回はMonacaについて簡単に紹介したいと思います。

Monaca

• HTML5とは
• iPhone・Android実機デバック
• UIを誰でも簡単に

　　　　　　　　　　　

HTML5とは

HTMLとはハイパーテキスト・マークアップ・ランゲージの略で、Webサイトを作るために必要簡単なマークアップ言語です。今ネットで閲覧している情報はHTLM.CSS.javascriptなどの言語でほとんど作られています。5というのは最新バージョンていう意味です。

プログラミング言語初心者が始めやすい言語となっており、文字などを打つときにHTMLが使われていて、デザイン・レイアウトをCSSで表現します。

メニューバーなどの動的な動きを表現できるJavascriptなど他にもWeb系言語は多くあります。ブログの編集もHTMLでできているんですよ！！

iPhone・Android実機デバック

MonacaはHTML5でアプリ開発するとiOSとAndroidのアプリ両方を一つのコードで開発する事ができ、スマートに作ったアプリを実機でテストする事が可能なんです。

Monacaのスマホ用アプリを起動しログインするだけでデバックが行えます。

Web系言語を習得している方はMonacaでアプリ開発する事が非常に簡単にできてしまいます。僕はAppleが好きなのでSwiftが好きですけどね♪(´ε｀ )

UIを誰でも簡単に

                                         

Monacaに搭載されているUIライブラリー 「Onsen UI」を使えば、HTML・CSSで

アプリ画面上のUIを作り出せてしまいます。　そのまま温泉みたいなマークですよね笑

HTMLでiOS・androidの画面遷移やUIViewなど作れるみたいですよ。

Web言語を触れている人ならば、本格的なアプリもユーザーインターフェイスがしっかりしているアプリも簡単開発できてしまいそうです。なんか怖いな(๑･̑◡･̑๑)

Gitによるバージョン管理もサポートされていてとても安全そうです。

こんなハイブリットアプリ開発を授業でしました。

僕が作ったのはおみくじアプリです。HTMLとCSSはあんまり触れてなかったので

作るのに時間がかかってしまいました。もし良かったら見てくださいね。

[

こんな感じに動きます
💪( ˙꒳​˙💪)
通知が来てから画像が切り替わるので
少し残念です笑 pic.twitter.com/wOjb4fhn2f

— IOSエンジニアになるために勉強中りーさん (@iPhone14545061) 2020年5月18日

いまさっき大学の課題でMonacaでアプリなんでもいいから作ってと来たので作りました！

HTMLとCSSはあんまりやったことないのでわかんなかったのですが何とかやり遂げました😭
見覚えのあるif else文があったので適当にやったらエラーなしでできた

おみくじアプリです！
アラート(通知)もあります。 pic.twitter.com/pHPp6utaWW

— IOSエンジニアになるために勉強中りーさん (@iPhone14545061) 2020年5月18日

以上Monacaの紹介でした！！

最後まで見ていただきありがとうございました。