WEBアプリケーション研究室 開発ノート TOP

WEBアプリケーション研究室 開発ノート javascript

スポンサーサイト

-------- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

    このエントリーをはてなブックマークに追加

GithubのWikiにmarkdownを使ってマニュアルを作ってたのですが、CSSの変更もできないし、自由度が低くてどうしても読みづらいものに・・・

なので、自サイトに移行をはじめました。何ページか書いた内容をHTMLに書き直したくなかったのと、今後書いていくのもmarkdownの方が楽なので、Github Markdownと互換性の高そうなパーサーを探しましたが、以外に手こずりました。

```のコードブロックに対応してなかったり、preタグの中をエスケープしてくれないので、<>がタグとして扱われてしまったり、tableタグに対応してなかったり・・・

おすすめなのがこれです。
https://github.com/chjj/marked
javascriptなので解析不可をブラウザに押し付けられるのもグー。拡張性も高く、ほぼ何も設定しないでGithubで書いたものがソコソコいけました。良ければどうぞ。

    このエントリーをはてなブックマークに追加

node.jsのgruntというmoduleがすごい便利です。
http://gruntjs.com/

javascriptの複数のファイルと連結したり、min化したり、あるいはCSSでLESSとかStrylusのレンダリングをファイル保存時に自動でしてしまうことができます。

英語が分かる方は本家を読んで下さい。日本語で紹介してくださってるブログは色々ありますが、verで色々変わってうまく動かないので、メモしておきます。対象のバージョンは0.4.1です。node.jsとnpmが使える状態になってるのが前提です。node.jsのバージョンはgrunt的には>= 0.8.0らしいですが、今回はv0.10.13で試してます。

まずはインストール。コマンドとgrunt本体は別々にインストールするようになりました。まずはコマンドをインストールしましょう。


npm install -g grunt-cli
続いて、プロジェクトフォルダのルートにpackage.jsonを作成します。

//package.json
{
"name": "slide-over-view",
"version": "0.1.0",
"devDependencies": {
}
}
package.jsonはgruntだけ使うならぶっちゃけいらないのですが、プロジェクトをgitなどで管理するときにインストールしたgruntやgruntのtaskをリポジトリに入れたくないと思います。そのとき、devDependenciesにそれらのmoduleが記述してあるとnpm intallのコマンドを打つだけでサッとインストール出来ます。では、grunt本体をインストールします。本体は-gオプション無しで、プロジェクトのローカルフォルダにインストールする必要があります。devDependenciesはインストール時のオプション--save-devで自動で書き込まれます。

npm install grunt --save-dev
続いてタスクをインストールします。今回はconcat(ファイルの連結)とuglify(min化)あと、変更を監視するwatchの3つのタスクを使います。0.4以降のバージョンではタスクは個別にインストールするようになったようです。上記3つのタスクをインストールしましょう。--save-devを忘れずに。

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
念のためpackage.jsonを確認してみるとsave-devオプションがうまく動いてることが確認できるはずです。

{
"name": "slide-over-view",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-watch": "~0.5.0"
}
}
最後にgruntの設定ファイルであるGruntfile.jsを作成します。

//Gruntfile.js
module.exports = function(grunt) {

var banner = '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd HH:MM") %> */\n';
var jsFiles = ['src/rect/*.js', 'src/*.js'];

// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
banner: banner
},
dist: {
src: jsFiles,
dest: 'lib/jquery.slide-over-view.js'
}
},
uglify: {
options: {
banner: banner
},
dist: {
src: ['lib/jquery.slide-over-view.js'],
dest: 'lib/jquery.slide-over-view.min.js'
}
},
watch: {
scripts: {
files: jsFiles,
tasks: ['concat', 'uglify']
}
}
});

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

// Default task.
grunt.registerTask('default', ['watch']);
};
見ればわかると思うので細かい説明は割愛します。各タスク直下のプロパティ名、distとかscriptsは任意の名前が付けられます。使用するタスクをgrunt.loadNpmTasksで読み込む必要があります。また、最後のgrunt.registerTask、defaultという名前でタスクのエイリアスを登録する命令です。二番目の引数に配列が指定できるのがポイントで、複数のタスクを順番に実行するときに便利です。今回はwatchタスクの中で['concat', 'uglify']を実行してるので、実際に実行する時は

grunt watch
で実行できるので必要ないといえば必要ありませんが、

grunt
とタスク名を省略した時にdefaultというタスクが実行されるので登録しました。

今回CSS系は試しませんでしたが、LESSやstylusのタスクもあります。
https://github.com/gruntjs/grunt-contrib-less
https://github.com/gruntjs/grunt-contrib-stylus

とにかく大量にpluginがあるようです。
http://gruntjs.com/plugins

    このエントリーをはてなブックマークに追加

Ajaxやタブの切替などjavascriptで画面遷移をしたとき、ブラウザの「戻る」を押すとユーザーが期待したところと違うページに戻ります。それを防ぐテクニックとしてURLのハッシュ(#)を利用する方法があります。ちょっと前にGoogleの検索がAjaxになりましたが、Googleの検索もハッシュを利用しています。

javascriptで画面遷移をするときに


http://your.domain/page#tab=1
の様なURLにリンクして、ハッシュが変わったのをトリガーにスクリプトを動かします。画面の再読込は行われませんが、ブラウザの履歴には残っていきます。

しかし、javascriptにはハッシュが変更されたイベントがありません。そこで、役に立つのがjQueryプラグインの
hashchange
です。

ちらっとソースを見た感じでは、数十ミリ秒置きにチェックしているようです。イベントがあっても良さそうなもんですよね。

「戻る」だけではなく、検索結果や、特定のタブが選ばれた状態にリンクを貼ったり、URLを教えたり出来る利点もあります。

    このエントリーをはてなブックマークに追加

backgroundPositionのanimateが上手く動かないので調べてみました。
動かなかったのはこんなコードです。


$(".header").stop().animate({backgroundPosition: '10px 20px'});
このコードは1.4.4までは一応動きます。「一応」というのも、x軸方向にしか動かないからです。
animateをどのように実装しているのか見ていませんが、おそらく、ちゃんと動かすのが難しいのでしょう、1.5からは、animateのcssプロパティは基本的に単一の数字のみ受け付けるように変わったようです。

$(".header").stop().animate({backgroundPosition: '10'});
でx軸のアニメーションのみ出来るようです。


All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)



※2011/05/11 19:24追記
backgroundPositionのanimateはIEの6~8で挙動が怪しかったので他の方法で実装することにしました。

    このエントリーをはてなブックマークに追加

jQuery1.6リリース

2011-05-11 01:58

2011年5月3日に1.6がリリースされました。
1.5系から1.6には「Breaking Changes」と称して、かなり厳しい変更がありました。
詳しくはリリースノートにありますが、attr()で動的に変更されたattributeを取得できなくなりました。静的にHTMLに書いてあるattributeのみ取得できます。例えば、チェックボックスがチェックされてるかどうかチェックするのに


if($("#someCheckbox").attr("checked"))
{

}
のようなコードは動かなくなります。かわりにprop()というメソッドを使うか、リリースノートではis()を使うように推奨してます。

if($("#someCheckbox").is(":checked"))
{

}
またcheckboxのチェックを外すのに

$("input[type=checkbox]").removeAttr("checked");


$("input[type=checkbox]").removeProp("checked");
に置き換える必要があります。当然input textのvalueも取得できません。val()に置き換える必要があるでしょう。代わりにattr()のパフォーマンスが良くなったようです。

そこそこ手を入れなければならない人が多そうなので、ブーイングの出そうな?変更ではあると思いますが、なんとなく気持ちのわかる変更だと思います。
・attrで静的なものしか取れなくすればパフォーマンスアップ

・静的な物しか取れないattrを作ろうか?

・ネーミング的にattrをそうしてしまうのがベスト
こんな感じでしょうかね。メソッドのネーミングは後々ライブラリ判りやすさに効いてくる、割と重要なファクターだと思います。

    このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。