[JavaScript] Google マップまわり

2010年12月 9日

最近、Google マップをがちゃがちゃする機会が続いたので。

• APIのバージョンが3になっていた。バージョン 2は廃止。
• バージョン 3からはkey不要。
• <iframe>で埋め込んだ場合、ある条件が重なるとIE7～8で印刷できない。
• マップ上に線や図形を描写可能。
• ある地点Aから、ある地点Bへの交通ルートを描写可能。ただし、電車の交通ルートは取得できない。

[JavaScript] iPhone向けサイトの表示

2010年11月17日

iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています

UAを見て、別URLに飛ばす or 表示内容を切り替えるのが多い。まったく同一のページでCSS切り替えだけで対応しているのは、制作会社くらいだった。

ちなみに、iPhoneのUAは「iPhone」、AndroidのUAは「Android」のようなので、JavaScriptを使ってUAを見て表示を切り替えると、こんな感じ。

if ((navigator.userAgent.indexOf("iPhone") == -1) && (navigator.userAgent.indexOf("Android") == -1)) {
    document.write("スマートフォンではないです。");
} else {
    document.write("スマートフォン (iPhoneかAndroid) です。");
}

UA参考: FAQ｜Android™向けアプリケーション開発者様用技術情報 | NTTドコモ

で。

この手の対応は、検証をどうするかが一番の悩みどころですが。FirefoxのアドオンなどでUAを切り替える or 誰かの持ち物を借りる......かな。

User Agent Switcher :: Add-ons for Firefox

[JavaScript] 結局、連想配列が分かってない

2010年10月22日

var hoge = {
    foo: [
        "aaaa",
        "bbbb"
    ],
    bar: [
        "cccc",
        "dddd",
        "eeee"
    ]
};
for (var i in hoge) {
    for (var j = 0; j < hoge[i].length; j++) {
        alert("キー: " + i + "\n値: " + hoge[i][j]);
    }
}

......こう?

なんで「for in」なのか分からない。

どこぞのJSな人が「配列はfor。連想配列はfor in」といったから for in にするけど、「オブジェクトだから for in」という説明で、分かったような分からないような。

......分からないようなちょっとだけ分かったような。

hoge = {} と hoge = [] で違うっていうのもね。

[JavaScript] [jQuery] つづりに自信がない単語「siblings」

2010年10月19日

siblings() を sibrings() と間違える確立が100%だと気付いた。

手打ちだと動かない → jQuery 日本語リファレンスからコピーしたらなぜか動く。

をいつもいつも繰り返していたけど、間違える確立100%って、逆に正確なのかも知れない。

似た類の、いつも間違えること。

• parents() とは別に parent() があるのか自信がなくなる。
• children() とは別に child() があると思うことがある。
• children() だったか child() だったか分からなくなる。

Googleの検索結果にパンくず

2010年10月 6日

Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応[to-R]

2010年9月2日に追加された、追加されたて機能っぽい。へー。

パンくずリスト - ウェブマスター ツール ヘルプ

この記事で説明する形式は、試験運用中のものです。フィードバックやその他の利用できるマークアップ標準に応じて、今後変更される可能性があります。

それはそれとして、「試験運用中」......か。

[秀丸] 秀丸でアウトライン解析

2010年8月13日

CSSファイルのどこに何を書いているかを見渡したいなーと思ったので、秀丸のアウトライン解析を使ってみました。

設定はこんな感じにしています。IDを振っているdivと、その次のブロック要素まで表示する設定 + 中途半端にHTML5混ざりです。

1. [その他] - [ファイルタイプ別の設定] を選択。
2. [アウトライン] - [解析] の設定を選択し、[ツリー表示 - 通常] のラジオボタンにチェック。

3. 以下を追加。すべて [種類: 文字列] のラジオボタンと正規表現にチェック。

   1. ^(body > )?(header|footer|aside|section|nav|div)(#[a-zA-Z0-9\-_]*)? {
   2. -+ \*/
   3. (header|footer|aside|nav|section|div)((\.|#)[a-zA-Z0-9\-_]*)? (header|footer|aside|nav|section|div|ul|ol|dl|table|p|h[1-6]|form)((\.|#)[a-zA-Z0-9\-_]*)? {

わりと適当なのでちゃんと表示しないセレクタもありますが、とりあえずこれでいいことにします (自分に最適化)。

[nanoc] nanoc～基本機能編 (2)～

2010年7月28日

導入編、基本機能編に引き続き、合間にnanoc。

route '*' do
  item.identifier + 'index.html'
end

route '*' do
  item.identifier.chop + '.' + item[:extension]
end

[JavaScript] [jQuery] 色はanimate()できない

2010年7月15日

色を animate() しようとしたら。

animate(params, [duration], [easing], [callback]) - jQuery 日本語リファレンス

数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。

できない仕様だった。何か自分の書き方が悪いのかと、いろいろ悩んでしまった......。

色をアニメーションするプラグイン (Plugins | jQuery Plugins) があって、それを使えばいいっぽい。

そもそも背景色の指定にいまいち慣れないから、いっぱいうろうろするので、ちゃんと調べた。

css( "name", "value" )

css({ name: "value" })

ということを踏まえると――

• OK: $(".hoge").css({ background : "#f00" });
• OK: $(".hoge").css({ backgroundColor : "#f00" });
• NG: $(".hoge").css({ background-color : "#f00" });
• OK: $(".hoge").css({ "background" : "#f00" });
• OK: $(".hoge").css({ "backgroundColor" : "#f00" });
• OK: $(".hoge").css({ "background-color" : "#f00" });

こういうことだった。「background」も「backgroundColor」も、DOMで使える書き方。「background-color」はjQuery特有の書き方だから、ダブルコーテーションで囲まないとダメ。

ややこしい。

英語のドキュメント (.css() - jQuery API) には、ちゃんと書いているような気もする (「the CSS and DOM formatting of multiple-word properties」あたり?)。

「キーはいつの日もダブルコーテーションで囲むこと」と決めておけば迷わない?

[nanoc] nanoc～基本機能編～

2010年7月 8日

先週に引き続き、ちょこちょことnanoc。今週はつまづかない。

include Nanoc3::Helpers::HTMLEscape

--- 
title: Home
tags:
  - foo
  - bar
  - baz
---

  filter :haml, :format => :xhtml

%div.hamlTest
  %span ああああああああ。 |
  パイプで分割テスト。 |

[JavaScript] [jQuery] 検索結果で検索ワードをハイライト

2010年7月 6日

jQueryのプラグインを使えば、すごく簡単だ。後で入れよう。

参考: jQuery 指定した文字列をハイライトするプラグイン - 130単位

MTなら、以下の記述になる。

     $(function(){
        var keyword = "<$mt:SearchString$>";
        if (keyword) { $("#content").highlight(keyword); }
    });

[nanoc] nanoc～導入編~

2010年7月 2日

nanocというものを試している最中で、つまづいたこと・試していることなどなど。

来週中には、3番目解決したいなー。そして、今のところ、できたこと。

Trac Lightning

2010年6月 8日

Trac Lightningの1.6.1→2.4.2のアップグレードを失敗して再インストールしたので、ついでにインストール手順を書いてみます。

準備完了。使う。

おしまい。

細かい設定がよく分からない。とりあえず、プロジェクトの作り方、文字コードの変え方が分かっていればいいのかな。

# それにしても、アップグレードの失敗が......。

[CSS] HTMLのidとclassでいい名前をつけるテクニック

2010年6月 1日

【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル

idとclassの組み合わせで「TitleCase」と「lower-case-dashed」が組み合わさるケースがあってもいい。たとえば「class="SearchField" id="widgetco-search"」のように。

ない......。

それを第三者が見たときに「この場合はこの命名規則で、この場合はこれだな」と把握ができないから。

ルール系はむずかしい。

[comand] ディレクトリ内の差分をとる

2010年4月12日

<c:\xampp\htdocs\test\aaa\> と <c:\xampp\htdocs\test\bbb\> のディレクトリを下層も含めて比較したいが、下層のディレクトリが多くてWinMergeみたいな比較ツールじゃ時間がかかる!!

――という場合は、Cygwinを使うと楽です。

1. Cygwinを起動する。

2. cdコマンドで、差分をとりたいフォルダがある場所へ移動。

   例: $ cd /cygdrive/c/xampp/htdocs/test

3. diffコマンドで比較し、<diff.txt> というファイルに結果を出力。

   例: $ diff -qr aaa bbb > diff.txt

4. 結果が表示されるまで待つ。diffコマンド実行後に $ が出力されて、再びコマンドが入力できるようになっていれば終了。

5. 差分があれば、以下のように表示される。実際になにが違うのかは、そのファイルやディレクトリをWinMergeなどで比較する。

   Files aaa/xxx/index.html and bbb/xxx/index.html differ
   Only in aaa/yyy/: 01

   ※それぞれ以下の意味。

   • <aaa/> と <bbb> で <xxx/index.html> の内容が違う。
   • <aaa/> の <yyy/> にだけ、<01xxx> というディレクトリがある。

[JavaScript] [jQuery] jQueryの:notとwrapInner()の組み合わせが変

2010年4月 1日

jQueryの :not と wrapInner() の組み合わせがうまく動かないっぽい。ねむい。

$(".hentry li:not(p)").wrapInner('<p>'); というスクリプトを書くと、結果は以下のようになるはず。

HTMLソース:

<li>テキスト</li>

ブラウザ表示:

<li><p>テキスト</p></li>

HTMLソース:

<li><p>テキスト</p></li>

ブラウザ表示:

<li><p>テキスト</p></li> ※HTMLソースそのまま。

なのに、実際の結果はこう。

HTMLソース:

<li>テキスト</li>

ブラウザ表示:

<li><p>テキスト</p></li>

HTMLソース:

<li><p>テキスト</p></li>

ブラウザ表示:

<li><p><p>テキスト</p></p></li>

wrapInner() 以外だと、たとえば css("font-weight", "bold") だと意図通りの結果になる。

......なぜ。ねむい。

[秀丸メール] 秀丸メールで色で絞り込む

2010年3月11日

秀丸メールではメールごとに色をつけられます。以下の設定で、色をつけたメールだけを絞り込んで表示もできます。

1. メニューの [設定] - [全般的な設定] を選択。

2. [メール一覧] のスレッドを開き、[表示範囲] を選択。

   ※[上級者向け設定] にチェックしていない場合は、チェックする。

3. [新規作成] ボタンをクリック。
4. [表示範囲のカスタム設定] ウィンドウが表示されるので、[追加の条件] の右にある [...] ボタンをクリック。
5. [色つき] にチェック。特定の色だけで絞り込みたいときは、[色指定] から色を選択。
6. [OK] ボタンを押してウィンドウを閉じていく。
7. メール一覧の [範囲] のセレクトメニューに、追加した表示範囲があるので、それを選ぶと絞り込める。

絞り込む条件は複数組み合わせられるので、「色つき + マークしたメール」なども可能です。

[秀丸] 秀丸でgrepした結果でF10

2010年2月25日

を試してみた。

1. 秀丸でgrepする。
2. grepした結果で [F10] キー。
3. 該当するページの、該当する行に移動してくれる。
4. [Ctrl] + [Shift] + [F10] キーで、元の画面 (grep結果のタブ) に戻れる。

このF10を知らないことを上司や先輩に驚かれた。Dreamweaverで該当行に飛べるのは知っていると言ったら「なんで秀丸にも同じ機能があると思わなかったんだ......」となった。

今度、「こういう使い方がしたいいい」となったときには使ってみる。

全角文字を検索する正規表現

2010年2月23日

全角記号

[、-◯]

全角かな・漢字

[ぁ-ヶ]|[亜-煕]※Shift_JIS

全角かな・漢字

[ぁ-ヶ]|[一-龠]※UTF-8

うーん。細かい話は難しい。ざっくり「全角文字」なら、これでいいのかな。

Dreamweaverはバカだから効かない。

参考:
秀丸エディタを使いこなす　―正規表現―インデックス――
すべての漢字を取り出す正規表現＜UTF-8 | UOSHICHI.COM

[Firefox] あるディレクトリへのリンク色を変える

2010年1月14日

特定のURLの特定ディレクトリのリンクだけ、ぱっと見で区別したい。もちろん、そのサイトのHTML・CSSに手を入れることなく区別したい。

......と思ってたけど、いい方法が浮かばなくて地道にマウスをリンクの上に乗せていたら、Stylish とCSSでいけることに唐突に気が付いた。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("test.localhost") {
   a[href^="/dir1/"] {
      background-color: #faa !important;
   }
   a[href^="/dir1/"] img {
      border-top: 1px solid #faa !important;
      border-bottom: 1px solid #faa !important;
   }
   a[href^="/dir2/"] {
      background-color: #f00 !important;
   }
   a[href^="/dir2/"] img {
      border-top: 1px solid #f00 !important;
      border-bottom: 1px solid #f00 !important;
   }
}

<http://test.localhost> 内のhref属性が「/dir1/」で始まるリンクの背景を#faaに、href属性が「/dir2/」で始まるリンクの背景を#f00に変える。画像は背景が効かないから、上下にボーダーをひいてみる。

a[href^="/aaa/bbb/"]

「/aaa/bbb/」で始まる。

a[href*="aaa"]

「aaa」を含んでいる。

a[href$="aaa"]

「aaa」で終わる。

アトリビュート系は使わないから、いざというときに出てこない。

[JavaScript] JSONさん

2009年12月 1日

今まで何度か (何度も?) JSONさんとすれ違ってきたけど、ちゃんと挨拶をしていなかったので挨拶してみることにした。

1. JSONさんは書式のひとつらしい。
2. 拡張子は「json」らしい。
3. JavaScriptで読み込めるものらしい (XMLみたいに)。

へー。で、ちょっと試した結果。

1. JSONさん、シンプル!
2. 記号区切りなので、うっかりミスが起こりそう。

XML、CSVと比べるとこんな感じ。
XML >= JSON >>>>>>>> CSV
※XMLとJSONの優劣は、使いどころと考え方の違いによる。

次はYAMLさんに挨拶に行く予定です。

[正規表現] [秀丸] 秀丸の強調表示で見やすくする

2009年11月25日

必要に迫られて、Tortoise SVNで取得できる差分 (Unified Diff形式) を見やすくしてみた。

1. 秀丸のメニューから [その他] - [ファイルタイプ別の設定] と選択。
2. [設定のリスト] ボタンをクリックし、[新規] ボタンをクリック。
3. 「diff」という名前を新規作成。
4. [ファイルタイプの設定] のセレクトメニューから「diff」を選択。

5. [デザイン] - [強調表示] を選択し、以下の3つを追加する。

   文字列:

   ^\+

   検索方法:

   正規表現

   表示方法:

   行の強調1

   文字列:

   ^-

   検索方法:

   正規表現

   表示方法:

   行の強調2

   文字列:

   ^(Index: |={10}|--- |\+\+\+ |@@ )

   検索方法:

   正規表現

   表示方法:

   行の強調3

6. [デザイン] から、[行の強調表示1] [行の強調表示2] [行の強調表示3] を適当に見やすい色に変更。
7. 設定を保存。

以下の方法でUnified Diff形式の差分を取得して見てみると、ちょっとだけ見やすい。

1. Tortoise SVNのメニューから [ログ表示] を選択。
2. 差分を見たいリビジョンを2つ選択 ([Ctrl] キーでできる)。
3. 右クリックのメニューから [Unified Diff形式で差分を表示] を選択。
4. 秀丸で差分が表示される。

Google ChromeでJSオフ

2009年11月25日

Google ChromeのメニューにJavaScriptをオフにする設定がなくてあわあわしたら、起動オプションに設定するとできるらしい。

起動オプション - Google Chrome まとめWiki

--disable-javascript　JavaScriptを無効にします。

ちょっと面倒くさい。

[正規表現] 画像ファイルの一覧を作成する

2009年11月16日

リンクチェッカーの時間にもよりますが、10～15分くらいでサイト内で使用している画像ファイルの一覧を作成できます。

1. リンクチェッカー「Xenu」でサイト全体のリンクチェックをする。
2. チェックが完了したら、メニューの [File] - [Export to TAB separeted file] から名前をつけて保存。

3. 保存したファイルを秀丸で開き、整形する。

   1. 保存したチェック結果にはHTMLファイルやCSSファイルも含まれているので、関係ないものを削除する。

      検索:

      ^((http(.*).(html|css|js|pdf|xml|wmv))|(mailto:))(.*)\n

      置換:

      ※正規表現。

      取りこぼしがあるけど気にしない。

   2. ステータス表示も含まれているので、画像ファイル名のみにする。

      検索:

      \.(gif|jpg|png|bmp)(.*)$

      置換:

      .\1

      ※正規表現。

   3. 画像以外の行はステータス表示が残っていて分かりやすくなるので、画像以外の関係ない行を手動で削除する。

   4. 画像だけになったら <img> に置換する。あとでDreamWeaverでバリデーションをかけるときのエラー防止用に alt="" を入れておく。

      検索:

      ^(.*)$

      置換:

      <p><img src="\1" alt="" /><br />\1</p>

      ※正規表現。

   5. 適当に <html> <body> などを入れ、好みでスタイルを調整する。
   6. 必要であれば、絶対URLを絶対パスへ置換する。
   7. ファイルの拡張子をHTMLに変更して、完成。

[JavaScript] [jQuery] 透過させるとIE8でjQueryのhover()が正しく動かない

2009年9月18日

IE8では、透過している要素の中でjQueryの hover() がうまく効かないっぽい。

解1: 透過をやめる (以下を削除)。

    filter:alpha(opacity=90); /* 透過 (IE) */

解2: hover()をやめて、mouseover() + mouseout() にする。

    $("ul#gnav > li").hover(
        function(){ ～ },
        function(){ ～ }
    );

↑これを

    $("ul#gnav > li").mouseover(
        function(){ ～ });
    });
    $("ul#gnav > li").mouseout(
        function(){ ～ });
    });

↑こうする。ただし、Safari 2 で mouseover() + mouseout() の挙動が不安だった気がする。

個人的な解: そもそも透過は見やすいのか、どうなのか。

[JavaScript] IE7はIE6になる?

2009年9月15日

青柳 臣一 ブログ（総合） [IE] navigator.appVersion がバグるより。

そこで navigator.appVersion を表示させてみました。結果は↓

4.0 (compatible; MSIE 6.0)

あれれ？
試しに navigator.userAgent を表示させてみると、

Mozilla/4.0 (compatible; MSIE 6.0)

なにそれこわい。

User Agent が長すぎると navigator.appVersion や navigator.userAgent がバグっちゃうのね。

IEダメすぎる......。jQuery.browser もアウトなんじゃ......(jQuery.browser はnavigator.userAgent を利用してるから)。

これって、「IE6用のJSファイルを用意して、<!--[if IE 6.0]> 系の分岐コメントを使え」という話?
「そもそもブラウザのバージョン別にどうにかしようとするな」とかいう話?

[JavaScript] imgタグ、inputタグのaltをわさわさする

2009年9月 8日

• imgタグのaltチェックはWeb Developer。
• inputタグのaltチェックは、IEでちくちくマウスを乗せてみる (アナログ)。

という方法だったけど、inputタグだらけのHTMLに出くわしてIEでちくちくしてられなかったので、altをタグの後ろに表示するJavaScriptを書いてみた。

1. Firefoxで、チェックしたいページを開く。
2. すべてのCSSを無効にする (Web Developerが入っていたら、「Ctrl + Shift + S」かな?)。
3. Firebugを開く。
4. Firebugのコンソールに、以下のスクリプトを貼り付ける。
5. 実行。
6. imgタグ、inputタグのaltが、わさわさ!!

$("img, input:image").each(function(){
    $(this).after('<span style="color: #000 !important;'
    + 'border: 1px solid #fc9 !important;'
    + 'background: #ff9 !important;'
    + 'position: relative; z-index:20;">' + $(this).attr("alt") + '</span>');
});

......ただし、jQueryに依存してるので、そのページでjQueryを使ってないとエラーになるっていう。積極的手抜き。

[CSS] IE8は:last-child未対応

2009年9月 4日

最新Webブラウザ、Web標準への対応度は？ - SourceForge.JP Magazine

「あれー? 何か変なスタイル書いたかな? それともレンダリングモードかな? :first-childは効いてるのになー」と思ってたら、そもそも未対応だったという。

[JavaScript] [jQuery] 奇数の要素にoddというクラスをつける

2009年9月 2日

:nth-child(index/even/odd/equation) - jQuery 1.3.2 日本語リファレンスより。

奇数のli要素にoddというクラスをつける

$("ul.column-2 li:nth-child(odd").addClass("odd");

これでよかったのか......。each()で個別に出さないといけないと思ってた。

$("ul.column-2").each(function(){ $(this).children("li:even").addClass("odd"); });

↑無駄手間な例。

今日の輝いていた言葉: ここでは

2009年8月25日

Windows ユーザーエクスペリエンス ガイドラインから

ここでは、無秩序な状態に秩序をもたらす方法について説明します。

かっこいい!!

[JavaScript] [jQuery] jQueryで画像のロールオーバー

2008年10月 7日

<ul id="gnav">
<li><a href="foo"><img src="gnav_foo_off.gif"></a></li>
<li><a href="bar"><img src="gnav_bar_off.gif"></a></li>
</ul>

HTMLがこんなんなってるとして、jQueryを使うと、JavaScriptはこんなんでいいみたい。

$('#gnav img').hover(function(){
    this.src = this.src.replace('_off.gif','_on.gif');
    },function(){
    this.src = this.src.replace('_on.gif','_off.gif');
});

シンプルすぎて逆に不安。

上記だと、画像の先読み込みをしていないので、先読み込みするプラグイン Preload を入れてみる。
そして、先読み込みの記述を追加。

[accessibility] 音声ブラウザとCSS

2008年7月 3日

「ナビゲーションをスキップして本文へ飛ばす」というリンク。

アクセシビリティに気をつけると遭遇 (ページ制作時にコーディングに取り入れる) 率が高いこのリンクだけど、今この場を借りて、ごめんなさいと言いたい。

今まで私が組んだサイト、スキップが動作しないです (!!)。

原因は、「音声ブラウザではCSSは無効になるんだ」と思い込んでいたこと。その思い込みで、「ナビゲーションをスキップして本文へ」を非表示 (display:none) にしていた。ホントごめん。

縦横1pxの透明画像を入れて、altに「ナビゲーションをスキップして本文へ」とか入れるのがよい感じ。

[JavaScript] 背景に透過PNGを使う

2008年6月16日

背景に透過PNGを使いたくてJavaScriptを調べたらちょっと制約がありそうなので、まとめてみた。

透過PNGを使うJavaScriptにどんなのがあるのかは、透過pngをIE6で使う方法いろいろとjQueryプラグイン - Emotional Webで。

IE PNG Fix - TwinHelix

• iepngfix.htc。
• 背景で使用可。
• 背景のリピートは不可。

ユンサンの／융상의／YungSang's: 透過PNG と IE と IE7　まとめ

• iepngfix.htcを参考 (?) にしたもの。背景での使用可。
• 背景のリピートが使用可。ただし、複雑な模様は再現不可。
• 印刷時にIE (IE6だけ?) でそのエリアが黒くなる。

IE PNG Fix | jQuery Plugins

• jQueryのプラグイン。
• 背景で使用可。
• 背景のリピートは不可。

どうも、透過PNGを背景でリピートするのは難しい模様。

[Movable Type] 続・カテゴリごとに表示を変更

2008年6月16日

カテゴリごとに表示を変更 | SQUID

<$MTCategoryBasename$> は、カテゴリー・アーカイブでは動作するが、エントリー・アーカイブではエラーとなってしまう※。

と書いていたが。理解した。

エントリーを投稿するときにカテゴリーを選択しないと、エントリー・アーカイブで <$MTCategoryBasename$> はエラーになる。

カテゴリーがないんだから、MTCategoryBasenameも、もちろんない。当たり前だ。自分のあほさ加減に、ちょっと脱力した。

<MTIfCategory><$MTCategoryBasename$></MTIfCategory> でよい。

[CSS] CSSハック

2008年6月15日

普段よく使うハック一覧。

セレクタ

• IE6以下に適用

  * html body {}

• IE7に適用

  *:first-child+html body {}

• IE7以下に適用 ※順番を逆にしない。

  *:first-child+html body {}
* html body {}

• Mac Safari2に適用

  html[xmlns*=""] body:last-child {}

プロパティ

• Win IE7以下に適用

  div { *color:#f00; }

• Win IE6以下に適用

  div { _color:#f00; }

コメントアウト

• Mac IEを除外

  /*\*/
div {}
/**/

これは普段使わないけど、いちおうメモ。

[Dreamweaver] CSSのプロパティーフォーマット

2008年6月11日

CSSのプロパティフォーマットをするDreamweaverの拡張を見つけた。

CSSプロパティーフォーマット - 合同会社レゾリューションズ

プロパティの順番は意識しているつもりだけど、たぶん変な順番になっている場所もある。特に急いでいるときなんかは、意識も低くなるから汚い (後で直すけど)。

で、これは便利そうだなと思って試してみたんだけど、以下の難点あり。

• 無駄な改行が入る。
• ハックによっては、フォーマットが使用できない。

無駄な改行は、この拡張のフォーマットではなく、DreamweaverデフォルトのソースフォーマットをすればOK。

だけど、ハックによってフォーマットが使用できないのは大きい。特に「アンダースコアハック」のような、プロパティの前後に何か文字列を付け足すハックは整形されない (位置がそのまま) か、記述が崩れる。

アンダースコアハックは、正直よく使う。プロパティの普通に自分で気をつけるレベルでも対応可能なので、この拡張は使わなくってもいいかな。

ハックを使わない人は、入れてみてもいいかも知れない。

[Apache] [Movable Type] コンテントネゴシエーション

2008年6月11日

このブログ、現在は静的ページ (HTML) で運用しているけど、将来動的ページ (php) にするかもしれない。そこで、拡張子なしのURIにしてみた。「コンテントネゴシエーション」とか言うらしい。

その手順をそろそろまとめてみる。

大きくまとめると、以下の3つのことをすればよい。

• ファイル自体には、拡張子をつける。
• ファイルにリンクするとき、拡張子を取る。
• .htaccessで「Option +Multiviews」を設定する。

で、さくらのレンタルサーバーを使用しているのだけど、さくらではMultiviewsがデフォルトで設定されているので、.htaccessの設定は不要。

MTだと、エントリーへのリンクはこんなんなる。

• MTの設定画面で拡張子を取っ払ってはだめ。
• MTのテンプレートのアーカイブマッピングから拡張子を取っ払ってもだめ。

• リンクするときの拡張子をすべて取る。

  • 現: <$MTEntryPermalink$>
    新: <$MTEntryDate format="/%Y/%m/%d"$>_<$MTEntryID pad="1"$>
  • 現: <$MTArchiveLink$>
    新: <$MTArchiveDate format="%Y/%m/%d"$>_<$MTEntryID pad="1"$>

ちょっと地道。

[Movable Type] [plugin] MTで絵文字を表示するプラグイン

2008年6月10日

「MTで絵文字を使いたいんですが......」という要望が来たので調べてみた。

emoddy

配布元

CSS HappyLife

概要

エントリーに絵文字を表示。

対応

MT3.x、MT4.0以降

ライセンス

著作権を表示・非営利・同一の許諾条件の下で頒布

EmoticonButton

配布元

Kickstart my heart

概要

エントリーに絵文字を表示。

対応

MT4.1

ライセンス

記載ナシ

InsertIcon

配布元

The Blog Of H.Fujimoto

概要

エントリー・コメントに絵文字を表示 (コメントは、MT4.1/MTOSのみ対応)。

対応

MT3.x、MT4.0以降 (バージョンによってDLするプラグインが違う)

ライセンス

ドネーション

3つくらい? 業務で使えそうなのは2つ。コメント欄でも使えるのはInsertIconのみ (MT4.1/MTOS)。

他にもMTMacroプラグインを使う方法だとか、JavaScriptを使う方法もあるみたいだけど、面倒くさそうなのでしない。

VAIOのモニター不良

2008年6月 4日

昨日からVAIO (VGC-H24L7) のモニターの電源が応答しなくなった。

ディスプレイ電源不良（VGP-D17SM1） (その他) - Sony VAIO Hot Street

うわああああああ。これだ......。モニターはVGP-D17SM1......。

Zone.identifier

2008年5月30日

Zone.identifierという言葉を案件で聞いた。「ゾーン・アイデンティ......?」となったので、とりあえずGoogleに聞いてみたら、以下の場合のときに作成されるファイルっぽい。

• Windowa XP SP2のIE6でファイルを保存した場合。
• Outlook Expressで添付ファイルを保存した場合。

で、そのゾーンなんちゃらがくっ付いてるのかどうかは、どうしたら分かるんだ、と思ったら。

ZoneID設定/表示/解除/検索.VBS(WindowsNT/2000/XP/Vista / インターネット＆通信)。

解決。

ただし、OEで添付ファイルを保存しても、解凍ソフトによってはゾーンなんちゃらが削除されるっぽい (ZIPファイル自体にはくっ付いてる)。Lhazでは削除。

[JavaScript] [jQuery] jQuery リファレンスからメモ

2008年5月29日

jQueryと仲良くなってみる (その1)。

自分向けメモ。即効使えて便利そうなの。

奇数/偶数

:odd

奇数

:even

偶数

例) テーブルの色を交互に (偶数の <tr> に class="even" 追加)。

後/前に追加

after()

後

before()

前

• after()とappend()とappendTo()。
• before()とprepend()とprependTo()。

親/子要素

parents()

親要素

children()

子要素

例)

[Movable Type] [plugin] ページ分割

2008年5月26日

現在、MT 3.35のテンプレートを作成しているのだけど。

要求にページ分割があり「MT 3.35のプラグインで、ページ分割に対応しているものはないです※」と言ってしまった。

※静的ページなので、MTPaginate は使わない。

静的ページ用ページ分割プラグイン：PageBute | MTプラグイン配布 | MT エンジニアブログ | スカイアークシステム

あった。MT 3.36で動作確認。

ちなみに、そのMT 3.35でのページ分割という要求に「JavaScriptで対応できますが、それでいいですか?」と言ってOKを取ってしまっているのだけど、ただいまJavaScriptで大絶賛つまづき中。

......さてと。

[Movable Type] [plugin] カテゴリごとに表示を変更

2008年5月20日

現在、MT 3.35のテンプレートを作成している。カテゴリごとにナビゲーションやキービジュアルを変更したいとき、MT 4.0以降だと「<MTIf> でやればいいかー」と思ってしまうけど、MT 3.35だとそれが通用しないので試行錯誤。

• カテゴリーの出力ファイル名をbody要素に割り振り、CSSでナビゲーションを制御。
• カテゴリーの出力ファイル名とキービジュアルの名前を同じする。

というようなことを考えてみたけれど、カテゴリーの出力ファイル名を表示する <$MTCategoryBasename$> は、カテゴリー・アーカイブでは動作するが、エントリー・アーカイブではエラーとなってしまう※。

※MT4.1ではエラーにならない。

デフォルトでは、エントリーを登録したカテゴリーに関するタグは <$MTEntryCategory$> しか使えない模様 (<$MTCategoryBasename$> しか試してないけど)。

どうしようかと思って探していたら、以下のプラグインを発見。

主／副カテゴリーを区別して出力する - The blog of H.Fujimoto

このプラグインを使うと、エントリー・アーカイブで <$MTCategoryBasename$> を利用できるようになる。......プラグインの意図を無視した (間違った) 使い方だけれど。

[accessibility] [html] JIS X 8341-3

2008年4月 8日

『JIS X 8341-3』を読んでみた。今まで2年ほどコーダーをしているけど、実は一度も読んだことがなかったので。

読んでみて、普段の自分のコーディングで不足している部分は以下の感じ。

• tableのcaption要素
• th要素のscope属性、headers属性
• head の link要素でprev属性、next属性、index属性
• form の fieldset要素、legend要素
• 「メニューを飛ばして、このページの本文へ」という、ページ内リンクをパンくずの下に入れておく。
• 言語が切り替わるときは、p要素、span要素などにlang属性入れる？
• マウス操作だけではなく、キーボード操作時にも対応する？ onMouseOverとonFocus。onMouseOutとonBlur。

この規格の中には出てこなかったけど、以下のことにも気をつける。

• tableのsummary属性
• thのabbr属性

ところで、このJIS規格、印刷ができないのはかまわないのだけど、PDFファイルの文字が果てしなく読みにくいのはちょっと勘弁してほしい。

ぶろぐつくった。

2008年4月 7日

もろもろ整備してないけれど、前倒しで公開してしまう。