Gulpの知識 -- Web開発のタスクの自動化

  • 画像の圧縮・SassやLESSのコンパイル・簡易ローカルサーバの立ち上げ・FTPアップロードなどなど、Web制作の面倒な作業を自動化してくれる


#数字はdotinstallに対応

  • フロントエンドのタスクの自動化
  • Gulp.jsを使うにはNode.jsが必要 #02
//install epel nodejs npm gulp
sudo yum -y install epel-release
sudo yum -y install nodejs npm

// グローバルのオプション付きでglupをインストール
sudo npm install gulp -g
// フォルダの中だけにインストールする
npm install --save-dev gulp
  • ファイル内の移動、圧縮などを自動化できる!
  • 命令は、"gulpfile.js"に記述する #05
  • 高速に並列に処理することができる #06
  • 処理の順番を指定することができる #06
  • イメージの最適化に関して gulp-imagemin #07
  • タスクの名前を最初のパラメータに記述する #07
  • 圧縮の成果をconsoleを通して確認することができる #07
  • javascriptに変換する、結合方法、圧縮方法#08
  • プラグインのインストールの仕方 #08
  • jsに関するプラグイン gulp-coffee 、gulp-concat、gulp-uglify #08
  • gulp.watch() 変更があれば、自動でタスクを実行するということができる #09
  • gulp-plumber watch()だと間違いがあると止まってしまう。それを解消するプラグインがある。エラーが出そうなところに記述する。エラーが表示されるとともに実行もされる #10
  • gulp-header ヘッダープラグインに関して、メッセージを記述する。 #11 
  • gulp-webserver プラグイン、変換してものをすぐにブラウザに反映するということをするもの #12


用語
Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツール


参考

WebStormの知識 -- Web開発のタスクの自動化

  • JetBrains社が開発しているWeb開発向けのIDE
  • 初期設定をしなくても使うことができる
  • 新しいツールのサポートが早い
  • 各種フレームワークが選択できる
  • Webフロントエンド開発に必要なものは大体揃っている(HTML(5)+CSS+JavaScript)
  • Javascriptのサポートが手厚である

用語
IDE:integrated development environment

参考
WebStorm / PhpStorm 基礎 シーブレイン社内勉強会
最強のJavaScript IDE 「WebStorm」を使ってみた | Web Scratch



- Bower

sudo npm install -g bower

フロントエンド用パッケージマネージャー
必要なライブラリを簡単にインストールすることができる
BowerをインストールするにはNode.jsのインストールが必要

参考

- Yeoman

sudo npm install -g yo

参考

  • gulp-angular

[create new project]-[Yeoman]-[install generator]でインストールする。

【C#】set{ }get{ } 使用例

使用例1

public GameDifficulty Difficulty {
	get {
		return _difficulty;
	}
	//difficultyを選択する
	//セットするときにイベントを呼び出す
	set {
		_difficulty = value;
		EventsManager.OnGameChangeDifficulty(_difficulty);
		ChangeGravityBasedOnDiffculty();
	}
}


使用例2

public GravityState LevelGravity {
	get {
		return _gravityState;
	}
	set {
		_gravityState = value;
		switch (_gravityState) {
		case GravityState.Down :
			Physics.gravity =  Vector3.down * DefaultGravity;
			break;
		case GravityState.Up :
			Physics.gravity = Vector3.up * DefaultGravity;
			break;
		}
		EventsManager.OnGameChangeGravity(_gravityState);
	}
}

【Unity エラー】Android Manifest SDK version番号揃える

すべてのAndroidManifestのandroid:minSdkVersionとandroid:targetSdkVersionの番号を同じにする。

<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" />

error

Temp/StagingArea/android-libraries/android-notifications-release/AndroidManifest.xml:3] Main manifest has <uses-sdk android:minSdkVersion='15'> but library uses minSdkVersion='16

minSdkVersion='16に設定する。

【C#】デリゲート(delegate) 使用例 第三弾

1−0

void RewardTTP(string Id)
{
	**.Instance.GiveRewards (Id, delegate(int errorCode) {
	ClaimItem (errorCode);
	});
}
void ClaimItem (int errorCode) 
{
	if (errorCode == 0) 
	{
		EventManager.OnUpdateNotif (true, "");
		**.Achievement.ShowAchievementResultView ();
	}
	else if (errorCode == 204) {		//Reward Redeemed
		EventManager.OnUpdateNotif (false, "You Already Claimed This Item");
	}
	else if (errorCode == -1) {			//Time Out
		EventManager.OnUpdateNotif (false, "Check Your Connection");
	}
}

public void GiveRewards(string Id, Action<int> callback){
	callback(0);
}

int型のアクションを呼ぶ。callback(0);の形で返す。


1−1

void RewardTTP(string Id)
{
	**.Instance.GiveRewards (Id, delegate(int errorCode) {
	if (errorCode == 0) 
	{
		EventManager.OnUpdateNotif (true, "");
		**.Achievement.ShowAchievementResultView ();
	}
	else if (errorCode == 204) {		//Reward Redeemed
		EventManager.OnUpdateNotif (false, "You Already Claimed This Item");
	}
	else if (errorCode == -1) {			//Time Out
		EventManager.OnUpdateNotif (false, "Check Your Connection");
	}
	});
}

【Unity ライブラリ】"Easy Save 2" : List型のデータを保存

配列型ではセーブできなかったのArray型でES2に保存。
(保存したいデータに、項目が複数ある場合は新しくクラスを作って、IDをつけて保存するのも一つの手段。)

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class Test_List : MonoBehaviour {

	public List<bool> _isFinishStep;

	void Awake()
	{
		LoadData();
	}
	private void LoadData()
	{
		if(ES2.Exists("isFinishTutorial"))
		{
			_isFinishStep= ES2.LoadList<bool>("isFinishTutorial");
			Debug.Log("es Created");
		}
		else
		{
			_isFinishStep =  new List<bool> ();
			for(int i = 0; i < 11 ; i ++ )
				_isFinishStep.Add(false);
			SaveData();
		}

	}
	private void SaveData()
	{
		ES2.Save (_isFinishStep, "isFinishTutorial");

	}
	private void Update()
	{
		if(Input.GetKeyDown(KeyCode.Space)){
			_isFinishStep = ES2.LoadList<bool>("isFinishTutorial");
			for(int i =0; i < _isFinishStep.Count ;i++){
				Debug.Log("i " + i + " = "+  _isFinishStep[i]);

			}
		}
	}
	void FinishStep(int id)
	{
		_isFinishStep[id] = true;
		SaveData();
	}
}

kido0617.github.io

docs.moodkie.com