ヘッドレスChromeCastでYoutube音声をディスプレイ無しで再生

Youtube音声をバックグラウンドでダラダラ流したいなと思いました。

スマホで月額払ってYouTube Premiumでも使えという話ですが
押し入れに眠っているChromeCastを使ってもできそうだと思いました。

普通にChromeCastをディスプレイなりに繋げばいいわけですが
余っているディスプレイもないし、音だけ聞きたいのでディスプレイをわざわざ点けたくない。

ディスプレイ無しでChromeCastでYoutube音声は流せないのか？
いくつかのコネクターの接続でできました。

完成品(かっこわるい…)

HDMI→VGA 変換コネクターをつないで
VGAコネクター側に抵抗を差し込むとディスプレイがつながっている扱いになる
という仕組みです。

VGAコネクター側の抵抗

スマホからChromeCastにYoutubeをキャストしてやるとスピーカーからYoutube音声が流れます。
スマホの画面を消しても流れ続けます。

再生中

以下が材料

Chromecast(第1世代)(他でもいけるはず。リンクは第2世代。)

クロームキャスト グーグル 第2世代 Google Chromecast ワイヤレスHDMI ミラーリング Wi-Fi WiFi(Android iPhone iPad Mac Windows Chromebook 対応) YouTube NETFLIX hulu dTV GYAO などを楽しめます【正規品】

HDMIとHDMI延長コネクター《メスとメス》

Ugreen HDMI to VGA変換アダプター音声出力あり 1080P Mirco USBケーブル付 Activeタイプ ブラック

抵抗(75Ω)3本

抵抗を指すと…というところは以下を参考にしました。

qiita.com

試していませんが
HDMI→VGA 変換コネクターは以下のほうが小型でよさそうですね…。

HDMI to VGA 変換アダプター、GANA 金メッキ高速1080P HDMI オス to VGAメス変換アダプタ PC DVD HDTV用（ブラック）

また抵抗がむき出しなのは危険なので
55円でダミープラグを作ってVirtualDesktopのデスクトップを広げた話 - Qiita
のようにコネクターにしたほうがいいですね。

uxcell VGAコネクタ VGA 3-Row 15ピンオスプラグ Dサブコネクタ アダプタ 2個入り

出来合いのものもあるようですが抵抗つけただけでできると知ると買う気が起きませんね…。

Nrpfell VGA仮想ディスプレイアダプタ オスのダミープラグ EDID無頭幽霊ディスプレイ エミュレータ 、ロックプレート

レーザーカッターでラズパイケースをつくる

以前100均素材でラズパイケースをつくったが
最近はもっぱらMDFボードをレーザーカッターで切ってつくっている。

こういうものには3Dプリンターだろうと思って試したのだが
現状では設計時間もコストも工作時間も精度も
レーザーカッターの方がいいという結論に。
箱状のものだからなのだとは思う。

自分のつくりかたを紹介する。

まずおおまかな設計。
今回はラズパイZeroの公式ケースがそのまま収まるケースを作る。

「raspberry pi zero size」などでWeb検索してサイズの入った図面を手に入れ
サイズを把握する。

以下のサイトでベースとなる図面を作成する。

www.makercase.com

2.5mm厚のMDFを使う予定なので「Material Thickness」は2.5mmに。
「Generate Laser Cutter Case Plans」でsvgファイルを出力する。

このSVGをIllustratorなどで編集して
カメラ用の穴やUSB端子用の穴を加えたりする。

正しい位置に穴を加えるために
前述のサイズの入った図面を使ったり
実際に公式ケースのサイズを測ったりする。
サイズを測るのにはデジタルノギスが便利。

高儀 M&M デジタルノギス カーボンファイバー 150mm DCN-150

できた図面。

図面ができたら2.5mm厚のMDFボードを買う。
大きなホームセンターに行けば手に入ると思う。
自分は近くのUnidy等で買う。
大きなものを買ってn等分にカットしてもらうと割安に。

あとはMDFボードをレーザーカッターで図面に従ってカットする。

レーザーカッターを時間貸ししている施設で行う。
自分はFabLabをよく使っている。

図面と素材を持っていくとレーザーカッターでカットしてくれるという場所もある。
自分はCAINZ工房を一度使ったことがある。

CAINZというホームセンター内にレーザーカッターがあり
そこで買ったMDFならカットしてくれる。
量産するならば割安になると思う。

カットできたら組み立てる。

ネジで止めて、お得意の100均の三脚をつける。

ちなみに
こちらの「ラズパイZero公式ケース用ケース(三脚付き)」を
2/10の同人ハードウェアフェスにて販売予定です。
よろしければお越しください。
mag.switch-science.com

ポケモンGOフレンド。

数ヶ月前のこと。

ポケモンGOのフレンドが
同僚のおっちゃん1人しかいなかったので
なんとなくフレンド募集掲示板に書き込まれていた
フレンドコード何件かにフレンド申請を送ってみた。

程なくして数人から承認が。
めでたくフレンドが増えたと思ったのもつかの間
何回かプレゼント交換が済むと次々と縁切りされてしまった。

そんな中1人残った方が。

1ヶ月間くらいか。

その方は、島根県松江の方らしく
毎日松江のお寺なんかの心休まる風景(ポケストップ画像)が
送られてくる。

僕はというと
気を抜くと家の前の公園で満たされてしまうプレゼントの中から
マシな風景(それでも通勤経路の風景なのだが)を
見繕って送る日々。

そんな日が続いた。

そしてある日、いつものようにプレゼントを開けてみると
そこにはいつもと違う風景が。

「松江空港」

え、空港？ …旅行？ どこへ…？

こっちに来る？ いや、あるはずない、妄想も大概に…

顔も名前も知らない
毎日ポケストップ画像をやり取りするだけの関係。

そして翌日送られてきたのは

「ディズニーリゾート」

なんかこう、わくわく感が伝わってくる。
ポケストップ画像だけでこの表現力。

やるじゃんか…！

…って、そういうゲームじゃねえからこれ！

Chromebook で chromebrew を試す。

最近 Visual Studio Code を使っていて、Chromebook版もあるということを知り試してみた。

Visual Studio Code for Chromebooks and Raspberry Pi

見てみると crouton extension を使うもののよう。起動に少し手間がかかる。
インストールして画面が出た時は感動したが
いざ使えてみると他のツールも使いたくなり
結局フルスペックのPCじゃないとだめじゃないかという結論に…。

いやいや、Chromebook は Chromebook としていいところがあって
それにあと少しだけ、ローカルで、ちょっとしたテキストを打ったり、ちょっとしたプログラムを組んだり、そういったことができればいいんだと気づく。

そんなところに chromebrew というものを見つけた。
Homebrew のような Chrome OS 用のパッケージマネージャー。

GitHub - skycocker/chromebrew: Package manager for Chrome OS

開発者モードで使えるシェル上で、chroutonを使わずに、Linuxでお馴染みの各種ソフトをインストールしたり、使ったりできるようになる。
インストールは簡単。

1. Chromebook をデベロッパーモードにする
2. Chrome 上で ctrl+alt+t でcroshシェルのタブを開き
3. shell と打ってエンターキーでデベロッパーシェルを開く
4. 以下のコマンドを打ってエンターキーでインストール実行

curl -Ls git.io/vddgY | bash

※ wgetを使ったインストールは最新の Chrome OS にはwgetコマンドがなく使えず

Windowsな人に優しいキーバインドのターミナルベースのテキストエディター「micro」や「Pytyon3」「openssh」なんかをインストールした。

デベロッパーシェル上で以下を実行すればそれぞれインストールできる。

crew install micro
crew install python3
crew install openssh

なかなかいいじゃないか。

Selenium+Python+PhantomJSでWebサイトのスクレイピング

先回の続き。

操作対象のWebブラウザーをChromeからPhantomJSに変える。

PhantomJSはGUIを持たない、いわば透明なブラウザー。
これにしてやると、動作中に画面を占領されないし
コマンドラインから起動できてサーバー上でのバッチ実行などにも使えるようになる。

PhantomJSインストール

http://phantomjs.org/download.html からダウンロードしてパスを通しておく。

操作用Pythonスクリプトの作成

先回とほぼ同じ。
webdriverの作成の部分だけ変わる。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import codecs
import time

from selenium import webdriver
from selenium.common.exceptions import TimeoutException

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

WAIT_SECOND = 30

USER_AGENT = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36"

if __name__ == '__main__':

    driver = webdriver.PhantomJS(
        service_args=['--ignore-ssl-errors=true', '--ssl-protocol=TLSv1'], 
        desired_capabilities={'phantomjs.page.settings.userAgent': USER_AGENT})
    driver.set_window_size(1280, 1024)

    driver.get('https://google.co.jp/')

    # 検索キーワードとエンターキーを入力
    t=driver.find_element_by_id('lst-ib')
    t.send_keys(u'てけとーぶろぐ\n')

    # 要素の表示待ち
    WebDriverWait(driver, WAIT_SECOND).until(
        EC.visibility_of_element_located((By.CLASS_NAME, '_Rm')))

    # リンクをクリック
    b=driver.find_element_by_xpath('//*[@id="rso"]/div/div/div[1]/div/div/h3/a')
    b.click()

    # 要素の表示待ち
    WebDriverWait(driver, WAIT_SECOND).until(
        EC.visibility_of_element_located((By.CLASS_NAME, 'entry-title-link')))

    # スクリーンショットの保存
    driver.save_screenshot("ss.png")

    # ソースの書き出し
    file_name = 'test.html'
    with codecs.open(file_name, 'a', 'utf_8') as f:
        f.write(driver.page_source)

    driver.close()

ポイント

service_args

CentOSにおいてサイトによってはこの設定をしないと表示できなかったので指定する。

userAgent

今回はChromeと同じユーザーエージェントを設定している。
サイトによってはこの設定をしないとChromeでの表示結果と変わってしまうので指定する。

スクリーンショット

以下のコードでスクリーンショットを画像ファイルとして保存できる。

driver.save_screenshot("ss.png")

見えないブラウザーなので状況把握に便利。

Selenium+PythonでChromeの自動操作

Webアプリのテストのときや、Web上のデータ収集のときなど
Webブラウザーを自作プログラムから操作できると便利なことがある。

というわけでSelenium+PythonでChromeを自動操作してみる。

今回は Windows, Python 2.7 という組み合わせで行ったけど
Python 3.x でも同様だと思う。

Pythonのインストール

https://www.python.org/の「Download」から
「python-2.7.13.msi」をダウンロードしてインストールする。

Python用Seleniumのインストール

「C:\Python27」「C:\Python27\Scripts」にパスを通した状態で
コマンドプロンプトから以下を実行する。

pip install selenium

Chrome用ドライバーのインストール

https://sites.google.com/a/chromium.org/chromedriver/downloads
の「Latest Release: ChromeDriver 2.29」のリンクから
「chromedriver_win32.zip」をダウンロード、展開して
中の「chromedriver.exe」を適当な場所に置く。

操作用Pythonスクリプトの作成

例えば「main.py」として以下のように作成する。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

import codecs

from selenium import webdriver
from selenium.common.exceptions import TimeoutException

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

WAIT_SECOND = 30

if __name__ == '__main__':

    driver = webdriver.Chrome()  
    driver.maximize_window()    
    driver.get('https://google.co.jp')
    
    # 検索キーワードとエンターキーを入力
    t=driver.find_element_by_id('lst-ib')
    t.send_keys(u'てけとーぶろぐ\n')

    # 要素の表示待ち
    WebDriverWait(driver, WAIT_SECOND).until(
        EC.visibility_of_element_located((By.CLASS_NAME, '_Rm')))

    # リンクをクリック
    b=driver.find_element_by_xpath('//*[@id="rso"]/div/div/div[1]/div/div/h3/a')
    b.click()

    # 要素の表示待ち
    WebDriverWait(driver, WAIT_SECOND).until(
        EC.visibility_of_element_located((By.CLASS_NAME, 'entry-title-link')))

    # ソースの書き出し
    file_name = 'test.html'
    with codecs.open(file_name, 'a', 'utf_8') as f:
        f.write(driver.page_source)

    driver.close()

操作用Pythonスクリプトの実行

「chromedriver.exe」にパスを通した状態で
作成した操作用Pythonスクリプトを実行する。

python main.py

ポイント

要素情報の確認方法

スクリプトでWebサイト上の要素を指定するのに
要素のXPathなどが必要だがこの確認には
Webブラウザーの機能を使うのが楽。
ChromeだとF12キーでデベロッパーツールを表示して
Shift+Ctrl+C を押してから要素をマウスクリック。
HTML上でハイライトされた行を右クリックして
Copy → Copy XPath とか。

確実なロード待ち方法

読み込み待ちには上記の例のように表示を待つのが確実。
サイトによっては要素を非表示状態でロードした後
動的に表示状態に切り替えたりするので。

その他の要素指定方法

要素の指定の仕方はXPath以外にも幾つかある。
ドキュメントをどうぞ。
http://selenium-python.readthedocs.io/locating-elements.html

AndroidDrawableResizer

Androidアプリ作成の際に、画像を使う場合
各解像度用の画像を用意するのが望ましいのだけど
手でつくっていると面倒なのでツールを作った。

GitHub - kurima-yoshida/AndroidDrawableResizer

settings.json に設定を書き込んで
変換元のファイルを引数として渡して実行すると
指定のフォルダー内に変換後のファイルが生成される。

拡大縮小の他に、非透明色部分を指定の色で塗りつぶす機能も付けている。

例えばMaterial icons - Material Designでダウンロードしたアイコンを好きな色にできる。

Windows用の実行ファイルは以下。

drisezer100.zip