前出の記事のページを拡張する際に、他ドメインのページ(html)をjQuery.ajax()で読込んで、パースをしたいと思いましたが、IE(6,7,8で確認)で確認すると、ロードは完了していますが、中身は思うように読込まれませんでした。他のブラウザでは問題なく動きましたが。
解決方法としては、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) {
       //この中で処理
}
}

この度の東日本大震災や福島第1第2原発により避難されているみなさま、被害に遭われたみなさまに心よりお見舞い申し上げます。

日々の報道を見るだけで、いかに自分が無力かを感じる日々です。
まずは何か出来ないかと考え、取り急ぎ、神奈川県横浜市発表のγ線量測定値を利用して、現状の大気から受ける放射線年間被曝量を計算して表示するページを作りました。
データ配信元の負荷軽減を考えて、取得する値はPHPを介して一旦自分のサーバー内に保存する仕組みにしました。サーバー内のデータ取得時間と各エリア毎に設定してある再取得間隔を照らし合わせ、必要な時だけ各自治体等のサーバーから、数値を取得しています。
エリアは随時追加中です。現在福島県内各地点を追加中です。


大気中放射線線量年間積算値 β



このページで現状を知って頂くことが、多くの方の安心へとつながればと思います。

2011.7.29 福島県各地点を追加
2011.6.24 北海道札幌市を追加
2011.4.11 茨城県つくば市を追加
2011.4.15 茨城県水戸市 / 岩手県盛岡市を追加
2011.4.16 栃木県宇都宮市 / 東京都新宿区 / 千葉県市原市を追加
2011.4.18 青森市 / 秋田市 / 山形市 / 群馬県前橋市 / さいたま市を追加
2011.4.19 新潟市 / 長野市 / 山梨県甲府市追加を追加
メニューを<ul><li>を使って作り、CSSで背景画像を入れて、テキストはいらないので、、、
と思ってtext-indentをしようと思ったら完全に無視されました。

調べてみると、親要素にtext-alignを指定していると効かないようです。
情けないですが、そんなことで30分翻弄されました。

▼参考にしたサイト
Web Design Memo: text-indent:-9999pxが効かない

ただ単純にオブジェクトにブラーをかける場合です。
importをちゃんと書かないとコンパイルエラーになります。


import flash.filters.BlurFilter;
//import flash.filters.BitmapFilterQuality; //任意

var targetObj = XXXXXXX;
var my_blur:BlurFilter = new BlurFilter();
my_blur.blurX = 10;
my_blur.blurY = 5;
//my_blur.quality = BitmapFilterQuality.HIGH;//任意
targetObj.filters = [my_blur];

画像更新が必要なコンテンツでは、今まではFlashを開かずに更新ができるように1枚1枚画像を追加し、それらを紐づけるXMLも持たせて・・・という作りを多用してきましたが、最近、画像の多さ=ファイルの多さはネットワークを介して読込みにいくという行為1つ1つにhtmlのヘッダやらなんやらのいろいろなトラフィックが発生するので、ファイルサイズ以上にストレスになる気がしています。
ということで、画像たちは1つの外部swf内に入れ、クラスとして書き出しておくことで、メインのflashからnewで使うようにしています。
その際に、同じ形状のものは1つのmovieclipとして、フレームで入れ込んで使っています。

言葉で書くといまいちわかりにくいですが、今後のコピペのために、ActionScriptを下に書いておきます。
※スクリプトに間違いがあったので、修正しました。(2010.12.2)

Actionscript3==========
var fileLoader:Loader;
var classA:Class;
var classB:Class;
       
function loadFiles (){
    fileLoader:Loader = new Loader();
    var my_file = "files.swf";
    var myRequest:URLRequest = new URLRequest(my_file);
    fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawFiles);
    fileLoader.load(myRequest);
}
       
function drawFiles(event:Event):void {
    classA = fileLoader.contentLoaderInfo.applicationDomain.getDefinition("movieclipA") as Class;
    classB = fileLoader.contentLoaderInfo.applicationDomain.getDefinition("movieclipB") as Class;
}

function checkTotalmobiles(){
    var a_mc = new classA();
    trace("totalFrames="+a_mc.totalFrames);
    //addchildは不要
}



サイトによっては、Flashエリアのサイズをwindowサイズによって替えたり、もしくはディスプレイのサイズによって、Flashエリアの高さを変えて入れる場合です。
Flashと関係なく、一般的なhtmlサイトでウィンドウサイズによってエリアの大きさを変えるには、下のサンプルを利用して高さを規定し、JSでクラス名を置き換えるか、JSでstuleのそれぞれの値を変えることでも実現できます。

それほど難しいものではありませんが、今後コピペで使うために載せておきます。
※swfobjectは2を利用

<script type="text/javascript">
function getMyH(){
    var my_h = getBrowserHeight();
    if(my_h<=700){
        my_h = 650;
    } else {
        my_h = 780;
    }
     return my_h;  
}
function getBrowserHeight() {  
    if ( window.innerHeight ) {
        return window.innerHeight;
    }
    else if ( document.documentElement && document.documentElement.clientHeight != 0 ) {
        return document.documentElement.clientHeight;
    }
    else if ( document.body ) {
        return document.body.clientHeight;
    }
    return 780;  
}

var swf_h = getMyH();
swfobject.embedSWF('file.swf', 'flasharea', '100%', swf_h, '9');
</script>




AS2で出来たコンテンツを修正していたら、FuseKitで動かしているものを変更しなければならなくなり、いまごろAS2の話ですみません。

FuseKitでTweenさせているオブジェクトを一時停止させたり、再度再生させる場合です。
下のサンプルでは、3つのムービークリップをFusekitで動かしています。
これらを個別、もしくは同時に一時停止・再生させる場合です。


Actionscript2==========
mc1.slideTo("0",50,1,"linear",{cycles:0})
...


btn.onRollOver = function (){ mcPause(true) }
btn.onRollOut = function (){ mcPause(false) }


private function mcPause(isPause){
    if(isPause){
        //ZigoEngine.pauseTween('ALL'); //全てのTweenを一時停止
        ZigoEngine.pauseTween(mc1, '_y');//mc1の_yのTweenを一時停止
        ZigoEngine.pauseTween(mc2, '_alpha');//mc2の_alphaのTweenを一時停止
        ZigoEngine.pauseTween(mc3, '_brightOffset');//mc3の_brightOffsetのTweenを一時停止
    } else {
        //ZigoEngine.unpauseTween('ALL');//全てのTweenを再度再生
        ZigoEngine.unpauseTween(mc1, '_y');
        ZigoEngine.unpauseTween(mc2, '_alpha');
        ZigoEngine.unpauseTween(mc3, '_brightOffset');
    }
}


他のbute-lab.内のFuseKitに関する記事はこちら

XMLやプログラム内で動的にテキストを流し込んだ際の、文末に何かオブジェクトを配置したい場合に、どうしてもテキストエリアの幅と高さを知る必要があります。

その場合は、単純にtextWidthやtextHeightを使って取得します。
下のサンプルでは、txtでテキストエリアを引数で投げると主に、formatでTextFormatも一緒に指定する場合です。


Actionscript3==========
trace("幅は"+stringWidth(my_txt,my_format));

//文字列の幅の取得
private function stringWidth(txt,format):int {
    txt.setTextFormat(format);
    return txt.textWidth;
}

//文字列の高さの取得
private function stringHeight(txt,format):int {
    txt.setTextFormat(format);
    return txt.textHeight;
}

ActionScript3で制作する際に、読込時の負荷の分散化のため、いくつかのmovieclipを外部swfとして読込みたい時があります。
そんな別ファイルにしたswfの中にあるオブジェクトもメインのswf内でライブラリにあるムービークリップと同じくnewして使いたい場合です。
この方法を知ってから、ローディングの時点で必要ないオブジェクトは全て別swfとして必要なときに読み込んでClassとして使えるので、とても重宝しています。

下のサンプルでは、外部swfファイルのparts.swf内のライブラリを画像のように設定したmc_tmpを、メインのswf内でnewして配置する場合です。

Actionscript3==========
function setMainParts(){
    mainLoader = new Loader();
    var myRequest:URLRequest = new URLRequest("parts.swf");
    mainLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, drawParts);
    mainLoader.load(myRequest);           
}

var mc_tmp:Class;   
function drawParts(event:Event):void {
    mc_tmp = mainLoader.contentLoaderInfo.applicationDomain.getDefinition("mc_tmp") as Class;
    var tmp = new mc_tmp();   
    addChild(tmp);               
}           

※ライブラリの設定画面キャプチャは続きを参照

Flash内で更新が必要な部分は、外部のXMLやtxtファイルなどを使い、Flashを編集せずに更新できる仕組みにすることが更新の工数削減に重要なことかと思います。

けれども、単純に番号を変えるだけなど、ごくごく単純なものを規定するだけのためにXMLをパースさせたり、1ファイルを作るのも面倒です。

そんな場合には、html内のswfobjectでパラメーターをFlashに送るようにしています。
これならば、単純なHTMLの更新のみでFlashの更新ができます。

下のサンプルは、swfobject2と、Actionscript3を使ってパラメータ名season:Numberを送った場合です。
LoaderInfoを使ってパラメーター一式を取得しますが、うまく取得できない場合も考え、if文以下の一行を追加し、nullにならないようにしています。

Actionscript3==========
function getParams():void {
    var seasonEvent;
    var htmlParams:Object =  LoaderInfo(this.root.loaderInfo).parameters;
    if(htmlParams["season"]>=0){seasonEvent = htmlParams["season"]} else {seasonEvent = 0};
}


HTML内swfobject==========
<script type="text/javascript">
    swfobject.embedSWF('swf/index.swf', 'main', '100%', '780', '9','', {season:8}, {wmode: 'transparent', scale: 'noscale'});
</script>



PHPを使ってのURLパラメーターの扱いはこちら
URLパラメーターの値を_GETする//PHP
https://www.bute-studio.com/lab/2008/03/url-getphp.html


単純にMT内で月別リストを作るのは、
<MTIfArchiveTypeEnabled archivetype=”Monthly”>
<MTArchiveList archive
type=”Monthly”>
などを使って作ればいいだけの話で、初期状態でもサイドバー内などに設置されているので、どうと言うことはありません。

が、各カテゴリのページなどにも月別リストを入れたい場合、同じように入れると、そのカテゴリ内の月別リストになってしまい、全ての記事が反映されなくなってしまいます。同様に、月別アーカイブのページにカテゴリリストを入れる場合なども、そのアーカイブ内に含まれる記事のみしかリストに反映されないため、下の方法が有効です。

そこで、月別リストは、インデックステンプレートとして外部Javascript化して生成し、それを必要とする各ファイルでロードしてdocument.writeさせます。これなら簡単に全記事の反映された月別リスト/カテゴリリスト等が入れられます。
下のサンプルは月別リストをインデックステンプレートで作成した場合です。

インデックステンプレート==========
var htmllist = '<ul id="sidearchive">';
<MTIfArchiveTypeEnabled archive_type="Monthly">
<MTArchiveList archive_type="Monthly">
htmllist += '<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$>(<$MTArchiveCount$>)</a></li>';
</MTArchiveList>
</MTIfArchiveTypeEnabled>
htmllist += '</ul>';
document.write(htmllist);



最近は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==========

〜〜〜省略〜〜〜
<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>');
        }
    });





スポンサーサイト

  • ※このエリアの広告収益の一部は、各種ボランティア団体へ寄付します。

ブックマークに追加