よこやま日記

@hiroyky IT系エンジニアのまったりブログ

HHKB Professional Hybrid買ったよ.

以前の記事にHHKB Bluetooth 2台目を買った. - よこやま日記とHHKB Professional Bluetoothを2台も買ったと書きました. 2台というのは職場用と自宅用.

PFU HHKB Professional HYBRID Type-S 英語配列/墨、キーボードルーフ(スモーク)付 PD-KB800BS-KBRFHHB

今回,新型HHKBが発売されたということで改めて購入しました.

↑ちなみに,今時点では未開封で,外に出てるHHKBは旧Bluetoothモデルです.(あとアップル・キーボードもでてる)

即決で購入した点は以下の新機能のメリットが大きいから.

  • 複数台機器に接続できて,キーボード上から切り替えができる.
  • USBケーブルの有線接続もできる

むしろなんで旧Bluetoothモデルはできなかったんだ!って感じですが,これに対応したのが購入の理由です.

これまでこんなシチュエーションに悩まされました.

複数台ペアリングした状態で目的の機器に切り替えられませんでした. だから,切り替えたいときは,使わない端末のBluetoothを一時的にオフにして,使いたい機器だけオンにしてました. これが結構めんどくさかったです.

USBケーブル接続できないので,セットアップ前のマシンやOS起動前のマシンでは一切使えなかったです. BIOSなどを設定したり,OSの新規インストールするときは普段使っていないキーボードを出してきて使っていました. これが,これが結構面倒くさい.

もう一つはBluetoothの接続に障害が発生したときに詰むという問題でした. Bluetoothは有線と違うので,時々通信が途切れてしまうことがありえます. デスクトップPCでキーボードも無線,マウスも無線だとパソコンを一切操作できなくなってしまい詰むのです. OSがクラッシュしたのか!?と焦ったときに,別の有線キーボード接続したら普通に動いていたか.. こういった場合に,別途有線キーボードを用意しておく必要があるのは億劫でした.

新モデルではこうした課題をすべて解決してくれるようになったのでサッと買い替えました.

ところで打鍵感ですが,これまで使っていたHHKB Professional Bluetoothと比べて,HHKB Professional Hybridは軽くなった気がします. これはすぐに慣れるかなぁと思います.

「よこやま写真館」を開設.撮影写真を投稿予定.Nuxt.jsでSSR

よこやま写真館

サイト開設

よこやま写真館という個人サイトを開設しました.

f:id:hiroyky:20190716030113p:plain

サイト開設の背景

ちょっと前にソニーのミラーレスカメラ α7iiiを購入しました.購入を機会に休日等にでかけて撮影を楽しむようになりました. 写真って現実を写すけど,テクニックでそれ以上の絵ができて素晴らしいですね!っと初心者ながら楽しんでいます. 初心者ですが,せっかく撮影した写真なので外部にアウトプットしたいと思いました.写真は個人のインスタグラムなどに投稿していました. しかし,せっかくなので専用の個人サイトを作って発信したいなぁと考えました.

お願い

サイト作ったので時々でいいので見てくださいmm

オーバーエンジニアリング

よこやま写真館では自分の勉強と調査と趣味を兼ねてかなりオーバーエンジニアリングな構成を取りました.単なる静的サイトではありません.技術的特徴は以下の通り

コンポーネント図を描くと以下の構成になります.

f:id:hiroyky:20190716025739p:plain

Nuxt.jsをSSRモードでLambdaで動かすに当たりいくつかハマりポイントがあったのでおいおいQiitaあたりに書いていこうと思います.

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド

Amazon Web Servicesを使ったサーバーレスアプリケーション開発ガイド

HHKB Bluetooth 2台目を買った.

Happy Hacking Keyboard Bluetooth

Happy Hacking Keyboard Bluetooth(HHKB BT)を購入しました. これ,初回ではなく二台目.自宅と職場を毎日リュックサックに入れて持ち運んでいたのですが, 流石にツラくなってきたので思い切って2台目を購入しました.

購入したのは英字 墨色モデル

PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B PFU Happy Hacking Keyboard Professional BT 日本語配列/墨 PD-KB620B

外観とか

f:id:hiroyky:20181226005242j:plain

設定

キーボードの設定を下記写真のような6つのスイッチで設定します. Windows, mac療法で使う自分にとってこれが最適解,多分. f:id:hiroyky:20181226005236j:plain

PFU Happy Hacking Keyboard Professional BT 英語配列/白 PD-KB600W

PFU Happy Hacking Keyboard Professional BT 英語配列/白 PD-KB600W

PFU Happy Hacking Keyboard Professional BT 無刻印/白 PD-KB600WN

PFU Happy Hacking Keyboard Professional BT 無刻印/白 PD-KB600WN

Alexaスキルアワード公式ハッカソンに参加した

Alexaスキルアワード公式ハッカソン

2018年7月29日開催のAlexaスキルアワード公式ハッカソン 東京に参加しました.参加した皆さんお疲れ様でした.

Alexaスキルアワード2018公式ハッカソン東京0729

台風の影響で土日二日間の開催が日曜のみの開催になりました. 1日のみで開発時間が5時間のハッカソンとなり,短時間で濃厚でした.

東急ハンズ賞いただきました.

つくったもの

ホテルの部屋でAmazo echoを使ってチェックアウトします.その時に一緒に宿泊者にアンケートをとるスキルを作りました. 今後,ホテルの一室に一台のAmazon echoなどのスマートスピーカが設置してあり,チェックアウトやルームサービスの窓口になってくれるといいですよね.

また,チェックアウトのときに,自然にアンケート内容を聞くことで,宿泊者は手を煩わせることなく回答できます.


【作ってみた】アレクサでホテルのチェックアウト,宿泊者にアンケートをとるスキル

構成

f:id:hiroyky:20180730233817p:plain

構成はいたってシンプルです.AlexaがLamdaをトリガすると,お礼とアンケートを話します.宿泊者の回答をバックエンドのDynamoDBに記録します. ホテルの従業員が今日の結果を聞いたときは,DynamoDBを参照して,統計データ(?)を話します.

ソースコード

当日チームで実装したGithubにアップロードしました.

github.com

まとめ

ハッカソンにてホテルのチェックアウト時にアンケートスキルを作りました.

Macbook Pro 2018 購入した.Windowsからまた戻ってきた

macbook pro 2018

新しいノートパソコンを新調しました.先日発表されたmacbook pro2018です. 15インチのmacbook proです.

f:id:hiroyky:20180721202109j:plain

CPU: 第8世代 Core i7 2.2Ghz 6コア
メモリ: DDR4 32GB
SSD: 512GB
GPU: Radeon Pro 555X 4096 MB
キーボード: 英字

macbookにした理由

自分,わりとWindows, macどちらでもいい人です.仕事ではずっとmacで開発を行っていますが,自宅はWindows(もしくはUbuntu)な人です.これまでノートパソコンはmacbookThinkpad行き来していました.

完全に,macUNIXとして利用しています.

1. WSLの微妙な動作の遅さが逐次気になる.(微妙に遅いんですよ.)

WSL使っている方,微妙な動作の遅さが気になりませんか? 演算が遅いというよりはコマンドを入力してから実行のレスポンスが体感的に遅く感じる.

2. WSLを利用しても,Windows側でもSDKのセットアップが必要になる(後述)

WSLでWindowsマシンをLinuxマシンのように利用できます. しかしながら,いざ開発するとなるとVisual Studio Codeプラグインを動かすためにはnodejsやらPHPの実行環境が Windows側にインストールされている必要があり,セットアップを2回しなければならない.当然,容量も2倍必要になる.

ちなみに,このあたりいい感じに解決する方法があったら教えていただきたいと思います.

3. Ubuntuなど通常にLinuxにすると不必要なところで苦労する(グラフィックドライバがおかしいとか)

じゃあ,素のLinuxを使えばいいじゃないか!となります.自分もUbuntuであったり,以前はGentooLinuxをセットアップしたこともあります.Linuxもとても使いやすいですよね. しかしながらコレ.苦労するんです.スリープからの復帰でマシンがクラッシュしたり,ノートPCをプロジェクタなど外部ディスプレイに接続したらグラフィックが落ちたりとか... あと,開発時だけならOKでも遊びに使うとなると厳しい部分あります.著作権保護のある動画を楽しんだりするなど..

4. emacs風なカーソル移動がしたい

一番の理由はコレかも.emacsは使います.そしてmacっていろんな箇所でemacs風のカーソル移動ができますよね. お仕事でmac使っているため,コレを多用しており,慣れすぎてしまったのです.これができないと厳しい;;

5. やっぱり安定稼働するUNIXがいい

Web系エンジニアがmac使い理由ですよね.サーバがLinuxだから手元のPCもUNIX/Linux系がいい. でも,たまにはAdobeのソフトウェアが使いたいし,ドライバ周りで苦労したくない. もちろんこのニーズを解決するためにWindowsではWSLを導入したりしてくれてるのですが,あともう人押しほしいです.

買った.

f:id:hiroyky:20180721202429j:plain f:id:hiroyky:20180721202109j:plain f:id:hiroyky:20180721202458j:plain f:id:hiroyky:20180721202734j:plain

現行macbook proへの懸念点と実際の感想

macbook自体は学生自体にmacbok airを使っていたし,職場でもmabook pro 2015を使っています. しかし,macbook proの2016年以降のモデルは懸念だらけだったので躊躇してました. あるあるですが,以下がその懸念点と実際に触った感想を挙げます.

1. USB TypeCだけ

イヤフォンジャックを除けばUSB Type-Cだけになりましたよね.その分,薄さを実現できたのでしょう. USB TypeCだけで不安かもしれませんが,自分はそんなに不安ではありませんでした. 少し調べるだけでも変換器はたくさんあります.薄さのメリットのほうが大きい. 自分は併せて下記も購入しました.便利そうです!

2. タッチバー

言わずとしれたタッチバーです.戸惑っているとも多いと思います. タッチバーなしのモデルもありますが,”つなぎ”で出しているだけであまりやる気ないようですよね. 今回の2018年モデルではアップグレードされなかったようです.

YoutubeでYoutuberの方々がタッチバーが便利ということ言っていらっしゃいました. そりゃ動画や画像編集などマルチメディア系だったら便利かなぁとは思います. 世の中の果たしてエンジニアはどう思っているのか..(周囲の人からはあまり歓迎する声は聞かず..)

といっても,積極的に利用することはないかもしれませんが,そこまで困ることはないかと思います. 設定で,fnキーの動作も変更できるし,fnキーを多用するアプリケーションではfnキーを常に表示するように設定できました.

f:id:hiroyky:20180721202803p:plain f:id:hiroyky:20180721202814p:plain

3. 大きすぎるトラックパッド

キーボードはいろいろあるようですが,自分が懸念した理由はコレです. トラックパッドが大きくなっていることです.

職場のmacbookThinkpadとの比較.なんでそんなに大きい必要があるの?? f:id:hiroyky:20180721202958j:plain f:id:hiroyky:20180721203045j:plain

なんでスペースキーの列とそんなに近いんですか?手の甲で触っちゃいそうです.

Thinkpadみたいに,スペースキー直下でちょうど親指の位置に左クリック右クリックのボタンがあるの最高です!!

実際使ってみると誤入力してしまうことはほぼ無さそうです.実際,この記事を書いていますが,手の甲でマウスポインタを移動させてしまうということはありません.トラックパッドの上に手のひらが乗っていることに対する違和感は多少ありますが,実利用では問題になら無さそうです.

まとめ

新しいノートパソコンを買ったという報告と懸念していた点とそれに対する感想でした. 現状,とても満足です!!

HololensとWebSocketでピタゴラスイッチ

ハッカソンの報告

4月8,9日に日本マイクロソフト本社で開催されたHololens ハッカソン Vol.1に参加してきました. チームメンバをはじめ二日間ともに過ごした参加者の皆さん,ならびに主催者の方々,楽しい時間となり感謝しております.ありがとうございました.

そして,自分たちのチームが制作した作品がこちら. Hololensを利用したピタゴラスイッチです.


Hololens ピタゴラスイッチ

f:id:hiroyky:20170418223759j:plain

現実世界の物体と仮想世界のホログラムがスムーズにインタラクションする表現をやりたいとチームメンバでアイデアを出した結果,ピタゴラスイッチを思いつきました.実際の物理的なボールとホログラムのCGが交差しながら進んだらきっと面白いんじゃないか!というわけです.

Hololensのアプリケーション開発のハッカソンに,自分たちのチームだけハンドドリルやはんだごて,ニッパにカッター,段ボールなどを持ち込んで,小学生が夏休みの宿題で一作品つくっているような状態でした.

仕組み

動作の仕組みは次の通りです.

f:id:hiroyky:20170418225854p:plain

f:id:hiroyky:20170418225945p:plain

通常のピタゴラスイッチとは異なり,ステージ上には次の物が置かれています.

  • ボールや瓶といった現実の物を動きを制御するためのサーボモータや扇風機
  • 現実の物の状態を検知するためにタッチセンサ
  • 制御のためのArduino, Raspberry Pi

Raspberry Pi上でWebSocketサーバを動かし,Hololensがクライアントとして接続します. センサの値やサーボモータ,扇風機のトリガをWebSocket上でRaspberry PiとHololensが通信することで 現実の物とホログラムの同期をとりました.

WebSocketについて

自分がUnityでのHololensアプリの実装を担当したこともあり,HololensとUnity上でのWebSocketクライアントの実装について書こうと思います. Unity Editor上とHololens実機上では,フレームワークが.Net Framework3.5とUWPで違うため両方に対応した実装を行うとデバッグでも本番でも便利かと思います.

Unity Editor上でWebSocket

Unity上でWebSocketをするには次の記事に従いました.

qiita.com

C#のWebSocket用ライブラリを.Net Framework3.5向けにビルドしていますね.

インポートした際に,Unity Editor上のみでしか利用しないように設定します. f:id:hiroyky:20170418232743p:plain

UWP上でWebSocket

UWPではWebSocket用のAPIが用意されているようなので,それを使います. 公式のドキュメントに詳しく実装方法が書かれていますね.

docs.microsoft.com

ただし,このMessageWebSocketはasync/awaitを使った非同期処理での利用が前提になっており,Unityはこれに対応していません.

そこで次の記事で紹介されているような方法で回避します.

www.naturalsoftware.jp

↓こんな感じ

        var task = Task.Run(async () => {
            await websocket.ConnectAsync(new Uri(uri));
        });
        task.Wait();

切り替え

Unity Editor上とUWPのコードはプリプロセッサで切り替えればOKですね.

#if WINDOWS_UWP
// UWP
#else
// Unity
#endif

ソースコード

最終的なWebSocketクライアントを行う実装はこちらです.

github.com

なお,このリポジトリハッカソンで開発したソースコードをアップしてあります. ハードウェアと密接に絡む作品であるため,これだけではアプリとして完結しませんが,何かの参考になれば幸いです.

【永久保証付き】Arduino Uno

【永久保証付き】Arduino Uno

Hololensでワールド座標系とOpenCVの画像座標系の変換を確認

f:id:hiroyky:20170321014208p:plain

やったこと(概要)

Hololensでスクリーンショットを撮って,OpenCVで画像処理,その結果を空間に反映ということは,今後よくあるのではないかと思います. ここで重要なのが座標系の変換です.Hololensの空間であるUnityのワールド座標系とOpenCVの画像座標系を適切に変換する必要があります.

Unityはこうした座標系変換を行うAPIを提供しています.今回はそれらのAPIが適切に機能するかを検証・確認してみました.

OpenCVの画像座標としていますが,一般的な画像座標と等価です.

(何事もおそらくできるだろう という発想が危険です!)

さらに進化した画像処理ライブラリの定番 OpenCV 3基本プログラミング

さらに進化した画像処理ライブラリの定番 OpenCV 3基本プログラミング

詳解 OpenCV ―コンピュータビジョンライブラリを使った画像処理・認識

詳解 OpenCV ―コンピュータビジョンライブラリを使った画像処理・認識

OpenCVによる画像処理入門 (KS情報科学専門書)

OpenCVによる画像処理入門 (KS情報科学専門書)

方法

AirTapしたときに,次の動作を行うプログラムを作成します.

  1. スクリーンショット撮影.
  2. HololensのCursorのワールド座標を取得し,OpenCV画像座標に変換.
  3. OpenCVスクリーンショットに点を描画.
  4. その描画座標を再度,ワールド座標に変換し,空間にCubeを設置.

つまり,ワールド座標→画像座標→ワールド座標の変換を行い,スクリーンショットの点とワールド座標のCubeが同じ場所に設置されればOKです.

コード

今回作成したコードはこちらにあります.

github.com

なお,HololensToolkit for UnityOpenCVForUnity(有償)が必要です.

ポイント

変換API

ワールド座標系から画像座標系へ

画像座標系すなわちビューポート座標系の変換にはCamera.WorldToViewportPointを使います.この関数は正規化された値が返ってくること,Y軸の向きが逆(上方向)であることに注意しましょう. 従って正規化された値を画像サイズで乗算し,Y軸の向きを反転させる必要があります.

OpenCVForUnity.Point worldPointToMatPoint(Vector3 worldPosition, Mat image) {
    Vector3 viewportPoint = Camera.main.WorldToViewportPoint(worldPosition);
    OpenCVForUnity.Point drawPoint = new OpenCVForUnity.Point(viewportPoint.x * image.width(), (1.0 - viewportPoint.y) * image.height());
    return drawPoint;
}

画像座標系からワールド座標系へ

画像座標系からワールド座標系への変換には,まずビューポート座標系は正規化された値であるため,画像座標を正規化し,Camera.ViewportPointToRayでRayを取得し,ワールド座標系を取得します. また,ビューポート座標を求めるときはY軸の向きを反転させる必要があります.

bool matPointToWorldPoint(OpenCVForUnity.Point point, Mat image, out Vector3 worldPoint) {
// 画像座標を正規化,Y軸の向きを反転し,ビューポート座標を求める.
    float viewportPointX = (float)(point.x / (double)image.width());
    float viewportPointY = (float)(1.0 - point.y / (double)image.height());
    Vector3 viewportPoint = new Vector3(viewportPointX, viewportPointY);

    // Rayを使って,Z軸も含んだワールド座標を求める.
    Ray ray = Camera.main.ViewportPointToRay(viewportPoint);
    RaycastHit hitInfo;
    if (Physics.Raycast(ray, out hitInfo)) { 
        worldPoint = hitInfo.point;
        return true;
    }
    worldPoint = new Vector3();
    return false;
}

結果

う~ん,微妙にずれてるけど仕方ないのかぁ~.

f:id:hiroyky:20170321014346j:plain f:id:hiroyky:20170321014208p:plain

その他

※ 生活感ありありの画像で申し訳ありませんm_m