2012年11月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

javascriptで一定時間経過後にdivを表示させていく

あとで詳しく書くとして、ひとまずメモ

javascript(jqueryもちょっと使ってる)

<script>
var timer;
var n = 0;
function startInterval() { // setInterval(実行する関数名, ミリ秒)
    timer = setInterval(example, 1000);
}
function example() {
    n++;
    document.getElementById("text").innerHTML = n;
$(function(){
   if(n>5){$(".box1").slideDown();} //5秒後
   if(n>39){$(".box2").slideDown();} //39秒後
   if(n>50){$(".box3").slideDown();} //50秒後
   if(n>65){$(".box4").slideDown();} //65秒後
   if(n>80){$(".box5").slideDown();} //80秒後
   if(n>95){$(".box6").slideDown();} //95秒後
   if(n>115){$(".box7").slideDown();} //115秒後
})
}
function stopInterval() { // setIntervalの停止
    clearInterval(timer);
    n = 0;
    document.getElementById("text").innerHTML = n;
}
</script>
 

HTML

<div onclick="startInterval();">クリックしてスタート!</div> 
<div onclick="stopInterval();">ストップ</div> 
 <div class="box1">メッセージ1</div>
 <div class="box2">メッセージ1</div>
 <div class="box3">メッセージ1</div>
 <div class="box4">メッセージ1</div>
 <div class="box5">メッセージ1</div>
 <div class="box6">メッセージ1</div>
 <div class="box7">メッセージ1</div>
 

動画をflvにして、flashでプレーヤーをつけてサイトに表示する

サイトで動画を公開するときって、結構悩む。

詳しくは知らないけど、僕はいつも、

「flvにして、プレーヤー設置してやりましょう! 」って提案する。

youtubeみたいに見せるやり方ね。
それを自力で作るやり方です。

手順としては以下のとおり。


① お客さんからもらったムービーをどうにかしてflv形式に変換する。
②flvをflashで開いて、プレーヤーを作成する。
③パブリッシュして出てきたhtmlとswfとflvをサイトに入れる。

これで出来上がり!

flashだからPCならほとんどの環境でムービーが見れちゃいます。
プレーヤーもそれなりにオシャレと思います。

-------------------------------------------------------------------------

 ①お客さんからもらったムービーをまずは、どうにかしてflv形式に変換する。

お客さんは大体、wmvとかaviとかmovとかでくれたりするので、
それをflvにしてやんなきゃいけない。

適当に無料の変換ソフトを探してみたけど、 flvに変換する過程でなぜか
すんごい劣化しちゃうんだ。

劣化した動画だとお客さんもうれしくないだろうので、

ここは、ソフトを買っちゃうのがいいと思う。

おすすめは、「動画・音楽変換!3」というやつ。

5000円。自分で負担するには嫌だけど、5000円のソフトを買ってキレイにやりましょう!
って言えばお客さんは5000円くらいは予算とってくれるよね。


これの使い方はすごい簡単なのではしょります。

どんな形式だろうと動画をドラッグ&ドロップして、形式を選んで、ボタンを押すだけ。




②次にflashでプレーヤーを組み込む。

難しそうに思えるけど、Adobe flashさんが、そういうプレーヤーのセットを用意してくれてるので、すんごい簡単だ。

Adobe flashのアプリケーションに、flvファイルをドロップしてやりましょう。

すると、「ビデオファイルの場所は?」みたいなことを聞かれるので

「コンピューター上にある」を選んで、

「プレイバックコンポーネントと一緒に読み込む」を選んで、次へ。


プレーヤーのスキンが選べる。シンプルでyoutubeっぽいのを選んだらいいんじゃないかな。


んで終了すると、もうプレーヤーと動画のセットが完成してます。

まずは、動画とキャンバスのサイズを同じにしましょう。

余白は邪魔なので。

キャンバスの適当な余白をクリックして、プロパティから編集でサイズを変える。
プレーヤーとちょうど同じサイズになるようにぴったりと。


次に動画部分をクリック。

コンポーネントパラメータというのが出てくるので、好きなようにいじるのだけど、
ここはよくわからないので、オートプレイにするのかどうかだけ決めればいい。


③パブリッシュして設置

次に、ファイル>パブリッシュ設定

書きだされるswfのファイル名とhtmlのファイル名を決める。

右側に参照ボタンがあるので、デスクトップにでも吐出されるようにしとけばいいと思う。
そのままにしておくと、どこに吐き出されたかわかんなくなっちゃうので。


これでOK!

あとはパブリッシュボタンを気合をいれてクリック!


するとすると、
3つくらいファイルが吐き出されます。

名前をつけたswfファイル → 動画のファイル
ながったらしい名前のswfファイル → プレーヤーのファイル
htmlファイル

flvのデータも同じフォルダ(デスクトップ)に置いて、htmlをブラウザでひらいてみる。

うまく動画が見れたらOK。


そしたら、htmlファイルをエディタで開いて、ソースのぶぶんを、
作っているサイトの希望の部分にコピペする。

swfファイルはflvファイルも一緒にコピペして、
入れておこう。


1つだけ注意点があって、プレーヤーのコントローラの右のほうに全画面ボタンがついてくるけど、これ、そのままだと押してもなにもならない。

そういうときは、htmlのソースの<opject>の子要素に

<param name="allowFullScreen" value="true">

を入れる。



これで、完成!


windowsのPCで見たときと、macで見たときで、サイトのフォントを切り替える

macでサイトを作ってると、フォント指定をいろいろしたくなる。

でも、cssでフォント指定したサイトを windowsのPCで見てみると、
ガタガタになっちゃってるんだ。

macで見たときはフォント指定したい!
でもwinでみたときは、デフォルトのフォントにしときたい!


useragentでやりました。

<script>
if(navigator.userAgent.indexOf("Mac")!=-1){
document.write("<link rel=stylesheet href=css/font.css type=text/css />");
document.close();
}
</script> 


mac以外のときはfont.cssを読み込ませるよ、と。


んで、font.cssには、win用のフォントを書いておけばOK。

PCで見たときとiphoneやipadで見たときの表示を変える

PCで見たときとiphoneやipadで見たときに、一部分だけ変えたい、というときがよくある。

多いのは、flashを使ってるときとか。
iphoneとipadではflashが読めないので、その部分だけ違うものに差し替えたい。

useragentでやっちゃうのが便利かなーと思ってます。

<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1)  {
document.write("<link rel=stylesheet href=css/sumaho.css type=text/css />");
document.close();
}
</script> 


iphoneかipadのときに、sumaho.cssを読み込ませてますよ、と。


んで、HTMLには、こう書いておく

<div class="pcmuke">
<object 〜 フラッシュ>
</div> 
<div class="iphonemuke">
<img src="">
</div> 


.iphonemukeは、あらかじめてdisplay:none;しておく。


んで、sumaho.cssにはこう書く

.pcmuke{display:none;}
.iphonemuke{display:block;}


これで、一部分だけ切り替えられる!
記事検索

リモキュー

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ