はてなブックマーク

概要 Koa ライクな API を提供する Node.js 製の gRPC フレームワーク、mali.js を試してみる機会があったので、簡単に使い方を紹介します。(公式サイトには Koa ライクとありますが、Express ライクと受け取って良いでしょう) Node.jsのgrpc実装　grpc パッケージのAPIをラップして簡単にしている印象があるので、手元でgRPCのmockサーバーが必要な際などに役立ちそうだと感じました。 ※ 使ってみたという内容記事なので、実装上の tips や実運用でのノウハウなどに関しては触れません。 公式 Document https://mali.js.org/ GitHub https://github.com/malijs/mali サーバー実装 gRPC のサーバー/クライアントを実装する際には、まずはじめに .proto でサービス/メッセージタ

この記事は Angular Advent Calendar 2018 の 9 日目の記事です。 クソアプリ Advent Calendarでやってくれとツッコミの入りそうなネタですが、Angular関連なのでこちらで書かせてもらいます。 作ったもの Firebase Hostingにデプロイしてあるので、「 same-emoji 」から遊べます。 (PCのブラウザから遊ぶ際はビューポートをSPサイズにすることを推奨です...) 2つ1組でランダムに表示される絵文字をタップして消し続け、タイムを競うという単純なゲーム(クソゲー)です。 画面構成もシンプルで、次の画面で構成されています。 スタート画面 レベル選択画面 ゲームプレイ画面 ゲーム結果画面 リポジトリ https://github.com/daikiojm/same-emoji モチベーション Angular MokuMoku Ni

初めに この記事では以下のような構成のAngularアプリケーションを開発する際のローカル開発環境の構築を解説します。 Angular公式のi18n機能を使ってi18nを実現する 最終的なビルド生成物はAOTビルド後にサーバーまたはS3などの静的ファイルホスティングサービスから配信する **/en/ **/ja/ などのアクセス先のパスを変化させることによって言語切替が可能 アプリケーションのUI上から言語選択を行う機能の動作確認をローカルで行う必要がある 環境 $ ng -v Angular CLI: 6.1.5 Node: 9.11.1 OS: darwin x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに 前々から、見てみようと思いながら手を付けられていなかった、Angular CDKを少し触ってみたので、メモを残しておこうと思います。 AngularがCDKが提供する機能、「CDKを学ぶべき理由」などに関しては@QuramyさんがAngular Component Dev Kit 入門という記事でわかりやすく説明されているので、そちらを見るとイメージが掴めるかと思います。 Angular CDKの中でも提供されているAPIがわかりやすいのと、ライブラリ開発者でなくても、アプリケーションの実装に直接使えそうなLayoutを触ってみました。 公式ドキュメント: https://material.angular.io/cdk/layout/overview 準備 インストール

Firebase Cloud FunctionsとGoogle Cloud Vision APIで画像に自動タグ付けに続き、Firebase Realtime Databaseに保存されたドキュメントの全文検索にAlgoliaを使ってみたので、ざっくりとした手順とサンプルを紹介します。 AlgoliaはFirebase公式のドキュメントでも紹介されている全文検索SaaSで、Node.jsのSDK経由でインデックスの登録ができる為、Firebase Cloud Functionsを使ったFirebase Realtime Databaseとの連携もしやすくなっています。 また、クライアント(Web、iOS、Androidなど)のSDKも充実しているので、簡単に検索機能を実現することが出来るようです。 Firebase Cloud FunctionsとGoogle Cloud Vision A

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事は ハンズラボ Advent Calendar 2017 2日目の記事です。 ハンズラボのアドベントカレンダーがみるみる埋まっていくのを見て、一人ニヤニヤしていた@daikiojmです。 7月にハンズラボに入社して以来、Angluarでフロントエンド開発をしています。 今回は、個人的に気になっていた、contentfulの概要と、ハンズオンの手順をまとめてみます。 概要 contentfulはAPIファーストなCMSで、ドイツのスタートアップによって開発されており、WordPressやDrupalなどの従来のCMSとは異なり、ディスクトップやモバイルだけでなく、デジタルサイネージや、スマートウォッチなどのプラットフォームへのコンテンツ配信が可能なAPIが用意されていることが特徴です。 WordPressなどと同様に、記事(コンテンツ)の投稿、管理画面のUIは用意されていますが、ユー

これまで、サーバーレスなSPA on AWSを実現しようとした場合、Cognitoによる認証部分の実装には、amazon-cognito-identity-jsというAWS製のJavaScriptライブラリを使うのが主流でした。 ただ、amazon-cognito-identity-jsを使う場合、このライブラリ本体の他にAWS SDKなどを含めた複数のライブラリを読み込む必要があったり、用意されているAPIの使い勝手が良くなかったりと、多少の辛みを感じる部分がありました。 今回は、AWSより新しくリリースされたAWS Amplifyというライブラリを使ってAngularアプリケーションにCognitoによる認証機能の実装を行ってみたいと思います。 AWS Amplifyの概要は、本アドベントカレンダー4日目の nakayama_cwさんがAWS AmplifyでサーバレスWebアプリの構

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

これは Angular Advent Calendar 2017 8日目の記事です。 この記事では、「SPA開発未経験者がAngularを半年間やってみてわかったポイントとハマりどころ」というテーマで、この半年間Angularを学ぶ上でポイントになった機能やキーワード、ハマりどころなどを紹介します。 初心者目線で、これからAngularを始めたい方や初心者の方向けに項目ごとに参考リンクなどを交えながら紹介していこうと思います。 Angularのググラビリティ Angularに関する情報を得る手段として、Webが一番手軽で有効な手段かと思います。 これに関しては、Angularを正しく学習するためのガイドラインというAngluar User Groupのブログ記事で紹介されていますが、Angularを始めた頃の自分にとってこの内容は、知っておいてよかったと思える内容でした。 また、前バージョ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに Angularで作るSPAにCognito認証を組み込むサンプルを作りました。 ログイン・ログアウトだけではつまらないので、ログイン時に使えるS3ファイルアップロード機能も追加しています。 awslabsから公開されているaws-cognito-angular2-quickstartというサンプルが大変参考になりました。 作っていく AWS側の準備 S3バケットの作成 Cognito Identity Pool に設定するロールの設定に、アクセス許可をするS3の情報を記載する必要があるので、事前にS3バケットを作成しておきます。 今回は、 angular-cognito-s3-file-uploader という名前のバケットを作成しました。 バケットポリシーと、CORSの設定は以下のとおりです。 { "Version": "2008-10-17", "Id": "PolicyFo

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 AWSコンソール、AWS CLIでの作業はオペミスがつきものです。 IAMで実行権限を制限する、手作業を減らすなどの対策も大切ですが、不正な変更をいち早く検知する仕組みがあるとより安心です。 今回は、次のような仕組みを実現してみたいと思います。 IAMユーザーのAWSコンソール・CLIでの操作をSlackに通知する 次の記事を参考にさせてもらいました。 セキュリティーグループが変更されたらSlackに通知する -ハンズラボエンジニアブログ CloudTrailの設定 有効化 まずは、CloudTrailを有効化します。 AWSコンソールにログインし、CloudTrailのメニューを開きます。 まだCloudTrailの設定を行っていな環境では、以下のような画面が表示されるので、「今すぐ始める」を選択します。 CloudTailの有効化では、任意の「追跡名」を設定します。 ※今回はすべ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?