JavaScriptの最近のブログ記事
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関連)
Flashから新しいウィンドウをポップアップさせるものを作ります。
普通のリンクなら、asはgetURLを使いますが、JSを呼ぶ際にも使います。
//javascript//////////////////////////////////////////////////////////////////
//swfを貼るhtml内に、下のようなjavascriptを記述
//今回は、Openwin()という名前のjavascriptを呼び出していますが、任意で変更可
//このままの場合、bute lab.が1024*768pxのウィンドウで開きます。
//ActionScript//////////////////////////////////////////////////////////////////
？？？_mc.onRelease = function () {
getURL("javascript:Openwin();");
}
普通のリンクなら、asはgetURLを使いますが、JSを呼ぶ際にも使います。
//javascript//////////////////////////////////////////////////////////////////
//swfを貼るhtml内に、下のようなjavascriptを記述
//今回は、Openwin()という名前のjavascriptを呼び出していますが、任意で変更可
//このままの場合、bute lab.が1024*768pxのウィンドウで開きます。
<Ｓcript language="JavaScript">
<!--
function Openwin(){
myWin=window.open('http://www.bute-studio.com/lab', 'winName', 'left=0,top=0,width=1024,height=768,status=0,scrollbars=0,menubar=0,location=1,toolbar=0,resizable=1');
}
//-->
</script>
//ActionScript//////////////////////////////////////////////////////////////////
？？？_mc.onRelease = function () {
getURL("javascript:Openwin();");
}
ブログパーツをFlashで製作し、それをjsのソースにまとめ、1行程度のソースをコピーするだけで多くのブログパーツは貼れるようになっています。
同様に、自分で製作したものもjsで貼れるようにしてみました。
swfのサイズやflashplayerのバージョン、swfへのパスは書き換えが必要です。
このjavascriptを任意の名前で自分のサーバーに保存します。(今回はcountdwn.js)
そして、ユーザーに張ってもらうソース内に、このjsを呼ぶように記述します。
//配布用htmlソース//////////////////////////////////////////////////////////////////
function closeFla(){
if(document.getElementById) {
document.getElementById("flaLayer").style.visibility = 'hidden';
}else if(document.all){
document.all("flaLayer").style.visibility = 'hidden';
}else if(document.layers) {
document.layers["flaLayer"].visibility = 'hide';
}
}
function docWrite(){
<!--参照元のSWFをここで指定-->
var swf = "http://kimochi.bute-studio.com/blog/countdown.swf";
var html="";
html+='<div id="flaLayer" style="visibility:visible;">';
html+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="150" height="150" id="switch_bomb" align="middle">';
html+='<param name="allowScriptAccess" value="always" />';
html+='<param name="movie" value="'+swf+'" />';
html+='<param name="quality" value="high" />';
html+='<param name="wmode" value="transparent">';
html+='<param name="bgcolor" value="#333333" />';
html+='<embed src="'+swf+'" quality="high" bgcolor="#333333" width="150" height="150" name="switch_bomb" align="middle" wmode="transparent" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
html+='</object>';
html+='</div>';
document.write(html);
}
docWrite();
同様に、自分で製作したものもjsで貼れるようにしてみました。
swfのサイズやflashplayerのバージョン、swfへのパスは書き換えが必要です。
このjavascriptを任意の名前で自分のサーバーに保存します。(今回はcountdwn.js)
そして、ユーザーに張ってもらうソース内に、このjsを呼ぶように記述します。
//配布用htmlソース//////////////////////////////////////////////////////////////////
<!--src='http:/***'の部分は、置き換えて使います-->//javascript//////////////////////////////////////////////////////////////////
<script type='text/javascript' src='http://kimochi.bute-studio.com/blog/countdwn.js'></script>
function closeFla(){
if(document.getElementById) {
document.getElementById("flaLayer").style.visibility = 'hidden';
}else if(document.all){
document.all("flaLayer").style.visibility = 'hidden';
}else if(document.layers) {
document.layers["flaLayer"].visibility = 'hide';
}
}
function docWrite(){
<!--参照元のSWFをここで指定-->
var swf = "http://kimochi.bute-studio.com/blog/countdown.swf";
var html="";
html+='<div id="flaLayer" style="visibility:visible;">';
html+='<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="150" height="150" id="switch_bomb" align="middle">';
html+='<param name="allowScriptAccess" value="always" />';
html+='<param name="movie" value="'+swf+'" />';
html+='<param name="quality" value="high" />';
html+='<param name="wmode" value="transparent">';
html+='<param name="bgcolor" value="#333333" />';
html+='<embed src="'+swf+'" quality="high" bgcolor="#333333" width="150" height="150" name="switch_bomb" align="middle" wmode="transparent" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />';
html+='</object>';
html+='</div>';
document.write(html);
}
docWrite();
はてなブックマークに追加
del.icio.usに追加