javascriptを動的にインポートする方法
2009 年 4 月 24 日 金曜日今までJavaScriptのインポートというとdocument.writeで呼び出す方法が紹介されていたが、下記サイトで紹介されている方法も便利。元サイト自体はなくなっているようだが…。
youmos : JavaScriptでJSやCSSを動的インポートする (import.js)http://youmos.com/news/import_js
今まで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のもう1つとして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\"?>'; ?>に変更
xamppの場合phpMyAdminがインストールされるので、コマンドプロンプトを用いる必要性はほとんどないが、一般的な参考書や古いphpやMySQLの参考書はapachのインストール、phpのインストール、MySQLのインストールという手順を踏んでいるので、少し悩む初心者も多いが、xamppの場合はパスが若干異なる程度で、最新のapachやphp,mysqlのインストールに悩む場合、xamppを導入して互換をとればいよい。(互換という程のものではないが…
一般参考書
C:\mysql\bin
xampp
C:\xampp\mysql\bin
なお、windowsコマンドプロンプトでlinuxで使うlsの相当するコマンドはdir
C:\xampp\mysql\binに移動しmysqlと実行すると
mysql>
と表示される。