Hatena::ブログ(Diary)

aikeの日記 RSSフィード

2016-08-22 ブラウザでMMLを演奏するChrome拡張作った

ブラウザMML(Music Macro Language)文字列選択してCtrl-Cを押すと音楽が流れるChrome拡張を作りました。

Googleウェブストアからインストールできます。

https://goo.gl/0UJQcT

ソースはこちら

https://github.com/aike/TSSCCjs

実行例

D


今から10年くらい前、ネットの掲示板上でMMLによる音楽が盛り上がったことがありました。添付ファイルなどではなく、掲示板のテキストとして直接貼られた10行程度のMMLでも驚くほどリッチな楽曲が再現できるため、いかに短いMMLでリアルな音楽を表現するか、技術の競い合いのような文化が生まれていました。

 

当時、再生ツールとして使われていたのが、keimさんが作られたTSS Clipboard Player(TSSCPまたはTCP)というWindowsMMLプレイヤーです。これは、とよしまさん制作のT’SoundSystem(TSS)という、PSGファミコンMSXFM音源などの音を再現できるサウンドドライバを利用したものでした。Ctrl-CでクリップボードMMLをコピーするだけですぐに音楽が再生されるTSSCPのあまりの使いやすさと、TSSの音の良さに支えられて、掲示板上のMMLは大変盛り上がったようです。(自分は後から知った口なので、当事者ではないんですが)

 

その後、別の方による偽TCPというツールも出たりしましたが、基本的にTSSCPMMLデファクトスタンダードとなって、その上に拡張機能を追加したものになっています。

 

月日は流れ2016年Web Musicハッカソン#5で、いまやWeb Audio/Web MIDIキーマンである、とよしまさんにお会いすることができたので、

TSSのWeb Audio版ってないの?」

と聞いてみたら、

あるよ

とのこと。つまり、OSにかかわらずブラウザJavaScriptMMLを再生できる!

 

「じゃあ、クリップボードAPIMML演奏するツールもあるの?」

MMLの方言がいろいろ違うし、それはまだなくて……」

え、そうなの? MMLの方言くらいなんとかなるでしょ、ってことで作りはじめたのがこのツールです。つまりTSSCPのWeb版クローンです。

 

実装してみたら、意外と大変で。ブラウザクリップボードAPIセキュリティのために、コピー操作時点でのクリップボードの内容が取得できないことが判明。ぐぬぬ

まあ、キー操作と選択文字は取れるので、Ctrl-Cを押されたときに選択されている文字を取得すれば同じことはできるか。*1

 

MMLも難関です。

やるべきことはTSSCP形式のMMLTSS形式のMMLに変換してTSSに渡すだけだし、どうせMMLの方言といっても、不等号の向きとかそんな程度だろうと思ってたら全然違いました。TSSCPMMLは圧縮効率を重視したさまざまな拡張がされていて、行の終端は改行ではなくセミコロン、#A〜#Zまでマクロ定義、#FMマクロでFMアルゴリズムの柔軟な定義、といったTSSにない機能を持っています。

 

たとえばTSSCPMMLは以下のようなものです。

#TITLE <sample>;t150;#A=%3v15o5cdefg;#FMB(A);A;A;

これを、TSSで再生できるようにするには以下のようなMMLに変換する必要があります。#FMマクロは、MMLの中でもさらに別のシンタックスを持った言語と考えられ、専用のパーサを別途用意する必要がありました。

#TITLE <sample>
#CHANNEL 3
#A t150
#B %3 @i0,0@o1,0v15o5cdefg
#C %3 @i3,0@o0,0v15o5cdefg

 

また、通常のマクロも、A(7)とすると、5度(7セミトーン)上に移調してマクロ展開するなど、高度な機能があり、これらを忠実に実装しなくては当時のMMLを同じ音で再生することができません。

さらに、偽TCPの拡張命令も難題です、これはTSSでは再生不可能な機能を実装していたりするので拡張コマンドを無視するしかないのですが、MMLは命令同士がセパレータで分割されておらず、また命令の文字数も1〜数文字とまちまちであるため、無視するにしても、ここからここまでが拡張コマンド、というように認識する必要があります。

 

結局、簡易的な文字列処理ではなく、しっかりパースして抽象構文木を生成してから変換するちょっとしたトランスパイラのプログラムになりました。

 

だいたいここまでで、当時のMMLは再生できるようになりましたが、まだ同じ音色になりません。よく調べてみると、JSTSSバグ発音数制限があったり、JS版ではmlコマンドがサポートされていなかったり、ということあったので、JSTSSのソースに手を入れて調整した結果、ほぼ同じ音が出るようになりました。*2

 

非互換部分は以下のとおりです。

・偽TCPの拡張コマンドは非対応

JSTSSでは固定波形テーブル音源が未実装のため、%5の音源は無音になる

・oコマンドやlコマンドを未指定時の値が違うっぽい

・Panが左右逆かも

・文法エラーのあるMMLの解釈

 

再生確認用のサンプルMMLも書いてみたので、Chrome拡張をインストールして聞いてみてください。

#TITLE <TSSCCjs's Theme by aike CC-BY>;
t165;#A=l4dr8d16e16f2.r8gf8e8f8e.d.ec.d.efr8f16g16a2.r8b-a8g8d8fr8fr8fgr8gr8
;#B=d.a2r8g.c+2r8c+.d.ef2.rd.a2r8g.c2r8c+.g.df2.r;#C=l4ar8a16g16a2.r8ga<d8c.
>a.<c>a.a+.<c>a.b-16<c16d2.r8c.>a+ar8ar8a;#D=a.d8>a8.<d8.f8er8e8e8ef8g.a8a+8
ga+8;#E=dgfdgdfd>a<fd>a<f>a<d>a<cgecgcec>a<ec>a<e>a<c>a<dgfdgdfdcgecgcec>b-<
fd>b-<f>b-<d>b-;#F=fgfde.f8g.r8efg8aa+8ac+defgfde.f8g.r8efg8aa+8d2.r;#G=l4d.
>a.<d>b-r8b-.<dc.>g.<c>ar8ar8a<d.>a.<dcr8cr8c>b-r8b-r8b-a16r16a16r16a16r16a1
6r16<e>a<;#H=l16[dagfdfga][c+agfc+fga][eagfefga][dagfdfga];#I=[4arararar]<[d
rdrdrdr]frfrfrfrgrgrgrgr;#J=AeAa+BB;#K=C<cr8cr8c>C<c+r8c+r8c+Da2.rDa.d2r8Da2
.rDa.d2r8;#L=l8Ea<ec>a<e>a<c>a<Ea<ec+>a<e>a<c+>al4<FF>;#M=GGHHHH;#N=l8[8r1]I
[16r1];#O=%3v10ml3q6s5;#P=%3v10mp1,4,1,2,0k1q6s5;#Q=%3q10s3;#FMC3(B2(A));Oo6
$J;Po6$J;Qp1o6v6$J;#FMC3(B2(A));Oo5p2$K;Po5p2$K;Qp2o5v6p2$K;#FMC3(B2(A));Oo5
$L;Po5$L;Qo5v4$L;#FMC4(B2(A));%3o4l4v15$q0s1o3M;%3o4l4v13$q0s3o3M;%3o4l4v4$q
13s1o3M;o6v4q4s4$N;o6v4q4s4k5$N;o6v2q4s4r8.$N;o6v2q4s4k5r8.$N;o8%2q0s50l16v8
$[16arararaaarararaa][16araaaraaaraaaraa];#R=[7rara]ral16s20;%2q0l4o3s12,18v
8$Rarrraaaal4s12Raaaaaaaal4s12Rarrraaaal4s12Raaaaaaaal4s12;%3o4v15s1,-15q1l1
6$[16crrrrrcrcrrrrrcr][16crccrcrccrccrcrc];

*1:そういうわけでClipboard Playerとは名づけてません

*2:いずれも本家にプルリクエストして反映してもらいました

ななしななし 2016/09/03 01:04 鍵盤表示にも挑戦してほしいです。自分とこ偽TCPが動かないので

2016-04-15 UnityでサイドチェーンしてSEとBGMの自動バランス調整する話

最近のUnityは音楽制作用DAWのような機能が充実してて、試しにサイドチェーンできるか調べたらできたのでメモ。

 

サイドチェーンというのは音圧上げないと死ぬ病の人たちが発明した音楽用コンプレッサーの使い方で、キック(バスドラム)の音が鳴った瞬間、それ以外のシンセやベースなどの音量を自動的に下げる、というものです。これにより音圧をギリギリまで上げつつ、キックの音をしっかり目立たせ、バックの音にもンッアッンッアッというリズムを生み出すという一粒で三度美味しいワザです。

 

ゲーム制作でいうと、SEやセリフの音が鳴るときにBGMを自動的に下げるというような、よくある状況に応用できます。

 

早速やってみましょう。

 

UnityのWindowメニューからAudio Mixerを選択します。大丈夫、あなたのPersonal(無償)版でもできますから。

 

全然ミキサーっぽくない表示が出て若干不安になりますが、勇気を出して「+」印をクリックし、ミキサー名を入力します。ぼくはこれまでの人生でミキサーに名前をつけるような経験は一度もしたことがなかったので少しとまどいましたが、無難に「mixer」としました。

f:id:aike:20160416011944j:image

 

一歩前進しました。でもまだミキサーっぽくないのでGroupsのMasterを選択した状態で「+」をクリックしてトラックを追加します。トラック名はつけたことがあるので迷いません。「SE」と「BGM」にしました。

f:id:aike:20160416011945j:image

 

Audio Sourceをふたつ作ります。AudioClipとしては数小節分のキックのサンプリングシンセサンプリングループを用意します。サンプリングループは自分で作ると大変なので買ってきました。お金って便利。

 

キックの方はOutputを「SE(mixer)」に、シンセの方はOutputを「BGM(mixer)」にします。

f:id:aike:20160416011946j:image

f:id:aike:20160416011947j:image

 

サイドチェーンをかけずにそのまま混ぜて鳴らすとこんな感じになります。ふーん。

Download

 

サイドチェーンの登場です。

トラックの下の方の「Add ..」をクリックし、SEは「Send」、BGMは「Duck Volume」を選択します。ミキサーっぽくなってきた。

f:id:aike:20160416011948j:image

 

SendのReceiveを「BGM\Duck Volume」、Send levelを最大の「0.00 dB」に設定します。

f:id:aike:20160416011949j:image

 

Duck VolumeのThresholdやRelease Timeをこんな感じに設定します。Thresholdは左の方にするほど強くかかるので、最初は強めにして効果を耳で確かめてから丁度いいところまで上げていくと分かりやすいかもしれません。

f:id:aike:20160416011950j:image

 

サイドチェーンをかけて鳴らすとこんな感じ。キックがしっかり聞こえて、シンセがンッアッンッアッですね。

Download

 

次に別の音をトリガーにしてみます。

ユニティちゃんのボイスを公式サイトからダウンロードしてきました。

 

普通に混ぜるとこんな感じ。もごもご。

Download

© Unity Technologies Japan/UCL

  

これもキックと同じようにOutputを「SE(mixer)」にします。

f:id:aike:20160416011951j:image

 

Duck VolumeのThresholdはさっきより強め。ユニティちゃんが一言しゃべるたびにンッアッってならないようにRelease Timeは長めにします。

f:id:aike:20160416011952j:image

 

できた。

Download

© Unity Technologies Japan/UCL

 

ね?簡単でしょ。

2016-01-14 OSCをMacやWindowsやLinuxやRasPiから送るシンプルツール作った

OSC(Open Sound Control)を気軽に送りたくなることってあるじゃないですか。ラズベリーパイからPCへ簡単な通知を送ったりとか。どこのご家庭にもある雰囲気メガネを光らせたいときとか。

 

でもなかなかシンプルなツールが見つからなくて、開発環境入れてコンパイルする必要があったり、音楽や映像を扱う大きなソフトの一機能だったりして、ちょっと気軽な感じがしないものばかりで。そんなわけで、コンパイル不要で実行ファイルひとつだけでOSCメッセージを送れるコマンドを作りました。

 

http://github.com/aike/oscer

 

使い方は簡単。コマンド名の後にホスト名、ポート番号、OSCメッセージを指定するだけ。

 

実行例

oscer localhost 10000 /dummy

 

引数にはInt32、Float32、Stringが指定できます。

oscer 192.168.1.10 12000 /hello 10
oscer 192.168.1.10 13000 /world 3.14
oscer 192.168.1.10 12000 /hello world

 

IPv6も対応。たぶん。

oscer fe80::1%lo0 11000 /foo

golangで書いたので、クロスコンパイルも簡単。

MacWin32Win64Linux32Linux64LinuxARM(Raspberry Pi)用にビルドしておきました。golangは初めて使いましたが生ソケット通信みたいなアプリでも完璧にWrite once, run anywhereなのはびっくり。実行側はgolangをはじめランタイムライブラリ的なものが一切不要なのも嬉しいです。

 

そんなわけで良いOSCライフを。

 

2016.06.13 追記

受信側もほしくなったので受信機能もつけました。

oscer receive 10000

2015-11-13 今夜わかるFM音源 その2

そんなわけで、いくつかreface DXで音色を作ってみます。お題としてはマイク・オールドフィールドチューブラーベルズ。後半に様々な楽器が同じフレーズを順番に演奏するパートがあり、そこに出てくる楽器をひととおりFM音源再現してみます。

 

できた音はこんな感じです。全楽器reface DXだけで作成し、録音時のエフェクト加工などもしていません。

Download

 

Grand Piano (0:00)

グランドピアノの音は、アタック付近では倍音の多いノコギリ波、サスティンに従って正弦波のような甘い音になっていきます。前回も紹介したアルゴリズム8番で実装します。アタックが鋭すぎるとピックで弾いたような音になってしまうので、すこしなだらかな立ち上がりとします。

ピアノの音は、ひとつの音ならわりと簡単に作れるものの、低音から高音まで、弱い音から強い音まですべて似せるのはわりと大変です。キーボードスケーリングで低い方の倍音を多めにして力強さを加え、ベロシティセンスで強く弾いたときに倍音が多くなるようにしています。

最後に深いリバーブでボディとコンサートホールの響きを表現します。

reface capture用QRコード

 

Reed and Pipe Organ (0:23)

なんだかよくわからないオルガン系の音です。

普通のパイプオルガンアルゴリズム12の加算合成や、フィードバックによる矩形波を作ると作りやすいです。ここではもう少しリードの特徴を出すためにフィードバックでノコギリ波を加えてクセのある音にしています。

QRコード

 

Glockenspiel (0:46)

FM音源の得意な金属音。

プリセット4-7 GlassHarpをもとに、EGを金属的なアタックにして調整します。金属音はキャリアに対して3.5倍のFREQのモジュレータという定番の設定ですね。

QRコード

 

Bass Guitar (1:09)

ベースギターはプリセット1-6 DarkBassの音をもとに調整しました。

弦のベースらしいアタック感とサスティンをEGで作るだけでそれらしくなります。モジュレータであるOP2とOP4を下げめにすると落ち着いたベース音です。今回はメロディを弾くため不自然にならない程度に上げてドライブ感を出しています。

QRコード

 

Double Speed Guitar (1:32)

ちょっと風変わりなエレキギタークリーントーン

コツコツしたアタックと中高域にクセのあるサスティンは、FM音源では意外と再現が難しいです。瞬間的な矩形波でアタックを、キャリアOP3とモジュレータOP4の周波数比を 2:3 にしてサスティンのクセを表現しています。さらにモジュレータOP4の立ち上がりを少し遅くすることで、弦が共振して遅れて倍音が増える雰囲気を出しました。また、歪んでると気づかないくらい薄くディストーションをかけてアナログ感を出しています。

QRコード

 

Two Slightly Distorted Guitar (1:55)

歪んだギター。

Bass Guitarをオクターブ上げてEFFECTのディストーションをかけるとそれだけで良い感じになります。ギターの歪みは矩形波に近いので、エフェクトをかける前の音もFBで矩形波に近づけると雰囲気が出ます。

今回は原曲風のゴツゴツしたアタックを再現しましたが、人間の弾くギターのアタックはとても多彩なので無理にアタックを強調しない方が良い場合が多いと思います。上手いギタリストレガート奏法のようななめらかなアタックを出すために、MONOモードにするのもおすすめです。

QRコード

 

Mand...lin (2:17)

マンドリントレモロ

小さめのボディの共鳴を再現するため矩形波に近い波形にします。マンドリンは弦が2本ずつ張ってあるためコーラスエフェクトをかけます。refaceにはトレモロ再現に便利なEG LoopがないのでLFOでがんばります。がんばったけど、あんまり似なかったので深めのリバーブでごまかします。

QRコード

 

Spanish Guitar and Introducing Acoustic Guitar (2:40)

これは原曲でも他の音に混ざってよく聞こえないので普通にアコギの単音ソロ風の音を作ってみました。定番のアルゴリズム8で、ボディが低く響くサスティンとアコギの弦特有のトレブリーな倍音を組み合わせています。これもモジュレータの立ち上がりを少し遅くして共振の隠し味を加えています。また、ベロシティセンスを上げめにしてダイナミクスをつけやすくしました。

QRコード

 

and Tublar Bells! (3:04)

最後にチューブラーベルズ。

プリセットにあるのであんまりすることがないです。プリセットの音は残響が長すぎるので少し調整。

FM音源では金属音が出しやすいものの、どうしても柱時計のような音になりがちなのでモジュレータを上げすぎないなど工夫が必要です。原曲のチュブラーベルズの音はローをカットしたような音なので二つのキャリアの一方をオクターブ上にしてみます。でもやっぱりreface DXだけでは再現が難しいです。

今回はやっていませんが、後からイコライザーをかけてローカットするとそれっぽくなると思います。

QRコード

 

2015-11-07 今夜わかるFM音源

reface DXいいですね。あえてDX7シリーズに近い音源仕様と、現代的な使いやすい操作性とを組み合わせることで、FM音源本来の音作りの楽しさがあります。とはいえ、先日Web Music Developer Meetup@Sapporoの参加者と話して、こういったイベントに参加するような人でも、FM音源でイメージどおりの音をつくるのは難しいと感じる人が多いようでした。そんなわけで、今回はちょっと実践的な音作り方法について書いてみようと思います。

 

■キャリアとモジュレータ

FM音源はオペレータと呼ばれる発振モジュールを組み合わせて音をつくります。変調される側をキャリア、する側をモジュレータと呼びますが、これは相対的なもので、アルゴリズムによっては変調されたキャリアがまた別のオペレータのモジュレータになることもあります。

 

と、いうようなよくある説明を読んでもなかなか音色にむすびつかないですよね。ここでは、自分の場合の音作りのワークフローを例に説明していきます。

 

ハープの作成

最初の例としてハープの音をつくることにします。オーケストラの後ろの方で優雅にポロロンと弾いているあれです。

 

1. アルゴリズムの選定

音色の特徴はアタック時の波形とサスティン時の波形にあらわれやすいです。一般的にアタックは倍音ノイズを多く含み、サスティンは倍音が少ないので、アタックの音色とサスティンの音色を別々につくって最後にバランスをとる、という進め方がおすすめです。

 

こういった考え方の音作りに一番便利なアルゴリズムは8番です。アタック用とサスティン用にキャリアとモジュレータが一組ずつ使えます。実際プリセットもこれを使っているのが多くて、DXの音として名高いエレピやマリンバプリセットもこのアルゴリズムです。

f:id:aike:20151107165855j:image


図を見てわかるように最終出力につながるオペレータが2個あります。これが1個のアルゴリズムはエグい音用、2個は汎用的、3〜4個になるとオルガンやパッドのような音、というような大まかなイメージです。


2. エンベロープ仮設定

reface DXのEGはDX7と同じくパラメーターが多くて大変です。なので、初期値としてパラメーターを以下のようにしてしまって、通常はR1(A)、 R3(D)、 L3(S)、R4(R)だけ操作するようにしてしまえれば、一般的なシンセADSRと同じなので作業のとっかかりが楽になります。その後微調整したくなったときにはじめて他のパラメーターを触るようにします。

 L1:127 L2:127 L3:64 L4:0

 R1:127 R2:127 R3:64 R4:64

f:id:aike:20151107165901j:image


今回は、減衰音ということでL3=0にして、サスティン用にオペレータ1の減衰時間R3を長めの50に、アタック用にオペレータ3の減衰時間R3を短めの100にします。あとで微調整するのでここではざっくりの設定です。

Download


3. サスティン音の作成

さて、ハープのような弦をはじく楽器(撥弦楽器)の場合、弦の振動は正弦波かそれに近いノコギリ波の軌道を描きます。

https://www.youtube.com/watch?v=6sgI7S_G-XI

これはreface DXの場合、FEEDBACKだけで再現できそうです。まずオペレータ1以外のLEVELを0にします。次にオペレータ1のFEEDBACKをそれっぽい音になるまで上げていきます。40くらいが良さそうです。またこのときEGのR1、R3、R4を微調整します。

Download

ちなみに、キャリアとモジュレータの周波数比の定番としては以下のようなものがあります。reface DXはFEEDBACKでいろいろできてしまいますが、知識として知っておくとなにかと役立ちます。

 ・ノコギリ波 1:1 ブラス、ストリングス

 ・矩形波 1:2 クラリネット、笛、レトロゲーム

 ・金属音 1:3.5


4. アタック音の作成

こんどはオペレータ1のLEVELを0にして、代わりにオペレータ3のレベルを上げてアタック音を調整します。ハープは、指で弾くためアタック時のノイジーな高周波はほぼゼロと考えてよさそうです。

次にハープの構造をググって調べます。奏者のおねえさんが抱えているあたりに、アコースティックギターのような共鳴胴とサウンドホールがあるようです。ということは箱が共鳴するような中域が響く音だと予想できますね。中域が共鳴する音は矩形波再現しやすいのでオペレータ3のFEEDBACKをマイナス方向に下げていきます。-74にするとそれっぽくなってきました。EGのR1、R3、R4も同様に微調整します。R3は83くらいが良さそうです。

Download


5. エフェクトの設定

 ハープはコンサートホールのようなところで鳴っている音がなじみ深いので、深めのリバーブをかけます。

Download


6.最終調整

サスティン(オペレータ1)とアタック(オペレータ3)とのレベルバランスをとったら完成です。今回はオペレータ2と4は使いませんでした。もう少し倍音を加えたいときに少しずつ上げるようにして使います。

Download

f:id:aike:20151107153540p:image

reface capture用QRコード


ストリングスの作成

次はストリングスを作ってみます。オーケストラ風の存在感のある音を目指します。


1.アルゴリズムの選定

ストリングスの音はバイオリンチェロなどたくさんの音が一斉に鳴っているところに特徴があります。そんなわけで全部のオペレータを並列に鳴らすアルゴリズム12を選びます。

f:id:aike:20151107165858j:image


2.エンベロープ仮設定

ストリングスは持続音でアタックが遅いので全部のオペレータを下のようなエンベロープにします。

 L1:127 L2:127 L3:127 L4:0

 R1:70 R2:127 R3:127 R4:90

Download


3.サスティン音の作成

バイオリンのような弓で弾く擦弦楽器の弦の振動は、典型的なノコギリ波の軌道を描きます。

https://www.youtube.com/watch?v=6JeyiM0YNo4

今回も鳴らすオペレータ以外のレベルをゼロにして、すべてのオペレータひとつずつのFEEDBACKをそれっぽい音になるまで上げていきます。60くらいで良い感じになりました。

Download


4.オクターブの調整

 オーケストラ弦楽器構成を想像して、低域、中域、高域にオペレータを振り分けます。オペレータ1のFREQを0.50、オペレータ2と3のFREQを1.00、オペレータ4のFREQを2.00にします。これで2オクターブに渡るユニゾンになります。

Download


5.厚み・広がりの調整

ピッチやタイミングが正確すぎると、たくさんの音が鳴っているようには聞こえません。プラスマイナス10くらいの範囲で各オペレータのデチューンを設定することで音に広がりが出ます。また、EGのR1(アタック)、R4(リリース)を微調整して適当にばらけさせました。

Download


6.エフェクトの設定

さらにたくさんの音で鳴っている効果をつけるため、コーラスエフェクトをかけます。ふたつめのエフェクトは、こちらもコンサートホールの響きを再現するためリバーブをかけます。各オペレータのレベルバランスも調整したらこんな感じ。

Download


7.最後にひと工夫

これでもかなり良い感じのストリングスですが、アタックのときに弓が弦にこすれるザリッとしたニュアンスを加えてみます。

オペレータ2のFEEDBACKを上げて倍音を加えます。また、オペレータ2のエンベロープを下のようにしてアタックは大きく、サスティンは他よりも小さくなるようにします。

f:id:aike:20151107165851j:image


他のオペレータも気持ちR1とFBを増やしてアタック感と倍音を加えます。全体のレベルバランスをとったらできあがり。

Download

f:id:aike:20151107153541p:image

QR

ね?簡単でしょ。

 

次回はピアノの音の作り方とか紹介できればと思ってます。こんなやつ。

Download

QR

トラックバック - http://d.hatena.ne.jp/aike/20151107