Category: dev.google

Using OAuth 2.0 to Access Google APIs

Google APIでクライアントID、クライアントシークレットを発行し、OauthでGoogle APIにアクセスします。

<?php

require_once('config.php');
require_once('functions.php');

session_start();

if (empty($_GET&#91;'code'&#93;)){
  // 認証前

  // 認証ダイアログ
  // csrf
  $_SESSION&#91;'state'&#93; = sha1(uniqid(mt_rand(), true));

  $params = array(
        'client_id' => CLIENT_ID,
        'redirect_uri' => 'dev.hogehoge.com:8000/redirect.php',
        'state' => $_SESSION['state'],
        'approval_prompt' => 'force',
        'scope' => 'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email',
        'response_type' => 'code'
    );

  // googleへ飛ばす
  $url = 'https://accounts.google.com/o/oauth2/auth?'.http_build_query($params);
    header('Location: '.$url);
    exit;
} else {
  // 認証後
  // ssrf state check
  if ($_SESSION['state'] != $_GET['state']){
    echo "不正な処理でした！";
    exit;
  }

  // access_tokenを取得

  // ユーザー情報

  // DBに格納

  //　ログイン処理

  // index.phpへ飛ばす
}

chrome.contextMenus

右クリックで、twitter検索

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.4",

	"description": "twitter search from context menu",

	"permissions": ["tabs", "http://*/*","https://*/*", "contextMenus"],

	"background": {
		"scripts": ["background.js"]
	}
}
chrome.contextMenus.create({
	"title":"「%s」をtwitterで検索",
	"type":"normal",
	"contexts":["selection"],
	"onclick": function(info){
		var url = 'https://twitter.com/search?q='+ encodeURIComponent(info.selectionText);
		chrome.tabs.create({
			url: url
		});
	}
});

ドキュメント
Chrome developer

Chrome Declare Permissions

ワイルドカードでパーミッションの権限を与えます。”permissions”: [“tabs”, “http://*/*”,”https://*/*”],

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",

	"description": "背景色変更",

	"permissions": ["tabs", "http://*/*","https://*/*"],


	"browser_action":{
          "default_title": "Chrom Extension",      // optional; shown in tooltip
          "default_popup": "popup.html"
	}
}

function changeColor(color){
	chrome.tabs.executeScript(null, {
		"code": "document.body.style.backgroundColor='"+color+"'"
	});
}

document.getElementById('red').onclick = function(){
	changeColor('red');
}

document.getElementById('yellow').onclick = function(){
	changeColor('yellow');
}

chrome.browserAction

Chromeの拡張機能にパッケージ化されていない機能をmanifest.jsonで追加します。

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",

	"description": "A plain text description",

	"browser_action":{
          "default_title": "Chrom Extension",      // optional; shown in tooltip
          "default_popup": "popup.html"
	}
}

Manifest File Format
Chrome developer

二次元バーコード生成

jQuery doc
.attr()
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二次元バーコード</title>
    <style>
    body {

    }
    </style>
  </head>
  <body>
    <h1>二次元バーコード</h1>
    <p>
      <input type="text" id="msg">
      <input type="button" value="変換" id="button">
    </p>
    <div id="barCode"></div>
  <script>
    $(function(){
      $('#button').click(function(){
          var msg = encodeURIComponent($('#msg').val());
          var img = $('<img>').attr('src', 'http://chart.apis.google.com/chart?cht=qr&chs=150x150&choe=Shift_JIS&chl='+msg);
          $('#barCode').html(img);
      });
    });
  </script>
  </body>
</html>

Google Apps Script

Google Apps ScriptはGoogleの各サービスを制御するスクリプトです。googleのサーバー上で動いており、JavaScriptで書いていきます。

Google Apps Script
%e7%84%a1%e9%a1%8c

まずは、スプレッドシートから見てみます。
%e7%84%a1%e9%a1%8c

表示=>ログ　で書いた内容を表示できます。

function hello() {
  Logger.log("hello world");
}

ブラウザ表示

function hello() {
  Browser.msgBox("Hello");
}

カスタム関数の作成

function getDouble(n){
  return n * 2;
}

任意のスプレッドシートへの値の挿入

function setData(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var range = sheet.getRange("A1");
  
  range.setValue(100);
}

function setData(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getActiveSheet();
  var range = sheet.getRange(1, 2);
  
  range.setValue(100);
  range.setBackground("red");
}

function getResults(){
  var sheet = SpreadsheetApp.getActiveSheet();
  for (var i = 1; i <= sheet.getLastRow(); i++){
    if(sheet.getRange(i, 2).getValue() >= 70){
     sheet.getRange(i, 3).setValue("OK").setBackground("green");
    } else {
      sheet.getRange(i, 3).setValue("NG").setBackground("red");
    }
  }
}

mailApp

function sendReport(){
  var sheet = SpreadsheetApp.getActiveSheet();
  var n = 0;
  for (var i = 1; i <= sheet.getLastRow(); i++){
    if(sheet.getRange(i, 2).getValue() >= 70){
      n++;
    }
  }
  MailApp.sendEmail(
    "hogehoge@gmail.com",
    "合格者の数",
    n + "名合格しました！"
   );
}

トリガーを設定して、毎日N時にメールを送ることも可能です。
%e7%84%a1%e9%a1%8c

Google Formの送信

function sendReport(e) {
  var rs = '';
  
  var name = e.namedValues['お名前'];
  var email = e.namedValues['メールアドレス'];
  var attend = e.namedValues['参加？'];
  
  rs = "name: "+name+"\nemail: "+email+"attend: "+attend;
  
  MailApp.sendEmail("hogehoge@gmail.com", "回答ありました", rs)
}

Google Chart 棒グラフ

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Google chart</title>
    <script src="https://www.google.com/jsapi"></script>
    <script>
      google.load('visualization', '1.0', {'packages' : ['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart(){
        // データを用意
        // グラフのオプション
        // 描画する
        var data = new google.visualization.DataTable();
        data.addColumn('string', '年');
        data.addColumn('number', '売上');
        data.addColumn('number', '利益');
        data.addRows([
            ['2000', 500, 300],
            ['2001', 600, 320],
            ['2002', 800, 200],
            ['2003', 400, 200],
            ['2004', 200, 100],
          ]);

        var options = {
          title: '業績推移',
          width: 500,
          height: 500,
          isStack: true
        }
        var chart = new google.visualization.BarChart(document.getElementById('chart'));
        chart.draw(data, options);
      }
    </script>
<body>
<div id="chart"></div>
<h1></h1>
<p></p>
</body>
</html>

a

bar chartをcolumnにすると縦棒グラフになります。
var chart = new google.visualization.ColumnChart(document.getElementById(‘chart’));
%e7%84%a1%e9%a1%8c

棒グラフはLineです。
var chart = new google.visualization.LineChart(document.getElementById(‘chart’));
%e7%84%a1%e9%a1%8c

Google Charts

google chartsで円グラフを描画します。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Google chart</title>
    <script src="https://www.google.com/jsapi"></script>
    <script>
      google.load('visualization', '1.0', {'packages' : ['corechart']});
      google.setOnLoadCallback(drawChart);

      function drawChart(){
        // データを用意
        // グラフのオプション
        // 描画する
        var data = new google.visualization.DataTable();
        data.addColumn('string', '活動');
        data.addColumn('number', '時間');
        data.addRows([
            ['睡眠', 8],
            ['仕事', 12],
            ['ネット', 4],
          ]);

        var options = {
          title: '一日の内訳',
          width: 500,
          height: 500,
          pieSliceText: 'label',
          is3D: true
        }
        var chart = new google.visualization.PieChart(document.getElementById('chart'));
        chart.draw(data, options);
      }
    </script>
<body>
<div id="chart"></div>
<h1></h1>
<p></p>
</body>
</html>

piechart

Google web fontで遊ぼう

Webページ閲覧時、通常ではパソコンにインストールされているフォントしかブラウザで表示することが出来ませんが、「Webフォント」を使用すると任意のフォントを表示することが出来ます。

Google web fontの公式サイト
Google Web font
%e7%84%a1%e9%a1%8c

右のメニューバーで、Serif, Sans Serif, Display, Handwriting, Monospaceや、sortなどで、好みを選べます。
また、詳細にのページに行くと、誰が開発したかや、利用状況などを閲覧できます。

Google fontはheadタグとCSSに記入するだけで、簡単に利用できます。
例えば、以下のように記述します。

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>web fontの練習</title>
    <link rel="stylesheet" type="text/css"
      href="https://fonts.googleapis.com/css?family=Coiny|Tangerine">
      <style>
      h1 {
        font-family: 'Coiny', serif;
      }
      p {
        font-family: 'Tangerine', serif;
      }
      </style>
</head>
<body>
    <h1>Hello!</h1>
    <p>World</p>
</body>
</html>

%e7%84%a1%e9%a1%8c

Chrom developer toolのnetworkパネル

ページのロードに時間がかかってイライラすることありますよね。
そんなときは、chrom developer toolでどのコードがどれくらい時間がかかっているか調べることができます。

Networkで見ると、Analyticsの処理に時間がかかっていることがわかります。
%e7%84%a1%e9%a1%8c

チャートの青い線はDomが構成された時間の事です。オレンジの線は、画像の読み込みやiframeなどです。

更に詳しく見ていくには、timelineで見ていきます。

ちなみに、DOMとは、Document Object Modelのことで、Chrom developer toolでDOMを操作しても、ファイルは変更されません。