カテゴリー別アーカイブ: HTML5

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その3)2017年版

【MacOS Seria+Adobe Animate CC 2017.5リリース】
swfで作ったコンテンツをHTML5 Canvasに書き出すお勉強のその3です。

その2から随分間が空きましたが(笑)、ちょうど以前開発したAS3コンテンツをまとめてCanvas化する仕事があって、思い出しつつ調べつつ作業したので、2017年10月の時点でどのように変換したかをまとめておきます。

前提とするコンテンツは下記のようなものです。

・Flash IDE(いわゆる純正のFlashアプリケーション)で作成されたもの。
・スクリプトを外部ファイル化していない(関数などは1フレーム目にまとめて定義)。
・タイムラインとActionScriptを併用している(定義した関数や変数をフレームで呼び出すようなもの)

ちょっとしたインタラクションとアニメーションを絡めたようなコンテンツは、わざわざクラスファイルを外部化するのも面倒だし、こういう作り方してる人も多いんじゃないかと思います。FlashDevelopやFlash Bulderなんかでガリガリ作ったものは、その筋の人たちにお任せします(笑)。

0.FlaファイルをCanvas形式に変換する。

コマンド>他のドキュメント形式に変換 を選択します。

ドキュメントタイプコンバーターで「HTML5 Canvas」を選択してファイル名、保存場所を指定してOKを押します。

ドキュメントタイプコンバーターのポップアップ

※この時、全てのActionScriptはコメント化されます。「this.stop();」などそのまま使えるものもコメント化されるので要注意。

1.型は全て削除する(:uint や as MovieClipなど)。

JavaScriptにはないので当然ですね。アクションパネルなどで一括置換が漏れがなくてオススメです。

2.タイムラインのどこからでも使いたいものは、アクション>グローバル>スクリプトに書く(のグローバル化)

1フレーム目に関数(function)を書いて、別のフレーム(例えば10フレーム目)で呼び出すのは、ASではよくやりますが、これがそのままではJavascriptで動きません。その場合は、アクションパネルでアクション>グローバル>スクリプトを開いて、ココに書きます。ココに書かれた変数や関数はグローバル化されるので、this参照なしでどこからでも呼び出せます。

アクションパネルの左側から、グローバル>スクリプトを選択します。

・スクリプト例(定義:グローバル>スクリプト)

//---アニメフラグ
var flg_anime = true;

//ボタン:切替
function switchBtn(flg)
{
	if (flg)
	{
		//アニメーション開始;
		startAnimation();
	}
}

・スクリプト例(呼び出し;フレームスクリプト)

//ボタン:初期化
switchBtn(flg_anime);

※ flg_anime, switchBtn()共にグローバルなので、this等の修飾なしで使用できる。

グローバル>スクリプトの関数で、ステージ上に配置されたMovieClipやボタン、ステージのタイムラインなどを使用する場合は、exportRootで参照します。

・スクリプト例(定義:グローバル>スクリプト)

//アニメーション開始
function startAnimation()
{
	exportRoot.gotoAndPlay("f_anime");
}

3.MovieClip内の関数

タイムラインが1フレームしかないもので、MovieClip内で完結する変数、関数は、そのままthis等の参照なしでフレームに書いてOK。
・そのMovieClip内に閉じたものは、function xxx(){} で定義したものをthis.xxx()で参照すればよい。

・スクリプト例(MovieClip;フレームスクリプト)

//何か例を入れる

但しMovieClipの外部から参照する変数、関数はプロパティにする必要があります。
・this.xxx = function(){} な書き方。

//何か例を入れる

4.プロパティパネルに書いたインスタンス名は参照出来ない。

ボタンやMovieClipでインスタンス名で参照したいときは、明示的にnameプロパティに文字列を設定する必要があります。

・スクリプト例(定義:グローバル>スクリプト)

//ボタン:初期化
function inithBtn()
{
	exportRoot.btn_up_year.name = "btn_up_year";
	exportRoot.btn_up_month.name = "btn_up_month";
	exportRoot.btn_up_day.name = "btn_up_day";
}

※MovieClipなら、MovieClip内のフレームで、this.name = “xxx” でも定義できる。

5.円形グラデーションやフィルターなどは使えない。

・HTML5 Canvasに書き出すのに制限があります。ライブラリ上でビットマップに変換しておくか、場合によってはビットマップで作り直す必要があります。

6.MouseEvent.MOUSE_UP >> pressup

・ここは “mouseup” じゃないので要注意。

処理 AS JavaScript
クリック MouseEvent.CLICK click
マウスオーバー MouseEvent.MOUSE_OVER mouseover
マウスアウト MouseEvent.MOUSE_OUT mouseout
マウスダウン MouseEvent.MOUSE_DOWN mousedown
マウスアップ MouseEvent.MOUSE_UP pressup
ロールアウト MouseEvent.ROLL_OUT rollout

7.Movieclip内の関数でのthis参照

関数内でのthisを参照すると、ページのルートであるWindowを指します(詳しくは、別記事の「4.thisの参照」を参照のこと)。
MovieClip内の関数で、相対的にパスを指定したいときは、関数外で変数にthisを入れておき、それを使って参照します。

・スクリプト例(定義:MovieClip内のフレームスクリプト)

//関数内での参照用にthisを変数化
var my_mc = this;

//初期化
this.init = function ()
{	
	my_mc.open_cap.visible = false;
	my_mc.close_cap.visible = false;

}

8.MovieClipボタンのカーソル対応

“buttonMode” は”cursor”に変更します。

処理 AS JavaScript
指カーソルにする MovieClip.buttonMode = true; MovieClip.cursor = “pointer“;
デフォルトカーソルにする MovieClip.buttonMode = false; MovieClip.cursor = “default“;

9.TFLは使えない。

・強制的に普通のテキストに変換されるので、注意が必要です。

10.Dateオブジェクトの扱いに注意

ActionScriptにもJanaScriptにも同じようにDateオブジェクトがありますが、年月日時分秒を取得する際に、ActionScriptはプロパティで、JavaScriptはfunctionのため、微妙に違うので要注意。

処理 AS JavaScript
Dateオブジェクト生成 var date:Date = new Date(); var date = new Date();
年(4桁) date.fullYear date.getFullYear()
date.month date.getMonth()
date.date date.getDate()
date.hours date.getHours()
date.minutes date.getMinutes()
date.seconds date.getSeconds()

11.MovieClipのwidth,height

MovieClip.nominalBoundsで取得可能です。

・スクリプト例(定義:MovieClip内のフレームスクリプト)

this.tft07.nominalBounds.width
this.tft07.nominalBounds.height

【参考】
・X-LABO: Toolkit for CreateJS & Haxe : シンボルの初期表示サイズ・位置情報取得 nominalBounds
・Animate CCで書きだしたCreateJSのグラフィックスの色をプログラム上から変更する – Qiita

createjs – How to change the width of a movieclip in flash html5 canvas? – Stack Overflow

12.MovieClipをリストアップする

多くのMovieClipを配置して制御する場合、ひとつずつに名前をつけたりするのも大変なので、MovieClipだけを配列化して使う場合があります。

・ActioScript例

function initBit():void
{
	array_bit = [];
	
	for (var i:uint=0; i<this.numChildren; i++)
	{
		var ds:DisplayObject = this.getChildAt(i);

		if (ds is MovieClip)
		{
			array_bit.push(ds);
			ds.visible = false;
		}
	}

}

この「is MovieClip」がjavaScriptにないので、どうしようかな?と考えて、MovieClipにはtimelineが存在するので、それを代替にしてMovieClipのみをリストアップすることにしました。まあ気づけばたいした話ではないんですが。

・JavaScript例

his.initBit = function ()
{
	array_bit = [];
	
	for (var i=0; i<this.numChildren; i++)
	{
		var ds = this.getChildAt(i);

		if (!!ds.timeline)
		{
			array_bit.push(ds);
			ds.visible = false;
		}
	}
}

だいたいこんなところだと思いますが、抜けがあったらまた更新します。

以前書いたブログもよければご参考に。

【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その1) | AS blind side
【CreateJS】AS3からHTML5 Canvasに書き出す場合のJavaScript(その2) | AS blind side

【追記】
早速、12.を追記しました(2017.10.11)。

A-FRAMEを使ってみた(2)タグ編

A-FRAMEのドキュメントを見ていて、サンプルなどに出てくるタグが見当たらないことがあったのでまとめてみました。ドキュメントは機能や要素毎にまとめられているので、タグから引けないので。

A-FRAME タグ一覧(version 0.2.0 版)

タグ名 ドキュメント 備考
<a-scene> Scene A-FRAMEの global root object。canvasもここに含まれる。
<a-entity> Entity オブジェクトの位置、回転、およびスケールのなどを定義するタグ。
<a-animation> Animations アニメーションを定義するためのタグ
<a-assets> Asset Management System プリロード要素を定義するためのタグ
<a-mixin> Mixins <a-assets>内に定義する、再利用可能なコンポーネント属性を定義するタグ
<a-asset-item> Asset Management System <a-assets>内に定義する3D用のファイル(.dae,.mtl,obj)。
<audio> Asset Management System <a-assets>内に定義する音声ファイル。
<img> Asset Management System <a-assets>内に定義する画像ファイル。
<video> Asset Management System <a-assets>内に定義するビデオファイル。
<a-box> <a-box> 箱状オブジェクト。ver 0.1.0までは、<a-cube>
<a-camera> <a-camera> カメラオブジェクト
<a-collada-model> <a-collada-model> 3D COLLADA オブジェクト(.dae)
<a-cone> <a-cone> 円錐オブジェクト
<a-cursor> <a-cursor> カーソルポインタ
<a-curvedimage> <a-curvedimage> 湾曲した板状オブジェクト
<a-cylinder> <a-cylinder> 円柱オブジェクト
<a-image> <a-image> <a-plane>に画像を適用したオブジェクト
<a-light> <a-light> 照明オブジェクト
<a-obj-model> <a-obj-model> 3Dオブジェクト。.obj、.mtlを指定可能。
<a-plane> <a-plane> 板状オブジェクト
<a-ring> <a-ring> 板状のリングオブジェクト。radius-inner=”0″ (内径=”0″)で円盤状になる。
<a-sky> <a-sky> シーンの背景
<a-sphere> <a-sphere> 球体オブジェクト
<a-torus> <a-torus> 円管形状オブジェクト(arc=360 でドーナツ状)
<a-video> <a-video> <a-plane>にビデオを適用したオブジェクト
<a-videosphere> <a-videosphere> シーンの背景に動画を適用したオブジェクト

上記の説明は、執筆時点でのA-FRAME version 0.2.0 を前提としています。

不備、誤りなどありましたらご指摘下さい。

A-FRAMEを使ってみた(1)360°画像編

Playstation VRの予約が始まったり、諸々盛り上がりを見せつつあるようにみえるVR界隈。興味はあるけど、Oculus Riftもその開発にPC用意するとか考えると結構なお値段だし、基本静観してたのですが、HTMLベースのVR用のフレームワークである「A-FRAME」の記事をみつけたので、試してみました。

「A-Frame」でVR開発入門!HTMLの追記だけでスマホブラウザから好きな場所を360度パノラマ画像体験 – paiza開発日誌

まずは上の記事を参考に、360°パノラマ画像のVRを作ってみました。

1.特別な機材なしで360°パノラマ画像を作る。

通常、360°パノラマ画像を作るにはRICOH THETAなどの対応カメラが必要ですが、iOS/Android用のGoogle ストリートビューアプリで作成が可能です。使い方は、上の参考リンクに詳しいのでをそちらを参照のこと。

複数の画像をつないで全天球型の画像を作成するので、撮影回数が多くなるのが難点ですが、特別な投資なしで作れるのでテストとしては十分だと思います。ちなみにこんな感じの画像が生成されます。

ストリートビューアプリで作成した360°画像。なるべく被写体(人や物)が近くにない方が繋ぎがうまくいく(ズレが目立たない)ようです。
ストリートビューアプリで作成した360°画像。なるべく被写体(人や物)が近くにない方が繋ぎがうまくいく(ズレが目立たない)ようです。

2.HTMLを書く

VRコンテンツとして表示するために、HTMLを書きます。A-FRAMEは基本的にはタグベースなので、A-FRAMEのjsライブラリを読み込んで、必要なタグを書くだけです。以下、サンプルのHTML全文です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>神保町の路地 | A-Frame</title>
    <meta name="description" content="神保町の路地 | A-Frame">
    <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-sky src="img/IMG_2277.jpg"></a-sky>
        <a-camera wasd-controls-enabled="true"></a-camera>
    </a-scene>
  </body>
</html>

<a-scene>は、canvasタグに相当します。その中に要素を定義していきます。
<a-sky>は、VR空間の背景です。VR空間が大きな球体として定義されていて、その内側にカメラがあるイメージです。その球体の内側に色や360°パノラマ画像を指定することで背景として表示されます。
<a-camera>は、カメラです。スマホだと端末の傾き、PCならマウスのドラッグ方向で、このカメラの向きが変わります。

※<a-camera>が省略された場合は、デフォルトのカメラが設置されるので、このタグがなくても表示されます。

iPhoneで見た様子。右下のメガネアイコンをタップするとWebVRモードで表示されます。
iPhoneで見た様子。右下のメガネアイコンをタップするとWebVRモードで表示されます。
WebVRモードで表示した様子。PCブラウザなどWebVRがサポートされていない場合は切り替えできない。
WebVRモードで表示した様子。PCブラウザなどWebVRがサポートされていない場合は切り替えできない。

実際のサンプルは、下のリンクからどうぞ。

神保町の路地 | A-Frame

【Cordova】Cordova を使ってみよう(2)Androidでスプラッシュスクリーンを表示する

【OSX 10.11.3 + Node.js v4.2.6 + nam 3.5.3 + Cordova 6.0.0 + Xcode 7.2 + Android Stuido 1.3】

※ターミナルのコマンドについては、$を省略しています。理由はコピペの時に必要ないからです。

Cordovaの続きです。前回に引き続き、下記サイトを参考にAndroidでスプラッシュスクリーン表示をテストしてみました。

Cordova: アプリの設定 – Build Insider

これが意外にハマりました。原因は、参考サイトではCordovaのバージョンが3.0.0なのに対して、現在は6.0.0なので仕様が変わっているようです。以下、手順です。

1.Splashscreen プラグインのインストール

Cordovaのバージョン4.0.0以降、スプラッシュ・スクリーンの機能がプラグイン化されたようです。ターミナルから以下のコマンドでインストールします。

cordova plugin add cordova-plugin-splashscreen

【参考】Apache Cordova のスプラッシュ・スクリーン表示がややこしい | まさくらのブログ
※本サイトでエラーが出ているので、暫定的にキャッシュをリンクしました。

2.config.xmlの設定

config.xmlに設定を書き込みますが、これはプロジェクトディレクトリの直下(今回の場合は、hello/config.xml)にあるファイルです。hello/platforms/android/res/xml/にも同名のファイルがあるので注意。

基本的に設定は、プロジェクトディレクトリ直下のconfig.xmlを変更して、プラットフォーム別のプロジェクトに反映するようです。

Androidのスプラッシュスクリーンは、以下の2つを設定します。
・タグの中に解像度別の画像リンク。
・widgetタグの中にスプラッシュスクリーンの表示時間を指定したタグ(preference name=”SplashScreenDelay” value=”10000″)。

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <splash src="platforms/android/res/drawable-port-ldpi/splash.9.png" density="port-ldpi" /><!--200x320-->
        <splash src="platforms/android/res/drawable-port-mdpi/splash.9.png" density="port-mdpi"/><!--320x480-->
        <splash src="platforms/android/res/drawable-port-hdpi/splash.9.png" density="port-hdpi"/><!--480x800-->
        <splash src="platforms/android/res/drawable-port-xhdpi/splash.9.png" density="port-xhdpi"/><!--720x1280-->
        <splash src="platforms/android/res/drawable-land-ldpi/splash.9.png" density="land-ldpi" />><!--320x200-->
        <splash src="platforms/android/res/drawable-land-mdpi/splash.9.png" density="land-mdpi"/><!--480x320-->
        <splash src="platforms/android/res/drawable-land-hdpi/splash.9.png" density="land-hdpi"/><!--800x480-->
        <splash src="platforms/android/res/drawable-land-xhdpi/splash.9.png" density="land-xhdpi"/><!--1280x720-->
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <preference name="SplashScreenDelay" value="10000" />
</widget>
3.config.xmlの設定を各プラットフォームに反映する

・ターミナルから以下のコマンドを入力します。

cordova prepare -d

ここでAndroidディレクトリにあるconfig.xml(hello/platforms/android/res/xml/config.xml)を開いてみると、スプラッシュスクリーンの情報が追加されています。

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.example.hello" version="1.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <preference name="loglevel" value="DEBUG" />
    <feature name="Whitelist">
        <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
        <param name="onload" value="true" />
    </feature>
    <feature name="SplashScreen">
        <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
        <param name="onload" value="true" />
    </feature>
    <allow-intent href="market:*" />
    <splash density="port-ldpi" src="platforms/android/res/drawable-port-ldpi/splash.9.png" />
    <splash density="port-mdpi" src="platforms/android/res/drawable-port-mdpi/splash.9.png" />
    <splash density="port-hdpi" src="platforms/android/res/drawable-port-hdpi/splash.9.png" />
    <splash density="port-xhdpi" src="platforms/android/res/drawable-port-xhdpi/splash.9.png" />
    <splash density="land-ldpi" src="platforms/android/res/drawable-land-ldpi/splash.9.png" />
    <splash density="land-mdpi" src="platforms/android/res/drawable-land-mdpi/splash.9.png" />
    <splash density="land-hdpi" src="platforms/android/res/drawable-land-hdpi/splash.9.png" />
    <splash density="land-xhdpi" src="platforms/android/res/drawable-land-xhdpi/splash.9.png" />
    <name>HelloWorld</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="SplashScreenDelay" value="10000" />
</widget>
4.Android実機又はエミュレータでアプリを起動する

。ターミナルから以下のコマンドを入力します(ココでは実機で起動します)。

cordova run android

これでスプラッシュスクリーンが表示されました。Cordovaの情報は多いですが、バージョンによる違いもあるので、必ず公式のドキュメントに当たった方がよさそうです。

Cordovaサイトの右上にどのバージョンの情報かが表示されているのでチェック。
Cordovaサイトの右上にどのバージョンの情報かが表示されているのでチェック。

【参考】
アイコンとスプラッシュ画面 – Apache Cordova(6.0.0)
Cordovaめも: スプラッシュスクリーン表示

【Cordova】Cordova を使ってみよう(1)環境設定編

先日のCreateJS勉強会で話題に上ったCordova。とりあえず使ってみようということで、環境設定して、コンパイルできるとことまでやってみたので、その作業メモです。ターミナルを使い慣れていないので、主にその周辺についてです。

Cordovaとは何か?

Adobeの Phone Gap という、HTML5+CSS3で作ったコンテンツをパッケージ化してiOS/Android用アプリにするという技術が、オープンソース化されて Cordova と呼ばれています。詳しくは下記で。

【参考】HTML5ハイブリッドアプリ開発を支えるOSS「Cordova」はなぜアツいのか?PhoneGapとの違いは何か? – ふろしき.js

作業環境

・OSX 10.11.3
・Node.js v4.2.6
・nam 3.5.3
・Cordova 6.0.0
・Xcode 7.2
・Android Stuido 1.3

環境設定

下記のサイトを参考にしました。
【参考】Cordovaを用いた開発環境を構築する – Build Insider

以下、環境構築する際に引っかかった点などをまとめておきます。

【Node.jsのインストール】

私の場合は導入済みでした。その時の手順などはこちらを参照。

【cordovaのコマンドラインツールをインストール】

このインストールがなかなか終わらなくて、npmのバージョンが古いのかとアップデートかけたら、npm自体が消えてしまいました。原因はよくわからず・・・。調べてみたら同じ現象について書いてある記事を見つけて、この通りにnpmの再インストールをして復活しました。
【参考】[node.js]npm自体のアップデートしようとしたらなぜかコマンドが消えた… – もじれつとがめん

その後、cordovaのインストールは無事終了。

【Android SDKに含まれているディレクトリにパスを通す】

「以下のように環境に応じてパスを設定してください」と書いてあるけど、どうすればいいかわからず(笑)。
で、次の手順で設定します。

1.Android Stuidoを起動し、「Android Stuido」>「Preferences…」を選択。
2.Preferencesウィンドウの右側で「Appearance & Behavior」>「System Settings」>「Android SDK」を選択すると、「Android SDK Location」蘭にパスが表示されます。

ココでのパスは「」
この環境でのパスは「/Users/c_geru/Library/Android/sdk」

Android SDKのパスをFinderで確認すると、SDKの中に「tools」「platform-tools」のディレクトリが確認出来ます。

ああ
選択されているのが「tools」「platform-tools」ライブラリは不可視ファイルなので、Finderで確認するには不可視ファイルの可視化が必要。

3.パスがわかったので、2つのディレクトリにパスを通します。ターミナルから下記のコマンドを1つずつ入力してreturnキーを押します。「echo 」以降がコマンドです。正しく受け付けられると、入力可能(c-gerus-MBP2011:/ c_geru$ が表示され、カーソルが点滅している)な状態になります。

※「c-gerus-MBP2011:/ c_geru$」の部分は、当然ながら環境によって異なります。

c-gerus-MBP2011:/ c_geru$ echo "export PATH=\$PATH:/Users/c_geru/Library/Android/sdk/tools" >> ~/.bash_profile
c-gerus-MBP2011:/ c_geru$ echo "export PATH=\$PATH:/Users/c_geru/Library/Android/sdk/platform-tools" >> ~/.bash_profile

パスの設定について詳しくは下記を参照。今回行ったのは.bash_profileというファイルにコマンドライン上からファイルにテキストを挿入する方法です。
【参考】[Mac, Linux] PATHを通す方法 | Memo on the Web

【プロジェクトを作成する】

参考サイト通りにコマンド打ったら、次のようなエラーが出ました。

c-gerus-MBP2011:/ c_geru$ cordova create hello com.example.hello HelloWorld -d
Creating a new cordova project.
Copying assets."
Error: EACCES: permission denied, mkdir '/hello'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:794:18)
    at /usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/create.js:284:16
    at _fulfilled (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:787:54)
    at self.promiseDispatch.done (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:816:30)
    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:749:13)
    at /usr/local/lib/node_modules/cordova/node_modules/q/q.js:557:44
    at flush (/usr/local/lib/node_modules/cordova/node_modules/q/q.js:108:17)
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)

ターミナルがデフォルトの状態では、ルート(通常なら Macintosh HD 直下)に位置しているため、ディレクトリを作成する権限がないためです。この場合は、スーパーユーザーを示す「sudo」を冒頭につけて、下記のように実行します。

c-gerus-MBP2011:/ c_geru$ sudo cordova create hello com.example.hello HelloWorld -d

※この際パスワード入力を求められます。ログイン時のパスワードを使用します。
【参考】必ず使える!Macのターミナルで使う基本UNIXコマンド15選 | NEZU.log

大体は作業用にディレクトリを作って、そこにまとめることが多いと思うので、今回はユーザディレクトリ配下の特定のディレクトリを指定して(/Users/c_geru/works/_2tone_dev/_cordova/hello)そこにプロジェクトを作成することにしました。

c-gerus-MBP2011:/ c_geru$ cordova create /Users/c_geru/works/_2tone_dev/_cordova/hello com.example.hello HelloWorld -d
プロジェクトの対象プラットフォームを確認する

参考サイトとは若干表示が違いました。この辺はバージョンによる差違かも。

c-gerus-MBP2011:hello c_geru$ cordova platform ls
Installed platforms: android 5.1.0, ios 4.0.1
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, osx, webos
プロジェクトにAndroidとiOS用のファイルを追加する

cordovaコマンドは作ったプロジェクトのルートで行う必要があるので、追加する前にディレクトリを変更します。

c-gerus-MBP2011:/ c_geru$ cd /Users/c_geru/works/_2tone_dev/_cordova/hello
Androidエミュレータを利用する

問題なく起動しましたが、すごく時間かかりました。この辺はマシンスペックの問題かも。
(MacBook Pro (15-inch, Early 2011) 2GHz intel Core i7 メモリ 8GB)

iOSシミュレータを利用する

参考サイトでは、ios-simをインストールするように指示されていますが、直接エミュレータを起動して問題なかったです。Xcodeがインストール済であれば必要ないのかな?

ブラウザで確認する

「パソコンのブラウザで表示されたアドレスにアクセスすると、指定したプラットフォーム向けのWebアプリを見ることができます。」と書かれているけど、実際に「http://localhost:8000/」にアクセスするとメニュー画面が表示され、そこから各プラットフォームを選択することになるようです。

http://localhost:8000/ にアクセスした様子。対応しているプラットフォームのみリンクがついている。
http://localhost:8000/ にアクセスした様子。対応しているプラットフォームのみリンクがついている。
プラットフォームのリンクをクリックするとコンテンツが表示される。
プラットフォームのリンクをクリックするとコンテンツが表示される。iOSのリンクをクリックした様子。

これで環境設定と、エミュレータ、実機、ブラウザでの確認ができました。次は具体的な中身を作ってみてから。