IE6-8 is Not Supported

Pushbullet API を PHP & Ajax で叩いて簡易通知フォームを作ってみる

みなさんは通知専用サービス Pushbullet を使っていますか?
先月のアップデートで iPhone / Mac にも対応し、ほぼ全てのデバイス間で URL やテキスト、ファイルなどを瞬時に共有できる上 IFTTT 連携も可能な超便利サービスです。今回はそんな Pushbullet の API を使って自分に通知を送るフォームを作ってみたいと思います。

1. PHP で Pushbullet API を使うライブラリを入手

GitHub から Pushbullet for PHP をダウンロード。
こういうライブラリを公開してくれてる人には毎回感謝するばかりです。
ダウンロードしたファイルで使用するのは Pushbullet.php だけですので、任意の場所に置いておきます。
GitHub の説明分に Push する方法が書いてあるので順を追ってフォームを作成していきましょう。

2. フォームを作成する

まずはじめにフォームを作成します。普通の HTML です。




3. フォーム内容を送信する Ajax を記述

続いて Ajax の記述です。jQuery の読み込みをお忘れなく。
後述する push.php にフォームの情報を送信します。
送信に成功したらコンソールに送信した内容が出るようにしてありますが、ここらへんは調整してください。

$(function() {
	$(document).on('click', '#submit', function() {
		var title   = $('.title').val();
		var message = $('.message').val();
		var param = { 'noteTitle': title, 'noteMessage': message };
		$.ajax({
			type: 'post',
			url: 'push.php',
			data: JSON.stringify(param),
			crossDomain: false,
			dataType : 'jsonp',
			scriptCharset: 'utf-8'
		}).done(function(data) {
			var getTitle  = data.title;
			var getMesage = data.message;
			console.log(getTitle, getMesage);
		}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
			var error = errorThrown;
		});
	});
});

4. フォームの内容を Pushbullet へ

続いてフォームの内容を Push する push.php を作成します。
今回例として全ての端末に向けたノート通知を作成しますが、特定のデバイスやノート以外の通知も可能です。 自分のアクセストークンは アカウントページ から確認することができます。

< ?php
	/* Ajax */

	session_start();
	$request = isset($_SERVER['HTTP_X_REQUESTED_WITH']) ? strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) : '';
	if($request !== 'xmlhttprequest') exit;

	$json = file_get_contents('php://input');
	$data = json_decode($json, true);

	$title    = isset($data['noteTitle'])   ? $data['noteTitle']   : null;
	$message  = isset($data['noteMessage']) ? $data['noteMessage'] : null;
	$callback = isset($_GET['callback'])    ? $_GET['callback']    : '';
	$callback = htmlspecialchars(strip_tags($callback));

	$param = array( 'title' => $title, 'message' => $message );

	header('Content-type: application/javascript; charset=utf-8');
	printf("{$callback}(%s)", json_encode( $param ));


	/* Push */

	// ダウンロードした Pushbullet.php までのパス
	require 'Pushbullet.php';
	try {
		// 自分の Accsess Token を入力
		$p = new Pushbullet('**YOUR ACCESS TOKEN**');
		$p->addCurlCallback(function ($curl) {
			curl_setopt($curl, 'https://raw.githubusercontent.com/bagder/ca-bundle/master/ca-bundle.crt');
		});

		// '' もしくは NULL で全デバイス、
		// デバイスの iden を指定すると特定のデバイスのみに通知を送る
		$p->pushNote('', $title, $message);

	} catch (PushbulletException $e) {
		die($e->getMessage());
	}
?>

GitHub の説明文に書いてある通常ノート以外の通知や削除を行う方法です。
簡単にまとめておきます。必要に応じて使い分けてください。

/* 登録情報の吐き出し (iden を調べるときなどに) */

var_dump($p->getDevices());
var_dump($p->getContacts());
var_dump($p->getUserInformation());
var_dump($p->getPushHistory(1400441645));


/* 通常のノート以外を作成 */

// LINK
$p->pushLink('', 'title', 'https://example.com', 'Comment');

// ADDRESS
$p->pushAddress('', 'title', 'Address');

// LIST
$p->pushList('', 'title', array('list1', 'list2'));

// FILE (JPEG)
$p->pushFile('', '../pic.jpg', 'image/jpeg');
$p->pushFile('', '../pic.jpg');


/* iden を指定して削除 */

// DELETE PUSH
$p->deletePush('');

// DELETE DEVICE
$p->deleteDevice('');

// DELETE CONTACT
$p->deleteContact('');

以上で簡素ではありますが、通知を送ることができます。
ただ通知元が全て自分になるため、通知欄がごちゃごちゃになってしまいます。

何かいい方法を探していたところ、自作クライアント (アプリ) を作成してそこから通知させればいいのではないかという結論に。
これなら好きなアイコンと名前から通知を受け取ることができます。
案外簡単で5分もかからず設定できます。以下、手順になります。

5. 自作クライアントの登録

こちらのページ にアクセスしフォームに情報を入力します。
全部未記入でも作れてしまいますが、クライアント名、リダイレクト名は入力しておきましょう。
リダイレクト URL にアクセストークンが付加されます。

name クライアント名
website_url サイト URL
image_url アイコン画像 URL
redirect_url リダイレクト先 URL
allowed_origin (多分) 使用できるドメイン

上記の項目記入後、Add A New OAuth Clientを押すとクライアント登録が完了。
次に、oauth test url: click here をクリックし Approve で認証。

すると、記入したリダイレクトURLに飛ばれます。その際 URL にアクセストークンが付加されていますので、#access_token= より後をコピー、push.php のアクセストークンを書き換えます。
これでクライアントから通知がくるようになります。

あとがき

本当はこれをメールフォームにしたくて、IFTTT を使って通知が届いたら Evernote に保存とかしたかったんだけど、通知サービスの通知はトリガーにできませんでした。…というか普通にメールフォーム設置しろ話ですね。ただ遊びたかっただけです、すみません。

今回の使い方は置いといて Pushbullet はすごく便利なので、未導入の人はお試しあれ!(まとめ)

ads by google