【GAS】演奏アプリ :〔解説編　Vol.3〕音階をJQueryで読み取ってTone.jsで発音させる

(アイキャッチ画像：Photo by Omid Armin on Unsplash ）

GooleAppsScriptでの簡単な演奏アプリに関する解説記事を追加しました。

【09_演奏アプリ】簡単コード鍵盤〔解説編　Vol.3〕音階をJQueryで読み取ってTone.jsで発音させる｜GoogleスプレッドシートでWEBアプリを作ろう

アプリそのものの紹介は以下の記事になります。

【09_演奏アプリ】オープンソースのライブラリ「Tone.js」を使って「簡単コード鍵盤」を作ろう！｜GoogleスプレッドシートでWEBアプリを作ろう

テーブル形式で書いておくと、色々な用途に利用できる

今回ご紹介の「かんたんシンセサイザー」アプリは、つまるところテーブルに鍵盤、音名、音階名を表しただけのものです。

が、これにクリックするためのリンク文字を配し、クリックした場所の音階名を鳴らせる様にすると、シンセサイザーにもなるという訳です。

Googleスプレッドシートから値を読み取ってWEBサイト上でテーブルとして表示させる基本的な仕組みはこちらで記事にしております。

基本を学ぶ｜GoogleスプレッドシートでWEBアプリを作ろう

今回は、クリックした行にある音階名を取得して、これをTone.jsで発音させることで、シンセサイザー風にしています。

WEBサイトの装飾につかうスタイルシートで、便利なセレクタをご紹介

これはご存じの方も多いかもしれませんが、スタイルシートにおけるセレクタには、～の場合は、という条件指定があるものがあります。動的に反応するので表示／非表示を切り替える場合などで重宝します。

今回は、checked　と　＋　という２つの条件指定用のセレクタをご紹介しています。

checkedは、ラジオボタンやチェックボックスでチェックがある場合、という指定です。　ラジオボタンそのものの装飾を、チェックの有無で変えたい場合に使います。

＋　は　～の場合　という漠然として条件指定で、後に続く記述の内容を、＋の前にある条件に合致した場合だけ当てはめます。

そして、checked　＋　と続けて書くと、チェックがある場合だけ～のスタイルにする、という、動的な変化がスタイル指定だけでできる様になります。

解説記事はこれで終わり、次の記事ではコードをご紹介する予定です。