日々学んだことを残しておこう。きっと未来の自分が探しにくる。 (ただ忘れっぽいだけです…)

html select プルダウンリストの横幅変更


プルダウンリストの横幅を変更しようとして、Dreamweaverのコードアシスト見たら、selectタグにsizeがあったのでセットしてみたらえらいことに。。。

selectタグのsizeプロパティは横でなく、縦方向の設定でした。

やり方はスタイルのwidthでOK。
ピクセルで指定の場合はこんな感じ
<select size=3 style="width:300px;">

heightプロパティで太っちょにもできるんだね。
あまり見かけないけど。

(参考サイト)
HTMLフォーム「リストボックス・コンボボックス」の横幅指定
2012-10-31 : ブログカスタマイズ : コメント : 0 : トラックバック : 0
Pagetop

html CSS 行の間隔広くする


いつも、忘れてしまうので、メモ。

行の間隔は、line-heightで指定。(毎回、heightとかであれってなっちゃう。。。)


line-heightで指定できる値


①数値(pxなど)→長さで指定
②倍率(単位なし)→文字のサイズに対する倍率で指定
③割合(%)→文字のサイズに対する割合で指定


いつも、ピクセルのつもりで、単位なしでセットして、想像と違う間隔になってしまう。
これで、覚えました!、たぶん。

(参考サイト)
インライン要素に指定した上下マージンは無視される
2012-10-31 : ブログカスタマイズ : コメント : 0 : トラックバック : 0
Pagetop

Spry × jQuery SmartImage はまったところ メモ



Today's latte, jQuery. / yukop


スマートフォンサイトに用意した画像を拡大・縮小、移動したいっと思っていろいろ調べたら、jQueryライブラリのjQuery SmartImageを発見。

デモを見て、まさに実現したかったことでした。

さらに、私がやりたかったのは、非同期で取得した複数の画像を重ね合わせて、全体を拡大・縮小みたいにすることでした。

ライブラリ作者の方も非常に親切にいろいろ教えてくださいました。


カスタマイズしたところ


①セレクタのClass指定
各imgタグのclassをsmart-imageになるようにする。
こんな感じでテストしたらOKでした。
	<div id="wrap">		
<img src="images/img1.png" alt="" class="smart-image">
<img src="images/img2.png" alt="" class="smart-image">
</div>



②タグの確認+div名指定
SpryのXMLデータセットで画像のパス情報のxmlファイルを非同期で取得していました。
spry:repeatを使っていたので、imgタグdivタグが入れ子みたいに自動作成されていました。
ライブラリにtarget.parent().height();などimgタグの親要素を指定しているのですが、その部分がちゃんとセットできていないことが判明。
divタグにphotosとid付けて、target.parent()部分を変更しました。
$("#photos").height();

	<div id="photos">
<div>
<img src="images/img1.png" alt="" class="smart-image">
</div>
<div>
<img src="images/img2.png" alt="" class="smart-image">
</div>
</div>



③ライブラリの呼び出し 領域オブザーバ通知関数の使用
   		//領域オブザーバ通知関数
function myObserverFunc(notificationType, notifier, data) {
window.console.log(notificationType);
if(notificationType == "onPostUpdate"){
//ここに処理
}
};
Spry.Data.Region.addObserver("photos", myObserverFunc);


画像が最初から用意されている場合、ページロード後にSmartImage関数を呼べば良いのですが、今回非同期で画像パスを読み込むので、読み込み後にSmartImage関数を呼び出す必要があります。
というのも、SmartImage関数で画像のheight、widthやコンテナのheight、widthを使用しているからです。
Spryのxmlデータセットには、領域オブザーバ通知関数というのが用意されています。

(参考サイト)
オブザーバー通知の使用
領域オブザーバー通知

※20121028追記
最初、上のオブザーバー通知の使用でやっていてうまくいっていなかったのですが、creatorishさんがこのケースでは、領域オブザーバー通知の方を使用することを教えてくれました。


それを使って、xml取得したイベントでSmartImage関数を呼んでもうまく変数が取れていない。。。
やはり、画像の読み込まれる前に関数呼んでいるのが良くないみたい。


④setTimeoutをかます
ちょっと時間たってから(0.5秒後)SmartImage関数を呼ぶようにしたら、一応うまくできたんだけど、これって通信の関係や端末環境によってオーバーするかもしれないし、時間の設定をどうすればよいんだろ。悩む。


⑤setTimeoutのうまい使い方
ちょうど、悩んでいるときに朗報。こんな勉強会が。
名古屋JSクリニック Vol.1
講師の張山さんがみんなのJavascriptの悩みを解決してくれるって勉強会。
早速、申し込んで昨日受講してきました。
ポイントは以下の通り。
・imageオブジェクトを作成(配列)
・画像が読み込み完了かチェックするcompleteプロパティで読み込み完了した画像枚数をチェック
・全画像枚数でなければ、ちょっと待って再度チェック開始。全画像枚数なら、SmartImage関数を呼ぶ。

というようにすれば良いとのこと。すごい、本当に解決してくれた。
クリニック万歳。

ということで、ちょっとソース書いてしておきます。

    <div id="photos" spry:region="dsPhotos">
<div spry:repeat="dsPhotos">
<img alt="" src="{dsPhotos::source}" style="position:absolute;opacity:{dsPhotos::alpha};" class="smart-image" />
</div>
</div>
<script type="text/javascript" src="js/jquery.smartimage.js"></script>
<script>
//Spryのxmlデータセット(非同期で取得)本当はここがいろいろなプルダウンによって決定。テスト用に、固定値
var dsPhotos = new Spry.Data.XMLDataSet("test.xml","test/img");

var imgs = [];

// XML読み込み完了時に実行する関数
function setImage(){

console.log("setImage");

var i;
var rows = dsPhotos.getData();
console.log(rows.length);

for(i=0; i<rows.length; i++){
imgs[i] = new Image();
imgs[i].src = rows[i].source;
}

// 画像をHTMLに反映する処理
checkLoad();
}

// 画像読み込み完了をチェックする関数
function checkLoad(){

console.log("checkLoad");

var count = 0;
for(var i=0; i<imgs.length; i++){
count += imgs[i].complete;
}
if(count == imgs.length){
$(".smart-image").SmartImage({
fill: true,
zoomInController: ".zoomin",
zoomOutController: ".zoomout",
moveLeftController: ".moveleft",
moveRightController: ".moveright",
moveUpController: ".moveup",
moveDownController: ".movedown",
complete: function(elm,functions) {}
});
} else {
setTimeout(checkLoad, 250);
}
}

//領域オブザーバ通知関数
function myObserverFunc(notificationType, notifier, data) {
window.console.log(notificationType);
if(notificationType == "onPostUpdate"){
setImage();
}
};
Spry.Data.Region.addObserver("photos", myObserverFunc);
</script>



感想


console.logでcheckLoadの呼び出し回数を見ると、setTimeoutを250ミリ秒にした場合、2回くらい目でライブラリの呼び出しになっていました。(もちろん、データ量、通信環境にもよってきますが)

Spryのxmlデータセットあたりは↓サイト見るとどのようにセットしているか分かると思います。

(参考サイト)
Ajaxフレームワーク「Spry」で作る「リンク集2.0」

講師の張山さん曰く、XML取得の部分もjQueryにした方が良いのではとのことでした。
jsonだとjQueryで簡単に取得できそうだったけど、xmlはSpryの方が簡単かなということでこんな作りにしちゃったんだけど、jQueryでも簡単にできるそうですね。

なんか、Spryプロジェクト終了したみたいですね。。。
2012年8月、他のWebフレームワークが大きく進歩したこともあり、Adobe社は今後のプロジェクトへの投資を停止した。
http://ja.wikipedia.org/wiki/Spry

今回、xmlの取得部分だけSpry使ったのですが、時間作って、この部分もjQueryで作成してみよっと。

それにしても、なんとかうまく動いて良かった。
いろいろ参考になる情報いただいた方に感謝です。

それにしても、jQuery SmartImageライブラリはすごく良い!


**** 追記20121028 ***************

setTimeoutを使わない手法 by creatorish


領域オブザーバ通知を使用していなかったため、たまに挙動がおかしかったので、色々creatorishさんが教えてくれて、setTimeoutを使わない手法も分かりました。

領域オブザーバ通知を使用すれば上の書き方でも問題と思いますが、両方のせておきます。

最初、記事タイトル名を「jQuery SmartImage はまったところ メモ」にしていたんですが、どちらかというと、jQueryライブラリにはまったというかSpryにはまったという感じだったので、「Spry × jQuery SmartImage はまったところ メモ」に変えましたwww

<div id="photos" spry:region="dsPhotos">
<div spry:repeat="dsPhotos">
<img alt="" src="{dsPhotos::source}" width="{dsPhotos::p_width}" height="{dsPhotos::p_height}" style="position:absolute;opacity:{dsPhotos::alpha};" class="smart-image" />
</div>
</div>
<script type="text/javascript" src="js/jquery.smartimage.js"></script>
<script>
//Spryのxmlデータセット(非同期で取得)本当はここがいろいろなプルダウンによって決定。テスト用に、固定値
var dsPhotos = new Spry.Data.XMLDataSet("test.xml","test/img");

var imgs = [];

// XML読み込み完了時に実行する関数
function setImage(data){
var loaded = 0;
var rows = dsPhotos.getData();
//smart-imageクラスが付いたものにloadイベントを付与
$(".smart-image").load(function() {
//読み込み完了数を+1
++loaded;
//データの数と比較して同じならばSmartImage実行
if(loaded === rows.length) {
//読み込み完了後の処理
$(".smart-image").SmartImage({
fill: true,
zoomInController: ".zoomin",
zoomOutController: ".zoomout",
moveLeftController: ".moveleft",
moveRightController: ".moveright",
moveUpController: ".moveup",
moveDownController: ".movedown",
complete: function(elm,functions) {}
});
}
});
}


//領域オブザーバ通知関数
function myObserverFunc(notificationType, notifier, data) {
window.console.log(notificationType);
if(notificationType == "onPostUpdate"){
setImage();
}
};
Spry.Data.Region.addObserver("photos", myObserverFunc);

</script>
2012-10-26 : JavaScript : コメント : 6 : トラックバック : 0
Pagetop

FireBug 接続タブがない。 ネットタブになったんだ。。。



Firebug / Darius Baužys


最近、ようやくFirebugを使いはじめて感動している今日この頃。(firebug1.10.4使用)
というか、今まで使わなくてよくやってこれたなと思っています。

firebugって「ホタル」って意味なんだね。
あのアイコンみてホタルとは気が付かなかったよ。。。
日本のホタルとちょっと違うみたいからなのか。

以下のサイトみたりして、どんなことができるか確認中。

(参考サイト)
これも知らない!?知っていると便利なFirebugの使い方

参考サイト同様、ちょっと[接続]タブを見てみようとしたが、[接続]タブが見つからない。。。

オプションやら、いろいろ見るも、ない。

でも、どの参考サイトみても[接続]タブになっている。

おや、[ネット]タブなるものがあるが、よく見ると、「ネット パネルは無効化されています」とのこと。
ちょっと有効にしてみる。

あれっ、これはまさか、接続タブと同じじゃん。

あるバージョンから、[接続]タブって[ネット]タブに名称変更したんだね。
お騒がせしました。
2012-10-22 : 小技 : コメント : 0 : トラックバック : 0
Pagetop

グーグルのデータセンター公開 ストリートビューで入ってみた


グーグルがデータセンターの中を公開しましたね。

(参考サイト)
グーグル、データセンターを公開--Street Viewツアーも提供

AWSなんかデータセンターの場所すら非公開にしているというのに、中まで見せてくれるとは。
企業文化の違いなのか、

こちらがGoogle Data Centerという紹介サイト

ものすごくカラフルで、グーグルっぽくなっているのにびっくり。
ちなみにストリートビューでもデータセンター内を移動できるようになってるじゃないか。

ストリートビューでデータセンターに入ってみる


こちらの玄関からどうぞ

ところどころに、ウケ狙いの箇所ありますね。

googledc_01.png

googledc_02.png

こんな方達がデータを安全に守ってくれていると思うと安心した(笑)
2012-10-18 : Google : コメント : 0 : トラックバック : 0
Pagetop
ホーム  次のページ »

広告

読みたいと思っている書籍

Amazon Web Services クラウドネイティブ・アプリケーション開発技法 一番大切な知識と技術が身につく Amazon Web Services 定番業務システム12パターン 設計ガイド イラストで学ぶ 機械学習 最小二乗法による識別モデル学習を中心に (KS情報科学専門書) イラストで学ぶ ディープラーニング (KS情報科学専門書)

カウンタ

メールフォーム

名前:
メール:
件名:
本文:

GoogleTranslate

管理人のつぶやき

人気記事ランキング

カテゴリ

openclose

ブログ内検索

全記事表示リンク

全ての記事を表示する

ブログパーツ