どれもこれもがんばれば1日で終わるものばかりだろう

友達のサイトのロゴづくり。

とりあえず文字だけなんとなく決めたいなーと思って
作り始めたらけっこうアイデアがわいてきて、いい感じにいいとこまで行ったかな。

こっからの詰めでどれだけ時間かかるか…。

IE6、7対策とjava有効無効対策とfaviconづくり。
これが終わればポートフォリオ的なもの作ってWEBデザインのアルバイト探すよ。

safariをインストールせなあかん。

【雑念】

　
　
「ここ、こうした方がいいと思うんやけど」
というアドバイスとか

「こういうことしてたらあかんのでは？」
という忠告とか

思いついてもあまり言わないのは
それに対して賛同を得られることが少ないから。

たいてい「？？？」で返される。

それが精神的にしんどいので
何も言わなくなったところはあると思う。

昔はけっこうなんでもかんでも言う子やった。

でも言わなかったら言わなかったで印象は良くないという。
どないせーっちゅーんど。

まぁでもそこんとこは世界から嫌われてる…？
嫌われてるというか、則してないというか、
外れてるから仕方ないと思うようにしてる。

冬なのに春なみに眠い

木、金とゲーム三昧。
金の夜はバンドでスタジオ入り。
土曜は1日中寝…

今日はまぁ、、ちょっと本読んだけど、
やっぱ昼間は何もやる気起こらんな、、、マジやばい。

今日は朝からゴーカイとフォーゼ観て、
スーパー行って家で豚肉と白菜のミルフィーユ鍋作ってお昼に食べた。んまい。

業務用のかつおだしパックで少し濃い目にだしをとる。
それを500ml＋お酒(大さじ1)＋しょうゆ(大さじ1)＋塩(少々)入れる。

鍋の一番外側(内側の外側?)から白菜→豚肉→白菜→豚肉→白菜→　の順で層を作る。
白菜は層の部分にできるだけ芯を使ったほうがいいと思います。
鍋がいっぱいになったら(層が完成したら)上に葉っぱでフタをする感じ。

そのあとさっき作ったダシ＋αを入れます。

んで、鍋にちゃんとフタをして強火。沸いたら中火。
いい感じになったら(白菜の固さに好みがあると思うので)
鍋をテーブルに持っていき、ポン酢、お好みで大根おろしとみじん切りにした青ねぎを薬味に。

コンロ使わなくていいから楽だよねー。(別に使ってもいいと思うけど)

全部食べきれてないので、夜にうどん入れてシメようと思います！

敵に背を向ける→

トップイメージをアニメーションチックというか
動かしたくって。

(4枚の画像をposition:absolute;で重ねた状態で)

1枚目の画像フェードイン(5秒待ち)
2枚目の画像フェードイン(5秒待ち) //もちろん1枚目の画像フェードアウトしてます。
3枚目の画像フェードイン(5秒待ち)
4枚目の画像フェードイン(10秒待ち)
(→1枚目にもどる)

みたいなことをjQueryでやりたかったのやけど
最後だけ10秒待ちにするのがどうがんばっても無理やった…

1枚目の画像フェードイン(5秒待ち)
2枚目の画像フェードイン(5秒待ち)
3枚目の画像フェードイン(5秒待ち)
4枚目の画像フェードイン(5秒待ち)
4枚目の画像フェードイン(5秒待ち)

でなんとかごまかしたけど、、、

→敗北。

追記：コードはこんな感じ

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){
$('.fadein :first-child').fadeOut("slow").next('img').fadeIn("slow").end().appendTo('.fadein');}, 5000);

});

むぅ…

なんでかわからんけど
youtubeをiframeで表示して
動画を2つならべたページを作ってたんですが、
それを「更新」するとなぜか2番目の動画が1番目と同じになるバグ発生。
IE8です。

いったん違うページにいってまた戻ってきたら治るし、
更新しない限りは別の動画なんだけど、、。

色々がんばったけどどうしようもないので
iframeじゃなくてobjectとparamっての使って貼り付けました。

んで、サムネイル画像取得の正規表現の部分を少し変えたらいけた。

サイトの手直し早く進めていかな…。
favicon、以前のページへのjQueryの導入、背景画像変えたり、、など。
java無効の人への対処もやな、、IE6対応がまだか、、、、
あとテンプレート化、ワードプレス、、本読みきらな、、、うぐぐぐ

高さとの戦い

#mainboxの高さ問題ね。

(俺以外の人が、今書いてる記事含め、関連記事読んでもマジちんぷんかんぷんだろうし、
後で自分で読んでもちんぷんかんぷんなレベルかも…)

var h = parseInt($('#mainbox1').outerHeight(true)) + parseInt($('div.holder:eq(0)').outerHeight(true));

$('#mainbox').height( h + parseInt($('div.holder:eq(1)').outerHeight(true)) + 'px');

こんな感じで高さを拾いまくった。

#mainbox1の高さ＋div.holder1つ目の高さ＋div.holder2つ目の高さ　＝　#mainboxの高さ

ってことです。
なぜかholderの高さはcssで高さを指定しないと取得してくれなかった。なぜだろう。

あ、もしかしたら親要素からの最初の要素じゃないからかも、、、
そんな気がしてきた。そうだ、絶対そうだ。

iframe内のyoutube動画をフェードで表示

えーと、youtubeをiframeに入れた場合のフェードインフェードアウトを使ったページ切り替え。

話せば長くなる…。

$(window).load(function() {
var vid_id = $('.player').get(0).src.match(/embed\/([^?]+)/)[1];
var vid_bg = 'http://i2.ytimg.com/vi/'+vid_id+'/hqdefault.jpg';
$('').attr("src", vid_bg).css({width:'100%',height:'100%',border:'none'}).appendTo('.fade-image');
});

これでまずyoutubeのサムネイル画像を取得する。
(サムネイルっつーかyoutubeのTOP画(?)と同じ大きさの画像。)
iframeにclass="player"を指定すると勝手に取ってきてくれる。
それをdiv.fade-imageにぶちこんでる。

省略して書くと
<div class="holder">
<iframe class="player"></iframe>
</div>
<div class="fade-image"><img /></div>

<img />は↑のjQueryで挿入されます。appendToで。

<iframe>を<div><img /></div>で覆う。(position:absolute;で同じ位置に重ねてる)
で、div内の画像をフェードインさせることによって
あたかもiframeがフェードインさせてるようにみせるってのがカラクリ。

firefoxの場合、

$('.fade-image').hide();

これだけでいい。

要するに画像が挿入されても#mainbox1のフェード途中なので
画像も一緒にフェードインして表示されます。
そのフェードインが終わったあと、コールバック関数として、
$('.fade-image').hide();　を書けば終了。

めっちゃ単純。

IEの場合、、、、、

$('.holder').hide();
$('.fade-image').hide().fadeIn(2000, function(){
$('.fade-image').hide(1, function(){
$('.holder').show();
});
});

ややこしい。
IEの場合なぜかyoutubeがめっちゃでしゃばってくる。
画像で上から覆うくらいじゃ隠れない。
ので、$('.holder').hide();で、まず消す。
そして、フェードインで表示させたいので
画像もすぐ消し、メソッドチェーンでフェードイン。
フェードインが完了したら、画像を即消し、youtubeを表示。

めっちゃ手間。

firefoxの場合、親要素のdivのフェードイン表示に
画像がつられてフェードイン表示になってくれるんだけど
(だから、画像hideしたりshowしたりするだけでフェードイン・アウトができる。楽。)
IEにはそれがない。いちいち指定しなくちゃならない。

めっちゃ手間。
　　　　　　　　　　　　　

グーグルクロームとかサファリで違う挙動したらマジで面倒やな、、、
あとで確認せな、、

ちなみに、IEとそれ以外のブラウザでの処理を分けるのにif文を使ってます。

if(document.all && !window.opera) {
　　　　　　　　　　　　　IEの処理
　　　　　　　　　　} else {
それ以外の処理
　　　　　　　　　 }
です。

あとはiframeでposition:absolute;使ってもたから、
#mainbox1の高さの問題か、、、

グーグルアナリティクス

備忘録レベルじゃなくなってきたような。

Google Analyticsは
アナリティクスアカウントとやらを増やせば全く別のサイトも管理できるってことでいいのかな？

今読んでる本終わったらGoogle Anaryticsの本買ってみるか。

とりあえず今作ってるっていうか、もう作り終えているというか、
最終的な微調整してるバンドのサイトを登録してみたので、

昨日書いてたiframe内のyoutubeをうまくフェードして、高さも取得できるようにできたら
一緒にアップしてみるかーと思ってます。

あと関係ないけど、dropbox、skydrive、使ってみよう。

もいっちょ！！！

iframe内のフェードイン表示をがんばってみた。

まず、入力フォームをレンタルしているので、
入力フォームをiframe内に表示しているのだけど、
普通に$('div#mainbox1').fadeIn(2000);だけではフェードインで表示されない。

$(window).load(function() {
$('#mainbox1').fadeIn(2000);
});
こうすると解決。
1行目は、全部ロードしてから、、、っていう意味らしい。

要するにjsの処理が速すぎて、iframe内を表示する前にフェードイン処理が終わってしまってた
みたいなことでいいのかな。それを全部ロードしてからフェードインするようにできるのが1行目。
(当然だけど、});で閉じましょう)

で、iframe内がyoutubeの場合。

なぜか↑のやり方でやってもフェードイン表示されない。
ぐぐってみると、1件だけ同じことで困ってる方が。

まだちゃんと中身を把握できてないんだけど、
動画の画像をどっかから取ってきて、
それを動画の上からフェードイン表示させる、みたいなjsを発見。

iframe内の動画自体を上から画像(動画と見た目同じ)で隠す。
この画像をフェードインで表示させる。
画像と動画は見た目は同じものだから、あたかも動画がフェードインしたみたいに見える、と。

まぁ案の定「上から」ってことは動画と画像を重ねてるわけで、position:absolute;使ってるわけで、、
これを使うとさっき解決した#mainboxの高さ問題にぶちあたるという、、、
iframeを包んでるdivの高さをプラスしたらいいんだろうね、たぶんね。

height height height

ローカルナビゲーションはjQueryを使ってふんわりとページの切り替えがしたかったので
fadeInとfadeOut使うんだけども、それを使おうと思ったらまず、
ローカルで切り替えるページ(今回は2ページ)をposition:absolute;を使って重ねておいて
はじめはページ1をフェードインで表示。
ローカルナビをクリックすると今表示してるページをフェードアウトして、次のページをフェードイン。

でも問題が1つ。

position:absolute;を使ってるとそれを包んでる親要素が高さを認識しない。

今回、#mainboxで#mainbox1と#mainbox2(1と2は重なってる)を包んでいます、
最初は#mainboxにある程度のheightを指定していたのですが
#mainbox1の内容が増えてくるとそれぞれのリンク先で高さを変えたりしないといけないから
汎用性がないなぁと。

で、position:absoluteを使ってるのはjQueryでフェードイン、フェードアウトさせたいからだから、
jQueryで起きた厄介な問題はjQueryで解決しようと思い、

$('#mainbox').height($('#mainbox1').outerHeight(true) + 'px');

「#mainboxに、高さ(mainbox1の高さ(padding,border-width,marginも含めた)px）を入れる。」

↑こいつを js に書き加えたら解決しました。( もちろんjQueryですよ)
勝手に#mainbox1の高さを調べて親要素である#mainboxにぶちこんでくれます。
大変ありがたい！！

あと#mainbox2へのリンクをクリックしたときは#mainbox2のheightを#mainboxに入れるようにしたし、
逆も然り、です。

あ、もしかしたらposition:absolute;もjs側で指定した方がいいのかもしんない。
(まだjavascript無効でみてる人の必要最低限の対策がまだできてない…)

前に言ってたiframeのフェード表示はどうしようかな。