読者です 読者をやめる 読者になる 読者になる

仮住いのアパートにBS・CSアンテナを無計画に設置しようとしたら大変だった

長年住んだマンショの部屋をリフォームするために、仮住い用のアパートを借りて引っ越しました。 そのアパートにテレビは地上波しか来てなかったのす。私はけっこうテレビを見ます特にNHK-BSの歴史番組や旅番組などが好きです、また娘も某プロ野球チームの試合を見るために有料CSを契約しています。

マンションは地上波とBS・CSが1本のケーブルで来ていて簡単に見れていました。 そんなわけでBS・CSなんてアンテナ買ってケーブルつなげばOKと安易に考えていました。

f:id:yuum3:20160904104323j:plain

1. アンテナやケーブルを買った

安易に都内の住宅地でだからアンテナは室内アンテナでも映るだろうと思い BSアンテナ 室内用セット を買いました。 f:id:yuum3:20160904160018j:plain

これを以下のようにつなげば BS・CS が見えると思っていましたが、引っ越してアパートに設置するとまったく映りませんでした ^^;

f:id:yuum3:20160904154524p:plain

2.アンテナには電源を供給しないといけない!

映らないのでアンテナの取り扱い説明書を穴の開くほど読みました。すると「電源」という言葉が当たり前にように書かれています。ネットでしらべるとBS・CSアンテナには同軸ケーブルをつうじ5Vの電源を供給しないといけないようです。だいたいのBSチューナーにはこの電源を供給する機能が付いているそうですが、使っているチューナー PIX-BR310W には電源供給機能が無いそうです。

そこで、サブに使っている(以前はメインで使っていた)BSチューナーDTH310を接続してみました。このチューナーには電源供給機能があります。そこで DTH310+EyeTV HD でアンテナに接続してみました。テスターで測定するとアンテナには5Vが来てます! さらにBSチューナーの受信レベル表示機能がある事が判りレベルを見てみましたが 0 でした。

f:id:yuum3:20160904154545p:plain

3. 室内では受信できない!

何度も何度もネットで検索し、かなりBS・CSの知識がたまりましたが、この構成で問題はなさそうです。試しにBSアンテナを窓から出して近所の家のBSアンテナと同じような向きに向けてみましたが、レベルは0のままです・・・・

万策尽きました・・・ そこで、BSアンテナのサポートセンターに電話してみました。そこで判ったことは

  • 「受信レベルには最大という表示欄があり過去の最高の受信レベルが表示されている」・・・ 見ると 14 でした、窓から出した時に受信したようです
  • 「受信出来るアンテナの方向の範囲はかなり狭い 2° くらい」
  • 「レベル表示は1秒くら測定してから表示されるので、アンテナの向きを変えた後はしばらく待つ」

というアドバイスをもとに再チャレンジ。すると上の構成でアンテナを窓の外で調整するととで無事にBS・CSが受信できました!

4. そして現在の構成へ

DTH310+EyeTV HDで使ってもよいのですが、PIX-BR310W は録画中に他の番組を見れるとか、操作は全てMacから出来るので使い易い等があり、下のように DTH310 はアンテナへの電源供給のみに使い、アンテナはベランダ(?)の手すりに取り付け金具を買い一番上の写真のように設置し無事にBS・CSが見られるようになりました。

f:id:yuum3:20160904154556p:plain

結論

BS・CSアンテナの設置は思った以上にたいへんでした、適当に進めたので室内アンテナスタンドは無駄になってしまいました。 やはり何事もよく調べて行わないといけませんね ^^;

ネットでTVが完全に見れるようにならないかなぁ〜

Pureを使い会社のホームページをレスポンシブウェブデザインにした

今更という感じもありますが、私の会社のホームページ をレスポンシブウェブデザインに対応しました。

f:id:yuum3:20160608143213p:plain

レスポンシブ CSS フレームワークの選定

レスポンシブウェブデザインにするのには、何らかの レスポンシブ CSS フレームワーク を使うのが早道です、 ネットを検索すると、たくさんの レスポンシブ CSS フレームワーク がありま、有名どころは Bootstrap でしょうか。

会社のホームページは複雑なフォーム等はないので、

  • CSSのサイズが小さい
  • JQueryやJSを前提としてない
  • シンプル

という条件で調べてみましたところ、 Kube, Skeleton, Pure などが候補になりました。

Kube は以前、「お問い合わせフォーム」で使っていたのですが、ホームページに Version 5.0 があるのに GitHubは Version 4.03 だったので怪しいと思い止めました。Skeletonはシンプルで良さそうでしたが、使用例がなくGitHubも2年ほど更新されてないので止めました。ということで Pure になりました。

Pure を使った感想

  • シンプルで良かったです
  • レイアウトのサンプルが ホームページのLayoutsにあり助かりました。
  • ただし、スマフォ画面でメニューを表示する JSのコードが YUI を使っていて戸惑いましたが、無事に素のJSで書けました。
    • if (document.querySelector) {} があるのは古いIEで表示した際にエラーにならないようにするためです。
if (document.querySelector) {
  document.querySelector('.moble-menu-button').addEventListener('click', function() {
    document.querySelector('#nav').classList.toggle('active');
  });
}
   ...

共通+スマフォ用CSS

   ...

@media (min-width: 40em) {
   ...

  タブレット、PC用CSS 

   ...

}

@media (min-width: 60em) {

   ...

  PC用CSS 

   ...

}

React Nativeアプリを別のMacで動かそうとしてハマった メモ

あるセミナー向けに作った、React Nativeアプリを別のMacで git clone して実行しようとしたら 下の画像のエラーが出て解決まで時間がかったのでメモしておきます。

f:id:yuum3:20160523142141p:plain

React Native 開発環境の構築

React NativeのGetting Startedにある手順で

$ npm install -g react-native-cli
$ brew install watchman
$ brew install flow

インストールされた react-nativeコマンドでプロジェクトを作成

$ react-native init react_native

ボタンやTabBarのアイコンが使いたかったので、以下をインストール。 react-native-vector-icons をプロジェクトに設定するにのrnpm (React Native Package Manager) を利用

$ npm install --save react-native-button
# npm install --save react-native-vector-icons 

$ npm install rnpm -g
$ rnpm link

ここで react-native run-ios を実行すると、iOS用コードのコンパイルや別ウインドーに React packager が起動され、しばらくすると iOS Simulator が起動されるます。 後は index.ios.js を修正し、 iOS Simulator で⌘+R でリロードする事で開発が進められます。完成したものを GitHubに置きました。

Macでの作業

別のMac で git clone し

$ npm install -g react-native-cli
$ brew install watchman
$ brew install flow

$ nam install
$ react-native run-ios

iOS Simulator が起動されるのですが、上のような赤い画面が表示されました

画面に書かれている issue を眺め

  1. watchman watch-del-all
  2. rm -rf node_modules && nam install
  3. rm -rf $TMPDIR/react-packager-*

を実行しても同じ・・・・

落ち着いてターミナルを見ると

npm WARN react-native@0.26.1 requires a peer of react@15.0.2 but none was installed.

通常この手のワーニングが出っていても動く事が多いのですが、調べてみると react@15.1.0 がインストールされていました。そこで

$ npm uninstall --save react@15.1.0
$  npm install --save react@15.0.2

したところ、ワーニングは消え、

iOS Simulator で無事にアプリが起動されました ^^)/

このサンプルアプリは 私のGitHub react-native ブランチにあります。

React.js + Photon.css + Webpack で Electronのサンプルアプリを作ってみた

React.js + Photon.css + Webpack で Electronのサンプルアプリを作ってた時のメモです。

f:id:yuum3:20160523105315p:plain

開発環境

まず、以前書いた サーバーサイドプログラマーのためのReact.js 入門 2. 開発環境の構築の続き のように React.js の開発が出来る環境を準備します。

追加するのは electron-prebuiltMac OS X風なUIが作れる Photon を追加するのみです。

npm install photon で入る Photon は違うものなので注意して下さい。

  • インストール
$ npm install --save react react-dom
$ npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react
$ npm install --save-dev eslint eslint-loader eslint-plugin-react babel
$ npm install --save-dev css-loader style-loader
$ npm install --save isomorphic-fetch
$ npm install -g webpack

$ npm install --save-dev electron-prebuilt
$ npm install --save https://github.com/connors/photon
$ npm install --save-dev url-loader file-loader
  • webpack.config.js は
module.exports = {
  entry: {
    "app": "./src/js/index.js",
  },
  output: {
    path: './build/',
    filename: "[name].js"
  },
  module: {
    preLoaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "eslint-loader"
    }],
    loaders: [{
      test: /\.css$/,
      loader: "style!css"
    }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }, {
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
      loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
    }]
  },
  resolve: {
    extensions: ['', '.js', '.css']
  },
  eslint: {
    configFile: './.eslintrc'
  }
};
  • package.js に以下の設定を追加(変更)します
  "scripts": {
    "start": "electron main.js"
  },
  • main.js は ElectronのQuick Start からコピーし windowサイズを変更します

  • index.html は photon 用の class を指定しましたが、良くある React.js 用の index.html です。

<!DOCTYPE html>
<html>
<head>
  <title>じゃんけん ポン!</title>
  <meta charset="utf-8">
</head>
<body>
 <div id="example" class=window"></div>
  <script type="text/javascript" src="build/app.js" charset="utf-8"></script>
</body>
</html>
  • src/js/index.js は通常の React.js のコードです photonを使うために import 'photon/dist/css/photon.css' を追加したくらいです。

開発コマンド

Electron の開発は electron コマンドを起動する アプリのウィンドウが起動され、リロード(⌘+R) でコードが再ロードされるので開発できます。ただし electron コマンド は動き続けるので バックグラウンドで起動しました。

$ nam start &
$ webpack -d -w

今回つくったサンプルアプリ

React.js紹介セミナー 用に作ったサンプルコードは 私のGitHub を clone し electron ブランチです。 他のブランチには React Native 等のコードもあります ^^)

楽々GitLabサーバー作成手順

教育の仕事でGitLab(プライベートでpull requestなどが出せる安いサービス)が必要になり、サーバーを立ち上げました。以前は自社のコードもGitLabで管理していたのですが、今は 改造版Ginatra を使っているので、教育の期間のみGitLab用のサーバーを立ち上げる事にしました。

f:id:yuum3:20160516151328p:plain

GitLabのインストール

以前はGitLabのインストールはたいへんでしたが、今は apt や yum でインストールできます。 IaaSクラウドサービスでサーバーを準備し、インストールすれば簡単に完了です。 RDB(PostgreSQL), nginx 等もインストールされます。

私は Ubuntu が慣れているので、Ubuntu 14.04 にインストールしましました。

$ sudo apt-get update
$ sudo apt-get -y dost-upgrade

$ sudo apt-get install curl openssh-server ca-certificates postfix
$ curl -sS https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash
$ sudo apt-get install gitlab-ce
$ sudo gitlab-ctl reconfigure

SSL化しよう

この手のサーバーは今時 https で運用しますよね。 ということで無料でつかえる Let’s Encrypt を使う事にしました。有効期間は3ヶ月ですが教育期間は休みを含め 2ヶ月なので 更新作業も不要ですね ^^)

作業手順は Qiita にありました。ほぼこのままです。

$ git clone https://github.com/letsencrypt/letsencrypt.git
$ cd lets encrypt
$ ./letsencrypt-auto  --help      # installが行われる
$ sudo vi /etc/gitlab/gitlab.rb
---- custom_gitlab_server_config を変更
nginx['custom_gitlab_server_config'] = "include /etc/letsencrypt/nginx.conf;"
---

$ sudo mkdir /etc/letsencrypt
$ sudo vi /etc/letsencrypt/nginx.conf
--- 以下を追加
location ^~ /.well-known {
    alias /var/letsencrypt/.well-known;
}
---

$ sudo mkdir /var/letsencrypt
$ sudo gitlab-ctl reconfigure
$ ./letsencrypt-auto certonly --webroot --webroot-path /var/letsencrypt -d gitlab.ey-office.net
$ sudo vi /etc/gitlab/gitlab.rb
--- 以下の行を変更
external_url 'https://gitlab.ey-office.net'    # サーバーのURLを指定
nginx['redirect_http_to_https'] = true
nginx['ssl_certificate'] = "/etc/letsencrypt/live/gitlab.ey-office.net/fullchain.pem"
nginx['ssl_certificate_key'] = "/etc/letsencrypt/live/gitlab.ey-office.net/privkey.pem"
---

$ sudo gitlab-ctl reconfigure

デモなどで使えるGitコミットを簡単にresetし切替えるツールを作りました

私は仕事がら、人前でコード作成のデモを行う事がよくあります。その場でバリバリとライブ・コーデイング出来るとカッコ良いですが、間違えたり、コードを書くことに気を取られ説明がおろそかになったりすることも起こりがちです。

f:id:yuum3:20160506094523p:plain

そこで説明のストーリに沿ってコード作成の過程をgitにコミットしておき、コマンドで簡単に git reset を行い、その時点でのコードを説明したり、動かしたりできるツールを作りました。

上の画像のように、このコマンドを起動するとgit logが表示され、現在のコミットが赤い色で表示されます、ここで n キーを押すと次のコミットに git reset できます。また p キーで前のコミットに git reset したり、カーソル上下キーでコミットを移動して RETURNキーでそこにgit reset できます。

このコマンドを実行すると git reset されてしまうので、 -c オプション指定で 予めファイルに全git logを書いておきます。

rubyで作ってあります、 gem 等のインストールは不要です。

#!/usr/bin/env ruby

require 'io/console'

GIT_LIST_PATH = "#{ENV['HOME']}/tmp/git-demo.lst"

RED = "\e[31m"
YELLOW = "\e[33m"
BLACK = "\e[30m"
FIN = "\e[0m"

UP = "\e[A"
DOWN = "\e[B"
RETURN = "\r"


def show_log_item(item, current)
  if current
    print "#{RED}#{item[0]} #{BLACK}#{item[1]}#{FIN}#{RETURN}"
  else
    print "#{YELLOW}#{item[0]} #{BLACK}#{item[1]}#{FIN}#{RETURN}"
  end
end

def show_git_log(log, current_index)
  log.each_with_index do |item, ix|
    show_log_item(item, ix == current_index)
    puts
  end
end

def get_current_hash
  IO.read("|git log --pretty=format:'%h' -1")
end

def find_current_hash(log, current_hash)
  log.find_index {|item| item[0] == current_hash}
end

def wait_key
  key = STDIN.getch
  if key == "\e" && STDIN.getch == "["
    case STDIN.getch
    when "A" then ""
    when "B" then ""
    else ""
    end
  else
    key
  end
end

def cursor_up
  print UP
  STDOUT.flush
end

def cursor_down
  print DOWN
  STDOUT.flush
end

def set_cursor(log, current_index)
  (log.size - current_index).times { cursor_up }
end

def reset_cursor(log, current_index)
 (log.size - current_index).times { cursor_down }
end

def move_current_postion(log, index, delta)
  show_log_item(log[index], false)

  if delta > 0
    if index < log.size - 1
      cursor_down
      index += 1
    end
  else
    if index > 0
      cursor_up
      index -= 1
    end
  end

  show_log_item(log[index], true)
  index
end

def get_git_log
  IO.readlines(GIT_LIST_PATH).map {|s| s.scan(/^(\w+) (.*)\n?/)[0]}
end

def put_git_log
  system "git log --pretty=format:'%h %s' > #{GIT_LIST_PATH}"
end

def git_reset_hard(log, index)
  system "git reset --hard #{log[index][0]}"
end

def main
  log = get_git_log
  current_index = find_current_hash(log, get_current_hash)
  show_git_log(log, current_index)
  set_cursor(log, current_index)
  do_reset = false

  while true
    case wait_key
    when 'n'
      current_index = move_current_postion(log, current_index,  - 1)
      do_reset = true
      break
    when 'p'
      current_index = move_current_postion(log, current_index,  + 1)
      do_reset = true
      break
    when "\r", "\n"
      do_reset = true
      break
    when "\C-c", "q"
      break
    when ""
      current_index = move_current_postion(log, current_index,  - 1)
    when ""
      current_index = move_current_postion(log, current_index,  + 1)
    end
  end
  reset_cursor(log, current_index)
  git_reset_hard(log, current_index)  if do_reset

end

if ARGV.size > 0
  if ARGV[0] == "-c"
    put_git_log
    puts "#{GIT_LIST_PATH} created."
  else
    puts "#{$0} -c"
    puts "     or  "
    puts "#{$0} "
    puts "  n: git reset --hard Next commit"
    puts "  p: git reset --hard Pervious commit"
    puts "  ↑ ↓: seek commit"
    puts "  RETURN: git reset --hard Current commit"
    puts "  q: quit"
  end
else
  main
end

Gistにも置きました

React.jsの紹介的なセミナーを行います

React.jsの開発も終わり、得られた知見をもとに 5月23日 に React.jsの紹介的な無料セミナーを行います。

atnd.org

内容は、React.js がなぜ良いのか、開発環境について、簡単なアプリをライブで作成・・・ などの React.jsの紹介的な内容になります。

会場は人材系の会社で、終了後に軽食の出る懇親会をスポンサーしてもらっています。人材系の会社ですがブラックな会社ではないので安心して御参加ください。