Skip Navigation
Show nav
Dev Center
  • Get Started
  • ドキュメント
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
    • .NET
  • ドキュメント
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku のアーキテクチャ
    • Dyno (アプリコンテナ)
      • Dyno Management
      • Dyno Concepts
      • Dyno Behavior
      • Dyno Reference
      • Dyno Troubleshooting
    • スタック (オペレーティングシステムイメージ)
    • ネットワーキングと DNS
    • プラットフォームポリシー
    • プラットフォームの原則
  • Developer Tools
    • コマンドライン
    • Heroku VS Code Extension
  • デプロイ
    • Git を使用したデプロイ
    • Docker によるデプロイ
    • デプロイ統合
  • 継続的デリバリーとインテグレーション
    • 継続的統合
  • 言語サポート
    • Node.js
      • Working with Node.js
      • Node.js Behavior in Heroku
      • Troubleshooting Node.js Apps
    • Ruby
      • Rails のサポート
      • Bundler の使用
      • Working with Ruby
      • Ruby Behavior in Heroku
      • Troubleshooting Ruby Apps
    • Python
      • Working with Python
      • Python でのバックグランドジョブ
      • Python Behavior in Heroku
      • Django の使用
    • Java
      • Java Behavior in Heroku
      • Working with Java
      • Maven の使用
      • Spring Boot の使用
      • Troubleshooting Java Apps
    • PHP
      • PHP Behavior in Heroku
      • Working with PHP
    • Go
      • Go の依存関係管理
    • Scala
    • Clojure
    • .NET
      • Working with .NET
  • データベースとデータ管理
    • Heroku Postgres
      • Postgres の基礎
      • Postgres スターターガイド
      • Postgres のパフォーマンス
      • Postgres のデータ転送と保持
      • Postgres の可用性
      • Postgres の特別なトピック
      • Migrating to Heroku Postgres
    • Heroku Data For Redis
    • Apache Kafka on Heroku
    • その他のデータストア
  • AI
    • Working with AI
    • Heroku Inference
      • Inference API
      • Quick Start Guides
      • AI Models
      • Inference Essentials
    • Vector Database
    • Model Context Protocol
  • モニタリングとメトリクス
    • ログ記録
  • アプリのパフォーマンス
  • アドオン
    • すべてのアドオン
  • 共同作業
  • セキュリティ
    • アプリのセキュリティ
    • ID と認証
      • シングルサインオン (SSO)
    • Private Space
      • インフラストラクチャネットワーキング
    • コンプライアンス
  • Heroku Enterprise
    • Enterprise Accounts
    • Enterprise Team
    • Heroku Connect (Salesforce 同期)
      • Heroku Connect の管理
      • Heroku Connect のリファレンス
      • Heroku Connect のトラブルシューティング
  • パターンとベストプラクティス
  • Heroku の拡張
    • Platform API
    • アプリの Webhook
    • Heroku Labs
    • アドオンのビルド
      • アドオン開発のタスク
      • アドオン API
      • アドオンのガイドラインと要件
    • CLI プラグインのビルド
    • 開発ビルドパック
    • Dev Center
  • アカウントと請求
  • トラブルシューティングとサポート
  • Salesforce とのインテグレーション
  • アドオン
  • すべてのアドオン
  • Pusher を使用したアプリ内通知の追加

This article was contributed by a member of the Heroku community

Its contents might not always reflect updates to the Heroku platform.

Pusher を使用したアプリ内通知の追加

日本語 — Switch to English

最終更新日 2021年05月27日(木)

Table of Contents

  • 構築するアプリケーション
  • ローカルでの設定
  • Pusher Heroku アドオンの追加
  • 各ページでの接続の追加
  • そのユーザーのプライベートチャネルの購読
  • 認証エンドポイントの作成
  • 通知の送信
  • ページの <title> の変更
  • HTML5 通知の拡張

ソーシャル機能を備えたアプリケーションは多くの場合、リアルタイムのユーザーアクティビティの集まりです。場合によっては、そのアクティビティを特定のユーザーに転送して、それに基づいた行動を可能にする必要があります。このチュートリアルでは、これらのアプリ内通知を Rails アプリケーションにすばやく追加する方法、および Pusher を簡単に使用する方法を示します。

Pusher は、この種類のタスクをきわめて簡単にするように設計されています。サーバーにインストールすべき重要なソフトウェアはなく、追加のリアルタイムインフラストラクチャの維持について心配する必要もありません。

Pusher デモ Rails アプリケーション​のサンプルコードは GitHub で入手できます。

構築するアプリケーション

このチュートリアルは、'BookFace’ と呼ばれる理論的なソーシャルネットワークアプリケーションに適用されます。あるユーザーが、サイトをブラウズしている別のユーザーにメッセージを送信すると、そのユーザーは新しいメッセージを表示するよう求める通知を受信します。

この非常に基本的なアプリケーションは、次のもので構成されます。

  • ユーザーの一覧を含むホームページ
  • ログイン、登録 (デバイスを使用)
  • プロファイルページ
  • ユーザー間の基本的なメッセージ送信

メッセージ送信機能は基本的に、同じ名前の (subject、body、sender_id、recipient_​id、created_at を含む) データベーステーブルである messages​ と呼ばれる RESTful リソースです。また、ユーザーが別のユーザーにメッセージを送信したり、送信されてきたメッセージを表示したりできるようにする数個のビューも含まれます。

ローカルでの設定

アプリのコードをチェックアウトしたら、それをローカルで実行する必要があります。これは、きわめて簡単です。

$ bundle install
$ bundle exec rake db:create
$ bundle exec rake db:migrate
$ script/rails s

Pusher Heroku アドオンの追加

この時点で、Heroku アドオンを使用して Pusher 機能を追加します。最初に、この例に確実に Heroku アプリが関連付けられるようにする必要があります (heroku create​ を使用してこれを行う)。

次に、アドオンのドキュメント​を参照し、Pusher Heroku アドオンを追加するための (「Verifying your set up​」(設定の検証) のセクションまでのすべての) 手順に従います。ローカルでテストするための開発アクセスキーもコピーしたことを確認してください (これらを ./config/environments/development.rb​ に追加する)。

最後に、この Rails アプリから Pusher にメッセージを送信するために、正式な pusher-gem​ ライブラリ (この rdocs)​) を使用します。これを Gemfile に追加します。

各ページでの接続の追加

クライアント側でイベントを受信するために、正式な Pusher JavaScript クライアントライブラリ​を使用します。この使用開始方法に関するその他のヒントが「JavaScript Quick Start Guide​」(JavaScript クイックスタートガイド) にもいくつかあります。

app/views/layouts/application.html.erb​ を編集し、<head>​ 内に次を追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://js.pusher.com/2.0/pusher.min.js"></script>

そのユーザーのプライベートチャネルの購読

ページがロードされたら、ユーザーは独自のプライベートな Pusher チャネルを自動的に購読するようにします。サーバーはその後、そのチャネルに通知を送信できます。Pusher には強力な認証システムがあります。詳細は、「Authenticating users​」(ユーザーの認証) を参照してください。

クライアント側では、そのユーザーの ID から名前が付けられたチャネルへのサブスクリプションを作成します。また、APP_KEY​ をアプリの PUBLIC_KEY に置き換える必要があることにも注意してください。これは、Pusher ダッシュボード (Heroku アカウントからアドオンをクリックしてアクセスできる) で見つけることができます。

ERB スニペット <%= current_user.id %>​ を使用して、下の JavaScript にユーザー ID を挿入するための、単純ではあるが、効果的な方法を使用します。次のコードを <head>​ の pusher.js が追加された位置のすぐ後ろに貼り付けます。

    <script type="text/javascript" charset="utf-8">
      $(function() {
        // If your Heroku application is within the EU region,
        // uncomment the following lines
        // Pusher.host = 'ws-eu.pusher.com';
        // Pusher.sockjs_host = 'sockjs-eu.pusher.com';

        var pusher = new Pusher('fa7c1e955481731b1662'); // Replace with your app key
        var channel = pusher.subscribe('private-'+<%= current_user.id %>);

        // Some useful debug msgs
        pusher.connection.bind('connecting', function() {
          $('div#status').text('Connecting to Pusher...');
        });
        pusher.connection.bind('connected', function() {
          $('div#status').text('Connected to Pusher!');
        });
        pusher.connection.bind('failed', function() {
          $('div#status').text('Connection to Pusher failed :(');
        });
        channel.bind('subscription_error', function(status) {
          $('div#status').text('Pusher subscription_error');
        });
      });
    </script>

これで、ページがロードされるたびに、Pusher JavaScript ライブラリはアプリの URL /pusher/auth​ (これは必要に応じて変更できる) への AJAX POST リクエストを作成するようになります。このアクションによってユーザーが承認され、Pusher に安全に接続するために使用される署名されたトークンが返されます。

認証エンドポイントの作成

これはきわめて簡単であり、単純に pusher_controller.rb​ という名前の新しいコントローラーを作成します。

 class PusherController < ApplicationController
  protect_from_forgery :except => :auth # stop rails CSRF protection for this action

  def auth
    if current_user
      response = Pusher[params[:channel_name]].authenticate(params[:socket_id])
      render :json => response
    else
      render :text => "Not authorized", :status => '403'
    end
  end
end

その後、config/routes.rb​ にも次を追加します。

post 'pusher/auth'

script/rails s​ を使用してアプリを起動し、http://localhost:3000/​ にアクセスします。'Pusher connected!‘ (Pusher が接続されました) ステータスメッセージが表示されます。

通知の送信

これで HTML ビューが Pusher チャネルまで接続されたので、そのチャネルへのメッセージの送信に集中することができます。BookFace では、メッセージを受信したユーザーにこれらの events​ を送信します。

Pusher を使用すると、これをきわめて簡単に行うことができます。まず、app/controllers/messages_controller.rb​ が正常に保存された後に new_message​ を trigger​ するために、このファイルに次の行を追加します。

Pusher['private-'+params[:message][:recipient_id]].trigger('new_message', {:from => current_user.name, :subject => message.subject})

これは、受信者のユーザー ID に基づいたプライベートチャネルに送信されます。

クライアント側では、このイベントにバインドし、それがトリガーされたら何かを表示する必要があります。app/views/layouts/application.html.erb​ をもう一度開き、<script>​ タグ内の Pusher 接続コードの後に次のコードを追加します。

    channel.bind('new_message', function(data) {
      msg = data.from + ' has sent you message: ' + data.subject;
      dom_notify(msg);
    });

    function dom_notify(msg) {
      $('#notify').text(msg);
      $('#notify').fadeIn();
      setTimeout(function() {
        $('#notify').fadeOut
        ();
      }, 2000);
    }

テストの実行

ここでは、サイト上の 2 人のユーザーを装えるように、2 つの異なるブラウザ​で http://localhost:3000/​ をロードします。各ブラウザで BookFace ユーザーとして登録した後、1 人のユーザーからもう一方に新しいメッセージを送信します。メッセージが送信されると、もう一方で通知が受信されます。

通知の改善

ユーザーが別のウィンドウを表示している場合でもその注意を引くために、トリガーできる他のいくつかの種類の通知があります。

ページの <title> の変更

この例では、メッセージが受信されたときのウィンドウのタイトルを “BookFace (1 つの未読メッセージ)” に変更します。これを行うために、小さな <title>​ バー変更 jQuery プラグイン (元のサイト)​) を使用します。それには、<head>​ に次を追加する必要があります。

<script src="/javascripts/jquery.titlealert.js"></script>

その後、JavaScript に新しい title_notify()​ 関数を追加します。

function title_notify(msg) {
  $.titleAlert(msg);
}

また、new_message イベントがトリガーされたら、dom_notify(msg);​ の後にも title_notify(msg);​ を追加します。

ここで別のメッセージを送信し、タイトルバーのフラッシュを監視します。

HTML5 通知の拡張

HTML5 の拡張のために、Webkit 通知 API のサポートを追加できます。このチュートリアルでは説明しませんが、関心があるユーザーのために、当社のアプリ内に概念実証バージョンを作成しています。

関連カテゴリー

  • すべてのアドオン

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure
  • .NET

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing
  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Github
  • LinkedIn
  • © 2025 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States
  • heroku.com
  • Legal
  • Terms of Service
  • Privacy Information
  • Responsible Disclosure
  • Trust
  • Contact
  • Cookie Preferences
  • Your Privacy Choices