ポケット・シンセサイザー
簡単なシンセサイザーアプリを作ります
このチュートリアルでは、いくつかの楽器を選んで演奏できるシンセサイザーアプリを作ります。Google Gemini 3 Proに相談してJavaScriptでTone.jsを使って音を出すように作りました。
ページの最後にあるダウンロードセクションからソースコードをダウンロードできます。
[プロジェクト]メニューから[新規プロジェクトを始める]を選択し、"PocketSythesizer"と名前を付けます。
このチュートリアルで学べること
- ウェブビューでJavaScriptを実行する方法
- “すべてのコンポーネント“ブロックを使ったループ処理の仕方
使用コンポーネント
ボタン、ラベル、スピナー、ウェブビュー、水平配置
使用ブロック
グローバル変数、リスト、テキスト、ディクショナリ、すべてのコンポーネントブロック
デザイン編集
Screen1のタイトルを"ポケット・シンセサイザー"に、画面の向きを横向きにします。
ページの最後にあるダウンロードセクションからダウンロードしたsound_engine.htmlをファイルをアップロードボタンをクリックしてアップロードします。
レイアウト パレットから 水平配置コンポーネント を2個ビューアーに追加し、水平に整列するは"中央揃え"に、横幅は"親要素に合わせる"に設定します。名前は水平配置1、水平配置2になります。水平配置2は高さも"親要素に合わせる"に設定します。
ユーザーインターフェース パレットからラベルとスピナーを水平配置1の中に追加します。名前はラベル1とスピナー1になります。ラベル1のテキストを"楽器："に、スピナー1の文字列から要素を"グランドピアノ,フルート,トランペット,ギター,チェロ"に設定します。
ユーザーインターフェース パレットから8個のボタンを水平配置2の中に追加します。高さは"親要素に合わせる"に、横幅は"10パーセント"に、ボタンの名前を順にド、レ、ミ、ファ、ソ、ラ、シ、ド2にします。
ユーザーインターフェース パレットからウェブビューを追加し、目に見えるのチェックを外します。
下図のようになります。
