6/23(木)、HTML5ゲーム開発ができるPlayCanvas初心者向け勉強会を開催します
...はじめまして、深瀬です。 5月より株式会社ISAOで働きはじめました。以後よろしくお願いいたします。
さて、株式会社ISAOでは、来る今月6月23日(木)に平光昌寛氏をお招きし、HTML5ゲーム開発ができるPlayCanvasの勉強会を開催いたします。
PlayCanvasとは
PlayCanvasは、2011年に英国ロンドンで設立され、世界初のクラウドでホストされているゲーム開発プラットフォームです。 また、ゲームエンジン部分はMITライセンスで公開されているオープンソースエンジンです。
UnityライクなゲームエディターをWeb上から操作でき、Javascritptで記述する事ができ、手軽にはじめる事ができ、個人なら無料で利用する事ができます。
Qiitaでもまだ投稿の少ない、未来を感じるプラットフォームです。
講師について
平光 昌寛
- 1984年広島県出身。
- 慶応義塾大学卒業。
- 複数の創業(Sportier,LLC 創業者，株式会社Knowledge Database 取締役，株式会社Media Index 取締役)を経験した後、StartupWeekendTokyo発のサービス「ただ肉」を創業。
- 13歳よりプログラミングをはじめ、15歳の時には県内のプログラミングコンクールで数々の賞を受賞。
- 19歳の時にロサンゼルスにて1社目の創業を経験、同社は後にディズニー・ピクサー等大手企業と取引するイラスト制作会社に成長する。
- 帰国後は外資コンサル・金融・大手SIerでキャリアを積んだ後に国内でも東京の他、京都や筑波にて会社を立ち上げバイアウトを経験
- 2010年にシリコンバレーに移り、iPhoneアプリ開発を中心として再度アメリカで事業展開を進め、2012年に創業したPoppin Gamesはゲームアプリ総計1000万ダウンロード、1億円の資金調達を達成
- 同2012年に世界8カ国でクリエイティブ制作を行うSportier, LLC.及びただ肉, LLC.を日本国内で創業し両社の代表を務める
- 現在はパソナグループ・トヨタグループ等幅広い事業領域での技術顧問としてアドバイスをする傍ら、大学・専門学校でのゲスト講演も行っている。
おわりに
当日は、皆さんとお会いするのを楽しみにしております。少しでも興味をお持ちになった方の参加を、是非ともお待ちしております。 万かつサンドを食べながら、さくっとゲームを作っちゃいましょう。
写真は前回の勉強会後の懇親会の様子です。詳しくはこちらをご覧下さい。
↓↓↓お申し込みはこちら↓↓↓ HTML5ゲーム開発ができるPlayCanvas初心者向け勉強会 - connpass
iframeから新規ウィンドウを開いてリンクできない時の対処法
...完全な備忘録です。<br /> インラインフレーム内に読み込んだHTMLから新しいウィンドウにリンクを開きたい時、Aタグの
target="_blank"やjQueryMobileのrel="external"、果てはJavaScriptのwindow.open()を使っても出来ない状態に陥った時は、IFRAME内の属性にsandbox="allow-scripts"がないかを疑ってみましょう。
HTML5で追加されたIFRAMEタグの新属性「sandbox」で「allow-scripts」を指定してしまうと、インラインフレーム内に読み込まれたコンテンツのJavaScriptの機能をかなり制限してしまいます。特にwindowオブジェクトが受ける影響は大きく、ブラウザのポップアップを伴う処理を完全に抑止してしまいます。
WEBセマンティック的にも、IFRAMEを使うときは内包されるコンテンツによって属性を正しく設定してあげる必要があるってことですね。CANVAS版イメージトリマー
...任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、- 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
- CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
- トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
- 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
- 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
- PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。
HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。
画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。
利用コード：HTML5、JavaScript、jQuery、PHP
任意の画像をHTML5のCANVASに読み込んで、範囲を指定してトリミングおよびリサイズし、ファイル形式を指定して出力するイメージトリマーツールです。
処理の流れとしては、- 指定されたディレクトリ内をサーチして画像ファイルだけをプルダウンメニューへ追加します。
- CANVASに読み込んだ画像の上にjQueryUIのドラッグ＆ドロップボックス（divレイヤー）を重ねる。
- トリミングボタンが押されたらドラッグ＆ドロップボックス（divレイヤー）のX,Y座標と縦横幅を取得します。
- 取得した座標と幅を元画像の実寸比に計算し直して、トリミング＆最終出力サイズにリサイズします。
- 最終出力画像をCANVASのtoDataURL()メソッドでテキストデータ化して、AjaxでPHPへポストします。
- PHP側では受け取ったテキストデータをJPEG/PNGのバイナリデータへ変換して指定場所へ出力します。
HTML5とJavaScriptだけではバイナリファイルをローカルへファイルとして出力することが出来ないので、PHP化で処理しました。
画像ファイル管理ツールの拡張機能として開発しましたが、いまだ日の目を見ていないプロト版ツールです（なので、ツール自体の見た目ものっぺりしています）。
利用コード：HTML5、JavaScript、jQuery、PHP