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と組み合わせてフルブラウザにしてみたり、使い道は多そうです。
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」から「環境設定」を選択
出てきたウィンドウの左から「コードフォーマット」を選ぶ
改行タイプというところからドロップダウンで選ぶ
2011.11.02
今まであまり外部クラスには触れずにきたのですが、
やっぱり便利なものは使わないと、というのと、
AS3.0を始める前に慣れておけるようにということで、
良さそうなところを見つけてちまちま外部クラス化したりしています。
そこで気になったのがonEnterFrameの扱い。
読み込んだ先でonEnterFrameを上書きしてしまっても困るし、
かといって空mcを作ってその中で動かすにしても、
そのmcからまた外部クラス内の処理を呼び出す方法がわからなかったりで
（こっちは調べればちゃんとした方法がありそうですが）
上手く使いこなせていませんでした。
なにかいい方法がないかと探していたところ、
AS2の外部クラス内で簡潔にonEnterFrameを有効にする という
まさにぴったりの記事が！
OnEnterFrameBeaconクラスというクラスを使うことで、
外部クラス内でonEnterFrameを使えるんですね・・
これは今後も（自分の中で）活躍しそうです。
やっぱり便利なものは使わないと、というのと、
AS3.0を始める前に慣れておけるようにということで、
良さそうなところを見つけてちまちま外部クラス化したりしています。
そこで気になったのがonEnterFrameの扱い。
読み込んだ先でonEnterFrameを上書きしてしまっても困るし、
かといって空mcを作ってその中で動かすにしても、
そのmcからまた外部クラス内の処理を呼び出す方法がわからなかったりで
（こっちは調べればちゃんとした方法がありそうですが）
上手く使いこなせていませんでした。
なにかいい方法がないかと探していたところ、
AS2の外部クラス内で簡潔にonEnterFrameを有効にする という
まさにぴったりの記事が！
OnEnterFrameBeaconクラスというクラスを使うことで、
外部クラス内でonEnterFrameを使えるんですね・・
これは今後も（自分の中で）活躍しそうです。
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）で設定。
チェックを外せばフォルダに書き出さないように出来ます。
2011.10.05
LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。
(2016.7.19) 訳せてないものは原文入れました。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
jQuery Pluginの1つとしてFancyboxがありますが、
オプションを日本語でまとめているサイトが見当たらなかったので
自分用に翻訳してみたものをメモしておこうと思います。
(2016.7.19) 訳せてないものは原文入れました。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
| オプション | デフォルト値 | 説明 |
| 'padding' | 10 | 枠の幅 |
| 'margin' | 20 | 枠の外側の余白。 表示するコンテンツがウインドウより大きい場合、この幅を確保して縮小されます。 |
| 'opacity' | false | When true, transparency of content is changed for elastic transitions |
| 'modal' | false | true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります |
| 'cyclic' | false | ギャラリーの一番端でNext/Backボタンを押した時にループするか |
| 'scrolling' | 'auto' | スクロールバーの有無（auto／yes／no） |
| 'width' | 560 | コンテンツの幅（iframe、swf時） |
| 'height' | 340 | コンテンツの高さ（iframe、swf時） |
| 'autoScale' | true | ビューポートに収まるようにスケーリングするか。 'true'の場合、表示するコンテンツがウインドウより大きいと自動的に縮小します。（画像だと無効？） |
| 'autoDimensions' | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
| 'centerOnScroll' | false | コンテンツを常に中央に表示するか |
| 'ajax' | { } | Ajaxオプション |
| 'swf' | {wmode: 'transparent'} | SWFオブジェクトのparams設定 |
| 'hideOnOverlayClick' | true | オーバーレイ部分をクリックした時にfancyboxを閉じるか |
| 'hideOnContentClick' | false | コンテンツをクリックした時にfancyboxを閉じるか |
| 'overlayShow' | true | オーバーレイの有無 |
| 'overlayOpacity' | 0.3 | オーバーレイの不透明度 |
| 'overlayColor' | '#666' | オーバーレイの色 |
| 'titleShow' | true | タイトルの表示/非表示 |
| 'titleFormat' | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation |
| 'titlePosition' | 'outside' | タイトルの位置（outside／inside／over） |
| 'transitionIn' 'transitionOut' |
'fade' | 開閉時の動き（fade／elastic／none） |
| 'speedIn' 'speedOut' |
300 | 開閉時のスピード |
| 'changeSpeed' | 300 | ギャラリーでコンテンツを切り替えた時のサイズ変更スピード |
| 'changeFade' | 'fast' | ギャラリーでコンテンツを切り替えた時のフェードスピード |
| 'easingIn' 'easingOut' |
'swing' | アニメーションに使用するイージング |
| 'showCloseButton' | true | クローズボタンの有無 |
| 'showNavArrows' | true | ギャラリーでNext/Backボタンを表示するか |
| 'enableEscapeButton' | true | Escボタンを押した時にfancyboxを閉じるか |
| 'onStart' | null | Will be called right before attempting to load the content |
| 'onCancel' | null | Will be called after loading is canceled |
| 'onComplete' | null | Will be called once the content is displayed |
| 'onCleanup' | null | Will be called just before closing |
| 'onClosed' | null | Will be called once FancyBox is closed |
| Advancedオプション | 説明 |
| 'type' | コンテンツタイプ。'image' 'ajax' 'iframe' 'swf' 'inline' が設定できます。 |
| 'href' | コンテンツのURL。HTMLのhref=""で設定したものよりも優先されます。 |
| 'title' | コンテンツのタイトル。HTMLのtitle=""で設定したものよりも優先されます。 |
| 'content' | コンテンツの内容。任意のHTMLデータを入れることができます。 |
| 'orig' | Sets object whos position and dimensions will be used by 'elastic' transition |
| 'index' | Custom start index of manually created gallery (since 1.3.1) |
2011.10.05
Photoshopでデザインすると無数のレイヤーが生まれます。
いざ、画面上に見えているオブジェクト？（ではないですが、要するに見えている"ブツ"）がどのレイヤーなのか分かりにくいこと事もしばしば。どのレイヤーなんだー、探せないっ！というときの為に、そのブツがどのレイヤーなのかすぐに判別できる方法を教えてもらいました。備忘録的に記録。
移動ツール
↓
Macならoptionキーを押しながら、探したいブツを右クリック
↓
レイヤーパレット上でブツのレイヤーが選択されている状態になる
簡単ですが、かなり便利。
2011.10.05
Dreamweaverのサイト管理で設定をしてしまうと
HTMLデータの各フォルダに「_notes」というフォルダが作成されてしまいます。
出来てしまうものだとあきらめていましたが、
データを納品する場合に、ひとつひとつ消すのが結構手間でした。
サイトの管理の簡単な設定で、つくらないようにすることができます。
（1）サイト管理のデザインノートを開く。
（2）デザインノートの保持のチェックマークを外す。
※初期設定ではチェックマークが入っています。
さらに既に出来てしまった「_notes」フォルダを消すこともできます。
（1）サイト管理のデザインノートを開く。
（2）「デザインノートのクリーンアップ」ボタンをクリック
HTMLデータの各フォルダに「_notes」というフォルダが作成されてしまいます。
出来てしまうものだとあきらめていましたが、
データを納品する場合に、ひとつひとつ消すのが結構手間でした。
サイトの管理の簡単な設定で、つくらないようにすることができます。
（1）サイト管理のデザインノートを開く。
（2）デザインノートの保持のチェックマークを外す。
※初期設定ではチェックマークが入っています。
さらに既に出来てしまった「_notes」フォルダを消すこともできます。
（1）サイト管理のデザインノートを開く。
（2）「デザインノートのクリーンアップ」ボタンをクリック
2011.10.03
MovableTypeにて、entrytitleやentrybody内の文字列にダブルクオテーション「"」を使うと、javascriptを使用した際にエラーになってしまいます。
以前、この問題で悩んだ際に解決方法を教えてもらったような、検索したような気がしますが、急に対応が必要でなかったこともあり放っておいてしまいました。今、対応が必要となり探ります。
MT タグとあわせて利用する「グローバル・モディファイア」というものがあるようです。アトリビュートですね。
まずは、replaceというものがあるようです。
たとえば、「&」を「&」に置き換えるには
＜$mt:entrytitle replace="&","&"$＞
となります。
便利そうですが、今回の「"」の置き換えは、これで解決できそうにありません。
ここで、違うグローバルモディファイアを発見しました。
Movable Typeの『グローバル・モディファイアリファレンス』(encode_htmlとかencode_js)
-----
●encode_js
javascriptで「"」を入れるとエラーになるので変換してくれます。
「"」を「￥"」という形に変換してくれます。
『＜$mt:EntryTitle encode_js="1" $＞』
こんな感じで使用します。
-----
1 に設定すると、MT タグの値が javascript の文字列の値として使えるようにエンコードするようです。解決方法はまさにこれです。
この他にも
●encode_html
1 に設定すると、MT タグの値が 「<」を「<」、「&」を「 」などの形にHTMLエンコード
↓
『＜$mt:EntryTitle encode_html="1" $＞』
こんなのが、かなり使えそう。助かりました。
2011.09.07
配列と似たような使い方ができるオブジェクト型の変数ですが、
配列のように .length でデータ数を取得することはできません。
少し不便ですが、for～in文を使うことで取得することができます。
例えば以下のようなオブジェクトを用意して、
--------------------------------------------------------------------------
var userData_obj = {
user_1 : {
profile : "プロフィール1",
comment : "コメント１"
},
user_2 : {
profile : "プロフィール2",
comment : "コメント２"
},
user_3 : {
profile: "プロフィール3",
comment : "コメント３"
}
};
--------------------------------------------------------------------------
for～in文でカウントすることで、データ数を調べることができます。
--------------------------------------------------------------------------
objLen = 0;
for( var key:String in userData_obj ){
objLen += 1;
}
trace( objLen );
--------------------------------------------------------------------------
上記の場合"3"と出力されます。
userData_obj.user_1 とすれば、
それぞれのデータ数も取得できます。
配列のように .length でデータ数を取得することはできません。
少し不便ですが、for～in文を使うことで取得することができます。
例えば以下のようなオブジェクトを用意して、
--------------------------------------------------------------------------
var userData_obj = {
user_1 : {
profile : "プロフィール1",
comment : "コメント１"
},
user_2 : {
profile : "プロフィール2",
comment : "コメント２"
},
user_3 : {
profile: "プロフィール3",
comment : "コメント３"
}
};
--------------------------------------------------------------------------
for～in文でカウントすることで、データ数を調べることができます。
--------------------------------------------------------------------------
objLen = 0;
for( var key:String in userData_obj ){
objLen += 1;
}
trace( objLen );
--------------------------------------------------------------------------
上記の場合"3"と出力されます。
userData_obj.user_1 とすれば、
それぞれのデータ数も取得できます。
