【CreateJS】CreateJS勉強会(第7回)私的まとめ

2016/1/22(金)CreateJS勉強会(第7回)に行ってきました。その個人的まとめです。

※以下、敬称略です。

セッション内容

【セッション1】Single Page ApplicationにおけるPreloadJSの活用事例

(リクルートマーケティングパートナーズ 山田 直樹

・「キャッシュ済のファイルは読み込まないようにする」について、「ブラウザのメモリ上限に対するキャッシュの扱い(古いものから消す等)」について質問。「現状ではコンテンツ数が少ないので考慮していない」とのこと。
・PreloadJS は 0.6.1 を使用。最新版(0.6.2)だと、queue.getResult().srcから抜き出したBlobオブジェクトのパスが使えない(画像が読み込めない)ため。
【セッション2】事例から見るCreateJSの使いみち

(世路庵 沖 良矢
※レジュメなし(クライアント情報を含むため非公表)

・CreateJSのメリット
 各要素(動画除く)を1つの APIで制御できる。
 ブラウザ間の挙動を吸収してくれる
・CreateJSのデメリット
 画面描画は、Flashは部分更新なのに対し、CreateJSは全画面更新になる為、負荷が高い。
【セッション3】EaselJS 0.8.2の改訂項目とgskinner labの作例「Arc Rainbow」

野中文雄

※「Arc Rainbow」についての、野中さんによる更なる解説記事
 ・ FN1512002 | Graphicsコマンドでトゥイーンアニメーションを描く | HTML5 : テクニカルノートFN1512001 | 設定のオン・オフを切り替える - トグルボタンの論理組み立て | HTML5 : テクニカルノートFN1601001 | 条件分岐を考える | HTML5 : テクニカルノート
【セッション4】CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜

(ICS 鹿野 壮野原 のぞみ
・レジュメ(前編後編

・Webコンテンツアプリ化のメリット
 開発リソースの軽減
 アプリ化はカンタン(デスクトップ >> Electron, モバイル >> Cordova
・Webコンテンツアプリ化のデメリット
ネイティブ機能はプラグインで実装。プラグインが公開されているか、または自作。この辺は AIR for iOS/Androidに 対する ANE(Adobe Native Extension)と同じ印象。

関連リンク

CreateJS勉強会 (第7回) まとめ – Togetterまとめ

【Node.js】Node.jsを試してみた(基礎編)

【OSX 10.11.2 + Node.js v.4.2.4】
今更ながらですが、Node.js使ってみました。ターミナルやサーバ周りはあんまり得意ではないので、使ってみて「あれ?」となったところをまとめてみます。

参考にしたのはコチラのサイト。
Tech Blog | リクルートライフスタイル開発者ブログ Tag : ‘Node.js’

このサイトの記事を参考にテストしてみて、つまずいた点をメモとして以下に記します。

Node.jsで5行Webサーバを書いてみよう〈Node.jsシリーズ vol.1〉

手順通り公式サイトからパッケージをダウンロードしてインストールします。今回ダウンロードした時点でのバージョンは、v.4.2.4でした。で、インストールが終了すると、この画面が表示されます。

インストール完了時の画面。ここにインストール先のパスが書かれています。
インストール完了時の画面。ここにNode.js,namのインストール先とパスが書かれています。

記事には説明がないのですが、/usr/local/bin があんたのパスだよと書いてあるので、ここにファイルを作っていくことにします。つまり「たった5行でWebサーバーが書ける」にあるサンプルスクリプトは、 webserver.js という名前で、/usr/local/bin/ に保存するということです。

※ルートパスで書かれているので、実際は Macintosh HD/usr/local/bin にあります。それからディレクトリ「usr」は不可視なので、この辺を参考に不可視ファイルを表示するように設定します。

で、「nodeコマンドでサーバーを起動してみましょう」って書いてあるんだけど、ターミナル使ったことないとココでハマります(笑)。

通常、ターミナルを起動すると、こんな感じになってるはずです。

c-gerus-MBP2011:/ c_geru$

※「c_geru」はユーザ名

つまり、起動時点ではユーザ直下にいるので、そのままnodeコマンドを叩くと・・・

c-gerus-MBP2011:/ c_geru$ $ node webserver.js
-bash: $: command not found

とコマンド(webserver.js)ないといわれてしまいます。

c-gerus-MBP2011:/ c_geru$ node /usr/local/bin/webserver.js

とルートパス指定で起動するか、

c-gerus-MBP2011:/ c_geru$ cd /usr/local/bin/
c-gerus-MBP2011:bin c_geru$ node webserver.js

と、ディレクトリを /usr/local/bin/ に切り替えた上で(1行目)、起動することになります。

ちなみにnodeコマンドのあとに1行空行で改行された状態が、サーバが起動している(nodeコマンドが受け付けられた)状態です。

さて、この最初に起動した webserver.js をどうやって終わらせるのか?「Control+C」で停止します(ブレークを送信/中止・キャンセル)。

c-gerus-MBP2011:bin c_geru$ node webserver.js
^C
c-gerus-MBP2011:bin c_geru$

ターミナルが起動前の状態になってカーソル点滅になり、入力可能状態に戻ります。

この辺りのターミナル用コマンドは、いくつも解説サイトがありますが、例えばこの辺を参考に。
[ Mac ] ターミナルコマンドのまとめ ( 多分 Linux でも使えるはず )

この辺りはターミナルに馴れていれば自明のことなんでしょうが、知らないと結構ハマります。

npm実践! モジュールをインストールしQRコードを生成しよう〈Node.jsシリーズ vol.2〉

「npmコマンドでのモジュールインストール」で、qrcode-console モジュールをローカルインストール/グローバルインストールのどちらでインストールするか書いてないので、ちょっとハマりました。

・ローカルインストール
コマンドを実行するパス直下のnode_modulesディレクトリにインストールします。つまりインストール先は「/usr/local/bin/node_modules」になります。

・グローバルインストール
同一環境内にあるすべてのコードからモジュールを使えるようにインストールします。この場合のインストール先は「/usr/local/lib/node_modules」になります。

私はグローバルインストールしたので、qrcode_sample.jsのサンプルコードがそのままでは動きません。グローバルにあるモジュールを参照するので、1行目のrequire文のパスを書き換えます。

var qrcode = require( '../lib/node_modules/qrcode-console' );

この記事の冒頭に「node_modulesというディレクトリ配下におかれたモジュールは、コアモジュールと同じようにパス記号を付けず呼び出すことができます。」と書いてあったので、グローバルインストールすればパスなしで使えるのかと思ったんですが、「ローカルインストールでnode_modulesというディレクトリ配下におかれたモジュールは、コアモジュールと同じようにパス記号を付けず呼び出すことができます。」ということのようです。

チャットを作りながら学ぶSocket.IO〈Node.jsシリーズ vol.4〉

「Socket.IOを使ってWebサーバーを立ち上げると、/socket.io/socket.io.jsというパスに、そのライブラリが自動的に生成されます。」と書かれていますが、起動してみてもファイルができません。バージョン変わって仕様が変更になったのかも?とファイルを探してみると、下記にありました。

・ローカルインストール
/usr/local/bin/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

・グローバルインストール
/usr/local/lib/node_modules/socket.io/node_modules/socket.io-client/socket.io.js

で、このファイルをindex.htmlに指定してみたのですが、socket.io.js自体がエラー(Uncaught SyntaxError: Unexpected token “<“…)で動きません。。。

Socket.IOのダウンロードページをみたらサーバ上の参照パスが書かれていたので、これを使うことにして無事起動しました。

<script src="https://cdn.socket.io/socket.io-1.4.3.js"></script>

この時期では同一PC上で複数ブラウザを立ち上げているのですが、同一ローカルネットワーク上の別端末からアクセスする場合は、index.htmlに書かれているjsの「localhost」の部分を

var ioSocket = io.connect( "http://192.168.11.6:3000" );

のように、サーバを起動しているPCのIPアドレスを指定することでアクセス可能になります。

ちょっとした小技で効率UP——アプリケーションをデーモン化〈Node.jsシリーズ vol.7〉

foreverを試そうとしてインストールするも、何度やってもエラーでインストールできず。。。

いろいろ試したところ、npm configを下記のように書き換えることでやっとインストールができました。

npm config set registry="http://registry.npmjs.org/"

【参考】【NODE.JS】NPMでFOREVERのインストールに失敗してしまう。。。

これでざっとNode.jsのテストが出来ました。今ひとつわかってない気がするので、間違い等ありましたら、ご指摘下さい。

【その他参考サイト】
・第1回 Node.jsとは:基礎から学ぶNode.js|gihyo.jp … 技術評論社
・node.jsのrequire相対パスうざい問題 – Quita
・SwiftでSocket.io (nodes利用) – Quita
・Socket.IO入門 (全10回) – プログラミングならドットインストール
・How do I check the version of socket.io and update it – Stack Overflow
・Node.jsとSocket.IOによるPCとスマホブラウザのペアリングデモ – ICS MEDIA
・5分くらいで出来るnode.js(0.6) + socket.io(0.8x)のサンプルプログラム – 大人になったら肺呼吸
・Mac OS X から Node.js をアンインストールする方法
・【Node.js】足りないモジュールをたったの一行でインストールするコマンド – Quita

【IoT】Wi-Fiモジュール ESP8266 を使ってみた

最近、いろんなところで話題になっているWi-Fiモジュール ESP8266。技適も取得していて、しかも数百円で入手可能。ということで、放置しっぱなしの電子工作のリハビリも兼ねてやってみました。

いくつかある記事の中で、機材的に一番ハードルが低そうなこちらを参考にしました。

プログラミング不要でiPhoneからLEDをオン・オフするIoTを作る(ESP8266使用) – stocker.jp

【テスト環境】
・Arduino IDE 1.6.7
・OSX 10.11.2

基本的な方法は、上の記事を参考にしてもらうとして、異なる点や補足をメモしておきます。

1.FTDI USBシリアル変換アダプター は同じものが手に入らなかったので、同じく5V/3.3Vで使用できるこちらを使いました。
FT232HL ハイスピードUSBシリアル変換モジュール

2. FTDIのチップをPCで使うにはドライバが必要だそうで、こちらを参考にOSX用のドライバを入手、インストールしました。
VCPドライバのインストール(mac編) | スイッチサイエンス マガジン

3.使っているUSBシリアル変換モジュールが違うので、USBシリアル変換アダプターと ESP-WROOM-02接続の仕方がちょっと違います。

・(USBシリアル)GND >> (ESP-WROOM-02)GND
・(USBシリアル)VIO >> (ESP-WROOM-02)3V3
・(USBシリアル)AD1 >> (ESP-WROOM-02)TXD
・(USBシリアル)AD0 >> (ESP-WROOM-02)RXD

USBシリアル変換アダプターと ESP-WROOM-02 を繋いだ様子
USBシリアル変換アダプターと ESP-WROOM-02 を繋いだ様子

4.上記2.でFTDIのドライバをインストールした後、上記1.のUSBシリアル変換モジュールを単体でつなぐと、Arduino IDEにシリアルポートが表示されるのだけれど、ESP8266を繋いだ状態でUSBに繋ぐとシリアルポートが表示されませんでした。

原因はよくわからず・・・。とりあえず上記1.のUSBシリアル変換モジュール側の電源部分(VIOとGND)のジャンパーコードを外すとシリアルポートが認識されるので、その状態で認識後にジャンパーコードを差し込んで、ソースコードを書き込むことで動作しました。

※下記ブログにOSX 10.9 の場合は、apple製のFIDIチップ用ドライバがよくないようなことが書かれていますが、OSX 10.11だし・・。
Arduinoトラブルシューティング アップロード編: 構想100年

またYosemite(Mavericks)だと、AppleFTDIドライバを無効にする方法もあるようです。
MacOSX – Yosemite(Mavericks)でFTDIが動かない件 – Qiita

同じ現象が出た方、解決法などあれば教えてください。

【Xcode】Apple Watch用アプリのテスト(2)- 親子間(iPhone、Apple Watch)の通信

【Xcode7.2 + MacOX10.11.2 + watchOS 2】
前回に引き続き、Apple Watch用アプリを試してみました。今回は親子間(iPhone、Apple Watch)の通信について。実機がないのでSimulatorで確認。

同じ方の書いたこの記事を参考にしました。

Apple Watch アプリから親アプリの情報を更新する。 – Apple Watch アプリプログラミング

ただこのままだとエラーが出て、コンパイルが通りません。watchOS 2では、ここで通信に使っている WKInterfaceController.openParentApplication() というメソッドが使えないようです。

ios – ‘openParentApplication(_:reply:)’ has been explicitly marked unavailable here – Xcode 7 Beta – Stack Overflow

そこで調べてみたら、この記事で解説されていました。

[Apple Watch] Watch Connectivity: sendMessage 即座にメッセージを送るには

準備は、こんな感じになります。

・WatchConnectivity を import する。
・WCSessionDelegate を設定する。
・WCSession のサポートの有無をチェックする(WCSession.isSupported())。
・WCSession がサポートされているときには WCSession を初期化(WCSession.defaultSession())して、delegateを設定し、activeにする(activateSession())。

後は、送信・受信用のメソッドをWCSession 用に書き換えてやればOKです。

・送信:– sendMessage:replyHandler:errorHandler:
・受信:– session:didReceiveMessage:replyHandler:

ちょっと気になったのは、Simulatorでのテストでは、iPhone >> Watch への送信は即時に受け取れるんですが、Watch >> iPhone への送信は、10秒ほどのタイムラグが出ました。これがSimulator のみの問題なのか、Apple Watch の仕様なのかは、実機がないので確認出来ていません。

【その他参考リンク】
WCSession Class Reference – iOS Developer Library
WCSessionDelegate Protocol Reference – iOS Developer Library
iOS – watchOS 2 の Watch Connectivity を使ってみた – Qiita
[watchOS 2][iOS 9] Watch Connectivity で情報をやりとりする様々な方法 | Developers.IO

【Xcode】Apple Watch用アプリのテスト(1)

【Xcode7.2 + MacOX10.11.2 + watchOS 2】
Apple Watch用アプリを試してみました。実機がないのでSimulatorで確認。

いろいろ探してみたけど、見た中ではこの記事が一番わかりやすかった。

・簡単な Apple Watch アプリを初めて作ってみる – Apple Watch アプリプログラミング –

Apple Watchアプリは、必ず親となるiPhoneアプリがあって、その子としてWatchKit App を作成するということのようです。

このサイトの通りで基本的に問題ないのだけれど、唯一違うのはwatchOSが2にバージョンアップされているので、プロジェクトエディターの追加ボタンから、Apple Watch のWatchKit App を選択するところで、選択肢が2つに増えているところ。ここでは左(watchOS 2)を選択。

WatchKit Appが、watchOS 2とwatchOS1の2種類あるある。
WatchKit Appが、watchOS2とwatchOS 1の2種類ある。無印がwatchOS2用。

もう1点、Simulatorで実行時に「”Install of Apple Watch Application never finished” 」というエラーが出たこと。これは、iPhone側のSimulatorでWatchアプリから、該当アプリの設定を開いて”Show App on Apple Watch”のスイッチを一度切ってから入れ直せばOKでした。詳しくは下記リンクで。

ios – “Install of Apple Watch Application never finished” Error when deploying watch kit app to device – Stack Overflow

これでSimulator上でApple Watchアプリの確認ができました。