AJAXの最近のブログ記事
前出の記事のページを拡張する際に、他ドメインのページ(html)をjQuery.ajax()で読込んで、パースをしたいと思いましたが、IE(6,7,8で確認)で確認すると、ロードは完了していますが、中身は思うように読込まれませんでした。他のブラウザでは問題なく動きましたが。
解決方法としては、JavaScript内でなんとかするか、クロスドメイン絡みでPHPを挟んでいるので、そちらでなんとかするかが考えられます。
今回はPHP内で1行追加することで動きました。
どうやら文字エンコーディングの関係でInternetExplorerだけ動かなかったようです。
参考までに、一部JSも記録しておきます。
PHP内
Javascript内
解決方法としては、JavaScript内でなんとかするか、クロスドメイン絡みでPHPを挟んでいるので、そちらでなんとかするかが考えられます。
今回はPHP内で1行追加することで動きました。
どうやら文字エンコーディングの関係でInternetExplorerだけ動かなかったようです。
参考までに、一部JSも記録しておきます。
PHP内
$url = "http://○○/××.html";
$my_html = file_get_contents($url);
//▼この1行の処理を挟む
$html = mb_convert_encoding($html, 'HTML-ENTITIES', 'ASCII, JIS, UTF-8, EUC-JP, SJIS');
echo $html;
Javascript内
function loadHTML(
jQuery.ajax({
url: file,
type: "GET",
dataType: "html",
timeout: 5000,
success: onloadFile,
error: onerror
});
function onloadFile(data) {
//この中で処理
}
}
最近はAJAXを使って、XMLから情報を読み込むサイトが多いですね。確かに、いろいろな場所で使い回す用法は以前ならCMSにhtml自体を生成させていましたが、XMLなどで更新して、それをいろいろな頁に読み込ませて使えるのは便利です。なんたって、更新作業が楽です。iPhone版や、モバイル版、スマートフォン版まで用意するサイトでは、このような1ソースマルチユースは非常に助かります。
今回はJqueryを使って、XMLから情報を読み込んで使いました。
なかでも、日付エンコードが下のようなISO8601形式のものを以下に綺麗に入れるかを考えてみました。
[例]2010-01-06T12:25:30+0900(ISO8601形式)のような日付形式を、「2010.01.06」のように、綺麗に整形させて使う場合です。
今回は、rdfをjQueryでパースさせて、<dc:date>タグ内の日付を取得しました。
xml==========
Javascript==========
今回はJqueryを使って、XMLから情報を読み込んで使いました。
なかでも、日付エンコードが下のようなISO8601形式のものを以下に綺麗に入れるかを考えてみました。
[例]2010-01-06T12:25:30+0900(ISO8601形式)のような日付形式を、「2010.01.06」のように、綺麗に整形させて使う場合です。
今回は、rdfをjQueryでパースさせて、<dc:date>タグ内の日付を取得しました。
xml==========
〜〜〜省略〜〜〜
<item rdf:about="http://www.XXXXX">
<title>タイトル</title>
<link>http://www.XXX</link>
<description>XXXXX</description>
<content:encoded>
<![CDATA[><p>test</p>
<p>test</p>
<hr>
<div align="center"><img src="???.jpg"></div>
<p>test</p>
]]>
</content:encoded>
<dc:date>2010-01-01:00:00+09:00</dc:date>
</item>
〜〜〜省略〜〜〜
Javascript==========
$.ajax({
//読み込むファイル
url: 'xml/news.xml',
async: true,
cache: false,
dataType: "xml",
success: function(xml){
$(xml).find('item').each(function(i){
//読み込む記事数を5に設定
if (i == 5) {
return false;
}
var title = $(this).find('title').text();
var url = $(this).find('link').text();
var date;
$(this).children().each(function() {
if ($(this)[0].tagName == "dc:date") {
date = $(this).text();
}
});
date = dateChanger(date);
$('#slides').append('<a href="'+url+'><li>'+date+title+'<\/a><\/li>');
});
$('#slides ul').wrapAll('<ol><\/ol>');
},
//エラー表示
error: function(xml){
$('#slides').append('<p>読み込み失敗<\/p>');
}
});
iPhoneサイトを作る際に、Flashが使えないので、Javascriptに頼ることになります。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。
iui
http://code.google.com/p/iui/
jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/
どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
jqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。
iuiの詳細に関しては後々アップ予定です。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。
iui
http://code.google.com/p/iui/
jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/
どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
jqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。
iuiの詳細に関しては後々アップ予定です。
FlashはSWFObjectで入れることが多いですが、FlashPlayerがインストールされていなかったり、規定以下のバージョンの場合やJSが有効でない場合は、裏側のページが見えます。
そのときにおいておくバナーの元の場所をメモついでに記録しておきます。
http://www.adobe.com/macromedia/style_guide/buttons/
バナーのリンク先は
www.adobe.com/go/getflashplayer
これは.comのページですが、言語やOSは自動判定して適切なPlayerのDLページへとリダイレクトされます。
そのときにおいておくバナーの元の場所をメモついでに記録しておきます。
http://www.adobe.com/macromedia/style_guide/buttons/
バナーのリンク先は
www.adobe.com/go/getflashplayer
これは.comのページですが、言語やOSは自動判定して適切なPlayerのDLページへとリダイレクトされます。
普段、Mac/Winともに、Firefoxを愛用しています。
それは、いろいろなアドオンを入れて使えるためです。
Mac miniのFirefoxを入れ直すことになったので、ついでに、アドオンの一覧を記録しておきます。
ColorZilla[サイト内の色情報をスポイトで取得できる]
Web Developer 1.1.4[JS,CSSなどのON/OFFや、webに関するいろいろな機能が集約されている]
Measureit[ブラウザ内のものさし]
その他は順次更新予定
それは、いろいろなアドオンを入れて使えるためです。
Mac miniのFirefoxを入れ直すことになったので、ついでに、アドオンの一覧を記録しておきます。
ColorZilla[サイト内の色情報をスポイトで取得できる]
Web Developer 1.1.4[JS,CSSなどのON/OFFや、webに関するいろいろな機能が集約されている]
Measureit[ブラウザ内のものさし]
その他は順次更新予定
Flashを貼るには、swfobjectを愛用していますが、ExpressInstallなどをカスタマイズしたくて調べていたら、大元のサイトにはいろいろと使い方が細かく書かれていますね。(もちろん英語ですが)時間のあるときに読むために。。。
それと、adobeのサイト内の解説も。
blog.deconcept.com
adobeディベロッパーセンター(swfObject関連)
それと、adobeのサイト内の解説も。
blog.deconcept.com
adobeディベロッパーセンター(swfObject関連)