CreateJS勉強会 (第9回)に参加してきた話 #CreateJS #CCDojo
先日アドビ本社で行われた「CreateJS勉強会 (第9回)」に参加してきました。
CreateJS勉強会 (第9回) : ATND
CreateJSはHTML5 Canvasを使ってインタラクティブなコンテンツを作成できるフレームワークで、歴史的には2012年から開発がスタートしていますが、正式版となったのは2017年9月でつい最近のことです。このリリースに関連して開催された今回の勉強会は、
- CreateJSの概要 + Animate CC 2018の新機能(ICS 池田さん @clockmaker)
- CreateJS 1.0.0で何が変わったか(野中さん @FumioNonaka)
- 我々はCreateJSをどう使うべきか?(世路庵 沖さん @448jp)
という豪華セッション3本立て。CreateJSを仕事で使う機会は全く皆無な私ですが、ついつい興味をそそられてしまったわけです。
この勉強会はAdobe Creative Cloud道場との共同開催にもなっていて、当日リアルタイム中継されたほか、現在も録画ビデオが見られます。なので、見逃した方はビデオを見ましょう。
https://blogs.adobe.com/creativestation/ccdojo-192-createjs
CreateJSの概要 + Animate CC 2018の新機能
まず池田さんのセッション。CreateJSとはどんなもので、どういう現場で使えるのかといった概要の紹介。
- CreateJSの得意分野は、自由度の高いインタラクティブな表現。反面、ユーザインタフェースの作成などにはあまり向かない。
- 類似技術としては、以下のようなものがある。
- 一方で、CreateJSは2D表現のための技術で、Context2Dをベースとしている。
- グランブルーファンタジーやニコニコ動画など、大手サービスでも広く採用されている。
- なぜCreateJSか?→Flashプラットフォームとの親和性が高い。Animate CC(元Flash Professional)は公式にサポートしている。
続いて2017年10月にリリースされたAnimate CC 2018の新機能。
- カメラの深度機能が追加された。レイヤーごとにZ深度を設定して、3Dのような奥行きが簡単に表現できるようになった。
- Robert Penner式のイージング設定ができるようになった。
- タイムラインに秒数が出せるようになった。
- 既存アニメーションの絶対時間を保ったままフレームレートを変えられるようになった。
- など。
CreateJSと他のフレームワークをどう使い分けたらいいのかがはっきり説明されていてわかりやすかったです。特にCreateJSの場合、Animate CCを使えばコードを書けなくてもタイムラインベースでアニメーションの作成ができるので、これは他のフレームワークにはない強みと言えそうです。
Animate CC自体も、Flashコンテンツの作成ツールという枠組みはとうの昔に捨て去っていて、HTML5を含むマルチプラットフォームなアニメーション作成ツールとして地道に進化を続けています。この辺りはもっと高く評価されてもいいと思っています。
CreateJS 1.0.0で何が変わったか
次に、野中さんによるCreateJS 1.0.0での変更点の解説。発表資料は下記に公開されているので、そちらを参照してください。コード例がたくさん出ています。
CreateJS 1.0.0で何が変わったか | CreateJS Workshop vol.09
ざっくり概要を挙げると、
- StageGLクラスでWebGLが使えるようになった。
- 基本的には、StageクラスをStageGLクラスに置き換えるだけでWebGLにできる
- ただし、若干の注意が必要。たとえば、WebGLはラスターグラフィックス前提なので、ベクター形式であるShapeはそのままでは描画できず、キャッシュする必要がある、など。
- CodePenにCreateJSアカウントが設けられて、CreateJSの作例が掲載されている。
- TweenJS 1.0.0で、プラグインモデルが大幅に改められた。
- PreloadJSライブラリでフォントローダー機能が追加された。フォントファイルやCSS定義およびCSSパスを読み込んでフォントを設定できる。Webフォントを使いたい場合などに便利。
CreateJS 1.0.0では、やはりWebGLが使えるようになったことが最もインパクトが大きいでしょうか。これによって、パーティクルのような複雑な表現を高速に処理できるようになりました。3万個のパーティクルをスムーズに描画するデモは、(残像効果を使って多少視覚的な水増しをしているとはいえ)、なかなか衝撃的でした。
我々はCreateJSをどう使うべきか?
休憩を挟んで、最後は沖さんによるセッション。発表資料は下記に公開されています。
我々はCreateJSをどう使うべきか? // Speaker Deck
- アニメーションの持つ力とは何か?
- アニメーションとそうでないものを分けるものは、"時間軸"。
- 関連して、アニメーションの原点とされるフェナキストスコープを紹介。
- フェナキストスコープとは、ゾートロープに先駆けて登場したもので、ゾートロープと同じように回転盤と覗き穴を使って絵をアニメーションさせるというもの。
- フェナキストスコープ - Wikipedia
- アニメーションを使えば、そこには本来ないはずのものを作り出すことができる((静止画なのに動いている、とか)
- Webにおけるアニメーションの目的とは何か?→フィードバック、世界観の演出、ストーリーの伝達など。
- アニメーションでしか使えられない情報がある
- 雨量計の内部構造の解説の例。文章や静止画での説明だと要領を得ないが、アニメーションなら一発でイメージが掴める。
- Webではさまざまなアニメーション技術が使える。DOM、CSS3、Canvas、GIF、videoなど。
- 現在の主流は、コード思考のアニメーション。JavaScriptでアニメーションのコードを書く。
- CreateJSは、コード思考で使うこともできるが、Animate CCを使ってタイムライン思考でアニメーションを作ることもできる。これが最大の強み。
- コード思考も大事だが、タイムライン思考のアニメーションにつか伝えられないこともある
このセッション、タイトルはCreateJSとなっていますが、実際の内容はWebアニメーション全般に関わる興味深いセッションでした。
コード思考とタイムライン思考、どちらにも得手不得手があります。どんなどちらか一方ではなく、シーンによって適したものを選択できて、両側からアプローチできるということが大切ですね。
JJUG CCC 2017 Fallに参加してきた話 #jjug_ccc
今さらですが、先週開催されたJJUG CCC 2017 Fallに参加してきました。
JJUG CCC 2017 Fall
今回もボランティアスタッフとして参加させていただきました。ボランティアスタッフって何ぞやという話は、前回のレポートに書いたのでそちらを参考に。
JJUG CCCボランティアスタッフのススメ - 我らねぶた馬鹿
スタッフではありますが、手が空いている時間は自由にセッションに参加できます。今回は以下の4つのセッションに参加しました。
年齢も経験も関係ない!ステップアップするためのJavaコミュニティ活用術
よこなさん(@ihcomega)によるセッション。
年齢も経験も関係ない!ステップアップするためのJavaコミュニティ活用術 // Speaker Deck
コミュニティが提供してくれる価値のひとつとして「知る」ということがありますが、この「知る」には技術的な知識以外にもいろいろなものがあって、そのどれもがステップアップのために大切ですよ、という話でした。
個人的に特に刺さった言葉は、「聞く・見るだけが知るということではない。アクションが大事」と「"いつか登壇してみたい"はオススメしない。思い立った瞬間にやるのが大事」の2つ。そう言うよこなさん自身が、本当にJavaOneで登壇したりしてるからすごい。
いろいろ思い出させてもらえるセッションでした。
OpenJDK参加入門
OracleのDavid Buckさん(@DavidBuckJP)によるOpenJDKプロジェクトへの参加方法を解説するセッション。
OpenJDK 参加入門 [JJUG CCC 2017 Fall E2]
JavaOneでも同内容のセッションを聞いているのですが、日本語で聞いておきたかったので再び参加。前半はOpenJDKとはなんぞやという話で、後半は実際にプロジェクトのリポジトリを見たり、どうやってビルドするか、そしてコントリビュートしたい場合にはどうしたらいいかといった内容の解説でした。
来年以降のJDKは3ヶ月毎という短いサイクルでリリースされることになるので、常に次のバージョンを意識しながら、先行して新機能を試すということがこれまで以上に重要になります。そういう意味でも、OpenJDKプロジェクトをよく知っておくことは大切。その上で、自分にできる範囲で何か貢献できればベストかなと思います。
アンカンファレンス #1
今回は初の試みとしてアンカンファレンス部屋が用意されました。アンカンファレンスというのは、特に事前にテーマを決めず、当日に参加者からの提案されたテーマについてみんなで話し合うというスタイルのイベントです。
私が参加した回のテーマは
- 子供のプログラミング教育について
- スキルの伸ばし方について
の二本立て。話の流れで、この2つの間に、社内研修などの大人への教育の話も挟まりました。
子供の教育については、機会を与えることと、もし興味を持ったらサポートしてあげることが大事、という感じの話になりました。あと私の考えとして、昨今騒がれてる教育課程の話に対しては、親と、教育現場の人と、エンジニアなど、いろんな専門家が一緒になって取り組まないといけないんじゃないか、という話をしました。
スキルの伸ばし方については、どうやってモチベーションを保つかという話が主だったような気がします。それが人によっては勉強会だったりもするし、他人からのの評価だったり、資格の取得だったりもする。
いずれにせよ、継続して勉強しようという気持ちを養うことが大事。でもそれって子供の教育にも言えることだよね。というような感じで、綺麗にまとまりました。
アンカンファレンスは、これ以外にスタッフ仕事の合間にもちょくちょく覗かせてもらっていたのですが、どのテーマの回も結構盛り上がっていて、非常にいい試みだったんじゃないかと思いました。
Java SE 9の紹介: モジュール・システムを中心に
宮川さん(@miyakawa_taku)によるJava 9の新機能の紹介。
https://www.slideshare.net/miyakawataku/introduction-of-java-se-9-and-the-module-system
タイトル通り、モジュール・システムの話が中心で、それ以外は最後の方に少しずつ紹介された感じでした。Java 9のモジュールはかなり大規模な変更で、分かりにくい部分も多いのですが、それを順序立てて非常に分かりやすく説明してもらった感じです。さすがです。
その他の感想
以下はセッション以外のことについてです。
混雑緩和
前回のJJUG CCCで参加者数が1000人を超え、通路が混雑して部屋移動の際に混乱が生じると言う事態が起こりました。今回はその反省から、通路を原則として一方通行にして誘導するという対策が取られました。
初の試みだったので午前中のうちは混乱した人もいたようですが、午後からは全体に浸透してきたようで、みんなスムーズに移動できるようになりました。スタッフとして誘導を手伝っていたのですが、みmんなマナー良く順路を守ってくれたので実に助かりました。
ボランティアスタッフについて
前回、4回目でボランティアスタッフの動きがだいぶスムーズになってきたという話を書いたのですが、今回はさらに良くなっていたと思います。初めて参加する人も含めて、みんな自主的に誘導や椅子の移動をこなしていたし、ボランティア同士でもSlackなどで指示を出し合ってうまく連携していました。
あと印象的だったのは、JJUG CCCへの参加自体が初めてというスタッフも結構いたということです。これは非常にいい傾向だと思います。
その他にも、いろんな人に会えて、いろんな話ができたので楽しかったです。よこなさんの話ではないですが、JJUG CCCは技術的な部分以外にも得るものが大きいイベントだと、改めて思いました。
写真家の小原信好さんのブログに青森ねぶた祭のサマーキャンプ場の写真が掲載されている
ツーリングマップルの北海道担当としても知られている、ホッカイダーこと写真家の小原信好さんのブログに、青森ねぶた祭のサマーキャンプ場の写真が掲載されています。
北東北エリアマガジン『rakra(ラ・クラ)』のVol.85に、青森ねぶた祭のサマーキャンプ場が取り上げられているそうで(まだ買ってない)。ブログに出ているのはそこに掲載しきれなかった写真だそうです。小原さんはライダーの間では当然よく知られた方ですが、今年の夏に取材に来ていて、実際にキャンプ場に滞在してました。
2017年青森ねぶた「跳人ライダー&チャリダー」写真|Hokkaider(ホッカイダー) 北海道を愛する旅人達へ…
ほぼ知り合いだらけですが、私も載っていました。
2017年青森ねぶた「跳人ライダー&…の画像 | Hokkaider(ホッカイダー) 北海道を愛する旅人達へ……
なんか戦いに赴く集団みたいな雰囲気になってます。なかなかいい感じの写真。
Adobe MAX 2018の事前登録がすでに始まっている
来年の話をすると鬼が笑うといいますが、Adobe MAXに限っては、戦いはすでに始まっているのです。ホテル探したり安い航空券探したり会社に申請する算段したり、いろいろ忙しいからね。
来年(2018年)のAdobe MAXの開催日程は10月15日〜17日で、場所は3年ぶりのロサンゼルスになります。13日と14日にはプレカンファレンスも行われる予定です。
https://max.adobe.com/
公式サイトでは、すでに来年分の事前登録ができるようになっています。
https://max.adobe.com/signupandsave/
ここに書かれているように、この事前登録はあくまでも仮のもので、登録した人には春頃に通知を送るからそのときに正式登録してね、というものです。4月30日までに参加登録した場合には、参加費1,595ドルが500ドル割引されて1,095ドルになります。
過去のMAXに参加したことのある人は、さらに200ドル割引されて895ドルになります。
ラスベガス開催も派手派手しくて悪くなかったですが、ロサンゼルスは個人的にMAXデビューした場所だし、それ以来6回連続で参加させていただいたということもあって、やはり古巣という感じが強いですね。
ところで、開催場所について公式ではまだ「Los Angeles, CA」と書いてあるだけなので、以前と同じLos Angeles Convention Centerなのかどうかははっきりしません。でも開催規模的にほかのところでは難しいような気がします。心配なのはキーノート会場として使われていたMicrosoft Theater(元Nokia Theater)は収容人数が7,100人で、今年のように1万人超えだと使えないということです。Microsoft Theaterが使えないとなると、LA Convention Centerの魅力が半減しちゃいますね。
と、こういうことを考えながら楽しむのが正しいMAX野郎の姿ですよ。実際に行けるかどうかは今は考える必要はないのです。
もちろん、今月開催されるAdobe MAX Japan 2017もお忘れなく。
Adobe MAX Japan|2017年11月28日クリエイターの祭典
JavaOne 2017 4日目レポート
遅くなろうが順番がめちゃくちゃだろうが、とにかく書くことが大事なんだ、と教わった。
JavaOne 2017の4日目です。この日はキーノート的なものは一切なかったので、ずっと個別セッションに出ていました。
Streams in JDK 8: The Good, the Bad, and the Ugly
スピーカーが、Simon RitterとStuart Marksというちょっと変わった組み合わせ。余談だけど、Simon Ritterの英語は早口なのにすごく聞き取りやすかった。
Stream APIを使った(あるいは使うべき)コードを見て、何がいけないのか、どう直すべきなのかを説明していくセッションです。Good/Bad/Uglyのセッションは、説明が明確で分かりやすいから好きです。
たとえば、
action=validate&key=10&key=22&key=10&key=30
みたいなURLパラメータをパースして、
action,validate
key,[10,22,10,33]
みたいな結果を取り出すコードを考えてみよう、という感じ。それで、UglyとかBadなコードを見せて、何がいけないのかを指摘する。
で、だいたい最初に悪いコード例が出される。
基本的な指摘としては
- Functionalに考える
- 1つの中間操作とか末端操作の中に普通に複雑なロジック入れるのはStreamの意味がない
- stateによって処理を分けるようなののも避けよう
- 中間処理でprintlnで出力結果出して利用するのは良くない
- Internal IterationとExternal Iterationをちゃんと使い分ける
- 処理速度に注意する
みたいな感じ。
あと、Parallel Streamについては、以下のような感じの指摘でした。
- Parallelにしたからといって、必ずしも速くなるわけではない
- Parallel Streamsはcommon fork-join poolを利用しているので、その挙動を把握しよう
- デフォルトのスレッド数=CPUのコア数。コンテナ環境とかは特に注意
- ネストすると遅くなることが多い
Modules and Services
Java9のモジュールについて、サービスプロバイダの仕組みを解説。要するに、SPIの仕組みがモジュールが導入されてどうなったか的な感じの話でした。
モジュール定義にはrequiresとexportsの他にusesとprovideっていうキーワードがあって、使いたいサービスプロバイダを指定する場合(利用側)にはusesを、サービスの実装を提供する場合(提供側)にはprovideを使う。
この場合だと、java.desktop側からは直接FirstPrintにはアクセスできなくて、必ずPrintServiceLookup経由で使うことになる。コード上はインタフェースが指定されていて、使う実装は実行時に決まる、いままでのSPIと同じ動き。
java.desktopモジュールではこのサービスタイプをたくさん使ってる。
あと、Optionalとかも使えるっていう話がありました。
55 New Features In JDK 9
ふたたびSimon Ritter。JDK 9の新機能をズラーっと説明していくセッション。ほぼ既知の内容でした。
というか、久保田さん(@sugarlife)が去年のJJUG CCCでやったセッションでほぼカバーされてる。さすがです。
G1GC Concepts and Performance Tuning
G1GCの基本的な動きと、それをどうやってチューニングしていくかといったポイントの解説。
基本的には、GCのオプションつけて、ダンプして、Flight Recorderで見て、それを元にチューニングするという話。
ちょっとすぐにはまとめきれないので後回し。
The G1 GC in JDK 9
上のセッションと同じスピーカー。やる順番が逆のような気がした。
前半は、G1GCの基本的な仕組みをもっと詳しく解説、後半はJDK8からJDK9までに何が変わったかという話。
大きな変更点は以下の5つ。
- String deduplication (8u20)
- Class unloading with concurrent mark (8u40)
- Eagerly reclaim humongous regions (8u60)
- Adaptive start of concurrent mark (JDK9)
- More efficient collections (JDK9)
実質1つじゃんってツッコミは置いといて。
1は、2つの同値(equals()の結果がtrue)のStringオブジェクトがある場合に、その中身の参照先を同じchar[]にする。メモリは大幅に節約できる反面、CPU使用率は少し上がってYoungGCは少しだけ伸びる。
2は、オブジェクトが不要になったかどうかのマーク処理を並列で実行するというもの。fall-back full GCよりも処理は複雑でトリッキーだけど高速。
3は、1つの領域の半分を超えるようなでかいオブジェクトがあった場合、humongous領域に独立して格納する。これによって参照が無くなった段階で簡単に解放できるようになる。humongous領域は他の領域とは独立しているから、並列マークが完全に終わるのを待たなくても解放できる。
4は、Old領域の並列マークの開始タイミングを最適化する仕組みの導入。Old regionの並列マークは領域がフルになる前に完了しないといけないので、フルにならないようにするための安全なマージンが必要。一方でフルGCはギリギリまでやりたくない。そのマージンをどれくらい取るのかを実行時のデータを元にして最適化する。
5は、上記の他にもいろいろ改善されていて、実に250以上のenhancementsと180以上のbug fixesがあったよ、というお話。
あと、次のJDKに向けて開発中の機能として、パラレルfall-back full GC(JEP 307)とか、card scanningの高速化なんかが進められているらしい。
Troubleshooting Memory Problems in Java Applications
Javaアプリケーションのメモリエラーに関するトラブルシューティングのセッション。
OutOfMemoryErrorが起こったときに、その原因を探って、解消するための方法を解説。基本的には、GCのログとヒープダンプをとってちゃんとツールで追っていけば、怪しい箇所が見つかるよ、という話。あと、どういうときにメモリリークが起こりやすいか、何を見ればそれがわかるかなどが詳しく紹介されました。
Javaのメモリの問題は、おもに次の原因で起こる。
メモリリークの解析や解消を手助けするツールやオプションは以下のようなものがある。
JavaOne 2017 3日目レポート
2日目の分書いてないですが、Gihyo.jpにキーノートのレポートを書かせていただいたので、ひとまずそれで。
第1回 JavaOne 2017開幕,キーノート速報~Project Jigsawついにリリース!女性コミュニティ活性化,データが創る未来:Java 9のその先へ~JavaOne Conference 2017レポート|gihyo.jp … 技術評論社
Monitoring and Troubleshooting Tools Available in Your Java 9 “bin” Folder
JDK 9に含まれるモニタリングおよびトラブルシューティング・ツールの話。
主なものは以下の5つ。
jconsole
Javaアプリの監視と管理のためのグラフィカルツール。プロダクション環境でローカルで使うのは推奨しない。
リモートで使うには「com.sun.management.jmxremote.port=ポート番号」で起動。
JMC
Javaのミッションコントロールツール。JMXコンソールとJava Flight Recorder(JFR)を含む。
JFR APIがJava 9でサポートされたので、カスタムのJFRイベントを作れる。新しいイベントもサポート(safepoint/codecache/compiler/G1/moduler)
その他、次のようなものもある。jhsdbって知らなかったのであとでチェックしよう。
- jcmd
- jdb
- jinfo
- jmap
- jstack
- jhsdb - Java HotSpot Debugger
以下のものはJDKには同梱されなくなった。
- Java VisualVM
- jhat
- jsadebugd
Immutable Collections
immutableなcollectionって、本当はこういうものが欲しいけど、今のJava9でもまだちょっと足りないよね。じゃあどうしようか、という話。
まず、Immutable collectionに求めたい要件の提案。
- Manifest immutability
- Sealed
- Provide a bridge to mutable collections
- Efficient construction, updates, and copying
Java 9だとunmodifiable collectionsが使えるけど、上の要件は満たしてない。他のフレームワークはどうだろうか。
- Guava - 1と2はOK。3は無し。4はconstructionとcopyingは一部OKだけどupdatesは無し。
- Eclipse Collections - 1と3はOK。2と4は無し。
- Vavr, Clojire, Scala - 全部OK。
Immutable collectionの実装はMapやSet、VectorのPersistent data structureにつながる。Hash Array Mapped Tries(HAMTs)がEfficient persistentのベースになる。ということで、ここから先はこのHAMTsベースのCollectionsを実際に自前で実装してみよう、という話でした。
Modules in One Lesson / Migrating to Modules
Mark ReinholdによるJigsawのセッション。2つとも満席。
MarkがJava 9のModulerの使い方について実際に目の前でデモ。emacsでその場でプログラム書いて、コマンドラインでコンパイルしたりjlinkしたりする。目の前でどんどんコード書いて動いていくのは分かりやすくていいんだけど、新しい話はほとんど無かったのは残念。突然SwingSet2を起動して見せたのはちょっと笑った。
OpenJ9: Under the Hood of the Next Open Source JVM
IBMが開発してEclipse Foundationに寄贈したJavaVM「OpenJ9」の話。
http://www.eclipse.org/openj9/
ランタイム技術はEclipse OMR(とOpenJDK)ベース。つまりJITとかGCなんかの基礎部分はOMRをベースに作られていて、その上に起動の高速化とかメモリ使用量の削減みたいな拡張を加えている感じ。
ちょっと面白そうなので、余力があったら別途まとめたい。
最初の勢いで書いてたら体力がもたないことに気づいたので、尻すぼみですみません。
【JavaOne 2017 初日】Geek Bike Rideに参加してきました
JavaOne 2017に参加するためにサンフランシスコに来ています。
今日はJavaOne Geek Bike Rideという、JavaOneに来てるみんなで自転車でゴールデンゲートブリッジを走ろうぜ、というようなイベントに参加してきました。
JavaOne Geek Bike Ride 2017 - Silicon Valley Java User Group (Mountain View, CA) | Meetup
3つほど丘を登りますが、レンタサイクルでのんびり走る非常にゆるい感じのイベントです。
ちなみに自転車はここで借りました。
マウンテンバイク1dayで40ドル弱。今回のコースくらいなら余裕でした。
自転車を借りたら、こんな感じでゆるゆると集合。
超快晴。絶好のサイクリング日和。でも風邪がちょっと冷たいです。
私は例によってJJUG CCCスタッフTシャツを着ていきました着ていきました。右の後ろのが私。
ゴールデンゲートブリッジの下をくぐって。
上まで登って、橋を渡って対岸まで行きます。
対岸から。かなり参加者が多かったので、途中で自然に何グループかに別れて走りました。私は最後のグループ。
最後にメキシカンレストレンで軽く昼食を食べてから、フェリーに自転車を乗っけて帰りました。
ものすごい快晴だったので気持ち良かったです。
他の参加者とも、どこから来たの?何回めなの?どんな仕事してるの?みたいなお決まりの会話で交流をしました。
相変わらずのつたない英語でも話に入れてもらえたし、みんなフレンドリーで楽しかったです。
意外と戻るまでに時間がかかって、予定してたセッションのいくつかを見逃したのは誤算でしたが、まあそれでも思い切って参加して良かったです。