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

投稿日: 作成者:
返信

このブログは、最初ロリポップを借りていましたが、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リダイレクトの設定はおわりました。お疲れ様でした！

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

投稿日: 作成者:
返信

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

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

function escapeHTML(str) {
	return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&apos;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

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

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

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

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

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

投稿日: 作成者:
返信

一部の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端末だけ、テキストアウトラインしたテキストの「義」という漢字が違う所へ表示してしまうバグがありました。ひょっとしたら「義」以外にも、ある文字で変な表示になってしまいそうです。

<!-- ↓義だけが変な箇所に表示-->
<p class="text_bold_outline">義理チョコ</p>

<!--　↓spanでマークアップを分けると、ちゃんと表示する-->
<p><span class="text_bold_outline"義</span><span class="text_bold_outline"理チョコ</span></p>

もうなんでこうなるのかさっぱり分からなくてさんざん悩んだ結果、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でハマった

投稿日: 作成者:
返信

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;
}

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

投稿日: 作成者:
返信

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

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

NGソース

$('body').append($('<script>alert("アラート");</script>'));

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

')); } })();

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

回避するOKソース

$('body').append($('<script>alert("アラート");<\/script>'));
//スラッシュの手前に、バックスラッシュ（￥でもOK）を置く。

「/script」という文字列がダメなら、「/」スラッシュの手前に、バックシュラッシュ（￥マーク）を置くと、変な挙動は回避され、上記のソースではちゃんとalert();が実行されます。正規表現の時と同じ、特殊文字に特殊な意味を持たせない。ということですね。

僕はこうします。

$('body').append($('<scr'+'ipt>alert("アラート");<\/scr'+'ipt>'));
 //「scr」と「ipt」という文字で連結

こうする必要はないかもしれませんが、scriptタグの記述が変な挙動を呼び起こしてしまうなら、いっそのこと「scr」と「ipt」という文字で連結させてしまおう！っておもいました。そもそもこんなことを書くこと自体マレかもしれませんが参考までに。

正規表現で文字列があるかないかの判定をするJavaScriptサンプル

投稿日: 作成者:
返信

文字列のなかに、ある文字列が含まれている場合に、あとで実行する内容を分岐させたいときに便利だと思います。たとえば、iPhoneで見てるか、Androidで見ているかのUser Agent判定をするScriptを書くときなんか便利だと思います。

var ua = navigator.userAgent;
if(ua.match(/iPhone|iPod/) ){ //←iPod⇒iPod touchのUA
	//iOSのSafariから見ている判定。
} else {
	//それ以外。
}

matchで( )括弧の中の文字列があるか調べます。含まれていると戻り値が１以上ならtrueで、含まれてなければfalseなのでelse以降に移ります。

JavaScriptのFrameworkパスを1クリックでコピーできるサイト

投稿日: 作成者:
返信

jQuery google api and other google hosted javascript libraries. - ScriptSrc.net

Google にホスティングされたFrameworkのパスを1クリックでコピーできるサイトです。このサイトの面白いところは、クリックされた数がカウントされていきます。クリップボードにコピーってどうやってやるんですかね。。。

ホスティングされているFramework一覧。
・jQuery
・jQuery UI
・chrome frame
・swfobject
　＞＞具体的な使い方はこちら。
・mootools
・Ext JS
・YUI（Yahoo UI）
・Prototype
・script.aculo.us
・DOJO

＞＞http://scriptsrc.net

コンポーネントComboBoxのフォントサイズを変える方法

投稿日: 作成者:
返信

あまりコンポーネントを使わないんですが、プルダウンメニューを使いたいということで、やむをなしにComboBoxを使うことにしました。ところが、メニュー内のテキストサイズを変更するのに、情報があまりなかったのでここにメモをしておきます。

fl.controls.ComboBox;はTextFormatを継承しているので、テキストのスタイルの設定は基本的な書き方でOKです。あとは、ComboBoxにTextFormatを適応させる方法が２つあります。cb.textField.setStyle(“textFormat”, tf);でメニューのところのテキストフォーマットで、cb.dropdown.setRendererStyle(“textFormat”, tf);でドロップメニュー内のテキストフォーマットの設定になるみたいです。

package {
	import fl.controls.ComboBox;
	public class Main extends MovieClip {
		private var cb:ComboBox;
		private var tf:TextFormat;
		public function Main() {
			init();
		}
		private function init():void {
			cb = new ComboBox();
			tf = new TextFormat();
			tf.size=12;
			cb.textField.setStyle("textFormat", tf);
			cb.dropdown.setRendererStyle("textFormat", tf);
			cb.addItem( { label: "ラベル１", data:1 } );
			cb.addItem( { label: "ラベル２", data:2 } );
			cb.addItem( { label: "ラベル３", data:3 } );
			addChild(cb);
		}
	}
}

CSSでテキストの縁を表現する方法

投稿日: 作成者:
返信

[DEMO] CSSのみで袋文字を実現する

CSS3のtext-shadowとfilter:dropshadowで、わりと強引かもしれませんがテキストの縁を表現できるジェネレータを紹介します。

細かく設定はできませんが、縁の太さを入力してから「適用」ボタンを押すと、CSSのプロパティが生成されます。赤色から変更する場合は、「red」と書かれている場所を「#000000」などに変更すれば色を変えることができます。

IE6

IE6でもなんとか表現できてはいますが、影の位置が若干ずれていたりしてしまってますね。

SafariやGoogleChromeはWebKitが使われてますので、テキストの縁用にCSSが用意されています。

/*ふちの太さ*/
-webkit-text-stroke-width:3px;
-webkit-text-stroke-color:#FF0000;
-webkit-text-fill-color:#FFFFFF;
この設定はスマートフォン用のページだと有効的に使えますが、PC用のページでは、他のブラウザが対応していないため使えないですね。このジェネレータで見る限りでは、問題なくキレイに表現されているように見えます。

Firefoxではうまく動きませんでしたが、実際に表示してみたところ問題なく表示されました。

画像をなるべく使わない。ページ速度もSEOの評価対象といわれていますので、表現の幅をきかせるのであれば、こういったテキストを使うといいとおもいます。
※検証に使ったブラウザは全て最新のバージョンです。