Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2012-03-30

HatenaStar.jsとTen.js詳細 カラースター削除仕様変更で変わったところ

05:25

どーもこんちわ。

https://upload.wikimedia.org/wikipedia/commons/0/03/Crystal_Clear_action_bookmark.png

アナウンスどおりカラースターの挙動が 2012年3月30日11時ころ変わったみたいなのでコードのdiffTenのちょっとした解説

Tenのマニュアル的なのがここしかないから使ってて結構困ることが多い⇒じゃぁ自分で補完してこうプロジェクト をやりたくてグループ日記を作ったところもあるのでちょこちょこやろう

はてなの各種アナウンス

事前

事後

イタリアスタッフやらかしたー

なぜかイタリア語のやつが英語のFlipeNote Hatena日記に登録されててRSSにながれてきたw おもしろかったからあげておく

同じのが英語日記のここ

にあったけど今はRSSからも消えてる

改修に伴う不具合

見た感じうごメモはてなだけ

国内しかない

2012年3月28日19時頃から29日13時頃まで、PCから星を付けても付けられない障害が発生しておりました。カラースターに関しては付けられなかった場合でも数が減ってしまっておりました。

ご迷惑をおかけし申し訳ございませんでした。原因は、システム改善の際の不具合でした。

なお、この期間につけられたカラースターについては、はてなにて取消を行い、未使用の状態に戻させていただきました。

再発防止に努めて参ります。どうぞよろしくお願い申し上げます。

3/30 うごメモはてな障害情報 - うごメモはてな日記

海外組にはもう復旧したしマーケティング上良くないからやめとく、みたいな?

Ten.VERSIONが変わってる

以前の
URLVersion
http://www.hatena.ne.jp/js/Ten.jsTen.VERSION = 0.43;
http://s.hatena.ne.jp/js/Ten/Ten.jsTen.VERSION = 0.44;
http://s.hatena.ne.jp/js/HatenaStar.jsTen.VERSION = 0.43;
http://www.hatena.com/js/Ten.jsTen.VERSION = 0.43;
http://s.hatena.com/js/Ten/Ten.jsTen.VERSION = 0.44;
http://s.hatena.com/js/HatenaStar.jsTen.VERSION = 0.43;
Ten.js HatenaStar.jsでのTen.VERSION - ぷちてく - Petittech
対応後

HatenaStar.jsだけで後は中身変わってなかった。

URLVersion
http://s.hatena.ne.jp/js/HatenaStar.jsTen.VERSION = 0.44;
http://s.hatena.com/js/HatenaStar.jsTen.VERSION = 0.44;

Ten.VERSION = 0.44 に。

Diff

HatenaStar.VERSIONを作ってほしいんだけど無いので、便宜上Ten.VERSIONをバージョン番号として呼んでる

HatenaStar0.43-HatenaStar0.44.diff

じゃぁパートずつ見ていこー

Ten 0.44取り込み

6c6
< Ten.VERSION = 0.43;
---
> Ten.VERSION = 0.44;
1421a1422
>     is3DS : navigator.userAgent.indexOf('Nintendo 3DS') != -1,
1433c1434
< Ten.Browser.isTouch = Ten.Browser.isIPhone || Ten.Browser.isAndroid || Ten.Browser.isDSi || Ten.Browser.isIPad;
---
> Ten.Browser.isTouch = Ten.Browser.isIPhone || Ten.Browser.isAndroid || Ten.Browser.isDSi || Ten.Browser.is3DS || Ten.Browser.isIPad;

前のエントリで説明したとおりで、Ten 0.43と0.44 の違いは3DSブラウザ識別判定部分だけ。でスターが取り込み遅れてたからこのタイミングで入れたっぽい

Hatena.Star.Star.setTimer

Diff
3555c3556,3560
<                 + self.name;
---
>                 + self.name + '&uri=' + encodeURIComponent(self.entry.uri);
>             if (self.color) uri += '&color=' + self.color;
>             if (self.quote) {
>                 uri += '&quote=' + encodeURIComponent(self.quote);
>             }
HatenaStar0.43-0.44
HatenaStar 0.43 HatenaStar 0.44
setTimer: function(e) {
    var self = this;
    if (this.deleteTimer) return;
    if (!this.name || !this.entry) return;
    if (!Hatena.Visitor) return;
    if (!Hatena.Visitor.RKS) return;
    this.deleteTimer = setTimeout(function() {
        self.deleteTimer = null;
        var uri = Hatena.Star.BaseURL + 'star.deletable.json?name='
            + self.name;
        new Ten.JSONP(uri, self, 'confirmDeletable');
    }, 4000);
},
setTimer: function(e) {
    var self = this;
    if (this.deleteTimer) return;
    if (!this.name || !this.entry) return;
    if (!Hatena.Visitor) return;
    if (!Hatena.Visitor.RKS) return;
    this.deleteTimer = setTimeout(function() {
        self.deleteTimer = null;
        var uri = Hatena.Star.BaseURL + 'star.deletable.json?name='
            + self.name + '&uri=' + encodeURIComponent(self.entry.uri);
        if (self.color) uri += '&color=' + self.color;
        if (self.quote) {
            uri += '&quote=' + encodeURIComponent(self.quote);
        }
        new Ten.JSONP(uri, self, 'confirmDeletable');
    }, 4000);
},

this.deleteTimeruriself.nameだけを付加してたところで、colorquouteを見るようになった。んで、star.deletable.jsonnew Ten.JSONP(uri, self, 'confirmDeletable');

ちょっと気になるのがvar self = this;コンストラクタ呼ばなくてもthiswindow指さないようにしてるんだけど、あんまりselfを使ってないところ。これって代入した時点でOKなんだっけ?でも足されたとこself使ってるしな・・蝶本みておこ

Hatena.Star.Star.confirmDeletable

消しますか確認のとこ

Diff
3566c3571,3575
<         if (res.result && res.message && confirm(res.message)) {
---
>         if (res.result && res.confirm_html) {
>           var pos = Ten.Geometry.getElementPosition(this.anchor);
>           var scr = new Hatena.Star.DeleteConfirmScreen();
>           scr.showConfirm(res.confirm_html, this, pos);
>         } else if (res.result && res.message && confirm(res.message)) {
HatenaStar0.43-0.44
HatenaStar 0.43 HatenaStar 0.44
confirmDeletable: function(res) {
    if (res.result && res.message && confirm(res.message)) {
        this.deleteStar();
    }
},
confirmDeletable: function(res) {
    if (res.result && res.confirm_html) {
      var pos = Ten.Geometry.getElementPosition(this.anchor);
      var scr = new Hatena.Star.DeleteConfirmScreen();
      scr.showConfirm(res.confirm_html, this, pos);
    } else if (res.result && res.message && confirm(res.message)) {
        this.deleteStar();
    }
},

「このスターを消しますか」だけを出してたのが、new Hatena.Star.DeleteConfirmScreen();してリッチなウインドウもどきを出すようになってる。

素材のres.confirm_htmlが取れないときは従来どおりで、if 節が else if 節に移動。

Hatena.Star.DeleteConfirmScreen

これ HatenaStar 0.44 で新規追加。削除確認用ウインドウもどき

Diff
3968a3978,4012
> /* Hatena.Star.DeleteConfirmScreen */
> Hatena.Star.DeleteConfirmScreen = new Ten.Class({
>     base: [Ten.SubWindow],
>     style: {
>         padding: '2px',
>         textAlign: 'center',
>         borderRadius: '6px',
>         MozBorderRadius: '6px',
>         width: '320px',
>         height: '170px'
>     },
>     handleStyle: {
>         position: 'absolute',
>         top: '0px',
>         left: '0px',
>         backgroundColor: '#f3f3f3',
>         borderBottom: '1px solid #bbb',
>         width: '100%',
>         height: '30px',
>         borderRadius: '6px 6px 0 0',
>         MozBorderRadius: '6px 6px 0 0'
>     }
> },{
>   showConfirm: function(msg, star, pos) {
>         this.container.innerHTML = msg;
>         var win = Ten.Geometry.getWindowSize();
>         var scr = Ten.Geometry.getScroll();
>         var w = parseInt(this.constructor.style.width) + 20;
>         if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
>         this.show(pos);
>     }
> 
>     // XXX star.receiveDeleteResult({result: 1})
> });
> 
HatenaStar 0.44

Diffで全部だから意味無いんだけど、ハイライトあった方がみやすいから貼ってみた

/* Hatena.Star.DeleteConfirmScreen */
Hatena.Star.DeleteConfirmScreen = new Ten.Class({
    base: [Ten.SubWindow],
//...
});

ここはTen.SubWindowでウインドウもどきのdivを生成するところ。最近触ってるからいい例になっててうれしい。

で、prototypeベースのJavaScriptをクラスベースに制約した みたいなFWがTenで、これはいわゆる継承みたいに考えればいいとおもう。

で、Ten.SubWindowメソッドオーバーライドしてる。みたいな感じ

style: {
    padding: '2px',
    textAlign: 'center',
    borderRadius: '6px',
    MozBorderRadius: '6px',
    width: '320px',
    height: '170px'
},

styleは文字通りでCSSの指定をする。Ten.Styleで後付けとかする。

handleStyle: {
    position: 'absolute',
    top: '0px',
    left: '0px',
    backgroundColor: '#f3f3f3',
    borderBottom: '1px solid #bbb',
    width: '100%',
    height: '30px',
    borderRadius: '6px 6px 0 0',
    MozBorderRadius: '6px 6px 0 0'
}

handleStyleはウィンドウのハンドルスタイル。プロセスとかの方じゃなくて、ウインドウのタイトルバーみたいなもの。規定だとハンドルもって動かせる。

f:id:noromanba:20120331113923p:image

showConfirm: function(msg, star, pos) {
      this.container.innerHTML = msg;
      var win = Ten.Geometry.getWindowSize();
      var scr = Ten.Geometry.getScroll();
      var w = parseInt(this.constructor.style.width) + 20;
      if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
      this.show(pos);
  }

  // XXX star.receiveDeleteResult({result: 1})
});

で、showConfirmで見せる。// XXX star.receiveDeleteResult({result: 1})が非常にたのしそうだねぇーはい

Ten.SubWindow実例

以下のブックマークレットで生成できるよ。今座標固定だから Ten.Geometryとか使って Forkしてもっとよくしてくれたらうれしい。

http://let.hatelabo.jp/noromanba/let/gYC-yczpqbSRXw

実際にははてラボとかのログイン周りで使われてたりする。こいつ。TenってなってるけどHatenaStar.jsにしかいない・・

f:id:noromanba:20120216080040p:image

はてラボ系のはてなスター・はてなブログでログイン不能(ループ)になったらサードパーティCookie許可をみてみよう #6 - (有)掛軸裏スキマ産業

Ten本体にいれてほしいなぁー

TODO

グループ日記はカテゴリもトラバ文で飛んでいくからこれ後でつけるリスト -> つけた

カテゴリ飛ばしはずしてほしい++

トラックバック - http://ptech.g.hatena.ne.jp/noromanba/20120330