2017-07-10

gulpfile　設定例

var gulp = require('gulp');
var browserSync = require('browser-sync');
var compass = require('gulp-compass');
var reload = browserSync.reload;
// Start the server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./",
index: "test-index.html"
}
});
});
// compass
gulp.task('compass', function(){
gulp.src('sass/**/*.scss').pipe(compass({
config_file: 'config.rb',
comments: true,
css: '_css/',
sass: 'sass/'
}))
.pipe(browserSync.reload({stream:true}));
});
// watch
gulp.task('watch', function(){
gulp.watch('sass/**/*.scss', function(event) {
gulp.run('compass');
});
});
gulp.task('default', ['browser-sync', 'compass'], function () {
gulp.watch("sass/*.scss", ['compass']);
gulp.watch("*.css").on("change", browserSync.reload);
gulp.watch("*.html").on("change", browserSync.reload);
});
/*
gulp.task('default', function(){
gulp.run('watch');
});

/

2017-06-20

reactjs 備忘録

$ /projects/react-test/
$ react -v
bash: react: command not found
$ /projects/react-test/
$ npm install react --save
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.
$ /projects/react-test/
$ npm install react --save-dev
npm WARN ts@1.0.0 No description
npm WARN ts@1.0.0 No repository field.
$ /projects/react-test/
$ npm i -g react-tools
npm WARN deprecated react-tools@0.13.3: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
C:\Users\AppData\Roaming\npm\jsx -> C:\Users\AppData\Roaming\npm\node_modules\react-tools\bin\jsx
C:\Users\AppData\Roaming\npm
`-- react-tools@0.13.3
`-- commoner@0.10.8
+-- detective@4.5.0
| `-- acorn@4.0.13
+-- glob@5.0.15
| `-- minimatch@3.0.4
| `-- brace-expansion@1.1.8
| `-- balanced-match@1.0.0
+-- iconv-lite@0.4.18
+-- q@1.5.0
`-- recast@0.11.23
`-- ast-types@0.9.6

$ /projects/react-test/
$ jsx --harmony --watch src/ build/
["hello"]
hello.js changed; rebuilding...
built Module("hello")
["hello"]

2014-02-19

VagrantとVirtualBoxでローカル開発環境を構築

VirtualBox
https://www.virtualbox.org/wiki/Downloads

Vagrant
http://downloads.vagrantup.com/

VirtualBoxは既にインストールされていたバージョン4.3.6を使用。
Vgrantは現時点での最新版1.3.5をダウンロード。

その他基本的なことは下記が詳しい（丸投げ）
http://www.webopixel.net/develop/835.html

共有フォルダ作るには下記コマンドを実行。
/var/www/htmlへシンボリックリンクすればよい。

sudo rm -rf /var/www/html
sudo ln -fs /vagrant /var/www/html

2013-09-15

Windows環境でgccコンパイラを使用する（メモ）

c言語

忘れそうなのでメモ。

コンパイルするには下記コマンドを実行。

$ cd /work_directory
$ gcc -o hello hello.c

意味は、hello.cというファイルをhelloという実行ファイルに
コンパイルして出力するということらしい。

gccのオプションについてはここが参考になった。
http://kazmax.zpp.jp/cmd/g/gcc.1.html

2013-09-15

HTML・CSS コーティング規約参考サイト

【参考】
google（英語）
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

apple（英語）
http://www.apple.com/html5/

google（和訳）
http://re-dzine.net/2012/05/google-htmlcss-style-guide/

CSSガイドライン
http://2xup.org/log/2006/07/11-1956
http://www.i-seeds.jp/web/cssguideline.html

HTMLガイドライン
http://www.okapiproject.com/web/html_codeconventions/index.html

Class名・ID名の付け方
http://css-happylife.com/archives/2007/0115_1345.php
http://matome.naver.jp/odai/2133510305809813901

HTML5
http://met.hanatoweb.jp/guideline/html5/

2013-07-13

jQueryによるスクロール距離の取得方法

JavaScript jQuery

jQueryによるスクロール距離の取得方法。

パララックスサイトの作成、ページトップリンクを表示制御、グローバルナビの表示制御など使いドコロがいろいろあると思うのでメモ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>スクロール位置の取得</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<script>
$(function() {
    $(window).scroll(function() {
        var dy = $(this).scrollTop();
        if(dy > 100){
            //処理
        }else{
           //処理
        }
    });
});
</script>
</body>
</html>

参考サイト：ドットインストール
#03 スクロール距離を取得しよう
http://dotinstall.com/lessons/parallax_html/10903

2013-06-17

JavaScriptでグローバル変数の定義を最小限にする

JavaScript

グローバル変数にvar cnf = {}と定義したあと、
それをアプリケーションのコンテナとして利用することで、
グローバル変数がぶつかる危険性を最小限にする。

下記はブラウザに「Hello World」と出力するスクリプト。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello world</title>

<script>
window.onload = function() {

/**
 *メンテナンス性を良くするため
 *グローバル変数は１つだけ定義する。
 */
var cnf = {}; //newで生成しても良い。
cnf.elem    = {
	para    : document.createElement("p"),
	testDiv : document.getElementById("test"),
	text    : document.createTextNode("Hello World")
};

	cnf.elem.testDiv.appendChild(cnf.elem.para);
	cnf.elem.para.appendChild(cnf.elem.text);
}
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

やっとユーザ定義オブジェクトについて分かってきた（かもしれない）。
参考：JavaScript The GoodParts

weblog

WEB全般の忘備録（HTML・CSS・JavaScript・PHPなど）