2017年のEY-Officeはどうなるのか
さて今年のEY-Officeについて考えてみました。
2016年のまとめ をうけて今年はどううするかですが、いろいろと迷ってます。
現状
開発の仕事は積極的に探しているわけではないのですがやってきます、ありがたい事です。受託の仕事はリスクも低くく、それをこなしていけばなんとか生きていけます。しかし、歳も取ってきたしたくさんの仕事はこなせません。また贅沢を言えばもう少し満足感がある仕事がしたいです。
さて教育の仕事は自社でリスクを取っていることもあり、満足感は高いですし、ややスケールします。ただしRuby on Railsの教育は10年という時間が経ち、Web系の開発会社のレベルが上がったり、全てオンラインやオンライン+オフラインの教育サービスを行う会社も増えてきて、全てをオフラインで行う教育はコストがかかり需要が落ちているのかも知れません。
これから
大きなプランを書いても計画的でない私にはあまり意味がので、短期的な事を書きます。
教育に関してはある会社と共同で 「SIer系の開発者をWeb系の開発者にコンバートする教育」 を進めていますが、まだ成果は出ていません。しかし、現在のRuby on Railsを始め先進的なWeb系のエンジニア不足はいぜんとして解決しておらず需要はあると思っているので今年も続けて行こうと思います。このような教育に付いて興味のある方は EY-Officeホームページ や メール 、twitter (たまにチェックしてます) などから連絡下さい。
Ruby on Rails 5.1 ではフロントエンド(CSS, JavaScript)周りの処理をJavaScriptの標準プラットフォームであるnpm(Node.js)を使えるようになるそうです。昨年React.jsをガッツリと使ったので、Bableを使ったES6(ES2015)やWebpackには慣れたました。ここで得られた知見を開発者教育の方でもいかして行きたいと思っています。
2016年のまとめ
もう2017年になりましたが、昨年のまとめを書きました。
お仕事
前半は忙しいかったですが、後半はのんびりとしていたかと思います。
開発
React.js
年始は、一昨年から始めた、Ruby on Rails + React.js の仕事が佳境に入り、がっつりReact.js を書きました。この仕事ではフロントエンドを jQueryからReact.js に置き換えるために動作保証用に Turnip (RSpec)を使ってend-to-end テストを書いたりスケジュール的にはきつい仕事をこなしました。
ここで最近まで遠めに眺めていたJavaScriptの世界にガッツリ取り組めてかなり勉強できました。React.jsはもちろん、ES6(ES2015)やWebpackなども安定し始めた時期に取り掛かれてラッキーだったかと思います。
あるサービスのメンテナンス
むかしお世話になった Scaleout (現 SuperShip)のあるサービスのメンテナンスの仕事を頂きました。古いシステム(Ruby on Rails 2.3)のメンテナンス的な開発ですが、定期的にお金が頂ける仕事は会社としてはたいへんありがたいです、 @yamaz ありがとうございます。
教育
名古屋でRuby on Rails教育
一昨年の青森につづき、昨年も出張教育を行いました。名古屋のスタートアップ会社でプログラミング初心者向けにガッツリと教育を行ってきました。
その他の Ruby on Rails教育
例年通りドリコムさんで新人向けのRuby on Rails、RDB, JavaScript教育を行いました、また以前受講して頂いたWeb系企業でも教育を行わせて頂きましたが、名古屋を含め3件でした。
Ruby on Railsも正式リリースから10年以上たち、Ruby, Ruby on Railsのエンジニアも増え一般化した事で教育の需要が落ちたのでしょうか? またオンラインの教育なんども増えて来た事もあるのでしょうか?
お仕事以外
マンションの部屋をリフォームした
住んで20年以上も経ち、猫にやられ壁がボロボロになってしまったマンションのお部屋をリフォームしました。一番おおきな変更は下の図のようにリビングとベッドルームの間の壁を外していまったことです(壁だった部分には引き戸を付けたので独立した部屋にも出来ます)。
これにより高層階ではないのですがリビングからの視界が凄く広がりました。普段はリビングの小さなテーブルでMacを置き仕事しているのですが、気分よく仕事が出来るようになりプログラムなどの生産性が向上しました !!
リフォーム中はとなり町の田園調布のアパートに住んでいましたが、以前ブログに書いたように 不便で寂れた街に驚き、自由が丘に戻って来て、さらに自由が丘が好きになりました。
比較的簡単に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 はバージョンがいくつかありネット上には古いバージョンの記事などが多く注意が必要だったので記事にしました。
田園調布は思っていたより大きく、しかも昭和に取り残された街だった (田園調布滞在記)
はじまり
みなさんは、田園調布にどんなイメージを持っていますか?
洒落た駅舎から放射状に広がる道とそれをつなぐ半円形の道の区画にお屋敷が建つ高級住宅地、というイメージでしょうか。
私は田園調布の1駅となりの自由が丘に20年以上住んでいるのですが、田園調布に訪れた事はほとんどありませんでした。したがってこのような一般的なイメージしか持っていませんでした。そんな私ですがマンションの部屋をリーフォームするにあたり田園調布2丁目のアパートに1ヶ月半ほど借り住まいする事になりました。
田園調布とは
田園調布は、大正から昭和初期にかけ実業家 渋沢栄一ら設立した 田園都市株式会社 が造成・販売した複数の住宅地の中でもシンボル的存在でした。
田園調布と名前が付いた場所は下の地図のような町名に分かれています。その大きさは地図で判るように大井町線沿線の自由が丘、九品仏、尾山台、等々力を加えたくらいの大きさがあります。
未知の町に来たので日々いろいろと散歩して周りました、簡単にかく町をまとめてみると。
- 田園調布3丁目: 正確には大田区田園調布3丁目、最初に書いた田園調布のイメージのような “The 田園調布” と呼べるエリアです。ほとんどがお屋敷ばかりです
- 田園調布4丁目: 3丁目より高台にあり、多摩川そして川崎の方が眼下にみえる場所には大きなお屋敷が多数あります
- 玉川田園調布: ここは世田谷区ですが、環八の田園調布駅側は田園調布3丁目と区別できない高級住宅地です。環八の向こう側はお屋敷もありますが大きめの住宅が建つエリアです
- 田園調布5丁目: 高台の方は田園調布4丁目とほぼ同じくお屋敷地帯です、ただし低地は庶民的な住宅も建っています
- 田園調布2丁目: 駅の東側で商店街があったり、大きめの住宅が建つエリアです。ところどころ、お屋敷も建っています
- 田園調布1丁目: 広いエリアで南の方は庶民的な住宅地です、しかし場所によってはお屋敷が建っています
- 田園調布本町、田園調布南: 訪れてないので判りませんが、きほん庶民的な住宅地だとおもいます
歴史的に見ると、田園調布とはどこのエリアを指すか によると 田園調布2〜4丁目と玉川田園調布あたりが元々の田園調布のようです。
田園調布の良いところ
緑が多く自然が豊富、そして静か
地図からも判るように非常に大きな多摩川台公園があります。その近くにある宝来公園もそれなの大きさがりますし、多摩川駅の東側も公園です。さらに街の中にも小さな公園がたくさんあります。 また田園調布では家と家の間には木を植えるというルールがあるようです、町中が緑に囲まれています。 朝などたくさんの鳥の鳴き声がします、蝉の音も都内では普段聞かない蝉の声が聞かれます。
そして静かです、道路際のマンションに住んでいる私には最初は静か過ぎて気持ち悪いくらいでした。
色々な住宅がみれる
たくさんのお屋敷、住宅が建っています。建築家にデザインしてもらったと思われる素敵な外見の住宅がたくさんあります、またバブルの時に建てたのでしょうかお城のような面白い建物も多数あります。ごく少数ですが戦前の建物もあります、住んでいたアパートの近くにはアールデコ風のお屋敷があり前を通るのが楽しみでした。
もし、自分の家を建てたいと思っている方は田園調布を散策されると良いのではと思います。
その他
- 長く続いた地元の人に愛されてる飲食店がある。私の住む自由が丘は長続きするお店が少ないのですが、ここでは数十年も地元に人に愛されてるお店が多いようです
- 東急東横線、東急目黒線、東急多摩川線(多摩川駅)の3路線が使えて便利
- 教会の鐘の音が聞こえる、多摩川駅のそばに大きなカソリックの教会があります。正午と夕方6時に鐘の音が聞こえるのは良いものです
田園調布の良くないところ
スーパーや商店が少ない
スーパーは駅前のプレッセ(東急ストアーの高級版)、環八沿いのナショナル田園(高級スーパー、ナショナル麻布の姉妹店)、中原街道のOTENTOくらいしかないです。
駅の東側の坂道の田園調布商店街はにぎわっていますが、そこから六間通り商店街に入るとシャッター通りです。営業してるか判らない肉屋が1つある程度で魚屋、八百屋などは無いです。コンビニも田園調布全体で4軒くらいしかないです。
私は自由が丘に用があるときは自由が丘で買って帰ったり、自転車で雪ケ谷大塚に行ったりしてました。近くに美味しく安い総菜屋さんが在った事が唯一の救いでした。
飲食店も少ない
飲食店も駅の近くと、六間通り商店街に少しあるくらいで外食も充実してません。ただし良いところに書いたように、地元に愛されてる店が多いと思います。その分、入りにくい雰囲気がある店も多いかもしれません。
住んでないと思われる家が多い
住宅しかない田園調布ですが、夕方や夜あるいてみて人が住んでない家がかなりあります。
- 廃虚:多くはありませんが廃虚があります、夜は怖いです・・・
- メンテされてない家: 廃虚にはなっていませんが、明らかに人が住んでなくメンテされてない家が数パーセントはあると思います
- メンテされているが住んでいない家: アパートの大家さんの家も庭のお掃除等は行われていますが普段は住んでいないようです。このようなお家が20%パーセントくらいあるのではと思えました、普段は都心もマンションにでも住んでいるのでしょうか?
- 空き地: 以前は家があったのでしょうが空き地になっている場所がかなりあります。高級住宅地の3丁目、4丁目にも・・・一時的な空き地ではなく何年も空き地のままという感じのところもあります。
- 建築が止まっている家: 多くはありませんが建設途中で止まってしまっている場所もあります、草がボウボウと生えていて一時的な中断ではない事が判ります
緑が多い住宅地は良いのですが、夜は街が暗くなり怖さが増します ^^;
老人が多く活気がない
もちろん若い夫婦や子供はいますが、住宅地を歩くと老人が多いです。田園調布は完全な住宅地です、勤に来る人、買い物客、観光客もほぼいません、ゆいつ学校が多数あり小中高校生が通って来るくらいです。ほんとうに老人が目立ちます。
お店も老夫婦がやってるお店が多く、いつまで営業できるのかなぁ・・・と心配になります。
アパート近くの初老の夫婦がやってるレストランは人気ですがお客さんは老人ばかり、そしてその老人が、最近また話題に登るようになった田園調布在住の元都知事(ほんとに老けましたね)のうわさ話などしていました。
まとめ
振り返ってみると私は東京に住むようになってから商業地と住宅地の中間みたいなところに住んでいました、住宅専用の街には住んだ事が無かったのです。 田園調布はごみごみとした商業地がない事で、逆に街の空気がよどみ重苦しくなっているように感じます。
お手伝いさんがいた戦前のお屋敷街、都内なのに車社会の昭和に作られた街が、今の時代にはあわなくなっています。
4丁目のお屋敷街から川向こうに見えるタワーマンションが建ち並ぶ武蔵小杉は、最近若い夫婦に人気の街です。4丁目のお屋敷街から見える大都会・武蔵小杉は今の街で、それを見ている田園調布は昭和に取り残されてしまった街のようです。
仮住いのアパートにBS・CSアンテナを無計画に設置しようとしたら大変だった
長年住んだマンショの部屋をリフォームするために、仮住い用のアパートを借りて引っ越しました。 そのアパートにテレビは地上波しか来てなかったのす。私はけっこうテレビを見ます特にNHK-BSの歴史番組や旅番組などが好きです、また娘も某プロ野球チームの試合を見るために有料CSを契約しています。
マンションは地上波とBS・CSが1本のケーブルで来ていて簡単に見れていました。 そんなわけでBS・CSなんてアンテナ買ってケーブルつなげばOKと安易に考えていました。
1. アンテナやケーブルを買った
安易に都内の住宅地でだからアンテナは室内アンテナでも映るだろうと思い BSアンテナ 室内用セット を買いました。
これを以下のようにつなげば BS・CS が見えると思っていましたが、引っ越してアパートに設置するとまったく映りませんでした ^^;
2.アンテナには電源を供給しないといけない!
映らないのでアンテナの取り扱い説明書を穴の開くほど読みました。すると「電源」という言葉が当たり前にように書かれています。ネットでしらべるとBS・CSアンテナには同軸ケーブルをつうじ5Vの電源を供給しないといけないようです。だいたいのBSチューナーにはこの電源を供給する機能が付いているそうですが、使っているチューナー PIX-BR310W には電源供給機能が無いそうです。
そこで、サブに使っている(以前はメインで使っていた)BSチューナーDTH310を接続してみました。このチューナーには電源供給機能があります。そこで DTH310+EyeTV HD でアンテナに接続してみました。テスターで測定するとアンテナには5Vが来てます! さらにBSチューナーの受信レベル表示機能がある事が判りレベルを見てみましたが 0 でした。
3. 室内では受信できない!
何度も何度もネットで検索し、かなりBS・CSの知識がたまりましたが、この構成で問題はなさそうです。試しにBSアンテナを窓から出して近所の家のBSアンテナと同じような向きに向けてみましたが、レベルは0のままです・・・・
万策尽きました・・・ そこで、BSアンテナのサポートセンターに電話してみました。そこで判ったことは
- 「受信レベルには最大という表示欄があり過去の最高の受信レベルが表示されている」・・・ 見ると 14 でした、窓から出した時に受信したようです
- 「受信出来るアンテナの方向の範囲はかなり狭い 2° くらい」
- 「レベル表示は1秒くら測定してから表示されるので、アンテナの向きを変えた後はしばらく待つ」
というアドバイスをもとに再チャレンジ。すると上の構成でアンテナを窓の外で調整するととで無事にBS・CSが受信できました!
4. そして現在の構成へ
DTH310+EyeTV HDで使ってもよいのですが、PIX-BR310W は録画中に他の番組を見れるとか、操作は全てMacから出来るので使い易い等があり、下のように DTH310 はアンテナへの電源供給のみに使い、アンテナはベランダ(?)の手すりに取り付け金具を買い一番上の写真のように設置し無事にBS・CSが見られるようになりました。
結論
BS・CSアンテナの設置は思った以上にたいへんでした、適当に進めたので室内アンテナスタンドは無駄になってしまいました。 やはり何事もよく調べて行わないといけませんね ^^;
ネットでTVが完全に見れるようにならないかなぁ〜
Pureを使い会社のホームページをレスポンシブウェブデザインにした
今更という感じもありますが、私の会社のホームページ をレスポンシブウェブデザインに対応しました。
レスポンシブ CSS フレームワークの選定
レスポンシブウェブデザインにするのには、何らかの レスポンシブ CSS フレームワーク を使うのが早道です、 ネットを検索すると、たくさんの レスポンシブ CSS フレームワーク がありま、有名どころは Bootstrap でしょうか。
会社のホームページは複雑なフォーム等はないので、
という条件で調べてみましたところ、 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 ... }
React Nativeアプリを別のMacで動かそうとしてハマった メモ
あるセミナー向けに作った、React Nativeアプリを別のMacで git clone して実行しようとしたら 下の画像のエラーが出て解決まで時間がかったのでメモしておきます。
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 ブランチにあります。