EC CUBEのデザイン管理や、Googleの各種サービス、BBCなどで採用されている
ドラック＆ドロップでページデザインを変更する基本サンプル。
http://interface.eyecon.ro/demos/drop.html
http://interface.eyecon.ro/demos/drag.html
他にも下記サイトで紹介されている。
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編
今までJavaScriptのインポートというとdocument.writeで呼び出す方法が紹介されていたが、下記サイトで紹介されている方法も便利。元サイト自体はなくなっているようだが…。
youmos : JavaScriptでJSやCSSを動的インポートする （import.js）http://youmos.com/news/import_js
Google Analyticsはデフォルトの状態では携帯サイトに用いようとしても、JavaScriptがソースとして吐き出されてしまう。
Google Analyticsを携帯サイトで利用するためのライブラリでGA4Kなどが出ているが商用となるとライセンスが気になる。
…という事で、Knowledge Database ITさんの、モバイル(携帯サイト)でアクセス解析にGoogle Analyticsを使う方法を参考に標準的に使用できるようにカスタマイズ。※Knowledge Database ITさんはPHPのフレームワークであるsymfonyを用いるソースになっている。
モバイル(携帯サイト)でアクセス解析にGoogle Analyticsを使う方法
http://it.kndb.jp/entry/show/id/2376
カスタマイズといっても変更するのはリファラを通常にセットしなおすだけ。
あとは任意の箇所に<?php mobile_analytics('UA-xxxxxx-x', 'サイトのドメイン'); ?>と共に埋め込むだけ。
※<?php use_helper('Analytics');?>は必要なし。
<html>
<?php
function mobile_analytics($uid = ”, $domain = ”)
{
$var_utmac=$uid; //enter the new urchin code
$var_utmhn=$domain; //enter your domain
$var_utmn=rand(1000000000,9999999999);//random request number
$var_cookie=”;//$session; //cookie number
$var_random=rand(1000000000,2147483647); //number under 2147483647
$var_today=time(); //today
//▼コメントアウト
//$var_referer=sfContext::getInstance()->getRequest()->getReferer();//$_SERVER['HTTP_REFERER']; //referer url
//▼追加
$var_referer=$_SERVER['HTTP_REFERER']; //referer url
$var_uservar=”;//$storeinfo['storeid']; //enter your own user defined variable
$var_utmp=$_SERVER['REQUEST_URI']; // request uri
（途中略）
$header = ”;
//Set the language to that of the client so analytics can track it.
if (!empty($_SERVER['HTTP_ACCEPT_LANGUAGE'])) {
$header = 'Accept-language: '.$_SERVER['HTTP_ACCEPT_LANGUAGE'].'\r\n';
}
//Set the user agent to that of the client so analytics can track it.
if (!empty($_SERVER['HTTP_USER_AGENT'])) {
$header = 'User-Agent: '.$_SERVER['HTTP_USER_AGENT'].'\r\n';
}
$opts = array(
'http'=>array(
'method'=>'GET',
'header'=>$header
)
);
$handle = fopen($urchinUrl, 'r', false, stream_context_create($opts));
$test = fgets($handle);
fclose($handle);
}
?>
<?php mobile_analytics('UA-*************', ’sample.com'); ?>
<body>
コンテンツを記載
</body>
</html>
一応、これでDoCoMoの実機のアクセスを確認済み。
CSS+JavaScritpのもう１つとしてJQueryを使ったプルダウンメニューがある。
JQueryを使用する機会も多くなっているので、JQueryを使用する場合は、使用を検討する価値がある。
CSS LectureさんのjQueryを使って簡単プルダウンメニューは、コードも綺麗で使いやすい。
http://www.css-lecture.com/log/javascript/005.html
CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは
JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx
CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。
ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど）問題ない。
大手のニュースサイトなどには、任意でフォントサイズを切り替える方法がある。
最も簡単な方法（検索して一番紹介されている方法）はstyleswitch.jsを用いた方法。
<html>
<head>
<title>フォントサイズを任意で切り替える</title>
<script src="styleswitch.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font1" href="font1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font2" href="font2.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font3" href="font3.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="font4" href="font4.css" />
</head>
<body>
<span id="changefont">
<ul>
<li>フォントサイズ：</li>
<li><a href="javascript:chooseStyle('font1', 30)">小</a></li>
<li><a href="javascript:chooseStyle('font2', 30)">中</a></li>
<li><a href="javascript:chooseStyle('font3', 30)">大</a></li>
<li><a href="javascript:chooseStyle('font4', 30)">最大</a></li>
</ul>
</span><!–changefont–>
</body>
</html>
style.css
———————————–
#changefont li{
display: inline;
}
font1.css
———————————–
body{
font-size: 0.9em;
}
font2.css
———————————–
body{
font-size: 1.0em;
}
font3.css
———————————–
body{
font-size: 1.3em;
}
font4.css
———————————–
body{
font-size: 1.6em;
}
上記以外にはjquery.jsを用いる方法等が利用されているよう。
他にも様々な方法を紹介しているサイトはこちら
CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie
xampp(PHP)で警告文が出ないのに、サーバーにアップするとWarning: mb_ereg() [function.mb-ereg]: mbregex compile err: premature end of char-class ***.php on line xxxというエラーが発生するケースがある。
この場合、mb_ereg()の手前に mb_regex_encoding("UTF-8");を挿入する事で解決できる。
xamppでエラーが出ている場合は、プログラムそのものに間違いがある可能性が高い。
mb_convert_kanaは全角仮名を全角カナに変換する等を行う事ができる。
紹介サイトで$test = mb_convert_kana($test, 'KVC');というような例があるが、変換されない事がある。
そこで$test = mb_convert_kana($test , 'KVC', 'utf-8');のように文字コードを指定する事で正常に変換できる。
PHPメール送信スクリプトで文字化けする場合はmb_send_mailを記載する前に以下を追加
mb_language('Japanese'); //文字化け対策
mb_internal_encoding("UTF-8"); //文字化け対策
PHPにを記載すると以下のようなエラーが出る。
Parse error: syntax error, unexpected T_STRING in *********/complete.php on line 1
これは<??>の部分をPHPスクリプトと判断するため。
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>と記載すれば問題解決できる。
<?php echo '<?xml version=\"1.0\" encoding=\"utf-8\"?>'; ?>と記載すれば問題解決できる。
※\はwindowsでは￥(半角の円マーク)
追記
<?php echo '<?xml version="1.0" encoding="utf-8"?>'; ?>から
<?php echo '<?xml version=\"1.0\" encoding=\"utf-8\"?>'; ?>に変更