はてなブックマーク開発ブログ

機能変更、お知らせなど

Mediumで独自ドメインを使ったサイトの記事が、正常にブックマークできない問題を改善しました

いつもご利用いただき、誠にありがとうございます。はてなブックマークディレクターのid:jusei です。

本日から、Mediumのパブリケーション機能を利用した独自ドメインのサイトに投稿された記事が、正常にブックマークできない問題が改善しました。この改善は、Web・アプリ・ブラウザ拡張などが対象です。以下でその仕組みをご説明いたします。

文字数制限による問題

はてなブックマークはデータベースの構造上、ブックマークできるURLの最大文字数が255文字に設定されています。

最大文字数を超過したURLをブックマークしようとすると、最大文字数を超えた分が含まれず、不完全なURLがブックマークされる問題が。これにより、一見ブックマーク出来ていても、間違ったURLに飛ばされます。


※ 不完全なURLがブックマークされている状態

URLの日本語が膨大な文字数に

Mediumで記事を書くと、その記事タイトルがそのままURLに埋め込まれます。ここで記事タイトルを日本語で書いた場合、文字数の問題が発生します。

  • 記事タイトル
    • はてなブックマークを使ってみよう!
  • URL
    • https://medium.com/hatenabookmark/はてなブックマークをつかってみよう!-hogehoge

URLに日本語が含まれている場合は、日本語を理解できないシステムでも扱えるよう、日本語の文字列が自動的に英数字と記号の文字列に変換(エンコード)されて扱われるという決まりがあります。

そのため、例えば「はてな」で合計3文字であっても、エンコードされると合計27文字になります。

  • はてな(3文字)
  • %E3%81%AF%E3%81%A6%E3%81%AA(27文字)

このようにURLの日本語をそのまま数えると文字数の問題は無いものの、エンコードされたURLの文字数が膨大になり、実は正しいURLがブックマークできていない問題が存在しています。

thefirstpenguin.jp の新着エントリー - はてなブックマーク

正規化対象となるドメインを増やしました

こういった問題に対しては「正規化」という、さまざまな文字列やURLを一定のルールに基づいて利用しやすくする処理を行っています。

Medium.comなどブックマーク数が多い特定のドメインでは、以前からまとめて正規化できる仕組みを利用していました。しかしMediumのパブリケーション機能を使って作成された、それぞれ別のドメインを持つサイトには適用されず、対応を希望するご意見を多数いただいておりました。

そこで開発チームは、「ドメインはそれぞれ異なるが、Mediumのパブリケーション機能を使って開設されたサイト」を判別できるようにし、正規化することでこの問題に対処しました。

  1. オリジナルURL
  2. エンコードされたURL
  3. 必要な部分だけ抽出(正規化)

一部ドメインのみに適用されます

この改善は、「過去に一定数以上ブックマークされた記事を持つドメイン(エントリー下部に掲載)」かつ「今後新たにブックマークされたページ」にのみ適用されます。過去すでにブックマークされているページ(エントリーページが存在するページ)には、ブックマークし直しても適用されないことをご了承ください。

もし条件を満たしているにも関わらず、正常にブックマーク出来ない場合は、お手数ですがお問い合わせフォームからお知らせください。

根本的な解決を進めています

現在はてなブックマークでは、基本的な機能はそのままに、最新の技術や仕組みを取り入れながらフルスクラッチを進めています。

最大文字数が255文字という制限など、現状の仕組みでは技術的に難しい問題も、今後対応していく見通しです。それまではお手数おかけしますが、ご理解いただけますと幸いです。

今後もはてなブックマークをよろしくお願いいたします。

※ 過去に一定数以上ブックマークされたドメイン一覧

voice.kadira.io
uxplanet.org
thefirstpenguin.jp
tech.iheart.com
slackhq.com
shift.infinite.red
m.signalvnoise.com
medium.mybridge.co
medium.freecodecamp.com
m.alphasights.com
library.launchkit.io
ideas.redpepper.land
hacking-ios.cocoagarage.com
emberway.io
code-cartoons.com
blog.techmantra.co
blog.staffjoy.com
blog.sketchapp.com
blog.pttrns.com
blog.prototypr.io
blog.mozhu.info
blog.leveros.com
blog.jacobwgillespie.com
blog.init.ai
blog.feathersjs.com
blog.fabric8.io
blog.castalia.co.jp
blog.ably.io
bellflower.dodgson.org
backchannel.com