[XHTML]WebサイトのOOP

by

Webサイトはオブジェクトの集合体。
CSSもオブジェクト指向。

オブジェクトの集合なら、命名規則やデザインパターン作っておけば再利用はしやすくなる筈。
WebSiteでもOOP（Object Oriented Programming）的なこと出来る？
…となんとなく考えた事を適当に羅列してるメモです。まとまり皆無。思考ダダ漏れ注意。

Class

  1. Header -> #header
  2. Sidebar(Menu) -> #sidebar
  3. Contents -> #contents,#wrapper,#container
  4. Form ->#form,#contact
  5. Fotoer ->#footer

Method

  • List (UL,OL,DL) -> #menu,#navi,#navigation,#globalnavi
  • Headering Title (H1～H6) -> #page-title,#sitename,#content-title
  • Text Section -> div.post , div.section , div.entry
  • Buttons (input type=”button”,button tag, block style Ancher)　-> #submit,#reset
  • Input (form elements)
  • Copyright (address) -> #copyright
  • Image (floating style, ancher style)
  • Table

Property

  • Inlines (strong,em,tt,code…etc)
  • Blocks (div,p,address,blockquote…etc)
  • String (plain text)

4BOXとか5BOXとかのレイアウトテンプレートは中身が空のクラス、つまりこんな状態です。

class Header {
}

続きを読む

Trac & XAMPP & Dreamweaver & Aptana & SVN

by

ローカルにTrac入れたりDreamweaverにSVNエクステンション入れたりしたメモ。
ついでにAptanaStudio1.2も入れてみた。（PC変えたから新規）

Tracのローカルインストール（windows）

Tracはメジャーかつフリーなプロジェクト管理ツール。
Trac？なんぞそれ→WordPressのTrac
タスク管理だけならxfy Plannerもよさげ（主に見た目が）だけど、
バージョン管理が便利だと思う。あとチケット機能も。
こういうのは自前で入れるよりGoogleCodeとかSourceForge.jpとか使う方が楽なので
公開しても問題ないものならサービス利用してもいい。

既にXAMPPがインストール済みでも後からTrackを入れることは出来た。
Tracのセルフインスコは果てしなく面倒くさそうなので迷わずTrac Lightningを選択する。

ダウンロード後、Trac Lightningのインストーラーを起動してインストールする。
完了したら再起動が必要になるので事前にXAMPP含め他のアプリは止めておくと良い。

続きを読む

SiteTemplate06: PhantomWhite

by

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの黒もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate06

  • 2Columun 2BOX(irregular)
  • ＸＭＬ宣言あり
  • ドキュメントタイプ：XHTML 1.0 Transitional
  • 文字コード：UTF-8

続きを読む

SiteTemplate05: PhantomBlack

by

ちょっとテクニカルなレイアウトのWebサイトテンプレート。
個人サイト或いはブログ向けの２カラム固定幅レイアウト。色違いの白もあります。

半透明の背景、PNG24のタイトル画像、オーバーフローによる擬似フレーム。
ページを開いた際に一時的にコンテンツを隠すカバーと、別ページにジャンプするときにダイアログ出すスクリプトが入れてあります。
フォントサイズ指定はYUIのやつ使ってます。
Divまみれなので変更はしづらいかもしれない。

SiteTemplate05

  • 2Columun 2BOX(irregular)
  • ＸＭＬ宣言あり
  • ドキュメントタイプ：XHTML 1.0 Transitional
  • 文字コード：UTF-8

続きを読む

[js]Ajax.Requestと405 Method Not Allowed

by

405エラーは主に、POSTメソッドの使用が許されていない場所で、POSTメソッドを使用した場合に返される。
さくらインターネット等、CGIやSSI等のダイナミックコンテンツにしかPOSTメソッドが容認されていない場合に、
AjaxでXMLHttpRequestメソッド使った時にタイプがPOSTだと405 Method Not Allowedになる。

CGIでも.htaccessにAddHandler cgi-script .cgi などが記述されておらず、
CGIとして設定されていない状態でPOSTで送ると同じエラーになる。

Apache1.3系は静的ファイルにPOSTが使えない。
Apache2系はPOSTもGETも同じ挙動。

解決策
XMLHttpRequestメソッドのタイプをPOSTからGETに変更

※.htaccessでAddHandler server-parsed .htmlとするのは良くない。

続きを読む

wordpress2.1.3から2.6.3にバージョンアップしてみたメモ

by

このブログの時のように5分では終わらなかったので、適当に作業メモを残すことにした。
2.1.3はMEの一番普及してるバージョン（だと思っている）だから使ってる人も多いのでは無かろうか。
私の場合はゲーム用ブログがそれで、幸いコアには手を入れてないものの、自作テーマとプラグインで結構弄ってある。

思い立ったが吉日。詳しいwordpressのアップグレード方法はCODEXに任せるとして、
とりあえずデータベースをエクスポートした。これは忘れちゃいけない。
プラグインとか使ってる場合はwordpressのとプラグインのテーブルを別にエクスポートする方がいい。
また、サイズが大きくなるとインポートで弾かれる可能性が高まるので、wordpressのテーブルそのものも分割エクスポートしといた方が何かと安全だったりもする。サイズの大きいテーブルは単体エクスポートがオススメ。
エクスポートの前にはテーブルの最適化をやっておく。

面倒臭がって無駄に大きなsqlファイルを作ったりすると、インポートで失敗して涙目になるので
上記のことは気をつけた方がいいな、と今書きながら思った。バックアップで手抜きするのは良くない。

続きを読む

[mootools]slideBox ver1.0をマウスホイールに対応させる

by

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。
デフォルトだと矢印のクリックでスクロールするんだけど、
基本的なスクロール量は表示エリアの高さ（class-wrapper）と同じだから、マウスホイールで微調整したくなる場合もある。

使い方はファイル落とせば分かると思うので省略。

オプションは次の通り

options: {
	className:'slide',			// スライドするエリアのクラス名
	prevArrow:'-previous',		//前にスライドする矢印の接尾語
	nextArrow:'-next',		// 後にスライドする矢印の接尾語
	removeArrows:true,		//先頭と最後にスクロールしたとき矢印消すかどうか
	fadeArrows:false,			// 矢印にフェードエフェクトつけるかどうか
	startOpacity:0.5,			//フェードエフェクトがスタートした時の矢印の透明度
	endOpacity:1,			//フェードエフェクトが終わった時の矢印の透明度
	mouseoverBox:true,		//スライダー内にあるULとLI要素にクラスを追加するかどうか
	startClass:'normal',		// マウスアウト時に追加するクラス名
	endClass:'over',			//マウスエンター時に追加するクラス名
	speed:5,				//スクロールスピード（10:fast 1:slow）
	transition:Fx.Transitions.Quart.easeOut //スクロールのトランジション効果
},

カスタマイズ部分のソースのみ掲載してます。

続きを読む

Immortal Cities：Nile Online

by

NileOnlineは名前の通り古代エジプトが舞台の都市建設シュミレーション。ブラウザだけで遊べる。
ソース元は４亀です。
都市建設シムに目が無いので即登録してみた。

Immortal Cities：Nile Online

ブラウザで遊べるゲームはFlashが多いけど、このゲームはAjaxでした。
使われてるフレームワークはprototypeとscriptaculous、画面はXHTMLなのでAjax勉強中なら参考になることは多いかもしれない。
もしFireFoxで遊ぶならFireBugはOFFの方がいいです。

対応ブラウザはFirefox, Opera, IE8, Safari, Chrome。
色々と足引っ張るIE6はおろか7すら切るとは潔い。

以下、適当な説明。

続きを読む

SlimBBS ver1.0

by

１行レスタイプの掲示板作ってみた。 The RoomさんとこのOneLineBBSを参考にしました。 名前と本文だけなのでチャットっぽい使い方も出来るかもしれない。 ファイルサイズ小さいので携帯でも使えるかもしれない。（ … 続きを読む

[bg]CSS用ドロップシャドウ背景 8ColorPack（パステル系）

by

コンテンツ部分の両端にドロップシャドウを付ける、repeat-y用の背景画像をまとめたパッケージです。 パステル調の８色セット。コンテンツエリアはwidth:900pxです。 サンプルページ フリー素材です。色変更、サイ … 続きを読む

[WP]カスタムフィールドの値で記事を並び替える

by

質問された、カスタムフィールドで設定した値で記事を並び替えて表示するサンプルを晒してみる。
オススメ度とかでランキングっぽいことしたい時に使えるのか・・・な？
やってることはarray_multisortによる多次元配列のソートです。

サンプル関数の使い方は次の通りです。

  1. 記事にソート用のカスタムフィールドを作成
  2. 10進数の半角数字で値を入力
  3. テンプレートの表示したいところにサンプルのコードを入れる

以上。
サンプルソースは用途に応じて適当に変更するといいと思います。

参考ページ

追加

  1. 他のカスタムフィールドも表示したい場合
  2. ページナビゲーションによる分割表示

続きを読む

[PHP]闇鍋ジェネレーター

by

オンラインで闇鍋！ はいはいはいはい、意味あんの？とか言わないそこ。 直接見る 登録された具材からランダムで１つ選んで表示。 選ばれた具材は都度削除されていくって仕組みです。 パスワードはpassです ランダムで何かする … 続きを読む

[PHP]各曜日ごとの日替わり・特定の日付で表示させる

by

日曜～土曜の曜日ごと、または特定の日付で表示をさせるサンプル。
定期的に開催されるイベント告知やトップページのお知らせなどに。

携帯サイトでも使えます。

<?php
$time = time();
$day =date("j",$time);
$jpweek = array("日曜日は","月曜日は","火曜日は","水曜日は","木曜日は","金曜日は","土曜日は");
$event = array("sunday","monday","tuesday","wednesday","thursday","friday","saturday");
$week = date("w", $time);
?>

<?php
print date("Y年n月j日",$time).$jpweek&#91;$week&#93;."<br />";
print $event[$week];
?>

続きを読む

Google純正ブラウザGoogle Chrome(BETA)提供開始

by

なんとあのGoogleがブラウザ出しましたよ。新し物好きなので早速入れてみた。

GoogleChrome(BETA)

まだBETAらしいので問題も色々とある様子。
このエントリーはGoogle Chromeでよく見るサイトを回りつつ気づいた事や、見かけた情報などのメモです。

ダウンロードしたらとりあえず、文字エンコードの設定で自動検出にチェック入れると良いと思った。
起動・動作はかなりキビキビしてます。機能がシンプルだからかもしれませんが。
表示スピードはSafariやFirefox3と同じくらいですが、Google関連の表示がやたら速く感じます。気のせいかな…

続きを読む

[WP]オリジナルテーマ作成方法いろは（参）::index.php

by

WordPressオリジナルテーマ作成について語ってみるテスト、弐からの続き。
今回はindex.phpの作成編。

▼前回までの作成状況
themes_making2-3

とりあえずindex.phpで記事表示するところまで作ることにします。
トップページ的な役割をするものなので、single.phpと若干作りが違います。

続きを読む

ZeroMail ver0.5

by

ZeroMailのバージョンが0.5になりました。 変更点は大体次の通りです UTF-8以外の文字コードが使えるようになった(EUCとShift-JISにも対応） 確認画面のボタンとメッセージ出力を切り離した テンプレー … 続きを読む

[js]ColorMeShop!Pro商品詳細用　ロールオーバースクリプト

by

ColorMeShop!Proの商品詳細ページの拡大画像表示について。
この記事はサムネイルにマウスオーバーしたら画像を切り替える方法を使用したメモです。
前にLightboxを使う方法を書いてますがどちらにするかはお好みで。
元エントリーのスクリプトを若干変えただけですが、XHMTL・CSS・Javascriptをまとめて貼っておきます



続きを読む