2013-11-08

コメント表示数を変更する＠はてなブログ

人力検索

はてなブログでコメントの折り込まずに表示する量を増やす方法
はありますか？
回答宜しくお願いします！
http://q.hatena.ne.jp/1383740046

まずは、テストデータが必要なんだ。

とりあえず、できたっぽい。

コード

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
    $(function() {
        /*
            コメントの最大表示数。
            ゼロにすると、全てのコメントが表示される。
        */
        var COMMENT_MAX_COUNT = 10;

        var s = Hatena.Diary.Pages.Blogs['*'].initEntry.toString();
        s = s.replace(
                /showEntryInfo\(entry, container, 3\);/,
                "showEntryInfo(entry, container, " + COMMENT_MAX_COUNT + ");");

        // 以下の三行を追加
        s = s.replace(
                /Hatena.Diary.Pages.Blogs\['\*'\].leaveCommentHandler\(entry, \$button\);/,
                ";");

        s = s.split(/\n/).slice(2, -2).join("\n");

        var initEntry = new Function("entry", s);

        self = Hatena.Diary.Pages.Blogs['*'];
        $('article.entry').each(function () {
            var $this = $(this);
            $("ul.comment > .entry-comment", $this).remove();
            initEntry.apply(self, [$this]);
        });

    });
})(jQuery);
</script>

コードについての不親切な説明

jQuery を取り込んでいるのは、こいつのせい。

メソッド initEntry の内容を文字列で取得
コメントを表示しているコードの最大数を置き換えちゃう
Function.toString では、function (arg) { ... } の表記になっているので、関数のボディだけ取り出す
新しい関数のインスタンスを生成
init メソッドの辺りから、initEntry を読んでる辺りのコードをパクる
1. コメントは追加されるので、本来の初期処理で追加されたコメントを削除
2. Hatena.Diary.Pages.Blogs['*'] に対して、新しい関数をメソッドとして呼び出す

雑感

無理矢理過ぎる　X-|
すぐに動かなくなりそうな気もするけど、どれくらいの頻度でコードに手を入れているのかなあ...

後記

＠2013-11-8
id:rouge_2008 さんから、以下の指摘を頂く。

P.S.
コメントフォームのダイアログが2つ開いてしまいます。
デフォルトのブログは1つだけだったので、今回のコードの影響かもしれません・・・

やっぱり。
回答を書く前に気が付こうね　＞a-kuma3

前にも増して、実装にべたべた依存のコードになってしまったのは、仕方あるまい。

2013-11-04

tex記法＠はてなブログ

人力検索

この質問の件。

はてな記法のtex記法についてです。行列を表すときに使う「&」ですが、思ったとおり表示できません。具体的には、HTML編集で、 [tex:\begin{pmatrix} a&b \\ c&d \end{pmatrix}] と入れて、プレビューすると、&が&に変わり、a,b,c,dとなる要素がa,amp;b,c,amp;dと表示されてしまいます。どうすればよいのでしょうか？

ベストアンサーを頂いたものの、解決してないみたい　orz

質問の内容に補足すると、プレビューを押した後、HTML編集を押すと、「&」が回答者のように「&」に書き替わった状態になります。しかし、依然としてプレビューを押しても、「amp;」の部分が表示されてしまいます。
http://q.hatena.ne.jp/1383435653#ac85395

どうやら、編集モードが「見たままモード」だと、変換処理が中途半端らしい。
HTML編集でも、& が中途半端に変換されてしまうのだ。

因みに、「はてな記法モード」で書けば不具合は出ない。
「はてな記法モード」で、

<p>[tex:\begin{pmatrix} a&b \\ c&d \end{pmatrix}]</p>

と書くと、こうなる。

$\begin{pmatrix} a&b \\ c&d \end{pmatrix}$

& を & と自分で置き換える必要もない。
これが本来の想定した動作なんだよね、きっと。

2013-09-19

はてなブログで LightBox ちっくなことを

人力検索 javascript

やってみた

＼つついて！／

やりかたについての不親切な説明

「デザイン」から「カスタマイズ」を選んで、「ヘッダ」の「タイトル下」に、以下のコードを記述する。

<style>
.tbox {position:absolute; display:none; padding:14px 17px; z-index:900}
.tinner {padding:15px; -moz-border-radius:5px; border-radius:5px; background:#fff url(http://sandbox.scriptiny.com/tinybox2/images/preload.gif) no-repeat 50% 50%; border-right:1px solid #333; border-bottom:1px solid #333}
.tmask {position:absolute; display:none; top:0px; left:0px; height:100%; width:100%; background:#000; z-index:800}
.tclose {position:absolute; top:0px; right:0px; width:30px; height:30px; cursor:pointer; background:url(http://sandbox.scriptiny.com/tinybox2/images/close.png) no-repeat}
.tclose:hover {background-position:0 -30px}
.tinner img {width: 100%;}
.tinner {padding: 5px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://sandbox.scriptiny.com/tinybox2/tinybox.js"></script>
<script type="text/javascript">
(function($){
    $(function() {
        $(".TINY_BOX_IMAGE")
            .css("cursor", "pointer")
            .click(function() {
                TINY.box.show({
                    image: this.src,
                    animate: true,
                    close: true
                });
            });
    });
})(jQuery);
</script>

ブログの記事では、画像を HTML の IMG タグで書いて、TINY_BOX_IMAGE というクラスを指定する。

<img class="TINY_BOX_IMAGE" style="width: 120px;" src="http://img.f.hatena.ne.jp/images/fotolife/a/a-kuma3/20130916/20130916194742.jpg">

動機とか、雑感とか

人力検索で、こんな質問があって。

①はてなダイアリーに載せた写真をクリックすると画像が大きく(拡大)なるようにしたいのですがどうすればできるでしょうか？
http://q.hatena.ne.jp/1379471757

ダイアリーでは無理だけど、はてなブログならできるはず。

LightBox ライクなライブラリは数多あれど、こんなところも参考にしながら、Colorbox を横目で見つつ試してみたのは TynyBox2 というライブラリ。

外部のライブラリに依存しないから、と思って使ってみたけれど、「閉じるボタン」に使われている画像などは別に必要なわけで。
ダイアログに表示する画像の大きさを元のサイズと変えるときに、ちょっと面倒そうだ。
jQuery は、UI も含めて、はてなブログに読み込まれてるし、Colorbox を使わない積極的な理由はなかったなあ。

それにしても、外部スクリプトの置き場所に困るねえ　＞はてなブログ
Git に向けるのもなんだかねえ。
いい大人は、サーバのひとつも持っておけ、ということか。