Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2012-10-21

外部サイトではてなスターおかしい問題

06:54

どーもこんちわ。まとめ + バグ報告的なやつ

本来はてながドキュメント整備やってればここまでは困らないので、はてな向けのレポートみたいになってる

外部サーバの対処

Content-Typeが適切に設定されてないから化けたり引用できなくなる」と、id:wakabatan さんが教えてくれたので、

コンテンツ設置者のひとはこっちを見てほしい。引用できないのは対処可能

ずれるのは今のとこリセットCSSみたいなのでがんばるしかない

以下のレポート

は、見通しが不透明な状態で手探りして書かれたもので、

  • はてな外部各サーバContent-Typeが適切に設定されてない場合こうなってしまう
  • インラインCSSがいけてないというのは変わらない
  • Content-Type他、挙動に関わる部分は「きちんと設置用ドキュメントに書いて欲しい」というのも変わらない

という前提でどうぞ


どうポップアップ・引用おかしいのか

どうも Octopress だとポップアップずれるし引用スター必ず失敗してしまう。で、こういうのを書いた

動作環境とかも書いてあるし、動画も載せてる

ちなみに Octopress に限らなくて、外部サイト・もしくははてなブログ*1で、引用スターこける場合ある

ブラウザの設定変えていないのにたまに引用に失敗する。再現性よくわからなくてこまる

原因わからない

で、解決できなかった。そこにこう書いた

Octopressにはてなスター設置してる人がそもそもいなそう。検索しても同じような話ないし、そもそも少ない

google:Octopress はてなスター

詰んだ

Octopress + はてなスター うまく動かない場合ある - ぷちてく - Petittech

そしたら id:mono0x さんが、はてなスターの Octopress 設置方法書いてくれた。many thx id:mono0x

ちなみにさっきのエントリで id:hatenastar にコールしたけど特に反応ない。いつもどおり。この点あとで書く

なぜ引用失敗するのか

で、さらに id:mono0x さんが調べたところ、「はてなスター側(クローラ)がおかしいっぽい」となった

修正しよう思い調べてみたところ、JSONPでスターを追加する段階 (http://s.hatena.ne.jp/star.add.json) ではquery stringのquoteに選択した文字列が含まれており、正しくリクエストが送信されていると考えられるにもかかわらず、このリクエストに対するレスポンスのJSONではquoteが空になっています。サーバ側で引用が拒否されている可能性がありそうです。

調べてみたところ、どうやらはてなスターでは不正な引用を弾くためにチェック用のbotが動いているらしく、ページ内に引用しようとした文字列が存在していない場合には拒否していると考えられています。しかし、こいつの詳細な仕様がどこにも公開されていない上に、いまいちうまく動かない場合もあるようです。

なんとかしたいのですが、外からどうにかできる感じがしないのでお手上げ状態です。はてなスターに詳しい方のコメントをお待ちしています。

monoweb.info - 

「バックエンドでバッドエンドでノーマネーでフィニッシュです」。いちばん面倒なパターンになった><

ということではてな内部の人が対応するか、はてなスターにものすごく詳しいデベロッパに回答もらうとかじゃないとなおらない

少し発見あった

id:mono0x さんと id:os0x さんのブログ、引用スターしたら少し挙動わかった

動作環境

前エントリの時と変わってない

chrome://version あたり
Google Chrome22.0.1229.94 (Official Build 161065) m
WebKit537.4 (@130860)
JavaScriptV8 3.12.19.15
UAMozilla/5.0 (Windows NT 5.1) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4
UserScriptOFF
UserStyle不使用
ブラウザズーム100%
Cookie - コンテンツの設定
chrome://chrome/settings/content
  • ☑ サードパーティの Cookie とサイト データをブロックする
Cookie とサイト データの例外 - Cookie - コンテンツの設定
chrome://chrome/settings/contentExceptions#cookies
ホスト名のパターン動作
blog.hatena.ne.jp*2許可
s.hatena.ne.jp許可
www.hatena.ne.jp許可
OSの環境
OSWindows XP SP3
DPI96dpi
ズーム100%

サードパーティデータはともかく、ほかはよくある環境

ポップアップずれはサイズ依存

ブラウザのウインドウサイズ 800 x 600 にしたら、ほぼ普通の位置になった。ウインドウサイズなので表示領域は少しだけ小さいのに注意

他の人でずれるのが再現しない、っていってたのはこのせいっぽい。効いてくるのは横幅で、インラインスタイルの position: absolete; left:XXpxこのへん

800 x 600

id:mono0x さんのところ。普通に出てる

f:id:noromanba:20121023061914p:image

monoweb.info - 

id:os0x さんのところ。普通に出てる

f:id:noromanba:20121023061953p:image

faviconの色をcanvasで変える - 0xff.toBlog()

ね、サイズ小さいとおかしくない

1024 x 768

このへんから影響出る。HTMLメインコンテンツ部分はこんな構造になってる

<div id="main">
    <div id="content">
<!-- ... -->

id:mono0x さんのところ。普通に出てる

f:id:noromanba:20121023062052p:image

monoweb.info - 

div#main 998px x 900px

id:os0x さんのところ。ずれはじめた

f:id:noromanba:20121023062025p:image

faviconの色をcanvasで変える - 0xff.toBlog()

div#main 900px x 1189px

たった98pxの差で、ずれた。あとは2サイトとも、横幅増やすのに比例してズレ度増す。たぶん元々付くインラインスタイルの指定がおかしい

決めてるのはJS側だとすると、http://s.hatena.ne.jp/js/HatenaStar.js で☆バインドするとき使ってるTen.Styleのあたり?

引用スターは英数のみ可能

前回のテスト漏れ踏まえて、英数字意外出来ないんじゃないかとやってみたら案の定だった

あと、ダブルクリック・トリプルクリック・ドラッグ引用で同じ結果なので選択方法には依存しない

英単語のみ

引用できる。前回も確認

f:id:noromanba:20121023062227p:image

f:id:noromanba:20121023062241p:image

monoweb.info - 

f:id:noromanba:20121023062308p:image

faviconの色をcanvasで変える - 0xff.toBlog()
英単語 + スペース

2単語連結

f:id:noromanba:20121023062402p:image

monoweb.info - 

これも問題ない

英数字 + スペース + 改行

ソースコードでもいけた。長さの問題ではない

f:id:noromanba:20121023062545p:image

faviconの色をcanvasで変える - 0xff.toBlog()

ASCII以外怪しい感じがしてくる

日本語入れる

「query stringのquote」という文のgのqという間を取って引用したら、失敗した

ちからぬけた

文字判定おかしいのでは

ということで、

JSONPでスターを追加する段階 (http://s.hatena.ne.jp/star.add.json) ではquery stringのquoteに選択した文字列が含まれており、正しくリクエストが送信されていると考えられるにもかかわらず、このリクエストに対するレスポンスのJSONではquoteが空になっています。サーバ側で引用が拒否されている可能性がありそうです。

monoweb.info - 

この拒否原因になってるの、サーバ側で

  • どこかの時点でエンコード設定おかしい or 壊してる
  • どこかで(正規表現)マッチ間違ってる
  • どこかでバリデータが弾いてる

とか? ただ、特定のサイトだけっていうところは、クローラ差別されてる気がする

スターレポート・スターページのtitleが化ける

関係あるっぽい。もう数ヶ月前くらいから現在まで継続。部分的に直ったけど文字コード設定おかしいんじゃない系

今は初回登録で化けるのは無くなったけど、おかしかった時期登録されたやつに問題ある。解消できない。告知もない

発生条件

割と起きる

スター側に初回登録でなければ文字化けしない

発生要因

化けないではてなスターつけるには、この中のどれかで付けられればいい

でも全部無理だった。どこでもはてなスター拡張大げさだから普段モバイルでつけてる

Hatena::Star::Mobile

http://let.hatelabo.jp/noromanba/let/gYC-xcvQ3PTQew
Hatena::Star::Touch

タッチの方、機能同じ。id:mino90 さんのやつ

http://let.hatelabo.jp/mino90/let/gYC-ya7rt9LuIA

エンコード化け実例

なぞなぞ

Q1. 『ランドルト環』

サーバ設定っぽい

f:id:noromanba:20121023062636p:image

http://s.hatena.ne.jp/noromanba/stars

A1. ランドルト環

Q2.『 [object Object] 』

JS側っぽい。({}).toString()とか

f:id:noromanba:20121023063139p:image

http://s.hatena.ne.jp/noromanba/stars

A2. HTML 5は「アメリカ人」が標準化させようとしている物ではありません - 人生が二度あれば

発生時期

手元で今残ってる分だと、一番古いのが「2012/07/02」に記録されてる、hitode909 さんの bon3 http(非https)

一番新しいのは、cho45 さんが作ったランドルト環の。「2012/10/04」に記録されてた

以降は初回登録時の化けは直ってるっぽいけど、登録したやつはサーバ側で消してもらわないとどうにもならない。手元の分だけでもものすごい量あってヤバイ。全ユーザ分だとキャッシュ相当ありそう

一度登録されたら化けたまま

回文字化け状態で登録されると、削除 → 付け直ししても戻らない。アクセスしてみると誰でもみれるからどうぞ

f:id:noromanba:20121023063245p:image

http://s.hatena.ne.jp/mobile/entry?uri=http%3A%2F%2Fcho45.stfuawsc.com%2Flandolt%2Flandolt.html

これは痛い。スクリーンキャストつくった。スター削除のとこ、ダイアログ2回出たり とか何気におかしかったけど意図せずそうなった

http://www.ustream.tv/recorded/26368725

見れなかったらリンク先から飛んで直接見るか、GIFアニメ

に、直接飛んで見れる

わかばさんわかるかなぁ

どこでもはてなスター拡張ってたしか id:wakabatan さんがコード書いてた気がするからコールしておく

はてなスター引用クローラ

id:pacochi さんがサーバでログ取ったであろう記録。適当に「~」で間引いてある

はてなスターで記事の文を引用をする際は、その文字列が実際に記事内にあるか、はてなのボットさんが記事をチェックしに来ます。

今日テストしてみたら、59.106.108.66 (gw.hatena.ne.jp) から、「Hatena Star UserAgent」という UA を名乗ってやってきました。

この方がアクセス制限か何かのとばっちりでうっかりはじかれちゃうと、当然引用スターは使えなくなります。

ただ、トークンを確認しにくる方も同じ方なので、うっかりはじいてたら引用スター以前にスターそのものが使えなくなっているはずです。

今回の引用ができない原因は、パーマリンクのページのサイズが大きすぎるため、そして記事の並びが時系列で昇順になっているためだと推測します。

Hatena Star UserAgent さんは、そのログを全部読んでくれていません。おそらく月末が読み飛ばされています。

今日試した感じでは、頭から 80~300KB くらいだけ GET したら、あとはいいやーって帰っちゃうみたいです。

(サイズ 1MB 超のページで試してもそれくらいでした。)

しかも、チェック対象にする文量は更に少なめで、頭から 64KB 前後くらい (タグ等含む) のデータしか扱わないみたいです。

最近はてなスターの引用コメントができなくなりました。 ちょっ… - 人力検索はてな

ノードキュメントでこんなの気づく方がすごすぎる。id:pacochi++!

隠し仕様やめてヘルプページ・設置ガイドのページに書いてほしい。クローラに対して何らかのmetaタグとかレスポンス返せ、とかもあるんならそれも

ドキュメントなさすぎ

はてなスターの設置って、外部サイトからはてなのエコシステムへ囲い込むチャンスなんだから、書いて損することないと思う。これだと機会損失の方がおおいので、お互いにとってメリットがない

公式ガイド

この3つだけ

ここに書いた知りたいこと、全部にない。あと、

技術的な詳細について : HatenaStar.js下部のドキュメント(英語)

ja/star/misc/hatenastarjs - Hatena Developer Center

この誘導、中身薄すぎてなさすぎる。コード読んだほうがマシ

ドキュメント化のくせ付けて

とりあえずブログに誘導するのはいいけど、そこで終わりになってるのはやめてほしい。そういうのは適切な場所のヘルプに書いておいてほしい

たとえば、↓にかいてるやつはブログ以外の場所にない。設置者じゃなくて普通のユーザでも関係ある

引用文字数制限

200文字 ってヘルプに書いてないから書こう

idea:17123でご指摘いただいておりますが、はてなスター引用機能の文字制限は200文字となっております。

リリース時に説明が不足しており申し訳ございませんでした。ご指摘いただきありがとうございました。

引用機能の文字制限は200文字です - はてなスター日記

これ2007年で、こうかいてるけどヘルプに写す気はないらしい

引用可能最小文字単位

3文字から ってヘルプに書いてないから書こう

引用が3文字以上の場合だけハイライトさせるようにしました。これは、1文字の文字列などをハイライトさせた場合、ページ内の大量の文字がハイライトされてしまうことを防ぐためです。

ハイライト機能を少しアップデートしました - はてなスター日記

最近実験して知った。遊んでみて

まとめ

  • Octopress で英数記号以外引用できない
  • 引用クローラがまずいっぽい
    • 外部にアクセスしてくるbotの仕様はドキュメント化いる
  • クローラ以外も文字化ける要素たくさんある
    • 化けたままスター付いたページははてな側に対応してもらわないとどうにもならない
  • はてなはドキュメント化しない悪癖やめたほうがいい
    • もうベンチャーじゃない。組織目指してるはずだからやったほうがいい
    • あと、問い合わせするまでシカトするのもやめたほうがいいとおもう

はてなスターはてなユーザ以外も見るし、ましてWorld版あるんだからきちんとしたほうがいい

そもそも引用機能バグ多い

前科沢山ある。デグレすごい。エンバグっぽいのもある。特定の場所でバグってた、というのもある

あと、カラースター削除の挙動変えてから引用スター失敗しやすくなった

修正済

と、されている

継続中

実質ほぼ放置されてる

idコール

スルーされてるアイデアとかバグまとめて、はてなididコールしても特に反応ない

id:hatenastar

id:hatenaidea

id:hatenastaff

id:hatena

はてな側からすると、Twitter で@で飛んでくるのと同じことだから致し方ない

ここまでの内容で直ってたらいいね

はてなスター関連

これからの

とか、そのへん書くかもしれない

つづく

どちらかというと外部サーバの設定がまずかった

*1:表面上はてなドメインでないから

*2はてなブログiframe共有対策

*3:↑から。ブログに誘導とかなさ過ぎる


Copylight (c) noromanba 2012-2017