what a wonderful world

ずっと気になっていたのですが、さっき調べたら意外と簡単に対処できることがわかりましたのでメモしておきます。

“○” とか “×” などの記号はブラウザで表示するとほかの文字よりひとまわり小さくなってしまうことがあります。
これを回避するにはページ制作時に次のようにします。

スタイルシートのはじめに

@charset "utf-8";

と記述します。
もちろんそのスタイルシートはUTF-8で記述します。

次にそのスタイルシートに

body {
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

と書きます。

要するにブラウザが日本語の書体を使っていないので小さく表示されてしまうということみたいです。

参考
meisui8: 記号文字のフォントサイズが小さいのはなぜか
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 – webデザイナーのナナメガキ

Google AJAX Libraries API というものがあります。

jQuery とか Prototype とかのJavaScript ライブラリが特定の URL から読み込めます。
サイトを作るたびにライブラリをアップロードしなくても、いつも決まったURLから呼び出せるのでとても便利です。

しかもホストしているのはGoogleで、次のような主要なJavaScript ライブラリが使えます。

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library（YUI）

Google がホストしてるのに YUI も使えるところがステキですね。

使い方は、

    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("jquery", "1.3.1");
        google.load("jqueryui", "1.5.3");
        google.load("prototype", "1.6.0.3");
        google.load("scriptaculous", "1.8.2");
        google.load("mootools", "1.2.1");
        google.load("dojo", "1.2.3");
        google.load("swfobject", "2.1");
        google.load("yui", "2.6.0");
    </script>

のようにするだけ。
google.load() の二つ目の引数は各ライブラリのバージョンです。

バージョンの細かい指定方法はこのへんに詳しく書いてあります。

リストのマーカーを画像にしたいとき、list-style-imageを使うと位置がうまくそろわない場合が多いので、背景にイメージを敷いてpadding-left を少し広く空けて代用したりします。

そんなときに困るのが、リストの折り返し。

リストの中身が折り返したとき、マーカーの下に折り返したテキストが入り込んでしまいます。

これを回避するには、「display: inline-block;」。

liタグに指定します。

携帯にはユニークなIDがふられている。それを携帯端末IDというらしい。

ID・パスワードなどの入力の手間を省くためにこの携帯端末IDが使われることがあるらしい。

pearのNet_UserAgent_Mobileを使うと簡単に取得できるらしい。
また、OpenPNEやMyNetsなどのSNSアプリの「簡単ログイン」の機能にも利用されており、KtaiID.php（webapp/lib/OpenPNE/KtaiID.php）に携帯端末ID取得のためのclassが定義されている。

ex)
（usagi/webapp/modules/qrentry/do/qr_insert_c_member.php）

//簡単ログインを判定
if ($_REQUEST['easy_access']) {
    $easy_access_id = OpenPNE_KtaiID::getID();
    if (!$easy_access_id) {
        $errors[] = '携帯の個体識別番号を取得できませんでした簡単ログインのチェックを外して登録してください。';
    } else {
        $prof['easy_access_id'] = $easy_access_id;
    }
}

ウェブ（PCの）で通用してもケータイで通用しない技術ってあるじゃないですか。
特に日本のケータイの仕様（？）は「ガラパゴス」とか言われて独特の進化をしている訳です。

ここ最近はケータイ向けのサイトを作っていないので最近の動向はよくわからないですが、キャリアや機種によって使える使える技術が違ったり、見え方が違ったりするのって制作側からすると設計や検証にコストがかかりすぎると思うんです。

でも、なぜかクライアントは「ケータイサイトは安い」という感覚があるらしく、「ケータイだから」という理由で予算をとってくれない場合もあったりなかったり・・・

ウェブを作る立場から言うと、「ウェブの技術をそのままケータイでも使いたい。だって、新しくいろいろ覚えるの、面倒なんだもん。」が本音です。表示できる画像形式が違ったり、画面サイズが違うことを意識しなければならないって本当に萎えます。なんならケータイ向けの方が高くてもいいんじゃないかとさえ思います。

だってケータイ向けなら「どこでも見られる」とか「普及率」とかのメリットがあるじゃないですか。
なので、PC向けサイトよりたくさんオカネください。ブログとかCMSとかにするならなおのこと面倒が多いです。だからたくさんオカネくれませんか。

それがかなわないなら、閉鎖的な感じの日本のケータイよりも、iPhoneとかAndroidとかに期待したいのが本音です。Flashが使えなかったりまだ発展途上の感はありますが、PC向けのサイトがそのまま表示できたり、javascriptが動いたりと、制作側から見た感じではラクができるのではないかと思います。

発売されるケータイがすべてAndroid端末なら、webの開発コストはかなり押さえられるようになるのではないでしょうか。

coreserverではphpデフォルトでsafemodeがオンになっているので、wordpress（に限らずphpを使うアプリ-concrete5とか-）を動作させるとエラーが出たりします。

とても便利なプラグインの自動アップグレードも、coreserverのデフォルトの状態だと、次のようなエラーが出て使えません。

Warning: touch() [function.touch]: SAFE MODE Restriction in effect. The script whose uid is YOURUID is not allowed to access /tmp owned by uid 0 in /virtual/USERID/public_html/wp-admin/includes/file.php on line 174

Warning: fileowner() [function.fileowner]: SAFE MODE Restriction in effect. The script whose uid is YOURUID is not allowed to access /tmp owned by uid 0 in /virtual/USERID/public_html/wp-admin/includes/file.php on line 628

Warning: fileowner() [function.fileowner]: stat failed for /tmp/xxxxxxxxxx in /virtual/USERID/public_html/wp-admin/includes/file.php on line 628

Warning: unlink() [function.unlink]: SAFE MODE Restriction in effect. The script whose uid is YOURUID is not allowed to access /tmp owned by uid 0 in /virtual/USERID/public_html/wp-admin/includes/file.php on line 630

これを回避するにはwp-adminの直下に次のような内容の.htaccessを置くとよい

<Files update.php>
AddHandler application/x-httpd-phpcgi .php
</Files>

とても参考になりました。

WordPressでブログを作ったらまずやる26項目―SEO・アクセスアップのためのカスタマイズ

とりあえず、ping先と「あわせて読みたい」をやってみました。

ケータイサイトの価値を考える

ケータイサイトはどこへでも持ち歩いてもらえる支店・支社である

PC用のサイトと比べて、ケータイ用のサイトのメリットは、

1. 場所を選ばない
   ケータイの電波が入る場所であれば、電車の中でもトイレの中でもアクセスできる。
   裏を返せば、トイレの中でも商品やサービスを売り込むことができるということ。
2. 時間を選ばない
   PCと異なり、ケータイは常に電源を入れておくもの。ちょっとあいた時間にさっとアクセスできる。
   隙間の時間に手軽にアクセスできる。
3. ターゲットの母数が多い
   ケータイはPCよりも普及している。「機器がないと閲覧できない」というインターネットの特性上、端末の普及の度合いが大きい方が有利になる。

閲覧する環境によって見え方が変わることを意識する

閲覧する側の環境は、制作する側からコントロールできない

OS、ブラウザ、画面解像度はもちろん、JavaScriptをオフにしてあったり、cssを無効にしてある可能性もある

多くの環境に対応できるようにデザインするのか、特定の環境だけに対応できればよいのかを考える

これまでは「すべての環境で全く同じように表示できる方がよい」という風潮が強かったが、最近は「環境が変われば見え方が変わってあたりまえ」という考え方も増えてきているようにみえる

様々なテクニックを使えば多くの環境で同じように表示することも可能だが、費用対効果を考えるとそこまでする必要があるのか疑問もある

画像やFlashを使えば多くの環境で同じように表示することが可能だが、検索性は著しく低下する傾向にある

–> 手間を考えると細部にこだわらないほうがよさそう
–> 多少のズレを吸収できるようなデザインを心がける
–> こだわりを妥協できない場合は画像やFlashを使用するが、使用した部分については代替テキスト等でテキスト情報の補完が必要になりそう

画面サイズからはみ出るコンテンツ

閲覧する環境がコントロールできないため、画面サイズも予測できない

ページを開いたときに、画面からはみ出るコンテンツがある可能性がある

–> どうしても見せたいコンテンツはページ上部に置くとユーザの目に触れやすくなる

人だけではなく、コンピュータにもわかるようにデザインする

テキストはできるだけ生かす

人にだけわかるようにすればいいならDTPデータや画像データをそのまま張り付ければよい

コンピュータは画像になった文字を判別できない

検索（インターネットの検索も文書内の検索も）は文字がテキストデータになっていて初めて可能

–> テキストはできるだけ生かした方がウェブの特性「検索性の良さ」を生かすことができる

HTMLの構造を意識する

視覚的な強調だけでなく、文書構造に沿ったタグをつける（正しいマークアップ）

マークアップをした後、それぞれに視覚的デザインを施すとよい

–> マークアップを正しく行うと、コンピュータにも「何が見出しで何が本文なのか」といったことがわかるようになる
–> そのページの主題が何かがわかりやすくなる

結構前から思ってたんですが、イラストレータで素材を作ってそのままウェブ用に書き出すと、サイズがおかしくなることがありませんか？

分かりづらいですね。。。

えと、たとえば30px四方の正方形を作ったとして、それをスライスして書き出すと31pxになってたりするってことです。

どうしてそうなるのかわからなくて、いつもイラストレータでサイズを調整しなおして書き出してました。

普段はFireworksで作業してるのでこういう事は全然ないのですが、DTPの人がデザインしてくれた素材とかの扱いにいつも困ってたんです。

で、調べてみたらありました。こんなエントリ。
「ピクセル境界を使用」にはチェックを入れていたし、「単位」も「ピクセル」にしていたのですが、盲点だったのは「表示 > ピクセルプレビュー」にチェックを入れることでした。

ここにチェックを入れると思い通りのサイズに書き出しできるようになりました。
ありがたい。