すごいブログかなりすごいブログ実際に読んで分かった、はてなJSのダメなコードJavascript2014年03月15日はてブに追加この記事をツイートFeedlyで購読はてなブログJSについて最近話題になってるはてなブログのjavascriptですが、このブログをMiddlemanで構築した時に「はてなブックマークブログパーツ」のjavascriptコードを読んでげんなりしたのを思い出したので、この際ついでにこっちも公にしておこうかと思って記事にします。はてなブログのJSではないという意味でタイトルは釣りです。はてなブックマークブログパーツとははてなブックマークブログパーツとは、あなたがお持ちのブログにはてなブックマークの各種情報を貼り付けることができるブログパーツです。はてなが提供しているHTMLタグとjavascriptの読み込みコードを貼り付けることで設置することができます。ブログパーツは複数種類あるのですが、今回はこのブログに貼ろうとした「ブックマークのコメントを表示」というパーツのコードを読んでみます。ブログパーツの設置方法さて、ブログパーツの設置方法解説ページには、以下の2ステップでブログパーツを貼り付けできると解説されています。'href';</script>1行目ではhttp://b.hatena.ne.jp/js/bookmark_blogparts.jsを読み込み、2行目以降ではどうもオプションの設定を行っている様です。href="※"></a></div>※)設置ブログ記事ページのURLどうやら、hatena-bookmark-markerというclassが指定されたdivタグの中身がブックマークコメント一覧に置き換えられる様ですね。オプション設定の変更はてなブックマークコメント表示ブログパーツというページを見ると、オプション一覧の解説とオプションの書き換え方法が記載されています。これらのオプションを使って挙動や見た目をカスタマイズするらしいですね。問題点ここで結論から言ってしまうと、このjavascriptスクリプトのオプション指定方法には問題があり、オプションの指定が利きません。オプション用プロパティの宣言と上書きこのjavascriptコードは、オプション設定をグローバル変数HBBlogPartsというオブジェクトのプロパティを自分の好きな値で宣言することで指定できる様な形式にしています。ここで、javascriptのコードを実際に読んでみましょう。0;}一番最初のコードがこれです。この後このHBBlogPartsというオブジェクトのプロパティに、実際にはてなブックマークコメントを取得してブログのDOMに追加していく処理を持った関数が宣言されていきます。次に後半のコードを見ます。let');}HBBlogParts.registerという関数が呼ばれていますね。この関数はページのDOMロード完了を監視して、完了した時点でHBBlogParts.startという関数を呼びます。HBBlogParts.startは実際にブックマークコメントを取得してDOMを書き換えるメインルーチンです。['t','c','s']とか指定しても、ブラウザのデベロッパーコンソールでHBBlogPartsのプロパティを見ると、やはりデフォルト値で上書きされてしまっています。HBBlogParts.permalinkURIやHBBlogParts.permalinkPathRegexpといったブログパーツの動作に不可欠なオプションはさすがに上書きされていないようですが、HBBlogParts.Designの様な、デフォルト値でもとりあえず動作するといったプロパティの多くがデフォルト値で上書きされています。オプション設定とはなんだったのか...処理の流れからして、どうしてもオプション指定をしたい場合、「HBBlogParts.registerが呼ばれた後」かつ「ページのDOM読み込みが完了して実際にHBBlogParts.start関数の処理が開始されてしまう前」といったピンポイントのタイミングで、非同期的にこれらHBBlogPartsオブジェクトのプロパティを書き換える必要があります。難易度高い...こう改善してほしいオプションを問答無用でデフォルト値で上書きするのやめて...どうせ表示したい位置にdivタグを設置するのだから、グローバル変数のプロパティを書き換えるのでなく、data-*属性で各オプション設定を指定できるようにしてほしいそうすればHBBlogPartsという変数でグローバル汚染しなくてもよいのでは。ついでにこっちもminifyとかgzip配信とかやってほしいまとめはてなさんがやる気になってるっぽいですし、なんか直接報告しても反応ないという噂なので、便乗して公にしてブログパーツウィジェットのJSも改善してもらおうという記事でした。ブコメ一覧ウィジェット使いたいです。あと、私は普段Rubyばかり書いていてjavascriptにはあまり詳しくはないので、もし間違いがあれば訂正してお詫びします。いう予防線を張っておきます。はてブに追加この記事をツイートFeedlyで購読supermomongaかなりすごいことでゆうめい。したまちでしらぬものはいない。),;’EmacsユーザーがVimを1ヶ月使った感想RubyでGUIアプリを作るならJRuby+JavaFX+Rawrで決まり!automatic.vimでウィンドウの一時的分割をハンドリングしようももんが流NeoBundle管理術Vimと対話せよVimShellが動的プロンプトに対応しました(やばい)ジャズだって聴ける。X(1)homebrew(1)rbenv(1)Evil(1)Mechanize(1)Scraping(1)聴いてるやつ。