Help us understand the problem. What is going on with this article?

後で読みたい記事をブックマークレットを使ってワンクリックでSlackに積んでおく(CORS回避)

More than 1 year has passed since last update.

はじめに

情報収集をネット記事で行う方が多いと思いますが、良い記事を見つけたけど時間がなくてあとで読みたい時はどうしていますか?

私は対象記事のURLを記事を積んでおくためのSlackチャンネルに投稿しておいて、あとでまとめて読んでいます。
Slackに飛ばしておくとPCでもスマホでもすぐに確認できるので便利です。

Slackに記事を積んでおく時、以前は下記のような手順で保存していました。
1. URLをコピー
2. Slackを開く
3. 記事チャンネルにURLを貼り付け
4. 投稿

エンジニアは面倒くさがりの方が多いと思いますので、4ステップもあると改善したくなりますよね。
ということで手順を簡略化する方法を検討しました。

方針

やりたいことは、PCとスマホで開いたネット記事をSlackへ送信です。
ちなみにスマホのブラウザには「共有」ボタンがあり、そこからSlackを選択して、、、と進んでいくとSlackへ通知することができます。
ただ、使ったことある方はわかると思いますが動作がもっさりしていたり多機能なので共有する先を選んだりでクリック数はあまり削減されません。

そこで今回はブックマークレットで実現することにしました。
ブックマークレットであればPCでもスマホでも動作するはずです。
またChromeであればブックマークをPCとスマホで共有することもできるので便利です。

作り方

Slack通知用URL取得

まずは通知するためのURLを取得します。
通知したいチャンネルの⚙️(チャンネル設定)をクリックして、「アプリを追加する」をクリックします。
スクリーンショット 2019-08-22 14.35.57.png

incoming-webhookをインストールします。
(画像では「表示する」になっていますが、未インストールの場合「インストール」になっていると思います)
スクリーンショット 2019-08-22 14.39.32.png

設定画面でチャンネルへの投稿を指定のチャンネルを指定します。
通知に必要なWebhookURLやその仕様もこのページに載っています。※このURLがバレると誰でも通知できるようになってしまうので管理は慎重に。
使い方や例なども載っているので親切ですね。
スクリーンショット 2019-08-22 14.41.55.png

ブックマークレットを実装

ブックマークレットで行うことは下記。
1. 現在開いているページのURLを取得する。location.href
2. WebhookURLに必要な情報をつけてリクエスト

下記のように実装しました。
エラーの時はアラートを表示するようにしています。

javascript:(function(){
  const url = ''; // TODO: set WebhookURL
  fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ text: location.href })
  }).then(response => console.log)
    .catch(error => alert('error!!'));
})()

それではChromeで動作確認。デベロッパーツールのコンソールに貼り付ければ簡単に動作確認できます。
Qiitaのトップページで動作確認してみます。https://qiita.com がSlackに通知されれば成功です。
スクリーンショット 2019-08-27 17.06.33.png

実行したところ下記エラーが発生しました。

Access to fetch at 'https://hooks.slack.com/services/xxx/yyy/zzz' from origin 'https://qiita.com' has been blocked by CORS policy:
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
VM3507:3 POST https://hooks.slack.com/services/xxx/yyy/zzz net::ERR_FAILED
(anonymous) @ VM3507:3
(anonymous) @ VM3507:11
A bad HTTP response code (404) was received when fetching the script.

CORS(Cross-Origin Resource Sharing)に引っかかってしましました。。。
参考:https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

SlackのWebhookURLなんて色々なところから呼びたいんだから広く許可しておいてくれよと思ったが、なっていないものは仕方ない。
ajaxで呼べないならブックマークレットはきびしいか、、、と諦めかけていたんですがググってみたらstackoverflowに答えが載っていました。
'Content-Type': 'application/json'を削除せよとのこと。
https://stackoverflow.com/questions/45752537/slack-incoming-webhook-request-header-field-content-type-is-not-allowed-by-acce

ということでcontent-typeを削除した下記ソースで実行しました。

javascript:(function(){
  const url = ''; // TODO: set WebhookURL
  fetch(url, {
    method: 'POST',
    headers: {
      'Accept': 'application/json'
    },
    body: JSON.stringify({ text: location.href })
  }).then(response => console.log)
    .catch(error => alert('error!!'));
})()

無事届きました!!
スクリーンショット 2019-08-27 18.05.36.png

CORSの考察

結果的には1行消すだけで動くようになったので独力で解決したかったなーと思いつつ、動くようになった理由を考察。
stackoverflowになぜ動くようになるのか理由も書いてありますが、よくエラーメッセージを読んでみると

Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

と書かれています。
preflightで許可されていないcontent-typeだと怒られているようです。
CORSの仕様を改めて読み返してみると、POSTの場合はpreflightを送らずに送る方法もあります。
そこに気づき、content-typeを色々いじって動作確認してみればよかったのですが、jsonなんだから'Content-Type': 'application/json'は必須でしょと思って何も試さなかった。。。
改めて「エラーメッセージをきちんと読むこと」と「トライアンドエラー」の重要さを認識しました。

ブックマークに登録

ブックマークレットが無事完成したのでブックマークを登録します。
私はChromeを使っているのでブックマークマネージャーを開きブックマークレットを追加します。
スクリーンショット 2019-08-28 16.04.16.png

  • PC(mac book / Chrome)
    あとで読みたいページを開いて、登録したブックマークをクリックすることでSlackへ通知することができました。
  • スマホ(Android / Chrome)
    単純にページを開いてブックマークをクリックしても動作しなかったのですが、アドレスバーにブックマーク名"toSlack"を入れると無事動作しました。 アドレスバーにブックマーク名を入れて起動できることを初めて知りました。結構便利!

Screenshot_20190827-181908_Chrome.jpg

最後に

このブックマークレットで今まで4ステップかかっていた作業が1ステップになりました。
体感では1回10秒くらいかかっていた作業が1秒くらいになった気がします。
1日2記事あとで読みたいと思った場合、年間では(10 - 1) * 2 * 365 = 6,570秒 ≒ 1.8時間の短縮ですね!やったね!!
(まあ、このブックマークレット作成に1.8時間以上はかかっているので実際に元がとれるのはずっと先ですが、色々知見が得られたのでよしとしましょう)

ham0215
Webエンジニアやってます。仕事では主にバックエンド開発をRailsで行っています。仕事で使う機会は少ないですが、フロント開発ではReact、Typescriptを使っています。
https://hamchance.com
vis-its
独自技術ideagramを用いて、人々の「創造性」や「目利き力」の定量化を行い、イノベーター人材の発掘/育成、科学的イノベーション創発支援を行っています。
https://visits.world
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away