Asial Blog

Recruit! Asialで一緒に働きませんか?

Monacaの一覧

Monacaのユーザー数10万人を突破したので記念品をつくってみました

カテゴリ :
Monaca
タグ :
Monaca
keyvisual.png
こんにちは、塚田です。

私は、Monacaのマーケティングを担当しているのですが、本日とても嬉しいニュースがありました。

なんと、Monacaの登録ユーザー数が10万人を突破致したのです。

2011年にα版を公開したMonacaですが、2013年9月に正式版提供開始からは、皆さんの応援にも差支えられ順調に利用者数を伸ばしてきました。

2014年3月のMonaca開発パートナー制度の開始、2014年10月にMonacaエンタープライズの発表、2015年2月のMonaca for Visual Studioの発表を経て、企業向けのアプリ開発でも多数ご利用いただけるようになりました。

また、大学や専門学校のアプリ開発教育でも高い評価をいただき、数百人単位でご利用いただく学校なども出てきました。

更に、昨年のRedHerring Global 100選出や地道なイベント出展などの効果も徐々に出てきまして、海外での認知度も大分上がってきました。最近では新規登録者の半分弱が日本以外のユーザーになっています。

このように短期間で10万人を超えるアプリ開発者の皆さんにご利用いただけるようになったのも、Monacaをご利用いただき、数々のアプリを世に生み出してくれているユーザーの皆様そして開発パートナーの皆様のおかげです。本当にありがとうございます。

10万人突破はとても嬉しい話ではあるものの、一方で世界のモバイル開発者人口は2014年時点で890万人とされているので、まだまだシェアはわずか1%強というレベルです。今後もMonacaに積極的に投資をして製品、サービスの拡充及び品質向上を行ない、世界中のアプリ開発者に使っていただけるような製品にしたいと思っていますので引き続き応援をよろしくお願いします。

最後にユーザーの皆さんへの記念品として10万人ユーザー突破記念Monacaオリジナルタンブラーを作成したので、そのプレゼント企画のご案内をしたいと思います。


今回作ったMonacaオリジナルタンブラーは、表がこのようなデザイン。



裏はこのようなデザインです。



本当は希望者全員に差し上げたいところなのですが、予算の都合もあり申し訳ないのですが今回は50名様に限定配布とさせてください。

皆さんが開発されたモバイルアプリについてのアンケートにお答えいただいた方の中から抽選で50名様にタンブラーを差し上げます。また、Monaca Goldプランの1年分利用権(50,000円相当)も抽選で3名様に差し上げます。

詳細はこちらのキャンペーンページをご覧ください。



引き続き、Monacaをよろしくお願いします!

Monaca IDEではTypeScriptが使えます

カテゴリ :
Monaca
タグ :
JavaScript
TypeScript
TypeScript変換エラー
Monaca IDEではTypeScript変換機能を備えています。今回はそのデモです。

MonacaアプリでFacebookログインを使ってみよう

カテゴリ :
Monaca
タグ :
JavaScript
Facebook
Facebookアプリ
Facebook認証を使ったMonacaアプリを作るデモです。

Monacaアプリでコピー&ペーストを実装するならクリップボードプラグイン!

カテゴリ :
Monaca
タグ :
Monaca
HTML5
JavaScript
プラグイン
icon
今回は、「VersoSolutions/CordovaClipboard」プラグインの使い方を紹介します。
このプランを利用することで、アプリ内でのテキストコピー&ペーストができます。

Monacaアプリでフラッシュライトを利用する方法

カテゴリ :
Monaca
タグ :
Monaca
JavaScript
HTML5
download_zip
今回は、「EddyVerbruggen/Flashlight-PhoneGap-Plugin」プラグインを利用して
フラッシュライトを操作するサンプルプロジェクトを作ります。

LocalKitを使っているなら自動テストも簡単。JavaScriptテストフレームワークまとめ

カテゴリ :
Monaca
タグ :
JavaScript
テスト
Jasmine

LocalKitを使うメリットの一つにテストフレームワークが容易に使えるようになるという点が挙げられます。そこで今回は開発したJavaScriptコードでユニットテストを実現するためのフレームワークを紹介します。



Jasmine: Behavior-Driven JavaScript




Jasmine

Jasmine



JasmineはRSecに似た記述のテスト文法をもったテストフレームワークとなっています。例えば次のように記述します。



  1. describe("CallTracker", function() {
  2.   it("tracks that it was called when executed", function() {
  3.     var callTracker = new j$.CallTracker();
  4.  
  5.     expect(callTracker.any()).toBe(false);
  6.  
  7.     callTracker.track();
  8.  
  9.     expect(callTracker.any()).toBe(true);
  10.   });
  11.  
  12.   it("tracks that number of times that it is executed", function() {
  13.     var callTracker = new j$.CallTracker();
  14.  
  15.     expect(callTracker.count()).toEqual(0);
  16.  
  17.     callTracker.track();
  18.  
  19.     expect(callTracker.count()).toEqual(1);
  20.   });
  21.   :
  22. });

expectで取得される値と期待される値とを比較する形になります。



QUnit




QUnit

QUnit



QUnitは長く知られているユニットテストフレームワークになります。HTMLの結果画面を見たことがある方も多いのではないでしょうか。テストコードは次のように書きます。



  1. QUnit.test("prettydate basics", function( assert ) {
  2.   var now = "2008/01/28 22:25:00";
  3.   assert.equal(prettyDate(now, "2008/01/28 22:24:30"), "just now");
  4.   assert.equal(prettyDate(now, "2008/01/28 22:23:30"), "1 minute ago");
  5.   :
  6. });

元々jQueryから派生したツールと言うこともあり、jQuery必須となっています。



alexyoung/riotjs



riotjsはRubyのテストフレームワークRiotのJavaScript版です。テストは次のように記述します。



  1. Riot.run(function() {
  2.   context('basic riot functionality', function() {
  3.     given('some simple equality tests', function() {
  4.       asserts('a simple truth test should return true', true).isTrue();
  5.       asserts('isNull is null', null).isNull();
  6.     });
  7.  
  8.     given('another context', function() {
  9.       asserts('equals should compare strings as expected', 'test string').equals('test string');
  10.     });
  11.  
  12.     given('a context concerned with functions', function() {
  13.       asserts('asserts() should allow functions to be compared', function() {
  14.         return 'test string';
  15.       }).equals('test string');
  16.     });
  17.   });
  18.  
  19.   given('yet another context', function() {
  20.     asserts('equals should compare strings as expected', 'test string').equals('test string');
  21.   });
  22. });

ブラウザの他、RhinoやNodeでも動作します。



Unit testing framework for Javascript - Unit JS




Unit.js

Unit.js



Unit.jsもWebブラウザ、Nodeの両方で動作します。書き方が独特かも知れません。



  1. // By example, provided by Express framework and other modules.
  2. var req = {
  3.   headers: {
  4.     'content-type': 'application/json'
  5.   }
  6. };
  7. test.object(obj).hasProperty('name');
  8. test.object(obj).hasProperty('message', 'hello');
  9. test.string(str).startsWith('Hello');
  10. test.string(str).contains('world');
  11. test.string(str).match(/[a-zA-Z]/);
  12. test.value(req).hasHeader('content-type');
  13. test.value(req).hasHeader('content-type', 'application/json');
  14. // or
  15. test.value(req).hasHeaderJson();

testというオブジェクトがあり、その下に変数の型を指定してプロパティや文字の長さ、正規表現などでチェックを行います。



nathansobo/screw-unit



Screw.UnitはBDDフレームワーク(ビヘイビア駆動開発)になります。RSpecに似た記述で、より仕様が分かりやすい文章を使ってテストを記述します。



  1. describe("a nested describe", function() {
  2.   var invocations = [];
  3.  
  4.   before(function() {
  5.     invocations.push("before");
  6.   });
  7.  
  8.   describe("a doubly nested describe", function() {
  9.     before(function() {
  10.       invocations.push('inner before');
  11.     });
  12.  
  13.     it("runs befores in all ancestors prior to an it", function() {
  14.       expect(invocations).to(equal, ["before", "inner before"]);
  15.     });
  16.   });
  17. });

Protractor - end to end testing for AngularJS




Protractor

Protractor



ProtractorはAngularJS用のE2Eテストフレームワークになります。専用ということもありますのでAngularJSアプリの場合はProtractorを使うのが良さそうです。



  1. describe('angularjs homepage todo list', function() {
  2.   it('should add a todo', function() {
  3.     browser.get('https://angularjs.org');
  4.  
  5.     element(by.model('todoList.todoText')).sendKeys('write first protractor test');
  6.     element(by.css('[value="add"]')).click();
  7.  
  8.     var todoList = element.all(by.repeater('todo in todoList.todos'));
  9.     expect(todoList.count()).toEqual(3);
  10.     expect(todoList.get(2).getText()).toEqual('write first protractor test');
  11.  
  12.     // You wrote your first test, cross it off the list
  13.     todoList.get(2).element(by.css('input')).click();
  14.     var completedAmount = element.all(by.css('.done-true'));
  15.     expect(completedAmount.count()).toEqual(2);
  16.   });
  17. });

Mocha - the fun, simple, flexible JavaScript test framework




Mocha

Mocha



Mochaはシンプルなテストフレームワークになっています。ブラウザでもNodeでも動作します。コードはJasmineなどに近いものになります。



  1. var assert = require("assert")
  2. describe('Array', function() {
  3.   describe('#indexOf()', function () {
  4.     it('should return -1 when the value is not present', function () {
  5.       assert.equal(-1, [1,2,3].indexOf(5));
  6.       assert.equal(-1, [1,2,3].indexOf(0));
  7.     });
  8.   });
  9. });




今回紹介したフレームワークはWebブラウザやNodeで実行するものが多くなっています。そのため、MonacaアプリのJavaScript実装部分においてユニットテストができるでしょう。



もしOnsen UIを使われているならばProtractorは良い選択肢になるかと思います。品質高いアプリを目指し、しっかりとテストを作り込んでください。

MA(マッシュアップアワード)11でMonacaを使おう

カテゴリ :
Monaca
タグ :
Tech
Monacaダッシュボード.png
MA(マッシュアップアワード)11に参加される方向けに書かれた記事です
随時更新してまいります

オフラインの場合の処理をどうすれば良いか

カテゴリ :
Monaca
タグ :
JavaScript
HTML5
icon
アプリを作っていてたびたび話題にあがるオフライン処理について解説します。

Monaca Localkitを利用してみました

カテゴリ :
Monaca
タグ :
LocalKit
作成とインポート
Monaca Localkitのレビュー記事になります。

ANGULAR UにてMonaca/Onsen UIの発表を行いました

カテゴリ :
Monaca
タグ :
Angular
Monaca
Onsen
自己紹介
ANGULAR UでAndreasが発表した内容を意訳して紹介します。