朝日ネット 開発者ブログ

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

JavaScript

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

はじめに watanabeです。 前回の予告では今回の記事でバックグラウンドで通知を受け取れるように実装する予定でしたが FCM用のJSをインポートする部分でバージョンを統一したところ ブラウザ上だと、ウェブページを閉じた状態 スマホだとブラウザを閉じた状…

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

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

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

はじめに こんにちは。朝日ネットでWebアプリケーションの開発を行っている tommy です。 前回 は Media Capture and Streams を使ってブラウザで音声を録音しファイルでダウンロードするところまで作ってみました。 今回はそのファイルをサーバにアップロー…

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

Web フロントエンド(というより Node.js + npm)のエコシステムでは他のエコシステムと比較して大量の細かいパッケージを作成する傾向にあります。 TypeScript + React + Redux + react-redux + react-router + redux-form + ... などとを組み合わせていっ…

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

はじめに watanabeです。 前回の記事でWebページをPWA化しましたが、今回の記事ではプッシュ通知を受け取りその処理をする部分を実装します。 はじめに プッシュ通知のAPIについて 実装する 1. ユーザの許可を得る部分 2. プッシュ通知を受け取る部分 3. プ…

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

前回は Web Speech API を使ってブラウザで音声認識をやってみました。 ただし、現状では対応ブラウザが少ない上に、まだ不安定という問題がありました。 そのため、今回はブラウザでマイクの音を拾うことができる API の Media Capture and Streams を使っ…

PWAでwebプッシュ通知を作る (2) - 簡単なwebページをPWA化してみる

今回のテーマ:PWA化の具体的なコードの書き方 watanabeです。 前回触れたとおり、PWA化に必要な具体的なコードの書き方を説明します。 今回のテーマ:PWA化の具体的なコードの書き方 PWA化に最低限必要なコードと具体的な記述方法 1 アイコンを作成する 2 Ser…

PWAでwebプッシュ通知を作る (1)

PWAとは どのようにPWA化するのか PWA化されたwebページの例 採用情報 朝日ネットの開発チームでサービスの企画やUIデザイン、HTML+CSSでの実装を主に担当している watanabeです。 今回技術テーマとしてwebページをネイティブアプリのように見せる「PWA(Prog…