「効果音ラボ」から学ぶ、設定ファイル入門 (プログラミング初心者向け)

2023年5月11日 19:16

この記事で分かること

そもそも、ポン出しとは何か
設定ファイルの概要
設定ファイルの解読方法

プログラミング初心者の方に、「設定ファイル」ってこんな風になってるんだ！ということをちょっとでもイメージしてもらうための記事です。
多少難しい話も含まれているので、全部を理解する必要はないです。
逆に言えば、あくまでイメージを理解してもらうだけなので、実際にどういったコードを使うのか、とかは一切解説していません。あしからず。

効果音ラボに関する事前知識

効果音ラボとは？

皆さんおなじみ効果音ラボ。
使用用途はプレゼンテーション、動画制作、生配信まで幅広く、クレジット表記も不要で使いやすい効果音を2000種類以上全て無料で使うことができるありえないほど便利なサイトです。

効果音ラボ - フリー、商用無料、報告不用の効果音素材をダウンロード (soundeffect-lab.info)

ポン出しとは？

もう知ってるよ！って方は読み飛ばしてください。

私は最近になって、効果音ラボには「ポン出し」という機能が追加されていたことを知りました。

この機能は何かというと、企画などで効果音をリアルタイムで鳴らしたいという時に、使いたい効果音をまとめてワンタッチで鳴らせるようにした機能です。

例えば、クイズ大会なんかを想像してみましょう。出題、正解、不正解など、様々な効果音をリアルタイムで流したいですよね。そういった「使いたい効果音」をまとめて好きな時にワンタッチで流せるようにしたアプリのことを「ポン出しアプリ」と呼ぶそうです。効果音ラボ特有の言葉ではなく、一般的にそう呼ばれているそうですよ。

スピーカー：ジャジャン！
A：問題。日本で一番高い山はどこ？
B：阿蘇山！
スピーカー：ぶっぶー
C ：富士山！
スピーカー：ピンポンピンポン！

…みたいな、ね？

効果音ラボのポン出しアプリは、特別にアプリをインストールしなくても、ブラウザ上で設定・利用することが可能です。
設定できる効果音は12個までで、効果音ラボ内の音源を自由な組み合わせで設定できます。(オリジナル音源は設定できません)

具体的には以下の項目が自由に変更できます。

各ボタンに割り当てる音源
それぞれの音源の音量
ボタンの色
ショートカットキー (数字とアルファベットのみ)

※　OBSユーザーであれば、ブラウザを立ち上げなくてもOBS上で音を鳴らすこともできるみたいです。 (OBSでブラウザを使わずに効果音をポン出しする方法 - YouTube)

ポン出しの「設定ファイル」とは？

さて、いよいよ本題の設定ファイルの説明です。
効果音ラボの「ポン出し」で行った設定を、他の端末にもコピーしたい場合があります。例えば、「友達に同じ設定を渡したい」「スマホで行った設定をPCにも反映したい」などといった場合です。
そんな時に役立つのが、インポート/エクスポートの機能です。

上図の「エクスポートファイルをダウンロード」という文字をクリックすると、その端末で行った設定を記録したファイルを入手することができます。ここで得たファイルをLINEとかに送信して、別の端末で保存して効果音ラボのサイトにインポートすれば、同じ設定を引き継げるってわけですね！便利！

…つまりですよ？
設定ファイル「import.txt」には、サイトで設定した以下全ての情報が書き込まれている、ということです。

各ボタンに割り当てる音源
それぞれの音源の音量
ボタンの色
ショートカットキー (数字とアルファベットのみ)

どうやって書き込まれているか、気になりませんか！？！？！？

…え？ならないって？
ま、まぁ、気にならない人も大丈夫です。出来る限り簡単に説明するつもりですし、折角この記事を開いてもらったのですから、「設定ファイル」という概念のイメージだけでも掴んでいってください。多分何かの役には立ちます。…えぇ、何かの。

ファイルの構造を調べる

まずはメモ帳で開く。

ダウンロードされたファイルは「import.txt」という名前です。ファイル拡張子 (ピリオドよりも後) が「txt」ということは、「text = テキスト = 文字で書かれたもの」ということです。
txtは文字で書かれただけの、最も基本となる拡張子なので、スマホ・PCを問わずどんな端末でも簡単に開くことができます。WindowsのPCなら、ダブルクリックするだけで「メモ帳」アプリが勝手に起動しますね。
ということで早速、ダウンロードしたファイルを開いてみます。

これを⇩に貼り付けると、こうなります。

a%2C%E5%92%8C%E5%A4%AA%E9%BC%93%E3%81%A7%E3%83%89%E3%83%B3%3Asound%2Fanime%2Fmp3%2Fdrum-japanese1%3A49%3Ac5d1f5%3A1%2C%E5%92%8C%E5%A4%AA%E9%BC%93%E3%81%A7%E3%83%89%E3%83%89%E3%83%B3%3Asound%2Fanime%2Fmp3%2Fdrum-japanese2%3A50%3Acad6cc%3A1%2C%E3%83%81%E3%83%BC%E3%83%B31%3Asound%2Fanime%2Fmp3%2Ftin1%3A51%3Acfd87d%3A1%2C%E6%AD%93%E5%A3%B0%E3%81%A8%E6%8B%8D%E6%89%8B1%3Asound%2Fvoice%2Fmp3%2Fpeople%2Fpeople-performance-cheer1%3A81%3Afcef7f%3A1%2C%E3%83%A9%E3%83%83%E3%83%91%E3%81%AE%E3%83%95%E3%82%A1%E3%83%B3%E3%83%95%E3%82%A1%E3%83%BC%E3%83%AC%3Asound%2Fanime%2Fmp3%2Ftrumpet1%3A87%3Aace08d%3A1%2C%E3%83%89%E3%83%B3%E3%83%89%E3%83%B3%E3%83%91%E3%83%95%E3%83%91%E3%83%95%3Asound%2Fanime%2Fmp3%2Fdondonpafupafu1%3A69%3Abcdfe5%3A1%2C%E3%83%84%E3%83%83%E3%82%B3%E3%83%9F%E3%82%92%E5%85%A5%E3%82%8C%E3%82%8B%3Asound%2Fanime%2Fmp3%2Ffeed1%3A65%3Af7e9bc%3A1%2C%E3%81%BF%E3%82%93%E3%81%AA%E3%81%A7%E5%A4%A7%E7%AC%91%E3%81%841%3Asound%2Fvoice%2Fmp3%2Fpeople%2Fpeople-studio-laugh-large1%3A83%3Af5dddb%3A1%2C%E8%87%AA%E4%B8%BB%E8%A6%8F%E5%88%B6%E3%83%94%E3%83%BC%E9%9F%B3%3Asound%2Fanime%2Fmp3%2Fself-regulation1%3A68%3Afac49e%3A1%2C%E3%82%AF%E3%82%A4%E3%82%BA%E5%87%BA%E9%A1%8C1%3Asound%2Fanime%2Fmp3%2Fquestion1%3A90%3Af1d68f%3A1%2C%E3%82%AF%E3%82%A4%E3%82%BA%E6%AD%A3%E8%A7%A31%3Asound%2Fanime%2Fmp3%2Fcorrect1%3A88%3A98d8ca%3A1%2C%E3%82%AF%E3%82%A4%E3%82%BA%E4%B8%8D%E6%AD%A3%E8%A7%A31%3Asound%2Fanime%2Fmp3%2Fincorrect1%3A67%3Aefbccf%3A1

うわ、めちゃめちゃ長い。プログラミングに馴染みのない人にとっては暗号でしかなく、とても意味のあるものには思えないですよね。
安心してください。私にもこの時点ではとても意味が分かるものではありません。

ちなみに、こういう設定ファイルは拡張子が「ini」「config」「json」などなど色々な例がありますけど、全部メモ帳で開けます。というより、メモ帳で開けないファイルはありません！まあ、音楽ファイルや動画ファイルをメモ帳で開いてもほとんど解読出来ない暗号ですけどね。だってメモ帳は「テキストを読み書きするもの」であって、音楽や動画のような波形を読み込むためのものではないですから。

※Macをお使いの方はメモ帳を「テキストエディット」に置き換えて読んでください。

URLエンコードされているので、デコードする

よくみると|%《パーセント》がめちゃめちゃ多いですよね。これはURLに日本語を含む時に使われる「URLエンコード」が使われている可能性が高いです。
「URLエンコード」というのは、「URLに使えない文字」を「%と英数字の組み合わせ」に置き換えることです。例えば、「あ」は「%E3%81%82」と表現されます。URLには半角の決まった文字しか使えないので、こういう特別なことをする必要があるのです。

(え？設定ファイルはURLじゃないのになんでURLエンコードするのかって？多分簡単に改変されたくないからじゃないですかね？~~知らんけど~~)

便利なことに、デコード(「%E3%81%82」を「あ」に直すこと)　をしてくれるサイトがあります。
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimite

a,和太鼓でドン:sound/anime/mp3/drum-japanese1:49:c5d1f5:1,和太鼓でドドン:sound/anime/mp3/drum-japanese2:50:cad6cc:1,チーン1:sound/anime/mp3/tin1:51:cfd87d:1,歓声と拍手1:sound/voice/mp3/people/people-performance-cheer1:81:fcef7f:1,ラッパのファンファーレ:sound/anime/mp3/trumpet1:87:ace08d:1,ドンドンパフパフ:sound/anime/mp3/dondonpafupafu1:69:bcdfe5:1,ツッコミを入れる:sound/anime/mp3/feed1:65:f7e9bc:1,みんなで大笑い1:sound/voice/mp3/people/people-studio-laugh-large1:83:f5dddb:1,自主規制ピー音:sound/anime/mp3/self-regulation1:68:fac49e:1,クイズ出題1:sound/anime/mp3/question1:90:f1d68f:1,クイズ正解1:sound/anime/mp3/correct1:88:98d8ca:1,クイズ不正解1:sound/anime/mp3/incorrect1:67:efbccf:1

日本語が見えてきました！これは設定された効果音の名前ですね。
でも、それよりも後ろの英単語っぽいものと数字の羅列はなんでしょう？うーん、まだ読みにくいですね…。

データフォーマットを考える

プログラミングに馴染みの無い方には少し小難しい話になるのですが、設定ファイルを作る時、プログラマーはまず「データフォーマット」を考えます。データフォーマットとは、「どこに何が書かれているのか」を明確に区別できるように目印をつけましょう、というルールです。

例えば、
太郎の名字は山田花子の名字は田中ジョニーの名字はマイケル
よりも
太郎の名字：山田
花子の名字：田中
ジョニーの名字：マイケル
の方が読みやすいですよね？
データフォーマットを使ってデータ同士を区切ることで、データが読みやすくなるのです。

代表的なデータフォーマットの例として、「CSVシーエスブイ」「XMLエックスエムエル」「JSONジェイソン」などがあります。それぞれについての詳しい解説は今回割愛しますが、意識してほしいのは以下の点です。

CSV：データ同士を , カンマや「改行」で区切る
XML：<Tag>開始タグと</Tag>終了タグでデータを囲う
JSON： [ ] 角括弧や { } 波括弧でデータを囲う

詳しく知りたい方は【3分でわかる】CSV・XML・JSONとは？【データ形式・プログラミング】 | アントレプレナー (kosuke-space.com)

どれも特殊な記号が使われているようですね。
しかし今回ダウンロードされた「import.txt」には、カンマ以外、改行もタグも角括弧も波括弧も何もありません。しかしカンマで区切っただけでは、1つ1つが「和太鼓でドン:sound/anime/mp3/drum-japanese1:49:c5d1f5:1」というように、色々な情報が繋がってしまっていてとても読めたものではありません。
何が言いたいのかというと、これは独自のデータフォーマットである可能性が高いということです。

カンマは確かに区切り記号として使われているようです。
カンマの後ろには必ず効果音の名前が来ています。おそらくは効果音の名前の後ろに来ているアルファベット達が「音量」「色」「ショートカットキー」のどれかなのでしょう。しかしそれらを区切るための目印が必要ですよね。「和太鼓でドン:sound/anime/mp3/drum-japanese1:49:c5d1f5:1」の中で区切りの目印になりそうなもの・・・

そう、：コロンがいっぱいありますね。
これは怪しい。きっと区切り記号です。

でも、そうなるとなんで区切り記号が2種類あるんでしょう？
そういえば代表的なデータフォーマットの中にも、区切り記号が2種類あるものがありましたよね。そうです。CSVです。CSVはデータ同士を「 , カンマ」や「改行」で区切るデータフォーマットでしたね。

CSVの予備知識

同じ区切り記号を2種類使ったデータフォーマット同士なのですから、CSVにも置き換えることが出来るはずです。

実際にやってみる前に、CSVについてちょっとだけ予習しておきましょう。もう知ってるよ！って方は読み飛ばしてください。
CSVは「 , カンマ」で列を、「改行」で行を区切ることで、表(テーブル)を表現できるデータフォーマットです。
以下の例を見てみましょう。

Aさん,25歳,170cm
Bさん,30歳,165cm
Cさん,28歳,159cm
Dさん,18歳,168cm

各行は、ある「人」についての特徴を「 , カンマ」で区切って記述されています。1列目は名前、2列目は年齢、3列目は身長、といった具合です。
行の数は変わることがあっても、列の数は一定であることが多いです。そうでないと、表がぐちゃぐちゃになってしまいますからね。

CSVはExcelやGoogle Spread Sheetなどでも開くことができます。

データフォーマットをCSVに変換する

CSVについて理解できたところで、早速やってみましょう。

「import.txt」には「 , カンマ」がボタンの数だけあって、その中に「：コロン」が4つずつあります。(最初のaは無視しておきましょう)
なので、
「 , カンマ」を「改行」に
「：コロン」を「 , カンマ」に、　置き換えてみます。

(よく分からなくてもこのまま読み進めて大丈夫です。)
(置き換えは Ctrl + H が便利です。)

少なくとも最初の頃よりはだいぶ読みやすくなりましたね。これを「import改変.csv」という名前で保存します。

「名前を付けて保存」の画面。ファイル名の最後は.csv、文字コードはANSIにします。

保存したファイルをExcelで開きます。
すると…

ああ！なんて見やすいのでしょう！
縦が13行、横が5列のキレイな表になりました！！

CSVは「 , カンマ」で列を、「改行」で行を区切るデータフォーマットでしたが、
import.txtは「 , カンマ」で行を、「：コロン」で列を区切るデータフォーマットだったと言えますね。(置き換えた理由については私にはよく分かりませんでした。そういうマイナーなデータフォーマットがあるのかもしれません。~~知らんけど~~)

区切り方が分かれば、後はそれぞれのデータが何を意味しているか解析するだけです。

ファイルの中身を解析する

ここからは、先程のExcelの画像と実際の設定画面を見比べながら考えていきましょう。

1行目のaはやはりよく分からないので無視するとして…

2～13行目 (縦) が12個のボタンに対応していて、
A列は「音源名」、B～E列 (横) が「音量」「色」「ショートカットキー」のどれかに対応しているということは容易に想像ができます。(え？1列余る？)

じゃあB列、C列、D列、E列がそれぞれ何か調べていきましょう。
順番にいきますよ。

◆B列

B2セルは「sound/anime/mp3/drum-japanese1」…
B3セルは「sound/anime/mp3/drum-japanese2」…
スラッシュで区切られているということは、URLの一部に見えますね。
そして大事なのは一番最後。「drum-japanese」って、和訳すると「和ドラム」つまり「和太鼓」じゃないですか？？？
A列と一緒…？？？

「https://soundeffect-lab.info/」が効果音ラボのトップページのURLですので、これとつなげて、
「https://soundeffect-lab.info/sound/anime/mp3/drum-japanese1」を開いてみたいと思います。~~分かっている人からすれば「拡張子は？」ってなるところだと思いますが気にしないでください~~

あら。404エラー。このURLは存在しないんですかね？
めげずにURLを変えてもう一度挑戦してみます。

「https://soundeffect-lab.info/sound/anime/」は開けました。
「https://soundeffect-lab.info/sound/anime/mp3」は開こうとすると、403エラーになります。存在はするけど、アクセス権が無いってやつです。

さて…ホームページの構造を知らない方には何が何やら分からなくなってきたと思うので、そろそろネタバラシをしましょう。
実は、B列は「音源のURL」を指しています。

URLはインターネット上の住所。つまりA列に記載されている名前の音源が「実際にどこにあるのか」を知る必要があるのです。
「https://soundeffect-lab.info/sound/anime/mp3」はサイトではなく、mp3ファイル (音声ファイルの拡張子) を保管しておくためのフォルダのような場所で、サイトを制御しているプログラムを通さないとアクセスできません。だから私達がそのURLにアクセスしても403エラーや404エラーになるのです。

参考記事：URLとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 (i-3-i.info)

◆C列

B列が「音量」「色」「ショートカットキー」のどれでも無かったので、残りは絶対にこれら3つのどれかですね。
C列はどれも2桁の整数です。一体どれなんでしょうか…？
皆さんも考えてみてください。

…あ！2桁の整数といえば、音量の割合も49%とか50%とか表せそうじゃないですか？…いやいや、待ってください。音量は全てMAX。パーセントで表すにしても、全て同じ数字じゃないとおかしいです。

おや？よく見ると一番上の段だけ連続した数字ではありませんか？
一番上だけ連続した数字・・・
そうです、ポン出しキーも一番上だけ連続した数字です！

偶然だと思う人もいるかもしれません。だって「1」のキーが「49」で、「2」のキーが「50」として記録されるなんて感覚的にはおかしな話です。

…しかし、実際はその通りなのです。
調べてみると、キーボードの入力信号は「数値」として送られ、パソコン内部で処理されていることが分かります (参考記事①)。パソコンが「49」という信号を受け取れば、画面には「1」が入力されるのです。
この「49」という数値は「スキャンコード」または「仮想キーコード」と呼ばれ、その対応表は以下の参考記事②で確認できます。

参考記事：
①スキャンコード - Wikipedia
②キーコード一覧 (creasus.net)

…ということで、C列は「ショートカットキー(のスキャンコード)」が記録されていることが分かりました。

◆D列

ここまでだいぶ長くなってしまいました。ここからは駆け足でいきます。
残る選択肢は「色」と「音量」ですね。

D列の値は全て英数字6文字であることが分かります。規則性はパッと見ありませんが…勘の良い方は既に分かったはずです。

よく見ると、アルファベットの中でも a ～ f の６種類しか使われていません。ということは、これは全て16進数であることが予想されます。
16進数とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 (i-3-i.info)

16進数6桁で表現できるのは、「色」と「音量」のどちらでしょうか？
…勿論前者です。
そもそも音量は、先程全部MAXなので、同じ値のはずだと言いましたね。

プログラムで色を表現する方法は幾つかありますが、16進数6桁で色を表現する方法は一つしか考えられません。「カラーコード」です。
カラーコードは #ffffff と言った具合に、#ハッシュの後ろに16進数6桁を書いて色を表現する方法です。⇩のサイトが個人的には分かりやすいかと思います

難解カラーコードも、意味を知れば簡単！ - Webデザイン・プログラミングオンライン個別指導のAkros (akros-ac.jp)

カラーコードの仮説が正しいか確認するには、実際にカラーコードを色に直してみれば分かります。世の中には探せば便利なサイトがいっぱいありますので、今回は以下のサイトを使いましょう。D2セルは「c5d1f5」なので、「c5d1f5」を入力します。(Tech-Unlimitedさん様々です)
カラーコード変換｜各種設定用のカラーコードに変換 | すぐに使える便利なWEBツール | Tech-Unlimited

完璧の結果ですね。
他の色も多分一致するはずですので、良かったら皆さん試してみてください。

◆E列

もう確認するまでもなく、音量です。
全部「1」ということは、MINが０でMAXが１ということだと思われます。
音量バーを真ん中くらいに合わせれば、多分0.5くらいの値になるはずです。

まとめ

お疲れ様でした。
これで設定ファイルの全ての謎が解明されましたね。
この記事の内容を要約すると、以下の通りです。

import.txtは「 , カンマ」で行(ボタン)を、「：コロン」で列(ボタンの詳細)を区切るようなデータフォーマット
1行目のaはよく分からない
各行の1列目は音源名
各行の2列目は音源のURL
各行の3列目はショートカットキー(スキャンコード)
各行の4行目はボタンの色(カラーコード)
各行の5行目は音源の音量(0～1)

(あれ…？全て…？)

(おまけ)　設定ファイルで遊んでみる

今回分かったことを活かして、普段ならあり得ないような設定をインポートさせる遊びをしてみました。
当記事は、その結果について報告して終わりたいと思います。

良い子は真似しないこと。知識と節度を持った人だけ遊んでね。
(悪用してほしくないので、改変後のimport.txtは公開しません。)

音源のURLを変えずに、音源の名前をめちゃくちゃにする
- ⇨ボタンの名前だけが変わりました。ちゃんと機能します。
カラーコードを6桁ではなく3桁にする
- ⇨3桁でもちゃんと解釈してくれる。
カラーコードを3桁、6桁以外の桁数にする
- ⇨黒くなる
カラーコードに16進数に存在しない文字を混ぜる
- ⇨RGBのうち、存在しない文字が含まれている桁は「00」として解釈される。例：「00fffg」は「00ff00」となる　(=緑)
スキャンコードに英数字以外のキーを指定する
- ⇨キーの名前が表示上は「UNDEFINED」となるが、ちゃんと使える。
  - ⇨ファンクションキーとテンキー上の記号「+-*/.」のみは例外的に表示される
- ⇨ファンクションキーなど、ブラウザ上で機能を持つ一部のキーは、効果音を鳴らしながら機能が実行される。「F1」なら効果音とともにヘルプを表示するし、「F4」ならアドレスバーにフォーカスする。「F5」は画面が更新が優先されて効果音が鳴らない。
音量に「1より大きい数」や「0より小さい数」を入力する
- ⇨効果音が鳴らなくなる。
ファイルの頭の「a」を別の文字に変える。
- ⇨文字数増やそうが、変な記号を入れようが、コンマ以外はなんでもいける。何なら頭の「a,」をまるごと消して、ボタンの記述から始めても問題ない。~~マジで意味ないのかコレ~~

この記事が気に入ったらサポートをしてみませんか？