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

BppLOG

Berlin → Tokyo

gitのdiffを見やすくする「diff-so-fancy」がとても便利

git の diff コマンドは差分を色分けしてくれていますが、変更された行単位でしかわかりません。 行の中でどの部分が変更されたのか確認したい・・・そんなかゆい所に手がとどくようなツールが「diff-so-fancy」です。

新元号までの平成カウントダウンページを作ってみた(S3 + CloudFront + Route53 + ACM:SSL対応)

2019年1月1日より新元号になる、との報道がありました。www.sankei.com平成元年生まれの私としては、非常にインパクトのあるニュースです。 そこで、名残惜しい平成との別れを見守るため、新元号までのカウントダウンページを作ってみました。 平成カウント…

WebBluetoothAPIで検出可能なデバイスが全て一覧に表示できるオプションが追加された

WebBluetoothAPIはW3Cで現在仕様策定中のため、アップデートが頻繁にされています。 Implementation Status前回は、APIの基本的な使い方について紹介しました。 tkybpp.hatenablog.com

Elixir/PhoenixのChannelにRaspberry Pi(node.js)から接続してみる

Elixir/Phoenixアプリケーションが動いているサーバにRaspberry PiからWebSocketでの接続をしてみます。 PhoenixにはChannelという便利な機能があるので、今回は特にこのChannelに接続する方法を書いていきます。 Raspberry Piの方はnode.jsから利用します。…

Dockerコンテナ内のMySQLサーバ接続時のエラーに対応する > "ERROR 2013 (HY000): Lost connection to MySQL server at 'reading initial communication packet', system error: 0"

ローカル上のアプリケーションからDockerコンテナ内にあるMySQLサーバに接続する箇所でエラーが発生していました。 そこでターミナルから直接MySQLサーバに接続できるか確認してみます。 $ mysql -u root -h 127.0.0.1 --port 23456 devdb ERROR 2013 (HY000…

パーキンソン病などの手の震えを軽減させるウェアラブルデバイス

パーキンソン病や本態性振戦の主な症状として「手の震え」があります。 食事の際には、食べ物を口に運ぶことが困難となり、それがストレスになり、食事が楽しめなくなってしまいます。原因が不明の手のふるえや、パーキンソン病、脳梗塞などによる手の震えに…

Amazon Dash Buttonをハックしてテスラ・モデルSを操作する

クリスマスイブの今日は朝から歯医者で虫歯の治療をして、この記事を書いています。 つい先日、日本でもAmazonのDash Buttonが利用できるようになりましたが、さっそくハックしたという記事が話題になっています。Amazon Dash ButtonをただのIoTボタンとして…

node.jsでサブディレクトリまで一度に作成してくれるmkdirpが便利

node.jsでディレクトリを再帰的に作成してくれるモジュールです。 "mkdir -p"コマンドを実行するのと同じです。インストールは簡単。 npm install mkdirpディレクトリを作成するサンプルです。 const mkdirp = require('mkdirp'); mkdirp('./foo/bar/baz', e…

Web Bluetooth API を使ってBLEデバイスをブラウザから操作する

WebBluetoothAPI を利用すれば、ブラウザからBluetoothLE(BEL)デバイスを操作できるようになります。従来であれば、BLEデバイスを操作するには iOS や Android のアプリケーションを用意する必要がありましたが、 このAPIを利用すれば、javascriptのみでブラ…

WebBluetoothAPIのW3Cドキュメントを翻訳しました

Web Bluetooth API 日本語ドキュメント https://tkybpp.github.io/web-bluetooth-jp/ WebBluetoothAPIとは このAPIは、ブラウザ上からBluetoothLE(BLE)デバイスを操作することが出来るAPIです。

【チャットボット開発に便利】Sketch対応のチャットUIデザインキット「Chat UI Design Kit for Sketch」(30+画面)

Chat UI Design Kit Free Chat UI Design Kit for Sketch | CometChatメッセージングアプリの開発を手助けしてくれるUIデザインキットが無料で公開されています。1対1の画面はもちろん、グループチャット、設定画面など30画面以上のレイアウトが用意されてい…

ブラウザからInstagramのStoriesを閲覧するChrome拡張「Chrome IG Story」

「Instagram Stories」は、つい先日リリースされた、 Snapchatのように一定時間(24時間)たつと消えてしまうInstagramの新機能です。 jp.techcrunch.comそして、この Stories をブラウザから閲覧出来るようにした Chrome 拡張機能がさっそく公開されていま…

gitプロトコルをhttpsに固定して接続する(社内環境で便利)

gitに接続する時に下記のエラーが出る時の対処法 $ git clone git://github.com/xxx/xxx.git fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Operation timed out社内環境のファイアーウォールでgitプロトコルが許可されて…

Elixir/Phoenix で SSL をローカルホストから利用する手順

調べたのでメモしておきます。 1.証明書の作成 # generate key $ openssl genrsa -out localhost.key 2048 # generate cert $ openssl req -new -x509 -key localhost.key -out localhost.cert -days 3650 -subj /CN=localhost

ドナルド・トランプ氏をイメージしたプログラミング言語「TrumpScript」が滅茶苦茶すぎる

アメリカ大統領選挙候補者であるドナルド・トランプ氏をイメージした Pythonベースのプログラミング言語「TrumpScript」が公開されています。 特徴が滅茶苦茶だったのでご紹介します。 GitHub - samshadwell/TrumpScript: Make Python great againどうやら米…

外で安全にポケモンGOをプレイするための安全バッジをDIYする

ポケモンGOに熱中するあまり、事故に遭う人もいるようです。 プレイ中に周囲を認識しながら歩くことは難しいですよね。そこで、危険を回避するために「安全バッジ」を自作したエンジニアがいました。 このバッジは、プレーヤーと任意の物体の距離が1メートル…

jsでスクリーンショットを比較してデザインデグレの自動検出をする

E2Eテストの自動化にトライしてみました。 今回はUIの細かい挙動のテストではなく、デザインのデグレ検出にフォーカスをしています。Webデザインにおいて1pxへのこだわりは非常に重要です。大規模なサービスになると、1pxの違いで数億円の売上に影響すること…

リクルートにエンジニアとして入社して、気付けばベルリンで働きはじめていた

入社して3回目の春はベルリンで 実はこの4月からベルリンのスタートアップでエンジニアとして仕事をしています。 (リクルートは辞めておらず、リクルートの社員として期間限定でジョインしています)なぜリクルートでベルリンなのか、詳細は会社のブログに書…

Node.jsを使って静的コンテンツを表示するHTTP/HTTPSサーバーを用意する

connectモジュールを使えば、簡単にHTTPサーバーを作成できます。 connectはNode.js 向けの拡張可能な HTTP サーバフレームワークです。ミドルウェアと呼ばれるプラグイン機構をつかって HTTP サーバを拡張することが出来ます。 これを包括する形でルーティ…

Node.jsからgitコマンドを実行してコミットログなどを取得する

前回はnode.jsからシェルコマンドを実行する方法を紹介しました。 tkybpp.hatenablog.comこれを利用することで、gitのログなども取得できるようになります。 git logコマンドを実行して最新のコミットIDと日付を取得してみます。 const execSync = require('…

Node.jsからシェルコマンドを実行する

node.jsからシェルコマンドを実行するにはexecを使えば簡単にできます。 const exec = require('child_process').exec; exec('ls -la ./', (err, stdout, stderr) => { if (err) { console.log(err); } console.log(stdout); }); exec関数は非同期関数であり…

nightwatch.jsでHTMLデータを取得してjQueryっぽく操作する

フロントエンドのE2Eテストにnightwatch.jsを利用しています。 nightwatchjs.orgテスト対象画面のHTMLデータを取得する方法が無いかと調べてみたところ sourceメソッド http://nightwatchjs.org/api#source を使えば簡単に取得できるんですね。 browser .url…

javascriptの連想配列の値からキーを取得する方法

このような連想配列のオブジェクトがあり、 "value3"というバリューの値から、"key3"というキーの値を取得する方法。 const obj = { key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4' }; いくつかの方法で取得できるので書いてみます。(記法…