Retoucher.jp » WEB関連 http://retoucher.jp 主にPC関連の備忘録と映画の感想を書いています。 Fri, 04 Nov 2011 07:34:34 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 IE6でVideoタグ http://retoucher.jp/archives/467 http://retoucher.jp/archives/467#comments Fri, 07 Oct 2011 02:10:30 +0000 taiyo http://retoucher.jp/?p=467 ブラウザ依存しないFlashプレイヤーを製作していていまして、どうしても手間がかかる為、ラクをする方法を考えたりしまして・・・
IEが９になり、「IE6なんて使うやついないだろ」と思う人のほうが多いでしょうが、様々なサイトのAnalyticsとか見るとまだIE6の人がいたりするのもまた事実・・・

という事で、IE6でもVideoタグを使えないかなと調べたら、やっぱりGoogle・・・
IE6でhtml5のheaderタグとか使えるのは知ってましたが、流石です！

ソースは

ただし、Jqueryがいるため、そのパスも必要となります。

<script src=”任意の場所/jquery.js”></script>
<script src=”http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js”></script>

普段Chromeを使っており、そちらは問題ないので割愛します。
問題のIEはというと・・・

見事に出来てました。

]]> http://retoucher.jp/archives/467/feed 0 フォーム情報が文字化けするIE６ http://retoucher.jp/archives/451 http://retoucher.jp/archives/451#comments Wed, 02 Mar 2011 05:31:18 +0000 taiyo http://retoucher.jp/?p=451 前に投稿したJqueryのフォームをブラウザ別にテストしてみたら、IE６だけ文字化けを起こしました。
ｈｔｍｌ自体のヘッダー情報もUTF-8ですし送信先のPHPもUTF-8で問題ないはずなのに・・・・

仕方ないので、「サーバ変数」を使って、ブラウザごとに比較。
その中で、$_SERVER['HTTP_ACCEPT_CHARSET']を使ってみたところ、Chrome、FireFoxともにShift-JIS、utf-8と表示。
IE６だけ、何も表示されない・・・
PHP側でエンコードとかを考えたんですが、その手前で分けるしかないので、if文とサーバ変数を使って分けることにしました。
私のPCにはIE６しか入っていないので、IE7,IE8のHTTP_ACCEPT_CHARSETは分かりませんでしたが、IE6問題はいつまで経っても続くな・・・

決してこの分岐条件がいいとはいえませんし、SERVER['HTTP_USER_AGENT']で分岐すればいいのかもしれませんが、とりあえず自分の為に備忘録。

if(!eregi(‘Shift_JIS’,$_SERVER['HTTP_ACCEPT_CHARSET'])){
$Sample = mb_convert_encoding($moji,”utf-8″,”shift-jis”);
}
]]> http://retoucher.jp/archives/451/feed 0 謎のループ http://retoucher.jp/archives/384 http://retoucher.jp/archives/384#comments Thu, 01 Jul 2010 02:01:24 +0000 taiyo http://retoucher.jp/?p=384 別サイトをWordpress3.0にバージョンアップしたら、管理画面までは普通にログインと操作ができるのに、サイトがリダイレクトループで表示されない現象が起きていてかなり困っていた。

ブラウザのリダイレクトループエラー

WordPressの設定を全部見なおしたり、プラグインを全て外したり、htaccessの設定を見なおしたりとイロイロ手をつくしてみましたが、原因が分からず・・・

別の用件でさくらインターネットのコントロールパネルを開く事があったので、ついでに「Webアプリケーションファイアウォールの設定」を見てみた。

Webアプリケーションファイアウォールの設定

なんかコレをOFFにしたらなんか変わるんじゃないかと思い、とりあえずOFFに・・・
問題のWordPressサイトを見てみたら、普通にサイトが表示されました！

「Webアプリケーションファイアウォールの設定」が分かってもないのに、こういうのをONにしてしまうというのは、完全に自分が悪いです。

忘れる前に書き留めておきます。

]]> http://retoucher.jp/archives/384/feed 0 AmazonアソシエイトWebサービスの署名認証 http://retoucher.jp/archives/153 http://retoucher.jp/archives/153#comments Tue, 16 Jun 2009 01:18:43 +0000 taiyo http://retoucher.jp/?p=153 「Amazon アソシエイト Web サービスの名称変更および署名認証についてのお知らせ」というタイトルでメールが先月届いていましたが、面倒くさい感じがしていたので放置していました。

ですが、今後の為と思い、設定の練習をする事にしました。

参考にさせてもらったサイトは以下の通り

自分はPHPですが、方向性さえわかればいいという事でとりあえず探しました。

とりあえず、必要なのは

  1. Access Key ID
  2. Secret Access Key
  3. タイムスタンプを取得
  4. HMAC-SHA署名を作成する方法

というところでしょうか？

とりあえず、Access Key IDの確認・・・
Amazon Web Servicesにログイン後、Home > Your Account > Access Identifiersという階層に移動。
下に画像のような表示があるので、そこで確認。
Access Keyの確認

暫く見に来てないだけにここまで探すのが大変だった・・・

とりあえず、サンプルに従ってテストしてみる。

http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=自分のアクセスキーID&Operation=ItemLookup&ItemId=0679722769&ResponseGroup=ItemAttributes%2COffers%2CImages%2CReviews&Version=2009-01-06

これにタイムスタンプを付ける。

http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=自分のアクセスキーID&Operation=ItemLookup&ItemId=0679722769&ResponseGroup=ItemAttributes%2COffers%2CImages%2CReviews&Version=2009-01-06&Timestamp=2009-01-01T12%3A00%3A00Z

書いていた皆さんサンプルのままでしたが、コレって現時間を表記するですかね？
やるなら、time関数とdate関数で直すべきなのかな？

とりあえず、テストで動作してみたらXMLの取得出来ました。

次が何のことやらサッパリ分からなかった「署名の文字列」・・・・・

なんでも、

1行目　GET
2行目　webservices.amazon.com
3行目　/onca/xml
4行目　AWSAccessKeyId=00000000000000000000&ItemId=0679722769&Operation=ItemLookupResponseGroup=ItemAttributes%2COffers%2CImages%2CReview
s&Service=AWSECommerceServiceTimestamp=2009-01-01T12%3A00%3A00Z&
Version=2009-01-06

というようにした上で、それらをハッシュ関数を使用して、認証コードを作成するそうです。
※ハッシュ関数(IT用語辞典)

自分の場合、PHPなんでそれに該当する関数を調べてみたらhash_hmac関数がありました。

公式マニュアルには・・・

Calculate an RFC 2104-compliant HMAC with the string you just created, your Secret Access Key as the key, and SHA256 as the hash algorithm.

アルゴリズムをSHA256にしてhash_hmac関数と言う事みたいです。
となると・・・

<?php
$data = “AWSAccessKeyId=00000000000000000000&ItemId=0679722769&Operation=ItemLookupResponseGroup=ItemAttributes%2COffers%2CImages%2CReview
s&Service=AWSECommerceServiceTimestamp=2009-01-01T12%3A00%3A00Z&
Version=2009-01-06″;
$base = ”
GET\n
webservices.amazon.com\n
/onca/xml\n
“.$data;
$access_key = “自分のアクセスキーID”;
$hash = hash_hmac(“sha256″, $message,$access_key,”true”);
$enc = base64_encode($hash);
?>

4番目の”true”を設定する事で「生のバイナリデータ」になるそうです。
それをBase64方式でエンコードします。

最後に最初の方に書いたタイムスタンプまでのURLと合体させます。

http://webservices.amazon.com/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=自分のアクセスキーID&Operation=ItemLookup&ItemId=0679722769&ResponseGroup=ItemAttributes%2COffers%2CImages%2CReviews&Version=2009-01-06&Timestamp=2009-01-01T12%3A00%3A00Z&Signature=pwqYQRc3RepIrf7m%2BVMRy%2FjFXx%2FZBSPsaSFFexIUoSI%3D

面倒だな・・・・
このテストではOperationやらItemAttributesを固定の文字列で扱っちゃってるけど、実際の運用には配列と連結で対応してやったほうがいいんだろうな。

でも、自分で手順を書いておかないとそれこそ忘れてしまうので、書いておきました。

]]> http://retoucher.jp/archives/153/feed 0 マウスホイールイベントのテスト http://retoucher.jp/archives/46 http://retoucher.jp/archives/46#comments Tue, 03 Jul 2007 07:44:00 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/46 前にAJAX関連で調べものをしていた時に、WEBブラウザ上でホイールイベントが出来るスクリプトを見つけていたが、その利用価値も分からぬまま放置。
先日、HDのファイル整理をしていたら、テストをしていたhtmlファイルがあったので、備忘録として記載しておきます。
参照元URL：Mouse wheel programming in JavaScript


ソース全文

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<head>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<title>ホイールテスト</title>
<script language=”javascript”>

function upimg(){
var w = 20;
document.getElementById(“teiend”).width = document.getElementById(“teiend”).width + w ;
document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );
document.FormZ.wresult.value = document.getElementById(“teiend”).width;
document.FormZ.hresult.value = document.getElementById(“teiend”).height;
}

function downimg(){
var w = 20;
document.getElementById(“teiend”).width = document.getElementById(“teiend”).width – w ;
document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );
document.FormZ.wresult.value = document.getElementById(“teiend”).width;
document.FormZ.hresult.value = document.getElementById(“teiend”).height;
}

function handle(delta) {
if (delta < 0)
// 下方向にまわした場合の処理
upimg();
else
// 上方向にまわした場合の処理
downimg();
}
/** Event handler for mouse wheel event. */
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
if (window.opera)
delta = -delta;
} else if (event.detail) { /** Mozilla case. */
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta)
handle(delta);
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;}
/** Initialization code. * If you use your own event management code, change it as required. */

if (window.addEventListener) window.addEventListener(‘DOMMouseScroll’, wheel, false);window.onmousewheel = document.onmousewheel = wheel;
</script>
</head>
<body>
<img src=”1.jpg” id=”teiend” name=”testimg” width=”320px”>
<FORM name=”FormZ”>
幅:<INPUT type=”text” name=”wresult” size=”10″ ID=Text1>
高さ:<INPUT type=”text” name=”hresult” size=”10″ ID=Text2>
<input type=”button” value=”リセット” onClick=”location.reload()”>
</form>
</body>
</html>

function handle(delta) {
if (delta < 0)
// 下方向にまわした場合の処理
　;
else
// 上方向にまわした場合の処理
　;
}

上下にホイールを回した時に何が出来るか考えたところ、とりあえず画像の大きさでも変えてみることにしました。

function upimg(){
var w = 20;
document.getElementById(“teiend”).width = document.getElementById(“teiend”).width + w ;
document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );
document.FormZ.wresult.value = document.getElementById(“teiend”).width;
document.FormZ.hresult.value = document.getElementById(“teiend”).height;
}

ID属性を変更することで、幅を中心に変えています。
テスト画像は4対3の比率の画像を使っているので、document.getElementById(“teiend”).height = Math.floor(document.getElementById(“teiend”).width * 0.75 );は幅に対して3/4＝0.75をかけているだけです・・・

フォーム部分はあくまでもオマケで、自分の確認用につけているので、画像だけなら不要です。

var w = 20;

の数字の部分で増減を調整しています。

出来上がったサンプルはこちら

問題は「０」になってしまうと、どうしようもないということ・・・

何につかえるか分かりませんが、イロイロなAPIをと組み合わせていけたらいいなとおもってますね。

私はホント初心者なので、プログラミングバリバリ出来る人にしてみたら、しょーもないスクリプト組んでいるな！と思われちゃうでしょうが、気にしない！気にしない！

]]> http://retoucher.jp/archives/46/feed 0 WindowsでSafariが動く？ http://retoucher.jp/archives/40 http://retoucher.jp/archives/40#comments Wed, 13 Jun 2007 02:24:05 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/40 テクノラティをみてみたら、トップにMACのブラウザの「Safari」が上位にきている。
気になったので、Gigazineを見たら、詳細が書いてありました。
参照元記事：Mac OS Xの標準ウェブブラウザ「Safari」、ついにWindows版が登場
Gigazineに載っていたSafariベータ版のサイトに早速アクセスしてダウンロードしてみました。

元々、MAC使いであった私ですが、仕事柄、WINDOWSに乗り換えてしまったので、またSafariを触る事になるとは思っていませんでした。

早速、インストール後、起動してみました。

ぱっと見はSafariですが、WIN版QuickTimeと同様、MACで表現されていたクロム調の部分はWINDOWSでは再現されていませんでした。

さすがにベータ版。
すぐにオチます・・・・・

ですが、体感的には当時使っていたPowerBookのSafariよりかは初期設定のウィンドウを閉じるのも開くのも早い気がしました。
また、操作もショートカットも同じでしたので、全く持って問題ありませんでした。

記事にも書いてあるように日本語表示がされません。
ムリヤリ表示する事も可能だそうですが、今は待つことにします。

それにWEB制作をする上でSafariを使えず、レイアウトの確認が出来なかったのですが、これが本格的に始動したら、いいコトです。
反面、こっちも視野に入れて作業をしなければならないと言う意味では、キツイですね・・・(笑

]]> http://retoucher.jp/archives/40/feed 0 「.htaccess」のこと http://retoucher.jp/archives/24 http://retoucher.jp/archives/24#comments Fri, 01 Dec 2006 07:34:26 +0000 taiyo http://omegared.sakura.ne.jp/test/archives/24 迷惑コメント、トラックバックにその都度対応していたのですが、サイトをコロコロ変えてしまう自分がいてワケがわからなくなったので、書き留めておきます・・・・(笑


言語設定によるアクセス制限（日本語が無い場合はハジかれる）

SetEnvIf Accept-Language ja Lilith（日本語を選びましたよ！ってコト）
Order Deny,Allow
deny from .cn
deny from .kr
deny from .hk
deny from .kp
deny from .tw
deny from baidu.com
deny from image.baidu.com
deny from cndata.com
Deny from all（ドメインが上のものはハジきますよ！ってコト）
Allow from env=Lilith（上で選んだのはjaだからそれは許す！ってコト）

つまり、ブラウザの設定で日本語を組み込んでいたとしても、上のドメインはアクセスできないと言う事です。

動画をアップしていたので、ブラウザに認識させるために書いたもの

AddType audio/x-pn-RealAudio-plugin .rpm
AddType audio/x-pn-realaudio .rm .ram
AddType video/x-ms-asf .asf .asx
AddType video/x-ms-wmv .wmv

htmlからphp化に伴い、indexのデフォルトを追加

DirectoryIndex index.php index.html

サイト変更に伴い、引越し元から引越し先までリダイレクトで制御
（現在はエントリー数の肥大化と構造の再構築が面倒すぎるので放置・・・・、下は例文）

RedirectPermanent /cat1/ http://retoucher.jp/cat2/index.php

ざっと書いたけど、全体に見せるためのサイトでは無いので、これくらい厳しい制限をかけていました。

]]> http://retoucher.jp/archives/24/feed 0