2018年10月29日月曜日

ペットボトルのフィルムからアクセサリーを作る

ペットボトルのラベルは透明なフィルムなので、レジンアクセサリーにできないかなと思いました。


良く見るラベルですね。
ロゴを切り取ってみました。

この時点で違和感ない感じです。


シリコンにレジンと一緒に入れてみました。
綺麗に透明フィルムをはさむためにレジンで底を固めてから、
フィルムを乗せています。

このとき気泡の除去に、エンボスヒーターを使用するとフィルムが縮んでしまいます。
エンボスヒーターを使用する場合は、フィルムを乗せる前に済ませる必要があります。
また、レジンが十分に冷めてから、フィルムを乗せてください。

エンボスヒートは思ったよりもレジンが熱くなるようで、短時間待ったくらいだと、透明フィルムは歪んでしまいます。

レジンは大量に入れると気泡が入りやすくなるので、薄めに固めます。
フィルムを完全に封入した後でしたら、エンボスヒータも使用できます。

完成したボス。
良い感じに透明になりました。

これ、何に使うんだろう・・・?

ストリーム動画をダウンロードする その2.ソースから必要なアドレスを見つける


Fiddlerに関するその他の記事も確認してみてください

前回Fiddlerで直接アドレスを調べましたが、毎回、Fiddlerでアドレスを調べるのは大変です。
ダウンロードアプリを作成するのであれば、先ほどのアドレスをどのように取得する必要があるか調べることになります。

私の試した例では
https://r1---sn-oguelnlz.googlevideo.com/videoplayback?なんとかかんとか
というサイトから動画がダウンロードされていました。

複数の動画を比較すればわかるかと思いますが、アドレスの緑色の部分は動画によって変わってきます。
紫の部分はクエリパラメータと呼ばれる部分ですね。動画のIDなどが指定されています。

最初にアクセスしたyoutubeのサイトから、探してみましょう。

各行で取得されたレスポンスはFiddlerの右下の部分に表示されます。
図のように「Response is encoded. Click to decode」と表示されている場合、クリックすることでレスポンスを展開できます。


TextViewタブで最初のYoutubeの動画ページで取得されたソースを表示しました。


今回の場合、最初のアドレスに関連するURLが含まれているようです。
検索用のTextBoxにアドレスを入れると、ソレっぽい場所が見つかりました。



取得したソースから、ソースを抜き出してみましょう。
ソースを文字列として取得するには以下のように書けば良いです。

public static string GetSource(string targetUrl)
{
 HttpClient client = new HttpClient();
 var res = client.GetStringAsync(targetUrl);
 res.Wait();
 string src = res.Result;

 return src;
}

実行すると、Fiddlerの結果のような文字列を取得できます。
この文字列から必要なアドレスを抜き出すことになります。
文字列から特定の部分を抜き出すには正規表現を使うことが多いです。
(JsonなどのXMLならロジックも変わるかと思います)

タグやアドレスをキーにして、必要なアドレスを抽出しましょう。
ソースを見た感じだと、決まったタグ部分を抽出すれば良いみたいです。
また、画質によってアドレスも異なっているようです。

個人的には自分のためのアプリ開発であれば、完全なソース解析をする必要はないと思います。
それっぽい部分を画面に表示して、手動でコピペすれば開発は簡単になります。
正規表現がわからないなら、ソース全部を画面に表示して目視で探しても良いのです。

いきなり完全なものを目指すと、時間もかかるし本筋ではないところで挫折してしまうこともあります。

ですので、『まずは動くものをつくる』ことを目標にすることをオススメします。

その後に、より理想に近いものを目指していくと挫折は減るかなと思います。
たとえば、手作業が含まれると、操作の手間が増えてストレス溜まるようなら、自動化を目指すとか・・・?
リアルタイム配信の場合も手動では対応できないので、ソース解析の自動化が必要になるかな


2018年10月20日土曜日

ストリーム動画をダウンロードする その1.アドレスを調べる

※作成したアプリを公開する予定はありません。
この記事をそのまま利用してアプリを製作しても、すべてのサイトでダウンロード可能なわけではないし、考慮すべき問題が他にも出てきます。
ビギナー開発者がアプリケーションを作成するための取っ掛かりになれば、、、程度の記事です。
抜粋されているソースの言語はC#です。他の言語でも考え方は同じだと思います。

ネットで配信されているStreamを保存したいなと思い調べてみました。
基本的には動画のストリームを保存することが出来れば良いだけです。
なのでダウンロードするファイルのアドレスが分かれば良いはず。。。
実際の通信を確認するにはFiddlerというアプリを使用します。
起動すると現在行われている通信が表示されます。

初期設定では大量の通信が流れているため、調査が難しい状態です。


このアイコンを通信を確認したいウインドウにドラッグ&ドロップします。
また、F12キーで通信のキャプチャを停止できます。必要な通信が流れていかないように、不要なときはキャプチャを停止しましょう。

実際にYoutubeの通信を確認します。
Fiddlerを起動してから、Youtubeへアクセスして動画を閲覧します。

サイトにアクセスすると、Fiddlerにはズラズラと通信情報が表示されるので、適当なところでF12キーを押してキャプチャを停止しましょう。再生が始まって数秒で充分です。

まず、アクセスしたURLが表示されています。
ここが解析のスタート地点になります。

その後、しばらくして、動画のダウンロードが始まっています。

ここに表示されているアドレスにアクセスすれば動画がダウンロードが出来ることになりますね。

少し脱線しますが、この動画の場合、動画ファイルと音源ファイルが別々にダウンロードされているようです。
Youtubeでは複数の画質での配信がされているため、音源を分けているのでしょうか?
(Youtubeのなかでも古い形式のものは、動画にそのまま音声も含まれています)

もし、このようなファイルをダウンロードするとしたら、動画ファイルと音声ファイルをくっつける作業が別途必要ということになります。

ソースはこんな感じでしょうか。
引数のtargetUrlに動画のアドレスを入れます。
簡略化のため、出力されるファイル名は”youtube.mp4”固定としています。

public static async void Download(string targetUrl)
{
 HttpClient client = new HttpClient();
 HttpResponseMessage res = await client.GetAsync(targetUrl, HttpCompletionOption.ResponseHeadersRead);

 using (var fileStream = File.Create("youtube.mp4"))
 {
  using (var httpStream = await res.Content.ReadAsStreamAsync())
  {
   httpStream.CopyTo(fileStream);
   fileStream.Flush();
  }
 }
}