XGAウェブサイトの横幅と背景を工夫、太いボーダー構成

Safariバージョン 5.1.3 (7534.53.10)にしたら、ブックマークツールバーの横幅が広がった。一つ一つの幅が若干広がってクリックしやすくなったのだが、このブックマークの幅でウィンドウサイズを測っていたので、困ったのもだ。数を減らして、1024ピクセルになるように調整した。

ウェブサイトの幅は長いことXGAベースなのだが、最近1024pixelに幅収まらないウェブサイトデザインも見かける。どういった経緯から何pixelをベースに考えてデザインされているのかは興味深いところであるが、XGAで問題ないように思ってしまう。

しかし、横幅が広いディスプレイでフルスクリーンで閲覧されることを考えるとちょっとXGAだとショボく見えることも否めない。その時のためにファーストビューの背景を工夫してXGAでもそれ以上でも見栄えを損なわないデザインが必要だと感じるが、bodyがはみ出て横スクロールが出現するのはまだまだ頂けないと思う。

  1. ファーストビュー背景をダイナミックにする
  2. ウィンドウ幅いっぱいに広がるボーダー領域の工夫

の対応で考えるのが普通の対応であるかと。横に広がる罫線や太いボーダーの構成だと見栄えが見劣りしないことも印象で感じる。

Opera miniスマートフォンでのPCサイト拡大表示機能

Android携帯では標準のブラウザを使うのが普通ですが、Opera miniも遜色なく使えるブラウザです。何が驚いたかと言えば、PCサイトの混み合っているリンク部分をタップしたところ該当リンク先に飛ぶのではなく、拡大表示されたのです。

Opera mini

2つ以上のリンクをクリックすると表示が狭かったんだろうなってことで、その領域を拡大してくれる。拡大された表示から的確なリンクをタップできる。これだとホントPCサイトも難なくスマホで閲覧できる環境となります。ガラケーからの携帯サイトの名残もあるのでスマホサイトが必要な感じにはなっていますが、そのサイト規模やジャンルによってはiPhoneやAndroidでも通常のPCサイトを見せ、スマートフォンからのアクセスにも配慮するviewpointやアドレスバーの隠しなどその程度でもOpera miniであれば十分と感じました。

AppleはiPhoneを作っておいてiPhoneサイトを別途用意しない姿勢を貫いていますが、だんだんその考えもブラウザの進化と共に顕在化していきている気がします。スマホサイトだとやはり情報は削ぎ落とされるし、いつものPCレイアウトであればどこにメニューがあってどこから見ていく、ログインしていく、お気に入りのコーナー等も一元化されてユーザーにとっては利便性がPCサイトであることで逆に向上することもあるのではと考えるようにもなってきました。

PCサイトとスマートフォン表示で切り替えるjavascriptやPHPが用意されているサイトは多いですが、ユーザーによってはすぐにPCサイト表示にして閲覧するエンドユーザーも多く、一番のネックは「スマホサイトだと情報が少ないという理由」が多いようです。確かにOpera miniのようなユーザービリティがあれば、情報が多いページを見たいですし、Xi、WiMAX、ウルトラWi-Fiなど各キャリアの高速通信も日に日に増しているのでページ容量を軽量化を優先するよりもPCサイトの情報量と整理が求められるのかもと考えるようになってきた。

近い将来、AndroidブラウザもiPhoneのSafariもこのOpera miniのような二重クリックによる拡大表示は標準機能としてブラウザに搭載されそうだ。

はてなブックマーク人気記事ブックマーク数表示ブログパーツ設置

よく見かける、はてなブックマーク数が表示される自分のブログに設置する、どれだけどの記事にはてなブックマークされているのかサイドバーなどに設置するブログパーツをどうやって設置するのか検索してたんですが、なかなか見つからなかった。

やっと見つかったので、エントリーです。

はてなブックマーク
ブログパーツを設置してみましょう

はてブの機能としては、3つあって

  1. コメントを表示
  2. ブックマーク数を表示
  3. サイドバーに人気記事を表示

まとめたブログでも、人気記事のサイドバーを設置してみました。

Javascriptで表示する機能になっている。ブログのURLを入力して送信するだけで、コードが出てくるので、それを貼り付けるだけでOKで、横幅のサイズを150ピクセルなど選ぶことができる。

WEBサイトのキャプチャ画像サムネイル生成APIサービス

WEBサイトのキャプチャ画像を取得できるAPIはいろいろなところに
あると思いますが、どうにも使ってみて画像が生成されるタイミングが
違うというかリアルタイムでないものも多いです。

サイトのサムネイルキャプチャ画像は、サイトのパッと見が一目で
わかるためリンクの飛び先を認識した状態で行くので、理解が早いというか
どんなサイトかなと、テキストリンクから移動するのとはちょっと
ニュアンスが良かったりしますよね。

第一位
HeartRails Capture | サムネイル画像

このサイトは、どうやら自動で生成するのではなく、
手動でその場で取得しにいくので、他のサービスより
確実というかリアルタイムであることは確かです。
システムで組み込んで生成していくということはできないかも
しれませんが、ネット画面キャプチャサムネイル画像を
サクッと作りたい時に便利です。
画像サイズや、シャドウ、角丸なんかも選べます。
同時に生成されるソースコードには、そのサイトのtitleタグを
含んだaタグ、imgタグ付きのソースが生成されるのは嬉しい。

↓このような画像とaタグimgタグ込みのソースを簡単生成
縦長が意外と上手く使うと格好良くまとまる。
http://capture.heartrails.com/

↓貼り付け用タグのソースはこんな感じで提供される。
titleタグをimgタグに拾ってくれて、altにはURLが入っている。

<a href=”http://capture.heartrails.com/”><img title=”HeartRails Capture | サムネイル画像/PDF ファイル作成サービス” src=”http://capture.heartrails.com/free?http://capture.heartrails.com/” alt=”http://capture.heartrails.com/” width=”200″ height=”300″ /></a>

第二位
SimpleAPI

きれいなGIF画像が魅力的なSimpleAPIさん。
数分で画像が生成されるようですが、調子の良い時と
いくら待ってもキャプチャ画像が生成されない時との
ムラがありますね。リアルタイム性にはかけてしまいます。
今では、バッチ処理で随時生成しているようですね。

第三位
MozShot

かなり古くからあるキャプチャ画像のサイトで、
リンク集でサムネイルを生成するプログラムなんかで
自動で表示させるためによく使われてますね。
正方形で良い感じに角丸シャドウ付きで生成されるのですが、
直接アクセスしてURL入れて生成しても、Now Printing…
いったいいつになったら生成されるのって時がある。

リンク集なんかでは、キレイに全部生成されてたりもするけど
どうも確実性がない感じも。自動で組む場合にはMozShotが一番
いいと思いますが。 手動で1つスグ欲しい時には不向きかも。

index.htmlとindex.php優先順位.htaccess

エックスサーバーが、index.htmlよりindex.phpが優位になった。というより元々だったかもしれないが、記憶上.htmlの方が最初の頃は優位だった気がする。

.htaccessで優先順位を意図的に変えることができる。
index.htmlとindex.phpが 同一階層にある場合、階層○○○/では
どちらを使うかという優先順位をサーバーのデフォルトと変更できる。

index.html 優位の場合

DirectoryIndex index.html index.php

index.php 優位の場合

DirectoryIndex index.php index.html

index.cgiなどいろいろあれば、スペース後にどんどん優先順位順に繋げて
記述すれば、その順番でディレクトリ頭の優先ページを指定できる。