creator note

【.htaccess】301リダイレクトでサブドメインから他社ドメインへリダイレクトさせる方法

cotapon — Thu, 19 Apr 2012 05:46:53 +0000

このブログは、最初ロリポップを借りていましたが、CRONを使いたい、という理由だけでさくらのレンタルサーバに乗り換えました。ドメインはムームードメインのままで、もうだいぶたってしまいましたが、ようやく301リダイレクトの設定をしました。放置しすぎですよね＾＾；自分が持っているドメインは、cotapon.orgというもので、このブログはサブドメインでcreator.cotapon.orgとしています。さくらレンタルでの初期ドメインで、cotaponorg.sakura.ne.jpというのもありす。cotapon.orgとcotaponorg.sakura.ne.jpは一緒で、ここにアクセスすると、このブログのcreator.cotapon.orgのテキストリンク1行だけペロっとありました。今後色々自分で活動していくのにメインのドメインは、とっておきに置いておこうと思ってましたが、ちゃんと301リダイレクトしようと、ふと思い立ったわけです。

さて、301リダイレクトの方法は、「.htaccess」というファイルで行います。拡張子の「.」ドットが前に来ている設定ファイルなので、WindowsやMacでローカルで作ると、「不可視ファイル」になるので、FTPクライアントで新規ファイル作成で作ってしまったほうが早いと思います。

.htaccessファイルの作り方

FTPソフトを立ち上げます。さくらレンタルサーバーの場合は、/home/アカウント名/www/　が一番上の階層だと思います。おそらくほとんどのソフトで、「新規ファイル作成」ができると思うので、「.htaccess」というファイル名で作ります。FTPソフトからテキストエディタで開きます。メモ帳でも大丈夫です。開いたら下記の内容を入力します。

RewriteEngine on
RewriteRule ^(.*) http://example.com/$1 [R=301,L]

ちなみにボクの場合は、cotapon.org　と　cotaponorg.sakura.ne.jp も、creator.cotapon.org　にリダイレクトしてもいいと思ったので、下記のように設定しました。

RewriteEngine on
RewriteRule ^(.*) http://creator.cotapon.org/$1 [R=301,L]

このブログはWordPressを使っています。ディレクトリを、/home/アカウント名/www/creator/　にしていたので、cotapon.org/creator/　とも、cotaponorg.sakura.ne.jp/creator/　ともアクセスできてしまってました。このリダイレクト設定をしておけば、cotapon.org/　以下の階層、cotaponorg.sakura.ne.jp/以下の階層も、すべてcreator.cotapon.orgにリダイレクトすることが出来ました。サイトの引越しなんか似便利ですね。

ここのページで色々項目を設定した「.htaccess」ファイルを作ることができます。
http://www.htaccesseditor.com/

最後にパーミッションの設定

.htaccessファイル自体のアクセス権限を設定します。FTPソフトで、「パーミッション」か「属性の変更」という項目があるとおもいます。これを「604」に設定します。難しいことは抜きにして、これで301リダイレクトの設定はおわりました。お疲れ様でした！

No related posts.

【XSS対策】JavaScriptで文字列をエスケープ(escape)する方法

cotapon — Tue, 10 Apr 2012 02:45:11 +0000

エスケープするというのは、特殊な文字を打ち消す。という意味があるみたいで、ここでいうエスケープは、「＜」右大なり。「＞」左大なり。「＆」アンパーサント。「”」ダブルクォーテーション。「’」シングルクォーテーション。を、無効化する。ということです。エスケープの他にも、サニタイズ、サニタイジング（無害化）、クロスサイトスクリプティング（XSS）という言い方もするそうです。今回はJavaScriptでエスケープする方法と、必要な場合などの説明も出来ればと思います。

JavaScriptで文字列をエスケープする関数。

function escapeHTML(str) {
	return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''').replace(//g, '>');
}

なんでエスケープする必要があるん？

facebookやtwitterなどのAPIがたくさん出てきて、非同期通信する場合にJavaScriptを使うのはすっかり普通になってきました。そこで作り手側も、若干セキュリティのことを気にしなければならなくなりました。文字列をエスケープする。ということは、PHPやSQLでいうところのサニタイジングやSQLインジェクションなどといい、特殊文字を無効化する必要があります。

例えばinputタグで入力した文字というのは、必ずしも文章じゃない場合もあります。そのフォームに＜script＞alert(‘hoge’);＜/script＞（わざと大文字）なんて入力して投稿すれば、データーベースにこの文字列が登録され、出力されたらブラウザのアラートが実行されてしまう。ということがあります。これが俗にいう脆弱性ってやつです。アラートだけ実行されるわけではないので、ハッカーや攻撃的なユーザーさんは、cookieを抜き取ったりするプログラムや、強制的にリダイレクトさせるなどのプログラムを仕込んだりすることができちゃうわけですね。inputタグからPOSTするときにサニタイジングが必要であり、逆に、APIなどから持ってきた文字列にもサニタイジングをかける必要があるわけです。

身を守る為には攻め方も知らなければならない。でも、攻撃は犯罪ですので、絶対に入力フォームにプログラムは入れないでくださいね。

jQueryで動的にscriptタグを生成して実行させる方法

Android端末にfont-weight:boldを表現させる方法

cotapon — Mon, 05 Mar 2012 09:38:43 +0000

一部のAndroid端末では、テキストに対してボールドをかけることができません。Android OSのシステムフォント自体に、日本語のボールドがなくて、CSSでのfont-weight:boldの解釈ができないみたいです。

それを再現させる方法として調べてみたら、テキストのドロップシャドウを利用して再現する方法が載っていました。ところが、手元の検証端末で表示確認すると、若干ボケた感じに見えましたので、僕はテキストのアウトラインで表現する方法をとりました。

検証端末は、初代Xperia Android OS 1.6　Galaxy S Android OS 2.3　IS03 Android OS 2.1 iPhone4 iOS5.です。IS03はOSのシステムフォントにモリサワフォントが使用されている為、Android端末でもboldは効きます。iPhoneで画面を撮ったので画質が悪くて申し訳ないんです・・・。

▼Android Xperia と Galaxy S でboldやstrongタグを表示: やっぱり太字になってませんね。

▼IS03と iPhone でboldやstrongタグを表示: ちゃんと太字で表現されています。

▼Android Xperia と Galaxy S でドロップシャドウやテキストアウトラインで表現: Android端末でも太字を表現する事が出来ました。ドロップシャドウだと若干滲んでるように見えるので、ボクはテキストアウトラインのほうがいいなぁーと思いました。

▼IS03 と iPhoneでも、ドロップシャドウやテキストアウトラインで表現: IS03とiPhoneも問題なく表示する事が出来ました。

＞＞ＤＥＭＯ：http://creator.cotapon.org/demo/textoutline.html

/*テキストのドロップシャドウ　黒色*/
.text_bold_shadow{
	-webkit-text-shadow:1px 0 1px black;
}

/*テキストのアウトライン　黒色*/
.text_bold_outline{
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	-webkit-text-fill-color: black;
}

パッと見た目でいえば、テキストのアウトラインで表現する方が、Android端末できれいにボールドを表現できてるように思いました。しかし、とんでもないバグを発見してしまいました。。IS03端末だけ、テキストアウトラインしたテキストの「義」という漢字が違う所へ表示してしまうバグがありました。ひょっとしたら「義」以外にも、ある文字で変な表示になってしまいそうです。

義理チョコ

もうなんでこうなるのかさっぱり分からなくてさんざん悩んだ結果、IS03とiPhoenは普通にboldが効くんで、JSで動的に適応すればいいのではないかという苦肉の策・・・。（そこまでして表現したいんかいなｗ）そうなると判断するのはUser Agentです。IS03のUAは

Mozilla/5.0 (Linux; U; Android 2.1-update1; ja-jp; IS03 Build/SB060) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

なので、indexOfで「IS03」が含まれているか、チェックすればOKです。その逆のパターンでもOKですね。

若干強引な考え方で、今回はAndroidにboldさせるわけなので、IS03とiPhoneにはちゃんとboldをかけてあげればよいと思います。

.text_bold{ font-weight:bold; } [\css]

太字用のクラスをCSSで書いておき、JavaScriptを下記のように書くと、IS03とiPhone、iPod Touch以外に、テキストアウトラインが適応されます。

var selector = $(selector).find(.text_bold);
var ua = navigator.userAgent;
if(!ua.match(/iPhone|iPod|IS03/)){
	selector.css({
		-webkit-text-stroke-width: '1px',
		-webkit-text-stroke-color: 'black', //blackは16進数で色指定可
		-webkit-text-fill-color: 'black'	//blackは16進数で色指定可
	});
}

システムフォントに日本が含まれている端末であればAndroidでもboldが表現できますので、IS03以外にもあればまた報告いたします。

Android端末でのbackground-sizeでハマった

cotapon — Thu, 26 Jan 2012 08:03:41 +0000

iPhone4から画面の解像度が高くなり、２倍のサイズで画像を作って、タグやスタイルで1/2のサイズを指定すればキレイになる方法がありますね。例えば、100×100の画像を表示するのに、元サイズは200×200で作って、imgタグでは、height=”100″ width=”100″とかにする方法です。

では、CSSのbackground-imageの画像も、２倍のサイズの画像を1/2にすることができるのか。CSS3から増えたbackground-sizeというプロパティを使えば背景画像のリサイズが可能になりました。repeatする小さい画像でも２倍サイズで作り、iPhone4、iPhone4以下でも綺麗に表示することができます。

ところがこのbackground-sizeでサイズ指定した背景画像が、XPERIAで指定することができませんでした。Android OS 1.6というのも原因なのか。Galaxy Android OS 2.2では正しくサイズ指定して表示することが出来ました。

そして端末依存かOS依存の問題かと思いましたが、プロパティの書き方に-webkit-を追加すれば、XPELIAでもサイズ指定できる事がわかりました。多くの参考サイトがbackground-sizeのままでしたが、本当は、-webkit-background-sizeと書いたほうがよさそうですね。もちろんCSS3なのでモダンブラウザしか対応してませんのであしからず。

/* 間違ったプロパティ */
selector{
background-size: 100px 100px;
}

/* 正しいプロパティ */
selector{
-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
-ms-background-size: 100px 100px;
}

No related posts.

jQueryで動的にscriptタグを生成して実行させる方法

cotapon — Tue, 27 Sep 2011 02:45:39 +0000

何かの判断をJSで行った後に、scriptタグで外部JSを読み込んだりする事がありました。jQueryをつかって、scriptタグを生成したときに変な挙動があったので回避するメモを残します。

JSのイメージは、
１．scriptタグの記述をStringで書いて、
２．それをjQueryの＄を使ってタグを生成、
３．bodyタグへappendする流れです。

NGソース

$('body').append($(''));

純粋に書くと上記のような記述になるとおもいます。ところがこれを実行すると、

')); } })();

↑このようなscriptの途中の括弧だけが出てきてしまいます。これの原因は、「/」スラッシュが特殊な状態で認識してしまうみたいです。jQueryで普通に閉じタグを作るときに「/」をつかっても何も起きませんが、どうやらscriptの閉じタグだけ、うまく認識してくれないっぽい？です。調べてないのでたしかなことはわかりませんけどね。。

回避するOKソース

$('body').append($('