多数のリストを効果的に表示するUI（たたき上げVer）

サイト内で多数の項目をリスト表示したい時に使えそうなUIを考えた。
このUIは実際に使う予定。
今回は考え方だけメモっということで。

０、事前事項
まず、リストの項目は20個程度あって、それぞれ4つのカテゴリに分けられてます。
それをいかに効果的に見栄えを損なわず表示できるかが、今回のUIの課題です。


１、通常時
1.jpg

まず、上の画像は通常時のもの。
通常の状態ではoverflow:hidden;がかけられ、スクロールバーは表示されていません。
カテゴリでソートされていないので、全ての項目が表示されています。

ソートはphpなどで処理するのではなく、事前に全て読み込み、クラス名でカテゴリごとに名前をつけておきます。
そのクラス名をもとにjavascriptで表示／非表示を切り替えると言うわけです。


More...

Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

webサイトのPHP、Javascript（Ajaxも含む）による効率化

webサイトをHTML（CSSも含む）だけで制作することはかなり減ってきたんじゃないかと思う。
もちろんHTMLだけで作ることが悪い訳じゃないし、規模によってはそれで十分なこともあるので全て効率化することが良いとはかぎらないけれど、制作後運用していくことを考えれば、効率化しておいて損はしない。

PHPで効率化

PHPでは主にサーバー側でデータの管理やコーディングの手間などを省く効率化が可能

サイト内で共通の項目は変数で共通化する。
$URL = "http://abc.jp/";
などとし、<?php echo $URL; ?>/kaisou/index.phpのように流用可能なようにする。
こうすることで、URLの変更にも即座に対応できるし、ページごとに階層を気にする必要もなくなる。
HTMLとPHPの分離
HTMLの<body>内に直接プログラミングを行うのではなく、関数やクラスを利用して、htmlとは分離する。
分離する際に、共通化できるものは共通化する。
HTMLの各セクション（ヘッター・ナビゲーション・フッター）などの別ファイル化する。
各ページ共通であるセクションを別ファイル化し、１つのファイルにすることで、ナビゲーション変更などの時に全ページ修正の必要がなくなる。
ページごとに現在どのカテゴリのページにいるのか、パンくずとしてナビゲーションを利用している場合は「サイト内のページサマリーのデータベース化」からどのカテゴリに属するのかをif文などで判別させると良い
サイト内のページサマリーのデータベース化
サイト内のページサマリーとは以下のようなもの

・ページ個別のID
・ページURL
・タイトル
・キーワード
・概要
・どのカテゴリに属するコンテンツなのか

このような情報をまとめておくことで、サイトマップ・サイトマップXMLの自動生成、サマリー情報の一元管理を行え、管理を効率化することができる。
連続するデータの一元データ化
サイト内の連続するデータ、たとえばお知らせや募集要項等、決まったフォーマットのあるものはページサマリー同様、データベース化（データベースでなくともcsvや配列ファイル）することで管理しやすく、後々CMSとして管理できるようにすることも可能になる

Javascriptで効率化

Javascript（Ajaxフレームワークを利用しても良い）ではソースコードの見やすさを維持したままインタラクティブな表現を可能にする

Javascriptでの画像ボタンのロールオーバー
CSSでの画像置換がロールオーバーでよく使われているが、画像名に「_n」「_o」などを付け、class="rollover"をつけることでイベントハンドラを利用しない形でロールオーバーを実現することが可能
ものによってはプリーロードが必要だろうが、現在の回線速度であればほぼ必要ない。
yuga.jsやMJLなどで実現可能
Javascriptでの_blankを利用しない別ウィンドウの表示
標準に準拠したいが別ウィンドウで表示した場合や外部へのリンクを行う際に離脱の原因になってしまう場合がある、このようなときに便利なのがJavascriptを利用した別ウィンドウ表示である。
yuga.jsで実現可能

その他webサイトに合った内容をJavascriptやPHPで効率化することによって作業時間が削減でき、SEOにも効果があったり、ユーザーの利便性を向上させることができる。
（ここには記していないが、tipsやタブ表示などユーザーへの情報提供を補助するためにjavascriptを利用することは良い利用方法である。）

と雑に書きましたが、メモとして残しておきます。

Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

iPhoneってどうなの？実際に使ってみた感想

Ci080908140309.jpg

実は一週間ほど前にiPhone（white 16GB）を契約してきました。
値段も月額で考えるとauで定額にしてるのと変わらないが、本体は80,000するからねｗ
実際高いよ。そこまでして欲しくないという人は買わずにtouchで遊んだ方が全然安い。
あと、iPhone一機で携帯としてつかいたいって人は今の携帯よりつかいにくいってのを覚悟した方がいいかな。

でなんでそれでも買ったのかというと、
ただの流行で買った訳ではなく、ちゃんと目的を持って利用するために。

で、目的というのは・・・
  • いつでもニュースをチェック（PCサイトも含む）
  • インターネットをいつでも見られる（PCサイトも含む）
  • ブラウザがAjaxに対応してる。
  • 音楽・動画・画像がさくさく見聴きできる
  • 自分で作ったWebアプリケーションが見られる
  • 自分でアプリケーションが作れる
  • ちょっとしたゲーム・あそびができる
  • スケジュール・タスクが確認できる

通話・メール
ぶっちゃけ通話とメール機能は期待してないし、ほとんど使ってません。
iPhoneはサブ機として、通話やメールはメインのau機種を使ってます。

通話は音は良いけど回線がauに比べると貧弱。
メールは文字入力・変換に難があるので長文を送るのは辛い。


ブラウジングに関しては・・・
safariの表示は若干もたつくときがあるけど許せるレベル。
iPhone自体の文字入力・変換が他の携帯と比べてかなり劣る。
Flashに対応してない。
PCサイトのブラウジングは拡大・縮小スクロールがスムーズにできるので良い。


アプリ
無料のものから有料のものまでいろいろあるけど個人的には満足。

音楽・動画・画像
素人感覚だけど音質は良い。
映像もまあまあ。
スピーカーがついてるからイヤホンいらず。（充電の消費が激しい）
画像のスライドショーのさくさくぺらぺら感は他には無いほど最高。（拡大・縮小もなめらか）


正直つかいにくい部分がだいぶあるのは確か。
着信音がデフォルトで入ってるのかし使えなかったり、コピーアンドペーストができなかったり、充電が一日で無くなったりカメラにズーム機能がなかったりと・・・
つかいにくい点はアップデートで解決してくれることを祈ってる。

※その他のiPhoneレビューは価格.comを参考にどうぞ。


それでも・・・
個人的には満足してる。
目的としているブラウジングは国産携帯のフルブラウザやPDAより遙かに使いやすい。
普通にネット見るだけならモバイルPCはいらなくなる。
その他見た目にも満足してるし、契約したことを後悔はしていない。
ようは、自分が満足できればいいので「ばっかじゃねえのｗｗｗ」みたいな批判はお断りですｗ







Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

Iphoneから投稿してみる

phone のテスト投稿。
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

ブログの移転・統合とデザインリニューアル

Design RemixとDesign Remix SEEDを今回新しいブログに移転させました。
URLは同様の「http://d-remix.net/」です。


Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

携帯で絵文字を表示する方法

最近携帯サイト（自分の携帯だけ対象　笑）をつくってるんだけど、そこで覚えたメモ。

１，絵文字の表示
<img src="" alt="" localsrc="絵文字番号(又は絵文字名)" />
※絵文字一覧

２、モバイル向けXHTML仕様
XHTML仕様


Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

さらに高機能（へなちょこ）になった偽Mac OS X

偽Macがさらに高機能になりました。
スタイルをちょこっと変更してランチャーがが動くようになりました。
動きのぎこちなさはご愛敬ということで。

ちゃんとSafariもついています。検索だってできます。でもメニューは装飾なのでクリックしないでください。

さあ！
偽Macはコチラ！！（ちなみにIE系は対象外です。）

-----------------------------------------------------------------------------------------
過去分

一年前に作ったwebデスクトップをまたいじりはじめて偽Macを作ってみた。
（まだ作り途中・・・）

偽Macはコチラ！！（ちなみにIE系は対象外です。）

というかMacもってないからデザインがわからない（笑）
だれかキャプチャくれたらうれしいな～～。

追記：中のパスが間違ってて見られなくなってました。

Page Top

Flashのz-indexを操作する方法

プルダウンメニューを作る際にFlashとかぶってしまう場合がある。
なぜか通常の状態だとz-indexを操作してもFlashは背面に移動しない。

そこで、Flashの位置を背面に移動する方法として以下の内容をobjectタグ内に追加する。


<embed src="xxxx.swf" wmode="transparent" />
<param name="wmode" value="transparent"/>

これでも背面に移動しない場合はobjectタグのz-indexをマイナス等していじってみると良い。
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

prototype.jsでフォーカス時に入力フォームを拡大する

下記のソースを読み込むだけでサンプルのようなフォームにすることができます。
CSSは任意で設定してください。
（JSは適当に書いたのでもっと効率的な書き方があったらコメントで教えてください。）

フォームサンプル 
window.onload = function(){
	var Elements = document.getElementsByTagName("input");
	for(var i = 0; i < Elements.length; i++){

		if(Elements[i].type == "text"){
			Event.observe( Elements[i], 'focus', BgChenge );
			Event.observe( Elements[i], 'blur', BackBgChenge );
		}

	}
	
	Elements = document.getElementsByTagName("textarea");
	for(var i = 0; i < Elements.length; i++){

		Event.observe( Elements[i], 'focus', TxBgChenge );
		Event.observe( Elements[i], 'blur', TxBackBgChenge );	
	}

}

function BgChenge(){
	$(this).style.border = "2px solid #888";
	$(this).style.padding = "10px";
	$(this).style.fontSize = "150%";
	$(this).style.fontWeight = "600";
	$(this).style.position = "relative";
	$(this).style.margin = "-10px 0 -10px 0";

}
function BackBgChenge(){
	$(this).style.border = "1px solid #bbb";
	$(this).style.padding = "3px";
	$(this).style.fontSize = "110%";
	$(this).style.fontWeight = "400";
	$(this).style.position = "static";
	$(this).style.margin = "0";

}
function TxBgChenge(){
	$(this).style.border = "2px solid #888";
	$(this).style.padding = "10px";
	$(this).style.fontSize = "130%";
	$(this).style.fontWeight = "600";
	$(this).style.position = "relative";
	$(this).style.margin = "-8px 0 -8px 0";

}
function TxBackBgChenge(){
	$(this).style.border = "1px solid #bbb";
	$(this).style.padding = "3px";
	$(this).style.fontSize = "110%";
	$(this).style.fontWeight = "400";
	$(this).style.position = "static";
	$(this).style.margin = "0";

}
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

今のキモチ

kimochi.gif 今日は疲れた。

明日も頑張る。
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top