ようへい
ラベル jQuery の投稿を表示しています。 すべての投稿を表示
ラベル jQuery の投稿を表示しています。 すべての投稿を表示

2013年1月25日金曜日

[SyntaxHighlighter] jQuery用Brush (jQuery 1.9対応版)

jQuery 1.9対応のSyntaxHighlighter用Brushを作ってみましたので、公開します。
Brushのエイリアスは、jqjqueryです。
このBrushを使うと、jQuery APIが以下のようにハイライトされます。
$(document).ready(function(){
  // #hogeに#fugaを追加
  $('#hoge').append($('<div>').prop('id','fuga').attr('key','bar').text('baz'));
  $('input[type="radio"]:checked').click(
    function(){
      alert($(this).val());
      $('#hogehoge').addBack('.hoge').text($(this).val());
    }
  );
});
jQuery 1.9時点でdeprecated/removedとなったメソッドは色を分けています。
1.9で削除された.live().die()メソッドの例
$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
また、deprecated/removedとなっていても、同名のメソッドがdeprecated/removedではない場合は、通常のjQuery APIとしてハイライトされます。
.toggle()メソッドの例
$('.target').toggle();
$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});
以下で実際に確認することが可能です。
SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

jQuery 1.9でのjQuery APIに対応しています。
1.9以下のバージョンでも正常にハイライトされると思います。
ただし、前述のとおり、jQuery 1.9時点でdeprecated/removedとなったメソッドは色分けされます。

ダウンロード

共に、3.0.83専用です。
他のバージョンでの動作は未確認です。
非圧縮版(4.45KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJQuery.js
圧縮版(3.30KB)
https://sites.google.com/site/logroid/syntaxhighlighter/shBrushJQuery.min.js
関連記事

2013年1月24日木曜日

jQuery 1.9に移行してハマったこと

jQuery 1.9へのアップグレードガイドはこちら (英語)
jQuery Core 1.9 Upgrade Guide | jQuery
http://stage.jquery.com/upgrade-guide/1.9/ そのうち(機械翻訳を駆使して)翻訳するかもしれません。

TypeError: $(...).live is not a function

jQuery 1.9では.live()が削除されている。同じように、.die()も削除されている。
.live()を、jQuery 1.9で使用しようとすると、以下のようなエラーが出力される。
TypeError: $(...).live is not a function
.live().on()に、.die().off()にそれぞれ置き換えられている。
以下のように書き直すことで、1.9へ移行する事ができる。
$('.live').live('click', liveFunction);
$('.live').die('click', liveFunction);
$(document).on('click', '.live', liveFunction);
$(document).off('click', '.live', liveFunction);

Error: Syntax error, unrecognized expression

$()にHTML文字列を渡して解析していたのだが、jQuery 1.9ではエラーになった。
jQuery 1.9からは、$()に渡す文字列の最初が<以外の場合はセレクタとしてみなされるようになったためだ。
HTML文字列が<で始まっていない場合、以下のようなエラーが出力される。
Error: Syntax error, unrecognized expression:
この場合、$.parseHTML()を用いることで解析することが出来る。
以下のように書き直すことで、1.9へ移行する事ができる。
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($(html_string_1).get(0));
console.dirxml($(html_string_2).get(0));
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2)).get(0));
あれ、思ったような結果にならない・・・
という事でこんな感じにしました。
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2.trim())).get(0));
または
var html_string_1="<div>hoge</div>",
html_string_2=" <div>HOGE<div>FUGA</div></div>";
console.dirxml($($.parseHTML(html_string_1)).get(0));
console.dirxml($($.parseHTML(html_string_2.replace(/^[^<]+/,''))).get(0));
もうちょっと調べる必要があるな・・・
関連記事

2012年8月11日土曜日

[JavaScript] ベンチマークツール

JavaScriptのベンチマークを確認できます。
ベンチマーク結果は別ウィンドウで開くので、ポップアップを許可してください。
動作確認ブラウザ
  • Mozilla Firefox 14,15,16.17
  • Google Chrome 21
  • Windows Internet Explorer 9
基本情報

1セットでの実行回数

セット数

jQuery


jQueryのバージョンは、1と指定した場合、1系の最新が使用され、1.7と指定した場合、1.7系の最新が使用されます。
パターン
関連記事

2012年6月6日水曜日

[SyntaxHighlighter] jQuery用Brush

jQuery用のBrushを作ってみましたので、公開します。
Brushのエイリアスは、jqjqueryです。
このBrushを使うと、jQuery APIが以下のようにハイライトされます。
$(document).ready(function(){
  // #hogeに#fugaを追加
  $('#hoge').append($('<div>').prop('id','fuga').attr('key','bar').text('baz'));
  $('input[type="radio"]:checked').click(
    function(){
      alert($(this).val());
    }
  );
});
以下で実際に確認することが可能です。
SyntaxHighlighter用タグ 変換/生成ツール - ログろいど

jQuery 1.7.2でのjQuery APIに対応しています。
1.7.2以下のバージョンでも正常にハイライトされると思います。
単語単位でのマッチングとなるため、jQuery APIのAPI名と同じ変数等がコード内で使われていた場合、ハイライトされてしまいます。
.に続くattrやprop等にのみマッチさせる事もできなくはないですが、JavaScriptの正規表現が後方一致に対応していないため、困難です。
という事で、jQuery APIのAPI名と同じ変数等がハイライトされるのは現在の仕様という事で。

ダウンロード

以下で、jQuery 1.9に対応したBrushを配布していますので、ご利用ください。 [SyntaxHighlighter] jQuery用Brush (jQuery 1.9対応版) - ログろいど
関連記事

2012年5月15日火曜日

Twitter APIで レスポンスコード 400 が返る場合の対処

400 Bad Requestが返される

このブログにもTwitterのWidgetを配置していますが、このWidgetの中ではTwitterのAPIが呼ばれています。
しかし、このAPIには、リクエストの制限が施されており、未認証状態でAPIをリクエストする場合は1時間あたり150リクエストまで、認証状態でリクエストする場合は、1時間あたり350リクエストまでとなっている。
Rate Limiting | Twitter Developers
https://dev.twitter.com/docs/rate-limiting たまたまFirebugのコンソールを眺めていたら、400 Bad RequestというエラーがTwitter APIで発生していた。
Twitter APIを利用している部分はtry/catchで囲んでいたのだが、どうやらエラーハンドリングができていないらしい。
使用していたコードは以下。
try{
  $(document).ready(function() {
    new TWTR.Widget({
      //必要に合わせパラメタを指定
    }).render().setUser('TwitterのID').start();
  });
} catch (e){}
エラーが発生したことで、Javascriptが中断され、後続の処理が実行されていない。
という事で解決策を調べてみた。

リクエスト可能な残数を調べる

Twitter APIのページを眺めていたら、APIをリクエスト可能な残数を調べることができるという事がわかった。
GET account/rate_limit_status | Twitter Developers
https://dev.twitter.com/docs/api/1/get/account/rate_limit_status これによると、http://api.twitter.com/1/account/rate_limit_status.format (formatはjson/xmlのいずれかを指定)をリクエストする事により、リクエスト可能な残数を取得できるとの事。
以下のリンクをクリックすると、リクエスト可能な残数(remaining_hits)を含めたJSONを参照できます。
https://api.twitter.com/1/account/rate_limit_status.json
という事で、Twitter APIによるウィジェットをリクエストする前に、あらかじめ上記のURLからJSONを取得し、リクエスト可能な残数を調べ、リクエスト可能であればウィジェットをリクエストするという処理にすれば良さそう。

対処したコード

前提条件
  • jQuery (1.5以上のバージョン) を読み込んでいる事
  • http://widgets.twimg.com/j/2/widget.jsを読み込んでいる事
try{
  $(document).ready(function() {
    $.getJSON('http://api.twitter.com/1/account/rate_limit_status.json?callback=?', {}, function(json){
      if(json.remaining_hits != "0"){
        new TWTR.Widget({
          //必要に合わせパラメタを指定
        }).render().setUser('TwitterのID').start();
      }
    });
  });
} catch (e){}

TWTR.Widgetのパラメタ

基本的には以下で自動生成できるので、それを使う。
Twitter / プロフィールウィジェット
http://twitter.com/about/resources/widgets/widget_profile
Twitter / 検索ウィジェット
https://twitter.com/about/resources/widgets/widget_search
Twitter / お気に入りウィジェット
https://twitter.com/about/resources/widgets/widget_faves
Twitter / リストウィジェット
https://twitter.com/about/resources/widgets/widget_list パラメタについて自分で調べてみた。
パラメタ 説明
id Widgetを挿入するエレメントのID
version Widgetのバージョン
type Widgetの種類
プロフィール/検索/お気に入り/一覧 のいずれかを指定
(profile|search|faves|favs|list|lists)
search 検索キーワード
typeにsearchを指定した場合必須
rpp 表示するツイート数
subject ウィジェットに表示するキャプション
typeにsearch,faves,favs,list,listsを指定した場合のみ有効
title ウィジェットに表示するタイトル
typeにsearch,faves,favs,list,listsを指定した場合のみ有効
footer フッタに表示するタイトル
creator 開発者モード(true|false)
trueにした場合、/stylesheets/widgets/widget.cssのCSSがリクエストされます。
このCSSはあらかじめ用意しておく必要があります。
interval ツイートを更新する間隔(msec)
features/loopをtrueにしている場合は、ループ間隔
width ウィジェットの幅(px)
height ウィジェットの高さ(px)
theme Widgetのスタイル
theme/shell Widget外側のスタイル
theme/tweets Widget内側(Tweet部分)のスタイル
features Widgetの機能を指定
features/scrollbar スクロールバーの表示/非表示(true|false)
features/loop ループ表示するか(true|false)
features/live 最新のデータを読み込むか(true|false)
features/behavior すべてのツイートを読み込むか(default|all)
関連記事