単なるアニメーションにとどまらない！条件分岐やイベント待機など「Tween24.js」の新機能 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。筆者が開発を続けており、今回の2021年8月アップデートでは条件分岐やイベント待機など、アニメーション作成をより柔軟にするための機能追加がメインとなっています。 基本的な使い方や導入方法は、記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを条件分岐させるifCase() 新機能：イベントを受け取るまで待機するwaitEvent(), waitEventAndFunc() 新機能：途中で次のトゥイーンへ移行するjump() 新機能：親トゥイーンを進める

Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +

CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ

CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか？ この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは？ CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時（2010年代初頭）最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I

ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン

フロントエンド界隈に限らず、ITの世界は誰かが作った優れたライブラリーやプログラムによって支えられている側面があります。それらを利用することで車輪の再発明を防いだり、より低コストで開発が進められたりします。一方で何気なく使っているそれらにもライセンスがあります。思わぬトラブルの前に、ライセンスについて今一度振り返っておきましょう。 ※本記事では一般的な考え方にもとづいた解説をしています。個別の事案については専門家にご相談ください。 著作権とライセンス 人が創作したものについては著作権が発生します。絵や小説など芸術的な分野だけでなく、ソースコードやプログラムにも当然ながら著作権は発生します。著作者の許諾なく、勝手にプログラムをコピーして使うことは著作権侵害の恐れがあります。著作者による「これこれの条件のもとに使っていいよ」という許諾にあたるものがライセンスです。 つまり利用者はライセンスに定

補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計されることがあります。 標準ではフォントサイズに依存しているため手動での変更はできませんが、一部のフォントでは変更が可能です。先ほどのデモにおいても、オプティカルサイズに応じて文字バランスが微妙に変更されることが確認できますね。 Roboto-Flexフォントを例に バリアブルフォントはまだそれほど普及していないこともあり、入手元がそれほど多くありません。今回は、オープンフォントライセンスで配布されているRoboto-Flexフォントを使用します。 GitHub - Roboto-Flex 記

ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"

動画を作るときに、テロップや字幕をつけることがあると思います。音声に視覚情報を加えることで情報の伝達力を強くしたり緩急をつけたり、また電車の中や音が出せない場所での視聴や、難聴の方への配慮にもなります。 しかし、音声を聞いてテキスト入力を何度も繰り返して・・・とても時間がかかりますし、楽しい作業でもありません。そこで今回は、音声の文字起こしソフトを使って、さくっとテロップや字幕作成の方法を紹介します。 こちらが作成する動画イメージです。この手法はFinal Cut Proでも適用できますが、今回はAdobe Premiere Pro向けに説明します。 Vrewを使って文字起こし Vrewは人工知能を活用した動画編集プログラムです。一般的なタイムラインを用いた動画編集とは異なり、文字起こしされた音声を元に、文章を編集するように動画を作成できるのが特徴です。ユーザー登録をすれば無料で利用でき、

JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 配列の非破壊の望まれる場面が増えているが、元の配列を破壊操作している filter()やevery()など配列のメソッドで書けるところを、forEach()メソッドやfor ... of文を使ってコードを記載し、冗長になっている 記述しても効果のないArray.from()を使用している コード的には問題なく、アプリケーションは意図的に動作しているかもしれません。しかし、冗長な記述は可読性が低下し、予期せぬバグを誘発する可能性があるでしょう。 本記事では、配列操作でよく見かける冗長な記述を、簡潔な記述で置き換える方法について解説します。 本記事で紹介するJavaScriptの配列操作のチートシートを用意したので、まとめて読みた