101
Photoshop 2022でワンクリックで作った合成写真。
右下の写真がオリジナル。
#Photoshop
102
Photoshop 2022のもう一つの新機能。
↓
twitter.com/clockmaker/sta…
103
エンジニア界隈では、GitHubで毎日コミットすることを「草を生やす」と表現します。
Photoshopは本当に草を生やしてきましたね。
（1枚目が合成、2枚目がオリジナル)
104
レイヤーパネルの「すべてのオブジェクトをマスク」で、レイヤーマスクを一発で作ってくれます。
#Photoshop
105
Adobeの画像解析の技術がヤバすぎる。
奥行きを解析し、イラストの配置ができる。
腕や足の骨格もSenseiが認識し、実写をイラストに置き換えできる。
説明の意味がわからないと思うのですが、動画観てみて。この通りなので･･･！
#AdobeMAX #AdobeMAX2021
106
Adobeの新技術「Artful Frames」。
Adobe Senseiが絵画を分析。
実写映像を絵画風にできる。
新しいアニメ映像のジャンルが生まれてきそうな、次世代の技術。
107
異なるポーズの合成写真を作り出すAdobeの新技術「Strike A Pose」。
参照画像を指定したら、その人物と同じ格好の合成写真が作られる。後ろ向きの写真も作れる。えっ！
#AdobeMAX
108
新技術「Make It Pop」。
画像から、コンテンツをAdobe Senseiが理解し、ベクターかできる画像技術。
人物の足や腕、スケートボードをSenseiが理解しているので、良い感じにシェイプ化できる。
#AdobeMAX #AdobeMAX2021
109
Chrome 96の新規能「CSSの概要（英: CSS Overview）」を使うと、サイト内の色やフォントを一覧表示できます。
フォントサイズや行間のバラツキ、配色、コントラスト比、メディアクエリーの列挙ができます。
CSS指定の甘さがあらわになるので、CSSコードの品質向上に役立つでしょう（自戒
110
GoogleのライブラリBudouX。
改行位置の最適化のヒントが得られるツール。
HTMLで日本語の動的文字列に適用したら、良い感じの場所で改行されました。JavaScriptバンドルだと12KBで省容量です。
112
ウェブサイトに3Dエフェクトをお手軽に追加できるJSライブラリ「Vanta.js」。
鳥の群れや幾何学的模様などを、テンプレートのコードで導入でき、カスタマイズできる。
WebGLで動作（Three.jsとp5.jsのラッパー）。
vantajs.com
113
Googleフォントを使うと犯罪になる、という事例紹介。
ドイツのミュンヘン地方裁判所の判決より。
ウェブ制作者としては、EU圏の出来事も認識しておきたい。
qiita.com/rana_kualu/ite…
114
朗報！ ついにPhotoshopでWebP画像形式で保存できるようになりました。
115
macOSのUIの一部でWebViewが使われている。
コマンドで有効化すると、Webインスペクターを表示できるようになるという記事。
面白い。AppleのHTML/CSSの組み方を垣間見れたり、Reactも使われていることがわかります。
blog.jim-nielsen.com/2022/inspectin…
116
【祝】iOS 15.4がリリースされ、ついにSafariも<img>タグのloading="lazy"をサポートしました。
117
これは驚き。モリサワのBIZ UDゴシックとBIZ UD明朝フォントがGitHubで公開されています。
ライセンスはSIL Open Font License 1.1。
github.com/googlefonts/mo…
github.com/googlefonts/mo…
118
「Firefox」を推奨ブラウザとしないウェブサービスが増えているそうです。
・PayPay銀行
・minnne (GMO)
・J-STAGE (国立研究開発法人 科学技術振興機構)
・Abema TV
・NHKプラス
j-cast.com/trend/2022/03/…
119
GitHub Copilot LabsというヤバいVS Codeの拡張機能が登場。
コードの処理内容をわかりやすく教えてくれるし、他のプログラミング言語への変換もしてくれる。
手元でTypeScriptのコードを試したら、「和暦変換するコード」であることを説明してくれて、PythonやPHP、Javaへの翻訳もしてくれました。
120
Adobe Fontsにスゴイ数の日本語フォントが追加されている！
4月10日の #フォントの日 を前に大量入荷でしょうか。
fonts.adobe.com/fonts?browse_m…
121
エディター「ATOM」が開発終了。
開発元のGitHubが公式にアナウンスしました。
・2022年12月15日にプロジェクトリポジトリをアーカイブ化
・ATOM廃止は、GitHub Codespacesの強化に集中するため
github.blog/2022-06-08-sun…
122
これは良資料。エンジニアにとって文章の書き方の参考になります。
文章のBefore / Afterの事例がたくさん載っていて、勉強になります。
テクニカルライティングの基本 - Speaker Deck speakerdeck.com/naohiro_nakata…
123
27年のInternet Explorerの歴史に幕。
ウェブ制作者を苦しめていたIE6の挙動を、懐かしく思い出します。
・PNGが透過せず
・float寄せでマージン2倍
・DOCTYPE宣言でpaddingの挙動が変わった
参考記事：
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA ics.media/entry/17960/
125
アニメーション制作に役立つJavaScriptライブラリの「GSAP」。入門記事をICS MEDIAで公開しました。
私はGSAPをFlashの旧TweenMaxから数えて15年ほど利用してきたのですが、愛着があり、気合いが入りすぎて前後編で3万字の内容となりました。
ぜひご覧くださいませ。
ics.media/entry/220822/
ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。