はじめてのMonaca
Fujitsu extended Advent Calendar 2016 の 8日目です。
せっかく2枚目を作成して頂いたので、ギリギリ関連会社のような気がしますので参加させて頂きます。
今回は、ひょんなことからMonacaの初心者向けセミナーに参加したので、復習のために超初心者向けに簡単に紹介をします。
お決まりですが、
記事は全て個人の見解です。会社・組織を代表するものではありません。
npmだのES6だのは出てきません。
他と比べてレベルが低いことはご容赦ください。
はじめに
Monacaとはなにか?というのは本家にそのものがあるので譲ります。
Monaca とは?
Monaca は、アシアル株式会社が提供する、スマートフォン・タブレット向けアプリの開発ツール、Web サービスなどの総称です。Monaca では、スマートフォン向けのアプリ開発が、誰でも簡単にできるように、各種開発ツール・ Web サービスに加え、サポート ( StackOverFlow での議論の場、情報提供用のブログ、ツールの取扱説明書など ) も提供しています。Monaca では、ハイブリッド 技術を駆使して、モバイルアプリを開発できます。また、Monaca では、HTML5 を使用した、クロスプラットフォーム開発を実現するため、PhoneGap/Cordova を採用し、加えて、開発効率を向上させるため、クラウド技術を使用した、統合的な開発ツールおよび Web サービスを提供しています。これにより、「 ハイブリッド モバイル アプリ 」 の開発を、容易に開始できます。また、Monaca が提供する開発ツールは、特定のフレームワークには依存していないため、柔軟性があり、現在の開発工程・開発環境にも、スムーズに導入できます。また、Cordova プラグインの組み込みも簡単に行えます。
セミナーで使用したテキスト。Amazonでは新品は買えないようです。
Monacaで学ぶはじめてのプログラミング?モバイルアプリ入門編?
- 発売日: 2016/03/18
- メディア: ハードカバー
- この商品を含むブログを見る
テキストの内容としては、タイトル通り、プログラミング初心者またはWeb開発を全くやったことがない方には丁度良いかもしれません。
開発準備
Githubのアカウントがあればそれが使用できます。
登録後、ダッシュボードを表示します。
携帯にデバッガをインストールします。お使いのデバイスに合わせて。後々わかりますがこれがすごい便利です。
play.google.comはじめてのプロジェクト
無料コースでは3つしかプロジェクトが作れないので、とりあえずデフォルトのものは削除し、プロジェクトを作成します。
色々テンプレートがありますが、今回は No Framework を選択し、サンプルアプリプロジェクトを作成します。
作成したプロジェクトを開くと、Web上のIDEが表示されます。
設定でテーマを安定のMonokaiに、キーバインドは安定のvimで。
vimにするとエディタの補完が効かなくなるので注意。キーバインドをEmacsにした場合は・・・、しないからわかりません。
次に携帯の設定。携帯に前述したデバッガを入れ、起動します。
ここで、このデバッガがすごいところは、Web IDEで変更した内容が携帯のほうに自動更新されるところ。
画像では伝わらないですけど。
JavaScript動作確認
JavaScriptがちゃんと動くのか?の簡単なテストを行ってみました。
使用するライブラリは Fabric.js。
Fabric.js Javascript Canvas Library
CDNでは動作しなかったので、ファイル(fabric.min.js)をダウンロードし、新たに作成したディレクトリ js 以下に追加しました。
HTMLファイルは以下のように。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script type="text/javascript" src="js/fabric.min.js"></script> <script type="text/javascript" src="js/main.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="css/style.css"> <script> </script> </head> <body> <canvas id="main"></canvas> </body> </html>
stylesheetも少し。
html, body { width: 100%; height: 100%; margin: 0px; background-color: #CCFFFF; }
JavaScript部分。
window.addEventListener('load', function() { document.getElementById('main').width= window.innerWidth; document.getElementById('main').height = window.innerHeight; var canvas = new fabric.Canvas('main'); var circle = new fabric.Circle({ radius: 60, fill: 'green', left: 100, top: 175 }); var triangle = new fabric.Triangle({ width: 100, height: 100, fill: 'blue', left: 50, top: 50 }); var rect = new fabric.Rect({ left: 200, top: 300, fill: 'red', width: 100, height: 100 }); canvas.add(circle, triangle, rect); });
Web IDE 上ではこのように。
携帯では以下のように。
終わりに
どうでしょうか?可能性を感じませんか?
ハイブリッドアプリはパフォーマンスが良くないとは聞きますが、その点は要件次第でしょうか。
ただ、JavaやSwiftが使えないフロントエンドエンジニアでも携帯アプリを作れるというのはすごいメリットではないでしょうか?
簡単ですが、以上です。