CSS・Javascript

OpnePNEでflickr用に小窓(cmd)を使いたいとき(そのまま使えるサンプル掲載)

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
と4種類で始まっている

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

つまり、上記4つのサブドメインに対応するCMD(小窓)を用意したければ、4つの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の4種類に限定しているが、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(小窓)となる。

Windows IE環境において、follow-usバッジで表示エラーのアラートが表示される時

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アソシエイトIDを使いたい時

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);、
に変更する。

SmartyでHTMLタグを有効にする方法

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

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

({$hoge:nodefaults})

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

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

iPhoneサイトで上下に表示されるパネルを非表示にする方法。

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/

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

携帯用Google Adsenseの文字サイズやスペースの変更方法。

前回の記事、『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でG_HYBRID_TYPEが表示されない。

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

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

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

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

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

cssでメニューのマウスオーバー時に透明度を変更させたいとき

メニューのマウスオーバー時に透明度を変更させたいとき
三種類の指定をすることにより、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;
}

Google AJAX Feed APIを使ってブログパーツを作る(その3)

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

レンタルブログやレンタルホームページといった、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を修正・変更して試してもらいたい。

Google AJAX Feed APIを使ってブログパーツを作る(その2)

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

レンタルブログやレンタルホームページといった、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を修正・変更して試してもらいたい。