Developer Site

https://developers.google.com/api-client-library/javascript/

Client Repository

https://code.google.com/p/google-api-javascript-client/

How to call Calendar API

Create Google App

  1. access Developer Console Site.
  2. click CREATE PROJECT button.
  3. click APIs & auth > APIs menu in left column.
  4. trun on Calendar API button.
  5. click Credential menu in left column.
  6. copy client ID in Client ID for web application section.

create app

Create HTML

load Javascript client. onload parameter is to set a callback method name which will be called when client is initialized.

<script src="https://apis.google.com/js/client.js?onload=onLoadGapiClient"></script>

Auth

Following method is to auth. You can check about calendar auth information and auth method.

var config = {
	'client_id': clientId,
    'scope'    : 'https://www.googleapis.com/auth/calendar',
    'immediate': false
};
gapi.auth.authorize(config, $.proxy(this.handleAuthResult, this));

Get Calendar Information

Following method is to get calendar information. You can check about client method (gapi.client.calendar)

var config = {
        minAccessRole: 'owner'
    },
    request = gapi.client.calendar.calendarList.list(config);

request.execute(function(res){
    console.log(res); // calendar informatino :)
});

My Sample Code

here! :)

Prerequisite

Create new app

mkdir ${appname}
cd ${appname}
sencha -sdk {senchatouch_skd_path} generate app ${appname} ./

Create .bowerrc

Create .bowerrc to install component into ux folder.

vi .bowerrc
{
 	 	"directory": "ux"
	}

Create bower.json

bower init

Install

※ Following operation is sample when you use sencha-list-scroll-reset.

bower install --save sencha-list-scroll-reset

├── .bowerrc
├── bower.json
└── ux
    └── sencha-list-scroll-reset
        ├── .bower.json
        └── bower-dist
            └── ux
                └── touch
                    └── ListScrollReset.js

Settings in your sencha touch app

Set class path to custom component in app.js.

vi app/app.js

Ext.Loader.setConfig ({
    enabled: true ,
    paths: {
        'Ext.ux.touch.ListScrollReset': 'ux/touch/ListScrollReset.js'
    }
});

Use component

Add class name in requires config.

'use strict';
Ext.define('SenchaListScrollReset.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    requires: [
        'Ext.Toolbar',
        'Ext.ux.touch.ListScrollReset', // ← 追加
        'Ext.dataview.List',
        'Ext.data.Store'
    ],

Settings for build your sencha touch app

You should add settings to build you app.

vi .sencha/app/sencha.cfg

Add ,ux.

app.classpath=${app.dir}/app.js,${app.dir}/app,ux

Facebook evens

Facebook SDK has subscribe method to subscribe some events. For example, liked / remove liked / add comment / remove comment

https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

I will introduce you this utility JavaScript Library to tracking facebook event by using Google Analytics GaTrackingFbEvent

GaTrackingFbEvent

Build Status

Utility Class of tracking some Facebook events by using Google Analyitcs

Outline

This script enable to track some Facebook event such as like, unlike, add comment, remove comment and send message.

Initialize

var gaFbEvent = new GoolgeAnalyticsFbEvent({
  like          : true, // when set false, do not track
  unlike        : true,
  addComment    : true,
  removeComment : true,
  sendMessage   : true,
  callback      : function(res){
    // callback fire when these event was called.
  }
});
// subscribe Facebook event to tracking by Google Analytics
gaFbEvent.subscribe();

Usage

load Facebook SDK asynchronously

<!-- load this script -->
<script src="./GoolgeAnalyticsFbEvent.js"></script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-X', ${YOUR_DOMAIN});
  ga('send', 'pageview');

</script>

<script>
window.fbAsyncInit = function(){

  FB.init({
    appId      : ${FACEBOOK_APP_ID},
    status     : true,
    cookie     : true,
    xfbml      : true
  });

  var gaFbEvent = new GoolgeAnalyticsFbEvent({
    like          : true,
    unlike        : true,
    addComment    : true,
    removeComment : true,
    sendMessage   : true,
    callback      : function(res){
      // callback fire when these event was called.
    }
  });
  // subscribe Facebook event to tracking by Google Analytics
  gaFbEvent.subscribe();

};

</script>

<script>
  (function(d){
   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement('script'); js.id = id; js.async = true;
   js.src = "//connect.facebook.net/en_US/all.js";
   ref.parentNode.insertBefore(js, ref);
  }(document));
</script>

Check on Google Analytics

  1. access to Google Analytics
  2. Traffic Sources -> Social -> Plugins -> URL -> Social Source and Action

Google Analytics Screenshot

Notice

  • This script support Universal Analytics (analytics.js)

Outline

SublimeText2 Emmet Plugin has a useful commnad. You can add tow image size attributes ( width/height ) automatically by using follows commnad.

cmd + shift + p -> "Emmet : Update Image Size

If you markup html for Smart Phone (e.g. iPhone) you have to add half size image attributes for Retina display.

But that command can’t add half size of it.

So I will summarize how to add half image size attributes for Retina by using SublimeText2 Emmet Plugins.

1. Open script file of emmet

  1. open Finder : Preferences -> Browse Packages…
  2. open script file : Emmet -> emmet -> emmet-app.js

2. Modify functions

overwrite ‘updateImageSizeHTML’ function by the follows code

emmet-app.js

function updateImageSizeHTML(editor, isRetina) {
  var offset = editor.getCaretPos(),
      rate = isRetina ? 0.5 : 1;

  // find tag from current caret position
  var info = require('editorUtils').outputInfo(editor);
  var xmlElem = require('xmlEditTree').parseFromPosition(info.content, offset, true);
  if (xmlElem && (xmlElem.name() || '').toLowerCase() == 'img') {
    getImageSizeForSource(editor, xmlElem.value('src'), function(size) {
      if (size) {
        var compoundData = xmlElem.range(true);
        xmlElem.value('width', Math.floor(size.width * rate));
        xmlElem.value('height', Math.floor(size.height * rate), xmlElem.indexOf('width') + 1);

        require('actionUtils').compoundUpdate(editor, _.extend(compoundData, {
          data: xmlElem.toString(),
          caret: offset
        }));
      }
    });
  }
}

overwrite ‘updateImageSizeCSS’ function by the follows

emmet-app.js

function updateImageSizeCSS(editor, isRetina) {
  var offset = editor.getCaretPos(),
      rate = isRetina ? 0.5 : 1;

  // find tag from current caret position
  var info = require('editorUtils').outputInfo(editor);
  var cssRule = require('cssEditTree').parseFromPosition(info.content, offset, true);
  if (cssRule) {
    // check if there is property with image under caret
    var prop = cssRule.itemFromPosition(offset, true), m;
    if (prop && (m = /url\((["']?)(.+?)\1\)/i.exec(prop.value() || ''))) {
      getImageSizeForSource(editor, m[2], function(size) {
        if (size) {
          var compoundData = cssRule.range(true);
          cssRule.value('width', Math.floor(size.width * rate) + 'px');
          cssRule.value('height', Math.floor(size.height * rate) + 'px', cssRule.indexOf('width') + 1);

          require('actionUtils').compoundUpdate(editor, _.extend(compoundData, {
            data: cssRule.toString(),
            caret: offset
          }));
        }
      });
    }
  }
}

add update_image_size_for_retin(the follows code) under the update_image_size

emmet-app.js

require('actions').add('update_image_size', function(editor) {
  // this action will definitely won’t work in SASS dialect,
  // but may work in SCSS or LESS
  if (_.include(['css', 'less', 'scss'], String(editor.getSyntax()))) {
    updateImageSizeCSS(editor, false);
  } else {
    updateImageSizeHTML(editor, false);
  }

  return true;
});
// ****** add the follows code ******
// for Retina
require('actions').add('update_image_size_for_retina', function(editor) {
  // this action will definitely won’t work in SASS dialect,
  // but may work in SCSS or LESS
  if (_.include(['css', 'less', 'scss'], String(editor.getSyntax()))) {
    updateImageSizeCSS(editor, true);
  } else {
    updateImageSizeHTML(editor, true);
  }

  return true;
});

3. Open configuration file

  1. open finder : Preferences -> Browse Packages…
  2. open configuration file : Emmet -> Default.sublime-commands

4. Modify configuration file

add follows code in Default.sublime-commands

{
    "caption": "Emmet: Update Image Size for Retina",
    "command": "run_emmet_action",
    "args": {
        "action": "update_image_size_for_retina"
    }
},

5. Do action of Emmet

  1. open html file
  2. add IMG tag including image path
  3. select action : cmd + shift + p -> "Emmet : Update Image Size for Retina"
  4. press Enter key.! :)

Prerequisite

  • created heroku account.
  • installed heroku toolbelt.
  • develop express app and commit git repository (e.g. github).

Process (Command)

1. login by using heroku command

heroku login

Input email address and password of heroku account.

Enter your Heroku credentials. Email: XXXXXX Password (typing will be hidden):

2. create public key

ssh-keygen -t rsa -C "mail address"
heroku keys:add ~/.ssh/id_rsa.pub

3. clone Express app

$ git clone XXXXXXXXXXXXX ${appname} $ cd ${appname}

4. edit .gitignore

vi .gitignore

Add follows text in .gitignore.

node_modules

5. edit package.json

You have to add follows settings to deploy your app on heroku in package.json.

vi .gitignore
vi package.json
"engines": {
    "node": "XXX",
    "npm": "XXX"
}

6. create web server process setting config

On hreoku, You have to create Procfile. It is process configuration file you will start your app.

vi Procfile

Write follows text.

web: node app.js

8. create app on heroku

heroku create ${appname}

Creating ${appname}… done, stack is cedar http://${appname}.herokuapp.com/ | git@heroku.com:${appname}.git Git remote heroku added

9. push Express app code to heroku git repository

When you push code to heroku git repository. All npm dependency resources are installed.

git push heroku master

Reference

Other heroku command

start app on local

foreman start

check web server process

heroku ps:scale web=1

check heroku logs

Including access log.

heroku logs

run command on heroku

heroku run ${command}