読者です 読者をやめる 読者になる 読者になる

はじめてのMonaca

Fujitsu extended Advent Calendar 2016 の 8日目です。
せっかく2枚目を作成して頂いたので、ギリギリ関連会社のような気がしますので参加させて頂きます。

今回は、ひょんなことからMonacaの初心者向けセミナーに参加したので、復習のために超初心者向けに簡単に紹介をします。

お決まりですが、
記事は全て個人の見解です。会社・組織を代表するものではありません。

npmだのES6だのは出てきません。
他と比べてレベルが低いことはご容赦ください。

はじめに

Monacaとはなにか?というのは本家にそのものがあるので譲ります。

ja.monaca.io

Monaca とは?
Monaca は、アシアル株式会社が提供する、スマートフォンタブレット向けアプリの開発ツール、Web サービスなどの総称です。Monaca では、スマートフォン向けのアプリ開発が、誰でも簡単にできるように、各種開発ツール・ Web サービスに加え、サポート ( StackOverFlow での議論の場、情報提供用のブログ、ツールの取扱説明書など ) も提供しています。

Monaca では、ハイブリッド 技術を駆使して、モバイルアプリを開発できます。また、Monaca では、HTML5 を使用した、クロスプラットフォーム開発を実現するため、PhoneGap/Cordova を採用し、加えて、開発効率を向上させるため、クラウド技術を使用した、統合的な開発ツールおよび Web サービスを提供しています。これにより、「 ハイブリッド モバイル アプリ 」 の開発を、容易に開始できます。また、Monaca が提供する開発ツールは、特定のフレームワークには依存していないため、柔軟性があり、現在の開発工程・開発環境にも、スムーズに導入できます。また、Cordova プラグインの組み込みも簡単に行えます。

Monaca での開発の概要 - Monaca Docs


セミナーで使用したテキスト。Amazonでは新品は買えないようです。

テキストの内容としては、タイトル通り、プログラミング初心者またはWeb開発を全くやったことがない方には丁度良いかもしれません。

開発準備

Githubのアカウントがあればそれが使用できます。
f:id:yossk:20161207205116p:plain

登録後、ダッシュボードを表示します。
f:id:yossk:20161207210220j:plain

携帯にデバッガをインストールします。お使いのデバイスに合わせて。後々わかりますがこれがすごい便利です。

Monaca

Monaca

  • Asial Corporation
  • ユーティリティ
  • 無料
play.google.com

はじめてのプロジェクト

無料コースでは3つしかプロジェクトが作れないので、とりあえずデフォルトのものは削除し、プロジェクトを作成します。
色々テンプレートがありますが、今回は No Framework を選択し、サンプルアプリプロジェクトを作成します。
f:id:yossk:20161207214810j:plain
f:id:yossk:20161207214957j:plain
f:id:yossk:20161207215331j:plain

作成したプロジェクトを開くと、Web上のIDEが表示されます。
設定でテーマを安定のMonokaiに、キーバインドは安定のvimで。
vimにするとエディタの補完が効かなくなるので注意。キーバインドEmacsにした場合は・・・、しないからわかりません。
f:id:yossk:20161207220036j:plain
f:id:yossk:20161207220228j:plain
f:id:yossk:20161207220434j:plain
f:id:yossk:20161207220627j:plain

次に携帯の設定。携帯に前述したデバッガを入れ、起動します。
f:id:yossk:20161207221839j:plain
f:id:yossk:20161207222011j:plain
f:id:yossk:20161207222018j:plain

ここで、このデバッガがすごいところは、Web IDEで変更した内容が携帯のほうに自動更新されるところ。
画像では伝わらないですけど。
f:id:yossk:20161207222500j:plain
f:id:yossk:20161207222635j:plain

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 上ではこのように。
f:id:yossk:20161207234111j:plain

携帯では以下のように。
f:id:yossk:20161207234610p:plain

終わりに

どうでしょうか?可能性を感じませんか?
ハイブリッドアプリはパフォーマンスが良くないとは聞きますが、その点は要件次第でしょうか。
ただ、JavaやSwiftが使えないフロントエンドエンジニアでも携帯アプリを作れるというのはすごいメリットではないでしょうか?

簡単ですが、以上です。

WEB+DB Vol.93 読んだ

積んでたのを今更。

WEB+DB PRESS Vol.93

WEB+DB PRESS Vol.93

続きを読む

Angular2 チュートルアルをやってみたけど・・・

angular.io

JavaScript の勉強の流れで Babel を使いたくて進めてたけど、どうやら TypeScript で進めないとダメっぽいのかな。
private などの修飾子は使えないし、DIも使えないっぽい。
TypeScript は個人的にはちょっと。これが ES8 くらいで標準になるのであれば覚える価値はあると思うけど・・・。
COBOL で言う JCL のような(というと言い過ぎか)。
JavaScript での例はまだ公開されていないので、もうちょっと様子見。

「速習ECMAScript」読んだ

JavaScript

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター!

ES6 をざっと知るには良かった。250円だし。

続きを読む

「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」読んだ

JavaScript

最後まで読んだ。
前の本も含めて、傍に置いておきたい。

続きを読む

「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」途中 その3

JavaScript

Chapter 6 まで。

続きを読む

「JavaScriptの理解を深めた人がさらにもう一歩先に進むための本」途中 その2

JavaScript

Chapter 4 まで。
call と apply の使いどころはどこだろう?
bind については、React で props 伝播するのに使った。
アロー関数については先日の学習のなかで把握した、関数定義時のコンテキストを参照することなど。
developer.mozilla.org

ES6で Ruby と同じSymbolが追加されている。
developer.mozilla.org