ツイートボタンをセキュアかつアクセシブルに利用する

投稿

昨日、Twitterのサービスでツイートボタン(X)というものが発表されました。このボタンを押すことにより、表示しているページのツイートが簡単に行えるというものです。

このボタンをあなたのWEBサイトに表示すれば、ユーザーはあなたのサイトを離れることなく、あなたのWEBサイト上のコンテンツをTwitter上で共有することができます。

Twitter / ツイートボタン(X)

同じような機能を持ったサービスは以前からあったようですが、今回は公式のものということで話題になっており、既に導入を始めたサイトも見かけます。

このボタンを表示する方法として、よく紹介されているのは次のようなものです。

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
  • オプションとして、a要素に data-count属性 や data-via属性 などを付けることで、カウント数の表示方法やフォローするアカウントなどを設定できるようです。

ただ、この方法には次のようなセキュリティ上、アクセシビリティ上の問題点があります。

  • スクリプト無効のユーザーに対して不親切すぎる。
  • ログインしていない状態でこのボタンを押すとログインフォームが出現するが、暗号化がされていないのでパスワードがパケット盗聴される危険がある。

以下、詳しく見てみます。

スクリプト無効のユーザーに対して不親切

§

リンク文字は適切か

§

上に挙げたコードを貼り付けると、多くの環境ではグラフィカルなボタンが表示されます。

サムネイル画像
スクリプト有効環境での表示オリジナル画像

しかし、スクリプトが無効な環境では単に「Tweet」という文字のリンクにしかなりません。

サムネイル画像
スクリプト無効環境での表示オリジナル画像

まず、この「Tweet」というリンク文字は適切でしょうか。ツイートボタンを知らないユーザーは、このリンクを辿ることで何ができるのか予想できるでしょうか。もしかしたら「Tweetを見る」と誤解してしまうかもしれません。「Tweetする」といったように、具体的な文言の方が良いと思います。

なんでエラーになるの

§

そして、スクリプト無効状態かつリファラーを送信しない設定でリンクを辿ると、Something is technically wrong.というエラーになってしまいます。

サムネイル画像
twitter.comのエラー画面オリジナル画像

このエラー文言から「JavaScriptを有効にしよう」とか「リファラー送信を許可しよう」と推測させるのは無理があるでしょう。

このように、全体的にスクリプト無効のユーザーを考慮していない実装に思えます。

もっとも、Twitterのシステムはスクリプト有効でないと実質利用できないようなので、普段はスクリプト無効のユーザーも twitter.com に対してはスクリプト許可しているかもしれません。ですが、ツイートボタンを貼り付けるサイトは無効状態かもしれないので、やはりそのようなユーザーに対してこのような状態では、不親切といえるのではないでしょうか。

ログインフォームが暗号化されていない

§

Twitterにログインしていないユーザーがリンク先へ行くと、ログインフォームが表示されます。

サムネイル画像
twitter.comの暗号化されていないログイン画面オリジナル画像

URLが http:// で始まっていることから、このフォームは暗号化されていません。パケット盗聴によるパスワード流出の危険があるので、これはお勧めできませんね。

と、このような理由から、個人的には利用を躊躇してしまう状態です。ただし、これはあくまで最初に挙げたコードを利用した場合のこと。他にも方法はあるので、なんとか安全に使えるような状態にしてみましょう。

JavaScriptを使わずにツイートボタンを作成

§

公式サイトに共有APIのための開発者ドキュメント(dev.twitter.com)という文書が公開されていますが、それによるとツイートボタンを実現する他の方法もあるようです。

JavaScriptを使わない方法も用意されており、Build Your Own Tweet Button(dev.twitter.com)によると、

  • http://twitter.com/share にGETメソッドでパラメータを付けたURLを構築。
  • スタイルシートを使って、リンクをボタンのような外観にする。

という方法で実現できるようです。

パラメータの使い方などは上記公式コンテンツを参照して欲しいのですが、一例として

URL
http://www.nurs.or.jp/~tokyu/diary/topic/122
ツイートに表示するアカウント
SaekiTominaga
コンテンツ名
ツイートボタンをセキュアかつアクセシブルに利用する
言語
日本語

というような場合、URLはこうなります。

http://twitter.com/share?url=http%3A%2F%2Fwww.nurs.or.jp%2F%7Etokyu%2Fdiary%2Ftopic%2F122&via=SaekiTominaga&text=%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%BB%E3%82%AD%E3%83%A5%E3%82%A2%E3%81%8B%E3%81%A4%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%96%E3%83%AB%E3%81%AB%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B&lang=ja

  • 実際のリンク作成の際は、 & を & に変換しなければならないのは言うまでもありません。

さらに、暗号化のため http:// を https:// に変更して、リンクを作成してみます。

あとは公式サンプルを参考にスタイルを適用させれば良いでしょう。