2009 年 4 月 のアーカイブ

ページが遷移してもフォントサイズが変更されないサイトを作る方法

2009 年 4 月 27 日 月曜日

ニュースサイト等で右上にあるフォントを選択 小・中・大 などのフォントを変更する方法。
jQueryとjquery.cookie.jsでcookieを制御して構築する。

参考サイトは以下の通り。

フォントサイズを動的に変更 [with jQuery]
jQueryサンプル Ajaxフォントサイズを変更・切り替えcookieに保存

マークアップする人の好みの問題だが、4GALAXYさんの

jQueryサンプルCSS(スタイルシート)を変更・切り替えcookieに保存を参考ベースにCSSを直接制御する方が汎用的に構築し易い場合があるかもしれない。

<ul>
<li onclick="jstyle('/page/css/style1.css')">Style1</li>
<li onclick="jstyle('/page/css/style2.css')">Style2</li>
<li onclick="jstyle('/page/css/style3.css')">Style3</li>
</ul>

<ul>
<li><a href="#" onclick="jstyle('font1.css')">小</a></li>
<li><a href="#" onclick="jstyle('font2.css')">中</a></li>
<li><a href="#" onclick="jstyle('font3.css')">大</a></li>
</ul>

このエントリーを含むはてなブックマーク

jQueryでドラック&ドロップ

2009 年 4 月 27 日 月曜日

EC CUBEのデザイン管理や、Googleの各種サービス、BBCなどで採用されている
ドラック&ドロップでページデザインを変更する基本サンプル。
http://interface.eyecon.ro/demos/drop.html
http://interface.eyecon.ro/demos/drag.html

他にも下記サイトで紹介されている。
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編

このエントリーを含むはてなブックマーク

ホームページ / サーバー / ドメインの勘定科目

2009 年 4 月 26 日 日曜日

ホームページにプログラムが組み込まれていない場合
⇒広告宣伝費

ホームページにプログラムが組み込まれている場合
⇒ソフトウェア・消耗品費

サーバー
⇒通信費

ドメイン
⇒支払い手数料

このエントリーを含むはてなブックマーク

javascriptを動的にインポートする方法

2009 年 4 月 24 日 金曜日

今までJavaScriptのインポートというとdocument.writeで呼び出す方法が紹介されていたが、下記サイトで紹介されている方法も便利。元サイト自体はなくなっているようだが…。

youmos : JavaScriptでJSやCSSを動的インポートする (import.js)http://youmos.com/news/import_js

このエントリーを含むはてなブックマーク

text-align:distribute で文字間隔と単語間隔を調整して均等割付する

2009 年 4 月 24 日 金曜日

text-align:distribute はIEのみ採用されているプロパティで、文章を綺麗に整えたい場合に使用する。現在はIEのみ使えるが、今後他ブラウザ(FirefoxやSafari)で採用されるかは不明。

このエントリーを含むはてなブックマーク

モバイル(携帯サイト)でアクセス解析にGoogle Analyticsを使う方法

2009 年 4 月 24 日 金曜日

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の実機のアクセスを確認済み。

このエントリーを含むはてなブックマーク

JQueryを使ったプルダウンメニュー

2009 年 4 月 24 日 金曜日

CSS+JavaScritpのもう1つとしてJQueryを使ったプルダウンメニューがある。
JQueryを使用する機会も多くなっているので、JQueryを使用する場合は、使用を検討する価値がある。

CSS LectureさんのjQueryを使って簡単プルダウンメニューは、コードも綺麗で使いやすい。
http://www.css-lecture.com/log/javascript/005.html

このエントリーを含むはてなブックマーク

CSSとJavaScriptによるドロップダウンメニューの作成方法

2009 年 4 月 24 日 金曜日

CSSのみで作るドロップダウンメニューやJavaScriptのみの方法、それらが混在した方法などがあるが、アクセシビリティなど云々を取っ払って、一番使いやすいのは

JavaScript + Ajax 実践サンプル集さんのドロップダウンメニューだと思う。
http://jsajax.com/DropDownMenuArticle286.aspx

CSSオンリーはコードが複雑になりがちだし、JavaScriptオンリーの場合はさすがにSEO関連の問題もある。Flashもしかり。この辺はサイトの性質やブランディングによって判断すれば良いが、このサンプルは汎用性的に使えるし、わかりやすい。

ただ、サンプルそのものの状態ではクロスブラウンジングされていないので、CSSを少しいじれば(submenuにwidthを指定するなど)問題ない。

このエントリーを含むはてなブックマーク

WordPressで投稿の日付を変更する

2009 年 4 月 22 日 水曜日

Movable TypeからWordPressへ移行する際に、記事ボリュームが多い場合はDBの移行から行った方が良いが、ページ数が少ない場合はコピペで記事を移行した方が速い場合がある。その時に注意するのが投稿の日付。

デフォルトのままでは移行データのすべてが、移行日になってしまうので【公開日時】を指定する事で投稿日時を指定する事が可能。

このエントリーを含むはてなブックマーク

EC CUBEでカテゴリーの最大階層を増やす

2009 年 4 月 21 日 火曜日

EC CUBEはデフォルトでカテゴリーの最大階層が5に指定されている。これを増やすにはパラメーター設定のLEVEL_MAXの数値を変更すれば良い。
カテゴリーを細分化したい場合、特にSEO対策などを念頭におく場合には数値の変更。

このエントリーを含むはてなブックマーク