SoundCloud の曲をサイトに埋め込んで途中から再生する方法

こんにちは。

先日、わけあって SoundCloud の曲をブログに貼り付ける必要があったのですが、曲を途中から再生するやり方がちょっと複雑で、苦労しました。覚書としてやり方を書いておきます。

SoundCloud とは

2007年に開始した音楽共有サービスです。

SoundCloud
Screen Shot 2015-12-03 at 11.51.48 PM

以下のギズモード・ジャパンのサイトによると「既存の概念を底からひっくり返す、現代の音楽ツール」だそうです。

音楽界の全てを変えた革命児SoundCloud : ギズモード・ジャパン

有料アカウントもありますが、基本サービスは無料で利用できます。

曲をシェアする方法

例として椎葉大翼さんの PRINCIPIA PERFECTUS サウンドトラックのページをこの記事内で紹介するやり方を紹介します。

まず紹介したい曲のページを開きます。

そして曲の詳細情報の上のあたりにいくつかあるので一番右のシェアボタンを押します。

Screen Shot 2015-12-03 at 11.10.08 PM

以下、リンクを貼りたい場合と、自分のサイトに埋め込みたい場合でやり方が変わります。

方法1(リンクを貼る場合)

リンクを貼る場合のやり方は簡単で、表示された URL を自分のサイトなどにコピペすれば良いだけです。

Screen Shot 2015-12-03 at 11.18.56 PM copy

曲の先頭ではなく途中から再生させたい場合、後述しますが隣に表示されているチェックボックスにチェックを入れて、時間を入力します。例えば30秒後から再生させたい場合は “0:30” と入力します。

すると、URL の後ろに “#t=0:30” などが追加されるはずです。

 

↓30秒後から再生を開始させたい場合の URL の例

https://soundcloud.com/dshiiba/pp-xfd#t=0:30

 

ただし、ここで作成したリンクで正しく途中から再生されるのは PC などからリンクをクリックした場合で、例えば iPhone の Safari でクリックした場合はうまくいきませんでした。(2015年12月3日に iOS 9.1 の iPhone 6 で確認)

以下の Q&A ページにその現象が報告されているので、そのうち対応されることを期待します。

Sharing a link with a specific start time not working on mobile devices – SoundCloud Community

方法2(サイトに埋め込む場合:Embed)

もう1つ、サイトにプレイヤーを埋め込む方法が用意されています。

その場合、上記の手順で表示されたポップアップの上部にある「Embed」をクリックすると、html ソースコードが表示されます。

Screen Shot 2015-12-03 at 11.19.36 PM

この html ソースコードをサイトにコピペすることで、そのページ上で曲が再生可能なプレイヤーが表示されるようになります。

<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/232115002&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false"
width="300" height="120" frameborder="no" scrolling="no">
</iframe>

 

↓実際に埋め込んだ例

 

こちらの方法では、自動再生するか (auto_play)、アートワークを表示するか (show_artwork) など、いくつかのオプションが用意されてはいるのですが、「途中から再生する」というオプションは提供されていないようです。

しかし、代わりに Widget API というものが公開されていて、JavaScript でこれらの API を呼び出せば「演奏の開始 (play)」「トラックの移動 (next)」「ボリュームの設定 (setVolume)」など、いろいろなことができます。

 

Widget API – SoundCould Developer

 

この中の seekTo と言う関数を使えばよさそうです。

サンプルコードを参考に、再生イベントを検知し、seekTo で30秒後に移動させるコードを書いてみると、以下のようになりました。

<iframe id="sc-widget" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/232115002&amp;auto_play=false&amp;hide_related=true&amp;show_comments=false&amp;show_user=false&amp;show_reposts=false" width="300" height="120" frameborder="no" scrolling="no"></iframe>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
  var widget = SC.Widget(document.getElementById('sc-widget'));
  widget.bind(SC.Widget.Events.READY, function() {
    widget.bind(SC.Widget.Events.PLAY, function() {
      widget.seekTo(30000);
    });
  });
}());
</script>

 

1行目の iframe タグは、さきほどの流用ですが、 JavaScript コードから参照できるように id フィールドを追加しています。
2行目で Widget API を読み込んでいます。
4行目からが JavaScript のコードになりますが、要は Widget の再生イベント内で30秒先まで移動するようにしているだけです。

 

 

↓実際に埋め込んだ例(0:30 から再生されるはずです)


 

このやり方では、iPhone の Safari 上でも問題なく動作することが確認できました。
途中から再生したいだけなので、ここまでやらねばならぬのか?という感じですが・・・。

bc コマンドが思った以上に便利なので紹介します

こんにちは。 久しぶりにプログラマー向けの記事です。 bc と言うコマンドが、知れば知るほど素晴らしすぎるので、その凄さを知っている範囲で紹介します。「そんなの知っている」と言う方はスルーでお願いします。

bc コマンドとは

Unix の標準コマンド(SUS Shell and Utilities)の1つで、任意精度の計算を行うコマンドです。例えば Mac OS X は Unix ですので、標準でインストールされています。Windows で使用したい場合は別途インストールする必要が有ります。

使い方(基本編)

起動

Mac OS X で使用する場合の例を紹介します。 まず Dock からターミナルを起動して bc と入力します。

するとクレジット情報が表示され、入力待ちになります。プロンプトはありません。

式の入力

例えば “1+2” を計算したい場合は、そのように入力してリターンキーを押します。

答えは “3” ですね。 デフォルト状態で、四則演算(+, -, *, /)、剰余(%)、累乗(^)、平方根(sqrt)などが使えます。 ちょっとした計算、例えば平均値の計算などが、通常の電卓よりは計算しやすいと思います。

小数点以下の桁数を指定

デフォルト状態では、小数点以下の値は切り捨てられますが、scale と言う特殊変数に値を設定することで、小数の計算結果も得られます。例えば、小数点以下3位までの結果を表示させるには以下のようにします。

終了

終了するときは quit と入力します。

応用編

2進/10進/16進の相互変換(ibase, obase)

このあたりから非常に有用になってきます。 bc は、ibase, obase という変数に値を指定することで、入力と出力に使用する進数を自由に指定できます。

16進数 98A0B0223F を 10進数に変換する

10進数 1234 を2進数に変換する

10進数 987.6543 を 16進数に変換する「16進の小数」なども普通に扱えます!

ひとつ注意点があります。 ibaseを10以外の値にしてしまうと、それ以降入力する値はすべてその進数で入力しなければなりません。例えば以下の例は思うように動作しないでしょう。そのため、obaseを ibaseより先に設定するのが無難です。

16進->10進変換(失敗例)

π の計算(初等関数の使用)

起動時に “-l” (小文字のエル)オプションを付加すると、サイン (s), コサイン (c), アークタンジェント (a), 自然対数 log (l), exp (e), ベッセル関数 (j) が使用できます。このとき scale は自動的に 20 に設定されます。

ここで、アークタンジェント1が π/4 だと言うことを利用し、a(1)*4 で π を求めています。これは数値計算の定石です・・・よね。 scale を 1000 とかにしても、いけます!

そう、π は男のロマン・・・。 誤差はほとんどありません!最後の桁は(4でかけてることもあり)合わないことが多いですが、その1つ前の桁は正しいと思っていいようです。(厳密な話をすると長くなるので割愛します・・・)

π を16進数で表示

ここで obase=16 にすると、16進数で π が表示できたりします!

16進数の π が標準コマンドで、こんな手軽に表示できるとは! しかもPCの計算能力が許すまでいくらでも!

\(^o^)/

オイラー数 e についても e(1) とすれば表示されるので、同様のことが可能です。すごいです。 プログラマーとしては押さえておきたいコマンドですね!

vim を less とか more の代わりに使うと便利

こんにちは。

久しぶりに小ネタ書きます。

プログラマーの皆さんはコマンドライン(ターミナル)で作業されることも多いと思いますが、コマンドの結果が長くて1画面に収まらない場合どうしているでしょうか?

「スクロールしてターミナルの履歴を見る」でもよいですけど、ターミナルの設定によっては見たい結果がバッファに残ってなかったりしますよね。あと検索できないのが辛い。

なので less とか more というコマンドに渡して見る方法が一般的なのではないでしょうか?
less だと “/” を押せば検索もできますし。

しかしこの less なんですけど、なんとなく vim っぽい操作性でありながら vim ではありません。

そこでいっそのこと vim を less の代わりに使えばいいのではと思いついて、5年くらい前からやってますが、いい感じなので紹介です。

「そんなの普通にやっている」という方はスルーしていただけるとありがたいです。

確認した環境

Max OS X Yosemite 10.10.5

やり方

vim はファイル名として “-” (マイナス記号) を指定すると、標準入力を編集対象にできます。また、vim は “view” という別名を持っていて、この名前で起動するとリードオンリーモードになります。

この2つのオプションを使えば vim を less の代わりのページャーとして使えます。具体的には、

$ ls | view -

などのようにします。

こうすれば、検索はもちろん、vim の機能がすべて使えるのでいろいろ便利です。

使用例

例えば Cocos2d-x のソースファイルの一覧を見たい場合、

$ cd cocos2d-x-3.8
$ find . | view -

このようにします。すると結果は以下のような感じになります。

Screen Shot 2015-10-10 at 12.54.03 PM

14,787行もでました。

しかしここは vim ですので、あとは何でもできます。例えばこのなかに “SpriteBatchNode” を含む行だけを残したい場合

:%!grep SpriteBatchNode

などと打てば、(「リードオンリーですよ」って警告は無視)

Screen Shot 2015-10-10 at 12.57.23 PM

となりました。
クラス SpriteBathcNode に関連する C++, JavaScript, lua のファイルが6件あったってことですかね。

さらに例えばファイル名は不要で、ディレクトのリストにしたい場合は、ここから

:%s/[^/]*$//

とかやって、

Screen Shot 2015-10-10 at 1.03.39 PM

重複した行は

:%!uniq

などで消せるので

Screen Shot 2015-10-10 at 1.05.31 PM

こうなりました。
これでディレクトリのリストができました。自由自在です!

上記のように結果を編集してしまうと終了時に怒られるので、結果が不要な場合は

:q!

のようにします。

というわけで vim を less の代わりに使うのはおすすめです。

アプリストアに必要なスクリーンショットをリサイズで一気に作成するコマンド

こんにちは。

前回アプリを公開したとき(2015年4月)に使った小技ですので、いま有効かどうか未確認ですが、サイズの異なるスクリーンショットを一気に作るコマンドの紹介です。

使用した環境

OS: Mac OS X 10.10.3

準備するもの

自分の場合はiPhone6 に合わせて 750×1336 pixel で、元となるスクリーンショットを5枚作成しました。(今考えると、640×1136 pixel で作っておけば、十分だったかもしれませんが、iPhone6 で 640×1136 のみ対応のアプリを動かすと、ピクセルが拡大されているのが見てわかってしまうので、こだわってしまいました。

 

機種 画面サイズ [Pixel] 必須? 備考
iPhone4s 640×960 必須 そろそろサポートしなくてもよくなるらしい。(もうなっているかも)
iPhone5/5s 640×1136 必須
iPhone6 750×1336 オプション
iPad 1536×2048 iPad対応アプリには必須 とりあえず左記のサイズを用意したら、iPad対応としてサブミットできた。

 

例えば、ss1.png 〜 ss5.png という名前の 750×1336 のスクリーンショット画像を、iphone6という名前のディレクトリに置きます。

Screen Shot 2015-07-24 at 2.23.16 PM

コマンド実行

 

この状態で、ディレクトリ丸ごと、iphone4, iphone5, ipad という名前でコピーします。

 

Screen Shot 2015-07-24 at 2.32.46 PM

サイズの変換には sips コマンドを使います。iPhone6 -> iPhone5 のサイズ変換は、アスペクト比がほぼ等しいので、sips の -z オプションでサイズを指定するだけです。

 

 

iPhone4 や iPad へのサイズ変換は、アスペクト比が異なるので、まず -z オプションでアスペクト比を保つようなサイズに変換したのち、-p オプションでゼロうめをしてサイズを合わせます。こうしないと、単純な引き伸ばしになってしまいます。

 

 

結果

 

プレビューなどで結果を確認します。

ss1 ss1 ss1 ss1

これで、一応は各サイズ用のスクリーンショットが用意できました!(サイドの黒塗りが気になる方は、何か別の手段を使う必要がありますが)

 

Eclipse のワークスペースがどこにあるか調べる方法

Eclipse のワークスペースはデフォルトではホームディレクトに workspace という名前のディレクトリが作成されます。

任意の名前のディレクトリを新たなワークスペースとして使えるため、その時の気分によっていろんな名前をつけてしまい、どこにワークスペースを作ったかわからなくなってしまうことがよくあります。少なくとも自分は。

方法1

Eclipse の Preference の [General]→[Startup and Shutdown]→[Workspaces] を開くと “Recent workspaces” として使ったことがあるワークスペースが記録されています。

Screen Shot 2015-06-05 at 7.11.06 PM Screen Shot 2015-06-05 at 7.13.45 PM

しかしこの方法だと、その Eclipse が開いたことのあるワークスペースしかリストされません。

方法2

Eclipse はワークスペースとして指定されてディレクトリに “.metadata” という隠しディレクトリを作るので、これを検索します。

ターミナルを開いてワークスペースを置いてありそうな場所(例:ホームディレクトリ)で以下のコマンドを実行します。

自分の環境で実行した例は以下の通りです。

ざくざく出てきました。

この方法だとEclipse をベースに作られていると思われる別のツールのワークスペースも出てしまうのが興味深いところです。(Aptana Studio 3, Cocos Code IDE)

時間がかかってもよければルートディレクトリで上記のコマンドを打てば、パーミションがあるところにあるワークスペースはすべて探し出せます。