朝日ネット 技術者ブログ

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

オリジナルの音声アシスタントを作ろう (5) - Dialogflow 後編

はじめに

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

前回 は Dialogflow を使ってお天気"占い"Botを作成しました。 今回は実際に天気予報情報を取得する部分ならびに自分のアプリケーションと Dialogflow を連携する部分の作成を行っていこうと思います。

続きを読む

論理式が生成される確率を求める

こんにちは。株式会社朝日ネット開発部のxfuzzyです。 数学や関数型言語に興味があります。

前回の記事では論理式をランダムに生成するプログラムを作成してみました。 今回は、前回紹介した方法で、特定の論理式が生成される確率を求めるプログラムを作成します。 このようなプログラムを作成したのは、「論理式をランダムに生成して、証明をしようとしたときに、目的の結果を得るまでにいくつぐらいの論理式が必要か」を知りたいと思ったからです。 

  • 概要
  • 実装
  • 実行例
  • 実行例その2
  • まとめ
  • 採用情報
続きを読む

2019年に向けてPythonのモダンな開発環境について考える

はじめに

開発部の tasaki です。 6 月の記事(「Pythonのパッケージングのベストプラクティスについて考える2018」)では setuptools, pip, venv を使ったパッケージングのフローについて考えました。

techblog.asahi-net.co.jp

今回はモダンな開発用ツールチェーンを持つ他の言語(具体的には JavaScript (Node.js), Go, Rust あたりを意識)と似たような開発フローを Python において構築するにはどうすればよいかということを考えていきます。

  • はじめに
  • 対象バージョン
    • 備考
  • TL;DR (結論)
  • pip と virtualenv の統合 (Pipenv)
    • 概要
    • 使い方
      • インストール
      • Pipenv プロジェクトの新規作成
      • setup.py との併用
  • 静的な型の検査 (mypy)
    • 概要
    • 設定例
    • 使い方
  • Linting (Flake8)
    • 概要
    • 設定例
    • 使い方
  • 自動コード整形 (autopep8, isort)
    • 概要
    • 設定例
    • 使い方
      • 整形前後の差分を表示する
      • 整形して上書きする
    • 備考
  • setuptools.Command と Pipenv scripts
  • おわりに
  • 更新履歴
  • 採用情報
続きを読む

PWAでwebプッシュ通知を作る (5) - 締切通知システムの設計とブログデザイン変更について

はじめに

watanabeです。 前回の予告では今回の記事でバックグラウンドで通知を受け取れるように実装する予定でしたが FCM用のJSをインポートする部分でバージョンを統一したところ

  • ブラウザ上だと、ウェブページを閉じた状態
  • スマホだとブラウザを閉じた状態

両方でプッシュ通知を受け取ることができました。(変更箇所は後述)

今回は、今までの実装を生かしてプッシュ通知を実際に締め切り通知のようなリマインダとして使用する場合のシステムの設計を考えてみます。

バックグラウンドで通知を受け取るための修正について

firebase-messaging-sw.jsの一部を以下のように書き換えました。

変更前

importScripts('/__/firebase/4.10.0/firebase-app.js');
importScripts('/__/firebase/4.10.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');

var messaging = firebase.messaging();

 importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');

変更後 ↓

importScripts('/__/firebase/5.0.0/firebase-app.js');
importScripts('/__/firebase/5.0.0/firebase-messaging.js');
importScripts('/__/firebase/init.js');

var messaging = firebase.messaging();

 importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-app.js');
 importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-messaging.js');

スマホでブラウザを起動していない状態で受け取ったプッシュ通知は以下になります。

検証端末:(701SH、Android 8.0 、Chrome70.0.3538.64)

f:id:watanabe06:20181030174454p:plain

締切通知システムの設計について

引き続き、実際に締め切り通知のようなリマインダとしてプッシュ通知を使用する場合のシステムの設計を考えてみます。

現在実装済なのは以下の部分です。

  • PWAの仕組みでバックグラウンドで通知を受け取る設定をできるようにする。
  • FCMで送り先の端末用のトークンを取得する
  • FCMのAPIをCurlコマンドで叩くことでトークンを取得した端末あてにプッシュ通知を送る

そこに時間指定でプッシュ通知を送られるようにするためには以下の手順が必要になります。

  1. PWAの仕組みでバックグラウンドで通知を受け取る設定をできるようにする。
  2. FCMで送り先の端末用のトークンを取得する
  3. サーバを用意し、Webページから登録したい日時とトークンを送り、サーバのデータベースに保存する。
  4. サーバが指定された日時にAPIを叩くことでプッシュ通知が送られる

図にすると以下のようになります。

f:id:watanabe06:20181102102934p:plain

今回は設計のみで実装はしませんが、今後システムにプッシュ通知を組み込む時の選択肢に入れる予定です。

最後に(ブログのデザイン変更について)

10/26よりブログのデザインが新しくなりました。

変更点は以下になります。

  1. ヘッダーにイラストを配置
  2. ヘッダーにASAHIネットへのリンクを追加
  3. スマホ版のスタイルをPC版と同様のものに変更
  4. サイドバーに表示する採用情報へのリンクをバナーに変更

1.ヘッダーにイラストを配置

イラストはレスポンシブデザインに対応しているので現在閲覧している画面の幅に合わせて表示されます。

f:id:watanabe06:20181029150721p:plain

2.ヘッダーにASAHIネットへのリンクを追加

ヘッダーのロゴをクリックすることでASAHIネットのサービス紹介ページに飛べるようにしました。 はてなブログでは現在、タイトル部分より上にHTMLの部品を挿入することができないため CSSで調整しています。

管理画面のデザイン変更>ヘッダ から追加したHTML

<div class="header-logo">
   <a href="https://asahi-net.jp" target="_blank"><img src="バナーURL" alt="朝日ネットホームページ"></a>
  </div>

ヘッダーにmarginで上にロゴを入れるスペースを追加

#blog-title {
    margin-top: 65px;
...

HTMLのスタイル(position:absoluteで上部に移動)

.header-logo {
    text-align: left;
    margin: 0 auto;
    padding: 15px 15px 10px;
    position: absolute;
    top: 0;
}

3.スマホ版のスタイルをPC版と同様のものに変更

今までは最低限の文字サイズの大小の違いのみだったのを 前述の通り、レスポンシブデザイン対応をしているので PC版と同様の見易いデザインで閲覧できるようになりました。

4.サイドバーに表示する採用情報へのリンクをバナーに変更

採用サイトへのリンクをバナーに置き換えました。 クリックで各採用サイトを表示します。

新デザインでパワーアップしたブログを今後もよろしくお願いいたします。

採用情報

朝日ネットでは新卒採用・キャリア採用を行っております。

オリジナルの音声アシスタントを作ろう (4) - Dialogflow 前編

はじめに

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

前回 は Google の Cloud Speech API を使って音声認識をしてテキストデータを得るプログラムを作成しました。 今回は実際に会話をする部分の作成に入っていこうと思います。

※本記事のスクリーンショットは記事執筆時のものです。今後画面や仕様が変更になる可能性があります。また結果は機械学習によるものなので、同じように入力しても同じ結果を得られない可能性があります。

  • はじめに
  • 会話API
    • Dialogflow
  • 用語
    • Agent
    • Intent
    • Entity
    • Context
    • Dialog
  • 実際に使ってみる
    • Agent 作成
    • Intent の作成
    • Entity を結びつける
    • Response
    • Action and parameters
  • LINEとの連携
    • LINE Developer にてチャネルを作成
    • Dialogflow との連携
    • LINE で会話をする
  • Trainingで精度を上げる
  • おわりに
  • 採用情報
続きを読む

論理式をランダムに生成する

こんにちは。株式会社朝日ネット開発部のxfuzzyです。 数学や関数型言語に興味があります。 前回の記事では、Haskellを使って、論理式を表す型を定義し、ヒルベルト流の推論を定義しました。 今回は論理式をランダムに生成する関数を作ってみたいと思います。 そのような関数を作ろうとした理由は、ランダムに生成した論理式の中から定理を見つけることができたら面白いのではないかと思ったからです。

  • 概要
  • Haskellのrandom関数の説明
  • 論理式をランダムに生成する方法
  • Haskellでの実装
  • 実行例
  • まとめ
  • 採用情報
続きを読む