[CreateJS] iOSアプリ内のUIWebViewでCreateJSのドラッグ移動ができない

スポンサーリンク

CreateJS、なかなか面白いですね。Flash Pro CS6で登場してきた頃(「Adobe Flash Professional Toolkit for CreateJS とりあえずどんなものか(2012年)」)以来、まるで触っていなかったのですが、だいぶ進化していて、ActionScriptを忘れちゃった人(誰?)が、新しい気持ちで触ってみても、だいぶ使いやすいライブラリになってるんじゃないでしょうか?

01

ちょっとずつ触ってみて、MUSHIKAGO APPS MEMOでも、今後、なんかあったらCreateJSについてもMEMOを少しずつ残していきたいと思います。

僕の場合、iOSアプリの中に埋め込んだブラウザ(UIWebView)内で、CreateJSのHTML5 Canvasを使ってみようと思っています。なので、「Safariで動けばいい」というスタイルです。で、いきなりMEMO的なネタが見つかったので、書いておきます。

野中さんのドラッグアンドドロップサンプル(Easel 0.8.0)

で勉強させていただいて、BracketsとChromeのプレビューを使って、なんとなくマウスで動かせるようなものを作りました。これを「アプリ内のHTMLファイルをUIWebViewで表示する」の方法でiOSアプリ内のUIWebViewで表示し、動かそうとしたところ、iPhoneやiPad上では、マウスダウンとマウスアップのイベントは拾えたものの、ドラッグのイベント(pressmove)が拾えませんでした。

これをiOS上でも拾えるようにするには、軽く試したところ、ステージが

canvasElement = document.getElementById(“myCanvas”);
stage = new createjs.Stage(canvasElement);

のように「stage」と定義されている場合、その次の行あたりに

createjs.Touch.enable(stage);

と書いておいてあげれば、iOSデバイス上でも指でドラッグできるようになりました。他にもやり方があるかもしれませんが、一応MEMOしておきます。

ちなみに、Flash Pro CCのHTML Canvas形式の書き出しは、Flash Proのタイムライン上に作成したシーケンスをCreateJSのコンテンツとして書き出してくれるわけですが、このHTMLもやはりiOSのUIWebVIew内では、デフォルトでドラッグ操作ができません。Flash Proの第一フレームに、この一行のコードを書いておけば、ドラッグできるようになるでしょう。(Flash Proから書き出されるCreateJSもステージは、「stage」という変数名で書き出されます)

東京造形大学卒業後、マクロメディア(現アドビ システムズ)に入社。Quality AssuranceやテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。独立後、虫カゴデザインスタジオ株式会社を設立。最近は、ZBrush、Xcode(Swift)、Firebase、Unity、Adobe Creative Cloud関連にフォーカスしています。モバイルアプリ開発情報を主としたブログ「MUSHIKAGO APPS MEMO」の中の人。