はてなブックマーク

幅1.5メートルほどの小さなブースでしたが、人だかりの途切れる間の方が少ないほどの盛況となりました。 特に、今回展示会で初お披露目した「アプリ不要のユーザー参加型サイネージデモ 」への注目が予想以上に大きく、沢山の方からご質問、機能要望をいただきました。 多くのユーザー参加型サイネージでは、ユーザーのスマートフォンに専用アプリのインストールを求めますが、実施現場ではその時点で参加を避けられてしまうことがあるようです。そこで弊社では、専用アプリのインストールが不要で参加できるサイネージを作りました。 より多くの方に楽しんでもらえるコンテンツとなったと自負しています。 今後、案件導入に向けて開発を進めていきます。 ご興味のある方、ご検討案件のある方、あるいは技術を見込んで別なご相談なども、ぜひお気軽にお問い合わせください！

RICOH THETAで写真を撮ったのだが、一般公開せずにウェブ上で楽しむ方法（ベーシック認証をかけたページで閲覧とか）が無いようなので、ビューワーを作った。 サイネージやイベントもので現場の下見に行っても、帰ってきてから確認し忘れに気づくことや、下見にいけなかったスタッフとの共有が難しいことがある。 特に空気感というか空間の特性みたいなものはなかなか伝わらない。 そんな時にRICOH THETAを使うと良さそう。一般公開できなくても、このビューワーがあれば大丈夫！ 機能的にもデザイン的にも本家のビューワーhttps://theta360.com/s/B9kほぼそのまま。デスクトップ上のファイルの読み込み機能は追加したけど。 回転は、制限を無くしてジンバルロックがかからないようにした。どっちが使いやすいかはわからないけど、球状写真のぐるぐる回る楽しさはこっちのほうがあると思う。あと、CPU

Shapeで描いた図形を綺麗なBitmapにしたい時に向けて、スムージングの癖を確認するために簡単なテストパターンを試してみた。 ↓Flashで生成した画像をPhotoShopで角度を1度回転させたもの。 ↓Flashで描画 ImageQuality – wonderfl build flash online 元のShapeを回転させてBitmapにdrawする。その回転のさせ方などをいろいろ試した。 Bitmap、BitmapData、Shapeにdrawする際には、まず二倍のサイズに拡大してから縮小しながらdrawしている。 モアレのでき方が微妙に違う場合があるのに注意してほしい。 この確認からわかったこと。 ・Bitmap自体を回転して表示するだけでもキレイ。 ・BitmapDataへのdrawの場合、StageQuality.HIGHがクオリティの上限。 ・BitmapとShape

株式会社サンリオのFlashゲームをCreateJSを用いてWindows8アプリに移植しました。 その際の移植、アプリ化に関するノウハウをまとめたpdfを作成しましたので配布いたします。 本件は日本マイクロソフト株式会社の依頼により、移植、アプリ化、ノウハウpdfの公開を行いました。2013年7月時点の情報です。最新バージョンについては別途ご確認ください。 ノウハウpdf CreateJSを用いたFlashコンテンツのWindows8アプリ化 manual_createjs_0726.pdf このpdfについて Flashオーサリング経験2, 3年の方を対象とし、CreateJSを用いて既存のFlashコンテンツをWindowsストア アプリ化する手順について、まとめました。 [CreateJS化にあたって使用したソフトウェア] ＊Adobe Flash Professional CS6

コンテンツを作る際には、ダミー画像で大枠を作ってから精度を上げていくことが多いはずです。数枚程度ならともかく、数十枚、数百枚のユニークな画像を作る場合、それだけで一仕事となってしまいます。 そこで、ダミー画像を大量に生成するジェネレーターを作りました。 大きい画面で表示 Generateボタン押下で生成が始まります。生成が完了すると、Saveボタン押下でzipファイルの保存ができます。 2048×1560のiPad Retinaデュスプレイサイズを1000枚生成しても問題ありません。 ファイル一式 https://github.com/umhr/DummyPageMaker 参考 制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ | Webクリエイターボックス http://www.webcreatorbox.com/tech/dummy/ Web制作に便利！ダミ

ArduinoとPC間での通信はいろんなやり方がありますが、一番基本的なのはやはりUSB接続のシリアル通信でしょう。ここでは、ArduinoとC#で通信する例を紹介します。 ファイル一式 https://github.com/umhr/SerialCommnunication_forArduino Arduino側 起動してから、カウントをして値を送り続けます。 受信した場合は、LCDシールド上の二行目で確認します。 シリアル通信自体は、 Serial.begin(9600); で接続し、 あとは、 Serial.read()やSerial.print()で読み書きするだけなので、非常にシンプルな作りです。 リファレンス Serialオブジェクト #include <LiquidCrystal.h> LiquidCrystal lcd(12, 11, 5, 4, 3, 2);

結論 Base64は JPEGは、FlashPlayer11.3で追加されたBitmapData.encodeメソッドが早い。 Base64とPNGは、BlooDHounDが早い。 ただし、BitmapData.encodeのPNGはencodeする画像の複雑さによって速度が変わることに注意。比較的単純な絵柄では、BlooDHounDよりも高速な場合がある。 ことがわかった。 7/28更新 読んでくれた方から、アルファチャンネルが無いとBitmapData.encodeの方が早い、またjpgの場合qualityが97以上だとエラーがでる、との報告があった。 ファイル一式 https://github.com/umhr/Base64JPEGPNGEncodeSpeedTest 速度の例（Core2Duo T7700 2.40GHz Windows7） Log : W:465 x H:465の

USB-シリアルケーブル（TTL-232R-3V3）とオス-メスのジャンプワイヤを使って、次のように繋げる。 Windows7では自動的にドライバがインストールされて、Portが認識される。 Tera Termを起動する。 シリアルポートを選択する。 グローバルメニューの設定/シリアルポートを選択 ボーレート:115200にする（デフォルトは9600）。 グローバルメニューの設定/全般を選択 言語をEnglishに（デフォルトはJapanese）。 RaspberryPIに電源用のMicroUSBを接続すると動き出す。 デフォルトでは次 login:pi Password:raspberry 入れた！

カメラから取得した映像をアニメGIFに変換するのが最近流行っているようなので、とりあえずFlashでもできることを確認しようと思って作ってみた。 anime.gifを作った例 WebCamera有効化の確認ダイアログで許可したら、カメラ映像が出てくるはず。 Captureボタンをクリックすると、キャプチャー開始。 Save anime.gifボタンをクリックして、ダウロード。 ファイル一式 https://github.com/umhr/CameraGIF

なにかと話題のNode.js。FlashやCreateJSなどのインタラクティブコンテンツと連動させたら、面白そう！ということで触ってみたのですが、いざインターネットで公開するとなると、多くのレンタルサーバー上では使えないことがわかりました。 root権限が必要なのです。 そこで、SAKURA Internetの「さくらのVPS」を契約して、設定してみました。 今回はインディゴデザインの五十嵐さんに無理を言って教えてもらいました。 五十嵐さん、ありがとうございました！ http://www.idw.jp/ 以下、習ったことのメモです。 Node.js自体の説明はしません。 主に自分向けのメモなので、第三者からするとわかりにくいとは思いますが、ご容赦ください。 アカウント情報 さくらのVPSを契約して、次のようなアカウントが発行されたとします。 [サーバ基本情報] IPアドレス：133.24

これはCreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで発生する不具合に関する報告である。 概要 CreateJSを使用した際にAndroid4を搭載した一部のスマートフォンで、不具合が発生することがいくつかのブログで報告されている。問題報告と同時に解決策を提示してるブログもある為、それを検証した結果を報告する。 本件に関するブログ 本件に関して触れているブログとして以下のものがある。 (1)まるちゃんブログ CreateJSでハマったこと (2)1 pixel｜サイバーエージェント公式クリエイターズブログ Flashで作るスマフォブラウザゲーム向けアニメーション (3)しょぶろぐ Android4.0とCanvasアニメーションの話 不具合の起こる端末 実際に不具合の起こる端末として以下の名前が挙げられている。[]内の数字は上記のブログの番号を示すものである。

先日の投稿TypeScriptを使うの続きです。TypeScriptでCreateJSを用いると非常に便利です。何が便利かというとCreateJSのクラスを継承したクラスが簡単に作れるところです。 とりあえずサンプルはこちらです。 こちらのサンプルで用いている赤いボールはTypeScriptを使用して以下のように定義されています。 /// <reference path="../ts/easeljs/easeljs.d.ts" /> /// <reference path="../ts/tweenjs/tweenjs.d.ts" /> class SpringBall extends createjs.Container{ public spring:number = 0.01; public friction:number = 0.9; public vx:number = 0; pub

Adobe AIRはSQLiteを使えるので、データを溜め込んで後で使いまわすこともできる。 ここでは、textデータだけではなく画像（バイナリー）も保存、後から取り出して使えることを確認した。 PC/iOS/Android対応。 今回のような動作確認程度であれば、ASを一行も書き換える必要が無かった。すごい！ 画面キャプチャ（PC版） ソースコード一式 （SQLiteDemoがPC向け、SQLiteMobileがiOS/Android向け） https://github.com/umhr/SQLiteMobile 備忘録的な ・Windows(Vista)の場合、dbファイルはuserのドキュメント下に作られる。不要なときはゴミ箱に捨てればOK。すごく気楽。 ・android用マニフェストには、「uses-permission android:name=”android.permissi

最近暖かくなってきましたね。それに伴い気も抜けがちになっています。 そんな気持ちをゆらゆらする円で表してみました。 CreateJSを使用しています。 カスタムクラスを作成する際のプライベートメンバの記述方法に迷っています。今回はプライベートの印として”_”を付けています。この辺りの記述方法も揺れています。 var canvas, stage; var DEGREE = 60; var RADIUS = 100; var centerPoint; var lineCircle, circleColor; var anchorList, controlList; function init(){ var controlRadius; var color; canvas = document.getElementById("canvas"); stage = new createjs.Stag

mztm.jp 会社概要 実績 スマホのブラウザで即参加！ Tag CreateJS スマホで参加 メッセージストリーム Post date 2015/02/08 スマホで参加 クイズゲーム Post date 2015/01/23 スマホで参加 射的ゲーム Post date 2015/01/08 EaselJS Textの機能を検証してみました Post date 2014/04/16 CreateJS BitmapData for EaselJSを試してみました。 Post date 2014/04/15 FlashゲームをHTML5でWindows8アプリ化 Post date 2014/03/19 [CreateJS] MiniSlideshow2 Post date 2013/11/21 [CreateJS] MiniSlideshow Post date 2013/11/13

FlashDevelopにはCreateJSを書くための設定があるのは、先日「CreateJS エディタ編（FlashDevelop）」で紹介しました。 ただしPCの環境によって、先に紹介されたそのままだとエラーが出てしまう場合があります。 ここでは、Javaのパスが指定されてないエラーの解決方法を紹介します。 今回紹介するのは、FlashDevelopでCreateJSをコンパイルしようとしたときに、次の画面のようなエラーが出る場合です。 compiler.jarでコンパイルしようとしていますが、JavaがPC上で認識されていないようです。「JavaScriptなのにコンパイル？」と不思議に思うかもしれません。FlashDevelopでは、GoogleのClosure Compilerを利用して文法チェックや最適化を行っていて、これをコンパイルと呼んでいるようです。このClosure C

2013/2/15にアドビシステムズセミナールームにて行われた第一回CreateJS勉強会の発表内容です。当日はASer、JSerともにいらっしゃるだろうとの予想のもと、 ASerの方向けにFlashDevelop JSerの方向けにPhpStorm を使用した簡単なデモを用意しておき、それをお見せしました。この記事はその2つの内のFlashDevelop版です。 まず、FlashDevelopの特徴を簡単に説明すると以下のようになります。 FlashDeveloperの方にはお馴染み とにかくコード補完が最強 無料 Windows版のみ 最近ではHaxeのエディタとしても使用されている ダウンロードは以下のサイトから可能です。 http://www.flashdevelop.org/ インストールは非常に簡単で.exeファイルを実行するだけなのですが、一点だけ注意点があります。インストー

FlashDevelopでクラスファイルを作る際には、テンプレートを活用すると便利。 ここでは、私がいつも使っているテンプレートを紹介。 コーディングする時、構造を思い浮かべながら「んーこのディスプレイオブジェクトはSingletonにしておいた方がいいな」とかふわふとした想像を固めていくことがある。そういう時にはスパッとクラスファイルを作りたい。 パズルがもう少しではまりそうな時にはそのことに集中したいに決まってる。 けど、特にASだとSingletonを作るのはめんどくさい。クラスファイルを作ること自体に神経が持っていかれちゃうと、思い浮かべていた構造がどっかへいっちゃうこともある。っていうか、私はいつも。 なので、テンプレート化してすぐに呼び出せるようにしといてある。 シングルトン、マルチトン、AddedToStageとか、構造体（StructData）とか。っていうか、Sprite

Flashはすばやくデザインを形にするのに適している。けれども、画像処理の速さではCにかなわない。そこで、連携するデモを作ってみた。 画面の右側のPCではopenFrameworksで顔の位置、大きさを取得し、TCP/IPで左側のPC上のFlashに送って、赤い四角を描画している。 右側のPC openFrameworks TCPサーバー カメラから入力された画像上の顔の位置、大きさを取得し、クライアントに対して値を投げる。 Haar 検出器の学習データはhaarcascade_frontalface_alt.xmlを使っている。 なんとなくよく認識してくれたような気がしたのと、Marilenaで使われてたから。 他にも学習データはいろいろあって、口、鼻、右目、上半身、下半身、手といったパーツのデータもある。 ただし複雑な形状の場合、やっぱり認識率は落ちる模様。 左側のPC Flash T

アプリ間、マシン間通信をするときにはいくつかの方法があるが、TCPによる通信はその中でも基本的なものだ。 ここでは、FlashによるTCPサーバー、TCPクライアントを公開する。 Flashも良いけど、他のプログラミング言語と連携するともっと良い。 １台のマシンで使うのも良いけど、複数マシンを連携させるとさらに良い。 高性能PCが安くなって久しいので、無理して１台のPCで処理させるよりも、複数マシンで連携させた方が安く表現力を高められる場面もある。 そんな時の通信方法の第一候補にはTCPソケットが入るはずだ。 他の言語でも実装されているし、swfでもクライアント側は作れ、AIRにすればサーバー側も作れる。 そこで、開発の時にそもそもの通信テストをしやすいように、サーバーとクライアントを作った。 まず、サーバー（ServerSocketExample.air）を立ち上げておいて、Bindして

Flashでデバイスフォントを使ったテキスト表示する場合、WindowsOS上ではアンチエイリアスがあまりかからない。 一度拡大した上でBitmapData上にDrawし、縮小をかけると滑らかなテキストの画像が得られる。 そこで、通常のTextFieldと比較しながら拡大率によるアンチエイリアスのかかり方の確認ができるようにした。 テキストを滑らかに表示 – wonderfl build flash online Size:36、Scale:2の場合、 Normalのほうは36ptのテキストを表示のまま。 Scalingのほうは36×2=72ptのテキストとして、BitmapDataにdrawし、1/2に縮小してから表示用Bitmapにdrawしている。 縮小時、一気に1/2にするのではなく、1/√2を二回かけた方が綺麗な表示になった。 ただし、例えばTextFieldで最大127ptまで

2560×1600 (WQXGA)のモニタを3台縦に並べて総サイズ4800×2560とし、Flashをフルスクリーンで表示しました。 FlashPlayer10以降であればこのピクセル数も表示可能になったし、FlashPlayer11以降であればStage3Dの導入で描画力が格段に上がりました。 でも、4K2Kとかでも実際使えるの？という疑問がありました。 そこで、試してみました。 Stage3D 映像ではわかりづらいですが、60FPS出ています。 CPU使用率は6～10%、GPU Loadが30～40%なので、まだまだ余力があります。 使える場面は多そう、ということがわかりました。 ＊モニタの機種や購入時期がバラバラなため、画面ごとに色のばらつきがあります。 ＊ビデオ撮影はスマートフォンによる手持ちで行っているので、見づらいですがご了承ください。 ハードウェア/OS Intel Core

T2VPlayerには、無料版と読み上げ機能を強化したPro版があります。 Pro版では、読み上げボイスが高性能なものを使っているので、音質がよく、イントネーション修正機能があります。 今回はPro版を使いましたがイントネーションの微調整はしていません。 上の映像は、次のテキストを入力して、生成しました。 タイトル：課長 fla耕作 サブタイトル：見積編 A:（キャラクタ：NAO） B:（キャラクタ：HANA） （Aのアップショット） A:見積もりは難しい （0.5秒待つ） A:受託開発において、最大の課題である （0.5秒待つ） A:そこで我が社では「スーパー見積もり表」を作成した サブイメージ：mitsumori.jpg （画像を見る） （待つ） （カメラ目線） A:これまで、お客様の顔色を見ながらの A:腹の探りあいが行われてきた （0.5秒待つ） A:これからは、理解と信頼を得るこ