キーボードショートカットを実装するjQueryプラグイン「hotkeys」 【feedpost tips】

jQuery.jpg 昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。 2回目はキーボードショートカットを実装するjQueryプラグイン「hotkeys」。 導入はとっても簡単で、jQueryと一緒に読み込み、 イベントをキーに合わせて設定してやればOK。 フォーカスがdocumentにあるときの設定は例えばこう。 このサンプルでは「J」キーを押すと「pressed J key」というポップアップが表示されます。input欄やtextarea欄にカーソルがあるときには反応しないので、神経質になりすぎることなく設定出来ます。

続きを読む

(続き) 【メモ】 callbackで「#_=_」が付いて来てしまう件への対応

先日、OAuthで認証したあとのcallbackのURLの末尾に「#_=_」が付いて来てしまうことがあるのを回避するというのをメモったのですが、 【メモ】 callbackで「#_=_」が付いて来てしまう件への対応 | mutter これでは上手く動かないことがあるのが解りました。 具体的には、リダイレクト先で期待するURLはこれだったとき、

http://hoge.com/?foo=bar
コールバックからのリダイレクトがこれになり、
http://hoge.com/?foo=bar#_=_
前回のスクリプトで是正するとこうなってしまいます。
http://hoge.com/
引数が落ちちゃう。 というわけで、対応しました。

続きを読む

【メモ】 callbackで「#_=_」が付いて来てしまう件への対応

このスクリプトだと引数が落ちてしまうようです。それに対応したのがこちら (続き) 【メモ】 callbackで「#_=_」が付いて来てしまう件への対応 | mutter
どういう理屈なのか解りませんが、OAuthで認証したあとのcallbackのURLの末尾に「#_=_」が付いて来てしまうことがあるようです。検索した限りではFacebookがそういう仕様のようで、Tumblrも同じような仕様です。多分、サービス側に何らかの理由があってこうなっているんだとは思うのですが、受け取る側からするとちょっと不都合があります。 例えば、
http://hoge.com/return
というURLをcallbackに指定してリクエストを投げた場合、こんな感じで返ってきます。
http://hoge.com/return?oauth_token=xxx&oauth_verifier=yyy#_=_
んで、何らかの処理をしてサイトのトップページにリダイレクトをしてやると(例はSymfony)、
$this->redirect('hoge/index')
URLはこうなってしまいます。
http://hoge.com/#_=_
本当はこうしたいのに。
http://hoge.com
もしかしたらフレームワーク側で対処出来るのかも知れませんし、ブラウザの設定なのかも知れませんが、検索して情報を収集してみた結果「JavaScriptでアドホックな対応」というのがポピュラーなようなので、とりあえずそれに従うことにしました。

続きを読む

[ExtJS4] Storeに設定したイベントが何回も呼び出されてしまう 【メモ】

sencha.jpg Storeにイベントリスナーを設定すると、読み込まれる度に何度も何度も呼ばれてしまうことがあります。また、呼ばれる回数が読み込む毎に増えて行ってしまう場合もあります。要はコーディングが悪いと言うことなのですが、初心者である自分の反省も兼ねてメモ。

ダメな例

var store = Ext.getStore('sampleStore');
store.on({
load : {
fn : {
console.log('load event fired.');
}
}
});

続きを読む

【Tumblr】 Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。(0.2.3)

08_03.jpg Tumblr Queueの最新ページへのリンクを生成するGreasemonkeyを更新しました。

インストール

https://gist.github.com/raw/614547/tumblr_queue_latest_link.user.js

変更点

ダッシュボードのデザイン変更に対応しました。

更新履歴

0.2.2 -> 0.2.3 (2012/09/08)

  • ダッシュボードのデザイン変更に対応しました

0.2.1 -> 0.2.2 (2011/10/29)

  • QueueのURL変更に対応しました

0.2.0 -> 0.2.1 (2011/09/06)

  • ダッシュボードのデザイン変更に対応しました

0.1.1 -> 0.2.0 (2011/06/12)

  • syoichiさんのコードを受け入れ

続きを読む

[ExtJS4] コンストラクタ的な要素の呼ばれる順 【メモ】

ただのメモです。

Controllerの場合

init

It is called before the Application’s launch function is executed so gives a hook point to run any code before your Viewport is created.
Viewportがインスタンス化する前に呼ばれます。

onLaunch

A template method like init, but called after the viewport is created. This is called after the launch method of Application is executed.
Viewportがインスタンス化された後に呼ばれます。

Componentの場合

initComponent

constructor

インスタンス化されるときに実行されます。2つはほぼ同時に実行されますが、 中身が全く同じと言うことではないようです。詳細は以下のエントリ参照。 Extjs4 initComponentとconstructorの違い – 日々精進

createdFn

Optional callback to execute after the class is created, the execution scope of which (this) will be the newly created class itself.
Ext.defineの第3引数。そのクラスが生成されたあとに実行されるコールバック関数。「created」ってのはインスタンス化ではなくてファイルが読み込まれたとき…と言うような気がする(後述の実行順参照)

実行順例

  1. Component: createdFn
  2. Controller: init
  3. Component: constructor
  4. Component: initComponent
  5. Application: launch
  6. Controller: onLaunch
ややこしい…

続きを読む

$.post()のコールバックが動くのはHTTPステータスコードが2xxのとき(jQuery)

前回の続き、というか補足メモ。 jQueryで作るAjaxな検索フォーム(テスト) | mutter

JavaScript: 検索部分

function sampleSearchFilckr () {
var word = $('#sampleSearchWord').val();
if(!word) {
alert('検索語を入力してください');
return false;
}
//検索
$.post(
'/sample/flickr',
{"q": word},
function(data, status) {
//searchに成功したら結果を表示する
$('#sampleSearchResult').html(data);
},
"html"
);
}

続きを読む

jQueryで作るAjaxな検索フォーム(テスト)

技術的にはだいぶ今さら感ある話題ですが作業のまとめとして。

サンプル

表題のフォームというのはこんな感じのです。
#sampleSearchResult a { border: none !important }

仕様

  • 検索語句を入力して「Flickrで検索する」を押すと僕のFlickrでの検索結果を表示する
  • 「クリア」を押すと検索語句と検索結果を削除する
  • 検索語句入力欄でリターンキーを押しても検索を開始する

続きを読む