2015-01-14

JavaScriptで fadeIn(),fadeOut() をつくってみた

JavaScript

サーバーサイド言語の前にJavaScriptが理解できてなかった。なので勉強中。

jQueryってとても便利なんですけど、入門者が10のコードを作るのに200のライブラリを読み込むってのはどうなのって感じがしてしまいます。なので勉強をかねてfadeIn(),fadeOut()のスニペットをつくってみました。

というのも、カスタムUI作りたいな～と色々さがしてSweetAlertを見てたら、その中にシンプルでわかりやすいコードがあったので。(正直jQueryの中の fadeIn/fadeOut はややこしくて何やってるかわかりません。。。)
sweet-alert.jsでは引数がフレーム間隔指定だったので普通にduration指定にしてついでにCallbackも付けてみました。

今どきは古いIEを無視してCSSのtransitonでやればいいんでしょうけど、まぁ練習です。

function fadeOut(el, ms, fn) {
    ms = ms || 400;             // duration in milliseconds
    el.style.opacity = 1;
    var interval = 50,           // frame interval 50ms -> 20fps
        step = interval / ms;
    function tick() {
        el.style.opacity -= step;
        if (+el.style.opacity > 0) {
            setTimeout(tick, interval);
        } else {
            el.style.display = 'none';
            if (typeof fn === 'function') {
                fn();
            }
        }
    }
    tick();
}
function fadeIn(el, ms, fn) {
    if (+el.style.opacity < 1) {
        ms = ms || 400;         // duration in milliseconds
        el.style.opacity = 0;
        el.style.display = 'block';
        var interval = 50,       // frame interval 50ms -> 20fps
            step = interval / ms;
        function tick() {
            el.style.opacity = +el.style.opacity + step;
            if (+el.style.opacity < 1) {
                setTimeout(tick, interval);
            } else {
                if (typeof fn === 'function') {
                    fn();
                }
            }
        }
        tick();
    } else {
        el.style.display = 'block'; // fallback IE8
        if (typeof fn === 'function') {
            fn();
        }
    }
}

デモ

function fadeTest(div) {
    fadeOut(div,1500,function(){
        fadeIn(div,1500,function(){
            alert('Done!');
        });
    });
}

Click!

'+'付けると文字→数値に変換できるとか、再帰呼び出しの使い方とか勉強になりました。

なんか変なとこあったら教えてください。

2014-12-31

仕上げに設定を変更して動作確認までしてみた

初めてローカル開発環境を作ってみたのつづきその8(最終回)

手順

作業ユーザの作成・設定

ローカルなので常にrootでもいいんだが、一応作業ユーザも作っておく。

# useradd [**user**]
# passwd [**pass**]
# usermod -G wheel [**user**]
# visudo
...
%wheel  ALL=(ALL)       ALL (コメントを外す)
:wq!

参考:
- ドットインストール / 【旧版】ローカル開発環境の構築 / #11 作業ユーザーを作成する
- ドットインストール / 【旧版】ローカル開発環境の構築 / #12 作業ユーザーの設定

セキュリティの設定

1. SELinuxの無効化

# getenforce
# setenforce 0
# vi /etc/sysconfig/selinux
...
SELINUX=enforcing   disabled に変更
:wq!

2. iptablesの無効化

今回、statusを見たら初めから起動していなかった。デフォルトでは無効になっているものなのかな？

# /etc/init.d/iptables status
iptables: ファイアウォールが稼働していません。
# /sbin/service iptables stop
# chkconfig iptables off

ここで一旦、reboot。

参考:
- ドットインストール / 【旧版】ローカル開発環境の構築 / #15 selinuxを無効化する
- ドットインストール / 【旧版】ローカル開発環境の構築 / #16 iptablesを無効化する

動作確認

ホスト側の共有フォルダに適当に"Hello World!"的なhtmlファイルやphpファイルを入れて、ブラウザで仮想サーバを見てみる。→OK。
ホスト側でhtmlファイルを編集・保存して、ブラウザを更新してみる。→直ぐに反映されてるのでOK。

これでようやく手軽にサーバーサイド言語の勉強ができる環境が完成。(ここまで手軽じゃなかったけど^^;)

ちなみに、この時点のVirtual Disk Image(VDI)のファイルサイズは1.57GB。CentOSのfreeコマンドでみたメモリ使用量は140MB。

2014-12-31

CentOS6にVirtualBox Guest Additionsをインストールして共有フォルダをつくってみた

初めてローカル開発環境を作ってみたのつづきその7

VirtualBoxでゲスト-ホスト間の共有フォルダが使えるようにするにはGuest Additionsのインストールが必要。詳しくはGoogle先生に聞いてみてください。

手順

Guest Additionsのインストール

あらかじめKernel関係の追加パッケージをインストールして再起動しておく。

CentOSが立ち上がった状態でコンソールのメニューからデバイス>Guest AdditionのCDイメージを挿入を選択すると、仮想マシンのCDドライブにisoイメージが挿入される。

# mkdir /media/cdrom
# mount -r /dev/cdrom /media/cdrom
# cd /media/cdrom
# sh VBoxLinuxAdditions.run

終わると最後に"Window System driversをスキップしたよ"といわれるがX-Windowは入ってないので無視。

共有フォルダの設定

コンソールのメニューからデバイス>共有フォルダ設定...を選択。

出てきたダイアログの右端にあるアイコンかコンテキストメニューの共有フォルダを追加をクリック。

"フォルダーのパス"に共有フォルダにするホスト側のフォルダを指定し、"永続化する"にチェックを入れてOK。

"自動マウント"にチェックを入れておくと、ゲスト側CentOSでは共有フォルダが "vboxsf"グループで/media/sf_(共有フォルダ名)に自動マウントされる。このフォルダのパーミッションはデフォルトで770になっており、何故かchmodでは変更できないので使いづらい。
手動マウントの方法はmountコマンドか/etc/fstabで設定。(マニュアルChapter 4. Guest Additions)
- mountコマンドの場合はoptionでパーミッションも指定して、/etc/rc.localに記入。
- /etc/fstabの場合は、デフォルトでパーミッションは777になる。今回はこれでいく。

# vi /etc/fstab
...
(ファイルの最後に行を追加して)
[**フォルダー名**]   [**マウントポイント**]   vboxsf   defaults  0   0

:wq

rebootしてから共有フォルダが機能しているか確認。

ちなみに今回はDocumentRootに直接マウントした。 SELinuxが有効の状態だとブラウザでDocumentRootにアクセスできなくなってしまうのであとで無効にする。

baku’s memorandum

いわゆる備忘録