76
Photoshop Betaの「ジェネレーティブ塗りつぶし」が驚異的でヤバい。
さっそく試してみました。テキスト入力で合成画像をレイヤーとして生成でき、なんでもござれな画像編集ができます。
77
Qiitaが炎上中。
ユーザーの閲覧履歴の解析結果をプロフィールページに公開情報として掲載。
個人情報のシビアな時代に、挑戦的なことをしましたね。プライバシーポリシーに「あらかじめご本人の同意を得ないで、個人情報を第三者に提供しません」の条項があるのに。。
qiita.com/clockmaker
79
HTMLの仕様に関する大きな発表。
今までW3CとWHATWGが別々にHTMLの仕様書を出していたが、今後は単一バージョンを共同開発する方針に。
w3.org/blog/2019/05/w…
80
HTMLの<a>タグ。
見過ごしがちですが、ユーザービリティーを下げないために注意したい書き方。
81
macOSのUIの一部でWebViewが使われている。
コマンドで有効化すると、Webインスペクターを表示できるようになるという記事。
面白い。AppleのHTML/CSSの組み方を垣間見れたり、Reactも使われていることがわかります。
blog.jim-nielsen.com/2022/inspectin…
82
CSSアニメーションのコツ。
transformとleftだと滑らかさに違いが出る。
上側: transformX
下側: left
leftはピクセル単位でしか動けないので、カクカクしてしまう。transformは小数点での表示に対応しているので、カクカクしない。
83
「ユーザー or ユーザ」
「サーバー or サーバ」
Microsoftが長音ありに統一していて、行政から告示もでているので、長音ありが現代は一般的。
経緯や根拠となる記事がよくまとまっています。
zenn.dev/iwamasa/articl…
84
フロントエンドエンジニアのスキルは、モーダルの実装を見ると判断しやすい。
・HTML構造とCSS設計: z-index地獄の対策
・JSでのデータの受け渡しが合理的か
・アニメーションの気配りができるか
・アクセシビリティ: フォーカス制御など
・拡張性: 複数のモーダル表示が可能か twitter.com/clockmaker/sta…
85
完全版Psと比べると機能は圧倒的に不足。
今後の進化に期待ですね！
•調整レイヤーは読み込めるだけ
•スマートフィルタは読み込めるだけ
•フォントの選択肢がない
•カーニングできない
•チャンネルがない
•パスがない
•アートボードがない
•解像度を途中変更できない
•色空間はRGB 8bitだけ
86
Chrome 96の新規能「CSSの概要（英: CSS Overview）」を使うと、サイト内の色やフォントを一覧表示できます。
フォントサイズや行間のバラツキ、配色、コントラスト比、メディアクエリーの列挙ができます。
CSS指定の甘さがあらわになるので、CSSコードの品質向上に役立つでしょう（自戒
87
別バージョンで、長時間露光＆多重露光で撮影した写真も紹介します。
着陸時には同じ空の路を通っていることがわかります。
※下記ツイートは2016年のもの
twitter.com/clockmaker/sta…
88
これは面白いHTMLの挙動。
<a href="#top">は該当のid属性がなくてもページ先頭にスクロールするとのこと。
blog.hog.as/entry/2023/01/…
89
27年のInternet Explorerの歴史に幕。
ウェブ制作者を苦しめていたIE6の挙動を、懐かしく思い出します。
・PNGが透過せず
・float寄せでマージン2倍
・DOCTYPE宣言でpaddingの挙動が変わった
参考記事：
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA ics.media/entry/17960/
90
Chrome 113がついにリリース🎉
Webグラフィックスの夜明けともいえる超目玉機能「WebGPU」が搭載されています。
WebGPUは、WebGLより描画性能があり、汎用計算にも利用できます。長年待ち続けていた、ウェブの可能性を広げる待望の新機能です。
（担当 @9ballsyndrome ）
ics.media/entry/230426/
91
アニメーション制作に役立つJavaScriptライブラリの「GSAP」。入門記事をICS MEDIAで公開しました。
私はGSAPをFlashの旧TweenMaxから数えて15年ほど利用してきたのですが、愛着があり、気合いが入りすぎて前後編で3万字の内容となりました。
ぜひご覧くださいませ。
ics.media/entry/220822/
92
VS Codeの拡張機能「GitHub Copilot Labs」の「BRUSHES」機能が面白い。
・可読性の低いコードが読みやすくなる
・TypeScriptの型定義をつけてくれる
・コードのコメント文をつけてくれる
・formタグのアクセシビリティーの改善も
コードを選択し、ボタンを押すだけで簡単。
93
これは驚き。モリサワのBIZ UDゴシックとBIZ UD明朝フォントがGitHubで公開されています。
ライセンスはSIL Open Font License 1.1。
github.com/googlefonts/mo…
github.com/googlefonts/mo…
94
Creative Cloudの今年の大型アップデートがやってきました！ 新機能ページへのリンクまとめ。
Photoshop
helpx.adobe.com/jp/photoshop/u…
Illustrator
helpx.adobe.com/jp/illustrator…
Adobe XD
adobe.com/jp/products/xd…
Lightroom Classic
helpx.adobe.com/jp/lightroom-c…
After Effects
helpx.adobe.com/jp/after-effec…
95
新しく発表されたGitHub Copilot。コメントや関数名をたよりに、AIがコードを自動補完。
JavaScript, TypeScript, Python, Ruby, Go言語などに対応。VS Codeの拡張機能として提供。
公式サイトのデモではデータ通信やReact、単体テスト、d3.js(グラフ描画)のJSコードが補完されている。すごい。
96
マイクロソフトの日本語訳の記事より要約
・IEの後継はEdgeである
・IE11は2022年6月15日をもってサポートを終了
・EdgeのIEモードは2029年までサポート予定
・Windows 10 LTSC やWindows ServerのIE11は対象外
・Web 開発者の方は、この日を待ち望んでいたことと思います
blogs.windows.com/japan/2021/05/…
97
Microsoft謹製のAI支援のコード補完が良い。
VS Codeで、入力すると良さそうなコードをAIで推測して候補にしてくれる。
コード補完の★マークがAI支援によるもの。今までの補完より手に馴染む。
次の記事に詳細を追記しました→
VS Codeの拡張機能まとめ - ICS MEDIA
ics.media/entry/18544/
98
GitHub Copilotがスゴい。
タブキーだけで、気持ちいいぐらいコードを補完。
Three.jsで3Dモデルを表示するコードを、わずか1分で作れました。
このVS Codeの拡張機能は、JavaScriptライブラリを学び始めた方に大いに役立ちそう。
99
iPad版Photoshopの最初のリリースは「Apple Pencilやタッチでの作業に最適化した合成ツールとタッチツールを揃えました」とのこと。
Psの完全再現ではなく、ミニマムなスタートから。
編集したデータはクラウドへ保存される。
拡張子(?)はPSDC。従来のPSD書き出しも可能。
#photoshop #AdobeMAX
100
Safari 16.0が正式リリース。
ウェブ制作者視点で、気になる新機能をまとめました。
ウェブ制作会社ICS代表。筑波大学非常勤講師。HTML/CSSのフロントエンド技術が専門、TypeScript/WebGLによる3D表現やクリエイティブコーディングが得意。著書『JavaScriptコードレシピ集』など解説書12冊を執筆。ウェブ業界の最新情報と、現場で役立つ技を発信します。趣味でタイムラプス撮影。