朝日ネット 開発者ブログ

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

Word2vec や fastText を Java のコードに適用して “add + map - list = put” のような結果を得たい

はじめに

開発部の tasaki です。 2013 年の Word2vec や 2016 年の fastText など、自然言語処理の分野には単語をベクトル(分散表現)に変換する手法がいくつかあります。 一旦分散表現に変換してしまえば加減算などの線形代数的な操作、 例えば “king - man + woman = queen” (王から男性を引き算し、女性を足し算すると女王になる)というような単語同士の演算が可能となります。 これを自然言語ではなくプログラムのコード(を元にした文書)に適用すればどうなるかということが気になったので gensim という Python のライブラリを使って実装をしてみました。

  • はじめに
  • 動作確認環境
  • 全ソースコード
  • Java のコードを文書に変換する
  • gensim を使う
  • 実行例
    • 対象
    • Word2vec
    • fastText
  • おわりに
  • 採用情報
続きを読む

PWAでwebプッシュ通知を作る (4) - FirebaseとCurlを使用して特定の端末に通知を送る

はじめに

watanabeです。 前回の記事ではデバッグ機能からプッシュ通知を送信して受け取ったときの処理を実装しましたが 今回は受信する端末ごとに異なるトークンを取得して、特定の端末にプッシュ通知を送れるようにします。

実装の手順

  1. Firebase Cloud Messaging(FCM)で必要な値を取得する
  2. 端末ごとのトークンを取得して表示する仕組みを作る
  3. コマンドをCurlで送信してプッシュ通知を受け取る

1.Firebase Cloud Messagingで必要な値を取得する

Firebaseに新規プロジェクトを登録し、設定画面から 以下の値・コードを取得します。

  • HTMLに貼り付ける、Firebaseを追加するスクリプト
  • サーバーキー
  • 送信者ID

参考) f:id:watanabe06:20180926144051p:plain

2.端末ごとのトークンを取得して表示する仕組みを作る

前回までで作成したすでにPWA化されたWebページ(タップでしゃべる招き猫)に変更を加えて プッシュ通知送信に必要な個々のトークンを確認できるようにします。 画面下部の「許可する」をクリックするとプッシュ通知受信の許可するかどうかの確認をして、許可をした場合に 同時に招き猫のフキダシにトークンを表示します。 (一度許可をした後でもトークンはボタンを押すことで何度でも表示できます。)

必要なファイル

  • PWA化するwebページ一式(HTMLファイル、画像、jsファイル、CSS)
  • JSONファイル
  • Service WorkerのJavaScript

イメージ) f:id:watanabe06:20180926144405p:plain

index.html(メインのHTML)

Firebase公式ガイドを参考に、

  • 1.で取得したFirebase追加のためのコード
  • プッシュ通知許可確認のコード
  • トークン表示のスクリプト

を追加します。

また、Service Workerのファイル名はFCMを使用する場合「firebase-messaging-sw.js」固定なので 読み込むService Worker部分も変更します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="apple-touch-icon" href="iconV2.png">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="manifest" href="manifest.json">
    <script src="jquery.js"></script>
    <script src="main.js"></script>
    <title>ランダムでしゃべる招き猫</title>
  </head>
  <body>
    <div class="container">
      <div class="fukidashi">招き猫をタップしてね</div>
      <div class="fukidashi_fuchi">
        <img src="img/fukidashi_fuchi.png" alt="">
      </div>
      <img src="img/cat.png" alt="タップでしゃべる" onclick="msg();" class="cat">
      <!--新たに許可・トークン表示ボタンを追加-->
      <br><input type="button" onclick="requestPermission() ;" value="許可する">
    </div>

    <script  type="application/javascript">
 //Service Workerの読み込み
  if('serviceWorker' in navigator){
   navigator.serviceWorker
    .register('/firebase-messaging-sw.js')
    .then(function(){
      console.log('Service Worker Registered');
   });

  }
  </script>
    <script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
    <script>
  //FCMで取得したコードをコピー&ペーストする部分
  // Initialize Firebase
  var config = {
    apiKey: "******",
    authDomain: "******",
    databaseURL: "******",
    projectId: "******",
    storageBucket: "******",
    messagingSenderId: "******"
  };
  firebase.initializeApp(config);
const messaging = firebase.messaging();

  function requestPermission() {
   //プッシュ通知の許可をする処理
    console.log('Requesting permission...');
    // [START request_permission]
    messaging.requestPermission().then(function() {
      console.log('Notification permission granted.');
      // TODO(developer): Retrieve an Instance ID token for use with FCM.
      // [START_EXCLUDE]
      // In many cases once an app has been granted notification permission, it
      // should update its UI reflecting this.
      viewToken();
      // [END_EXCLUDE]
    }).catch(function(err) {
      console.log('Unable to get permission to notify.', err);
    });
    // [END request_permission]
  }


function viewToken(){
  messaging.getToken().then(function(currentToken) {
    if (currentToken) {
      msg02('トークンにゃ : '+ currentToken);//フキダシにトークンを表示。functionはmain.jsに定義。
    } else {
      // Show permission request.
      console.log('No Instance ID token available. Request permission to generate one.');
      // Show permission UI.
      updateUIForPushPermissionRequired();
      setTokenSentToServer(false);
    }
  }).catch(function(err) {
    console.log('An error occurred while retrieving token. ', err);
    showToken('Error retrieving Instance ID token. ', err);
    setTokenSentToServer(false);
  });
}
  </script>
  </body>
</html>
main.js(メインページで読み込むjs)

新たにフキダシに指定したメッセージを表示するfunction追加

function msg02(message) {
  $(".fukidashi").text(message);
}
manifest.json(PWA化に必要なManifestファイル)

下部に以下の定義を追加(※FCMを使用する場合は「103953800507」の固定の値となります。)

  "gcm_sender_id": "103953800507"
firebase-messaging-sw.js(新たに作成したService Worker)

今までのService Workerのスクリプトに追記・一部変更します。 Firebase用のスクリプトを読み込み、 プッシュ通知を受け取ったときの処理を記述します。

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");

firebase.initializeApp({
  messagingSenderId: "<送信者ID>"
});

self.addEventListener("push", function(event) {
  //送られたプッシュ通知の本文を表示
  if (Notification.permission == "granted") {
    console.log("Push Notification Recieved", event);
    event.waitUntil(
      self.registration
        .showNotification(event.data.json().notification.title, {
          body: event.data.json().notification.body
        })
        .then(
          function(showEvent) {},
          function(error) {
            console.log(error);
          }
        )
    );
  }
});

3.コマンドをCurlで送信してプッシュ通知を受け取る

2.で実装したwebページをFirebaseでデプロイ後 実際にページ動かし、トークンを表示します。

トークンと、Firebaseで取得したサーバーキーを以下のスクリプトに貼り付けて コマンドラインからCurlのコマンドで送信します。

curl "https://fcm.googleapis.com/fcm/send" \
     -X POST \
     -H "Content-Type: application/json" \
     -H "Authorization: key=<サーバーキー>" \
     -d '{
         "notification": {
            "title": "プッシュ通知タイトル",
            "body": "プッシュ通知本文",
            "click_action": "<プッシュ通知をクリックしたときに移動先にするURL>",
          },
          "to": "<ここにトークン>" 
        }'

プッシュ通知が送信されました。 コマンドラインで「"success":1」を含むJSONデータが出力されていて プッシュ通知が実際にデスクトップに表示されていれば成功です。

(確認ブラウザ:Windowsの Firefox62.2、 Google Chrome 69.0)

f:id:watanabe06:20180926145953p:plain

次回予告

次回はバックグラウンド(ページ非表示時)でもプッシュ通知を受け取れるようにします。

採用情報

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

オリジナルの音声アシスタントを作ろう (3) - Cloud Speech API

はじめに

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

前回Media Capture and Streams を使ってブラウザで音声を録音しファイルでダウンロードするところまで作ってみました。 今回はそのファイルをサーバにアップロードして音声認識を行う部分を作っていこうと思います。

  • はじめに
  • 音声認識をサーバ側で行うには
    • 1. 各種クラウドサービスを利用する
    • 2. Julius を利用する
    • 3. 自前で機械学習をする
  • プログラム作成
    • サーバ作成
    • Cloud Speech API の有効化とAPI キーの取得
    • ページ作成
    • サーバ側(GAE)プログラム作成
    • API キー
  • Cloud Speech API
  • 実行結果
  • 補足
  • おわりに
  • 採用情報
続きを読む

命題論理のヒルベルト流をHaskellで実装する

こんにちは。株式会社朝日ネット開発部のxfuzzyです。 数学や関数型言語に興味があります。 Haskellという言語に、興味はあるのですが、プログラムを作ったことはほぼありませんでした。そのため、Haskellを実際に使って学習をしつつプログラムを作ってみたいと思っていました。 また、数学に興味がありながら、計算をするのは苦手でした。特に、論理式の変形は、ルールは単純なのですが、長い式が出てくると、手計算ではミスが発生して残念だと思っていました。 そこで私は、Haskellを使って、論理式の操作をするプログラムを作ってみることにしました。

  • 概要
  • 背景の説明
    • 論理式とトートロジー
    • ヒルベルト流
    • ヒルベルト流の例
  • プログラムの説明と実行例
    • 論理式のデータ型
    • match関数
    • 論理式を書きやすくする
    • ヒルベルト流の推論を行う
  • まとめ
  • 採用情報
続きを読む

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

はじめに

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

  • はじめに
  • ソースコード
  • 備考
    • 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が有効であることの確認
  • おわりに
  • 採用情報
続きを読む