ダリの雑記：WEBプログラム版

※PIE version1.0 beta3以降はレイアウトの崩れという最大のバグはなくなりました。

以下はPIE version1.0 beta2以下の場合、起きるバグです。

最近まで気づかなかったのですが、PIEを利用したサイトをIEにて印刷しようとすると、とんでもなくレイアウト崩れがおきます。

当サイトはPIEを使用しているので、IEにて印刷プレビューを見てみるとわかりますが、もはや使い物になりません。（※PIE version1.0 beta4にしたので、レイアウトの崩れはなくなりました）

記述方法が悪いのかなぁ？

とりあえず印刷用のスタイルと分けて、印刷ではCSS3を使用しないようにするとかしたほうがよさそうですね。

スタイル内にて印刷スタイルとスクリーン用スタイルをわける方法については以下のサイトを参照

印刷時専用のスタイルシートを作る（All Abouさんのサイト）

■追記

と思ったら、上記のサイトに載っているスタイルシート分けでは対処不可能のようです。

@media printのスタイルにはPIEの記述は外しているのになぜか反映されない・・・なぜ？

PIE、まだ早すぎる技術なのか・・・

<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

で分ける方法だったらさすがにうまくいくと思うのだけど、まだ未検証。

■追記２

と思ったけど、やっぱりダメでした・・・

PIE version1.0 beta3から、この問題点はかなり解消されましたので、バージョンをあげましょう。

PIEダウンロードはこちら。

自分のサイトにGoogleサイト内検索フォームを設置できる「Googleカスタム検索」
この検索フォームの仕様が変わったようです。

Googleカスタム検索はこちらから設定を行えます。↓

http://www.google.co.jp/cse/

設定を行うと、以下のようなコードが出力されます。（以下のコードはこのサイト用に設定したコードなので転用しても意味がありません。あしからず。）

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
   google.load('search', '1', {language : 'ja'});
   google.setOnLoadCallback(function() {
      var customSearchControl = new google.search.CustomSearchControl('006668502882474005811:hojvzo2b0qm');
      customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
      customSearchControl.draw('cse');
   }, true);
</script>

で、張り付けた結果がコレ↓
     

検索するとフォームのすぐ下に結果がリストされるようになりました。

う～ん・・・正直今まで通りで十分なんだけどなぁ。

という人は、「検索エンジンID」だけ拝借して今までどおりのコードに適応。
「検索エンジンID」というのは上のコードの赤文字で記述されている部分です（設定ごとにこのIDは変わります。）。このＩＤを以下のコードの赤文字の部分に記述してください。

<form action="http://www.google.com/cse" id="cse-search-box" name="cse-search-box">
   <input type="hidden" name="cx" value="検索エンジンID" />
   <input type="hidden" name="ie" value="UTF-8" />
   <input type="text" name="q" size="21" value="" />
   <input type="submit" name="sa" value="検索" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=ja"></script>

結果↓

Adobe Dreamweaver（ドリームウィーバー）では、リンク切れのチェックを行える非常に便利な機能があるのですが、いつもやり方を忘れるのでメモ。

※以下のやり方はローカルにあるファイルのリンク切れをチェックする方法です。

１．パネルの表示

Dreamweaverのメニュー「ウィンドウ」から「パネルを表示」を選択してください

右側と下部にパネルが表示されるようになります。

表示モードになっても見えない場合は、隠れている可能性があります。
右側と下部に

がある場合は、これらボタンをクリックし表示してください。
(さらに…)

設置方法が結構面倒なのでメモ。

mixiチェックキーを取得する

１．まずはチェックキーを取得するために、「デベロッパー登録（法人の場合はパートナー登録）」を行います。

下記の「mixi Developer Center」から登録を行ってください。

• デベロッパー登録（個人の方）
• パートナー登録（法人の方）

※個人で行うデベロッパー登録の注意点
上記のサイトから登録を行うと携帯電話にメールが送信されてきます。（メールアドレス登録は携帯しか受け付けていないため）
そのメールに記述されているアドレスへ30分以内にアクセスし、ログインを行うと登録完了です。
PCからのメールを拒否する設定にしている場合は一時的に解除してください。

※法人で行うパートナー登録の注意点
申込用紙を郵送で送る必要があるため、時間に余裕をもって登録しましょう。

(さらに…)

メモ

画像のロールオーバーは、Javascriptを使うと楽です。特にCSS HappyLifeさんのサイトの

smartRollover.js

なんかは非常に簡単にロールオーバーを実現できます。

ただ画像のロールオーバーといっても、明度が上がる程度のものであれば、わざわざ２枚用意するのも面倒です。

そういう場合はスタイルシートで解決しましょう。

１．imgタグを囲んだaタグに「class="opacity"」を記述します。

<a href="#"  class="opacity"><img src="hoge.jpg" /></a>

２．スタイルシートに以下を記述します

a.opacity{
   background-color:#FFF;
   display:inline-block;
}

a.opacity:hover img,
a.opacity:active img{
    -moz-opacity:0.7;
   opacity:0.7;
   filter:alpha(opacity=70);
}

要するに、画像の透明度を上げて、白の背景色と混ぜ合わせれば明るく見えるというわけですね。

■サンプル（明るく：background-color:#FFF;）

反対に暗く見せたい場合は、背景色を暗くすれば良いので、「a.opacity」の「background-color」を「#000」にしてください。

■サンプル（暗く：background-color:#000;）

その他の色についても、背景色の設定次第で様々なバリエーションが可能です。

■サンプル（赤：background-color:#F00;）

■サンプル（緑：background-color:#0F0;）

■サンプル（青：background-color:#00F;）

メモ

大量に画像をアップロードしなくてはならない場合、FTPで一気にアップロードする方法と、MTで１つ１つアップロードする方法の２つがありますが、前者は後々管理画面から削除ができなくなるし、後者は時間がかかる。

そんなとき便利なプラグインが「MultiFileUploader」です。

ダウンロードは以下のサイトから

複数ファイルを一括でアップロードできるMovable Typeプラグイン:MultiFileUploader（スカイアークシステムさんのサイト）

解凍すると

• plugins
• mt-static

のフォルダができるので、それぞれアップロードするだけ。

プラグインが正常に導入されると「アイテム」メニューに「複数アップロード」が追加されますので、そちらから複数ファイルをアップロードしてください。

特に対応バージョンが書いていなかったので不安でしたが、MT5.031にて正常に動作しました。

スカイアークシステムさんのサイトのコメントを見てみると、パスエラーが発生しているようですが、自分のところでは特に問題なしでした。
MTのバージョンのせい？

「IEでもCSS3　その２（PIE）」で「Multiple background images」のやり方がわからないと書いたのですが、ようやくやり方がわかりました。サンプル

PIEにて「Multiple background images」を実行させる方法は以下の通りです。

.multiple_box{
background-color:#FFFFFF;
width:640px;
height:480px;

/*Firefox等用*/
background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

/*PIE用*/
-pie-background:
url(img/Winter.jpg) no-repeat top left,
url(img/Waterlilies.jpg) no-repeat center center,
url(img/Blue_hills.jpg) no-repeat 100% 100%;

behavior: url(PIE.htc);
}

「background」ではなく「-pie-background」と記述しなければならなかったわけです。

グラデーションの記述方法にヒントがあったのに、今の今まで気づかなかったのは我ながらアホとしか言いようがありませんが、とりあえず解決！

サンプル [新しいウィンドウで開く]

メモ

別のスクリプトファイルですでにwindow.onloadを使用している場合は、以下のように対処しましよう。

if (window.attachEvent) { //IE用
    window.attachEvent("onload", hogeFunc);
}else{
    window.addEventListener('load', hogeFunc, false);
}

ちなみに

<img src="hoge.gif" onload="hogeFunc()" />

という方法もありますが、うまくいかないことも多々あります。主にIEで。
解決方法についてはいろいろなサイトに載っていますのでご参照ください。

• IMG要素のonloadイベントがIE系でうまくいかないときの対処
• GIFアニメをロードするIMGでonload使う時の注意

などなど。

フォトギャラリーのように、時間経過とともに画像が変わっていく処理をする場合、新しい画像が表示されるたびに画像を読み込むようになっています。（IEのステータスバーを見ているとよくわかります。）

１ループすると以後は読み込む動作をしなくなるのですが、できればページを開いたときにあらかじめすべての画像を読み込んでおきたい。

ということで、こんなサイトを見つけました。

複数の画像をあらかじめ読み込む（プレロード）

photo_array = new Array("img01.jpg", "img02.jpg", "img03.jpg", "img04.jpg", "img05.jpg");

pl_file = new Array();

for(i=0;i<photo_arrray.length;i++){
    pl_file[i] = new Image();
    pl_file[i].src="photo/"+photo_array[i];
}

• photo_array：読み込む予定の画像ファイルすべてを配列に格納
• pl_file[i]=new Image()：イメージオブジェクト生成（画像分用意するため、あらかじめ配列にしておく）
• pl_file[i].src：キャッシュに画像データを読み込む

という風な処理を行うと、事前に画像を読み込んでおくことができます。

トラックバックを下さった方のページで、超簡単に地図を表示する方法が書いてあったので、じゃあ今度はマップへのリンクを簡単に取得する方法はないかな～と思い、少し調べてみました。

特定の住所を示したGoogle Mapへのリンクは本来なら、Google Mapページで「地図を検索」し、その結果の「リンク」を取得してaタグで張り付ける、という手順になります。

が、そんなことをわざわざしなくても、PHPでものすごく簡単にリンクURLを取得することができました。

サンプル[新しいウィンドウで開く]

ソース

<?php
    $address = "和歌山県和歌山市一番丁３"; //住所
   $address_encode = urlencode($address);
   $zoom = 15;  //ズームレベル
 
   $gmap_url = "http://maps.google.co.jp/maps?q=".$address_encode."&z=".$zoom;
?>

<p><a href="<?=$gmap_url;?>">和歌山城の地図</a></p>

• $address：住所
• $zoom：地図のズーム値

URLエンコーディングさえできればいいので、perlでもjavascriptでも可能なんですけどね。

GoogleMapのページからリンクURLを取得すると

http://maps.google.co.jp/maps?q=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C%E5%92%8C%E6%AD%8C%E5%B1%B1%E5%B8%82%E4%B8%80%E7%95%AA%E4%B8%81%EF%BC%93&ie=UTF8&hq=&hnear=%E5%92%8C%E6%AD%8C%E5%B1%B1%E7%9C%8C%E5%92%8C%E6%AD%8C%E5%B1%B1%E5%B8%82%E4%B8%80%E7%95%AA%E4%B8%81%EF%BC%93&ll=34.226529,135.174966&spn=0.025583,0.046821&z=15&brcurrent=3,0x6000b2c10241e76d:0x7f27c18451970b13,0

というものすごく長いURLになりますが、実際は「q=」（住所）と「z=」（ズーム値）の値を渡すだけでもちゃんと表示するようです。（もっと言えば「z=」すらいらないんですけどね。）

各パラメータについてはこちらのサイトにまとめられてます。

Google Maps のパラメータ