基づいたプログレッシブフレームワークです。PostCSS)に基づいています。開発を強力かつ高性能にすることです。フレームワークによって設計やコーディングルールを矯正される面が大いにあるため、PureなVue.jsの導入を検討する際にも引き合いに出されることが多い印象。最近開発を手伝っている案件でも、Nuxt.js(TypeScript)が採用されており、ちょくちょく触ることがある。Componentとしてdatepickerを提供するnpmモジュール。Component提供されるdatepickerの中ではダウンロード数も多く優勢。個人的にも以前別のプロジェクトで使ったことがあり、シンプルなAPIが使いやすく気に入っていたこともあり、今回もNuxt.jsと組み合わせて導入することにした。デフォルトのUIが結構簡素なものなので、カスタムCSSを当てて見た目は自前で作り込んで上げる必要がある。defined何も考えずvuejs-datepickerのドキュメントに沿って、対象のComponentにdatepickerをimportとして動作確認しようとすると、次のようなエラーが発生する。いいが、Nuxt.jsのエラー画面はさすが優れた開発者エクスペリエンスを念頭に置き開発されたアプリケーションフレームワークと歌っているだけのことがある。definedこれは、クライアントサイドJavaScriptで動作することを前提としたモジュールをサーバーサイドレンダリングで動作させようとして、ブラウザオブジェクト(今回の場合documentオブジェクト)にアクセスしようとするも、失敗したことに起因するエラーっぽい。問題を解決する方法は次のような手順でdatepickerを使用すればよい。最初から順を追って説明する。内容を次のように定義する。コンポーネントを利用する。/></client-only>こうすることで、意図的にクライアントサイドレンダリングでdatapickerを利用するようにすることができる。Authorizerを簡単に実装することができる。Authorizerを使わないで実装した話。現在)では、リクエスト署名方式が使われており、SlackからのPOSTリクエストを受ける側のアプリケーションではこの署名を検証する必要がある。いうHTTPヘッダーが付加されていて、この内容が署名になっている。詳しい検証方法はドキュメントにもあるので触れないが、検証には次の情報が必要になる。Authorizerで扱えるのはheaderのみと認識し軌道修正。Authorizerに設定したLambdaには次のようなイベントが渡ってきており、その中にbodyは含まれないようです。メソッドを呼び出す実装にした。パッケージの1機能として、gRPCによる通信をサポートしている。Nest.jsでgRPCのサーバ実装をされてる方がいて、この記事がすごく参考になった。パッケージにはクライアント実装のラッパーも含まれてるようなので、今回はこれを試してみる。みるとなんとなく雰囲気はわかる。サーバ上記で挙げたQiitaの記事のサンプルリポジトリがGitHubに公開されていたので、こちらを使わせてもらった。定義されたサービスをハンドリングする前提で進める。moduleというモジュールを定義した。Decoratorに渡すconfigは以下の通り。オブジェクト内容として扱われる。APIとしてその機能を提供するというユースケースを想定している。以下は、ControllerからgRPCをハンドリングするサービスの機能を呼び出している部分。タイミングで、実際に使用するサービスを動的に取得している。サーバー側で加工してからレスポンスするパターンなどが想定される。Clientを扱うのではなくService層で扱うことになるかと思う。APIとして呼び出せるようになっていることがわかる。パッケージ自体、まだ発展途上な感じられる(インターフェースは定義されいるが実装がされていないなど)が、Nest.jsライクな操作(Decoratorでサービスのメソッドを定義するなど)でgRPCのマイクロサービスを構築できるのはかなりのメリットだと思うので、今後も使っていきたい。パッケージのインターフェースを事前に触っていると取っつきやすいように感じる。gRPCはじめにNode.jsのgRPCサンプルコードを解説されている方がいたのですが、この記事で触れられているのはUnaryなリクエストのみで、Streem通信に関しては触れられていなかったのでChartを例に試してみた。tomokazu-kozuma.comNode.jsは現時点(2018/12/23)でのLTSv10.14.2を使っています。cycleの項目が参考になります。Buffersの定義を作成しました。2;}上記.protoファイルのmessageと対応するTypeScriptのInterfaceも作成しました。パッケージのインターフェースを一通り眺めながら進めて行きたかったので、protoファイルからコードを自動生成を行うことはしていません。protoLoaderに.protoファイルを渡してサービス定義を読み込みます。grpc.ServerCredentials.createInsecure());server.start();ClientClient側もServer側と同様に、protoLoaderに.protoファイルを渡してサービス定義を読み込みます。今回は、REPLで実行する。Serverで真意を発揮しそうなので、機会があればgRPC-webでも試してみたい。従来httpとwsを併用していたような箇所をgRPC1本にまとめつつ型安全を保てるのはかなり実用的な印象がある。Node.jsでのServer実装の例は少なそうなので、そのうちもう少し大きめのサンプルを作ってみたいかもしれない。16日目の記事です(大分遅れています)。私が以前在籍していたハンズラボはAWS関連技術に強みを持った会社だったので、今回はAWS関連の小ネタを書きたいと思います。adventar.org対象の読者ざーっと、書いてみて以下のような方が対象の読者になるのではないかと思っています。普段からAWSを使って開発している人にとっては当たり前の内容ばかりかもしれないですこの記事を書こうと思ったきっかけフロントエンドエンジニアと一口に言ってもいろいろなバックエンドを持つ人がいるここでは、言葉の定義を深掘りすることはしないが、以下のようにフロントエンドエンジニアと言ってもいろいろなバックエンドを持つ人がいるなぁという印象を受けている。サーバーサイドインジニアWebコーダーデザイナープログラミングスクールを経てフロントエンドエンジニアとして働き始めたばかりの人などなど自分自身も、新卒で入社した会社ではWindowsのネイティブアプリケーションの開発/インフラの保守のような仕事を行っていた後、exしたハンズラボでは、AWSのマネージドサービス/アプリケーションサービスを使い、主にフロントエンド仕事をしてきた経緯がある。フロントエンド/バックエンドともに専門性が増しているフロントエンド(特にSPA)フレームワーク/ライブラリのが普及していることや、ツールチェーン周りのエコシステムの発達などで、フロントエンドエンジニアの備範囲が広がっている印象がある。サーバーサイドインジニアもまた、マイクロサービスアーキテクチャ、AWSなどのクラウドサービスに依存するアプリケーションサービスのキャッチアップなど、それぞれの領域で求められる専門性が増している印象がある。専門性と同時に多少性もましている気がしていて、これに関してはすごく共感できる記事を書いている方がいた。note.mu今回は、上記を踏まえてAWS上に構築されるWebアプリケーションを開発するフロントエンドエンジニアが最低限知っておきたいAWSサービスに関する内容をざっくりまとめていきたいと思う。関わりが深そうなAWSサービス一覧フロントエンドエンジニアと関わりが深そうなAWSサービス一覧とユースケースを並べていく。上記で挙げたようなフロントエンドアプリケーションを構築するために利用するAWSサービスは様々。チームの規模感なんかによっても、変わってくるとはいもうけど、AWS特有のアプリケーションサービスが多いので、インフラの管理を行うチームでは対応しきれずフロントエンドエンジニアがここらへんの面倒を見るパターンも多そうというという印象。AWSに限らず、ある程度の規模感をもって開発しているチームでフロントエンド配信CDNの運用とかをどうやっているかは単純に興味がある。最後にここまで挙げてきたように、AWSではフロントエンド開発にも欠かせないツールを数多く提供している印象。上記で挙げたようなアプリケーションサービスはサーバーレスアーキテクチャの文脈で話に出ることも多い。サーバーサイドの開発経験がないフロントエンドエンジニアでもこのようなAWSサービスを組み合わせることで簡単にWebアプリケーション全体を構築することができたりする。多くの仮想通貨取引所では、APIトレーダー向けに取引のための注文APIや価格情報を取得するためのAPIが公開されている。ngx-chartsを使ってチャートを描画してみたので、ポイントとサンプルコードを記録しておく。APIは、ろうそく足チャートを描画するのに必要な情報を取得できるAPIで、以下の情報が含まれる。期間内の出来高合計OHLCVデータCandlestickデータはOHLCVというフォーマット(フォーマットというより並び順)で配信されていて、それぞれは以下の情報とマッピングすることができる。期間を示すタイムスタンプが配信されている。呼んだりもするらしい。https://docs.bitbank.cc/#!/Candlestick/candlestickOHLCVとngx-chartsのseriesとのマッピング今回作ったサンプルでは、ロウソクやヒゲは描画せず、単純なlineチャートとして表現したいので、OHLCVから必要な価格情報とtimestampのみを使用して、ngx-chartsのseriesの形にマッピングする。いっても、以下のようなTypeScriptのインターフェースを定義して、RxJSのmapオペレータの中で単純なマップをするだけ。number;}次のようなマッピング用のメソッドを用意して、cnaclestickの6番目の要素とのtimestampと1番目の要素の開始時の価格でlineチャートを描画する情報を作っていく。}));}実際にはRxJsのmapオペレータの中で上記のマッピング用のメソッドを呼び出す。-StackBlitz通過ペアと期間を指定して、現在から1日前、1週間前、1ヶ月前、1年前それぞれの価格lineチャートが取得できるようになっている。実装だが、価格推移の雰囲気を表現するのには十分じゃないかと思う。各取引所でこういったpublicデータを配信するAPIがが公開されているので、リアルタイムデータと合わせてまとめサイトみたいなのを作ってみても面白そう。ファイルのファームウェアをダウンロードできるサイトを用意してくれている。Configuratorただ、ここから変更できる内容には制限があり、少し凝ったキーマップに変更しようとすると、キーマップファイルを自分で修正してソースからビルドする必要がある。キーマップの作成時には、以下の記事が大変参考になった。キーを複数のキーに割り当てたくなりGUIからのキーマップ作成を諦め、ソースからビルドすることを決心した。いうavrマイコン用のビルドツールをインストールすればいいことがわかった。brewで一発インストールできるとの記事を見て、軽い気持ちで試みるもmake実行中にコンパイルエラーが発生し、brewやビルドツール周りの環境を確認するも未だに解決していない状態。リポジトリにIssueを投げつつ、Dockerで用意されたビルド環境を使うことにした。ビルド用のDockerfileがあったので、これを使い使ってみる。リポジトリに含まれているデフォルトのキーマップをビルドする。使ってもいいかもしれない。いうファイルが出力されているはず。終わりにひとまず、当初考えていたキーマップに変更することができて概ね満足です。ErgoDox自体に慣れるにまでに時間がかかりそうで、暇な時にタイピングゲームとかしている状況。(学生の頃にイキってUS配列のMacを使い始めたものの、なかなか慣れなかったときの感覚)このブログもErgoDoxで書いてるけど、正直苦行なので早く慣れていきたい。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。