学べる・買える・出会える。ソフトバンクC&Sのマーケティングツール総合サイト。

  • 契約パートナー数 
  • 掲載ツール数 製品

知る・学ぶ

今更聞けない、デジタルマーケティングの基礎知識から、最新のアドテクまで、あなたに役立つ情報をご紹介します。

メーカーインタビュー

HTML5・JavaScirptでのアプリ開発を充実の機能で万全サポート!【モバイルアプリ開発ツール「Monaca」の魅力(2)】

  • 2018年02月13日
  • アプリ開発

606_catch.png MarketingBankをご覧の皆さま、こんにちは!女子大生ライターの金城樹です。このシリーズでは、ユニークなマーケティング・ツールを提供する企業にインタビューしています。
今回、取材したのはアシアル株式会社の塚田亮一様と生形可奈子様。既存のWeb制作・開発スキルでモバイルアプリ開発を可能にする開発ツール「Monaca」について、お話を伺いました。
第2回では、「Monaca」の具体的な操作方法についてお聞きします。

ブラウザ上で、標準的なHTML5を使って簡単にコーディング可能

金城:今回はMonacaの操作方法を、画面を見ながら教えていただきたいと思います。

生形:まずはこちらをご覧ください。ブラウザ上でサインアップしたところです。 606_image1.png

生形:左側に「新規プロジェクトの作成」と書いてありますが、Monacaでは開発中のアプリを「プロジェクト」と読んでいます。左側に「Hello Worldアプリ」とあるのは、サンプルのプロジェクトです。このプロジェクトを開くと次のような画面が出ます。 606_image2.png

金城:中央にあるのがソースコードのエディタですね。

生形:はい、標準的なHTML5で書かれています。下部はエラー情報、右側はアプリのプレビューを表示するパネルです。今開いているのはトップページであるindex.htmlというファイルですね。

金城:アプリのプレビューが見えるのは便利ですね。

生形:このアプリのプレビュー画面を操作することも可能です。ボタンを押すと画面遷移します。こんな感じですね。 606_image3.png

金城:これは便利ですね。

生形:はい。Cordovaの標準プラグインを使ったデモ画面です。ただし、端末固有の機能を使いたいときは、Webブラウザでは実行できないため、実機を使う必要があります。今回は右側に、ミラーリングした実機のAndroidスマートフォンを表示させてみますね。 606_image4.png

生形:この端末には、事前にMonacaデバッガーというアプリがインストールしてあります。アプリはストアで入手できます。これにより、スマートフォンの実機と、Monacaのエディタを同期させることができます。では、試しにエディタのテキストを一部変更してみましょう。 606_image5.png

金城:エディタに打ち込まれた「こんにちは!」の文字が、スマホに表示されました。ほぼリアルタイムに修正内容が反映されるのは便利ですね。

生形:デバッグ機能も充実しています。ためしにindex.htmlファイル内の、JavaScirptのコードの「"」を消し、エラーを発生させてみましょう。 606_image6.png

金城:スマホのアイコンに「!」が表示されました。

生形:バグを検知したという意味です。これを押すとログが表示されます。 606_image7.png

生形:これでエラーのあるファイル名と行番号がわかります。開発中には、Monacaデバッガーをインストールした実機をパソコンの横に置いて作業するのがよいと思います。

金城:カメラを呼び出すためのコードはどのように書くのですか?

生形:先ほどのサンプルアプリでも使われていたカメラなどの機能は、標準のCordovaプラグインによる機能です。これを実行するには、JavaScriptで用意されているAPIをコールします。具体的には、phonegap-demoフォルダの中にある、main.jsファイルに記述があります。 606_image8.png

生形:このファイルでは、カメラを呼び出す処理は105行目から記述されています。ここに記述した引数により、カメラ利用時の動作や写真の画質、サイズなどを指定できます。

金城:意外に簡単ですね!私もHTMLなら少し書けるのですが、「時間をかければ私でも簡単なアプリなら作れるかも!」と思えます。

生形:はい、Webエンジニアの方ならすぐ使えるはずです。詳細はMonacaの公式サイトのドキュメント解説をご覧ください。

開発完了後のリリースの流れもスムーズに

塚田:開発完了後のリリースまでの作業も、Monacaで便利に行うことができます。まずは、Cordovaプラグインを生成するアプリの中に組み込みます。Monacaデバッガーにはあらかじめ標準のCordovaプラグインが含まれていましたが、新たにビルドするアプリにはまだ含まれていないからです。 606_image9.png

塚田:メニューバーから「Cordovaプラグイン管理」を選択していくと、必要なCordovaプラグインを選ぶ画面が出てきます。こんな感じですね。 606_image010.png 金城:直感的に作業できる、わかりやすい画面ですね。

塚田:続いてビルドのための設定ですが、これはAndroidとiOSとで少し違います。Androidでは、アプリに開発者の署名をつける必要があり、iOSではApple Developer Programに登録したうえで、証明書ファイルを入手する必要があります。こちらの詳細はマニュアルをご参照いただければと思います。

そしていよいよビルドに入ります。本番リリースでは、次の画面で「リリースビルド」を選択します。 606_image011.png

塚田:アプリのビルドには、数分かかります。ビルドが完了したら、作ったアプリを実機にインストールしてみます。QRコードをスマートフォンで読み取るのが一番早いでしょう。QRコードを読み取ると、アプリをダウンロードできます。 606_image012.png

塚田:ダウンロードが完了しました。インストールを実行すると、スマートフォンの中に、「Hello World」という新しいアプリのアイコンが追加されるのがお分かりになるかと思います。

生形:以上がMonacaの基本操作ですが、応用的な機能としては、2000種類以上あるサードパーティ製のプラグインを利用することで、IoTとの連携やSNSとの連携など、多彩な機能を実装することも可能です。さらに、より高度なデバッグ機能を使うことで、開発効率を高めることもできます。

金城:基本操作は初心者でもわかりやすいですし、かなり幅広い機能を使えるんですね!

まとめ

開発、デバッグ、リリースまで、アプリ開発をトータルに支援してくれる開発ツールMonaca。開発者目線を徹底して大事にした操作性の高さに驚きました。
第3回では、導入事例について紹介します。

このツールについてより詳しく聞きたい方はコチラ

★Monaca×Marketing Bank特別企画
Monacaで制作したアプリ事例集をダウンロードできます!
ダウンロードはこちら

バックナンバー

既存のWeb開発スキルでiOS・Android対応のアプリ開発が可能に!【モバイルアプリ開発ツール「Monaca」の魅力(1)】

HTML5・JavaScirptでのアプリ開発を充実の機能で万全サポート!【モバイルアプリ開発ツール「Monaca」の魅力(2)】

Marketing Bankの最新情報を受け取る方法

Marketing Bankは毎日の売り上げにきっと繋がるマーケティング情報を発信中です。
会員登録してメールマガジンを受け取るか、RSS・Facebookとお好みの方法をお選びください。

MarketingBankで丸ごと解決!

メルマガ会員登録(無料)をして、
デジタルマーケティングを学ぼう!

メルマガ会員登録

Marketing Bankをフォロー

お問い合わせ・ご相談

ソフトバンクC&Sがあなたのビジネスをサポートします。
どんなことでもご相談ください。

お客様から多く寄せられるご質問はこちら
メールでのお問い合わせはこちら

TO PAGE TOP