こんにちは。開発担当のマットです。
このあいだ、友達を家に招いたら、楽器を持ってきました。
持ってきたものは、ディジュリドゥでした。

ディジュリドゥが母国のオーストラリアの先住民が使う吹奏楽器です。
子供の頃、叔父の家に一つあったのでちょっとだけ使ったことがありますが、
不慣れのディジュリドゥを吹いてみるとすぐに息が切れて、中々演奏できませんでした。

楽器を使って、音楽を作れたらカッコいいな〜と思ったら…

パソコンならできる？

実際の楽器なら演奏できる能力がない。
ただし、パソコンなら、ソフトウェアを使って、何かを作曲できそう！

と思ってみて、GarageBand という音楽制作ソフトを開いてみて、やってみたら・・・

なんじゃこれ・・・・完全に駄目ですね。真剣にやってみます。
GarageBand の使い方をなんとか勉強して、20分掛けてみたら、以下の曲を作れました。

なにこれ・・・ｗ

壁が見えてきました

まず、GarageBand の音楽作成ソフトの使い方を覚えないといけない壁が一つ。
つぎ、音楽論など、音楽を作成する時に必要な最低限の知識を覚えないといけないので、壁が二つ。
そして、元々センスがない自分がなんとか、センスを付けないといけない壁が三つもあります。

難しいですね。

今どきの壁を破るAI

音楽なら、AIが作れますよね〜

ネットで探してみたら、多数の音楽生成のAIを見つけましたけど、自分が求めているものを見つけられませんでした。ほとんどのサービスが決められているテーマや楽器の組み合わせを使って、音楽を作れる便利なサービスですが、僕は求めていたのはクリエイティビティ。

・「背景を和太鼓にする」
・「テンポをちょっと落とす」
・「途中でバイオリンのソロを入れる」

など・・・このようなことをお願いしたら、やってくれるAIが欲しかったです。

話し相手を求めるなら・・・ChatGPT

このような人間の言葉を理解してくれるのは ChatGPT でしょう。
ChatGPT で完全に思う通りの音楽を作ってみることにしました。

まず、簡単な MIDI ファイルを作ってくれるようお願いしてみたら、以下の返答をもらいました。

「よかった！簡単にできる！」と思ったら、ChatGPT が嘘をついていました。
ファイルに保存して、.midi の拡張子を付けても、使い物になりませんでした。
よくよく調べてみたら、参考となった別のプロジェクトを見つけました。

全く別の形式なものを ChatGPT に作ってもらって、
それを pythonのライブラリーで変換しなければならない。

python で変換…（大変になってきた）

かなり、大変なことになってしまいましたが、Google Colab で python のスクリプトをコピーして、
ChatGPT に、新たな曲をその形式で求めて実行してみます。

ChatGPT に「複数な楽器を同時に演奏する曲」をお願いしてみました。
何度も何度も繰り返してみました。時には、フォーマットが不正な回答だった。
時には、複数の楽器の演奏があったけど、同時演奏ではなかったなど。

何度も頑張ってやったら、やっと、一つの曲をなんとか作れました。

フルートはかなりの耳障りですが・・・・ChatGPT に音楽を作ってもらったことでなんとか嬉しい気持ちです。

AIの未来

ChatGPT は言語専用のAIですが、実は Google の MusicFX も見つかりました。
日本では使えないツールですが、オーストラリアからアクセスしてみたら、ログインができて、使うことができました。

このツールを使えば、言葉だけで音楽を生成することができます。

まずは、
1)「Caribbean relaxing music with snare drums」(スネアドラムを使ったカリブ海風のくつろげる音楽)

次は、
2) 「Opera with Electric Guitars」(エレキギターを使ったオペラ)

最後は、もともと作りたかったもの
3) 「Rock and Roll with a Didgeridoo」(ディジュリドゥを使ったロックンロール)

まとめ

MusicFXの結果がかなり優れていて、びっくりはしましたけど、その反面、簡単な MIDI ファイルを作るだけでも大苦労でした。

今後、AIが進化するに連れ、このようなツールが数多くなって、力強くなると思います。
いずれ、僕のような音楽の初心者でも、完全にいいものを作曲できる日を楽しみにしています。

Tweet

2023年12月、cssの:has()疑似クラスがすべてのブラウザでサポートされました。
:has()の使い方を改めて確認してみようと思います。

:has()とは

CSSの :has() とは、特定の子要素や子孫要素を持つ要素を選択するために使用されます。
これは「親要素が特定の条件を満たす子要素を持っている場合に、その親要素をスタイルする」ということです。
別の言い方をすると、「もし中に〇〇がある場合…」という条件を表します。

まずは基本的な使い方

下記の例は.contentsの子要素に「.contents-img」がある場合のみスタイルを適用することができます。
この例であれば、画像があれば背景をグレーにします。コンテンツ１は画像があるので背景はグレーになり、コンテンツ２は画像がないので変化はありません。

.contents:has(.contents-img) {
  background-color: #ddd;
}

See the Pen has_01 by naoto saito (@code_ns) on CodePen.

下記のように「.contents-img」のクラス名ではなくimgタグがある場合の時という指定もできます。

.contents:has(img) {
  background-color: #ddd;
}

See the Pen has_02 by naoto saito (@code_ns) on CodePen.

:hoverや:focusなどと組み合わせる

中の要素がhoverした時やinputにfocusした時にのみスタイルを適用することができます。
下記はボタンにhoverした時、inputにfocusした時のみ「.contents」のスタイルが変わります。

.contents:has( button:hover ) {
  box-shadow: 0px 2px 47px -14px #777777;
}

.contents:has( input:focus ) {
  outline: 2px solid #00f;
}

See the Pen has_04 by naoto saito (@code_ns) on CodePen.

:notとの組み合わせ

否定擬似クラスの「:not()」と組み合わせることができます。
下記の例は、画像がない場合背景がグレーになります。

.contents:not(:has(.contents-img)) {
  background-color: #ddd;
}

See the Pen has_01 by naoto saito (@code_ns) on CodePen.

直下セレクタとの組み合わせ

下記のように直下セレクタと組み合わせることができます。

.contents:has( > .contents-text ) {
  background-color: #ddd;
}

See the Pen has_06 by naoto saito (@code_ns) on CodePen.

独自データ属性との組み合わせ

下記のように独自データ属性と組み合わせることができます。

.contents:has( .contents-title[data-a="hoge"] ) {
  background-color: #ddd;
}

See the Pen has_06 by naoto saito (@code_ns) on CodePen.

いかがでしょうか？
cssの:has()疑似クラスの使い方を確認しました。意外と柔軟に色々なことと組み合わせができますね！
今までjsを使わないと選択できなかった親要素が、今回のhas()を使うことで対応できるので今後どんどん利用しようと思います。

Tweet