ktyr report

textareaでtab

var addTabKeyEvent = function($textarea){
	$textarea.on('keydown',function(e){
		if(e.keyCode == 9){
			e.preventDefault();
		}else{
			return;
		}
		var $this = $(this);
		var start = this.selectionStart;
		var v = $this.val();
		$this.val(v.substring(0,start) + "\t" + v.substring(this.selectionEnd));
		this.selectionStart = this.selectionEnd = start + 1;
	});
};
addTabKeyEvent($('textarea'));

deep-link.js
aタグタップでアプリ起動 > 無ければストアへ遷移

サンプル:/js/69/
GitHub:https://github.com/timseverien/deep-link.js

サンプルにおける修正点1
最後に’;end’が付いてないと動かない端末がある

if(isAndroidBrowser) {
return 'intent:' + app.split(':')[1] + '#Intent;scheme=' + scheme + ';package=' +
  store + ';S.browser_fallback_url=' + encodeURI(href)+';end';
}

サンプルにおける修正点2
でdeep-link.jsを読み込む時、初期化処理をDOM読み込み後に実行するよう変更

var init = function(){
	var elements = document.getElementsByTagName('a'),
		i = elements.length;
	while(i--) parseElement(elements[i]);
};
document.addEventListener('DOMContentLoaded',function(){
	init();
});

gulpfile.jsテンプレ
https://github.com/contra/gulp-concat
https://github.com/floridoo/gulp-sourcemaps
https://github.com/floatdrop/gulp-plumber
https://github.com/mikaelbr/gulp-notify
https://github.com/dlmanning/gulp-sass
https://github.com/chilijung/gulp-cssmin
https://github.com/hparra/gulp-rename
https://github.com/terinjokes/gulp-uglify
https://github.com/hustxiaoc/gulp-minify
https://github.com/OverZealous/run-sequence

// プラグイン読み込み
var gulp         = require('gulp');
var concat       = require('gulp-concat');//ファイル結合
var sourcemaps   = require('gulp-sourcemaps');//ソースマップ出力
var plumber      = require('gulp-plumber');//エラーで処理を止めないためのプラグイン
var notify       = require('gulp-notify');//エラー時通知
var sass         = require('gulp-sass');//sass
var cssmin       = require('gulp-cssmin');//css minify
var rename       = require('gulp-rename');//ファイル名変更
var uglify       = require('gulp-uglify');//js minify&難読化
//var minify       = require('gulp-minify');
var runSequence  = require('run-sequence');//処理順序指定用

//js結合
gulp.task('js-concat', function() {
  return gulp.src(['./js.src/_intro.js',
                   './js.src/_variable.js',
                   './js.src/_common.js',
                   './js.src/_model.js',
                   './js.src/_view.article.js',
                   './js.src/_outro.js'])
    .pipe(plumber({
      errorHandler: notify.onError("Error[js-concat]: <%= error.message %>")
    }))
    .pipe(sourcemaps.init())
    .pipe(concat('script.js'))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./js'));
});
/*
gulp.task('js-minify',function(){
  return gulp.src(['./js/script.js'])
    .pipe(minify({
      ext:{
        min:'.min.js'
      },
      compress:
    }))
    .pipe(gulp.dest('./js'));
});
*/
//js-concatの後に実行
gulp.task('js-uglify',['js-concat'], function() {
  return gulp.src(['./js/script.js'])
    .pipe(plumber({
      errorHandler: notify.onError("Error[js-uglify]: <%= error.message %>")
    }))
    .pipe(sourcemaps.init())
    .pipe(uglify({
      mangle       :false//変数名を変えない
    }))
    .pipe(rename({suffix:'.min'}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./js'));
});
gulp.task('sass', function(){
  return gulp.src('./css.src/*.scss')
    .pipe(plumber({
      errorHandler: notify.onError("Error[sass]: <%= error.message %>")
    }))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./css'));
});
//sassの後に実行
gulp.task('cssmin',['sass'], function(){
  return gulp.src(['./css/override.css'])
    .pipe(plumber({
      errorHandler: notify.onError("Error[cssmin]: <%= error.message %>")
    }))
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./css'));
});
// ファイルを監視して実行させる
gulp.task('watch',function() {
  return gulp.watch(['js.src/*.js','./css.src/*.scss'],['build']);
});
gulp.task('build', function(callback) {
  runSequence(['js-concat','js-uglify','sass','cssmin'],
              'watch',
              callback);
});
gulp.task('default',['build']);

concat + babel

var gulp = require("gulp");
var babel = require("gulp-babel");
var concat       = require('gulp-concat');
var plumber      = require('gulp-plumber');
var rename       = require('gulp-rename');
var notify       = require('gulp-notify');
var runSequence  = require('run-sequence');
var sourcemaps = require('gulp-sourcemaps');
var dir = './src/';

//結合
gulp.task('file-concat', function() {
    return gulp.src([
        dir + 'parts.intro.es6',
        dir + 'class.A.es6',
        dir + 'class.B.es6',
        dir + 'class.C.es6',
        dir + 'class.D.es6',
        dir + 'class.E.es6',
        dir + 'init.A.es6',
        dir + 'parts.outro.es6'
        ])
        .pipe(plumber({
            errorHandler: notify.onError("Error[js-concat]: <%= error.message %>")
        }))
        .pipe(concat('meter.es6'))
        .pipe(gulp.dest(dir));
});

gulp.task('babel', function() {
    return gulp.src(dir + 'result.es6')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015-ie']
        }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./'));
});

gulp.task('watch', function() {
    return gulp.watch(dir + '*.es6', ['build']);
});

gulp.task('build', function(callback) {
    return runSequence(
        'file-concat',
        'babel',
        'watch',
        callback);
});

gulp.task('default', ['build']);

汎用スムーススクロール

$('a[href^="#"]').click(function(e){
	var $this = $(this);
	var id = $this.attr('href').split('#').pop();
	var top = $('#'+id).offset().top;
	$('html,body').stop().animate({scrollTop:top},{duration:400});
	return false;
});

get OS version

function getiOSVersion(){
	if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
		var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
		return parseInt(parseInt(v[1], 10).toString()+parseInt(v[2], 10).toString()+parseInt(v[3] || 0, 10).toString() ,10);
	}
	return 0.0;
}
function getAndroidVersion(){
	if( navigator.userAgent.indexOf("Android") > 0 ) {
		var v = navigator.userAgent.match(/Android [\d\.]+/)[0].split(' ').pop().split('.');
		return parseInt(parseInt(v[0], 10).toString()+parseInt(v[1], 10).toString()+parseInt(v[2] || 0, 10).toString() ,10);
	}
	return 0.0;
}

isArray

var isArray = function(target){
	return getTypeString(target) == 'array';
};
var getTypeString = function(target){
	if(target == null){
		return "null";
	}
	var toString = {}.toString;
	return (typeof target === "object" || typeof target === "function") ? toString.call(target).split(' ').pop().toLowerCase().replace(/\]/g,'') : typeof obj;
};

iOSのorientationchange時の処理順
画面サイズ変更 -> resize -> orientationchange

Androidのorientationchange時の処理順
orientationchange -> 画面サイズ変更 -> resize
又は 画面サイズ変更 -> resize -> orientationchange
※端末(Androidのバージョン?)によってはこの順番の時もある

よってjsで端末回転時の処理をする際は下記のようにする。

デモ

var oEventCount = 0;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	oEventCount++;
	if(oEventCount < 2){
		return;
	}
	oEventCount = 0;

	//do something
});

・resizeイベントだけで済む場合もある。
・iOSの場合、スクロールでステータスバーが出たり引っ込んだりした時にresizeイベントが走る

こっちのほうが良い場合も

var oEventId;
$(window).off('.ori').on('orientationchange.ori resize.ori',function(e){
	clearTimeout(oEventId);
	oEventId = setTimeout(function(){
		//do something
	},300);
});

jquery.validationSupport.js

サンプル

jquery.validate.js
http://jqueryvalidation.org/

サンプル

フォームに入力できる文字を制限する
ime-modeを使わずに
ブラウザによって出来たり出来なかったり。

サンプル