Raspberry Pi2による、アナログTVのSmartTV化

退役寸前のブラウン管TVのリサイクル回収料金*2で、捨てずに先進ネット
TV化し、URL入力・ネットサーフィンは無線KB/Mouseで快適という環境を
実現しました。
もちろん、Youtube、インターネットラジオも視聴できます。
【追記】USB-TVチューナーの接続もOKになりました。
【追記】４月２０日で、Youtube Data API V2が停止になったため、V3対応の変更を掲載しました。

部品手配
１）RaspberryPi2本体　（Pi3も動作確認済です）
　　RSコンポーネンツ　4410円（税抜）
２）ヒートシンク（推奨）
　　ビクトリーセブン　 432円
３）MicroSDカード ８GB
　　あきばお～ 　　　 400円
４）４極RCA 435-RF3
　　Ａｍａｚｏｎ　　　　311円
５）ワイヤレスKB/Mouse
　　Amazon　EW-AM-009 　2980円
　　漢字入力は、Ctrl+Space、２回押すと英字入力。
６）ケース
　　Can★Doカードケース108円
計）　　　　　　　　　8641円
※ラズパイと共にケースに777円かけられるなら、これですね。
※下記インストールと６番までの設定を施したMicroSDカードもいくつか
　手元にあり、希望者にお分けしています。(2000円)

１．OSのSDカード作成
　Downloads | Raspberry Pi（http://www.raspberrypi.org/downloads）
　上記のサイトで最新のRaspbianをダウンロード
　2015-02-16-raspbian-wheezy.img(974MB)
　2015-05-05-raspbian-wheezy.img(990MB) ※代表で説明文を作成している
　2015-09-24-raspbian-jessie.zip(1.24 GB)
　　　　参考 http://blog.livedoor.jp/noanoa07/archives/2061432.html
　2016-03-18-raspbian-jessie.zip(1.32 GB)
　解凍したファイルに2015-05-05-raspbian-wheezy.imgがあるので、
　それをSDカードに焼く。
　そのため、Win32DiskImager（http://sourceforge.net/projects/win32diskimager/）
　をダウンロードして解凍する。
　解凍したファイルの中のWin32DiskImager.exeをクリックする。
　Image Fileに2015-05-05-raspbian-wheezy.imgを指定し、
　DeviceにはSDカードのドライブを指定する。
　その後、Writeをクリックすると、ドライブ上書きが確認され、YESクリック後
　しばらくして、書込みがWrite Successfulを表示し、完了する。
　これで、Raspberry Pi2のOSがSDカードにインストールされました。

２．TVへの接続と環境設定
　HDMI接続の液晶TVがあれば、それに接続する。
　アナログTVであれば、3.5φの４極コネクタにRCA変換ケーブルを接続し、
　TVに繋げる。映像信号は、Jack口から１番目であることに注意する。
　（即ち、標準ＲＣＡケーブルの赤色と黄色を交差させて接続する）
　さらに、USBキーボードを接続しておく。
　OSを焼いたSDカードをセットし、LANケーブルを接続後マイクロUSB
　ケーブルから５Vを供給する。USBケーブルは、線抵抗が低いものを選ぶこと。
　ログインが促されるので、デフォルトの pi、raspberry、を入力する。
　　NOTICE: Please run ‘sudo raspi-config’
　と出力されるので、次のように進める。
　コマンド：sudo raspi-config　を入力し、構成ツールの画面にする。
　画面が表示され停止するので、次のように設定していく（↑↓Enter）。
　Jessie以降は、次も参照：https://tool-lab.com/make/raspberrypi-startup-7/
1.Expand Filesystem
　Enterキーを押し、OKで再度Enter。
　TABキーでFinishへ移動し、Enter,　YesでEnter。
　The system is going down for reboot NOW!と表示され、再起動される。
　ログインが促されるので、デフォルトの pi、raspberry、を入力する。
2.Change User Password
　適宜、変更しておく（２回同じ入力をし、OKでEnter）。
8.Advanced Options
　A0 Update
　　頻繁に更新が発行されているので、まず、最新にする。
　TABキーでFinishへ移動し、Enter,　YesでEnter。
　次のコマンドで、アップグレードし、再起動する。
　sudo apt-get upgrade;reboot
　ログインが促されるので、pi、新パスワードを入力してログインする。
　コマンド：sudo raspi-config　を入力し、構成ツールの画面にする。
3.Enable Boot to Desktop
　　Desktop Log in as user ‘pi’ at the graphical desktop
　　を選択し、OKを選択する。
4.Internationalisation Options
　I1 Change Locale
　　en_GBをスペースキーで消しen_US.UTF-8、ja_JP.UTF-8を
　　スペースキーでマークする
　　ok、en_USを選択する。
　I2 Change Timezone
　　Asia、Tokyoを選択する。
　I3 Change Keyboard Layout
　　Generic 101-key PC、English（US)、右Alt(AltGr)、コンポーズキーなし、
　　 yes、を選択する（自動で選択される場合もある）。
7.OverClocking
　Pi2を選択する。
8.Advanced Options
　A2 Hostname　適宜
　A3 Memory Split　64でもOK
　Finish、yesで、The system is going down for reboot NOW!と
　表示され、再起動。
　ログインが促されるので、pi、新パスワードを入力してログインする。

３．日本語環境のインストール（PC or MACからが容易）
　OSを焼いたSDカードをセットし、LANケーブルを接続後マイクロUSB
　ケーブルから５Vを供給する。
　グリーンのLEDの点滅を確認後、落ち着いたら、ルーターの管理画面
　などから最新のDHCP払い出しのアドレスを調べる。

　Mac-OSXではターミナル、PCではダウンロードしたPuTTYを起動し、
　上で調べたアドレスをホスト名に入れ、「開く」をクリックする。
　ログインが促されるので、pi、新パスワードを入力してログインする。

　・日本語フォントをインストールする。

sudo apt-get install ttf-kochi-gothic ttf-kochi-mincho fonts-takao fonts-vlgothic fonts-ipafont xfonts-intl-japanese xfonts-intl-japanese-big xfonts-kaname

・日本語入力をインストールする。(ｰ05-05,-09-24ではインストール済なのでibusのみ)

sudo apt-get install ibus-anthy

・日本語フロントプロセッサを有効にする。
デスクトップの「設定」「iBUSの設定」を選択し、インプットメソッドの選択で
日本語にAnthyまたはJapaneseを選び追加する。
・ショートカットキーをControl+spaceにする。
・デフォルトを日本語モード・USキーボードにする

 echo "export LANG=ja_JP.UTF-8" >> ~/.profile
 echo "setxkbmap us" >> ~/.profile

４．環境の拡張
スワップ領域を拡張する（10倍）
sudo vi /etc/dphys-swapfile

　 CONF_SWAPSIZE=1000

ユーザーを追加する

　sudo adduser　xxxxx
　 sudo vigr		piの後ろに:xxxxx
　 sudo vigr -s 	piの後ろに:xxxxx
　ルートパスワードを設定する
　sudo passwd
　ルート・ログイン確認
　su -

ここで再起動
sudo reboot
新しいユーザーでログインする
デフォルトを日本語モード・ＵＳキーボードにする
echo “export LANG=ja_JP.UTF-8” >> ~/.profile
echo ”setxkbmap us” >> ~/.profile

５．VNC接続で、PCでのX-Window

（VNCではなく、リモートデスクトップを使う時は、コメント投稿を参照）

　sudo apt-get install tightvncserver
　tightvncserver

（初回はパスワード設定あり・・8桁）
WindowsにUltraVNCViewerをインストールする。
VNCViewerを起動する（最初はパスワード入力）
毎回、自動起動にする
sudo vi /etc/init.d/vncboot

### BEGIN INIT INFO
# Provides: vncboot
# Required-Start: $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start VNC Server at boot time
# Description: Start VNC Server at boot time.
### END INIT INFO

#! /bin/sh
# /etc/init.d/vncboot
USER=pi
HOME=/home/pi

export USER HOME

case "$1" in
    start)
        echo "Starting VNC Server"
        #Insert your favoured settings for a VNC session
        su $USER -c '/usr/bin/vncserver :1 -geometry 1600x900 -depth 24'
        ;;

    stop)
        echo "Stopping VNC Server"
        su $USER -c '/usr/bin/vncserver -kill :1'
        ;;

    *)
        echo "Usage: /etc/init.d/vncboot {start|stop}"
        exit 1
        ;;
esac

exit 0

sudo chmod 755 /etc/init.d/vncboot
sudo update-rc.d vncboot defaults

６．サウンド・映像環境の設定
Google Chromeブラウザ、Youtubeのインストール
http://netbuffalo.doorblog.jp/archives/4592632.htmlを参考に。
Jessie以降のChromiumのインストールについては、コメント投稿を参照。

　amixer cset numid=3 1
　sudo apt-get install mpg321 vorbis-tools youtube-dl chromium-browser

curl -sL https://deb.nodesource.com/setup | sudo bash -
sudo apt-get install -y build-essential python-dev python-rpi.gpio nodejs

npm install express
npm install socket.io
npm install omxcontrol
git clone git://github.com/DonaldDerek/RaspberryPiTV.git
cd RaspberryPiTV/ (cd *TV でも可)
npm install

フォルダ権限を毎回与える
sudo vi /etc/rc.local

chmod a+rw /dev/vchiq

再起動する
cd RaspberryPiTV/ (cd *TV でも可)
node app.js （RaspberryPiTVの起動）

Youtube Data API V3への対応（2015.4.21以降）
RaspberryPiTV/public/js/remote.js を次のソースで置き換える。

var host = document.location.origin;
var Youtube;
var google="AIzaSyC3VBRnfUU9_qO1Gr1ARBO8BZLT-Sp6vFc";
var socket = io.connect(host);
socket.on('connect', function(data){
        socket.emit('remote');

    $("#filter").focus();
        //Youtube
  Youtube = {
        getVideo: function(query, socket){
                var max_videos = 25;
                var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q=" + escape(query) + "&maxResults=" + max_videos + "&key=" + google;
                $.getJSON(url, function(data){
                        $("ul.video").html('');
                        var idx,id="",cnm="";
                        for (idx=0;idx<data.items.length;idx++) {
                            var a = data.items[idx],
                                id = id + cnm + a.id.videoId ;
                                cnm = ",";
                        }
                        var url2 = "https://www.googleapis.com/youtube/v3/videos?part=id,snippet,contentDetails&id=" + id +  "&key=" + google;
                        $.getJSON(url2, function(data1) {
                                var n = 0;
                                var videoId = new Array(3);
                                var duration = new Array(3);
                                var title = new Array(3);
                                var thumbnail = new Array(3);
                                var htmlBlk =  $('#videoTpl0').html();
                           $(data1.items).each(function(key,item) {
                                videoId[0] = item.id;
                                var totalSec = item.contentDetails.duration;
                                var three = totalSec.replace(/[THMS]/g, ':').split(':');
                                if (three.length==4) three[0] = "0";
                                else if (three.length==3) {three[0]="0";three.unshift("0");}
                                duration[0] = (parseInt(three[0]) < 10 ? "0":"") + three[0] + ":" + (parseInt(three[1]) < 10 ? "0":"") + three[1] + ":" + (parseInt(three[2]) < 10 ? "0":"") + three[2];
                                    title[0] = item.snippet.title;
                                    thumbnail[0] = item.snippet.thumbnails.default.url;
                                var jsonObj = {
                                        id:videoId[0],
                                        title:title[0],
                                        thumbnail:thumbnail[0],
                                        duration:duration[0]};
                                var template = $('#videoTpl1').html();
                                var html = Mustache.to_html(template, jsonObj);
                                if (++n==1) {
                                        htmlBlk += "<tr>"+html;
                                }
                                if (n==2) {
                                        htmlBlk += html;
                                }
                                if (n==3) {
                                        htmlBlk += html+"</tr>";
                                        n = 0;
                                }
                            });
                            $('ul.video').html( htmlBlk+"</tr></table>");
                            Youtube.watchOn(socket);
                        });
                });
        },
        watchOn: function(socket) {
            $(".watch").on("click",function(){
                var video_id = $(this).data('id');
                socket.emit('video',{action:"play", video_id:video_id});
            });
        }
  }

$$(".r-container").swipeLeft(function(){
        socket.emit('controll',{action:"swipeLeft"});
});
$$(".r-container").swipeRight(function(){
        socket.emit('controll',{action:"swipeRight"});
});
$$(".r-header").tap(function(){
        socket.emit('controll',{action:"tap"});
        $(".app-body").fadeToggle("fast", function () {});
        $.get(host+'/omx/quit',function(data){
                console.log(data);
        });
});
$$(".app-body").tap(function(){
        $.get(host+'/omx/pause',function(data){
                console.log(data);
        });
});
$(".search input").change(function() {
        Youtube.getVideo($(this).val(), socket);
 });
 socket.on("loading", function(data){
        console.log(data);
 })
});

同様、remote.html 内の template 部分を３段組みに拡張する。

        <script id="videoTpl0" type="text/template">
                <table style="width: 700px" cols=3><tr>
        </script>
        <script id="videoTpl1" type="text/template">
                <td width="200px">
                <li class="block">
                        <div  class="tile">
                                <img class="tile-image big-illustration" src="{{thumbnail}}"/>
                                <h3 class="tile-title">{{title}}</h3>
                                <p>Duration: {{duration}}</p>
                                <a class="btn button btn-primary btn-large btn-block watch" data-id={{id}}>Watch</a>
                        </div >
                </li></td>
        </script>
        <script id="videoTpl2" type="text/template">
                </tr></table>
        </script>

Chromiumの日本語モード設定
1.「Chromium」を実行。
2.画面右上の「三本線」ボタンをクリックし、「Settings」を選択。
3.一番下までスクロールさせて「Advanced Settings」ボタンをクリック。
4.詳細設定画面が表示されるので、画面を少し下にスクロールさせ、
「Languages and spell-checker settings」ボタンをクリック。
5.「Language」という画面で、左下にある「Add」ボタンをクリック。
6.「Add Language」という画面で中央のプルダウンメニューをクリックし、
「Japanese – 日本語」を選択 →「OK」ボタンをクリック。
7.「Language」画面の左側に、「Japanese」という項目が追加されており、
この「Japanese」をドラッグしてリストの一番上に移動することで、
最優先に使用する設定に変更する。
8.「Chromium」を終了させ、再起動すると、表示が日本語になっている。

TVに合わせた文字拡大
フォントサイズを大に変更
デスクトップのアイコンサイズを変更するには、ファイルマネージャーで、
「編集－＞設定、ディスプレイ、大きなアイコン」のサイズを変更すれば良い。
また一般タブのデフォルトのビューでビューのモードをコンパクトにしておくと
使いやすい。

アイコンの文字サイズはデスクトップ設定のラベルのテキストのフォントを変更する。
Chromeブラウザで http://localhost:8080/remote へアクセスする。
画面のWatchボタンをクリックする。

インターネットラジオ
http://www.raspberrypi.org/forums/viewtopic.php?f=82&t=45424
動画・ラジオの再生
DEVICE PLUS hobby raspberrypi
http://wp.developapp.net/?p=3206

mplayerの起動に、-cache 64 を追加する。

最終的なconfig.txt（抜粋：下記に合わせて該当箇所を修正する）
参考：　Config

# uncomment to force a specific HDMI mode (this will force VGA)
hdmi_group=1
hdmi_mode=16

# uncomment to force a HDMI mode rather than DVI. This can make audio work in
# DMT (computer monitor) modes
hdmi_drive=2
# uncomment for composite PAL
sdtv_mode=1
sdtv_aspect=3
#uncomment to overclock the arm. 700 MHz is the default.
arm_freq=1000

start_x=0
core_freq=540
sdram_freq=540
over_voltage=2

７．無線LANを有効にする（任意拡張）
アダプタは、消費電力の小さなコレがお勧めですね。
wpa_passphrase Your_SSID Your_Passphrase
得られた４行を元に、構成ファイルに追記する。
sudo vi /etc/wpa_supplicant/wpa_supplicant.conf

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
update_config=1
network={
        ssid="Your_SSID"
        #psk="Your_Passphrase"
        psk=hogehogehogehogehogehogehogehogehoge
        key_mgmt=WPA-PSK #←追加
        proto=WPA2 #←追加
        pairwise=CCMP #←追加
        group=CCMP #←追加
        priority=2 #←追加
}

無線LANのインタフェース設定をする。
・sudo vi /etc/network/interfaces　（Raspbian-02-16までの設定）

iface lo inet loopback
iface eth0 inet dhcp

auto wlan0
allow-hotplug wlan0
iface wlan0 inet dhcp

wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
iface default inet dhcp

固定IPアドレスに出来る場合は、次のように変え、追記する。
dhcp　⇒　static
address 192.168.x.xx
netmask 255.255.255.0
gateway 192.168.x.1
・sudo vi /etc/dhcpcd.conf　（Raspbian-05-05からの固定アドレス設定）
interface wlan0
static ip_address=192.168.x.xx/24
static routers=192.168.x.1
static domain_name_servers=192.168.x.1

無線LANのスリープをやめる
sudo vi /etc/modprobe.d/8192cu.conf

# Disable power management
options 8192cu rtw_power_mgnt=0

８．Bluetoothへの挑戦（任意拡張）
Jessie版でのBluetooth接続は、コメント投稿を参照のこと。

　sudo apt-get update
　sudo apt-get -y install --no-install-recommends bluetooth
　sudo apt-get -y install bluez-utils blueman
　キーボードをペアリングモードにし、
　hcitool scan

MAC-addressが得られるので、次のコマンド群で指定する。
sudo bluez-simple-agent hci0 MAC-address
PINコードを0000Enterと入力する
同時に、キーボードからも同じ入力を実施する。
Release
New device (/org/bluez/2808/hci0/dev_MAC-address)
これでペアリングは成功している。
Creating device failed: org.bluez.Error.AlreadyExists: Already Exists
というエラーメッセージがでたら、次のコマンドで戻し、再試行する。
sudo bluez-test-device remove MAC-address
正式登録をする。
sudo bluez-test-device trusted MAC-address
次のコマンドで再接続できる。
sudo bluez-test-input connect MAC-address
接続確認は、次のコマンド。
hcitool con

Bluetooth強制接続（.profileに書くと超強力）
sudo hidd –connect （My KeyboardのMacAddress）
sudo hidd –connect （My MouseのMacAddress）