Septeni Engineer's Blog

セプテーニ・オリジナルのエンジニアが綴る技術ブログ

Firebaseで動くアプリをReact + Redux + TypeScriptで作るときのアラカルト

こんにちは。菅野です。

Reactと静的型付け言語は最高ですよね!(唐突)
既に使いこなしてる人も、今最高だと理解した人もいると思います。
ただ、今現在の社内ではVue.jsとBabelを使ったES環境が主流でReact派は悲しい思いをしています。1
そこで私は社内向けの小物ツールをReactで自作してReact欲を発散していたりします。

どんなツールかというと、タスクの見積もりで行うプランニングポーカーをちょこっと省力化するもので
コイツを社内にじんわり布教しています。フフフ…

f:id:zakknak:20180208005425p:plain

このポンコツツールで使用されているものは、 Scala.js + React + Akka HTTPでWebSocketという闇の技術で、
そんな物をちゃっかり開発用サーバで動かすという投げやりな運用をしています。

しかしScala.js + Reactがちょっと辛くなってきたのと、やっぱりエコシステムの大きなフツーのReactがやりたくなってしまいました。
そこで現状のダークな感じから、React + TypeScript + Firebaseというお洒落な技術2に大変身させてみました。

f:id:zakknak:20180208005442p:plain

今回は私が今時のReact + Redux + TypeScriptの構成を学びながら、
乱立する周辺ツールやライブラリの中からどのようなものを使ったのかをご紹介したいと思います。


  1. 今後Reactをメインにすることが決定しています

  2. 当社比

続きを読む

aws-vault でアクセスキーを安全に

あけましておめでとうございます。河内です。

数ヶ月前に aws-vault を使い始めて安全の高まりを感じるので紹介します。

AWSのサービス上では IAM Role をできるだけ使ってアクセスキーを使わないようにしていますが、ローカルでの開発時にIAMのアクセスキーを利用することはあります。 アクセスキーが漏れると困ったことになります。 本番環境で利用している AWS アカウントで漏れると、付与している権限次第では機密情報が漏洩したりサービスが壊される可能性があります。 また開発環境としてのみ利用しているAWSアカウントであっても、ビットコインのマイニングなどで容赦なくリソースを消費され高額な請求が来たりする可能性ががあります。 そのようなことが起きないようにアクセスキーは安全に管理する必要があります。

続きを読む

Play FrameworkでServer-Sent Events(SSE)を使ってServer pushする方法あれこれ

あけましておめでとうございます。
初めまして、2017年4月に中途入社した張沢と申します。

今回はPlay FrameworkでServer-Sent Events(SSE)を使用してServer pushを行う実装方法について書きます。 WebSocketの情報は検索すると色々見つかりますが、SSEの記事やサンプルコードはあまり見かけないため…。

Play Framework 2.5からstream関連のAPI実装がAkka Streamに変わりました。そのため、Server pushのAPIでもAkka Streamを使用する必要があります。この記事ではSSEでのAkka Streamの使用方法について紹介します。

Server-Sent Eventsとは

Client(ブラウザ)へHTTP server pushを実現するための技術の1つで、以下のような特徴があります。

  • HTTPを利用したストリーム通信
  • 通信はServerからClient(ブラウザ)への一方向
  • UTF-8エンコードの文字列のみ送信可能
    • Base64に変換することで、画像データやUTF-8以外の文字列も送信できます
  • IEやEdgeではサポートされていませんが、polyfillが存在します
続きを読む