copain blogs

ページングというのは以下のようなものです。

1　2　3　4　5　6　7　8　9　10　»

アマゾンやグーグルなどでおなじみではないでしょうか。ページがたくさんある場合などでよく使われます。
ただ、数字番号同士が近すぎると間違って選んでしまったりして、ちょっとイライラするので改良して見ました。

こんな感じ

(more…)

会社の周りで食事をしたらGoogleマップに書き込むルールを社内で始めました。
追記：Google マイマップ EXPOにエントリーさせていただきました。
(more…)

サンプルはこちら

■構造

・tab
一番外のボックス。絶対レイアウトの基準。タブの下線をボーター下で描画。

・ul
ボックスの左端でタブのボーダーを描画。
絶対位置で下に1pxずらしてtabボックスに重ねている。

・li
タブの上と左のラインをボーダーで描画。

・a
IEでli要素のhoverが効かないのでliボックスと同じ面積にした。a:hoverで背景色を変えている。

・menu_op
タブの開いたときを表現。tabボックスの下線を打ち消すため白いボーダーで下ラインを描画。

以下のようなメニューがあるとする

HTML
<ul><li><a href=”menu1.html” class=”menu1″>メニュー1</a></li><li><a href=”menu2.html” class=”menu2″>メニュー2</a></li><li><a href=”menu3″ class=”menu3″>メニュー3</a></li><li><a href=”menu4.html” class=”menu4″>メニュー4</a></li></ul>

スタイルシートはこうする（数字は画像サイズに応じて変更）

CSS
.menu1{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}
.menu2{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu3{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0 ; height:0px; width:80px; overflow:hidden; float:left;}
.menu4{background:#fff url(../images/ファイル名.jpg) no-repeat; line-height:18px; padding:34px 0 0; height:0px; width:80px; overflow:hidden; float:left;}

ポイント
・表示エリア　高さを0pxにしてパディングで高さの表示エリアを広げる
・文字を隠す　ライン高をあげて表示エリアの下側に隠すようにする
・印刷　背景を印刷しない設定にしてあると文字が消えてしまうのでCSSの設定を media=”screen”にする

以上

Viewpointのセミナーに久しぶりに参加して来ました。

Viewpointは無料で製作できます。（コンテンツ上に透かしなどの表示もありません。）
プラグインが必要ですが、インストールすればMac、Windowsともに閲覧が可能です。
この技術の特徴はブラウザ上に３Dモデルを浮かせたり
ブラウザを飛び出して画面全体に表示させることが出来ます。（使いどころを考えるべきですが）

実際どんなものが必要なのか？

３Dのモデルデータが必要です。
具体的には拡張子objであればよいです。
これは殆どの３Dソフトが書き出しに対応しているので素材を作るのはどのソフトでもOK。

以下画面つき解説です。
(more…)

以下のような目安で採用基準を考えます。

■テンプレート
ページレイアウトで共通化したいものが2つ以上ある場合

・オプション領域
表示、非表示を切り替えたい場合

・オプション編集領域
上記の表示部分を編集可能にしておきたい場合

・リピート領域
繰り返されるリストがある、もしくは繰り返されるパーツがある場合
参照:Dreamweaver デベロッパーセンター/オプション領域を活用したコンテンツレイアウトのバリエーション設定

・リピートテーブル
テーブルで繰り返したいものがある場合
主にスタイルを繰り返したい場合に使う。
テーブルのデータ部分は実データが入れられるよう編集可能領域にしておく。

尚、Spryでxmlから読み込む場合adobeのページを参考

「Ajax したい！」Web デザイナーのための Spry 集中講座
第一回：Spry を使ってXML をWeb ページに読み込む
第三回：Dreamweaver CS3 でコードを一行も書かずに「Ajax する」方法

・テンプレート変数
テンプレート内で同じ値や類似した値が複数ある場合
カテゴリーごとにカラーや表示部分の違う体裁やメニュー部分に使える。

・ネストされたテンプレート
テンプレートを元にさらに細分化してテンプレートを作りたい場合
2階層目、3階層目のカテゴリページ、
　　段階的な手続き式の登録画面などに適用
テンプレート機能自体、処理が重たいので適宜使う。

※テンプレート式を駆使すればさらに柔軟に表示を制御出来そう。
ちなみにテンプレート内の要素はテンプレート式で記述されている。
オプション領域開始タグなら<!– TemplateBeginIf cond=”photo” –> とか。

テンプレート内で変更して適用ページに反映させるには
・修正＞テンプレート＞現在のページの更新
もしくは
・修正＞テンプレート＞サイト全体の更新
を選んで更新場所を適宜選択して開始ボタンを押す。

■ ライブラリ
一括更新できるスニペットと考えておけばよいかも
ライブラリのパネルはフォルダ管理できないので作成する数を抑える。

リンクはライブラリからの階層を見る（リンクの自動更新、パスの変更をやってくれない）ので
リンクが入っている場合はパスに注意して使う。
サイト全体を通して共通で使いたいものに適用するのが吉。
テンプレートのように編集可能領域や変数を使って細かくいじることが出来ない。

■スニペット
頻度の高いコードを登録しておく
ライブラリから自動変更の機能を抜いたようなもの

参考サイト：
Dreamweaver Templateの使い方
【実例を交えて解説。非常によくまとまっていてオススメです】

Adobe
Dreamweaver MX テンプレートを使った一貫性のある web デザイン

ケイムズ／Nucleus・MODx・UltraVNCの話題
Dreamweaverのテンプレート式・タグの一覧

Web制作/Dreamweaver- zkdesign/Archives
テンプレート機能を使いこなす
テンプレートタグリファレンス

忘れそうなので備忘録です。

での標準モードでレンダリングを前提。

サンプルはこちら

基本は絶対配置で行う。
全体のレイアウトが左寄せでは問題ないが、
中央寄せの場合
親ボックス　position: relative;
子ボックス　position: absolute;
のようにしていると、IE6でリサイズしたときにずれてしまう。

ココでIE6用ハックを使い
* html　親ボックス　position: relative;
* html　子ボックス　position: static;
にするとずれない。

あとはピクセル単位の細かい調整が必要。

php-4.4.7がリリースされていました。
実はこの前のバージョンに嫌な部分のバグがありました。

「86_64環境でgdがインストールされない」というバグです。
どうやってもgdが入りません。
configureファイルを書き換えれば何とかなりますが、非常に気持ちが悪いものです。
どうやらphp5でもこのバグがあるようです。
このバグを知って解決方法に至るまで結構かかりました。

「また解決しないよな」とあまり期待しないでインストールしてみましたが、見事に治っていてうれしかったです。
何も指定せずにgdが入りました。

--with-gd --with-jpeg --with-png これだけです。

秘密ですが、あまり仕事でgdは使いません。

いつのまにかXen-3.1がリリースされていました。
今まで、仕事でXen-3.0.3を使っていたのでちょっと期待していました。

というのも、Xen-3.0.3はDomain0のCD-ROMが使えなくなるバグがあったようです。
Xen-3.0.4にバージョンアップすれば解決するのですが、万が一Xenが動かなくなると仕事に支障をきたすのであきらめていました。

で、ちょっと時間ができたのでチャレンジしてみました。
慎重にやればなんてことなくできたでしょう。

注意点として、「完全にXenを止めてから作業を行う」。
不完全にXenを停止したようで、fsckを何度もやるはめになりました。
というのも、/etc/xen/scriipts/network-bridgeを書き換えてNIC3枚差しの設定にしていたのです。
バージョンアップするとnetwork-bridgeが上書きされたようです。
そしてDomainUが停止しなくなりました。
network-bridgeなどを書き換えた人は完全にXenを停止してからでないと危険です。

では、基本的な作業手順です。

[bash]tar xen-3.1.0-install-x86_64.tgz
[bash]cd dist
[bash]./install.sh
[bash]cd /lib/modules
[bash]depmod 2.6.18-xen
[bash]mkinitrd /boot/initrd-2.6.18-xen.img 2.6.18-xen

適宜domainUの設定ファイルを書き換える。
適宜domainUの/lib/module/2.6.18-xenへファイルをコピーする。
適宜grub.conf書き換えてマシンを再起動する。

で終わり。
基本的なバージョンアップではDomainUを停止しなくてもよさそうですね。

Xen-3.0からXen-3.1へバージョンアップして特に変わったことはありませんが、XMLで設定できる点がよさそうです。
XenのAPIが変わったらしいですが、よくわかりません。
安定動作するようになったのですが、今まで安定していたのでよくわかりません。
おそらく今後何か良いことがあるでしょう。
そういえばソースに含まれるリリースノートはなぜかXen-3.0と表記されていたような気がします。

サンプルです。

サンプルでカードをクリックすると...

ちょっと息抜きしてみました。
経由ポイントのcontrolを追加してランダム値をかませてるので
ランダムに飛んでいきます。
カードの絵をブーメランにしてもいいですね。

参考：Yahoo! UI Library: Animation

Google AJAX Feed API + flash "RSS Reader Sample"

ゴールデンウィークを利用して作ってみました。
あまり突っ込んでaction script触ってなかったので
基本的なところから調べて試行錯誤しました。
結構いい勉強になりました。

●作業記録メモ
google feed apiからentry.title,entry.linkなど
読み込みたいデータをjavascript側から送って、
flash側のExternalInterface.callで受け取ったデータを
cssで整形してテキストエリアに表示。

履歴も残したかったのでflashのshared objectに記憶させています。

時間があればentry.contentでのHTML表示を調整したい。
fontタグを持ったフィードだとflashのtextfieldで
HTML読み込みをOKにするとfont size=3は3pxで解釈されちゃうので
sizeとかを予め削除したり、履歴も個別に削除させたり。

*データの取り回しがよく分からなかったなぁ。
*もうちょっとシンプルな例で試したほうが分かりやすかったかも。

以下、参考にさせていただきました。
第35回　FlashムービーとJavaScriptを連携させてみよう：ITpro:
Google AJAX Feed API: