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