朝日ネット 技術者ブログ

朝日ネットのエンジニアによるリレーブログ。今、自分が一番気になるテーマで書きます。

TypeScript + React + Redux + α の利用例兼チートシート

追記 (2018/12/25)

当記事をリニューアルし、より詳細な解説を加えた続編を書きました。 今後はこちらの記事をご参照いただければと思います。

techblog.asahi-net.co.jp

はじめに

開発部の tasaki です。 Web フロントエンド(というより Node.js + npm)のエコシステムでは他のエコシステムと比較して大量の細かいパッケージを作成する傾向にあります。 TypeScript + React + Redux + react-redux + react-router + redux-form + ... などとを組み合わせていった場合、各パッケージがどのような機能を持ち、大量のパッケージのどこに関数やクラス(+ TypeScript の型)が定義されているのかよく分からなくなりがちです。 そこで、ソースコードをそのままチートシートとして使えるような小さいアプリケーションを作成してみました。

  • 追記 (2018/12/25)
  • はじめに
  • ソースコード
  • 備考
    • Parcel を使う
    • Parcel は TypeScript の型エラーを報告してくれない
    • props の定義に注意
    • 循環依存に注意
  • おわりに
  • 採用情報
続きを読む

ISPを構築してみる (3)

朝日ネットで業務システムを開発しているkakoです。前回の記事では、プライベートASになんちゃってISP(KakoNet)を構築するための手順と、VirtualBoxの内部ネットワークにVyOSとUbuntuを構築する方法について述べました。今回は下図のように、次の検証・構築手順として挙げている、VyOS間のBGPについて記載したいと思います。

f:id:kako-asahi:20180816054158p:plain

  • 仮想環境に検証用ネットワークを構築
  • VyOS間でのBGP
    • BGP設定前のルータの状態を確認
    • BGPの設定
    • 各コマンドの簡単な解説
    • BGPが有効であることの確認
  • おわりに
  • 採用情報
続きを読む

PWAでwebプッシュ通知を作る (3) - ブラウザのデバッグ機能を使用してプッシュ通知を受け取る

はじめに

watanabeです。 前回の記事でWebページをPWA化しましたが、今回の記事ではプッシュ通知を受け取りその処理をする部分を実装します。

  • はじめに
    • プッシュ通知のAPIについて
  • 実装する
    • 1. ユーザの許可を得る部分
    • 2. プッシュ通知を受け取る部分
    • 3. プッシュ通知をクリックしたときの処理
  • デバッグ用のプッシュ通知を試す
  • 次回予告
  • 採用情報
続きを読む

オリジナルの音声アシスタントを作ろう (2) - Media Capture and Streams API

はじめに

こんにちは。朝日ネットでWebアプリケーションの開発を行っている tommy です。

前回Web Speech API を使ってブラウザで音声認識をやってみました。 ただし、現状では対応ブラウザが少ない上に、まだ不安定という問題がありました。

そのため、今回はブラウザでマイクの音を拾うことができる API の Media Capture and Streams を使ってみようと思います。

  • はじめに
  • 今回の大まかな流れ
  • getUserMedia
  • Web Audio API
  • サンプルコード
    • サンプル1: 波形グラフを出力する
    • サンプル2: Flac ファイルとしてダウンロードする
  • まとめ
  • 採用情報
続きを読む

グラフデータベースNeo4jを使ってコードの依存関係を解析する

はじめに

開発部の tasaki です。 依存関係 (dependency) という言葉は「クラスの依存関係」「ライブラリの依存関係」「命令の依存関係」「タスクの依存関係」などなど、コンピュータを扱う上では分野を問わず頻出する用語です。 依存関係はグラフ構造 (dependency graph) として表すことができ、このデータをグラフデータベースである Neo4j に入力しておくことで効率よく関係性を検索できるようになります。

今回は例として jdeps と簡単な Python スクリプトを使って Java のパッケージの依存関係を Neo4j に登録し、クエリ言語である Cypher を用いて依存関係を解析してみます。

  • はじめに
  • 動作確認環境
  • Neo4j について
    • 概要
    • Neo4j のインストール
    • Cypher の基本的な使い方
    • Neo4j Python Driver の使い方
  • 依存関係を解析する
    • 実行例
    • 指定したパッケージが直接依存しているパッケージの表示
    • 指定したパッケージが間接的に依存しているパッケージの表示
    • 指定したパッケージに直接依存しているパッケージの表示
    • 指定したパッケージに間接的に依存しているパッケージの表示
    • count 集計関数による件数の取得
    • WHERE による複雑な検索
    • 指定パッケージから指定パッケージへの依存の最短経路の表示
    • クラスタリング (Neo4j Graph Algorithms)
  • おわりに
  • 採用情報
続きを読む

ISPを構築してみる (2)

朝日ネットで業務システムを開発しているkakoです。前回の記事では、AsahiNet内のプライベートASになんちゃってISP(KakoNet)を構築する、という目標の全体構想を述べました。今回はそれを実現するための検証・構築手順を提案したいと思います。また最初の検証として、VirtualBoxの内部ネットワークにVyOSとUbuntuを構築した手順を記載します。

  • 全体構想を実現するための検証・構築手順
  • VirtualBoxの内部ネットワークにVyOSとUbuntuを構築
    • VirtualBoxのインストール
    • VyOSをVirtualBoxへインストール
    • UbuntuをVirtualBoxへインストール
    • コアルータとホスト間でIPの到達性があることを確認
  • おわりに
  • 採用情報
続きを読む