@blog.justoneplanet.info - 日々勉強 » 2007

WordPressの各権限で出来る事

■Administrator

いわゆる管理者。無制限状態。なんでも出来る

■Editor

編集者。ダッシュボード、投稿、管理（アップロード使用可）、ブログロール、プロフィールが操作可能

■Author

投稿者。ダッシュボード、投稿、管理（アップロード使用可）、プロフィールが操作可能

■Contributor

寄稿者。ダッシュボード、投稿、管理（アップロード使用不可）、プロフィールが操作可能

■Subscriber

購読者。ダッシュボードとプロフィールが操作可能

TrackBack URL :

Comments (0)

overflow-y（IE独自のプロパティ）

■結論

overflow:autoを使うべし

■要点

overflow-yはIEの独自プロパティなのでボックスの高さを固定してもOperaなどではスクロールバーが出ない。

TrackBack URL :

Comments (0)

MySQLをコマンドラインから起動しよう

■コマンド

# safe_mysqld &

以上（様々なオプションはある：今回は省略）

TrackBack URL :

Comments (0)

基本的なスタイルのみを定義したCSSファイルを作ろう

■base.css

このCSSはファイル名の通り、基本設定となる。

サンプルソース

/********************************************************
 * body
 */
body {
	text-align: center;
}
#container {
	width: 870px;
	margin: 0 auto;
	text-align: left;
	background-color: #FFFFFF;
}
/********************************************************
 * fundamental preferences
 */
* {
	margin: 0;
	padding: 0;
}
img {
	border: none;
}
h3 {
	clear: both;
}
/********************************************************
 * class for layout
 */
.mb0em {
	margin-bottom: 0px;
}
.mb05em {
	margin-bottom: 0.5em;
}
.mb1em {
	margin-bottom: 1em;
}
.mb2em {
	margin-bottom: 2em;
}
.mb3em {
	margin-bottom: 3em;
}
.ta-center {
	text-align: center;
}
.ta-left {
	text-align: left;
}
.ta-right {
	text-align: right;
}
.fwb{
	font-weight:bold;
}
.fs08em {
	font-size: 0.8em;
}

■typeface.css

このCSSファイルはファイル名の通り、活字づら（フォント）設定を定義したファイルである。フォントに関する設定はこにファイルで一元管理する。

※但し、下記はWindows用の設定（Macは入っているフォントが違うので異なった記述が必要となる）

サンプルソース

@charset "UTF-8";/*CSSドキュメントの文字コードを記述（フォント名にはマルチバイト文字が含まれるため）*/
/********************************************************
 * color, type face, line height
 */
h1,h2,h3,h4,h5,h6,p,dt,dd,table,address {
	font-family: "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	line-height: 1.7;
	color: #444444;
}
h2 {
	font-size: 0.8em;
	line-height: 1.2;
}
h3 {
	font-size: 0.9em;
}
h4 {
	font-size: 0.8em;
	line-height: 1.2;
}
code {
	font-family: "メイリオ", "ＭＳ ゴシック", "Osaka－等幅";
}
em {
	font-weight: bold;
	padding: 3px 3px;
}
address {
	font-style: normal
}
p {
	text-align: justify;
	text-justify: inter-ideograph;
	margin-bottom: 0.5em;
}
ul {
	list-style-type: none;
}
li {
	line-height: 1.2;
	color: #666666;
}
/********************************************************
 * font-size
 */
p,dt,dd,address {
	font-size: 0.8em;
}
th,td {
	font-size: 0.8em;
}
li {
	font-size: 0.8em;
}
li li {
	font-size: 1em;/*liが複数回入れ子になってる場合フォントサイズが小さくなってしまうのを防ぐ*/
}

■mac.css（マッキントッシュ用フォント設定）

正直macは良く分からん。

/********************************************************
 * color, type face, line height
 */
h2,h3,h4,p,li,dt,dd,table,address {
　　　　font-family: "ヒラギノ角ゴ Pro W3", Helvetica, sans-serif;
}
code{
　　　　font-family: "Osaka－等幅";
}

■link.css

このファイルでリンクの設定を一元管理する。注意しなくてはいけないのは、疑似クラスを指定する順序だ。これを間違うと上手く反映されないことがある。

但し、定番といえる記述は少なくサイトに合わせたデザインに下記を変更する。

サンプルソース

/********************************************************
 * link
 */
a:link {
	color:#5aa5de;
	text-decoration:underline;
}
a:visited {
	color:#5aa5de;
	text-decoration:underline;
}
a:active {
	color:#f96400;
	text-decoration:underline;
}
a:hover {
	color:#f96400;
	text-decoration:underline;
}

■main.css

このファイルにはサイトごとに特色のあるソースコードが書きこまれる。

■ie6.css

アウトローなIE6用のCSSを記述する。

■上述の設定したファイルをまとめて読み込むCSSファイル

include1.css

CSSファイルを読み込むCSSファイルをを読み込む為のファイルである。

@importを使うとIE4には読み込まれないような処理となる。

サンプルソース

@import "include2.css";

include2.css

このCSSファイルはmac用以外を除く、上記CSSファイルを読み込む為のファイルである。

@import url(“/*ファイルのパス*/”);を使うとIE4.5には読み込まれないような処理となる。

サンプルソース

@import url("base.css");
@import url("typeface.css");
@import url("link.css");
@import url("base.css");

■読み込み経路について

以下のような順序で、HTMLファイルからCSSが読み込まれる。

→include1.css
→include2.css
- →base.css
- →typeface.css
- →link.css
- →main.css

HTMLファイル内での記述

<link href="css/part1.css" rel="stylesheet" type="text/css" media="all" /><!--外部CSSファイルの適用（NN4xをはじく）-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<script type="text/javascript">
//macの場合はlinkタグが書き出される
if(navigator.userAgent.indexOf("Mac") >= 0){
    document.write('<link href="css/mac.css" rel="stylesheet" type="text/css" media="all" />');
}
</script>

TrackBack URL :

Comments (0)

CSSでレイアウトをする前に（CSSの基本）

■作業フロー

1.ワイヤーフレーム（orカンプ）を用意する: ここで3カラムや2カラムレイアウトなど決定; ワイヤーフレームとは枠組みだけでデザインしたものは含まれない; カンプとはphotoshopやfiireworksなどで作った静止画像で完成イメージ画像
2.XHTML制作（意味上のタグを中心）: ページに掲載する文字情報に見出しや段落といった意味づけをする（ここは経験が出る部分でもあり侮ってはいけない）
3.div要素を1番で用意した画像にidやclassとセットで書き込む: いわゆる「まとまり（ヘッダー、フッター、メニューバー）」を画像上で括る
4.HTMLに3番の通りに反映: <div id=”header”>などとし、HTML上で括っていく
5.CSSを編集: ページ内の部品ごとにCSSを分けるといった構築方針も決める
6.必要環境でレンダリング: 文字の大きさを変えたりして入念にチェック
7.表示の不具合が発生した箇所についてCSSを調整: CSSハックはあくまでも最終手段とし、ハックの基準も決めておく; ※但し、クロスブラウザ対策は思ったより面倒なので見捨てるブラウザも考慮する

■CSSレイアウトのメリットとデメリット

メリット

・スタイル管理の効率化: HTMLファイル内でなく外部ファイル化されている場合、別個にファイルを開き修正しなくて良い; 場合によっては1箇所の修正で全HTMLファイルに適応できる
・広範なユーザーへの適合: ハンドヘルドディスプレイやテレビなどメディアに応じたcssを別個に指定できる
・デザインクォリティの向上: 各要素に背景が別個に指定できる; line-heightで行間を調整し読みやすくできる

デメリット

・コーディングにかかる作業時間の増加: ターゲットブラウザの個数による（web標準に準拠しているIE7、Safari、Firefoxなどは大きく問題にならないが、IE6などブラウザごとの表示の違いを吸収する時間は意外にかかる）

■文章構造の整理について

・構造化の重要性: 機械処理が可能になり、大量の情報の選別、ユーザーに恩恵がある
・div等による要素のグループ化（ヘッダー、フッター等）: 構造をより詳細に定義できる; 段組レイアウトへの補助

TrackBack URL :

Comments (0)

絶対的な位置にメニューなどを固定配置しよう

■サンプル

サンプルファイルの表示

■解説-基本編

#menu {
    position:fixed;
    top:100px;
}

と記述すればブラウザの内枠上から100pxで表示される

但し、IE6では全く効果が無い

■解説-IE6ハック

<!--[if lt IE 7.0]>
<style type="text/css">
body {
    filter:expression('');
}
#menu {
    position:expression('absolute');
    top:expression(document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTop || 0 + 0 + 'px');
}
</style>
<![endif]-->

とhead内へ追記する

■長所

expressionを使用するとCSS内にJavaScriptを記述できる（但し、IE5.0以降の独自拡張）
IE6で未対応であったCSSプロパティを補完できる

■短所

当然ながら独自拡張であるのでIEのみ対応
IEを互換モードで動かさない場合は固定配置部分がちらつく
上記理由によりIEを互換モードで動かす場合、レイアウト用に全く別のCSSを用意しなければならない（BOXモデルの解釈が異なるため）
同じ画面のFirefoxよりもマシンパワーを必要とし重くなる可能性がある
expressionの使用は表示などを回数を重ね検証する必要がある
document.documentElement && document.documentElement.scrollTop || document.body && body.scrollTopの部分は互換モードと標準モード時での違いを吸収するための記述である

■おまけ

IE6を捨てるというのも立派な選択肢の一つとして取っておく事を勧める。

なぜならばクロスブラウザ対策は思ったよりもコストがかかり、それに見合った効果が得られるとは必ずしも言えないからである。

■参考サイト

ダイナミックプロパティ expression() のまとめ

TrackBack URL :

Comments (0)

クロスドメインAjaxとは（1）

■前置き

XMLHttpRequestを使って、他ドメインのサーバーと通信は出来ない。

どのようにすれば他サーバーからデーターを取得できるのか？

XMLHttpRequestで同ドメイン内の（PHPなどの）プロキシを使用し、プロキシが他のサーバーと通信する
scriptタグを書き換えて通信する
隠しフレームを使う

今回は2番を使う。

■簡単な流れ

headタグ内にと空のスクリプトタグを記述

（スクリプト書き換え用）

<script type="text/javascript" charset="utf-8" id="import"></script>

データが戻ってきた場合の処理を定義

（下記はテスト用でアラート）

function callBackFunction(JSON){
    alert('test');
}

スクリプト要素の書き換え関数と書き換えるタイミングを定義

（下記はロード時に実行）

window.onload = function(){
    var originalScriptNode = document.getElementById('import');
    var newScriptNode = document.createElement('script');
    newScriptNode.src =  '/*ここにスクリプトのsrc属性値を記入（他ドメイン）*/';
    newScriptNode.charset = 'utf-8';
    newScriptNode.id = 'import';
    originalScriptNode.parentNode.replaceChild(newScriptNode, originalScriptNode);
}

上記スクリプトで入れ替えるJavaScriptにというように記述

（→このデータを受け取った瞬間にcallBackFunctionが実行される）

callBackFunction(/*引数*/);

つまり、scriptタグのsrc属性には他ドメインも可能という特性を利用している

TrackBack URL :

Comments (0)

人に言うときに困るIT単語の読み方

■今日のITmediaからの引用である

よく出てくるサービス名や機器名。。。皆さんも読めないものが沢山ありますよね！？下記、参考にしてみてください～

Yahoo！: やふー
del.icio.us: でりしゃす
flickr: ふりっかー
Skype: すかいぷ
Twitter: とぅいったー
Senduit: せんど・ゆー・いっと
Alexa: あれくさ
Plaxo: ぷらくそ
Xeon: じーおん
XOOPS: ずーぷす
VGA: ぶいじーえー
SCSI: すかじー
ATA: えーてぃーえー、あた
IEEE: あいとりぷるいー
Wnn: うんぬ
ATOK: えいとっく
Entourage: あんとらーじゅ
POP: ぽっぷ
IMAP: あいまっぷ
SMTP: えすえむてぃーぴー
PING: ぴん、ぴんぐ
PNG: ぴーえぬじー
TIF: てぃふ
.org: どっと・おるぐ
SaaS: さーす
Biz.ID: びずあいでぃ

■追記

訪問者の検索ワードを調べて、以下を追記しまっす！

admin: あどみん

TrackBack URL :

Comments (0)

IEにおけるJavaScriptの挙動差

■サンプル

クリックするとIE7、IE6、Operaでは「5」、Firefox、Safari3、NS7.1では「7」と表示されます

■サンプルソース（自由にご利用下さい）

functionをfunctionの中に書くことは可能だ。しかし、function文はカレントスコープの先頭まで巻き取りが行われる。さらに、JavaScriptにはブロックスコープが存在しないので以下のスクリプトは同名の関数を2回宣言したことになる。

<head>
<script type="text/javascript">
window.onload = function(){
    document.getElementById('2007101901button').onclick = function(){
        var bool = true;
        var num = 6;
        if(bool){
            function func(num){
                num++;
                return num;
            }
            num = func(num);
        }
        else{
            function func(num){
                num--;
                return num;
            }
            num = func(num);
        }
        document.getElementById('2007101901num').value = num;
    }
}
</script>
</head>
<body>
<form>
<input type="button" value="click" id="2007101901button" />
<input type="text" size="2" id="2007101901num" />
</form>
</body>

■実行結果

Firefoxでは7と表示される
IE7では5と表示される

■対処法

以下のように関数リテラル（式）を使用する。

var func = function(num){
    num--;
    return num;
}

TrackBack URL :

Comments (0)

JavaScriptにおける継承…その2（プロトタイプ・チェーン）

■サンプル

下記のリンクをクリックすると選択数値に応じた面積などがアラートされます。

三角形	面積	公式
四角形	面積	公式

■サンプルスクリプト

function figure(NAME){
	this.name = NAME;
	this.alert = function(){
		alert(this.name);
	}
}
function triangle(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2 / 2);
	}
}
function square(){
	this.getArea = function(){
		var num1 = parseInt(document.forms["area"].elements["num1"].value);
		var num2 = parseInt(document.forms["area"].elements["num2"].value);
		return (num1 * num2);
	}
}
triangle.prototype = new figure("底辺×高さ÷2");
/*この記述によりfigureクラスのメソッドがtriangleクラスのインスタンスでも使用可能になる*/
square.prototype = new figure("縦×横");
/*この記述によりfigureクラスのメソッドがsquareクラスのインスタンスでも使用可能になる*/
var tri = new triangle();
var sqr = new square();

■サンプルHTML

<form action="#" name="area">
底辺の長さ
<select name="num1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
高さ
<select name="num2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
<table>
<tr>
<th>三角形</th>
<td><a href="javascript:alert(tri.getArea());">面積</a></td>
<td><a href="javascript:tri.alert();">形</a></td>
</tr>
<tr>
<th>四角形</th>
<td><a href="javascript:alert(sqr.getArea());">面積</a></td>
<td><a href="javascript:sqr.alert();">形</a></td>
</tr>
</table>

■解説

人にもよるがcallを使うよりも直感的にスクリプトが書ける

TrackBack URL :

Comments (0)

底辺の長さ：
高さ：