Monaca初心者必見!わかりやすいハイブリッドアプリ作成講座 | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

Monaca初心者必見!わかりやすいハイブリッドアプリ作成講座

前回の記事で、Monacaの紹介をしましたが
引き続き、Monacaについてご紹介していきます。

ハイブリッドアプリ作成講座ということで、順を追って使い方を見ていきましょう。

Monacaとは?

ハイブリッドアプリを簡単に開発できるクラウド上の開発環境です。

Monacaとハイブリッドアプリについて詳しくは前回の記事をご確認下さい。

ハイブリッドアプリを作ってみよう!

3つのステップでハイブリッドアプリを開発していきましょう。

1.新規登録をしよう!

Monacaの公式サイトに遷移します。
https://ja.monaca.io/

monaca_blog_1

右上の「サインアップ」をクリックして、登録フォームをだしてください。

monaca_blog_2

メールアドレスとパスワードを記入して、登録完了!

2.テンプレートを選択しよう

monaca_blog_3

登録すると上図の画面が出ますので、
新規プロジェクトを作成をクリックしてください。

monaca_blog_4

すると、テンプレートの一覧がでてきます。
今回は「Onsen UI Tabb Tabber」を選択します。

monaca_blog_5

プロジェクト名と説明はそのままでプロジェクトを作成するをクリックします。
選択したテンプレートで新しくプロジェクトが立ち上がります。

3.コードを触ってみよう

monaca_blog_6

プロジェクトが新しくたちあがりましたので、開くをクリックします。

monaca_blog_7

プロジェクト内にはいりますので、プレビューをクリックします。
プレビューをクリックすることにより、
スマートフォンでの表示を確認することが出来ます。
また、プレビューをだしたまま、エディターを保存するとリアルタイムで更新されます。

monaca_blog_8

プレビューが表示されましたね。
プレビュー上からクリックなど、操作することができます。
それでは少し触っていきましょう。

monaca_blog_9

左のサイドバーから「page1.html」をダブルクリックしてみてください。
エディタ上に、「page1.html」のコードがでてきます。

monaca_blog_10

h1タグを使い、テキストを表示させてみましょう。
上図のようにコードをうめてみましょう。

<h1>HogeHoge</h1>

保存して更新してみましょう。

monaca_blog_11

テキストに「HogeHoge」というテキストが表示されましたね!
このようなさまざまタグを追加して、アプリを構築していきましょう。

まとめ

いかがでしたでしょうか?
テンプレートを使用して、デザインを変えるだけでハイブリッドアプリを作れます。
モックアップなど作るのでにも、十分使えるかと思えます。
フロントエンド技術とMonacaの使用方法を学び、開発してきましょう。