2016-11-07

比較的簡単にGoogleマップに画像を重ねる

簡単なチップスですが、前回の記事「田園調布は思っていたより大きく、しかも昭和に取り残された街だった」を書くのに田園調布の地図に丁目を重ねた地図が欲しかったのですが、適当なものがネット上で発見出来なかったので、自分で作る事にしました。

方法のいろいろ

一番簡単なのは、Google マップで目的の地図を表示し画面をキャプチャーした画像の上に何らかのツールを使い画像を書いてしまう事です。がこれは利用規約的にはダメそうです。

Google Maps API ポリゴンを画く機能がります。地図をバックに適当なツールでポリゴンを書き、座標を緯度経度に変換できれば、JSを使い地図を拡大・縮小、移動できるマップが表示できますが、いろいろ面倒そうです・・・

そこで今回は、Google Maps API を使い地図を表示し、CSSで画像を上に乗せる方法にしました。表示用のHTML(JS)は以下のようになります。地図の上に乗せているのは画像なので、zoomControl, draggable 等をOFFにしてマップを拡大・縮小、移動出来ないようにしています。

画像の作成には Sketch を使いました、Sketchはベクトルで線やポリゴンが書けるので便利でした。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
#map {
  height: 600px;
  position: relative;
  width: 800px;
}

.maps-frame {
  height: 600px;
  width: 800px;
}

#overlay {
  z-index: 1;
  position: absolute;
}
    </style>
  </head>
  <body>
    <div id="map"></div>
    <img id="overlay" src="denen_area.png" />
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.594828, lng: 139.666311},
          scrollwheel: false,
          zoom: 14,
          streetViewControl: false,
          zoomControl: false,
          mapTypeControl: false,
          draggable: false
         });
      }
      var o = document.getElementById('overlay');
      var b = document.getElementById('map').getBoundingClientRect();
      o.style.left = b.left + "px";
      o.style.top  = b.top + "px";
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=ここに自分のGoogleMapsAPIのkeyを指定して下さい&callback=initMap" async defer>
    </script>
  </body>
</html>

Google Maps API はバージョンがいくつかありネット上には古いバージョンの記事などが多く注意が必要だったので記事にしました。

2016-10-28

田園調布は思っていたより大きく、しかも昭和に取り残された街だった (田園調布滞在記)

はじまり

みなさんは、田園調布にどんなイメージを持っていますか？

洒落た駅舎から放射状に広がる道とそれをつなぐ半円形の道の区画にお屋敷が建つ高級住宅地、というイメージでしょうか。

私は田園調布の１駅となりの自由が丘に20年以上住んでいるのですが、田園調布に訪れた事はほとんどありませんでした。したがってこのような一般的なイメージしか持っていませんでした。そんな私ですがマンションの部屋をリーフォームするにあたり田園調布2丁目のアパートに1ヶ月半ほど借り住まいする事になりました。

f:id:yuum3:20160904180336j:plain

田園調布とは

田園調布は、大正から昭和初期にかけ実業家渋沢栄一ら設立した田園都市株式会社が造成・販売した複数の住宅地の中でもシンボル的存在でした。

田園調布と名前が付いた場所は下の地図のような町名に分かれています。その大きさは地図で判るように大井町線沿線の自由が丘、九品仏、尾山台、等々力を加えたくらいの大きさがあります。

未知の町に来たので日々いろいろと散歩して周りました、簡単にかく町をまとめてみると。

田園調布3丁目：正確には大田区田園調布3丁目、最初に書いた田園調布のイメージのような “The 田園調布” と呼べるエリアです。ほとんどがお屋敷ばかりです
田園調布4丁目： 3丁目より高台にあり、多摩川そして川崎の方が眼下にみえる場所には大きなお屋敷が多数あります
玉川田園調布：ここは世田谷区ですが、環八の田園調布駅側は田園調布3丁目と区別できない高級住宅地です。環八の向こう側はお屋敷もありますが大きめの住宅が建つエリアです
田園調布5丁目：高台の方は田園調布4丁目とほぼ同じくお屋敷地帯です、ただし低地は庶民的な住宅も建っています
田園調布2丁目：駅の東側で商店街があったり、大きめの住宅が建つエリアです。ところどころ、お屋敷も建っています
田園調布1丁目：広いエリアで南の方は庶民的な住宅地です、しかし場所によってはお屋敷が建っています
田園調布本町、田園調布南：訪れてないので判りませんが、きほん庶民的な住宅地だとおもいます

歴史的に見ると、田園調布とはどこのエリアを指すかによると田園調布2〜4丁目と玉川田園調布あたりが元々の田園調布のようです。

田園調布の良いところ

緑が多く自然が豊富、そして静か

地図からも判るように非常に大きな多摩川台公園があります。その近くにある宝来公園もそれなの大きさがりますし、多摩川駅の東側も公園です。さらに街の中にも小さな公園がたくさんあります。また田園調布では家と家の間には木を植えるというルールがあるようです、町中が緑に囲まれています。朝などたくさんの鳥の鳴き声がします、蝉の音も都内では普段聞かない蝉の声が聞かれます。

そして静かです、道路際のマンションに住んでいる私には最初は静か過ぎて気持ち悪いくらいでした。

色々な住宅がみれる

たくさんのお屋敷、住宅が建っています。建築家にデザインしてもらったと思われる素敵な外見の住宅がたくさんあります、またバブルの時に建てたのでしょうかお城のような面白い建物も多数あります。ごく少数ですが戦前の建物もあります、住んでいたアパートの近くにはアールデコ風のお屋敷があり前を通るのが楽しみでした。

もし、自分の家を建てたいと思っている方は田園調布を散策されると良いのではと思います。

その他

長く続いた地元の人に愛されてる飲食店がある。私の住む自由が丘は長続きするお店が少ないのですが、ここでは数十年も地元に人に愛されてるお店が多いようです
東急東横線、東急目黒線、東急多摩川線(多摩川駅)の3路線が使えて便利
教会の鐘の音が聞こえる、多摩川駅のそばに大きなカソリックの教会があります。正午と夕方6時に鐘の音が聞こえるのは良いものです

田園調布の良くないところ

スーパーや商店が少ない

スーパーは駅前のプレッセ(東急ストアーの高級版)、環八沿いのナショナル田園(高級スーパー、ナショナル麻布の姉妹店)、中原街道のOTENTOくらいしかないです。

駅の東側の坂道の田園調布商店街はにぎわっていますが、そこから六間通り商店街に入るとシャッター通りです。営業してるか判らない肉屋が1つある程度で魚屋、八百屋などは無いです。コンビニも田園調布全体で4軒くらいしかないです。

私は自由が丘に用があるときは自由が丘で買って帰ったり、自転車で雪ケ谷大塚に行ったりしてました。近くに美味しく安い総菜屋さんが在った事が唯一の救いでした。

飲食店も少ない

飲食店も駅の近くと、六間通り商店街に少しあるくらいで外食も充実してません。ただし良いところに書いたように、地元に愛されてる店が多いと思います。その分、入りにくい雰囲気がある店も多いかもしれません。

住んでないと思われる家が多い

住宅しかない田園調布ですが、夕方や夜あるいてみて人が住んでない家がかなりあります。

廃虚：多くはありませんが廃虚があります、夜は怖いです・・・
メンテされてない家：廃虚にはなっていませんが、明らかに人が住んでなくメンテされてない家が数パーセントはあると思います
メンテされているが住んでいない家：アパートの大家さんの家も庭のお掃除等は行われていますが普段は住んでいないようです。このようなお家が20%パーセントくらいあるのではと思えました、普段は都心もマンションにでも住んでいるのでしょうか？
空き地：以前は家があったのでしょうが空き地になっている場所がかなりあります。高級住宅地の3丁目、4丁目にも・・・一時的な空き地ではなく何年も空き地のままという感じのところもあります。
建築が止まっている家：多くはありませんが建設途中で止まってしまっている場所もあります、草がボウボウと生えていて一時的な中断ではない事が判ります

緑が多い住宅地は良いのですが、夜は街が暗くなり怖さが増します ^^;

老人が多く活気がない

もちろん若い夫婦や子供はいますが、住宅地を歩くと老人が多いです。田園調布は完全な住宅地です、勤に来る人、買い物客、観光客もほぼいません、ゆいつ学校が多数あり小中高校生が通って来るくらいです。ほんとうに老人が目立ちます。

お店も老夫婦がやってるお店が多く、いつまで営業できるのかなぁ・・・と心配になります。

アパート近くの初老の夫婦がやってるレストランは人気ですがお客さんは老人ばかり、そしてその老人が、最近また話題に登るようになった田園調布在住の元都知事(ほんとに老けましたね)のうわさ話などしていました。

まとめ

振り返ってみると私は東京に住むようになってから商業地と住宅地の中間みたいなところに住んでいました、住宅専用の街には住んだ事が無かったのです。田園調布はごみごみとした商業地がない事で、逆に街の空気がよどみ重苦しくなっているように感じます。

お手伝いさんがいた戦前のお屋敷街、都内なのに車社会の昭和に作られた街が、今の時代にはあわなくなっています。

4丁目のお屋敷街から川向こうに見えるタワーマンションが建ち並ぶ武蔵小杉は、最近若い夫婦に人気の街です。4丁目のお屋敷街から見える大都会・武蔵小杉は今の街で、それを見ている田園調布は昭和に取り残されてしまった街のようです。

f:id:yuum3:20160910175028j:plain

2016-09-04

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

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

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

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が完全に見れるようにならないかなぁ〜

2016-06-08

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');
  });
}

スマフォ、タブレットで画面のレイアウトを切り替えるのはレイアウトのサンプルを参考にしました。 @media (min-width: 幅) { ... } を使ってスマフォ、タブレット、PCを切り替えてます

   ...

共通＋スマフォ用CSS

   ...

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

  タブレット、PC用CSS 

   ...

}

@media (min-width: 60em) {

   ...

  PC用CSS 

   ...

}

2016-05-23

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 を眺め

watchman watch-del-all
rm -rf node_modules && nam install
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 ブランチにあります。

2016-05-23

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

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

f:id:yuum3:20160523105315p:plain

開発環境

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

追加するのは electron-prebuilt と Mac 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 等のコードもあります ^^)

2016-05-16

楽々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