11月20日（火）のAdobe MAX 2018で「イマドキのUIデザインには欠かせない！ マイクロインタラクションを作るためのズルいCC活用テクニック」と題して発表しました。

発表の振り返りを記事として残しておきたいと思います。少しエモい感じで恥ずかしいですが、この気持ちを忘れないように記事にまとめました。

9年前のAdobe MAX 2009での思い出が原点にありました。

人生を変えた2009年のAdobe MAXを目指した

思い起こせば、Adobe MAXにはじめて参加したのが2009年。締め切り間近の修羅場な仕事があるなか、朝〜夕方はMAX会場、夜から朝にかけて会社で徹夜の開発作業として、無理して参加したことを覚えてます。連日徹夜してでも参加して良かったというのが当時、MAXで強く思ったことでした。

憧れのクリエイターの発表は伊達じゃなかった

リスペクトする方々の発表が聴けると楽しみにしていましたが、Adobe MAX 2009のすべての発表はどれも期待以上。

中村勇吾さんのWordスタイルの発表に誰もが本質的なものを感じたり、ROXIK城戸さんの実用的でFlash 3Dデモの迫力に会場が圧倒されたり、FlashのフレームワークProgressionやFlexの目指す未来、Spark Projectのユーザーコミュニティーの盛り上がり、After Effects神のayato@webさんの発表にワクワクしたものです。

（当時のブログ記事）

海外勢の登壇者も多く、イベントは2日間。セッションも豪華だったように思います。

業界仲間が増えたことがきっかけで、コミュニティーに参加するようになった

当時はコミュニティーやネットで顔を一切だしてなかったものの、懇親会で「ブログをよく見てます、あのブログの人なんですね」と言ってもらえ嬉しく思ったものです。このことがキッカケでユーザーコミュニティーに参加するようになり、当時知り合った業界仲間とは何年も続くことになりました。

余談ですが、守秘義務に厳しい会社だったので、ClockMaker Blogを運営していることは会社のごく一部のメンバーを除いて秘密にしていましたw

今回の登壇で目指したのは当時の感動

Adobe MAX 2009に感じた熱い思いは、その後の私のフリーランスへの転身のきっかけとなり、その後の人生を大きく動かしたことは間違いありません。

9年後のAdobe MAX 2018では登壇する立場となり、感慨深いものはありつつも、憧れの先人たちの発表に到達したい、というのが今回の目標となりました。

発表のコンセプト

Adobe MAX 2018での発表で大事にしたのは次の点。

• 来場者にとって、目の前の仕事に役立つ即戦力となる知識の紹介
• 普遍的で本質的なクリエイティブの基礎の力
• ウェブとともに歩んできたテクノロジーへの感謝と将来への歩み方

発表資料を準備に取りかかったのは3ヶ月前の8月。50分に詰め込むため、アイデアや原稿起こしを何度も繰り返し、考えを整理しました。ロサンゼルスでのAdobe MAXで吸収した内容はもちろん、日本のウェブ制作現場での15年の経験を総動員。

今までにさまざまなカンファレンスで発表しているので、発表テクニックの細かな技はふんだんに利用。ソフトウェアの操作実演（動画で事前に用意）や、登壇本人の実況ツイート、この日のために制作したデモコンテンツなど、創意工夫に取り組みました。

この日のためのオリジナルデモの開発は必要不可欠だった

オリジナルデモでは、CS3からCC2019までのすべてのアイコンを3次元のHSV色空間に可視化。製品のアイコンにどのような変遷があったのか、Adobeファンが楽しんでもらえるスペシャルコンテンツとして用意しました。

Creative Cloudの各ツールのアイコンをカラーホイールとして、ビジュアライズしました。

ツールの特性によって、色相別に分類されています。#AdobeMaxJapan #Threejs #WebGL #vuejs pic.twitter.com/ZwgyJDu7oL

— 池田 泰延 / Adobe MAX JAPAN登壇しました (@clockmaker) November 20, 2018

アイデアはCS3のときに発表されたカラーホイールです。鷹野さんの記事に残っていますね。もともとCSのアイコンはカラーホイールと元素記号に見立てて用意されたものの、時代が進むにつれてこの概念はAdobeの表にでることはなくなっていきました。今の時代に、敢えて起点となった考えで可視化すれば、見えてくるものがあるのではないかと期待して開発しました。

オリジナルデモを開発した理由。登壇中に述べた概念やテクニックは机上の空論ではないことを伝えるためです。こういったイベントでの発表において、登壇者の語る「理想論」は、「現場」ではマッチしないことも多いと常々思っていました。理想論やベストプラクティスは末端まで落とし込むことが大事だと考えているので、具現化したコンテンツが必要不可欠でした。

オリジナルデモの開発も、2007年頃のCS3からのデータを集める必要があり、調査は難航。もともとCS風のアイコンを作れる「Icon Generator」というデスクトップアプリを開発・公開していたことがあるほどのアイコンマニアなので、意地でもすべて揃えました。

幸いにも開発はスムーズに進行。3D表現に、最新のウェブのフロントエンドの技術を盛り込んでいます。Flashの時代を超えたHTML+JSの技術は開発効率面で恩恵をもたらしていますね。技術面の話は11月30日(金)のDIST.24で発表するのでお楽しみください。まだ残席に空きがあるのでお申し込みくださいませ。

インタラクションは不要ではないか

Flashが飾った華やかなウェブ表現の時代は過ちだったのか？ 起承転結の「転」では、テーマであるインタラクション自体を否定した話もしました。掘り下げると問題の本質はテクノロジーではないところにあることや、ツールを駆使する皆さんが目指すべきところまで言及しています。

発表資料やビデオは近いうちに公開できるでしょう。発表を見た方もそうでないかたも、ぜひご覧くださいませ。

結局、動画再生可能なオリジナルの軽量スライドショーを開発してしまったでござる。

結果的に容量は1GBから50MBまで圧縮できました。

HTMLベースで、Nuxt.js（Vue.jsのフレームワーク）を使って開発してます。 pic.twitter.com/ql1ZI0WOd4

— 池田 泰延 / Adobe MAX JAPAN登壇しました (@clockmaker) November 23, 2018

反省と謝辞

発表自体もスピーディーに進めてしまったり、資料の公開が遅れたり、ツイートしやすさビリティーが低いと至らない点もたくさんあり、反省は絶えません。仕事で忙しい状況のなか、発表準備に時間をかけすぎ迷惑をかけた弊社スタッフの協力無しには実現できなかったので、スタッフには感謝するばかりです。集客を意識したキャッチーな登壇タイトルもスタッフによる名案です。

最後に

願わくは、私が2009年に心を動かされたことを、さらに次の時代のクリエイターに受け継ぐ、そんな発表になったことを祈るばかりです。発表後に多くの人に声をかけてもらったり、ツイッターで反響があり嬉しい限りでした。

Togetter まとめ

ホッとする気持ちはあったものの、油断せず、今回の発表が業界に浸透するよう今後も取り組み続けなければなりません。

最後に。本当にAdobe MAX 2018、みなさんお疲れ様でした。来場者のみなさん、登壇者のみなさん、スポンサーのみなさん、主催のみなさん、ありがとうございました！

世界最大規模のクリエイティブカンファレンスAdobe MAX 2018。今年はロサンゼルスのコンベンションセンターで開催されます。私は毎年Adobe MAXに参加しているのですが、今年も現地で参加します。

Adobe MAXはAdobeの最新動向やクリエイティブ界隈の世界的なトレンドがわかるイベント。Adobe Creative Cloudの新製品を中心に楽しみにしている方も多いのではないでしょうか。そこで過去9回Adobe MAXに参加した経験をもとに今年の予想を立ててみました。

• Creative Cloud 2019が発表される。主力製品のPhotoshop、Illustrator、Lightroomを中心に新機能を発表するだろう。動画系ソフトのPremiereやAfter Effectsも基調講演で扱われると予想する
  • Photoshopのコンテンツに応じる塗りつぶしの進化は、すでにスニークとして先行公開されている（参照）
  • CC 2019は基調講演が始まる直前に提供開始となるだろう。時差の関係で日本のユーザーは世界でもいち早く利用できるはずだ
• Adobe XDはサードパーティによる拡張機能を大々的に発表をする。すでに公式ブログで言及されているように、名乗りを挙げている企業も多い。公式発表するならMAX以上のハレ舞台はないだろう
• 新アプリを2個発表するだろう。昨年はXD正式版とDimention正式版、新生Lightroomが発表されたが、すでに発表になっていた製品の水平展開だった。今年は考えもしなかったソフトが登場すると期待している
• 9月のAppleのイベントで言及された、Project Aeroは新アプリの候補の1つだ。確度は非常に高い。AR向けの3Dモデルを制作するツールである。昨年はAdobe DimentionがCreative Cloudに加わったが、アドビにとって3D（ARとVR）は力を入れたい分野に違いない
• モバイルアプリ（Lightroom CC）の強化もアピールするだろう。とくにカメラの深度を活かす技術はトレンドであるので、採用する可能性が高い。現行版でもベータ機能として提供されている（参照）
• モバイル向けのフル機能のPhotoshopが登場するかもしれない。以前野暮なメディアで噂になっていたものだ。今までもPhotoshop Touch、Photoshop Fix、Photoshop Mixなど幾度もPhotoshopの名前を冠した製品を発表してきたが、どれも成功していたとは言い難い。今度こそ成功してほしいものだ
• 残念ながらウェブ製品の基調講演での発表は期待できないだろう
  • Museは死に耐え、Bracketsは勢いをなくしてしまったが、旧マクロメディア製品のAnimate（旧Flash Professional）とDreamweaverの新機能は提供されると期待したい
  • Fireworksの開発を終了させSketchの台頭を許してしまった過去の誤った製品戦略は、今の賢明なアドビはするべきではない
• Adobe Senseiの進化が発表される。メディア受けもよく、この傾向は続くと考えられる
  • 昨年のMAXや今年のAdobeSympで発表されたクリエイティブグラフの進化版は製品に近づいているかもしれない

そして、Adobe MAXというと、超豪華なプレゼントがされることがあります。過去にはMicrosoft Surface Pro 2や、FUJIFILMのミラーレスカメラX-T10、Android端末＆Google TVがプレゼントだった年があります。ですが、アドビは売上を伸ばしているにもかかわらず、ここ最近はプレゼントをしなくなりました。残念ですが、今年もプレゼントは無いと予想します。来場者の多くは、プレゼントを入れるためのキャリーケースの隙間を用意しているので、遠慮なくプレゼントをしてほしいものです。

さて、この予測はどれだけ当たるでしょうか？ 正解は16日午前2時からの基調講演の生中継でご覧ください。また、私のツイッター（clockmaker）でもリアルタイムで報告します。ハッシュタグは「 #MAX野郎 」で確認するとよいでしょう。

今年も世界最大のクリエイティブの祭典Adobe MAX 2018の時期がやってきました。日本時間で2018年10月16日(火)〜18日(木)、米ロサンゼルスで開催されます。基調講演は10月16日(火)の午前2時からネットでのライブ中継があります。

今回も最新情報を発信するので、ぜひ私のTwitterアカウントをフォローしてみてください！

• 池田 泰延 | Twitter

そういえば、2009年のAdobe MAXから毎年参加しています。

注目セッション、日本人が登壇！

CSS Niteで有名な鷹野さんがAdobe MAXで登壇されます。

「THE ART OF EFFICIENCY: ILLUSTRATOR TIPS FROM A JAPANESE MASTER」というタイトル。「A JAPANESE MASTER」がこれほどふさわしい方はいないでしょう。最前列で受講しにいきます。

ウェブ業界において、海外で日本人が発表されることは珍しいですよね。Flash最盛期の2009年にはfladdictさんらFlashクリエイターのみなさんが発表していて、かっこいいと思ったものです。当時の発表の様子は次の記事「COOL JAPANESE FLASH – SIDE A | FITC Toronto 2009 | kazy.jp」に残っていますね。

スケジュール

私のスケジュールは次の通りです。XDのセッションを中心に受講します。

参加者をフォローしよう

Adobe MAXには日本からもユーザーが参加し、アドビの最新情報を日本に届けるのが毎年の恒例になっています。参加者の一覧はTwitterのリストにまとまっています。

また、Adobe Creative Stationの記事「#AdobeMAX いよいよ来週ロサンゼルスで開催！ MAX Insidersとして日本人クリエイターら10人が参加」では、MAXに参加する日本人クリエイターも紹介されています。

OS やファイル管理システムが作成する不可視ファイル（通称：カスファイル）を一括で削除するアプリケーション「カス削除くん」。8年ぶりに最新バージョン「0.5.0」をリリースしました。

macOS や Windows で作られる不可視ファイルは、OS をまたいでファイル交換をする場合にあって困るものではありませんが、別の OS の利用者から見たらあまり気持ちのよいものではないかと思います。「カス削除くん」はそういったカスファイルを一括で削除する便利アプリケーションです。

このアプリは2010年に公開してからウェブ制作会社を中心に広まり、「WindowsやMac OSが残す“カスファイル”を一掃する（第142回） | 日経 xTECH（クロステック）」や「不要になる不可視ファイルを一括削除「カス削除くん」 – 今日のお気に入り – 窓の杜」などで紹介されました。

機能紹介

不要ファイルの削除は、次の形式に対応しています。

• 「Thumbs.db」 (Windows のカスファイル)
• 「Desktop.ini」 (Windows のカスファイル)
• 「.DS_Strore」 (macOS のカスファイル)
• 「._」から始まるアップルダブルファイル (macOS のカスファイル ※Windowsのみで削除可能)
• 「.git」 (Gitのカスフォルダー)
• 「.gitignore」 (Gitのカスファイル)
• 「.svn」 (サブバージョンのカスフォルダー)
• 「.vscode」 (Visual Studio Code のカスフォルダー)
• 「.idea」 (IntelliJ IDEA のカスフォルダー)
• 「_notes」 (Adobe Dreamweaver のカスフォルダー)
• 「.BridgeSort」 (Adobe Bridge のカスファイル)
• 「.BridgeLabelsAndRatings」 (Adobe Bridge のカスファイル)

サブフォルダの検索にも対応しているので、深い階層まで一括で検索することができます。

ダウンロード

次のリンクから「カス削除くん」の最新版の AIR アプリのファイルをダウンロードできます。AIR アプリなので、Windows/macOSのいずれの OS でも利用可能です。フリーソフトとしてお使いいただけます。

• Download

上記のリンク先から、インストール時の注意点をご確認ください。

最新機能

2010年10月にリリースした0.4.2の後継バージョンとなります。今回リリースした0.5.0の最新機能は次の通り。

• 高解像度ディスプレイに対応
• 対応するファイル・フォルダーの種類を追加(Git、Node.js、WebStormやVS Code)
• リストのダブルクリックで該当フォルダーを開けるように機能追加
• アイコンを変更

内部的にはAdobe AIRやApache Flexの最新版を使ってビルドしなおしていますが、そのことについて特に操作感に変更はないと思います。ただ、以前利用していた方はアンインストールしてからインストールするようお願いします。そうしないと、インストールや起動に失敗します。。

ぜひご利用くださいませ。

さる平成30年6月23日(土)にサッポロクリエイティブキャンプ2018で「イマドキのウェブサイト制作の最前線」と題して発表してきました。

このとき発表した内容が、国内のフロントエンドエンジニア・HTMLコーダーの間でバズったので紹介します。

両者の意見は「jQueryはオワコンなのか – ウェブアプリ開発者とウェブサイト制作者の大きな溝 – Togetter」にまとめてますので、参照ください。

ウェブアプリ開発者は積極的に新しいものを取り入れていこう、流行らせていこうという思いのもと、過去の技術を過剰に批判します。また、ウェブアプリ開発者の分野はウェブ全体の需要のなか少数であるにもかかわらず、彼らの声が大きいため、あたかもウェブ制作全体を指して言及しているように見受けられます。

実際のところ、大多数のウェブサイトの用途を意図して発言していることは多くはありません。具体例を挙げましょう。

ウェブ制作者の考えるjQueryの用例をまとめました。 pic.twitter.com/LeWBDd3pNe

— 池田 泰延/ICS (@clockmaker) June 25, 2018

国内のウェブサイトでは、このような目的でjQueryが使われていることが多いでしょう。ブラウザ互換が改善したのでjQueryでなくとも昨今では標準APIで作ることもできますが、プラグイン文化のあるjQueryを使って効率的に制作したいと思うHTMLコーダーもいて不思議ではありません。

ウェブアプリ開発者からは「jQueryはReactやVueで置き換えるべき」という主張を耳にしますが、上記のような目的では異なっているように思います。具体的には画面下部にある「ページトップに戻る」ボタンは、クリックしたときにページの上部までアニメーションスクロールで戻る演出をします。これをReactで組むのは違和感がありませんか？

DOMのスクロール量をReactで管理して、ReqeustAnimationFrameでスムーズスクロールのアニメーションを数値管理して、ゴリゴリと生のDOM制御をするのでしょうか。彼らの求める仮想DOMとはそんなものなのでしょうか。

※念の為に言及しておくと、私は「ページトップに戻る」ボタンはUIとして不要なものだと考えており、当サイトや自社のサイトでは実装していません。私個人の信条ではなく、国内のウェブサイトで多いUI例として紹介したに過ぎないので、あしからず。

結論としては、ウェブサイト制作者にとってjQuery不要論は畑違いな方からの正義の押し付けであり、本質的には適材適所でいいのではないでしょうか。

思いつきで「目黒川さくら写真マップ」を開発しました。目黒川の桜並木を上流から河口まで写真で紹介するだけのウェブサイトです。個人的な趣味として目黒川をひたすら8年間も撮り続けていたので、写真の資産を活用すべく作りました。

中目黒ばかり注目されがちですが、目黒川の桜並木は他に見所がたくさんあります。そんな魅力を広めるべく写真を厳選してマッピングしました。

技術的には、フロントエンド的にはVue.jsやCSS Grid LayoutとGoogle Map APIを、バックエンドとしてGPSの情報整理にNode.jsを利用してます。オープンソースとしてコードを公開するので、改めて紹介します。

webpackの入門記事をICS MEDIAで書いているのですが、連載の全部を最新版のwebpack 4に更新しました。webpack 3から4へのアップデートで、webpack-cliが必要になったことと、mode引数で開発用/本番用に切り替えられるようになったことがポイントです。

•  導入編
  • 最新版で学ぶwebpack入門 – ICS MEDIA
• ECMAScript 2015+編
  • webpack + BabelでES2017環境の構築 – ICS MEDIA
  • webpack + TypeScriptの環境構築 – ICS MEDIA
  • BabelやTypeScriptのゼロコンフィグのビルド環境構築 – Qiita
• スタイルシート編
  • スタイルシート(CSSやSass)を取り込む方法- ICS MEDIA
  • Bootstrapをバンドルする方法 – ICS MEDIA
• その他
  • Gulpで始めるwebpack入門 – Qiita

ぜひ参照くださいませ！ 最近作った「目黒川さくら写真マップ」でもwebpack 4をガシガシ使っています。

今年一年の私のTwitterで人気を集めたツイートを紹介します。1万3千RTを超えるなど、今年はクリエイティブ系のツイートに注目が集まりました。

デザイン関連

今年一番注目されたツイートは、Adobe MAX JAPANのレポート。記事「テンの貂明朝フォントが誕生！鳥獣戯画の動物の明朝体で書体マニア狂喜乱舞？アドビシステムズの自信作！」では、「フォントマニア」として私が紹介されていました（笑

速報。Adobe、新しいフォント 「貂明朝」を発表。 #MAXJAPAN pic.twitter.com/g8fli4uFm7

— 池田 泰延 (@clockmaker) 2017年11月28日

今年の4月のフォントの日制定イベントに招待をうけ参加したのですが、字体の特徴を紹介したレポートツイートも伸びました。

源ノ明朝の特徴。このフォントの特徴は覚えておきたい！
・小塚明朝に比べて、横線は太く
・漢字は懐を閉めている#フォントの日 pic.twitter.com/8glLV1aoP2

— 池田 泰延 (@clockmaker) 2017年4月10日

フロントエンド界隈

Reactライセンス騒動の決着を報告。Reactユーザーの一代表としてツイート。

Reactユーザー歓喜。

特許条項付きBSDライセンスから、MITライセンスに変更すると、公式から発表がありました。 https://t.co/jPWWzUr141

— 池田 泰延 (@clockmaker) 2017年9月23日

また、いわゆるjQueryオワコンについて皮肉を込めコメント。

ここは特に同意
↓
jQueryをオワコンと言ってるのは(略)ごく一部の「酔狂な人々」であり、彼らの多くは件のwebサイト制作のことは一切視野に入れていないhttps://t.co/ZcaA0w9Dou

— 池田 泰延 (@clockmaker) 2017年5月30日

ES Modulesが最もシェアのあるブラウザに搭載されたことをツイート。

今日リリースされたChrome 61からECMAScript 2015のimport/export文がサポートされました。

これは今後のJavaScript開発を大きく変化させるパラダイムとなるでしょう。

簡単にですが、使い方を図版にまとめました。 pic.twitter.com/pNmrHZ1yJT

— 池田 泰延 (@clockmaker) 2017年9月6日

HTML5 Conferenceのレポートツイート。おそらくツイートの意図を間違えて解釈してRTした人もいるかも。。(ツイートの内容は間違っていないですが)

HTML5終了の提案のお知らせ。「実際HTML5終了しそう」とのことで興味深い。#html5j #html5j_h pic.twitter.com/CODdScljxO

— 池田 泰延 (@clockmaker) 2017年9月24日

みんな大好きなエディターの開発傾向の比較。今後のエディター選びの参考に。

オープンソース系エディターのコミット頻度の比較（2016年1月版）。

①MS – Visual Studio Code
②GitHub – Atom
③Adobe – Brackets

AtomもBracketsも開発が終息しつつあるのに、VSCodeは今も全力すぎる…。 pic.twitter.com/CErjFUK1Kc

— 池田 泰延 (@clockmaker) 2017年1月31日

クリエイティブ関連

仕事がら、Photoshopを起動しない日はありません。大好きなPhotoshopを最適化したくて調べたことをツイートしたら伸びました。870RT。

Photoshop CC 2017の起動を速くする方法。 pic.twitter.com/FzinkINGNG

— 池田 泰延 (@clockmaker) 2017年7月22日

弊社の @a24 の記事を紹介したツイート。

動きにちょっと工夫を入れるだけ。
アニメーションをいい感じに魅せる手法。

・横移動に、回転の動作を加える
・落ちて跳ねるときに、伸縮の動作を加える
・拡大時に、垂直と水平のタイミングをずらす

詳しくは → https://t.co/gSdoI4qWoK pic.twitter.com/xTo8pA0DKK

— 池田 泰延 (@clockmaker) 2017年1月18日

今年話題になった映画「夜は短し歩けよ乙女」の制作ワークフローにFlashが使われていたとのこと。残業ゼロにFlashが役立っているとのこと。

すごい、FlashがNHKで取り上げられてる･･･!!

世界も評価！ アニメ制作の“新手法”｜NHK NEWS WEB https://t.co/1c2q7EROsv

— 池田 泰延 (@clockmaker) 2017年6月28日

そんなFlashの今後について。PV集めのためにブログメディアが「Flash終了w」と報道してましたが、牽制の目的でツイート。約2300RT。

「Flash」と一言で報道するのは端折りすぎ。Flashテクノロジーのうち、ブラウザプラグインの「Flash Player」が終了予定となっただけです。

・Flash Player→2020年末に終了へ
・Adobe AIR→継続
・Adobe Animate CC→継続

— 池田 泰延 (@clockmaker) 2017年7月26日

写真関係

趣味の写真関係のツイートも注目を集めました。今年発売されたSONYのカメラのツイート。3500RT。

SONY α7RⅢの目玉機能「ピクセルシフトマルチ撮影」がやばい。

1億6960万画素分のデータなので解像力・ダイナミックレンジが桁外れ。夜景を撮影したのですが、建築物が隅々まで解像している。

等倍で見てください。ぶったまげますよ！https://t.co/ipY4nf5bmm#α7RIII #α7R3 #a7R3 #alpha7R3 pic.twitter.com/hyWsYry98X

— 池田 泰延 (@clockmaker) 2017年12月1日

このカメラは解像力がすごい。マクロ撮影をすると顕微鏡のように映ります。

1億6960万画素分のSONY α7RⅢのピクセルシフトを使って、iPhone Xをマクロ撮影してみたら凄かった…。

高密度(458dpi)のSuper Retinaディスプレイのドットの並び方がわかるレベル。

等倍写真はFlickrで公開してます https://t.co/uQvxyTkEsj (27MB)#α7RIII #α7R3 pic.twitter.com/W3ZeXrNGYF

— 池田 泰延 (@clockmaker) 2017年12月19日

iPhoneの深度マップのネタも。Photoshopを愛しているからこそ発見したテクニックですね。900RT。

Photoshop CC 2018ではiOS 11のポートレート写真(HEICファイル)を読み込めます。

面白いのはこのファイルには深度マップ(奥行き情報)が含まれること。

深度マップを使えば、Photoshopでボケを制御し放題。使い方をまとめました。 pic.twitter.com/9mQxa1Tz6B

— 池田 泰延 (@clockmaker) 2017年10月24日

ブラウザ関係

職業がら、普段使うツールのちょっとした変化にも敏感でした。カラーマネージメントは大事ですよね。

Chrome 61にアップデートしたらウェブの色(画像ではなくCSSカラー)が変わり違和感が。

具体的にはmacOSでChrome 60まではFirefoxと同じ鮮やかな色で、Chrome 61からはSafariと同じ彩度の低い色に。

sRGBに限定されたのかしら？ pic.twitter.com/uTkfkXJd6m

— 池田 泰延 (@clockmaker) 2017年9月6日

ウェブ制作者には影響の大きい出来事。

今年10月リリースのChrome 62から、非SSLのウェブページではinputタグは警告が表示されるようになる、とGoogleからアラートがきました。

type="passward"はともかくとして、type="text"も警告となるのは影響が大きいはず！ pic.twitter.com/CwKZAMWZmF

— 池田 泰延 (@clockmaker) 2017年8月18日

UIデザイナーの視点として、AMPの問題点を列挙。

Google検索からたどったAMPページの問題点をまとめました。

①URLが正規のものではない
②ヘッダーをクリックしてもページトップにスクロールしない
③スクロールの速度が標準と異なる
④ページ内検索ができない
⑤訪問済みリンクにならない pic.twitter.com/mIYjoPGx1x

— 池田 泰延 (@clockmaker) 2017年1月16日

最後に

普段Twitterばかりしているわけではないですよ！ それでは、良いお年を。

こんにちは、池田です。この度「Three.js入門サイト」を立ち上げました。

• Three.js入門サイト – ICS MEDIA

WebGLアドベントカレンダー2017の場をお借りして、Three.js入門サイトの特徴や経緯を紹介します。

Three.js入門サイトを作った理由

Three.jsは3DのWebコンテンツを作ることのできるJS・WebGLライブラリです。私がThree.jsを触ったのが7年前の2010年（参照記事「CanvasタグとJavaScriptで3Dのデモを作ってみました」）。当時は某大手会社の商用サイトでCanvasタグで3Dを動かすことに挑戦し、未来的な話題のサイトとしてピックアップされたこともありました。

そんなThree.jsはライブラリはAPIの改変を続けながら、開発が今も続いています。私が初めて触ったのはr17でしたが、現在はr88が最新版です。これだけ息の長いJSライブラリだと課題が生まれてきます。

• リビジョンが異なれば使い方が違う
• 記事を参考にしたけど同じ方法だと最新版では使えない

ググれば多くの記事がヒットしますが、数年前2012年の記事がヒットしたという方もいるでしょう。その情報は使えなく、ググり直しをしたという人も多いはずです。

今年の11月に工学院大学でWebGL(Three.js)を教える機会があったのですが、学生にとって検索しづらく調べるのが大変ではないか、という思いもありました。

そんな現状を解決すべく、安心して最新版で学べるサイトを実現したいと、Three.js入門サイトを立ち上げました。今後も最新版のリビジョンにあわせサイトを更新していく計画です。

リビジョンごとにアーカイブ化する入門サイト

兄弟サイト「CreateJS入門サイト」も最新版に追従する仕組みと、当時のバージョンをアーカイブする仕組みを設けています。数年後に、特定の古いバージョンで開発したいというシチュエーションもあるでしょう。そのときに「Three.js入門サイト」のr88のアーカイブをダウンロードすることもできます。

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

3D界隈の友人と話していたときに、「ググれば入門方法は見つかるけど、上級者の作例のようなものを作る道術が用意されていない」という議題になったことがあります。

「Three.js入門サイト」はリファレンスとしての一面は外せないものの、ICS MEDIAで制作してきたクリエイティブ系の記事もリライトして目次に含めています。上級者まではいきませんが、初級者から中級者への道路は用意できていると思いますので、ぜひ参照してみてください。

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

Three.js入門サイトはまだすべての情報を網羅できているわけではありません。これからも解説を増やしていき、育てていきたいと考えています。ぜひ、応援をよろしくおねがいします！

世界最大規模のクリエイティブカンファレンスAdobe MAX 2017。今年も参加してきました。

事前に予測していた基調講演の発表ですが、どれだけ当たったのでしょうか。振り替えってみたいと思います。

予測は通常文字、当たり外れは赤字太字で示しています。

• Creative Cloud 2018が発表される。主力製品のPhotoshop、Illustratorを中心に新機能を発表するだろう。動画系ソフトのPremiereやAfter Effectsも基調講演で扱われると予想する
  →ほぼ当たり（AEが基調講演で扱われなかった点だけ外れた）
• Adobe XDが新機能を追加し正式版になる。新機能は昨年のMAXで紹介された履歴機能やスタイルガイド機能の可能性が高い。無償のままであるかは最も関心の高いトピックだ
  →XDが正式版になったことは当たり。新機能や無償の継続は外れた
• モバイルアプリ（Lightroom MobileやCapture）も強化するだろう。特にiPad ProとiOS 11のマルチタスクとの連携を主張するかもしれない（過去にiPadとの連携を中心にしていたことがあった）
  →モバイルアプリの強化も当たり。ただし、iOSの連携強化は外れた
• 今年は新アプリを2個発表するだろう。一昨年はXD（当時はCommet）、昨年はFelixを含む2プロダクトの計画を発表している。XDの成功からこの流れは可能性が高いと考えている。
  →一応1つ当たった。Lightroom CCが新アプリとなる(従来の製品はLightroom Classicにリブランド)。しかし、期待していたのはリブランド/ハードフォークした製品ではなく、まったく新規のアプリの発表だった
• Project Felix等を製品化する。ただし大々的にするのではなくCharactor AnimaterのようにさりげなくCCに含めるだろう
  →FelixはDimensionという製品名でリリースしたので当たり。取り扱いの強弱は外れ。比較的大々的に扱われた。
• Adobe Stockやフォントの提携先追加を主張するだろう。日本では6月にAmana Imagesとの提携や、9月に和文フォントを追加したからだ。
  →これは完全に外れた

• 発表されたばかりのMicrosoftのSurface Book 2との連携。マイクロソフトがダイアモンドスポンサー（最上級のスポンサー）であることを考えると確度はそれなりに高い
  →微妙に外れた。Surface Studio 2との連携（Microsoft Dialのサポート）を主張していたが、Surface Book 2ではなかった
• VR/ARへの強化方針を発表する。毎年、世界的なトレンドの一つや二つは盛り込まれている。昨年だと機械学習として「Adobe Sensei」が発表された。
  →当たり。VRへの強化はPremiereのときに主張していた
• その「Adobe Sensei」が今年もあつかわれるかは気になることだ。なぜなら、この一年でAdobe MAX以外でAdobe Senseiを耳にしたことがないからだ。彼らは翌年に前年の発表を無視するような方向転換を見せることがある（例えばAdobe FlexやFlash Catalystなど）
  →完全に外れた。Adobe Senseiが今年の重要なポイントだった
• 10月上旬におきた銃撃事件への言及や黙祷は必ずするだろう
  →当たり。冒頭でシャンタヌ・ナラヤンCEOが募金も含めて言及した

そして、Adobe MAXのプレゼントに「Surface Book 2」「FUJIFILM X-E3」「GoPro FUSION」「Google Home」を予想していましたが、プレゼントは一切無しでした。受付時にパーカーだけもらいましたが…。

まとめ

全体的に当たったりかすったり、予想としては精度が良かった方ではないでしょうか。

しかし、Adobe Senseiの予想は外れたのは痛かったです。機械学習や人工知能はHype Cycleの盛り上がりぐらいにしか思っていなかったので、「Adobeもその流行に乗ってきた」という冷ややかな印象をAdobe MAX 2016の頃に持っていました。そのため、今年の内心の予想では「Adobe Senseiはなかったことにするかもしれない」と考えていたのです…。

Adobe MAX 2017の基調講演では真逆の結果。未来の姿に考えを改めるほどショックを受け（参照「Adobe Senseiを組み込んだ未来のPhotoshopとXDの姿 – ICS MEDIA」）、いまはAdobe Senseiの躍進を楽しみにしています。

今回のAdobe MAX 2017の内容はICS MEDIAで記事としてレポートしています。あわせてご覧くださいませ。

• 人工知能Adobe Senseiの画像処理が凄すぎてAdobe MAX 2017の会場は狂喜乱舞に
• 人工知能Adobe Senseiを組み込んだ未来のPhotoshopとXDが凄すぎる
• Adobeが3DデザインツールDimensionを正式発表
• Adobe XDの正式版が遂にリリース！