Angular2でClockMaker Labsをリニューアルしました

こんにちは、池田です。年始から取り組んでいたのですが、私のポートフォリオサイトをリニューアルしました。

デザインは従来のものとさほど変わりせんが、内部的には大きく作りなおしています。目玉はFlashからHTML5への移行

「池田さんといえばFlash原理主義者w」という印象の方が多いでしょうから不思議に思われたかもしれません。ClockMaker Labsは2008年から8年も運営しているサイトですが、過去のバージョンを振り返りながら今回のリニューアルを紹介したいと思います。

続きを読む »

Markdownから効率的なWebサイト制作を〜CreateJS入門サイト制作時に採用したGitを中心にした原稿執筆方法〜

前編記事「CreateJS入門サイトを立ち上げました」の続きとして、CreateJS入門サイトの原稿執筆とWebサイト制作にあたって、効率化した手順を紹介します。

続きを読む »

CreateJS入門サイトを立ち上げました

CreateJS 入門サイト

こんにちは、池田です。1年半ぶりの更新となります。ご存知の方も多いと思いますが、私の記事執筆の活動はClockMaker BlogからICS MEDIAに舞台を移動していまして、ICS MEDIAで積極的に発信しています。ぜひあちらのサイトをチェックくださいませ。

さて、この度「CreateJS入門サイト」を立ち上げました。

このサイトの公開に伴い、編集後記を全2回で公開します。

CreateJS入門サイトを作った理由

CreateJSはFlashのようなコンテンツを作ることのできる便利なフレームワークです。Flash経験者であれば少ない学習コストではじめることができ、2012年の登場以来(参照記事「リッチなHTML5コンテンツのためのフレームワーク『CreateJS』が公式サイトを公開」)、多くの元Flashクリエイターに利用されています。Webで調べればCreateJSを扱った記事もたくさんヒットし、解説書も出版社からでているので学習しやすいフレームワークといえるでしょう。

そう思っていた私は教育の場でCreateJS (主にEaselJS)を採用したところ、あることに気づきました。Webで調べたときにヒットするサイトは、どれもFlash経験者を前提とした記事ばかり。Flash経験者がSWFからHTML5に移行するのにこれらの情報が役立っているのは間違いありませんが、これからインタラクションデザインを学ぼうという初学者にとっては敷居が高かったのです。

初学者向けのCreateJSの情報がなかった

また、初学者にとって体系的に学習できるサイトがないことにも気付きました。「このサイトを一から勉強すれば大丈夫」と言えるサイトが無いのです。CreateJSのバージョンアップによって、以前の書き方が新しいバージョンで利用できなくなることがあります。新旧バージョンの断片化した情報がヒットするばかりで、Flash経験者であれば情報の取捨選択が可能でも、初学者は安心して情報収集することができないのです。

安心して使える入門サイトを

この現状を解決すべく、初学者向けの入門サイトを立ち上げました。まとめるとこのサイトの特性は次となります。

  • Flash未経験者を前提としている
  • 最新バージョンに対応し、常に使える情報がまとまっている

編集後記は後編「Markdownから効率的なWebサイト制作を」に続きます。

Adobe MAX 2014に参加します

こんにちは、池田です。来週10/6(月)〜10/8(水)にロサンゼルスで開催されるAdobe MAX 2014に行ってきます(アドバンテージツアーで参加します)。今年で参加は4回目になるのですが、私のスケジュールは次のようになっています。主にFlash/HTML5に関することを中心に受講するセッションを選びました。

続きを読む »

ICS LABをリニューアルしました

140829_title

こんにちは、池田です。

私の所属している会社(ICS INC.)のブログ「ICS LAB」をリニューアルしました。このブログ「ClockMaker Blog」では私の個人的なデモを今後も掲載していく予定ですが、ICS LABでは最近のWebのフロントエンドの技術情報を掲載していく予定です。以下、リニューアルしたICS LABのデザインを紹介します。

 

続きを読む »

ICS INC.のFacebookページが公開されました

今更なのですが、私の所属している会社(ICS INC.)で公式Facebookページが公開されました。

私も積極的に会社のブログにFlashやHTML5の記事を書いているのですが、もしよければFacebookページをフォローして更新情報をチェック頂ければ幸いです。

ブログのWordPressをアップデート

ブログのWordPressをアップグレードしました。WordPress 3.2以降はPHP5が必要なのですが、このブログはずーーーっとPHP4で動かしていたのでアップグレードができずにいました。セキュリティー的にも不安だったものの忙しかったため手を出せず、今日やっと移行できたという感じです。

今回アップデートした項目

  • PHP 4→ PHP5.4
  • MySQL 5.5→ MySQL 5.6
  • WordPress 3.0→ WordPress 3.8

続きを読む »

HTML5で燃えさかる炎の表現に挑戦! WebGL対応のJSライブラリAway3Dはパーティクル機能がかなり魅力的

先日の記事で紹介したJavaScriptライブラリ「Away3D TypeScript」(WebGLに対応)ですが、燃え盛る炎の表現を作成してみました。

デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。

マウスで画面をドラッグ&ドロップするとアングルを動かすことができます。もしかしたら環境によっては動作が重たいかもしれないので、ブラウザのウインドウサイズを小さくしてみると滑らかに再生できるようになるかもしれません。

続きを読む »

HTML5とJSで3D表現に挑戦! WebGL対応の本格派フレームワークAway3Dを使ったパーティクルデモ

先日の記事で紹介したWebGLに対応した3Dライブラリ「Away3D TypeScript」ですが、HTMLとJavaScriptで3Dのパーティクル表現を作成してみました。これらのデモのJavaScriptはTypeScriptで作成しました。

デモは以下から試せますので、ぜひWebGL対応のブラウザ(Chrome, Firefox, IE11)を使ってご覧下さい。

ちなみにこれらのデモはもともとFlashで作っていたものを移植したものとなります。正直、Flashで実現できてもHTMLでこういった表現は難しいと思っていたのですが、Away3D TypeScriptが高機能なおかげで実装することができました。

続きを読む »

HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ

HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScript10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。

続きを読む »

1 / 4112345...102030...最後 »