前回、MacVim の設定をしてみましたが、基本的には Emacs を使っています。Emacs.app もフルスクリーンで使いたくなり、インストールし直しました。
MacPorts で emacs-app に variants の fullscreen を追加してインストールしました。
sudo port install emacs-app +fullscreen
M-x ns-toggle-fullscreen でフルスクリーンの切り替えが出来ます。
MacVim-KaoriYa をインストールして設定しました。
設定をしようとして放置していた .gvimrc を元にして編集をしていたら、.gvimrc が読み込まれているのに、反映されていなかったのですが、改行コードが CR になっていたのが原因のようです。
現在の ~/.gvimrc は以下のような感じになりました。
if has('gui_macvim')
set guifont=Monaco:h13 "フォント
set imdisable "IM をオフ?
set transparency=10 " 透明度
set fuoptions=maxvert,maxhorz "フルスクリーンでは幅、高さを最大に
endif
set showtabline=2 "常にタブを表示
set guioptions-=T "ツールバーを非表示
set background=dark "暗い背景色用の配色を使う?
colorscheme torte
set cmdheight=2 "コマンドラインを2行
:set fu / :set nofuで、フルスクリーンの切り替えが出来ます。
設定などこちらを参考にさせていただきました。
旧メインマシンだった MacBook で iPhoto の写真をすべて削除したはずだったが、~/Pictures/iPhoto Library が 7GBぐらいある。
iPhoto から iPod に写真を同期するためのファイルが ~/Pictures/iPhoto Library/iPod Photo Cache にあるらしい。
iPhoto のライブラリがリセットされても構わないので、iPhoto Library をまるごと削除した。
こちらを参考にしました。
サイトを HTML5 で組んでみた。
しかし新しいタグ header footer article section aside の使い分けがよくわからない。 1ページのサイトではなくブログの html で組んでみるほうがよかったかも。
これから
audio タグと JS でオーディオプレイヤーあたりはどうにかしたい。
2010年もあと5週となりました。
PHP 4.3.9 では date() のフォーマット文字列で週番号(W) が使えるけど、strtotime は週番号をパースしてくれない。
以下 PHP 4.3.9 で実行した結果
echo date('Y-W');
// -> 2010-47
echo strtotime('2010W47');
// -> -1
この PHPマニュアルのページにバージョンが書いてなくて、どのバージョンから使えるのか不明。
ドキュメントに書いてあるけど、$() で DOM エレメントを作成するときの引数は、html。
タグの外側にテキストがあったときに、思っていたのとは違う結果になった。
単純な例。こういうテキストは、
var str = '山田 <span class="name">太郎</span>';
こうなった。
console.log( $(str) );
// -> [<span class="name">太郎</span>]
console.log( $(str).find('.name') );
// -> []
テキストすべてから要素を作りたかったので外側を html タグで囲んだ。
var htmlStr = '<p>' + str + '</p>';
console.log( $(htmlStr) );
// -> [<p>山田 <span class="name">太郎</span></p>]
console.log( $(htmlStr).find('.name') );
// -> [<span class="name">太郎</span>]
jQuery でページを表示するときにブロック要素の高さを n の整数倍に切り上げる。
// 32 の倍数に
$(function(){
var n = 32;
var e = $('#header .inner');
e.height( Math.ceil(e.height()/n)*n );
});
heteml で WordPress から WordPress へのインポートが、エラーが出ずに終わるのに、途中の記事までしかインポート出来ていない状態になった。
この時にインポート画面では、「最大サイズ: 5MB」となっている。
旧ブログからエクスポートした wordpress.2010-xx-xx.xml は 2MB 程度なので大丈夫かと思ったけど、添付画像が多いので、PHP のアップロード出来る最大ファイルサイズを変更してみる。
heteml の PHP のアップロードするファイルの最大ファイルサイズはコントロールパネルから変えられる。
コントロールパネル > ウェブ関連 > php.ini 設定 > PHP5 の、
upload_max_filesize を 5MB から 50MB に変更。
インポート画面で「最大サイズ: 50MB」になったことを確認。
一応、エクスポートも3個に分けてエクスポートをし直して無事インポート出来た。
CSS をネストさせたり、変数を使って記述し、コマンドで CSS を書き出すことができる Sass が 3.0 以降変わったようで再び使ってみている。
個別に細かく id や class を付けるよりは、最低限の id・class で継承させるよう出来たらいいと思っているので、ネストして書けるのは便利。その中でも & (Parent Selectors) は強力。
ブログの CSS などでは、ul の入れ子、本文の ul、サイドバーの ul など出てくるので、例えばこんな感じで入れ子になることはよくあるんじゃないかと思う。
イメージです。Sass はバージョン 3.0.24
ul,
ol {
margin: 0 0 1.5em 2em;
padding: 0;
}
ul li,
ol li {
margin: 0;
padding: 0;
}
ul ul,
ul ol,
ol ul,
ol ol {
margin: 0 0 1.5em 2em;
}
#sidebar ul,
#sidebar ol {
margin: 0 0 1em 2em;
}
#sidebar ul.flat,
#sidebar ol.flat {
margin: 0 0 0 2em;
}
.single #sidebar ul.flat,
.single #sidebar ol.flat {
font-style: italic;
margin: 0 0 1em 2em;
}
これを Sass の SCSS 記法だとこう書ける。
/* style.scss */
ul,ol {
margin: 0 0 1.5em 2em;
padding: 0;
li {
margin: 0;
padding: 0;
}
ul, ol {
margin: 0 0 1.5em 2em;
}
#sidebar & {
margin: 0 0 1em 2em;
}
#sidebar &.flat {
margin: 0 0 0 2em;
.single & {
font-style: italic;
margin: 0 0 1em 2em;
}
}
}
デフォルトで書きだすとこうなる。
ul, ol {
margin: 0 0 1.5em 2em;
padding: 0; }
ul li, ol li {
margin: 0;
padding: 0; }
ul ul, ul ol, ol ul, ol ol {
margin: 0 0 1.5em 2em; }
#sidebar ul, #sidebar ol {
margin: 0 0 1em 2em; }
#sidebar ul.flat, #sidebar ol.flat {
margin: 0 0 0 2em; }
.single #sidebar ul.flat, .single #sidebar ol.flat {
font-style: italic;
margin: 0 0 1em 2em; }
compact で書き出すと、
ul, ol { margin: 0 0 1.5em 2em; padding: 0; }
ul li, ol li { margin: 0; padding: 0; }
ul ul, ul ol, ol ul, ol ol { margin: 0 0 1.5em 2em; }
#sidebar ul, #sidebar ol { margin: 0 0 1em 2em; }
#sidebar ul.flat, #sidebar ol.flat { margin: 0 0 0 2em; }
.single #sidebar ul.flat, .single #sidebar ol.flat { font-style: italic; margin: 0 0 1em 2em; }
compressed で書き出すと、
ul,ol{margin:0 0 1.5em 2em;padding:0}ul li,ol li{margin:0;padding:0}ul ul,ul ol,ol ul,ol ol{marg
in:0 0 1.5em 2em}#sidebar ul,#sidebar ol{margin:0 0 1em 2em}#sidebar ul.flat,#sidebar ol.flat{ma
rgin:0 0 0 2em}.single #sidebar ul.flat,.single #sidebar ol.flat{font-style:italic;margin:0 0 1e
m 2em}
となる。
「こう書けたら楽なのに」が出来る感じですっきり。
jQuery のプラグインの DataTables を使っていて、すべての行に含まれる項目を処理したいときなどは、fnGetNodes() で項目を取り出して処理をする。
- fnGetNodes
- Get a single TR node or all TR nodes for the table. Useful for event manipulation.
各行に .hoge があるとして、テーブルが出来たあと ( $('#example').dataTable(); をしたあとの状態 ) で、
$('#example td .hoge').css('color', '#ff0000');
としても現在表示中のページの項目しか変わらない。
DataTables は、表示されている行とは別に、表全体のデータを DOM から取り除いているので、 fnGetNodes() で取り出して処理する必要がある。
一気に処理
var oTable = $('#example').dataTable();
$(otb.fnGetNodes()).find('.hoge').css('color','#ff0000');
それぞれを処理
var oTable = $('#example').dataTable();
$( oTable.fnGetNodes() ).each(function(){
$(this).find('.hoge').css('color', '#ff0000');
});
やりかたがわからなくてハマっていたら、FAQ でした。