適当なサイトを作るとき、サイト自体のレイアウトやインタラクションはコンポーネントライブラリやCSSフレームワークがあって開発者一人でも割と迷いなく作業を進められたりする。 最近自分はVueを触ることが多いので、前者だと vuetify、後者だと、tailwind…
久々に新しいキーボードを買った。 とりあえず最低限のセットアップが終わって使い始めたときのツイート。 moonlander、やっと届いたErgoDox EZからの乗り換えだと全く違和感ないのと、パームレストが一体型なのは机の上でキーボードをよく移動する自分には…
前提として Nuxt.js 以下は、Nnux.jsの公式から引用 Nuxtは、モダンな web アプリケーションを作成する Vue.js に基づいたプログレッシブフレームワークです。Vue.js 公式ライブラリ（vue、vue-router や vuex）および強力な開発ツール（webpack、Babel や P…
Serverless Frameworkを使うと、API Gateway + Lambdaを使ってCustom Authorizerを簡単に実装することができる。 Slack のSlash Commandsの認証にこれを使おうと思ったけど使えなかった話と、Custom Authorizerを使わないで実装した話。 Slack Appの認証につ…
Nest.jsでは microservices パッケージの1機能として、gRPCによる通信をサポートしている。 Nest.jsでgRPCのサーバ実装をされてる方がいて、この記事がすごく参考になった。 https://qiita.com/jnst/items/27b6a0cd3813b34f98e4 microservices パッケージに…
はじめに Node.jsのgRPCサンプルコードを解説されている方がいたのですが、この記事で触れられているのはUnaryなリクエストのみで、Streem通信に関しては触れられていなかったのでChartを例に試してみた。 tomokazu-kozuma.com Node.jsは現時点(2018/12/23)…
この記事は、ex-handslab Advent Calendar 2018 16日目の記事です(大分遅れています)。 私が以前在籍していたハンズラボはAWS関連技術に強みを持った会社だったので、今回はAWS関連の小ネタを書きたいと思います。 adventar.org 対象の読者 ざーっと、書いて…
多くの仮想通貨取引所では、APIトレーダー向けに取引のための注文APIや価格情報を取得するためのAPIが公開されている。 今回は、bitbankのpublic APIのうちcandlestickを使ってAngularと ngx-chartsを使ってチャートを描画してみたので、ポイントとサンプル…
ErgoDox EZは、GUIからキーマップを作成して、.hex ファイルのファームウェアをダウンロードできるサイトを用意してくれている。 ErgoDox EZ Configurator ただ、ここから変更できる内容には制限があり、少し凝ったキーマップに変更しようとすると、キーマッ…
CI環境上または、開発環境上でビルドしたファイルをS3にデプロイする際には、s3 syncなどのコマンドを使うことが多いかと思います。 そんな時、Scottyが割と便利だったのでAngular CLIで作成したSPAをデプロイする前提で簡単に使い方を紹介します。 前提 AWS…
Google ドキュメントの音声入力機能を使い、mp3ファイルやブラウザ上でストリーミング再生した音声ファイルを文字起こしする方法(小技)を紹介します。 ドキュメント エディタ ヘルプ -Google 標準機能では、入力元の音声はマイク入力のみの対応となっていて…
ng-lazyload-imageを使って、スクロールに応じた画像の遅延読み込みをしてみる。 今回はわかり易い例として、スクロールに応じてグリッド配置した画像を例にした。 レスポンシブのグリッドを作るために、AngularMaterialの grid-list も使っています。 デモ:…
Angularを使ったWebアプリを作り際も、CSSのアニメーションしか使わない場合が多かったのですが、Angular Routerと連携したアニメーションや複数の要素に対するアニメーションなどを実現するためにAngular Animationsを使ってみることにしました。 そもそも…
AngluarCLIでComponentを作成する際にVue.jsの単一ファイルコンポーネントっぽく、1Component1ファイルとする方法を紹介します。 やってみる コマンド実行時のオプションで指定 コンポーネント作成(デフォルト) $ ng g c <コンポーネント名> コンポーネント…
JavaScriptでフロントエンドの開発やNode.jsでの開発をしている時、npm パッケージの中を覗きたいことがあると思います。 そんな時、Visual Studio Codeのプラグイン Search node_modulesを入れておくと素早くnpmパッケージ内のファイルにアクセスすることが…
Angularで画像プレビューを行う際に、画像のExif(Orientation)情報を見て自動で向きを回転させる方法です。 JavaScript-Load-Imageという便利なライブラリと、Reactでの使い方を紹介したありがたいブログ記事があったので、かなり簡単に実装することができま…
Serverlessをしばらく触ってこなかったので、気づかなかったのですが、v1.21.0からsls createの際に指定する公式テンプレートにaws-nodejs-typescriptと言うものが追加されたようです。(結構前ですね...) 以前から、プラグインとして、serverless-webpackと…
Angularでブラウザから読み込んだローカルのテキストファイルを表示する方法です。 HTML5のFile APIの基本的な使い方が分かれば簡単な内容ですが、メモ程度に残しておきます。 早速、実装していきたいと思います。 以下で紹介する内容は、angluar-cliでng ne…
画像読み込みに失敗(404エラーなど)した場合に代替えイメージを表示する方法です。 コンポーネント内で対応する方法 簡単な方法としては、次のような方法があります。 VIew <img src="imageUrl" (error)="onImageLoadingError"> ViewModel export class TestComponent { imageUrl = 'https://www.gstatic.com/we…
Angular Materialで次のようなTabsを使ったUIを実装する方法です。 今回実現したのはこんな感じの動きです。 動きを見て分かるように、URLの変化に合わせてアクティブなtabと内容が変更されます。 以下のStackOverflowにあるサンプルコードを参考に、router…
pHATシリーズはRaspberry PiのGPIOに接続して、機能拡張ができるというもの。 今回買った、Unicorn pHATは 8x4のRGB LEDが乗ったものです。 スイッチサイエンスでRaspberry Pi Zeroを買うついでにノリで買ってしまったので、セットアップして動かしてみまし…
公式ドキュメントを進めてみた記録。 Python Documentation contents — Python 3.6.1 ドキュメント 初めの章はイントロダクション的な感じだったので、ざっと目を通してスキップ。 2. Python インタプリタを使う 2.1. インタプリタを起動する 起動する $ pyt…
MacでPythonを始めようと思ったときにやったこと この記事は、以下の記事を参考にやった作業をまとめたメモです(環境構築しただけです)。 http://qiita.com/spyc/items/73d1295f8b3dde3b49ca 次の職場ではPythonをガッツリ使うことになりそうなので、公式ド…
社内勉強会で「Node.jsを使って社内で使える便利ツールを作ろう」というテーマで簡単なWebアプリケーションの作成を行っている。 Express+MongoDB+ejs(ほぼjQuery)で最低限の機能を実装したモノは出来上がったものの、ユーザー認証機能が未実装のままだった…
Kindleの本体代金分の本を買ったほうが得なんじゃないかという謎の衝動にかられ、ほしいものリストにある本を片っ端からカートにツッコミ、大体Kindle本体代金分ぐらいになったら発注するという謎のイベントを2,3回繰り返していた。 ただ、このイベントでは…
案の定、ブログ始めましたポストです。 ブログを始めるにあたり、自分的に問題だったことを挙げてみる回です。 ※「◯◯問題」とか「◯◯おじさん」 みたいの大好きです。 どのブログサービス使うか問題 2017年にもなり、レンタルサーバーやVPCを借りて自分でブロ…
