CSS・Javascript

Smarty（テンプレートエンジン）を使用していて、Google Analytics（グーグル アナリティクス）や、Google AdSense（グーグル アドセンス）、また、メニュー表示用やブログパーツ等でJavaScriptをテンプレートファイル（.tpl）に記述すると表示エラー（表示されない）となり、画面（ページ）が真っ白になってしまう場合の対処方法。

原因はSmartyの仕様により中括弧「{」「}」で囲まれたエリアを処理しようとしてしまうからです。

SmartyのテンプレートでGoogle AnalyticsやGoogle AdSenseを使いたい時は以下の方法で解決できます。

アドセンスのコードやアナリティクスのトラッキング コード（JavaScript）を{literal}〜{/literal}で囲みます。

{literal}
<script type="text/javascript">
〜
</script>
{/literal}

CSS Sprite・CSSスプライトとは、ページに表示される全部の画像をひとつにまとめて一枚の画像にしておき、表示する際にその一枚の画像から必要な部分のみをCSSで切り出して使うテクニック。
簡単な例として、メニュー等で画像を使い、ロールオーバーによる画像変更をする場合、ひと昔前であれば、通常時とマウスオーバー時の画像をそれぞれ用意し、Javascriptでプリロード、同様にJavascriptで画像を差し替える。最近では、通常時とマウスオーバー時の画像を一枚にまとめておき、CSS・スタイルシートを使って画像位置を変える。といった方法がよく使われてきていたが、これをさらに全面的に使うのがCSSスプライト（CSS Sprite）と呼ばれる方法。

確かに、サーバーへのリクエストが減るため軽量化されることが多いが、画像の作成、CSSの設定が面倒なのも事実。
そういった場合には、Sprite Creatorを使うといい。
http://www.floweringmind.com/sprite-creator/
で公開されているこのサービスは、1枚の画像から特定の画像を取り出すCSSを作成するためのツールで、画像をアップロートして切り出したい画像部分を選択すると、それに対応したCSSが自動生成される。

さらに、既存の画像ファイルをCSS Sprite・CSSスプライト化したい場合には、画像をまとめてくれるCSS Sprite Generatorを使う。
http://ja.spritegen.website-performance.org/
使っている画像をまとめてzip圧縮してアップロードすると、１枚の画像にしてくれる上に、CSS SpriteのCSSも自動的に生成してくれる。様々な設定が可能で、クラス名につけるCSS接頭語も設定できるので、既存のサイトのCSSスプライトにも便利だろう。

OpnePNEにはCMD（小窓）という便利な機能があり、小窓が用意されているサイトであれば、そのURLを日記等に記載するだけで、自動的に画像やサービス、動画が埋め込まれたりする。（Google Map、YouTube、Amazon、kakaku.com、等々）

最近ではオンラインサービスであるflickrを利用している人も増えているので、flickr用に小窓（cmd）を使いたいという案件や、作りたい場面があるはず。
小窓の作成は一定のルールさえ分かっていれば、簡単に小窓を作ることが出来る。

flickrの画像URLには、登録者や状況により
http://farm1.static.flickr.com
http://farm2.static.flickr.com
http://farm3.static.flickr.com
http://farm4.static.flickr.com
と４種類で始まっている

flickr用の小窓を作る場合の問題点は、OpnePNEのCMD（小窓）がサブドメインのワイルドカードに対応していないこと。
つまり作成するJavascriptは、それぞれ決め打ちのファイル名であることが必要条件となる。

つまり、上記４つのサブドメインに対応するCMD（小窓）を用意したければ、４つのJavascriptをcmdフォルダに入れておく必要がある。

farm1.static.flickr.com.js
farm2.static.flickr.com.js
farm3.static.flickr.com.js
farm4.static.flickr.com.js

一見無駄なようだが、ワイドルカードで探させるよりサーバー負荷を考えると効率的でもある。

それぞれのサーバー（farm1、farm2、farm3、farm4）用にスクリプトを書いてもいいが、
今後サブドメインが追加された際に、ファイル名だけ変えてコピーできるようにスクリプトを作っておくと便利。

そのまま使えるサンプルスクリプトはこれ

---------------------------------------------------------------------

function url2cmd(url){
   var static_flickr_com = url.match(/^http:?/?/farm([0-9]+)?.static?.flickr?.com?/([0-9]+)?/([a-z0-9_]+)?.(jpg|jpeg|png|gif)/);
   if(static_flickr_com){
      var pid1 = RegExp.$1;
      var pid2 = RegExp.$2;
      var pid3 = RegExp.$3;
      var pid4 = RegExp.$4;
      main(pid1,pid2,pid3,pid4);
   }else{
      pne_url2a(url);
   }
}
function main(pid1,pid2,pid3,pid4){
   var html = '<img src="http://farm' + pid1 + '.static.flickr.com/' + pid2 + '/' + pid3 + '.' + pid4 + '">';
   document.write(html);
}

---------------------------------------------------------------------

念のため、画像ファイル名をjpg、jpeg、png、gifの４種類に限定しているが、flickr.comを信頼して簡略化しても構わない。

上記スクリプトを
farm1.static.flickr.com.js
farm2.static.flickr.com.js
farm3.static.flickr.com.js
farm4.static.flickr.com.js
の名前でそれぞれ作成し、cmdフォルダにアップする。

これでflickr.comに対応したCMD（小窓）となる。

iPhoneStyleのログインページに下記のURLで配布されているfollow-usバッジスクリプトを組み込んだところ、
「インターネットサイト http://iphone-sns.com/?m=pc2&a=page_o_login を開けません。操作は中断されました」
というポップアップアラートが表示され、エラーページにジャンプしてしまう症状が発生。

follow-usバッジ
http://files.go2web20.net/twitterbadge/1.0/badge.js

他のjavascriptとの関係が原因の可能性が高いので、問題のバッジは削除。

一度開いてエラー表示されてしまったユーザーは、キャッシュ（一時ファイル）を読み込んで再びエラー表示となってしまう可能性が高いので、

ページでエラーメッセージが表示されている場合
ツール→インターネットオプション→閲覧の履歴→インターネット一時ファイル「ファイルの削除」

で対応してもらうことにした。

OpenPNE小窓機能とは、Amazonの商品情報等をSNS内の日記他に貼り付けられる機能。
通常、日記本文にAmazonのURLを貼った場合、管理画面で自分のIDを設定していてもOpenPNEのアソシエイト（アフィリエイト）IDのままで、自分のIDにするには、URLに毎回tag=xxxxxxx-22等を追加する必要がある。

これを、OpenPNEの運営オーナーのアソシエイト（アフィリエイト）IDにする方法は以下の通り。

まずは、
http://sourceforge.jp/projects/usamimi/downloads/31915/cmd060.zip
からファイルをダウンロード

cmd060.zip
というファイルがダウンロードされるので、解凍

■javascriptファイル等のアップロード

解凍した「cmd060」フォルダ内の

● openpne/public_html/cmd/フォルダにあるファイルの中から

www.amazon.co.jp.js
amazon.jp.js
amazon.co.jp.js
をサーバーの同階層にアップロード

● webapp_ext/modules/pc/フォルダにあるファイルの中から

page
templates
validate
フォルダをサーバーの同階層にアップロード

※パーミッションの設定は不要

■管理画面での設定

●SNS設定→AmazonアソシエイトID

自分のAmazonアソシエイトIDを設定

●SNS設定→CMD設定

amazon.co.jp
amazon.jp
www.amazon.co.jp
すべて「使用する」になっていることを確認

■config.phpの設定

●拡張モジュールを有効にする。
config.phpファイルを開き

define('USE_EXT_DIR', false);
↓
define('USE_EXT_DIR', true);、
に変更する。

OpenPNEで使われているSmartyは、通常HTMLタグが無効になるようにエスケープされる。
文字データを取得し表示する場合等はこのままで構わないが、アフィリエイト用タグやGoogleアドセンス、Google Analytics、RSSデータ等、タグをエスケープして欲しくない場合もある。
そんな場合は以下のようにnodefaultsを使うことでHTMLタグを有効にすることができる。

■SmartyでHTMLタグを有効にするサンプル

({$hoge:nodefaults})

※通常のSmartyでは、{$hoge}が置き換わるようになっているが、OpenPNEの場合、({$hoge})と表記する。

有効にしたい部分にnodefaultsを使うだけで、読み込むデータがそのまま表示されるようになる。

iPhone 向けサイトにアクセスした場合、通常は上にURLを入力するエリア、
下部に「戻る、進む、ブックマーク」のボタンのついたパネルが常に表示される。

上部のURLエリアは、以下にjavascriptで簡単にスライドさせることができる。

■サンプルjavascript

<script type="text/javascript" charset="utf-8">
	window.onload = function(){
		setTimeout(function(){window.scrollTo(0,1);},100);
	}
</script>

下部のパネルは以下のタグを入れる

<meta name="apple-mobile-web-app-capable" content="yes">

■サンプルサイト（iPhone用壁紙サイト）
Wallpapers@iPhoneStyle
http://iphone-sns.com/wallpaper/

ただし、下部パネルが非表示になるのは、ホーム画面に追加したもののみ。

前回の記事、『MT4iにGoogle Adsenseを入れる方法（サンプル付き）』でアドセンス広告を入れる説明をしたが、表示する文字サイズやスペースを変更する方法を説明したが、表示される広告とのスペースや文字サイズを変更したい場合もあるだろう。
携帯の機種によっては、スタイルシート（css）を読んでくれる機種もあるが、ここでは原始的なインラインタグでの方法を説明する。
なお、この方法は一般的なものだから、MT4iに限らず使える。

■基本：表示をセンターに

<div align="center">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

設定はスタイルタグで設定する。

■文字色を変更したいとき

<div align="center" style="color:#999999;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■文字サイズを設定したいとき

<div align="center" style="color:#999999; font-size:1.2em;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■上マージン（余白）を設定したいとき

<div align="center" style="color:#999999; font-size:1.2em; margin-top:4px;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■下マージン（余白）を設定したいとき

<div align="center" style="color:#999999; font-size:1.2em; margin-top:4px; margin-bottom:0px;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■上下左右にマージン（余白）を設定したいとき

<div style="color:#666666;font-size:0.8em; margin:4px 10px 4px 10px; ">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

Google Maps APIを使って航空写真を初期値にした地図を表示していたページが、いつからか地図が表示されていないといことに今朝気づいた。

左下のロゴと右下の利用規約だけが表示され、地図の部分はグレイのバックカラーが表示されているのみ。

表示させるには、スクリプト内の
map.setMapType(G_HYBRID_TYPE);
の行を削除すれば表示されるようになる。
当然、航空写真とのハイブリッドではなく地図になるが。

最初、航空写真に問題があったのかと思ったが、切り替え表示で航空写真を選ぶと問題なく表示されるから
原因は別にあるようだ。

原因と対策はトライ&調査中。

メニューのマウスオーバー時に透明度を変更させたいとき
三種類の指定をすることにより、IE、Safari、Opera、Firefox、Netscapeに対応。
マウスオーバー用の画像を作らなくても、擬似的に画像を変更した感じにできるから簡単。

当然、透明度を変更するから、背景に画像を敷いている場合は背景が透けてしまう。
その場合はメニュー部の下地に白のバックカラーを流しておくといい。

cssで半透明指定のサンプルスタイルシート

.menu a:hover {
    /* IE */
    filter: alpha(opacity=25);
    /* Safari Opera */
    opacity:0.25;
    /* Firefox Netscape */
    -moz-opacity:0.25;
}

■星占いを表示するブログパーツを作る（ライブドア編）

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト（他ドメイン）で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること（クロスドメイン処理）は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■例：ライブドア（http://fortune.livedoor.com/）の星占いを表示するブログパーツ

ライブドアの星占いでは、その日の全星座の運勢をRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。

そのまま使えるサンプルコードはこれ

<script type="text/javascript">
google.load("feeds", "1");
function initialize(){
    var feed = new google.feeds.Feed("http://fortune.livedoor.com/xml/astro12.rdf");
    feed.setNumEntries(12);
    feed.load(function(result){
        if(!result.error){
            var container = document.getElementById("feed");
            var useFeed = "";
            for(var i = 0; i < result.feed.entries.length; i++){
                var entry = result.feed.entries[i];
                useFeed += '<a href="' + entry.link + '">' + entry.title + '</a><br>';
                useFeed += entry.contentSnippet + '<br>';
            }
            container.innerHTML = '<div class="horoscope">' + useFeed + '</div>';
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
（各結果はその日によって変わる）

牡羊座
人間関係は、万事順調となりそうです。あなたの人柄がものをいう日でしょう。友人の家に招待されたとき、親
牡牛座
周囲の注目を浴びそうな日ですので、言動がうまくいけば大きな幸運がもたらされる反面、失敗すれば大きなダ
双子座
小さな事件が、トラブルへと発展しそうな運気のようです。ただし、その原因は弱気なあなたにあるようです。
蟹座
トラブルのために、人間関係にひびが生じる予感があります。欲を表に出しすぎると、あなたのその欲張りさに
獅子座
このところしっくりいかなかった友人と仲直りをするチャンスです。素直な気持ちであなたのほうから声をかけ
乙女座
周囲からの期待が、あなたにとって重圧となることがありそうな日です。その重圧が大きな負担になり、途中で
天秤座
あなたの優しい思いやりの言動で、周囲の人たちとの関係が、さらに展開する幸運期を迎えています。心を穏や
蠍座
あなたに対する評価がよくなっていく幸運な日です。少々の無理難題でも、自分のことより相手の身になって対
射手座
周囲と対立してしまいそうな日です。無理矢理、自分の考えを押しつけたり、自己中心的な態度をとっていると
山羊座
人間関係が活発な日でしょう。周囲の人との交際から、有益な情報を得ることができたり、何か手助けをしても
水瓶座
調和が幸運のカギになる日です。単独で進んでいったり、あなた自身が前面に出てリーダーシップを取って物事
魚座
親しい友人との関係が、一時的にうまくいかなくなる予感があります。その友人とあなたの間に第三者が割りこ

あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。

■星占いを表示するブログパーツを作る（ウーマンエキサイト編）

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト（他ドメイン）で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること（クロスドメイン処理）は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■例：ウーマンエキサイト（http://woman.excite.co.jp/）の星占いを表示するブログパーツ

ウーマンエキサイトの星占いでは、その日の恋愛運、仕事運、金運を各星座ごとのRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。

そのまま使えるサンプルコードはこれ

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi?key=あなたのAPI Key">
</script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
    var container = document.getElementById("excite");
    var ar = new Array("cp","aq","pi","ar","ta","ge","ca","le","vi","li","sc","sa");
    for(var i=0; i<12; i++){
        var url = "http://woman.excite.co.jp/fortune/xml/?f=horoscope&sign=" + ar[i];
        var feed = new google.feeds.Feed(url);
        feed.load(function(result){
                if (!result.error){var entry = result.feed.entries[0];
                    var str=entry.title;
                    var result = str.split("-");
                    container.innerHTML += '<b>【<a href="' + entry.link + '">' + result[0] + '</a>】</b>' + result[2] + ' ' + result[3] + ' ' + result[4] + '<br>';
                }
        });
    }
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="excite"></div>
</body>
</html>

上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
（各結果の数値はその日によって変わる）

【山羊座】 恋愛運[5] 仕事運[5] 金運[5]
【水瓶座】 恋愛運[4] 仕事運[5] 金運[5]
【牡牛座】 恋愛運[3] 仕事運[2] 金運[2]
【牡羊座】 恋愛運[5] 仕事運[5] 金運[5]
【魚座】 恋愛運[1] 仕事運[3] 金運[3]
【双子座】 恋愛運[2] 仕事運[1] 金運[1]
【蟹座】 恋愛運[3] 仕事運[1] 金運[1]
【天秤座】 恋愛運[5] 仕事運[5] 金運[5]
【乙女座】 恋愛運[2] 仕事運[1] 金運[1]
【獅子座】 恋愛運[4] 仕事運[5] 金運[5]
【蠍座】 恋愛運[5] 仕事運[5] 金運[5]
【射手座】 恋愛運[2] 仕事運[3] 金運[3]

あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。

PerlやPHPでよく使うeachをJavascriptで使う時はforを使う


var ar = new Array("あ","い","う","え","お");
for(var i in ar){
    document.write(ar[i] + '<br>');
}

連想配列の時は

var ar2 = {'あ':'a','い':'b','う':'c','え':'d','お':'e'};
for(var i in ar2){
    document.write(i + '=' + ar2[i] + '<br>');
}

配列の中から複数のランダムな値を取り出したい時、

配列の要素数からランダムな数を取得し、array[n]とするのは簡単だが、要素数が少ないと取り出した値がダブる場合がある。
ダブりを防ぐ方法として、取得した値を要素から削除していく方法もあるが、元の配列の順序をランダムに入れ替え、その配列から順に取り出すのが簡単。

ただし、要素数が多くなると、方法によって処理速度が変わる。
代表的な二つの方法。

■早い

Array.prototype.shuffle = function(){
    var i = this.length;
    while(i){
        var j = Math.floor(Math.random()*i);
        var t = this[--i];
        this[i] = this[j];
        this[j] = t;
    }
    return this;
}

■遅い

Array.prototype.shuffle = function(){
    var len = this.length;
    var ary = this.concat();
    var res = [];
    while(len) res.push(ary.splice(Math.floor(Math.random()*len--),1));
    return res
}

■使い方

var a = new Array("あ","い","う","え","お");
num = a.shuffle();
document.write(num[0]);

Googleが提供している、別ドメインのRSSを取得することができる、Google AJAX Feed APIだが、
ページ全体の表示が遅くなることがある。
いくつかの原因はあるが、ひとつの方法として

<script type="text/javascript" src="http://www.google.com/jsapi?key=あなたのKey"></script>

タグをbody内の最後の方に書くと、ページ自体の表示を少し改善できる。