読者です 読者をやめる 読者になる 読者になる

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>
      <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>
  </main>

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

f:id:kosumoro:20161115225716j:plain

スクリプトの作成

これもユーザー登録のときとほぼ同じ。

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

  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("Success: ", user_);
    }).catch(function(err_) {
      console.log("Error: ", err_)
    });
  });

  function getDOMElements() {
    return {
      "emailField": document.getElementById("email-login"),
      "passwordField": document.getElementById("password-login"),
      "loginButton": document.getElementById("submit-login")
    };
  }

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

firebaseユーザー登録機能を実装してみる

題の通り。firebaseのユーザー登録機能を実装してみる。

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

プロジェクトの設定

Firebaseコンソールからプロジェクトを選択して、「Authentication」 → 「ログイン方法」 → 「メール / パスワード」を有効にする。

f:id:kosumoro:20161114224340j:plain

https://console.firebase.google.com/

ユーザー登録画面の作成

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

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

      <p>
        <button id="submit-register">新規登録する</button>
      </p>
    </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:20161114221400j:plain

スクリプトの作成

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

  elems.registerButton.addEventListener("click", function() {
    var email_ = elems.emailField.value;
    var password_ = elems.passwordField.value;
    
    firebase.auth().createUserWithEmailAndPassword(email_, password_).then(function(user_) {
      console.log("Success: ", user_);
    }).catch(function(err_) {
      console.log("Error: ", err_)
    });
  });

  function getDOMElements() {
    return {
      "emailField": document.getElementById("email-register"),
      "passwordField": document.getElementById("password-register"),
      "registerButton": document.getElementById("submit-register")
    };
  }

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

input 欄にメールアドレスとパスワードを入力してボタンをクリックするとユーザー登録ができる。

f:id:kosumoro:20161114223017j:plain

登録したユーザーはfirebaseコンソールからも確認できる。

f:id:kosumoro:20161114223259j:plain

同じメールアドレスで登録しようとするとエラーになる。

f:id:kosumoro:20161114223621j:plain

メールアドレスの形式がおかしくてもエラーを返してくれる。

f:id:kosumoro:20161114223837j:plain

【JavaScript実験】 Google Apps ScriptでLINEにメッセージを送る

Google Apps ScriptからLINEにメッセージを送信してみた。

f:id:kosumoro:20161110002546p:plain

コマンドラインから LINE にメッセージを送れる LINE Notify « LINE Engineers' Blog

アクセストークンの発行

https://notify-bot.line.me/my/

「トークンを発行する」をクリックすると設定ダイアログが開く。

f:id:kosumoro:20161110003245j:plain

トークン名と送信先トークルームを設定して「発行する」をクリックする。発行したトークンは取っておく。

GAS作成

「ファイル」→「プロジェクトのプロパティ」→「スクリプトのプロパティ」に、上で取得したLINE NOTIFYのトークンを追加する。

function sendNotifyRequest() {
  var properties = PropertiesService.getScriptProperties();
  var token = properties.getProperty("LINE_NOTIFY_TOKEN");
  
  var response = UrlFetchApp.fetch("https://notify-api.line.me/api/notify", {
    "method": "post",
    "headers": {
      "Authorization": "Bearer " + token
    },
    "payload": {
      "message": "Hello world!"
    }
  });
}

【JavaScript実験】 Google Apps ScriptでTwitterの検索結果を取得する

さしあたりコードのみ。

function app() {
  var properties = PropertiesService.getScriptProperties();
  var KEY = properties.getProperty("TWITTER_API_KEY");
  var SECRET = properties.getProperty("TWITTER_API_SECRET");
  
  var credentials = createCredentials(KEY, SECRET);
  var token = getToken(credentials);
  var statuses = getTweets(token, "#okinawa");
  
  statuses.forEach(function(status) {
    Logger.log(status.text);
  });
  
  function createCredentials(key, secret) {
    return Utilities.base64Encode(key + ":" + secret);
  }
  
  function getToken(credentials) {
    var response = UrlFetchApp.fetch("https://api.twitter.com/oauth2/token", {
      "method": "post",
      "headers": {
        "Authorization": "Basic " + credentials
      },
      "payload": {
        "grant_type": "client_credentials"
      }
    });
    
    return JSON.parse(response.getContentText()).access_token;
  }
  
  function getTweets(token, query) {
    var response = UrlFetchApp.fetch("https://api.twitter.com/1.1/search/tweets.json?q=" + encodeURIComponent(query), {
      "method": "get",
      "headers": {
        "Authorization": "Bearer " + token
      }
    });
    
    return JSON.parse(response.getContentText()).statuses;
  }
}

【JavaScript実験】 Google Apps Scriptをバックエンドとして利用する

Google Apps Scriptをバックエンドとして使えないか試してみた。

結果としては十分使えそうだが、認証周りが厄介かもしれない(Googleにログインしていないと使えない)。

https://cosmology233.github.io/sandbox/hatena/2016/10/23/

プロジェクトを作成する

新規プロジェクトを作成する。

(hatenaという名前で作成した。)

https://console.developers.google.com/

APIを有効にする

ダッシュボードの「APIを有効にする」をクリックする。

「Execution API」を検索し、「Google Apps Script Execution API」をクリックする。

APIの詳細画面で「有効にする」をクリックする。

https://console.developers.google.com/apis/api/script/

Client ID を取得する

「認証情報」→「認証情報を作成」をクリックする。

「OAuth クライアント ID」をクリックする。

以下入力して「作成」をクリックする。

「クライアント ID」、「クライアント シークレット」をメモしておく。

https://console.developers.google.com/apis/credentials

あとで使うのでプロジェクト番号をメモしておく。プロジェクト番号は「プロジェクトを設定」から確認できる。

f:id:kosumoro:20161023231046j:plain

https://console.developers.google.com/

Google Apps Scriptでスクリプトファイルを作成する

ファイル編集画面を開いたら「ファイル」→「プロジェクトのプロパティ」をクリックする。

新しいプロジェクト名に適当なプロジェクト名を入力して「OK」をクリックする。

関数を編集する。

function app(message) {
  return "your message: " + message;
}

(必要ではないが、ファイル名を 20161023.gs 、関数名を app に変更した。)

https://script.google.com/

スクリプトをプロジェクトに紐付ける

「リソース」→「Developers Console プロジェクト」をクリックする。

プロジェクトを変更の欄に、先ほど作成したプロジェクトのプロジェクト番号を入力して「プロジェクトを設定」をクリックする。

いろいろ確認画面が出るのでプロジェクトを変更する方向で進めていく。

https://script.google.com/

APIとして公開する

「公開」→「実行可能APIとして導入」をクリックする。

バージョンの説明を入力し、スクリプトにアクセスできるユーザーを「全員」に設定して「導入」をクリックする。

「現在のAPI ID」が表示されるのでメモしておく。

※この操作を行った時の状態がAPIとして反映される。つまりこの操作の後にスクリプトを編集しても変更は公開APIに反映されない。公開APIを変更したいときはバージョンを新規作成する必要がある。

フロントの作成

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Practice JavaScript</title>
</head>
<body>
  <script src="./scripts/script.js"></script>
  <script src="//apis.google.com/js/client.js?onload=onGASClientReady"></script>
</body>
</html>

scripts/script.js

function onGASClientReady() {
  var CLIENT_ID = "139011955613-rrvsqfs1c3qqppff7u1gkchd9n7f5ao8.apps.googleusercontent.com";
  var API_ID = "Mng5vKd6gxsTipI9BPJjsh54dPxjXBoFR";
  
  /**
   * 認証後、GASのスクリプトを実行。
   * 結果をコンソールに出力する。
   */
  authorize().then(function() {
    execGoogleAppsScript(function(result) {
      console.log(result);
    });
  });
  
  function authorize() {
    return new Promise(function(resolve, reject) {
      gapi.auth.authorize({
        "client_id": CLIENT_ID,
        "scope": "profile",
        "immediate": false
      }, function() {
        resolve();
      });
    });
  }
  
  function execGoogleAppsScript(callback) {
    var request = gapi.client.request({
      "root": "https://script.googleapis.com",
      "path": "v1/scripts/" + API_ID + ":run",
      "method": "POST",
      "body": {
        "function": "app",
        "parameters": ["Hello World!"]
      }
    });
    
    request.execute(function(response) {
      callback(response.response.result);
    });
  }
}

【JavaScript実験】 ズンドコキヨシに挑戦

ズンドコキヨシを書いてみた。

【JavaScript実験】 FizzBuzzに挑戦 - こすもろのメモ帳

ズンドコキヨシまとめ - Qiita

(function() {
  var cache = [];
  
  while(cache.join(" ") != "ズン ズン ズン ズン ドコ") {
    cache.push(["ズン", "ドコ"][Math.floor(Math.random() * 2)]);
    
    console.log(cache[cache.length - 1]);
    
    if(cache.length > 5) {
      cache.shift();
    }
  }
  
  console.log("キ・ヨ・シ!");
})();

ちなみにコードゴルフに挑戦した方のコードはこうなったようだ。

for(n=3;n-64;console.log(n-64?(n|=2*Math.random())&1?'ドコ':'ズン':'キ・ヨ・シ!'))n<<=6

jsでズンドコキヨシのコードゴルフ(87byte) - Qiita

for(
    n=3;
    n-64;
    console.log(
        n-64?
          (n |= 2 * Math.random()) & 1?
            'ドコ':
          'ズン':
          'キ・ヨ・シ!'
    )
) n<<=6

ズンを1, ドコを0としてズン ズンズン ズンドコの判定は 0b11110 = 30 というビット列が現れるかどうかで判定できます。

ビット演算わけわからなすぎる。

【JavaScript実験】 FizzBuzzに挑戦

久しぶりにFizzBuzzを書いてみた。

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

(function() {
  fizzBuzz(1, 100);
  
  function fizzBuzz(start, times) {
    for(var i = start; i <= times; i++) {
      console.log(
          (i % 3 == 0? "Fizz": "") +
          (i % 5 == 0? "Buzz": "") +
          (i % 3 != 0 && i % 5 != 0? i: "")
      );
    }
  }
})();

ほかのやり方が気になって「FizzBuzz コードゴルフ」見たいな感じで検索すると、下のコードを見つけた。

for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

ES2015時代のFizzBuzzに挑戦する - Qiita

for 文ひとつとってもまだまだ奥が深い。

最近Qiitaでズンドコキヨシのやつを見かけるので気が向いたらチャレンジしてみようと思う。

ズンドコキヨシまとめ - Qiita