
Chromeの拡張機能に曲のキー設定を変えられるツールがあり、面白いので紹介します。
カラオケの練習が捗るツールです。
無料で簡単に使えますが、PCのChromeでのみ利用できます。

## Tube Mania

**Tube Mania**はYouTubeの楽曲のキーを下げたり、音量やスピードを細かく操作できるChromeの拡張機能です。

導入は簡単です。
▼のリンクからchrome ウェブストアへ行き「Chromeに追加」をクリックします。  
[Tube Mania chrome ウェブストア](https://chrome.google.com/webstore/detail/tube-mania/bnlomghbbadgimjodjceeelbnmgnhimi?hl=ja)

![chromestore](/images/posts/280/280/chromestore.png)

以上でChromeに追加されていますが、使いやすくするための設定もします。
メニューの拡張機能（ジグソーパズルみたいなアイコン）を開いてTube Maniaのピンをクリックして固定します。
すると、メニューバーにアイコンが現れ、いつでも開けるようになります。
![ping](/images/posts/280/280/ping.png)

## 使い方
ChromeでYoutubeを開いてから、先ほどのアイコンをクリックしてTubeManiaを開きます。
閉じるときもアイコンをクリックする。  
▼コントロールパネルはこんな感じ。
![tubemania](/images/posts/280/280/tubemania.png)

キーは -12~+12（上下1オクターブ）まで変更できます。
リアルタイムで変換できるため調整がしやすいです。
※厳密には曲のピッチ(Pitch)を半音ずつ調整できる。

もし、変わらない場合はChromeを開き直してみてください。

また、繰り返し練習したい範囲をループ再生することもできます。
上から２つ目のバーで範囲を指定してその下のボタンでループをオンにする。
鍵盤で音の確認が出来たり、イコライザーがあったりと多機能ですね。

## 試してみる

「もらい泣きの速度を80%にすると平井堅が歌っているように聞こえる」というトリビアがあります。

しかし、TubeManiaで速度を落としてもキーの高さは変わりません（逆にすごい）。ということで、「もらい泣きのキーを下げると平井堅が歌っているように聞こえる」というトリビアを試してみました。

[一青窈公式チャンネル　もらい泣き](https://www.youtube.com/watch?v=XtieM8xIUwQ)

キーを変えた動画も撮ってみましたが、引用要件の改変してはいけないに引っかかりそうなんで公開はやめておきます。
個人的にはキー-3が平井堅っぽいです。

## おわりに

このツールを知ったきっかけは、作詞・作曲家の**星部ショウ**のYoutubeです。
彼はハロプロの楽曲を50曲くらい[^1]手掛けていて、Juice=Juiceの[CHOICE＆CHANCE](https://www.youtube.com/watch?v=XBQ0v95I9RE)やBEYOOOOONDSの[眼鏡の男の子](https://www.youtube.com/watch?v=8D_H51VvINs)などがある。個人的にはアンジュルムの**赤いイヤホン**
[^2]がめちゃくちゃ好きで天才だと思ってる。

<iframe width="560" height="315" src="https://www.youtube.com/embed/XhL4BjFQeCE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

▲では自分がキーをどれだけ下げたら良いかの測定もあります。


もはやChrome拡張に全然関係ないが、Juice=Juiceはダントツで歌唱力のあるアイドルグループです。異論はないはず。ライブ（映像）はもっとすごいよ。

<iframe width="560" height="315" src="https://www.youtube.com/embed/yiYr2-6LtcU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

コロナが収束したらハロプロのライブに行きたい！


## 参考

- [tube-mania - chrome ウェブストア](https://chrome.google.com/webstore/detail/tube-mania/bnlomghbbadgimjodjceeelbnmgnhimi?hl=ja)  
  無料です。

[^1]: [WikiPedia](https://ja.wikipedia.org/wiki/%E6%98%9F%E9%83%A8%E3%82%B7%E3%83%A7%E3%82%A6) 情報です。
[^2]: 残念ながらMVはない、[赤いイヤホン Apple Music](https://music.apple.com/us/album/%E8%B5%A4%E3%81%84%E3%82%A4%E3%83%A4%E3%83%9B%E3%83%B3/1460785624?i=1460785629)、布教するのでLive映像などをYoutubeに出してほしい。

PHPをブラウザ上で実行して動作確認できるサイトのまとめ


分かりやすく操作を伝えるため、画面操作のGIFで記録できるソフトを探していました。
Windows10に対応しているツールの中で使いやすかった**ScreenToGif**を紹介します。

## ScreenToGif

![home](/images/posts/106/home.png)

[ScreenToGif](https://www.screentogif.com/)

ScreenToGifはGIFアニメ動画を作成する無料ツールです。
GIFの録画とエディタを兼ね備えています。

特に気に入っている点は、**UIがとてもシンプル**なところです。

![stg](/images/posts/106/stg.png)

無駄な機能がなく、ボタンと機能の対応がわかりやすくまとまっています。
Windows10でも問題なく使えました。

## GIFアニメを録画する

赤い丸の「レコーダー」ボタンを押すとキャプチャする枠が出てきます。

![capture](/images/posts/106/capture.png)

これもかなりシンプルなUIになっています。
枠はマウスで大きく小さく操作でき、「記録」と「停止」ボタンもあり直感的に操作できるはずです。

## GIFアニメを編集する

録画をするとGIFアニメーションの編集に移ります。

![edit](/images/posts/106/edit.png)

ここまで出来るのかと驚きました！

- コマの削除・複製・入れ替え
- フレーム数の調整
- 重複したコマの削除
- スケールの変更
- 文字や図形の挿入
- 反転・反復

などなど。

メニューのキャプチャも載せておきます。

![stg-home](/images/posts/106/stg-home.png)

![stg-play](/images/posts/106/stg-play.png)
![stg-edit](/images/posts/106/stg-edit.png)
![stg-image](/images/posts/106/stg-image.png)
![stg-tran](/images/posts/106/stg-tran.png)
![stg-static](/images/posts/106/stg-static.png)

## GIFアニメーションを保存する

GIFやAPNG形式に変換できます。

MP4やWEBM形式に変換する場合は、FFmpegというエンコーダを別途インストールしてください。
[こちら](https://github.com/NickeManarin/ScreenToGif/wiki/Help-%E2%96%AA-Options-%E2%9A%99%EF%B8%8F)に導入方法があります。

![save](/images/posts/106/save.png)

上の設定で録画したものが下のGIFです。
p5jsで作った[シェルソート](https://www.suzu6.net/posts/105-shell-sort)のアニメーションです。

![shell-sort](/images/posts/106/shell-sort.gif)

60秒のGIFで280KBほどになりました。

## おわりに

比較したGIFツールの[ShareX](https://getsharex.com/)と比べて、機能がシンプルで使いやすかったです。
ただ、[ScreenToGif](https://www.screentogif.com/)は数分程度の録画向けです。

長時間の録画や編集には、GOM Playerで定番のGOMから出ている
<a href="https://px.a8.net/svt/ejp?a8mat=35AWZM+1B19KI+1UTA+1HL85U" target="_blank" rel="nofollow">GOM Cam(ゴムカム)</a>
<img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=35AWZM+1B19KI+1UTA+1HL85U" alt="">
が使いやすそうです。

Linuxでは[peek](https://github.com/phw/peek)というツールを愛用しています。
単一機能のシンプルなツールが個人的に好みなんだと思います。

画面操作を記録できるGIFツール ScreenToGif｜Windows


ブログに使う画像の加工でお世話になっているツールの紹介。

[ILoveIMG](https://www.iloveimg.com/ja)は**無料**で圧縮,切り抜き,サイズ変更など画像の加工全般がオンラインでできるツールです。

![iloveimg](/images/posts/51/iloveimg.png)

特に便利なのは、**ドラッグ&ドロップでファイルを一括アップロード**できる点です。未登録の無料枠でも15枚(150MB)まで一括アップロードできます。

このブログでは良くスクリーンショットを記事に載せています。
そのままだとサイズが大きすぎて[PageSpeed Insights
](https://developers.google.com/speed/pagespeed/insights/?hl=ja)の評価が悪いため、主に画像の圧縮とサイズの縮小を利用しています。

## 無料枠でできること

※ 2017年12月現在

用意されているプランは、「未登録の無料」「登録済みの無料」「プレミアム（月額780円）」の３つです。
それぞれ機能ごとに一括でできるファイル数とサイズが大きくなっていきます。また、「プレミアム」ではサイトの広告がなくなるそうです。
詳しくは[iLoveIMG料金設定](https://www.iloveimg.com/ja/pricing)。

無料枠でも以下の全種類のツールが利用できます。私は「未登録の無料」ですが今のところ不便はないです。

- 画像の圧縮
- 画像のサイズ変更
- 画像の切り抜き
- JPGに変換
- JPGから変換
- 写真エディター
- 画像の回転
- 透かし画像
- ミームジェネレーター

## 圧縮性能は？

画像の形式はJPG、PNG、GIFに対応しています。

下の画像はILoveIMGのスクリ-ンショットを圧縮したものです。形式はpngです。
![iloveimg](/images/posts/51/iloveimg.png)

色の数が少ないフラットな画像だったのもありますが、80%も圧縮されました。
見た感じ文字の輪郭もはっきりとしており問題なさそうです。

![asshuku](/images/posts/51/asshuku.png)

画像の圧縮が終わると、自動でダウンロードされます。
複数枚の場合はzipファイルにまとめてダウンロードされます。

## サイズ変更

画像の幅は600pxあれば良いのでサイズも変更します。

サイズ変更は比率（25%, 50%, 75%）とピクセルの指定ができます。
ピクセルでは縦横の比率を維持したまま幅を指定できます。

![iloveimg](/images/posts/51/cut.png)


下の画像はILoveIMGのスクリ-ンショットを50％のサイズに縮小した後、圧縮したものです。
![iloveimg](/images/posts/51/iloveimg-50.png)

サイズ79KB。
少し輪郭がぼやけてきました。

横幅を600pxに縮小してから圧縮したものが下の画像です。
![iloveimg](/images/posts/51/iloveimg-600.png)

サイズ25KB。
これ以上小さくすると、輪郭がぼやけてしまったのでやめました。

## まとめ

スクリーンショットを50%に縮小してから圧縮すると、934KB -> 79KBとファイルサイズを10%以下に小さくすることができました。

- ドラッグ&ドロップでファイルを一括アップロード
- 無料枠でも15枚まとめて変換できる
- 圧縮の性能は良さげ

他にもツールがたくさんあるので是非使ってみてください。

TouTubeの曲のキーを変えてカラオケの練習ができるChrome拡張機能 Tube Mania

PHPをブラウザ上で実行して動作確認できるサイトのまとめ

画面操作を記録できるGIFツール ScreenToGif｜Windows

オンラインで画像編集ができる無料ツールILoveIMG