2015年4月の記事（3件）

昨日導入した、jquery.neosmart.fb.wall ですが、2点ほど問題がありました。その1つはセキュリティ上の問題でもあります。

1つ目は、25人を超える「いいね！」がある投稿に対して、「いいね！」数が25までしか表示されないことです。これは、Graph API がデフォルトで25しか「いいね！」した人を表示しないのが原因とのことで、jquery.neosmart.fb.wall.js の61行目を、

url: graphURL+o.id+'/'+type+'?limit='+o.max+'&likes.limit=200&access_token='+o.accessToken',

のように、likes.limit=いいね！の上限数 というパラメータを追加することで解決しました。（参考：永遠少年症候群 | fb.wallメモ最終版）

2つ目は、Facebook のアクセストークンを取得してこのスクリプトに設定するのですが、このアクセストークンを HTML か JavaScript に記述するため、誰にでもアクセストークンが見えてしまうこと。アクセストークンがあれば Facebook ページの非公開にしている情報までもが取得できてしまいます。

開発を終了した fb.wall のサイトにも「安全な方法でアクセストークンを提供することができなかった」といった内容の記述があります。これが開発終了の理由なんですね。

Since 2010 Facebook changed their Graph API a lot of times, they added server request limits and the need of access tokens. With a pure JavaScript solution it was not possible to provide access tokens in a safe way. Therefore we developed neosmart STREAM.

“続・jquery.neosmart.fb.wall を導入しました” の続きを読む »

このサイトのトップページに、Willさんいんの Facebook ページの投稿を表示するため、公式プラグインの Like Box を使用していました。

ところがこの Like Box、6月23日に廃止となり使えなくなるとのことで、新しい Page Plugin に移行するよう勧められています。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

しかし、この新しい Page Plugin は、表示幅が 280px から 500px の間に制限されています。このサイトのトップページのレイアウトは、Facebook 表示領域を PC 画面で624px に設定しているため、124px もの余白ができてしまいます。

また、Like Box にしろ、Page Plugin にしろ、JavaScript で読み込んで表示しますが、実質はインラインフレームの中で facebook.com のページを表示していますので、フォントサイズや色などを CSS でコントロールすることが出来ません。その上、フォントサイズが 13px などに固定されているため、Internet Explorer では文字のサイズを変更できないことも気になっていました。

“jquery.neosmart.fb.wall を導入しました” の続きを読む »

CMS で作成されたサイトで、下層ページの一覧などにページのタイトルとサムネイル画像、ページの概要があり、そのタイトルとサムネイル画像それぞれに、リンク先となる同じページへのリンクが貼ってあるパターンをよく見かけます。例えば、次のような HTML です。

<h2><a href="hogehoge.html">ページタイトル</a></h2>
<div class="thumbnail"><a href="hogehoge.html"><img src="thmbnail.jpg" alt="" /></a></div>
<p>概要テキスト概要テキスト概要テキスト概要テキスト概要テキスト</p>

サムネイル画像が左に、ページタイトルと概要がその右にあるようなデザインでは、1行目と2行目が逆の場合もありますし、サムネイル画像の代替テキストにページタイトルが付けられている場合もあります。

しかし、このような HTML は、スクリーンリーダーなどでは［Tab］キーで同じリンクを続けて2回辿ることになりますし、サムネイル画像の代替テキストが空だったりすると、そのリンク先を理解することが難しくなります。

これではアクセシビリティ的に問題がありますので、これを解消する3つの方法を考えてみます。

“タイトルとサムネイル画像の重複リンク” の続きを読む »