2012.01.18
以前書いた、
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。
JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。
修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。
・デモ
・ダウンロード
取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。
Flash , JavaScript
2011.12.28
Dreamweaverの「ブラウザでプレビュー」と「デザインビュー」の機能は
コーディング時の確認にとても役立つ機能ですが、
「サイトの管理」と合わせて使うことでさらに便利になります。
何のことかというと、サイトを設定することで
ルートパスが使われているサイトでもプレビューできる、ということです。
サイトの管理でサーバーの情報（URL接頭辞など）が正しく入っていると、
/（ルート階層）から始まるパスで書かれたファイルも
デザインビューの表示に反映させることができます。
さらに、環境設定から 「ブラウザでプレビュー」＞「一時ファイルを使用してプレビュー」にチェックを入れると、
「ブラウザでプレビュー」したとき一時的にサーバーにファイルが生成され、
実際にアップしたときの見え方を確認することができます。
※その際参照するファイルはサーバー上のものなので、
画像やスタイルなど必要なファイルはアップする必要があります。
サイト管理の設定をするのは少し面倒かもしれませんが、
毎回 アップ → 確認 とするよりは随分楽になると思います。
コーディング時の確認にとても役立つ機能ですが、
「サイトの管理」と合わせて使うことでさらに便利になります。
何のことかというと、サイトを設定することで
ルートパスが使われているサイトでもプレビューできる、ということです。
サイトの管理でサーバーの情報（URL接頭辞など）が正しく入っていると、
/（ルート階層）から始まるパスで書かれたファイルも
デザインビューの表示に反映させることができます。
さらに、環境設定から 「ブラウザでプレビュー」＞「一時ファイルを使用してプレビュー」にチェックを入れると、
「ブラウザでプレビュー」したとき一時的にサーバーにファイルが生成され、
実際にアップしたときの見え方を確認することができます。
※その際参照するファイルはサーバー上のものなので、
画像やスタイルなど必要なファイルはアップする必要があります。
サイト管理の設定をするのは少し面倒かもしれませんが、
毎回 アップ → 確認 とするよりは随分楽になると思います。
2011.12.13
※2014.3.5 追記
LightBox v2.6をお使いの方はこちら。
→ LightBoxのtitleコメント内で改行（v2.6）
Lightboxを使用する際、
aタグのtitleの中に入れた文言を
改行したいようなシチュエーションがあると思います。
そういった場合はどうすればいいかですが、
<a href="sample_big.gif" title="いちぎょうめ<br />にぎょうめ"><img src="sample.gif" alt="sample" /></a>
これで何とかなってしまいます。
ですが、titleの中にHTMLタグを書きたくないと考える方も多いはず、
その場合は、HTMLソースに多少変更を加え、
jquery.lightbox-0.5.jsのほうを弄れば解決できます。
LightBoxのtitleコメント内で改行の続きを読む
2011.11.30
Flashでのシェアボタンの設置方法です。
HTMLで<a>タグにパラメーターを与えるのと同じように、
getURLのアドレスにパラメーターを加えることで作成できます。
■twitter
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
------------------------------------------------------------------------------
■Facebook
------------------------------------------------------------------------------
getURL( "http://www.facebook.com/sharer.php?u=http://www.google.co.jp/" );
------------------------------------------------------------------------------
ただし、上記のように日本語を使う場合は
そのままではエラーが出てしまうので、UTF-8でURLエンコードをする必要があります。
escape() を使い、日本語を含むテキストを変換します。
※System.useCodepage が true になっている場合は false にします
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
↓
getURL( "http://twitter.com/share?url=http://www.google.co.jp/&text="+ escape("twitterテスト") , "_blank" );
------------------------------------------------------------------------------
これでFlashにもシェアボタンを設置することができます。
HTMLで<a>タグにパラメーターを与えるのと同じように、
getURLのアドレスにパラメーターを加えることで作成できます。
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
------------------------------------------------------------------------------
------------------------------------------------------------------------------
getURL( "http://www.facebook.com/sharer.php?u=http://www.google.co.jp/" );
------------------------------------------------------------------------------
ただし、上記のように日本語を使う場合は
そのままではエラーが出てしまうので、UTF-8でURLエンコードをする必要があります。
escape() を使い、日本語を含むテキストを変換します。
※System.useCodepage が true になっている場合は false にします
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
↓
getURL( "http://twitter.com/share?url=http://www.google.co.jp/&text="+ escape("twitterテスト") , "_blank" );
------------------------------------------------------------------------------
これでFlashにもシェアボタンを設置することができます。
Flash
2011.11.16
リンクをクリックしてページ移動をする際、
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
通常のリンクでは履歴が残り、ブラウザの「戻る」が有効になります。
iframe内のページを切り替える場合も同じで、
履歴に残るため「戻る」を押すとiframe内のページが戻ります。
今回はiframe内では戻るを使えないようにしたかったので、
履歴に残らないようなページの切り替えを探しました。
JSで以下のように書くことで、「戻る」の効かないリンクになります。
<a href="test.html">リンクです</a>
↓
<a href="test.html" onClick="JavaScript:location.replace('test.html'); return false;">リンクです</a>
※2011/11/24 ソースを修正しました
URLを2箇所に書く点に注意です。
JavaScript
2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
JS
2011.11.09
MacでDreamweaverを使用してhtmlファイルを制作している場合
デフォルトでは改行コードは「Mac（CR）」になっています。
ブラウザでの表示にはMacでもWindowsでも問題はありません。
が、Windowsでブラウザ上ソースを確認する場合、
改行が全てとれてしまい、ものすごく確認しづらい事になってしまいます。
Macで制作しているんだから仕方ないと思っていましたが、
Dreamweaverの設定で、「CRLF（Windows）」を選んでおくことができます。
【設定場所】
メニューの「Dreamweaver」から「環境設定」を選択
出てきたウィンドウの左から「コードフォーマット」を選ぶ
改行タイプというところからドロップダウンで選ぶ
デフォルトでは改行コードは「Mac（CR）」になっています。
ブラウザでの表示にはMacでもWindowsでも問題はありません。
が、Windowsでブラウザ上ソースを確認する場合、
改行が全てとれてしまい、ものすごく確認しづらい事になってしまいます。
Macで制作しているんだから仕方ないと思っていましたが、
Dreamweaverの設定で、「CRLF（Windows）」を選んでおくことができます。
【設定場所】
メニューの「Dreamweaver」から「環境設定」を選択
出てきたウィンドウの左から「コードフォーマット」を選ぶ
改行タイプというところからドロップダウンで選ぶ
Dreamweaver , 改行コード
2011.11.02
今まであまり外部クラスには触れずにきたのですが、
やっぱり便利なものは使わないと、というのと、
AS3.0を始める前に慣れておけるようにということで、
良さそうなところを見つけてちまちま外部クラス化したりしています。
そこで気になったのがonEnterFrameの扱い。
読み込んだ先でonEnterFrameを上書きしてしまっても困るし、
かといって空mcを作ってその中で動かすにしても、
そのmcからまた外部クラス内の処理を呼び出す方法がわからなかったりで
（こっちは調べればちゃんとした方法がありそうですが）
上手く使いこなせていませんでした。
なにかいい方法がないかと探していたところ、
AS2の外部クラス内で簡潔にonEnterFrameを有効にする という
まさにぴったりの記事が！
OnEnterFrameBeaconクラスというクラスを使うことで、
外部クラス内でonEnterFrameを使えるんですね・・
これは今後も（自分の中で）活躍しそうです。
やっぱり便利なものは使わないと、というのと、
AS3.0を始める前に慣れておけるようにということで、
良さそうなところを見つけてちまちま外部クラス化したりしています。
そこで気になったのがonEnterFrameの扱い。
読み込んだ先でonEnterFrameを上書きしてしまっても困るし、
かといって空mcを作ってその中で動かすにしても、
そのmcからまた外部クラス内の処理を呼び出す方法がわからなかったりで
（こっちは調べればちゃんとした方法がありそうですが）
上手く使いこなせていませんでした。
なにかいい方法がないかと探していたところ、
AS2の外部クラス内で簡潔にonEnterFrameを有効にする という
まさにぴったりの記事が！
OnEnterFrameBeaconクラスというクラスを使うことで、
外部クラス内でonEnterFrameを使えるんですね・・
これは今後も（自分の中で）活躍しそうです。
Flash
2011.10.19
ボックス内の要素を縦中央に揃えたい、ということは良くあると思いますが、
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
2011.10.18
PhotoshopでWeb用に画像を書き出す場合、
デフォルトでは、スライスの設定をしていると「images」に書き出されます。
弊社では「images」ではなく「img」を使用する場合が多いため、
フォルダ名を修正していました。
が、この書き出しの際の設定が下記の手順で簡単に出来ます。
【1】書き出しのダイアログ左上のボタンをクリック
【2】メニューが出てくるので最下部の「出力設定の編集...」を選択
【3】出力設定のダイアログが出たら
（1）のドロップダウンメニューで「ファイルの保存」を選択
「images」を「img」に変更したい場合は（2）で設定。
チェックを外せばフォルダに書き出さないように出来ます。
デフォルトでは、スライスの設定をしていると「images」に書き出されます。
弊社では「images」ではなく「img」を使用する場合が多いため、
フォルダ名を修正していました。
が、この書き出しの際の設定が下記の手順で簡単に出来ます。
【1】書き出しのダイアログ左上のボタンをクリック
【2】メニューが出てくるので最下部の「出力設定の編集...」を選択
【3】出力設定のダイアログが出たら
（1）のドロップダウンメニューで「ファイルの保存」を選択
「images」を「img」に変更したい場合は（2）で設定。
チェックを外せばフォルダに書き出さないように出来ます。
Photoshop , Web用に書き出し
