Archive for September, 2006

クリエイティブのレイヤー

Friday, September 29th, 2006

Progressive Enhancement に対抗して? クリエイティブのレイヤーというコトバを考えてみる。

ウェブページのデザインとか UI を考えることは、当たり前だけど、色・レイアウト・要素のカタチや動きなど、いろんな項目を検討することになる。多くの場合、(思わずごっちゃになりそうだけど)いろんな項目をレイヤー的に切り分けて考えるとうまくいくことが多い。

例えば、

  • ロゴ
  • テキスト(タイトル・コピー・タグライン)
  • テーマカラー(トーン)
  • レイアウト(エリア決め・グルーピング)
  • 要素のカタチ(~風・メタファー・カラー・動き)
  • 写真(アングル・トリミング・レベル調整)
  • イラスト(~調・対象物・トーン)

といったようなものがありそう(上のものほど抽象度が高く、下のものほど具体的)。

これらは当然だけど、すべて別個のものであり、同じ文脈で一緒くたに語れるものではない。と同時に、自分的には、これら全部が得意な制作者など少ない、というか多分いないのでは、と思う、なんとなく。

ひと昔前なら、ウェブデザイナーと呼ばれる人たちが上記のほとんどを担当していたかもしれないけど、例えば、イラストが得意な人がエリア決めも得意とは限らないし、逆もまたしかり。ウェブ制作という分野ができてから時がたち、各分野が徐々に成熟する中で、個々の分野に特化した制作者がチームプレイでひとつのアウトプットに取り組む、みたいな進め方が今後とっても大事になってくるような、そんな気がする。

実際の現場ではイラストが得意なひとが細かく要素のデザインを決めてたりしてちょっと大変なことがありそうな。それでうまくいくなら何の問題もないと思うけど、問題があるなら、やはり個々に切り分けることを考えないといけない気がする。

クリエイティブのレイヤー、大事そうな気がして、でもまだうまくまとまってないけど、詳細はまた考えることにする。

Progressive Enhancement

Friday, September 29th, 2006

Progressive Enhancement という UI を考える上でのキーワードがあるらしい。
http://en.wikipedia.org/wiki/Progressive_Enhancement

進歩的な強化? 直訳すると全然よくわからないけれど、思いっきりカンタンにまとめると

  • document.write を使わずに、DOM Scripting に徹する
  • ブラウザ判別において、UA を見ずに関数(getElementByIdなど)実装の有無で判別する

といったことらしい。

進歩的な強化の真意はよくわからないけど、というかこの訳が正しいかも微妙だけど、このあたりを実践することで、JavaScript コードがより抽象的で汎用的になりそうな気がして、興味深い内容だと思う。

Ajax と一緒に使いたくなるプラットフォーム

Thursday, September 28th, 2006

Ajaxian.com 2006 Survey Results によると、

  1. PHP (50%)
  2. Java (37%)
  3. .NET (16%)
  4. Rails (14%)
  5. Python (6%)

ということで、Lightweight Language 全盛と思いきや、Java が健闘していて、逆に Perl がベスト5落ち、というのが興味深いところか。

関係ないけど、Ajaxian.com 、ほぼ毎日ほぼ Ajax ネタだけで更新されていて、いくらブームとはいえ、よくそんなに話題があるなと思ってしまう。

プログラミングにもセンス

Thursday, September 28th, 2006

前々からすごく気になる言葉。一見、数字と無味乾燥な英単語を並べるだけのプログラミングという分野においても、右脳的というか、何かしらの創意工夫みたいなものが、プログラムコードを大いに良質なものとする。逆にそういった工夫がなく、例えば同じような処理が各所に点在するようなコードを書くエンジニアは、そんなにデキる人のように見えない。

具体的には何か? パッと思いつくのは、汎用的な関数とかデータ構造をつくる、とか。けど、もっとなにか大きいところで、センスがある・ないというのがはっきり分かれる気がする。うまくいえないけど。

ハッカーと画家 という書籍があって、一見関係なさそうな2者の類似性を説いていてとても興味深い。でも、ハッカーと呼ばれる人々でなくとも、プログラムコードを書く人は何かしらのセンスが必要に思えるし、それに学術分野では、プログラミングは理工系ということになってるけど、まわりを見渡すとプログラマの文系出身者が結構多い。

ひとつ思うこと。センスがない人には自分がセンスがないことがわからない。センスがあるひとは、センスがない人との差に愕然とする。センスは教えられない、多くは自分で練習して自分で覚えないと(時にイタイ思いをしないと)わからない。そんな気がなんとなくする。

jQuery : New Wave Javascript

Sunday, September 24th, 2006

Beginning Javascript With DOM Scripting And Ajax という本で紹介されている jQuery というライブラリが興味深い。

prototype 同様、JavaScript の汎用的な機能を提供しているのだけど、記述頻度の高いコードが prototype 以上に整理されていて、パッと見、JavaScript ではない、独自言語のように見えてくる。

$(document).ready(function() {
    $("#orderedlist li:last").hover(function() {
        $(this).addClass("green");
    }, function() {
        $(this).removeClass("green");
    });
});

上記は、Getting Started with jQuery に記載されていたコード。prototype は Ruby のようだったけれど、jQuery は Lisp のよう? いや Lisp をそんなに知ってるクチではないけど、Lisp 並にカッコが多くなる割に、JavaScript の原型はとどめており、わかりやすくコンパクトになっている気がする。

prototype よりも後発ということで、prototype 並みに普及するか、prototype を凌駕する存在になるか、見所。

As We May Think

Tuesday, September 19th, 2006

As We May Think という、コンピュータに関する古い読み物があるのだけど、その中身はとりあえずおいといて、この shimazu.org 上に読み物のコピーをおいてた のに、SSI が有効になっておらず、見られない状態となっていた。さきほど設定変更し、見られるようにしました。

念のため、debian の apache 1.3.x 系での SSI 有効化手順をメモ。

■httpd.conf など関連する conf ファイルに下記を追加
Options +Includes

■module.conf に設定追加し、再起動
# /usr/sbin/apache-modconf apache enable mod_include
# /etc/init.d/apache restart

それにしても、プログラムありきでページ管理してるなかで SSI のことなどすっかり忘れてしまっていた。というか、今後も使うことはない気がする。

時々サーバが不通

Tuesday, September 19th, 2006

自宅サーバからの移行以来、特に不満はなかった Quantact だけど、ここにきて時々サーバが不通になることがある。自宅サーバから ping を打っても、Destination Host Unreachable と表示されそのまま、ということで、途中のネットワークの仕業なのかもしれないけれど、無料サーバではないわけだし、普通にちゃんと動いてほしいと思う。

でも、安いからしょうがないのか。太平洋挟んだ向こうのサーバにリモートログインしてプログラミング、というそれ自体、普通ではないのかもしれないし。

追記(2006/09/20)
LogWatch を見てみると、再起動した形跡がある模様。何も触れていないのになぜだろう...。

形態は機能に従う

Wednesday, September 13th, 2006

何かの本で見たこの言葉、近代建築家の言葉みたいだけど、考え方的には Web の UI にも当てはまりそう。なぜこのカタチなのか、なぜこの色なのか、道具としての使い勝手を考えた場合、機能を基点にしない UI など考えられるはずもなく、特に JavaScript や Flash で動的に画面展開させようというときには、どのようなカタチ・動きにもできてしまうので、ことさらに注意深く設計・実装していく必要があるように思われる。

では機能とは何か。なんだろう。。。なんですかね。Ajax とか言われちゃったらもう泣いちゃうな。

WordPress Plugin: WP-Amazon

Wednesday, September 13th, 2006

WordPress で Amazon の商品情報を参照できるプラグインを入れてみる。

割とカンタンに入ってしまった。手順としては、まず最新バージョンの 1.3.2 を下記URLから取得。

WP-Amazon 1.3.2
http://manalang.com/wp-content/wp-amazon-1.3.2.zip

上記ファイルを展開後、

  • wp-amazon-plugin.php
  • wp-amazon.php

を wp-content/plugins/ 配下にコピーすると、設定画面が表示されるので、そこで Default Countryと Associates ID を選択する。入力画面下部のリンクからポップアップウィンドウを呼び出し、商品検索→商品選択→Add ボタンクリックで商品画像が入力画面に、のハズなのだけど、なぜか機能しないので、wp-amazon.php の以下を書き換えて対応した。(リッチテキストON/OFF両対応)

function insertAtCursor(myField, myValue) {
    var win = window.opener ? window.opener : window.dialogArguments;
    if ( win.tinyMCE ) {
        if (!win) win = top;
        var tinyMCE = win.tinyMCE;
        richedit = ( typeof tinyMCE == 'object' && tinyMCE.configs.length > 0 );
        if ( richedit ) {
            tinyMCE.execCommand('mceInsertContent',false,myValue);
        }else{
            win.edInsertContent(win.edCanvas);
        }
    } else {
        //IE support
        if (document.selection) {
            // only insert text for IE (not at cursor)
            myField.value += myValue;
        }
        //MOZILLA/NETSCAPE support
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            myField.value = myField.value.substring(0, startPos)+ myValue
                + myField.value.substring(endPos, myField.value.length);
        } else {
            myField.value += myValue;
        }
    }
}

JavaScript の書籍

Tuesday, September 12th, 2006

ひとと話してて改めて思ったこと。なんて日本語圏の JavaScript の書籍は内容が貧弱なんだろう。取り扱うトピックの量が圧倒的にすくないだけでなく、トピックの選び方において、センスがないように感じる。思いつきでひとに言ったけど我ながらうまいと思った例え。日本語圏の書籍は

  1. if とか for とか function の基本的な説明をし
  2. alert とか document.write とかの関数の説明をし
  3. いきなり Google Maps の API の説明にはいる

ような展開がとっても多い。どうしてそんな話の飛び方ができるの、それでみんな理解できるの、これで みな Google Maps のライブラリのコードを hack できるの、自分いまだにできないのに!

ひるがえって英語圏の書籍だと、Ajax for Dummies とかビギナー向け書籍でもひとつひとつ丁寧に段階的に説明されており、英語か日本語かという違いが気にならないくらい読みやすい。

で、なかでも

の2冊は JavaScript 関連トピックを網羅的に扱っており、いまの自分的には特に学ぶ点が多々あるように思える。特に前者のほうは994ページもあって、先日購入するもいつ読み終わるかって感じではあるけど、自分の勉強の糧として大いに活用していきたい。

Javascript: The Definitive Guide (DEFINITIVE GUIDE) Professional Javascript For Web Developers (Wrox Professional Guides)