さくらvpsにNode.jsをインストールする。

  1. git clone git://github.com/creationix/nvm.git ~/.node
  2. . ~/.node/nvm.sh
  3. nvm install 6.10.0

  4. Node最新版のバージョン情報:https://nodejs.org/ja/

さくらvpsにgit最新版をインストールする。

  1. sudo yum remove git
  2. cd /usr/local/src
  3. yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker
  4. sudo wget https://www.kernel.org/pub/software/scm/git/git-2.12.0.tar.gz
  5. sudo tar xzvf git-2.12.0.tar.gz
  6. cd git-2.12.0
  7. sudo make prefix=/usr/local all
  8. sudo make prefix=/usr/local install
  9. git --version

  10. Git最新版のバージョンを確認:https://git-scm.com/

  11. Gitパッケージのパスを取得:https://www.kernel.org/pub/software/scm/git/

さくらvpsにnginxをインストールする。

  1. sudo yum install http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
  2. sudo yum install --enablerepo=nginx nginx

さくらVPSを契約した。

VPSを使ってみたかったのでさくらVPSを契約することにした。

http://vps.sakura.ad.jp/

とりあえず一番安いプランの512で始めることにした。

プラン 512
CPU 仮想1Core
メモリ 512MB
利用料金(月額) 685円
利用料金(年額) 7,543円

ブラウザのダッシュボードからOSのインストールができるのでCent OS 6をインストールした。

# cat /etc/redhat-release

=> CentOS Linux release 7.2.1511 (Core)

セキュリティの設定

セキュリティの設定 – さくらのサポート情報

  • 一般ユーザーの追加

  • useradd <USERNAME>

  • passwd <USERNAME>

  • sudoの設定

  • usermod -G wheel <USERNAME>

  • visudo
## Allows people in group wheel to run all commands 
%wheel ALL=(ALL) ALL
  • システムのアップデート

  • yum update

  • SSH接続の設定変更

  • id_rsa, id_rsa.pubファイルを作成する。

  • 作成したid_rsa.pubファイルをユーザーのホームディレクトリに転送する。
  • cd ~
  • mkdir .ssh
  • chmod 700 .ssh
  • cat id_rsa.pub > .ssh/authorized_keys
  • chmod 600 .ssh/authorized_keys
  • rm -f id_rsa.pub
  • sudo vi /etc/ssh/sshd_config
  • sudo /etc/rc.d/init.d/sshd reload

/etc/ssh/sshd_config

Port22

PermitRootLogin no 

PasswordAuthentication no

firewalldの設定

  1. vi /etc/firewalld/zones/public.xml

/etc/firewalld/zones/public.xml

<zone>
  ...
  <service name="http"/>
</zone>

Date PickerライブラリのFlatpickrを使ってみる

Date PickerライブラリのFlatpickrを使ってみる

https://cosmology233.github.io/sandbox/hatena/2017/01/09/

https://chmln.github.io/flatpickr/

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
  <title>Practice JavaScript</title>
</head>
<body>
  <p>
    <input id="flatpickr" class="flatpickr" type="text"
        placeholder="Select Date.." value="2017-01-09">
  </p>
    
  <script src="https://unpkg.com/flatpickr"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

scripts/script.js

(function() {
  var elems = getDOMElements();
  var today = new Date();
  var calendar = null;
  
  Flatpickr.l10ns.default.weekdays.shorthand = [
    "日", "月", "火", "水", "木", "金", "土"
  ];
  
  calendar = new Flatpickr(elems.flatpickr, {
    "enableTime": true,
    "defaultDate": today
  });
  
  function getDOMElements() {
    return {
      "flatpickr": document.getElementById("flatpickr")
    };
  }
})();

できること

  • 時間の選択
  • 表示フォーマットの指定
  • 日付の範囲の指定
  • 初期表示日付の指定
  • UTCの使用
  • 表示・非表示トグルボタン、クリアボタンの追加
  • 無効な日付の指定
  • 有効な日付の指定
  • 範囲指定モード
  • 複数指定モード
  • カレンダーを常に表示
  • 週番号の表示
  • 会計年度カレンダー
  • イベントハンドラの設定
  • 操作用API
  • ロケールの設定
  • 各種l10n設定("Sun" => "日" など)

File APIを使用してローカルのJSONファイルをブラウザで読み込む

ローカルのJSONファイルを読み込んでオブジェクトに展開する。

https://cosmology233.github.io/sandbox/hatena/2016/11/20/

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Practice JavaScript</title>
</head>
<body>
  <p><input id="file" type="file" accept="text/json"></p>
  
  <script src="./scripts/script.js"></script>
</body>
</html>

scripts/script.js

(function() {
  var elems = getDOMElements();
  
  elems.fileField.addEventListener("change", function(ev_) {
    var reader = new FileReader();
    
    reader.addEventListener("load", function(ev__) {
      var result = ev__.target.result;
      
      console.log(JSON.parse(result));
    });
    
    reader.readAsText(ev_.target.files[0]);
  });
  
  function getDOMElements() {
    return {
      "fileField": document.getElementById("file")
    };
  }
})();

最近 getDOMElements の書き方にハマっている。

firebaseのログアウト機能を実装してみる

ユーザーがログインしていたらログアウトボタンを、ログインしていなかったらログインボタンを表示する。

firebaseホスティングサービスの登録からデプロイまで - こすもろのメモ帳

firebaseユーザー登録機能を実装してみる - こすもろのメモ帳

firebaseのログイン機能を実装してみる - こすもろのメモ帳

画面の作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ログアウト画面</title>
</head>
<body>
  <main>
    <div id="container-login">
      <p>
        <label for="email-login">メールアドレス</label>
        <input id="email-login" type="email"
            placeholder="メールアドレスを入力してください">
      </p>

      <p>
        <label for="password-login">パスワード</label>
        <input id="password-login" type="password"
            placeholder="パスワードを入力してください">
      </p>

      <p>
        <button id="submit-login">ログイン</button>
      </p>
    </div>
    
    <div id="container-logout">
      <p id="status-user"></p>

      <button id="submit-logout">ログアウト</button>
    </div>
  </main>

  <script src="//www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
  <script src="./scripts/script.js"></script>
</body>
</html>

ログインしていたら、ユーザーのメールアドレスとログアウトボタンを表示する。

f:id:kosumoro:20161116233924j:plain

ログインしていなかったら、ログイン用フォームを表示する。

f:id:kosumoro:20161116234112j:plain

スクリプトの作成

(function() {
  var app = initializeApp();
  var elems = getDOMElements();

  firebase.auth().onAuthStateChanged(function(user_) {
    if(user_) {
      elems.userStatus.textContent = user_.email;
      elems.loginContainer.style.display = "none";
      elems.logoutContainer.style.display = "block";
    }
    else {
      elems.userStatus.textContent = "";
      elems.loginContainer.style.display = "block";
      elems.logoutContainer.style.display = "none";
    }
  });

  elems.loginButton.addEventListener("click", function() {
    var email_ = elems.emailField.value;
    var password_ = elems.passwordField.value;

    firebase.auth().signInWithEmailAndPassword(email_, password_).then(function(user_) {
      console.log("Signed in: ", user_);
    });
  });

  elems.logoutButton.addEventListener("click", function() {
    firebase.auth().signOut().then(function() {
      console.log("Signed out.");
    });
  });

  function getDOMElements() {
    return {
      "loginContainer": document.getElementById("container-login"),
      "logoutContainer": document.getElementById("container-logout"),
      "emailField": document.getElementById("email-login"),
      "passwordField": document.getElementById("password-login"),
      "loginButton": document.getElementById("submit-login"),
      "userStatus": document.getElementById("status-user"),
      "logoutButton": document.getElementById("submit-logout")
    };
  }

  function initializeApp() {
    firebase.initializeApp({
      "apiKey": "【プロジェクトのAPIキー】",
      "authDomain": "【プロジェクト名】.firebaseapp.com",
      "databaseURL": "https://【プロジェクト名】.firebaseio.com",
      "storageBucket": "【プロジェクト名】.appspot.com",
    });
  }
})();