スタイルシートで

height: auto;

と指定してブラウザで見ると中身が少ない時は背景が縮んでしまって見た目が悪い。
それを解消し、あらかじめ最低の高さをキープしておくためのプロパティがmini-heightである。
ひじょうに便利なものであるが、このプロパティは残念な事にIE6には対応いない。

とは言え、現在IE利用者の半分くらいはEI6を使われている現状では無視できない。
なにか得策はないかと探して見るとあった。

それは、「minmax.js」である。
これを適応すると

  • min-height
    高さの最低値をあらかじめ指定
  • max-height
    高さの最高値をあらかじめ指定
  • min-width
    幅の最低値をあらかじめ指定
  • max-width
    幅の最高値をあらかじめ指定

が有効になるらしい。

まずはjsファイルをダウンロードする。

ダウンロードしたminmax.jsをはここに置いた。

そして、htmlのhead内にjsファイルを読み込んで完了である。

<script type="text/javascript" src="./minmax.js"></script> 

 

ふだんHTMLソースを記述する時はWINDOWS付属の「メモ帳」ではないが、汎用のエディタを使っている。
これはこれで使い勝手はよいのだが、HTML専用ではないので、タグの補完とかHTMLに特化した機能は備えていない。

そこで何かよい物がないかと探していたら有った。
それは 次世代高機能HTML/XHTMLエディタ「ez-HTML」(Web Frontier)Created by ez-HTMLと言うものでエディタ機能は勿論、HTML 編集、外部CSSの編集、MozillaとIE が同時に2画面で表示できるのでき、表示崩れなどを比較しながら確認もでき、HTML、CSS, perl、phpの文法をチェックまでできる。
まだあまり使い込んでいなにので、わかりませんがもっといろいろな機能を備えているみたいだ。

前置きはこのくらいにして、今回はインストール方法を記す。

何故か最近職場のPCをシャットダウンしようとしたとき、電源を切るのウィンドウが出るまでにやたらと時間がかかるようなった。
早く帰りたいときはイライラする。

そこでPCを一発でシャットダウンするショートカットを作った。
これで、ディスクトップのこのショートカットアイコンをダブルクリックするだけで帰宅ができる。

①ディスクトップの何もないところを右クリックして「新規作成」→「ショートカット」を選択。
②ショートカット作成のウインドウが現れたら、項目の欄に、
[shutdown -s -f -t 0]と入力して「次へ」ボタンをクリックする。
③ショートカットファイルの名前を入力して「完了」ボタンをクリックする。

これで、帰宅時のイライラ解消!

最近、ウエブサイトでおしゃれなホップアップを見かけます。
どうなっているのかと調べてみると、

* LightBox http://www.huddletogether.com/projects/lightbox2/
* GreyBox http://orangoo.com/labs/?page_id=5
* ThickBox http://jquery.com/demo/thickbox/

のようなライブラリがみつかった。

LightBoxは画像を対象にしているのに対して、ThickBoxやGreyBoxはURLを指定して、コンテンツを全てBox表示する事はできるらしい。
今回はGreyBoxを使わせて頂き、リンク先の他のページを表示してみることにした。

ますは次のとこらからダウンロードする
http://orangoo.com/labs/GreyBox/Download/

ダウンロードしたZIPファイルを解凍すると色々なフォルダやファイルがあるが、とりあえず必要な物はgreyboxフォルダであるので、これをドキュメントルートに配置する。

GreyBoxは非同期通信とエフェクト処理、スライド処理を行う3つのファイルに分かれているので、
greyboxフォルダのパスを指定した後に、実際に処理を行う3つのファイルを以下のように順番に読み込ませる必要がある。
つまり、greyboxを使いたいhtmlファイルのhead部分に次の記述をする。
------------------------------------------------
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>

<script type="text/javascript" src="greybox/AJS.js"></script>

<script type="text/javascript" src="greybox/AJS_fx.js"></script>

<script type="text/javascript" src="greybox/gb_scripts.js"></script>
--------------------------------------------------

スタイルシートファイルも読み込ませる必要があるので、greyboxフォルダ内にあるgb_styles.cssの読み込む。
---------------------------------------------------
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
---------------------------------------------------

これで準備完了。

後は表示させていページを<a>タグのrel属性にrel="gb_page[横幅, 縦幅]"を指定する。
横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値である。
----------------------------------------------
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page[480,360]">~</a>
----------------------------------------------

上記の場合ウィンドウは上部に表示されるが、ウィンドウの中央に表示させることもできる。
この場合は<a>タグのrel属性にgbpagecenter[横幅, 縦幅]を指定しする。
-----------------------------------------------
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page_center[480,360]">~</a>
-----------------------------------------------

また、指定したサイズではなく、ウィンドウサイズに合わせて最大で表示することもでる。この場合は<a>タグのrel属性にgbpagefs[]を指定する。
そして、ウィンドウをリサイズした場合でも自動的に最大になるように調整が行われます。
-----------------------------------------------
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page_fs[]">~</a>
-----------------------------------------------

そして、ウィンドウに表示されるページをグループ化して扱うこともできる。この場合は<a>タグのrel属性にgb_pageset[グループ名]を指定する。
グループ名は任意の文字列を指定し、複数の異なるグループ名を指定した場合、それぞれ別のグループとして処理される。
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>Sample</title>
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
</head>
<body>
<h1>GreyBox グループ表示サンプル</h1>
<ul>
<li><a href="http://kumao.net/" title="kumaoの押入" rel="gb_pageset[favPage]">kumaoの押入のページ表示</a>
</li>
<li><a href="http://www.ayumi.cn/" title="アユゴンの部屋" rel="gb_pageset[favPage]">アユゴンの部屋のページ表示</a>
</li>
<li><a href="http://blackwidow.bgrp.jp/" title="マリネルス峡谷の対決" rel="gb_pageset[favPage]">マリネルス峡谷の対決のページ表示</a>
</li>
<li><a href="http://kmp.bgrp.jp/" title="KINUGASA MOTION PICTURES" rel="gb_pageset[favPage]">KINUGASA MOTION PICTURESのページ表示</a>
</li>
</ul>
<h1>GreyBox 上部表示サンプル</h1>
<ul>
<li>
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page[480,360]">kumaoの押入(上部表示)</a>
</li>
</ul>
<h1>GreyBox 中央表示サンプル</h1>
<ul>
<li>
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page_center[480,360]">kumaoの押入(中央表示)</a>
</li>
</ul>
<h1>GreyBox 最大表示サンプル</h1>
<ul>
<li>
<a href="http://kumao.net/" title="kumaoの押入" rel="gb_page_fs[]">kumaoの押入(最大表示)</a>
</li>
</ul>
</body>
</html>
------------------------------------------------------

GreyBoxは必要なファイルが greyboxフォルダにまとめられているため、他のプログラムファイルやスタイルシートファイル名と干渉しないのでよい。
次回は画像表示も試してみたい。

5.ActivePerl5

1.ActivePerlのダウンロード

http://www.activestate.com/
より
ActivePerl-5.10.0.1003-MSWin32-x86-285500.msi
(2008.5.22現在の最新バージョン)
をダウンロードする。


2.ActivePerl5のインストールと設定

・ダウンロードしたファイルActivePerl-5.10.0.1003-MSWin32-x86-285500.msi
をダブルクリックする。

・インストーラが起動したら「Next」ボタンをクリックして次へ進む。

・途中インストール先を変更する。
   C:\perl\
   変更↓
   C:\usr\local\

ここでC:\usr\local\を指定するとCGIスクリプトの先頭行に記述するローカルサーバのPerlへのパスは次のようになる。

#!/usr/local/bin/perl

使用するサーバーのPerlのパスが
#!/usr/bin/perl
の場合は
C:\usr\
にする。

そのほかには特に設定するところはない。

3.Apacheのhttp.confの変更

http://kumao.bblog.jp/entry/403801/
を参照し変更をおこなう。

4.確認

ActivePerlが正しくインストールできたか確認してみる。
C:\usr\local\にインストールした場合、C:\usr\local\eg\にexample.plと言う名前のサンプルスクリプトがある。

1.コマンドプロンプトを起動する。
2.cd c:\usr\local\eg としてカレントディレクトリに移動する。
3.perl example.plと入力してEnterキーを押す。
4.Hello from ActivPerl!
C:\usr\local\eg>

と表示されたらインストール成功!!

5.念のために「perl -h」と入力してEnterキーを押す。
6.コマンドラインで使えるすべてのオプションが表示されるはずである。

IE(Internet Explorer)6で、ページ内にある画像(200×200ピクセル以上)にマウスポインタを合わせると、印刷や保存などの4つのかアイコンがついた小さなイメージ ツール バーが出てきます。

私はどうしても必要な時以外IEは使っていませんが、たまに使うとなん目ざわりで、"この機能はだれが使っているのだろう"と、お節介な事も考えてしまいます。

そこで、この機能をブラウザ側で無効にする方法と、html作成時に無効にする(表示されないページを作る)方法を記します。

1.ブラウザ側の設定で無効にする

① [ツール] メニューの [インターネット オプション] をクリックしする。
② [詳細設定] タブで、[マルチメディア] の [イメージ ツール  バーを有効にする] チェック ボックスをオフにする。
(有効に戻すには、チェック ボックスをオン)

2.Web ページから直接無効にする

①画像をポイントしてイメージ ツール バーを表示し、イメージ ツール バーをマウスの右ボタンでクリックする。
②[イメージ ツール バーを無効にする] をクリックします。

3.html作成時 無効なるページを作る

その1:画像単位で無効にする 
 imgタグの指定で無効にする
  imgタグに galleryimg="no" を追加する。
        <img src="" galleryimg="">

その2:ページ内にあるすべての画像で無効にする
 metaタグの指定で無効にする
   <head>タグ内に
    <meta http-equiv="Imagetoolbar" content="no">
    と記述する。

オブジェクトを半透明するCSSの設定。

IEのみのだけでなく、Firefox、Opera、Netscape、Safariでも同じように半透明で表示することができる。

サンプル

次のコードでIE、Firefox、Opera、Netscape、Safariで半透明で表示できる。
---------------------------
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
zoom: 1.0;
---------------------------

IE
alpha(opacity=透明度);
100が100%

IEの場合、次のスタイルのいずれかが設定されていないと半透明にはならない。

プロパティ     
display     inline-block
height      任意の値
width       任意の値
float      left または right
position     absolute
writing-mode   tb-rl
zoom       任意の値

(指定する値が無い時はとりあえず、「zoom: 1.0;」とすれば良いと思う。)

Firefox・Netscape
-moz-opacity:透明度;
1.0が100%

Opera・Safari
opacity:透明度;
1.0が100%

opacity:透明度;がCSS3.0から実装されるみたいなので、そうなるとこの設定でFirefox、Opera、Safari、Netscapeなど多くのブラウザで表示可能となるだろう。
ただし、IEは対応しないようだ。

私が試したところ、MacのIE以外ではオブジェクト半透明が実現できた。

注:ここに示したサンプルは私が制作した友人のサイトです。

ハイパーリンクを設定するa要素には次のようにtarget属性に"_blank"を指定すると新規のウィンドウを開いてリンク先を読み込むことができる。

<a href="http://kumao.net/" target="_blank">別ウィンドウで開きます。</a>

別のウエブサイトへのリンクは、新規のウィンドウで開く方が便利だとか、またそうあるべきだと言う意見も多い。

しかし、このtarget属性はXHTML 1.1、XHTML 4.01、XHTML1.0 Strictにおいては未定義で使用できない。

その理由は、制作者側の都合でウィンドウを制御してしまうことであり、別ウィンドウを開くかどうかという選択権をユーザーから奪うことになるためらしい。

仮に制作者側がtarget="_blank"を指定しなくても、別ウィンドウで開きたいユーザーは自ら操作して(Windowsの場合は、Shiftキーを押しながらマウスの左クリック)実行可能である。

しかし、実際にはよそ様のウエブサイトにリンクする場合など、新規のウィンドウで開きたい事がある。

その方法としては次のようなJavaScriptを使う事が有望である。

<a href="kumao.net/" onclick="window.open('kumao.net/'); return false;">別ウィンドウで開きます。</a>

こらなら、ステータスバーにリンク先が表示され、JavaScript が off でもリンク先に飛ぶことがでるが、いちいちonclick~と毎回書くのが面倒なのでもっといい方法が無いかと調べた結果次の記述を参考に rel= "external"という方法を使わせていただくことにした。

Opening a link in a new window - the valid way

-------------------------------------------------
//external.js
function externalLinks(){
if(!document.getElementsByTagName){
return;
}
var _1=document.getElementsByTagName("a");
for(var i=0;i<_1.length;i++){
var _3=_1[i];
if(_3.getAttribute("href")&&_3.getAttribute("rel")=="external"){
_3.target="_blank";
}
}
}

window.onload=externalLinks;
----------------------------------------------------

このjsファイルをインクルードし、次のように aタグにrel="external"と指定と別ウィンドウで開く。

<a href="kumao.net/" rel="external">別ウィンドウで開きます。</a>

インターネットで次のような認証画面がホップアップしてきてユーザー名とパスワードを知らないと入れないページがある。
  
    s-htaccess.jpg

これはApacheのベーシック認証機能を使った認証画面で、この機能を使えばユーザー名とパスワードを知っている人しかアクセスできないページが意外と簡単にできる。

この機能は特定の人を対象にした掲示板とか、写真などを置いておいて知り合いだけに公開するなど使い道は色々あると思う。
私は、現在構築中のデーターベースのメンテナンスページを隠すのに利用使用と思っている。

原理は制限をかけたいディレクトリに「.htaccess」というテキストファイルを置き、別の場所にそのユーザー名とパスワードの記した「.htpasswd」と言う名前のテキストファイルを置くだけだ。
ただし、レンタルサーバーで利用するには、WebサーバーにApacheを利用している事と、「.htaccess」の利用を許可している事が必要になる。

1.Apache「httpd.conf」ファイルの変更
Apacheサーバーの「httpd.conf」で設置する該当のディレクトリに「AllowOverride All」を指定する必要がある。
デフォルト設定では「AllowOverride None」と無効になっている。

    <Directory "C:/www/public_html">
      AllowOverride None
    </Directory>
      ↓変更
    <Directory "C:/www/public_html">
      AllowOverride All
    </Directory>


2.「.htaccess」ファイルの作成
テキストエディタで次のように記述する。
C:/www/public_htmlに置くとすべてのアクセスが制限されるが、C:/www/public_html/hogeに置くと/hogeがその対象となる。

.htaccess-----------------------------------
AuthType Basic
AuthName "Please enter userID and password"
AuthUserFile /home/www/.htpasswd
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
deny from all
</Files>

--------------------------------------------
・「AuthType」は、認証タイプ Basicを指定する。
・「AuthName」は、認証時に表示される認証名を入力する。
  ここは自由に書きかえることも可能だが、
  日本語を使うとは文字化けする可能性あり。
・「AuthUserFile」は、パスワードファイル「.htpasswd」(後で作成)
  へのパスを記入する。パスは、URLや相対パスではなく、
  絶対パスでホームディレクトリから記入する。
  (レンタルサーバーの場合は要確認)
・「require valid-user」は、グループ名など指定するが、
 「.htpasswd」を使用するので、このままでよい。
・ <Files・・・以下の欄は必須ではないが、「.htpasswd」と「.htaccess」  といったファイル名をWeb上から閲覧できなくなるような記述である。
・最後に改行する。

3.「.htaccess」ファイルの保存
このファイルを「.htaccess」の名前で保存する。

Windowsの場合は「.」で始まるファイル名には通常操作では後からは変更できないので、テキストエディタ保存時に「.htaccess」の名称で保存する。

もし拡張子.txt等通常名で保存した場合は「コマンドプロント」から次のように「rename」コマンドで名前を変える事ができる。

-----------------------------------------------------------
C:\Users\hoge>rename C:\Users\hoge\htaccess.txt .htaccess
-----------------------------------------------------------

4.「.htaccess」ファイルの配置
このファイルを閲覧制限をかけたいディレクトリの置く。

C:/www/public_html等のホームディレクトリに置くとすべてのアクセスが制限されるが、C:/www/public_html/hogeのように配下ディレクトリのに置くとそのディレクトリ(/hoge)以下ががその対象となる。
レンタルサーバーの場合は /home/user/public_html/hoge などになる。

5.「.htpasswd」ファイルの作成
このファイルの中には「ユーザー名」・「パスワード」が記する。
パスワードは万が一の為に"MD5"で暗号化する。
「.htpasswd」ファイルを作成する為に、Apacheには標準でインストール先binフォルダの中に「htpasswd.exe」がある。
この機能を使うと、暗号化されたパスワードを記載したファイル生成される。
使用方法はコマンドコマンドプロントから以下のようにし、パスワードの設定を要求されるので、2回入力する。
-----------------------------------------------------------
C:\>c:\apache2\bin\htpasswd -mc c:\apache2\.htpasswd kumao
New password: *********
Re-type new password: *********
Adding password for user kumao
-----------------------------------------------------------
・「C:\apache2\bin\htpasswd」は、「htpasswd.exe」の場所を指定する。
・オプション「-c」は、「新規ファイル作成」を実行する場合の指示し、
 以後、同じファイルにユーザー名を追加する場合は、「-m」オプションのみとする。
・「C:\.htpasswd」は、「新規ファイル作成場所」と
 「作成ファイル名」の指定です。
・「kumao」は、「認証を行うユーザー名」。

この方法で生成された「.htpasswd」の中身は
.htpasswd------------------------------------
kumao:$apr1$gs4.....$NFAr7x3Wv701LSMkjcMZR1
---------------------------------------------
のように、
ユーザー名:暗号化されたパスワード
の形式で記述され、ユーザーを増やせば、順次追加される。

6.「.htpasswd」ファイルの配置
「.htpasswd」ファイルはどこにおいてもいいが、気持ち悪いのでユーザがWeb上からアクセスできないところに置く。
つまり、公開ディレクトリの上(public_htmlなどのディレクトリと同じ位置)に置き、そのパスは上記「.htaccess」のAuthUserFileに指定する。

7.ファイル配置場所のまとめ

  http://hoge.com (架空)
   C
   └ /www ... (ここに「.htpasswd」を配置)
     └ /public_html
        └/himitu (認証ディレクトリ) ... (ここに「.htaccess」を配置)

8.動作確認テスト
Apacheを再起動して、「.htaccess」を配置したディレクトリにブラウザから
http://hoge.com/himitu/とかhttp://localhost/himitu/のようにアクセスすると認証画面がホップアップしてくるので、ユーザー名とパスワード入力してアクセス可能になれば成功である。(このディレクトリにindex.html等があればそれが表示される。)

posted at 2007/12/04 20:26 | ku

4.phpMyAdmin

phpMyAdminとは、ブラウザからMySQLをGUIにより管理できる便利なツールである。

1.phpMyAdminのダウンロード

以下のMySQL公式サイトより
http://www.phpmyadmin.net/
phpMyAdmin-2.11.2.2-all-languages.zip(2007.11.21現在の最新バージョン)
をダウンロードする。

他にも
-all-languages-utf-8-only.zip

-english.zip
と言ったバージョンもあるので必要に応じて選択する。

2.phpMyAdminのインストール

ダウンロードした
・phpMyAdmin-2.11.2.2-all-languages.zip
を解凍し、Cドライブの直下に移動し、フォルダー名をphpMyAdminに変更する。

  C:\phpMyAdmin\

 解凍時、phpMyAdmin-2.11.2.2」フォルダが2重に自動生成されるので、移動時には注意が必要。

・C:\phpMyAdmin\の中のconfig.sample.inc.phpファイルをその場にコピーし名前をconfig.inc.phpに変更する。


3.phpMyAdminmの環境設定

「config.inc.php」ファイルをエディターで開き、以下の設定を行う。

・17行目
  $cfg['blowfish_secret'] = '';
  変更↓
  $cfg['blowfish_secret'] = 'password';

上記「password」の部分にはMySQLのrootのパスワードを設定する。

・49行目付近
  追加↓
  $cfg['Lang'] = 'ja-sjis';

使用言語をシフトJISコード「日本語」に設定する。
なお、UTF-8コードの場合は、'ja-utf-8'に設定に、EUCコードの場合は、'ja-euc'に設定する。
この記述を忘れると文字化けする。

4.Apacheのhttpd.confの設定

httpd.confにエイリアスを設定し、phpMyAdminにhttp://localhost/phpMyAdmin/でアクセス出来るようにする。
「phpMyAdomin」をApacheのドキュメントルートに置けば、この設定は不要。
今回は今後の作業の事を考え、あえてC:\に置いたので、この設定が必要。

・エイリアスの設定
httpd.confの500行目付近、Alias設定がある辺り
  追加↓
  Alias /phpMyAdmin "C:/phpMyAdmin/"
  <Directory "C:/phpMyAdmin/">
  </Directory>

・Apacheを再起動する。


5.phpMyAdminの起動

・ブラウザより、http://localhost/phpMyAdmin/とアクセスする。

・次のようにユーザ名とパスワードが要求されるので、「root」とrootのパスワードを入力してOKをクリックする。
  s-phpmyadmin_01.jpg

・次のようなphpMyAdminの初期画面が表示される。
   

s-phpmyadmin_02.jpg