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) | 開発環境・ツール | 更新情報をチェックする

2012年11月01日

markdown入門

Sublime Text 2にmarkdown previewを入れたので、markdownを覚えようとしているメモ書き。

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

次のように入力しておくと自動的に変換してくれるイメージ

#見出し1

<h1>見出し1</h1>


##見出し2

<h2>見出し2</h2>


###見出し3

<h3>見出し3</h3>


####見出し4

<h4>見出し4</h4>


#####見出し5

<h5>見出し5</h5>


######見出し6

<h6>見出し6</h6>


*強調1*

<em>強調1</em>


**強調2**

<strong>強調2</strong>


- 箇条書きその1
- 箇条書きその2
- 箇条書きその3


<ul>
<li>箇条書きその1</li>
<li>箇条書きその2</li>
<li>箇条書きその3</li>
</ul>


1. 番号付きその1
2. 番号付きその2
3. 番号付きその3


<ol>
<li>番号付きその1</li>
<li>番号付きその2</li>
<li>番号付きその3</li>
</ol>


<引用

<blockquote>引用</blockquote>


---

<hr>


| A | B | C |
|a|b|c|


<table>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
posted by ねこまんま at 19:47 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

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) | 開発環境・ツール | 更新情報をチェックする

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) | 開発環境・ツール | 更新情報をチェックする

2012年10月03日

Sublime text 2の操作


  • http://wbornd.net

  • Cmd + Shift + P

  • install package

  • command + / コメントアウト

  • Cmd + T ファイル移動

  • Cmd + R シンボルを移動

  • ctrl + G 行に移動

  • Cmd ↓ 末ページ

  • Cmd ↑ ページトップ

  • Cmd → 行末

  • Cmd ← 行頭

  • フォルダをサイドにドラッグ、SaveProjectでプロジェクトを保存

  • Goto Recent→ Cmd+Shift+R

  • 選択して Cmd dで同一のものの選択、編集

  • cmd shift lで複数行選択 同時編集

  • ⌘+option+ドラッグでブロック編集

  • 行複製cmd shif d

  • cmd+shift+p md でマークダウン(とか他のシンタックスに変更)

  • markdown Preview

  • local history 右クリック

タグ:Sublime Text 2
posted by ねこまんま at 11:13 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年09月07日

Sublime Text2で不過視文字を表示する

Sublime Text2で不過視文字を表示する方法がわかったのでメモ

「Sublime Text2」→「Preference」→「Setting – User」でPreferences.sublime-settingsを開き以下の文言を追加。

"draw_white_space": "all"

これでタブやスペースが表示されるようになります。

参考:[み]Sublime Text2で、スペースとかタブを見えるようにする方法 | みはら.com
タグ:Sublime Text2
posted by ねこまんま at 11:23 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年09月04日

IE8以下のみフェードの効果を切り替える

IE8以下だと透過PNGを利用したfadeIn fadeOutがおかしくなるので以下のように暫定的に対応。

if($.browser.msie && $.browser.version<9){
var ieLte8=true;
}
$.fn.fade = function(type){
if(ieLte8){
if(type=="in"){
return this.show(1);
}else{
return this.hide(1);
}
}else{
if(type=="in"){
return this.fadeIn();
}else{
return this.fadeOut();
}
}
}


IE8以下の場合はすぐにフェードイン・アウトせずすぐに表示を切り替えます。
posted by ねこまんま at 17:59 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年09月01日

Gruntの使い方

GruntはJavaScriptやCSSのMinifyやConcatなどを自動でやってくれるツール

まずは、node.jsのインストール。インストーラーが公開されてるのでさくっとインストールしてしまいましょう。


次はGruntのnpmのインストール、ターミナルで以下のコマンドを実行する

sudo npm install -g grunt


次のコマンドでインストールできているか確認できます。

grunt -version


それではgrunt.jsに処理内容を記述していきましょう

module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: [
'bar.css',
'foo.css'
],
dest: 'all.css'
}
}
});
}


これはbar.cssとfoo.cssを結合したall.cssを作成する設定です。ターミナルでgrunt.jsを設置したフォルダまで移動して以下のコマンドを実行します。

grunt concat


そうするとall.cssが作成されます。

毎回手動でコマンド打つのはめんどくさいの以下でwatchを設定

module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: [
'bar.css',
'foo.css'
],
dest: 'all.css'
}
},
watch: {
files: [
'bar.css',
'foo.css'
],
tasks: 'concat'
}
});
}


ターミナルで以下のコマンドを打っておくとbar.cssとfoo.cssの変更を監視してall.cssを生成するようになります

grunt watch
タグ:Grunt
posted by ねこまんま at 19:35 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年08月30日

Versionsでコンフリクトを起こした際の復旧方法

Macのsubversionクライアント「Versions」でコンフリクトを起こした際の復旧方法

コンフリクト時はhoge.js / hoge.js.mine / hoge.js.r100 / hoge.js.r111といった具合のファイルが生成されるます。

hoge.js.mineはローカルの自身のファイル、r○○は現在のリビジョンと最終アップデート時のリビションファイル。

手動でhoge.jsのマージを行い、hoge.jsを右クリック→「Make as Resolve」を選択するとマージされ、コミットが可能になる。

Versions使わずにコマンドラインからする場合は「svn resolved hoge.js」

もうひとつは revert を利用する方法

hoge.jsを右クリックしてrevert を選択、そうすると未コミットの情報は破棄されて最新のリビジョンになります。(revert to revisionで特定のリビジョンにすることも可能)
posted by ねこまんま at 12:39 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Sublime Text2でgrep 検索

Sublime Text2でgrep 検索する方法

「command」+「shift」+「f」でグレップ検索が可能
タグ:Sublime Text2
posted by ねこまんま at 12:38 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年08月11日

Expiresを使って表示を高速化

Last-modifiedだけだとサーバーにファイルの生存確認が走ってるようでどうも遅いので、表示高速化の為、Expiresをつかって画象や静的ファイルのキャッシュを行ってみた。
.htaccessはhttpd.confに以下のような記述を追加するだけ。

ExpiresActive On
ExpiresByType image/gif "access plus 30 days"
ExpiresByType image/jpeg "access plus 30 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType text/css "access plus 30 days"
ExpiresByType application/x-javascript "access plus 30 days"


最終アクセスから30日間はサーバーにアクセスしないようになった。
posted by ねこまんま at 02:58 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年07月27日

初めてのgit入門

Gitというと黒い画面と難しいイメージですが、Macのフリーソフト「 SourceTree」でGitを利用する方法を解説します。

ひとまずSourceTreeを起動するとこのような画面が表示されます。

SourceTree起動画面

日本語も利用できるようです。これなら安心ですね。

まずは、一人でGitを利用したバージョン管理をしてみましょう。右上のDBのアイコンをクリックします。次に右の「リポジトリを作成」をクリックしましょう。リポジトリのタイプに「Git」を選択し、リポジトリの保存先はひとまず適当なフォルダ(repo)に設定し、「repo」など適当な名前を指定しましょう。

これでtestリポジトリが作成されました。ブックマークに今作成したリポジトリが表示されたと思うので、ダブルクリックして表示しましょう。リポジトリの管理画面が表示されました。

つぎに、作成したリポジトリに適当なファイルを入れてみます。そうするとリポジトリの管理画面の下部にある「作業ツリーのファイル」にリポジトリに入れたファイル名が表示されます。

スクリーンショット 2012-07-27 3.28.22.png

Gitでは先ほど作成したリポジトリはWorking Directoryと呼ばれる作業ディレクトリです。実際の作業はここで行ないます。
posted by ねこまんま at 03:29 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年07月15日

Sublime Text 2

Sublime Text 2の機能まとめ。

⌘+Rで関数検索
⌘+Shift+Pでコマンドパレットを表示
⌘+option+ドラッグでブロック編集

参考

こもりさんと Coda 2 と Sublime Text 2 #st2jp
タグ:Sublime Text 2
posted by ねこまんま at 02:33 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年06月17日

Dropboxの容量を3GB追加する方法

スマートフォン用のDropboxアプリの最新版(over1.5)に変更すると「カメラ UL」使用確認画面が表示されます。有効化し【アップロード】を選択するとカメラロール内の写真がアップロードされだします。

アップロードが500MBを超えるたびに500MB容量が追加され、最大3GBの計6回まで追加されます。

動画もアップロードできるので動画を撮影してアップロードを繰り返すと簡単に追加容量がゲットできます。

参考:Dropboxのアプリから無料で3GB容量追加できます!写真や動画の自動バックアップが可能になりました。
posted by ねこまんま at 14:30 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年04月04日

Photoshopでテキスト情報だけを抜き出す

MacのFinder上で「Command」+「i」を押すとテキスト情報が取り出される。
タグ:Photoshop
posted by ねこまんま at 11:36 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年04月03日

はじめてのCoffeeScript

SassCompassだけでなくCoffeeScriptもたしなんどく。

まずはCodeKitをダウンロードしてインストールする。多分これ最強のプロジェクト管理ツールな気がする。

プロジェクトを追加してJavaScriptファイルを指定すると◯◯.coffeeというファイルを◯◯.jsというファイルに変換してくれる。

hello = ->
console.log("Hello World!")
hello()


と書くと

(function() {
var hello;
hello = function() {
return console.log("Hello World!");
};
hello();
}).call(this);


hello = (x) -> x*x


と書くと

(function() {
var hello;

hello = function(x) {
return x * x;
};

}).call(this);


と変換される。関数は->と書くことが可能。




via:今日から始めるCoffeeScript
タグ:CoffeeScript
posted by ねこまんま at 22:33 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年03月13日

VIMの設定を変更

MacでVIMの設定を行うにはTerminal から

vi ~/.vimrc


と入力すればよい。(ターミナルでの編集はviの基本的な使い方を参照に)

たとえば.vimrc内に次のような命令を記述しておけば次回からファイルを開いた際に行番号が表示されている。

:set number


次のように:colorsheme でカラースキームの設定が可能(参考:利用できる標準のカラースキーム)

:colorsheme koehler



つぎのように入力すると特殊文字を変換できたりする。

:set list
:set listchars=eol:$,tab:>- ,extends:>
タグ:vim
posted by ねこまんま at 01:43 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年03月09日

CSVをJSONやXMLに変換する方法

CSVをJSONやXMLに変換する際に色々と方法があるけど「Mr.Date Converter」を利用すると簡単に変換することができる。

上部にCSVデータを入れると下部に変換後のデータが表示されます。左側のオプションで調整ができるものの項目は多く無いので残りは一括変換なんかで調整したらいい。
タグ:CSV JSON xml
posted by ねこまんま at 02:15 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

2012年02月02日

Fireworksで属性などをコピーする

[command] +[C]でコピーした後に[command] + [option] + [shift]+[v] で貼付けを行うとフィルターなどの属性のみを貼り付ける事ができる。
タグ:fireworks
posted by ねこまんま at 11:39 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする

Fireworksで選択したオブジェクトにキャンバスをフィットさせる

Fireworksで選択したオブジェクトにキャンバスをフィットさせるには[command] + [option] + [F] !
タグ:fireworks
posted by ねこまんま at 11:37 | Comment(0) | TrackBack(0) | 開発環境・ツール | 更新情報をチェックする