2016年11月15日

Webpack2を試す

Webpack2を試す

まず、インストールできるバージョンを確認。

npm info webpack versions


今回はWebpack2の最新の2.1.0-beta.26を試します。

まずはパッケージJSONの作成

npm init -y


Webpack2の最新のインストールは

npm i -D webpack@beta


もしくはバージョンを指定したい場合は、

npm i -D webpack@2.1.0-beta.26


package.jsonと同じ階層に以下のwebpack.config.jsを作成

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: "./app.js",
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


これでsrc/app.jsのファイルをdist/app.bundle.jsに書き出してくれる。

package.jsonのscriptsを以下のように変更し、

  "scripts": {
"webpack": "webpack -p"
},


コンソールから【npm run webpack】とコマンドを打つとdist/app.bundle.jsが書き出される。

ではimport機能を使ってみましょう、「npm i -D moment」とコマンドをうってapp.jsの内容を以下のように変更しておきます。

'use strict';
import moment from 'moment';
var rightNow = moment().format('MMMM Do YYYY, h:mm:ss a');
console.log( rightNow );


これでmomentの機能を利用できるようになります。

以下のようにするとentryの配列の順にファイルを結合して配列の名前のファイル(app.bundle.js)として書き出してくれます。

'use strict';

const webpack = require("webpack");

module.exports = {
context: __dirname + "/src",
entry: {
app: ["./home.js", "./events.js", "./vendor.js"],
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
},
};


以下のようにすると結合したり個別に書き出したり設定できます。






Getting Started with Webpack 2 – Thinking in Code

タグ:WebPACK
posted by ねこまんま at 12:14 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2016年05月25日

axiosを試してみた。

jQueryを利用せずにAjaxをやりたかったのでaxiosを試してみた。続きを読む
posted by ねこまんま at 12:03 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2015年10月02日

Ionic Framewark 入門

Ionic FramewarkはHTML5でモバイルアプリが作成できるnodeのフレームワーク。

利用方法としてはnpmでionic、cordova、ios-simをインストール。

sudo npm install -g ionic cordova ios-sim


ionicコマンドでプロジェクトを開始します

ionic start myproject blank


途中で「Create an ionic.io account to send Push Notifications and use the Ionic View app?」と聞かれるのでひとまずnoで。

作成が終了したらプロジェクト内に移動してionic serveで起動するとブラザでプロジェクトが確認できる。

cd myproject
ionic serve


初期表示画面のHTMLは「/myproject/www/index.html」にあるのでこちらを修正してリロードすれば修正内容が反映されている。

MacではiOSシミュレータで確認ができる。初回のみ「ionic platform add ios」でビルドすれば以下のコマンドでiOSシュミレータで確認出来ます。

ionic platform add ios//(初回のみ)
ionic build ios
ionic emulate ios


では、Ionic Framewarkを利用してTODO アプリを作っていきましょう。(参考:Ionic Book: Table of Contents - Ionic Framework)

index.htmlは初期時は以下のようになっています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">

<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>


サイドメニューを表示する



まずは、body要素の内側を以下のように変更します。

<ion-side-menus>
<ion-side-menu-content></ion-side-menu-content>
<ion-side-menu side="left"></ion-side-menu>
</ion-side-menus>


そうするとドラッグ(スワイプ)でサイドメニューが表示されるようになります。

ヘッダーを表示する



更に以下のように変更します。

<ion-side-menus>

<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>

<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>

</ion-side-menus>


メインコンテツ、サイドメニューそれぞれにヘッダーが表示されます。

リストを表示する



次に<ion-content>内を以下のように変更し、

<ion-content>
<ion-list>
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>


body要素を以下のように変更し、

<body ng-app="starter" ng-controller="TodoCtrl">


app.jsを以下のように変更するとメインコンテツにリストが表示されます。

&angular.module('starter', ['ionic'])

.controller('TodoCtrl', function($scope) {
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
});


TODOを登録できるようにする



次にページ内のモーダルでTODOを登録できるように修正しましょう。index.html上に以下のHTMLをついきます。

<script id="new-task.html" type="text/ng-template">

<div class="modal">

<!-- Modal header bar -->
<ion-header-bar class="bar-secondary">
<h1 class="title">New Task</h1>
<button class="button button-clear button-positive" ng-click="closeNewTask()">Cancel</button>
</ion-header-bar>

<!-- Modal content area -->
<ion-content>

<form ng-submit="createTask(task)">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="What do you need to do?" ng-model="task.title">
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Create Task</button>
</div>
</form>

</ion-content>

</div>

</script>


更に<ion-header-bar>のh1の次に以下の様な<button>を追加します。

<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>


最後にapp.jsのcontroller('TodoCtrl')を以下のように変更しましょう。

angular.module('starter', ['ionic'])

.controller('TodoCtrl', function($scope, $ionicModal) {
// No need for testing data anymore
$scope.tasks = [];

// Create and load the Modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope,
animation: 'slide-in-up'
});

// Called when the form is submitted
$scope.createTask = function(task) {
$scope.tasks.push({
title: task.title
});
$scope.taskModal.hide();
task.title = "";
};

// Open our new task modal
$scope.newTask = function() {
$scope.taskModal.show();
};

// Close the new task modal
$scope.closeNewTask = function() {
$scope.taskModal.hide();
};
});


こうすることで右上にボタンが表示され、そのボタンタップ時にモーダルが表示されモーダル内でTODOが登録できるようになります。

プロジェクトの追加



では、最後にプロジェクトで管理できるようにしましょう。

<ion-side-menu-content>を以下のように変更

<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<button class="button button-icon" ng-click="toggleProjects()">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">{{activeProject.title}}</h1>
<!-- New Task button-->
<button class="button button-icon" ng-click="newTask()">
<i class="icon ion-compose"></i>
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="task in activeProject.tasks">
{{task.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu-content>


<ion-side-menu>を以下のように変更

 <!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
<button class="button button-icon ion-plus" ng-click="newProject()">
</button>
</ion-header-bar>
<ion-content scroll="false">
<ion-list>
<ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}">
{{project.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>


最後にapp.jsを以下のように変更しましょう。

angular.module('starter', ['ionic'])
/**
* The Projects factory handles saving and loading projects
* from local storage, and also lets us save and load the
* last active project index.
*/
.factory('Projects', function() {
return {
all: function() {
var projectString = window.localStorage['projects'];
if(projectString) {
return angular.fromJson(projectString);
}
return [];
},
save: function(projects) {
window.localStorage['projects'] = angular.toJson(projects);
},
newProject: function(projectTitle) {
// Add a new project
return {
title: projectTitle,
tasks: []
};
},
getLastActiveIndex: function() {
return parseInt(window.localStorage['lastActiveProject']) || 0;
},
setLastActiveIndex: function(index) {
window.localStorage['lastActiveProject'] = index;
}
}
})

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {

// A utility function for creating a new project
// with the given projectTitle
var createProject = function(projectTitle) {
var newProject = Projects.newProject(projectTitle);
$scope.projects.push(newProject);
Projects.save($scope.projects);
$scope.selectProject(newProject, $scope.projects.length-1);
}


// Load or initialize projects
$scope.projects = Projects.all();

// Grab the last active, or the first project
$scope.activeProject = $scope.projects[Projects.getLastActiveIndex()];

// Called to create a new project
$scope.newProject = function() {
var projectTitle = prompt('Project name');
if(projectTitle) {
createProject(projectTitle);
}
};

// Called to select the given project
$scope.selectProject = function(project, index) {
$scope.activeProject = project;
Projects.setLastActiveIndex(index);
$ionicSideMenuDelegate.toggleLeft(false);
};

// Create our modal
$ionicModal.fromTemplateUrl('new-task.html', function(modal) {
$scope.taskModal = modal;
}, {
scope: $scope
});

$scope.createTask = function(task) {
if(!$scope.activeProject || !task) {
return;
}
$scope.activeProject.tasks.push({
title: task.title
});
$scope.taskModal.hide();

// Inefficient, but save all the projects
Projects.save($scope.projects);

task.title = "";
};

$scope.newTask = function() {
$scope.taskModal.show();
};

$scope.closeNewTask = function() {
$scope.taskModal.hide();
}

$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};


// Try to create the first project, make sure to defer
// this by using $timeout so everything is initialized
// properly
$timeout(function() {
if($scope.projects.length == 0) {
while(true) {
var projectTitle = prompt('Your first project title:');
if(projectTitle) {
createProject(projectTitle);
break;
}
}
}
});

});


これで、完成。

Angularを触れるのが大前提のフレームワークですね。
posted by ねこまんま at 17:23 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2014年08月28日

RequireJS 入門

RequireJSはJavaScriptをモジュール開発するためのツール。

JavaScriptはグローバル領域が共通なので複数のモジュールを利用しようとするとバッティングするおそれがある。基本的にはグローバル使うな!となるが他のモジュールなどでどの名前空間を使うかなど色々決めなくてはいけない。

var Fuga = function() {};

var NameSpace = {}
NameSpace.Fuga = function() {}


RequireJSを使うとコレを簡単にすることができる。

まず、以下の様なディレクトリ構成だと考える。script/module/fuga.jsとscript/module/hoge.jsが独立したモジュールである

.
├── index.html
└── script
├── lib
│   ├── jquery-1.11.1.min.js
│   └── require.js
├── main.js
└── module
   ├── fuga.js
   └── hoge.js

まず、index.htmlではrequire.jsを読みこみ、data-main属性にメインのスクリプトのURLを記述する。

<script data-main="script/main.js" src="script/lib/require.js"></script>


まず、main.jsに以下のように設定してみよう。module/fuga.jsの読み込みが終了した際にコールバック関数が実行されます。

require([
'module/fuga'
], function(fuga) {
console.log(fuga.doo())
});


fuga.jsには以下のように記述してみる。

define({
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo
}
});


main.jsがfuga.jsを読み込み、defineの定義内容はdefine()で指定ができる。これは以下のように記述することもできる。

define(function(){
var fuga = {
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo
}
}
return fuga;
});


他のモジュールやライブラリを参照して利用したい場合は以下のように記述を行う。

define([
'lib/jquery-1.11.1.min'
], function(){
var fuga = {
bar:"fuga",
foo:"hoge",
doo:function(){
return this.bar+this.foo+$("body").text();
}
}
return fuga;
});
タグ:RequireJS
posted by ねこまんま at 17:54 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2014年03月13日

Sublime Text2で⌘+dの逆

いっつも忘れるけどSublime Text2で⌘+dの逆は⌘+u
タグ:Sublime Text2
posted by ねこまんま at 11:13 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年12月13日

CoffeeScriptの基本

はじめてのCoffeeScriptに続いてCoffeeScriptの文法を読みながらCoffeeScriptの勉強

コメントアウト

コメントアウトは# 複数行コメントは###で包む

#コメント1

###
コメント2
###



これをコンパイルすると以下のようなコードが書きだされる。コメントアウトは出力されないが複数行コメントアウトは出力される。ライセンス以外はコンパイル後にコメント書き出さないイメージかな。

// Generated by CoffeeScript 1.6.3
/*
コメント2
*/


(function() {


}).call(this);



変数

myVariable = "test"


以下のように書きだされる。基本無名空間で包まれてvar なんかも自動で付けてくれる。

// Generated by CoffeeScript 1.6.3
(function() {
var myVariable;

myVariable = "test";

}).call(this);


グローバル変数

スコープをグローバルに出したい場合は以下のようにグローバルオブジェクトのプロパティとして定義する。

exports = this
exports.MyVariable = "foo-bar"


コンパイル後はグローバルに入れていくれる。

// Generated by CoffeeScript 1.6.3
(function() {
var exports;

exports = this;

exports.MyVariable = "foo-bar";

}).call(this);


関数

関数は次のように定義

func = -> "bar"


関数名 = -> 返り値みたいな感じ

// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function() {
return "bar";
};

}).call(this);



関数の引数は次のように定義

times = (a, b) -> a * b


引数aとbが利用できる

// Generated by CoffeeScript 1.6.3
(function() {
var times;

times = function(a, b) {
return a * b;
};

}).call(this);


引数のデフォルト値を指定できる。

times = (a = 1, b = 2) -> a * b


手動で書くとめんどくさいけどCoffeeなら簡単

// Generated by CoffeeScript 1.6.3
(function() {
var times;

times = function(a, b) {
if (a == null) {
a = 1;
}
if (b == null) {
b = 2;
}
return a * b;
};

}).call(this);


可変長引数にも対応

sum = (nums...) -> 
result = 0
nums.forEach (n) -> result += n
result


コンパイル後のスクリプトは以下のような感じ。可変長引数はargumentsオブジェクトではなく配列に変換されているのでforEachといった簡単に利用できる

// Generated by CoffeeScript 1.6.3
(function() {
var sum,
__slice = [].slice;

sum = function() {
var nums, result;
nums = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
result = 0;
nums.forEach(function(n) {
return result += n;
});
return result;
};

}).call(this);


関数の実行は直接実行出来る

func = ->
alert("ok")
false

func()


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function() {
alert("ok");
return false;
};

func();

}).call(this);


引数がある場合は以下のようにも実行出来る

func = (a)->
alert(a)
false

func "hoge"


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function(a) {
alert(a);
return false;
};

func("hoge");

}).call(this);


2個以上の引数がある場合は,カンマ区切りで実行出来る

func = (a,b)->
alert(b)
false

func "hoge","fuga"


// Generated by CoffeeScript 1.6.3
(function() {
var func;

func = function(a, b) {
alert(b);
return false;
};

func("hoge", "fuga");

}).call(this);


スコープの生成

スコープの管理も簡単にできる

this.clickHandler = -> alert "clicked"
element.addEventListener "click", (e) => this.clickHandler(e)


このように指定をするとthisの値を継承して利用できるようにコンパイルされる

// Generated by CoffeeScript 1.6.3
(function() {
var _this = this;

this.clickHandler = function() {
return alert("clicked");
};

element.addEventListener("click", function(e) {
return _this.clickHandler(e);
});

}).call(this);


オブジェクトの生成

オブジェクトの生成も様々な書式が利用できる

object1 = {one: 1, two: 2}

# 中括弧無しで
object2 = one: 1, two: 2

# 改行をカンマの変わりにする
object3 =
one: 1
two: 2

User.create(name: "John Smith")


// Generated by CoffeeScript 1.6.3
(function() {
var object1, object2, object3;

object1 = {
one: 1,
two: 2
};

object2 = {
one: 1,
two: 2
};

object3 = {
one: 1,
two: 2
};

User.create({
name: "John Smith"
});

}).call(this);


配列

配列の生成もいかのような書式が利用できる

array1 = [1, 2, 3]

array2 = [
1
2
3
]

array3 = [1,2,3,]


// Generated by CoffeeScript 1.6.3
(function() {
var array1, array2, array3;

array1 = [1, 2, 3];

array2 = [1, 2, 3];

array3 = [1, 2, 3];

}).call(this);


if文

if文はrubyに近い文法が利用できる

if true == true
"We're ok"

if true != true then "Panic"

# 以下と同じ意味
# (1 > 0) ? "Ok" : "Y2K!"
if 1 > 0 then "Ok" else "Y2K!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true === true) {
"We're ok";
}

if (true !== true) {
"Panic";
}

if (1 > 0) {
"Ok";
} else {
"Y2K!";
}

}).call(this);


式修飾子(後置if文)なんかも利用できる

alert "It's cold!" if heat < 5


// Generated by CoffeeScript 1.6.3
(function() {
if (heat < 5) {
alert("It's cold!");
}

}).call(this);


!ではなくてnot構文を利用することもできる

if not true then "Panic"


// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}

}).call(this);


unless文もサポート地味にうれしい

unless true
"Panic"


// Generated by CoffeeScript 1.6.3
(function() {
if (!true) {
"Panic";
}

}).call(this);


trueと書くと===に変換されます。

if true is 1
"Type coercion fail!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true === 1) {
"Type coercion fail!";
}

}).call(this);


true isntで!==に変換される

if true isnt true
alert "Opposite day!"


// Generated by CoffeeScript 1.6.3
(function() {
if (true !== true) {
alert("Opposite day!");
}

}).call(this);


文字列の挿入

ダブルクオーテーションで包んだら改行しても大丈夫。#{変数名}での挿入もサポート

favourite_color = "Blue. No, yel..."
question = "Bridgekeeper: What... is your favourite color?
Galahad: #{favourite_color}
Bridgekeeper: Wrong!
"


// Generated by CoffeeScript 1.6.3
(function() {
var favourite_color, question;

favourite_color = "Blue. No, yel...";

question = "Bridgekeeper: What... is your favourite color? Galahad: " + favourite_color + " Bridgekeeper: Wrong! ";

}).call(this);


タグ:CoffeeScript
posted by ねこまんま at 20:16 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

Sublime Text2のEmmet用のパネル表示

いつも忘れてしまうけど「control」+「alt」+「enter」でEmmet用のパネル表示ができる。

Best of Sublime Text 3: Features, Plugins, and Settings ハート(トランプ) Scotch
posted by ねこまんま at 17:13 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年10月30日

Alfredの使い方

AlfredはMacで利用できる高機能ランチャーソフト、「フロントエンド開発者向けのAlfred Workflow - アインシュタインの電話番号」という記事が気になったので触ってみました。

まずは、公式サイトからダウンロード。zipを解凍してアプリケーションフォルダにドラッグアンドドロップしてインストール。起動するとデフォルトではoption+spaceでAlfredが起動するようになります。

Spotlightのようにキーワードを入力するとアプリケーションが起動できます。

特定のサイトを検索したい場合は「google Alfred」などを入力するとブラウザが立ち上がりgoogle の検索結果ページが表示されます。

ファイル検索

「'<ファイル名>」などと検索するとMac内のファイルの検索が行なわれます。ファイルを選択してshiftキーを押すとプレビューでファイルの内容が表示されます。

じゃ、記事元のlfred Workflowはどうするかというと、有料版のPowerpack($17)が必要だそうです。Powerpackを購入しているとダウンロードしたalfredworkflowファイルをダブルクリックでインストールしてさまざまな検索がつかえるとか。

有料版の購入は少し保留。もう少し盛り上がってきたら購入してみます。
タグ:Alfred Mac
posted by ねこまんま at 15:13 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年10月29日

静的サイトジェネレータ「Middleman」の使い方

ちょっと気になったので「Middleman
」を軽く試してみました。Ruby on Railsの超シンプル版といった感じでしょうか?静的HTMLを出力するので最終的な成果物がhtmlの場合もそのジェネレータとして利用できる感じです。

インストール



「Middleman」はRubyのツールなので以下のコマンドでインストール。

sudo gem install middleman


使い方



ターミナルでプロジェクトディレクトリに移動して以下のコマンドを実行するとフォルダの中にプロジェクトのスケルトンを作ります

middleman init my_new_project


そうすると以下のようにエラーが

Ruby 1.8 requires the 'ruby18_source_location' gem be added to your Gemfile


Ruby 1.8.7なのでとりあえずGEMファイルだけインストール

sudo gem install ruby18_source_location


もう一度initを実行したら「my_new_project」ディレクトリが作成されましたが以下のようなエラーが出た。

Gem::RemoteFetcher::FetchError: too many connection resets (http://tokyo-m.rubygems.org/gems/rb-fsevent-0.9.3.gem)
An error occurred while installing rb-fsevent (0.9.3), and Bundler cannot
continue.
Make sure that `gem install rb-fsevent -v '0.9.3'` succeeds before bundling.


言われたとおり以下のコマンドでgemをインストールする。

sudo gem install rb-fsevent -v '0.9.3'


あと、とりあえずプロジェクトディレクトリに移動してミスったやつもインストールしておく。

cd my_new_project
bundle install


つぎに、ローカルサーバーを立ち上げてみましょ。

cd my_project
bundle exec middleman server


http://localhost:4567/にアクセスするとサイトが表示される

つぎにHTMLをいじっていみる

sourceのindex.html.erbをひらいて以下のように変更

---
title: hellow world
---

<p>hellow world


ブラウザをリロードするとちゃんと変更されてる。

layouts/layout.erbでベーステンプレートを修正してみる。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><%= current_page.data.title %></title>
<%= stylesheet_link_tag "all" %>
<%= javascript_include_tag "all" %>
</head>
<body class="<%= page_classes %>">
<%= yield %>
</body>
</html>


こちらもブラウザをリロードするとちゃんと変更されてる。

Sass/Compassはデフォルトで利用できるのstylesheets/all.cssをall.scssに変更するだけでOK

@charset "utf-8";
body{
background:red;
p{
color:white
}
}


最後に以下のコマンドで静的なファイルを生成することができます。

middleman build
posted by ねこまんま at 14:21 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年04月24日

Sublime Text 2にインストールしたパッケージを削除

Sublime Text 2にインストールしたパッケージを削除する方法。

Ctrl+Shift+P

「Package Control: Remove Package」と入力して

任意のプラグインを選択してEnter

アンインストール完了

参考:Sublime Text 2にインストールしたプラグイン(パッケージ)をアンインストールする方法 | 株式会社WEB企画スタッフブログ
タグ:Sublime Text 2
posted by ねこまんま at 21:25 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

Sublime Text 2のショートカット


基本

Cmd + Shift + Pパレットを表示
Cmd + Shift + d行複製


コーディング補助

Cmd + /コメントアウト
Ctrl + Shift + w選択箇所を別の要素で包む


移動

Cmd + ↓末ページ
Cmd + ↑ページトップ
Cmd + → 行末
Cmd + ← 行頭


カーソル系

Cmd+d 選択中のテキストと同じ次のテキストも選択
Cmd+uCmd+dの取り消し
Cmd+Ctrl+g選択中のテキストと同じ全てのテキストにカーソルを出す
Cmd+Shift+l 選択中の複数行にカーソルを出す
Cmd+option+クリック クリックした箇所にカーソルを出す
Cmd+option+ドラッグ ドラッグした箇所にカーソルを出す
Ctrl+shift+↑上の行にもカーソルを出す
ctrl+shift+↓下の行にもカーソルを出す


機能系

option + F12ブラウザプレビュー
タグ:Sublime Text 2
posted by ねこまんま at 12:43 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年04月05日

VirtualBoxを利用して無料のIE検証環境の作成

modan.IEでMac向けのWindowsのヴァーチャルイメージが公開されていたので検証環境を作ってみました。

普段はVMware Fusionを利用しているのですが、modan.IEで配布しているヴァーチャルイメージはVMware Fusion 5に対応していて、私はVMware Fusion 4を利用しているので利用できません。VMware Fusion 5にアップデートしてもいいのですが、4,900円をケチって今回はVirtualBoxで検証環境を作成しました。

VirtualBoxは配布ページからダウンロードインストールします。

WindowsのOSイメージはmodan.IEのダウンロードページからダウンロードします。

たとえば、IE6 - XPの環境は「IE6_WinXP.ova.zip」をダウンロードして、回答すると「IE6 - WinXP-disk1.vmdk」と「IE6 - WinXP.ovf」の2つのファイルが解凍できます。

IE6 - WinXP.ovfをダブルクリックするとVirtualBoxの管理画面が立ちがるので「インポート」をクリックするとVirtualBoxにWindows XPがインストールできます。

modan.IEのWindows XPには日本語フォントが入っていませんので「MS Pゴシック」などをどこかから持ってきてインストールしておきましょう。
posted by ねこまんま at 15:30 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年04月02日

FlashからCreateJSに変換した際にstop()が反映されない

Flash Professional Toolkit for CreateJSを利用しFlashからCreateJSに変換した際にactionscriptに記述したstop()が反映されずループされる。

this.initialize(mode,startPosition,loop,{re:14},true);


の記述を

this.initialize(mode,startPosition,false,{re:14},true);


に変更するとちゃんとストップします。

インスタンス生成時に次のように指定してもOK

this.instance_17 = new lib.hoge(,,false);
posted by ねこまんま at 14:09 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

AppKitBoxでAndroidを楽々検証

Android端末はOSによる差異に加え機種ごとの差異が存在し、検証端末を揃えるのが困難です。そんな時に利用できるのが「AppKitBox」。

クラウドにより、インターネット経由で端末を時間借りできるサービスです。945円(税込)で6チケット購入で気3チケットで30分利用することができます。登録すると15チケットが無料で付いてくるのでとりあえず試してみるのがよいと思う。

利用方法は以下の流れです。

1. 利用するには「Remote TestKit for Android 」をインストールする必要があります。Mac/Winのソフトがあるので、利用したいOSのRemote TestKitをダウンロードしてインストールして下さい。

2. インストールしたRemote TestKitを立ち上げるとログインが要求されます。初回は下の「ユーザ登録がまだの場合」から「新規ユーザ登録」を選択してユーザ登録を行ってください。登録したメールアドレスに 確認コードが送られてくるので認証をおこなってください。

3.Remote TestKit for Androidを立ち上げると以下のような管理画面が立ち上がります。ここで利用した端末を選択し、レンタルを押してください。

Remote TestKit for Androidの管理画面

4.以下のように端末画面が立ち上がりますので検証開始。

Remote TestKit for Androidの端末画面

かなり便利ですので一度試してみてください。
posted by ねこまんま at 12:02 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年03月28日

ターミナルでディレクトリ移動

ターミナルでディレクトリ移動する際にcdコマンドで移動してたんだけど、以下の方法で移動できることを教えてもらいました。

ターミナルでcd と入力して、移動したいディレクトリをファインダーでコピー、ターミナルに戻ってペーストするとそのディレクトリまでのパスが出力される。

ターミナルに、移動したいディレクトリをファインダーでドラックしてもOK

XtraFinderを利用していると、設定のFinderメニューに追加の新規ターミナルで開くから、右クリックメニューに「新規ターミナルで開く」が追加されます。
タグ:ターミナル
posted by ねこまんま at 17:22 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2013年02月01日

Sublime Text 2でブラウザプレビュー

Sublime Text 2でブラウザプレビューをできないかと調べたところ以下のショートカットでできるっぽい

option + F12
タグ:Sublime Text 2
posted by ねこまんま at 12:04 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2012年11月23日

Sublime Text 2でファイルをタブで開く方法

Sublime Text 2で新規ファイルを開くと新規ウィンドウが立ち上がってうっとうしいなと思ってたら、タブで開く方法があったらしい。

Prefarences→Setting-Userから設定用のJSONをひらいて以下の内容を追加します。

{
"open_files_in_new_window": false
}


で、再起動すると新規ファイルが新規ウィンドウでなく新規タブで開くようになります。

参考:クスールブログ » Sublime Textでファイルをタブで開く方法
タグ:Sublime Text 2
posted by ねこまんま at 10:36 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2012年11月05日

CodeKitでHaml

Hamlがイケテルらしいので触ってみた。CodeKitにコンパイラ入っているので環境構築は楽。

hamlディレクトリを作成し、中にhoge.hamlというファイルを作成してここにHamlの内容を書いていく。このままではhamlディレクトリにコンパイルしたhtmlファイルが出力されるのでCodeKitのプロジェクトの設定からオOutputPathでHamlを選んで、Hamlが../に書き出されるようにしておこう。

!!!
%html
%head
%title Hello, Haml!
%body
#header
%h1 Hello, Haml!
#content
%p
I use Ham
%span.version= Haml::VERSION


などとhamlファイルに記述するとHTMLが書き出されます。(ここら辺で手になじまないと仕様をやめた)
タグ:HAML CodeKit
posted by ねこまんま at 18:50 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2012年10月31日

はじめてのZen-Coding入門

Sublime Text2にZen-Codingをインストールしたので、Zen-Coding入門を色々と使ってみました。

次のように入力してtabキーを押すと色々なHTMLが自動生成されます。

html:5 [tab]

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

</body>
</html>


html:xt [tab]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>

</body>
</html>


link:css [tab]

<link rel="stylesheet" type="text/css" href="style.css" media="all" />


div [tab]

<div></div>


div>p [tab]

<div>
<p></p>
</div>


div>div+p [tab]

<div>
<div></div>
<p></p>
</div>


ul>li*3 [tab]

<ul>
<li></li>
<li></li>
<li></li>
</ul>


dl>(dt+dd)*3 [tab]

<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>


a{ほげ} [tab]

<a href="">ほげ</a>



div#main [tab]

<div id="main"></div>


div.hoge [tab]

<div class="hoge"></div>


div#main.hoge.foo [tab]

<div id="main" class="hoge foo"></div>


ul>li.line$*5 [tab]

<ul>
<li class="line1"></li>
<li class="line2"></li>
<li class="line3"></li>
<li class="line4"></li>
<li class="line5"></li>
</ul>


a[href=#hoge] [tab]

<a href="#hoge"></a>


img[alt=hoge][src=foo.jpg] [tab]

<img src="foo.jpg" alt="hoge">


#main>h1.hoge|c [tab]

<!-- #main -->
<div id="main">
<!-- .hoge -->
<h1 class="hoge"></h1>
<!-- /.hoge -->
</div>
<!-- /#main -->


#main>h1.hoge|e [tab]

&lt;div id="main"&gt;
&lt;h1 class="hoge"&gt;&lt;/h1&gt;
&lt;/div&gt;


#main>h1.hoge|haml [tab]

#main
%h1.hoge
タグ:Zen-coding
posted by ねこまんま at 02:07 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする

2012年10月30日

sublime text 2でZen-Codingを使う

sublime text 2で zen-codingを使う方法。

Sublime Package Controlをインストールしている前提で、Cmd+Shift+Pでコマンドパレットを立ち上げて、「install」などとうって「Package Control:Install Package」を実行します。Zen-Codingをインストールします。

これでOK。

Cmd+Nで新規ファイルを開いて、Cmd+Shift+Pでコマンドパレットを立ち上げ「html」と入力すると「Set Syntax :HTML」が選択できるのでシンタックスのモードを「HTML」にします。
エディタ上に「html:5」と入力して、TABのキーを押すと、HTML5的なひな形がファイルに挿入されればOKです。

参考:Sublime Text 2 で Zen Coding - メモログ
posted by ねこまんま at 12:26 | Comment(0) | TrackBack(0) | Tool | 更新情報をチェックする