JavaScriptの最近のブログ記事
サイトによっては、Flashエリアのサイズをwindowサイズによって替えたり、もしくはディスプレイのサイズによって、Flashエリアの高さを変えて入れる場合です。
Flashと関係なく、一般的なhtmlサイトでウィンドウサイズによってエリアの大きさを変えるには、下のサンプルを利用して高さを規定し、JSでクラス名を置き換えるか、JSでstuleのそれぞれの値を変えることでも実現できます。
それほど難しいものではありませんが、今後コピペで使うために載せておきます。
※swfobjectは2を利用
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>
単純にMT内で月別リストを作るのは、
<MTIfArchiveTypeEnabled archivetype=”Monthly”>
<MTArchiveList archivetype=”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);
iPhone用サイトを作る場合は、画面サイズが縦横で異なります。
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。
表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);
function setOrientation() {
var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
var cl = document.body.className;
cl = cl.replace(/portrait|landscape/, orient);
document.body.className = cl;
}
</script>
<style>
body.portrait #main_image img{
width:320px;
height:160px;
}
body.landscape #main_image img{
width:480px;
height:240px;
}
</style>
</head>
<body class="portrait">
<div id="main_image">
<img src="img1.jpg" width="320" height="160" />
</div>
</body>
参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips
Flash内からHTML内の背景色を変更したい場合に、ActionScript3.0とJavaScript、CSSの連係プレーで実装します。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。
下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。
下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。
//Flash内AS3.0
import flash.external.ExternalInterface;
colorID = no;
var result:uint = ExternalInterface.call("callJS", no);
//JavaScript
function callJS(str) {
switch(str){
case 1: document.getElementById("idname").className = "color1";break;
case 2: document.getElementById("idname").className = "color2";break;
case 3: document.getElementById("idname").className = "color3";break;
}
return str;
}
//CSS
.color1{
width:100px;
height:200px;
background:#ff6600;
}
.color2{
width:100px;
height:200px;
background:#ffffff;
}
.color3{
width:100px;
height:200px;
background:#333333;
}
最近忙しさのせいにして、ブログのアップを怠っています。反省して、来月からまた頑張ります。
Flashで扱う変数をHTMLに記述する //HTML&ActionScript (addvariable)と同様に、配列にしたい変数をHTMl内に記述して、それをFlash内で使用します。
更新が必要な変数をHTML内に変数を書くことで、更新作業の手間が大きく削減できます。
「,」で区切られた文字列をFlash内で配列にするには、
//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。
//ActionScript//////////////////////////////////////////////////////////////////
上をパブリッシュすると、myAryが配列としてtraceされます。
更新が必要な変数をHTML内に変数を書くことで、更新作業の手間が大きく削減できます。
「,」で区切られた文字列をFlash内で配列にするには、
splitを使います。//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。
var so = new SWFObject("swf/test.swf", "devdev", "300", "200", "8");
so.addVariable("hensu", "100,111,154");
so.write("devdev");
//ActionScript//////////////////////////////////////////////////////////////////
var myAry = _root.hensu.split(",");
trace(myAry);
上をパブリッシュすると、myAryが配列としてtraceされます。
Flash内で使う変数をHTMLに記述して使う場面がよくあります。
例えば、1つのswfをいろいろなページで使う場合や、更新が多々あるものの、変数の変更のみの場合、変数をHTML側に書いてあれば、Flashを扱えない人にも更新をお願いすることができます。
もちろんXMLで管理することもできますが、大した量でない場合などは、HTML内に書くと便利です。
下の例は、『moviefile = movie75.flv』と『"picfile", "images/movie18.jpg"』という変数をHTML内に記述した場合の例です。FLVのプレーヤswfをサイト内で使い回し、プレーヤー内で使うFLVファイルと、サムネールなどを変数として投げる設定です。
addVariableを使って変数を設定します。
//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。
//ActionScript//////////////////////////////////////////////////////////////////
1つのswfをいくつかのページで使い回す際などにとても便利です。
例えば、1つのswfをいろいろなページで使う場合や、更新が多々あるものの、変数の変更のみの場合、変数をHTML側に書いてあれば、Flashを扱えない人にも更新をお願いすることができます。
もちろんXMLで管理することもできますが、大した量でない場合などは、HTML内に書くと便利です。
下の例は、『moviefile = movie75.flv』と『"picfile", "images/movie18.jpg"』という変数をHTML内に記述した場合の例です。FLVのプレーヤswfをサイト内で使い回し、プレーヤー内で使うFLVファイルと、サムネールなどを変数として投げる設定です。
addVariableを使って変数を設定します。
//HTML内//////////////////////////////////////////////////////////////////
※FlashをSWFObject v1.5 で読込む場合の読込み該当部分に記述。
var so = new SWFObject("swf/movie.swf", "movie", "300", "200", "8");
so.addVariable("moviefile", "movie75.flv");
so.addVariable("picfile", "images/movie18.jpg");
so.write("movie");
//ActionScript//////////////////////////////////////////////////////////////////
trace(_root.picfile);
trace(_root.moviefile);
のように、これでActionscript内でJSから投げた変数が取得できます。1つのswfをいくつかのページで使い回す際などにとても便利です。
フッターやヘッダー、バナーなど、各ページで共通して使う部分を外部JS化して、1つのファイルを更新することで、全てのファイルの内容が変わるようにします。
HTML内では、ソースを挿入したい部分でJavaScriptをよびます。
//HTML//////////////////////////////////////////////////////////////////
//JavaScript//////////////////////////////////////////////////////////////////
HTML内では、ソースを挿入したい部分でJavaScriptをよびます。
//HTML//////////////////////////////////////////////////////////////////
<script type="text/javascript" src="ぱす/footer.js"></script>
//JavaScript//////////////////////////////////////////////////////////////////
var html = '<div id="footer">';
html += '<a href="#"><img src="http://ぱす/bnr1.jpg" alt="" width="100" height="10"></a>';
html += '<a href="#"><img src="http://ぱす/bnr2.jpg" alt="" width="100" height="10"></a>';
html += '<a href="#"><img src="http://ぱす/bnr3.jpg" alt="" width="100" height="10"></a>';
html += '</div>';
document.write(html);
InternetExplorerでは、position: fixedが使えないので、フッターやヘッダーを固定するレイアウトにする場合は、IE6に対策が必要です。
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。
いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html
これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。
最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。
もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/
ただし、ヘッダーやサイドバーなど、上から一定座標に配置する場合は、position: absoluteを使ってクリアすることができますが、フッターのように、ブラウザ内の下にくっつけて配置したい場合はなかなかうまくいきません。
いろいろとネットで検索するうちに、1つのJavascriptを読込むだけでposition: fixedが有効になるものを発見しました。
doxdesk.com: software: fixed.js
http://www.doxdesk.com/software/js/fixed.html
これを導入してみましたが、残念ながら、IE6でスクロールした際に若干ピクついた挙動をします。
最終手段では、高さ100%のFlashエリアとして入れて、Flash内で下にくっつかせたらどんなに簡単に処理できるだろうと考えています。
もう一つ参考になるサイトがありました。
http://gyauza.egoism.jp/clip/archives/2008/03/080302-ie6positionfixed/
Flashでは常にStage.widthでウィンドウサイズをとって、コンテンツの配置やサイズ等を可変にすることができますが、CSSはwidthを%換算にすることはできますが、他には無いかと思って考えてみました。
今回はFlashで作ったswfを#flashnaviに読み込むためのエリアですが、規定サイズ(ここでは1000px)以下の場合には1000pxより#flashnaviのwidthが縮まらないようにしました。
ウィンドウの幅は、Javascriptのwindow.innerWidthでとれるはず！と思いましたが、IEなどでは計算方法が異なるため、以下の方法を使いました。
下の例では、ウィンドウサイズが1000px以下の場合のみの記述ですが、elseやelse if等を使って、もっと細かく指定するといろいろと使えそうです。
//CSS//////////////////////////////////////////////////////////////////
#flashnavi{
width:100%;
}
//HTML//////////////////////////////////////////////////////////////////
<script language="JavaScript">
<!--
inW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(inW<1000){document.write("<style>#flashnavi{width:1000px !important;}</style>");}
// -->
</script>
今回はFlashで作ったswfを#flashnaviに読み込むためのエリアですが、規定サイズ(ここでは1000px)以下の場合には1000pxより#flashnaviのwidthが縮まらないようにしました。
ウィンドウの幅は、Javascriptのwindow.innerWidthでとれるはず！と思いましたが、IEなどでは計算方法が異なるため、以下の方法を使いました。
下の例では、ウィンドウサイズが1000px以下の場合のみの記述ですが、elseやelse if等を使って、もっと細かく指定するといろいろと使えそうです。
//CSS//////////////////////////////////////////////////////////////////
#flashnavi{
width:100%;
}
//HTML//////////////////////////////////////////////////////////////////
<script language="JavaScript">
<!--
inW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(inW<1000){document.write("<style>#flashnavi{width:1000px !important;}</style>");}
// -->
</script>
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
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関連)
