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

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

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

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

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

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

1.新規登録をしよう！

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

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

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

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

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

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

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

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

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

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

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

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

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

<h1>HogeHoge</h1>

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

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

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