Program is new entry.

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

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

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

１，絵文字の表示
<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

MT4でカテゴリーごとに表示内容を切り替える方法

ひとつのカテゴリーのみ表示を切り替える

MT4でカテゴリーごとに表示内容を切り替える方法は<MTIfCategory>というタグを利用します。

<MTIfCategory name="カテゴリー名">
任意のカテゴリーの場合表示される内容。
</MTIfCategory>



複数のカテゴリーのみ表示を切り替える

複数のカテゴリーで表示を切り替えたい場合は以下のやり方です。


<MTIfCategory name="カテゴリー１">
カテゴリー１の場合に表示する内容
<MTElse>
    <MTIfCategory name="カテゴリー２">
        カテゴリー２の場合に表示する内容
    </MTIfCategory>
</MTIfCategory>




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

Page Top

Movable Type Bookmark - MT関連サイト・書籍のまとめ

nt.jpg

Movable Typeとは？
Six Apart社のブログシステムで、サーバーにインストールして利用するコンテンツマネジメントシステムの一種です。

海外ではWordPressが人気ですが、日本ではMovable Typeの方が人気が有り、非常に多く使われているブログシステムです。


ブックマーク

More...

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

Page Top

I LOVE RSSからはき出す配列JSを使ったブログパーツテスト

下のリンクはI LOVE RSSの機能を使ってJavascriptで生成しています。
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

今さらながらあえてCSSのまとめ

css.gif
画像のソース：CSS specificity span

CSS（Cascading Style Sheets）とは
Cascading Style Sheets（CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

ウィキペディアから参照


More...

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

Page Top

Flex:ILOG Elixir、WorldCountryMapsカスタムコンポーネントテスト。

Flex:ILOG Elixir、WorldCountryMapsカスタムコンポーネントをテスト的に使って見ました。
こんなのがちゃんと国別に分割されていていろいろなものに使えそうですね。

ちなみにアジア版やヨーロッパ版もあります。
（ちなみに日本の四国と九州がありません・・・）
 
Tags:
Rating:
 [10pt
20pt
30pt
40pt
50pt]

Page Top

« Etc. Home Archive UI »