2013-01-10

jQueryで文字列を１文字ずつ表示するスクリプト（複数行対応）

JavaScript jQuery

こんにちは！
今日はjQueryを使い、ゲームのように文字列を1文字ずつ表示するスクリプトをご紹介します。

デモ

使い方

jQueryの読み込み

jQueryを使用するので、Google AJAX Libraries APIからjQueryを読み込みます。
HTMLの<head>内に次の行を追加してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

JavaScriptをコピペ

次のコードを<head>内の最後の行にコピー＆ペーストして下さい。

<script type="text/javascript">
    $(document).ready(function(){
        var DELAY_SPEED = 100;//文字が流れる速さ
        var FADE_SPEED = 500;//文字のフェードインの速さ
        var str = [];
        $('.fadein > span').each(function(i){//セレクタで指定した要素すべて
            $(this).css('opacity','1');//行を不透明にする
            str[i] = $(this).text();//元のテキストをコピーし
            $(this).text('');//テキストを消す
            var no = i;
            var self = this;
            var interval = setInterval(function(){
                if(no == 0 || $('.fadein > span').eq(no - 1).children('span:last').css('opacity') == 1){//最初の要素または前の要素が全文字表示された時
                    clearInterval(interval);
                    for (var j = 0; j < str[no].length; j++) {
                        $(self).append('<span>'+str[no].substr(j, 1)+'</span>'); 
                        $(self).children('span:last').delay(DELAY_SPEED * j).animate({opacity:'1'}, FADE_SPEED);
                    }
                }
            }, 50);
        });
    });
</script>

HTMLに1文字ずつ表示したい文章を書く

例

<p class='fadein'>
    <span>あ…ありのまま 今　起こった事を話すぜ！</span><br>
    <span>『おれは奴の前で階段を登っていたと</span><br>
    <span>　思ったらいつのまにか降りていた』</span><br>
    <span>催眠術だとか超スピードだとか</span><br>
    <span>そんなチャチなもんじゃあ　断じてねえ</span><br>
    <span>もっと恐ろしいものの片鱗を味わったぜ…</span><br>
</p>

class='fadein'の子要素になる<span>で囲った文章が、1文字ずつ順番に表示されます。
複数行になる場合は、<span>の外側に<br>タグを記述します。

おまけ

文字が流れる速さや文字のフェードインの速さを調整する場合は、JavaScriptの次の値を変更します。

var DELAY_SPEED = 100;//文字が流れる速さ
var FADE_SPEED = 500;//文字のフェードインの速さ

単位はミリ秒。値が小さいほど速くなります。

2013-01-09

CSS3で要素を画面中央に配置するテクニック

CSS3

こんにちは！
昨日のエントリと被りますが、今回はCSS3で要素を画面中央に配置する方法に焦点を当てて、テクニックをご紹介します。

概要＆デモ

チュートリアル

縦方向（垂直）の中央寄せ

html{
    display:table;
}
body{
    display:table-cell;
    vertical-align:middle;
}
html,body{
    height:100%;
    width:100%;
}

CSSのvertical-align:middleは縦方向で中央寄せする事ができるプロパティですが、表の中のセルでしか効果を発揮しません。
そこで、<html>タグを表、<body>タグをセルとして扱う事で、vertical-align:middleをドキュメント全体に適用させます。

CSS3で新たに定義されたdisplay:tableは、要素を見かけ上だけ表組みとして扱います。
また、display:table-cellは、要素を表のセルとして扱います。
これらはスタイルシートで見かけのみを変更するので、HTMLのマークアップが汚くならない利点があります。

横方向（水平方向）の中央寄せ

section#setsumei{
    margin:0 auto;/*水平方向の中央寄せ*/
    width:55%;
}

ブロック要素は標準だと親要素の横幅いっぱいに幅を取るので、中央寄せに伴い、横幅を指定します。
そして、marginで横方向にautoを指定することで、両左右に適切な余白を取り、中央寄せする事ができます。

2013-01-08

jQueryで昔のファイナルファンタジー某のプロローグのようなテキストフェードインを実装するチュートリアル

CSS3 jQuery

こんにちは！

今日はファミコン時代のあのゲームのようなエフェクトを実装するチュートリアルをご紹介します。

デモ

実装する手順

jQueryの読み込み

jQueryを使用するので、Google AJAX Libraries APIからjQueryを読み込みます。
HTMLの<head>内に次の行を追加してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

HTML

デモのように各行毎にフェードインを実装するには、それぞれの行毎に<span>タグで囲い、<br>タグで改行します。

<p>
    <span>むかーし　むかし　あるところに</span><br>
    <span>おじいさんと　おばあさんが　いました</span><br>
    <span>おじいさんは　やまへ　しばかりに</span><br>
    <span>おばあさんは　かわへ　せんたくに　いきました</span><br>
</p>

フェードインの対象となる要素はjQueryのセレクタで指定するので、<h3>要素などの見出しや画像にもフェードインを適用できます。

JavaScript

var DELAY_SPEED = 1750;//読み込みの遅延時間
var FADE_SPEED = 1750;//表示のアニメーション速度
$(document).ready(function(){//ドキュメントのオンロード時に実行
    $('span').each(function(i){//セレクタで指定した要素すべてに
        $(this).delay( i * DELAY_SPEED ).animate({opacity:'1'}, FADE_SPEED);//フェードインを適用
    });
});

セレクタで要素を指定し、それら全ての要素を、時間差でanimateを使い徐々に不透明にします。

CSS

初期状態は非表示（完全透明）に

フェードインの対象となる要素のopacityを0にし、完全に透明にします。*1

span{
    opacity:0;
}

要素を画面の縦横中央に表示する

CSS3で新たに追加されたdisplay:tableを用い、vertical-align:middleを有効にします（縦方向の中央寄せ）。
ここでは、HTML全体をtableに見立て、body要素をtableのセルとします。*2
ドキュメント全体が見かけ上tableと同様の扱いになるので、htmlとbodyの両方でheightとwidthを100%に指定します。

また、text-alignをcenterにし、テキストを水平方向でも中央寄せします。

html{
    display:table;
}
body{
    display:table-cell;
    vertical-align:middle;
}
html, body{
    text-align:center;
    height:100%;
    width:100%;
}

デザインを変更して仕上げ

全体のデザインを指定してCSSを仕上げます。
デモではWebフォントとして美咲フォントをお借りしました（ソースコードは無効なリンクに差し替えています）。

@font-face {/*WebFontの読み込み*/
    font-family: "MisakiGothic";
    src: url("Webフォントを置いたURL") format("Webフォントの拡張子");
}

html, body{
    font-family: "MisakiGothic";
    color: #fff;
	background-color:#00F;
	color:#FFF;
	line-height:2em;
    text-align:center;
    height:100%;
    width:100%;
}
html{
    display:table;
}
body{
    display:table-cell;
    vertical-align:middle;
}

span{
    opacity:0;
}

*1:注：display:hiddenにすると、フッタなどの下部の要素がはじめ上の方に表示されてしまう事があります。displayは操作しないようにしましょう。

*2:HTMLに余計な<div>を書かずに済みます。

2013-01-07

enchant.jsで任意のシーンを最前面に表示する関数と解説

enchant.js

明けましておめでとうございます

今年はじめての更新となりました。本年も、どうぞよろしくお願いします。

jsdo.itにスクリプトを投稿

次のスクリプトを投稿しました。

少し技術的な解説をします。

解説

配列のコピー

実装

//配列をコピー
Array.prototype.clone = function(){
    var arr = new Array();//新しい配列
    for( var i = 0; i< this.length; i++ )
        arr[i] = this[i];//コピー
    return arr;
}

利用方法

var hoge = 配列名.clone();

関数内で新しく配列を作成し、コピー元の配列の要素をすべてコピーしています。

シーンを最前面に移動する

実装

//シーンを手前に表示する
Game.prototype.forwardScene = function( scene ){
    var beforeScenes = Game.instance._scenes.clone();//変更前のシーンスタックをコピー
    while( this.currentScene != this.rootScene )//rootScene以外の
        this.popScene();//シーンをすべてスタックから取り出す
    for( var i = 0; i < beforeScenes.length; i++ )
        if( beforeScenes[i] != scene &&
        	beforeScenes[i] != this.rootScene )//手前に表示したいシーン以外を
            this.pushScene( beforeScenes[i] );//元通りスタックに入れていく
    this.pushScene( scene );//最後に手前に表示したいシーンをスタックに入れる
    return;
}

利用方法

hogame.forwardScene(hogescene);

Game.instance._scenesはシーンのスタックになる配列です。

Game.instance._scenesをコピー
全てのシーンをスタックから取り出し
最前面に表示するシーンとrootScene以外をスタックに入れ
最後に最前面に表示したいシーンをスタックに入れる

という手順でシーンの移動を行なっています。

ポップしていないシーンは絶対にプッシュしない

例えばRPGなどのゲームでメニュー画面のシーンを表示したあと、メニューを閉じる際にpopSceneを行わずに移動画面などのシーンをpushSceneで呼び出すと、不具合の原因になったりします。
上記にもありますが、スタックにあるシーンをpushSceneする事は避けましょう。

2012-12-29

Windows8で「えこでこツール」を使うTIPS

Windows8 app

こんばんは！

「えこでこツール」使っていますか？

wav,mp3,ogg,aacなどの音声ファイルを相互変換できるシンプル便利なソフトです。
以下のリンク先からインストールできます。
えこでこツールの詳細情報 : Vector ソフトを探す！

Windows8での利用には一工夫が必要

「えこでこツール」はWindows8ではそのまま使用する事ができませんが、一度準備しておけば、ほぼ従来どおりの使い勝手で利用する事が可能です。

今回は、その方法についてご紹介します。

手順

「互換性のトラブルシューティング」を使い、推奨設定で設定
エンコードはファイルを「えこでこツール」のショートカットにＤ＆Ｄ

それぞれの操作について説明します。

「互換性のトラブルシューティング」を使い、推奨設定で設定

えこでこツールのアプリケーションファイルを右クリックし、「互換性のトラブルシューティング」を起動します。

f:id:kathew:20121229212109p:plain

「推奨設定を使用する」をクリック
「プログラムのテスト」をクリック、起動の許可を求められるので「はい」をクリック。えこでこツールが起動するので、エンコードしたい形式や音質を選んだら、そのまま終了する
「次へ」をクリックし、「はい、このプログラムでこの設定を保存します」をクリック
「トラブルシューティングツールを終了する」をクリック

この操作は一度行えば、以後は同じ操作は不要です。