カテゴリー別アーカイブ: WEB制作情報

WEBサービス, WEB制作情報

GitにPushすれば自動でデプロイできる「dploy」を試してみました

2015年6月8日 co

テスト環境や本番環境へのデプロイ（ファイルのアップロード）をGitのプッシュに連動できる「dploy」というツールを使ってみました。

やりたい事

環境は2つ、テスト(1)と本番(2)
Git（GitHub）でソースコード管理
開発段階はdevelopブランチにて作業、本番公開時にmasterにマージ（featureなどは適宜）
developブランチにプッシュすると(1)に自動デプロイ
(2)はmasterブランチにプッシュ後ブラウザ上で操作してデプロイ

使ったツールがこちら

dploy.io – Continuous deployment for everyone http://dploy.io/

無料で作成できるレポジトリはひとつ、以降10レポジトリ毎に有料になってきます。
10個で月$15は若干高いですね。

以下テストを行った手順をまとめてみます。

まずはアカウント登録

サブドメイン名やメールアドレスなどを登録します。

テスト用のGitレポジトリを作成

テスト環境用にdevelopブランチを作成してリモートにプッシュしておきます。

レポジトリ、サーバーの設定

登録後、自分のアカウントにログインすると連携させるレポジトリとデプロイ先のサーバーの設定に移ります。

今回はGitHubでテストしました。テスト用のリモートレポジトリを選択し名前を付けます。

続いて環境設定。名前やラベルカラー、デプロイの自動/手動の設定、他Webフックなどのオプションを設定します。
ここでブランチをdevelopに設定し、developにプッシュされるとデプロイするという設定にします。

最後にサーバー設定。

完了するとこんな画面になります。

同様に本番用の設定も行います。ここでのブランチはmasterを設定。一旦自動でデプロイにしておきます。

これで準備完了。

レポジトリにプッシュしてみる

developをプッシュ

dployを見てみるとコミットした内容が表示されています。

プッシュ（デプロイ）する毎に履歴が残るような形ですね。

もちろんテスト環境にもファイルはアップされています。

最新のレビジョンが.revisionというファイルで確認できるようになっていますね。

masterもプッシュしてみる

masterにコミットをマージしてプッシュ。このへんは手動。

dployにも反映されています。この場合は3コミット分まとめてデプロイしてるのでレビジョンとしてはひとつ。

masterを手動デプロイに変更

dployの設定画面に戻り、Development Modeを”Manual”に変更します。

すると次のコミットをmasterにプッシュしてもデプロイされなくなります。
ここからは手動でのデプロイになるので、画面上にある”Deploy”ボタンを押してデプロイします。

こちらが手動でのデプロイ画面。deployment noteという個別のコメントを記載できます。

[Start Deployment]を押すと無事にデプロイできました。

まとめ

dployは設定が非常に簡単で、画面もわかりやすいので特に迷う事なく使えました。
1レポジトリ無料のフリーミアムなので気軽に使ってみるのも良いですね。

参考サイト

WEB制作情報

BootstrapベースのシンプルなWordPressのテーマを作成

2015年5月13日 co

サイト設計段階で使用するモックアップの制作にBootstrapを利用する事は多々あるかと思います。

Jadeなどのテンプレートエンジン+スニペットを駆使すれば全て静的なHTMLでも割と簡単に作成できますが、
ページの概念や検索機能、記事管理、メニュー管理の面で、いきなりWordpressに乗っけたものがあっても良いかと思い、シンプルなテーマファイルを作成してみました。

https://github.com/kotaro-co/bootstrap-wp-template

レイアウトとして4パターンを制作しました。以下は確認用の静的なページ

▲1.シングルカラムのページ

▲2.マルチカラムのページ

▲3.カード型レイアウトのページ

▲4.Bootstrapの全パーツをまとめたページ

フルスクリーンのページやもっとグリッド感を強めたレイアウトまであっても良かったかもしれませんが、とりあえずレイアウトは1.〜3.である程度賄えると思います。
また、4.のパーツ一覧ページはオリジナルでCSSを作った際にパーツを1ページでまとめて確認するためのものです。※こちらのサイトから拝借しました。

WordPressのテーマとして設定した場合は、[Page-Single],[Page-Multi],[Page-Masonry],[Page-AllParts]の固定ページ用テンプレートが同じものになります。
この固定ページ用テンプレートは特に記事の連動はかけていないので、必要に応じて設定するという想定です。

WordPressでBootstrapのパーツを組み立てようと思った時に、ショートコード系のプラグインを入れて記事本文エリアで作成する事もできなくはなかったのですが、結局タグの入れ子が多くなってHTMLを組むのと大差が無い事と、細かいクラス指定ができないなどプラグイン上の制限があるため、あくまでパーツの組み立ては使い慣れたコードエディタで直打ちするのがベストだと判断しました。
ですのでWordpressもローカルにインストールしてローカルでテンプレートを組んで行くイメージですね。

WEBサービス, WEB制作情報

Amebaの無料Webサイト作成サービス「Ameba Ownd」を使ってみました

2015年5月9日 co

アメブロを運営するAmebaが昨年リリースした無料Webサイト作成サービス「Ameba Ownd」を使ってみましたので簡単にレビューしてみます。

作ったページ

Ameba Owndの詳細
“わずか3ステップで誰でもカンタンにウェブサイトを作成することができます。”という事で、ページ自体は数クリックで立ち上がります。
掲載する写真を選んだり、簡単にプロフィールを作って1,2時間で作成し終わります。

良い点

レスポンシブに対応した綺麗なテンプレート
色やフォントなど細かすぎないデザイン設定
SNSとの簡単な連携

イマイチ、わかりにくい点

項目のラベリングや管理画面の構成（慣れればOK）
ページのレイアウトでカラム分けできない（スマホメインならOK）
文字のスタイル（太字やリンク、アライン）を設定するWYSIWYGのメニューの出し方がわからない
画像のアップロード時にサイズの大きい画像で上下反転する
文字の変換時にWYSIWYGが出た場合文字が消える時がある（Safariだけ？）
投稿を新規追加する際に右上のアイコンを押すという点に気づきづらい、「投稿を管理」のメニューに並べてあった良い

簡単な操作でサイトを作れるサービスですが、ちょっと細かく設定したいという人にはやや物足りないかもしれません。あと上記変換文字が消えるなど、編集画面の使いにくさは慣れるまで気になる点です。

あと、アメブロのアカウントを使いますが、投稿も別になるので本体のブログと特に連携は無くアメブロとは別物という扱いです。

WEB制作情報

【随時更新】Bootstrapに役立つ便利なリソースまとめ

2015年1月4日 co

WEB制作情報

bxSlider実装まとめ

2015年1月4日 co

jQueryスライドショーライブラリ「bxSlider」の実装方法や細かな注意点、カスタマイズの方法などをまとめます。

bxSliderのウリ

軽量、シンプルで使いやすい
画像だけで無く、HTML要素もまとめてスライド可能
タッチデバイスのスワイプによる切り替えに対応
レスポンシブ（幅100%に拡縮）対応
IE8より動作
各種オプションが充実、カスタマイズしやすい

ダウンロード、設置

本家サイトにアクセスし”Download”ボタンからデータをダウンロード。
jQueryも必要になるので、HTMLには下記のように読み込みを記述。

<script src="js/jquery.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>

1 2	<script src="js/jquery.js"></script> <script src="js/bxslider/jquery.bxslider.min.js"></script>

必要なファイル（ディレクトリ js/bxslider は任意）：

js/bxslider/images/bx_loader.gif
js/bxslider/images/controls.png
js/bxslider/jquery.bxslider.css
js/bxslider/jquery.bxslider.js　または　jquery.bxslider.min.js

js/bxslider/images/bx_loader.gif

js/bxslider/images/controls.png

js/bxslider/jquery.bxslider.css

js/bxslider/jquery.bxslider.js　または　jquery.bxslider.min.js

HTMLの指定

<ul class="slider">
  <li><img src="img01.jpg"></li>
  <li><img src="img02.jpg"></li>
  <li><img src="img03.jpg"></li>
  <li><img src="img04.jpg"></li>
  <li><img src="img05.jpg"></li>
</ul>

</ul>

関数の呼び出し

<script>
$(function(){
  $('.slider').bxSlider();
});
</script>

$(function(){

$('.slider').bxSlider();

});

</script>

この場合’slider’のクラスを付けた要素の子要素がスライドするアイテムとなります。
※bxSlider-setting.js等と別ファイルにまとめておくと良いです。

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

呼び出した関数をオブジェクトに格納し、startAutoコマンドを時間差で実行させる、という仕組みです。

var timeout_id;
var slider;
$(function(){
  slider = $('.slider').bxSlider({
    onSliderLoad: function () {
        timeout_id = setTimeout(function(){} , 1000);
    },
    onSlideAfter: function () {
        timeout_id = setTimeout(TimeoutFunc , 1000);
    },
  });
  function TimeoutFunc(){
      slider.startAuto();
  };
});

var timeout_id;

var slider;

$(function(){

slider = $('.slider').bxSlider({

onSliderLoad: function () {

timeout_id = setTimeout(function(){} , 1000);

onSlideAfter: function () {

timeout_id = setTimeout(TimeoutFunc , 1000);

});

function TimeoutFunc(){

slider.startAuto();

};

});

1ページ内に複数設置する場合

var timeout_id1;
var slider1;
$(function(){
  slider1 = $('.slider1').bxSlider({
    onSliderLoad: function () {
        timeout_id1 = setTimeout(function(){} , 1000);
    },
    onSlideAfter: function () {
        timeout_id1 = setTimeout(TimeoutFunc1 , 1000);
    },
  });
  function TimeoutFunc1(){
      slider1.startAuto();
  };
});
var timeout_id2;
var slider2;
$(function(){
  slider2 = $('.slider2').bxSlider({
    onSliderLoad: function () {
        timeout_id2 = setTimeout(function(){} , 000);
    },
    onSlideAfter: function () {
        timeout_id2 = setTimeout(TimeoutFunc2 , 000);
    },
  });
  function TimeoutFunc2(){
      slider2.startAuto();
  };
});

var timeout_id1;

var slider1;

$(function(){

slider1 = $('.slider1').bxSlider({

onSliderLoad: function () {

timeout_id1 = setTimeout(function(){} , 1000);

onSlideAfter: function () {

timeout_id1 = setTimeout(TimeoutFunc1 , 1000);

});

function TimeoutFunc1(){

slider1.startAuto();

};

});

var timeout_id2;

var slider2;

$(function(){

slider2 = $('.slider2').bxSlider({

onSliderLoad: function () {

timeout_id2 = setTimeout(function(){} , 000);

onSlideAfter: function () {

timeout_id2 = setTimeout(TimeoutFunc2 , 000);

});

function TimeoutFunc2(){

slider2.startAuto();

};

});

縦スライド版（vertical）設定時にうまく動かない時の対処

jquery.bxslider.js内の下記の箇所をfalseにします。

      if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;
↓
      if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = false;

if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = true;

↓

if (slider.settings.mode == 'vertical') slider.settings.adaptiveHeight = false;

IE9以降で動かない時の確認事項

jQueryのバージョンは1.8.2以上になっているかを確認します。 http://wind-mill.co.jp/iwashiblog/2014/05/bxslider-ie-notwork/

WEB制作情報

Sublime Textで一つのキーバインドに複数のコマンドを登録する方法

2015年1月4日 co

Sublime Textはデフォルトで一つのキーバインドに一つしかコマンドを登録できません。
複数登録できるようにするには別途プラグインを追加する必要がありますので、その方法と、キーバインドの設定をまとめます。

プラグインの設定

[Tools]>[New Plugin…]と選択
untitledのファイルが開かれるので、下記のコードをコピペ。
ファイルを未保存の状態で開いておく

import sublime, sublime_plugin
 
# Takes an array of commands (same as those you'd provide to a key binding) with
# an optional context (defaults to view commands) & runs each command in order.
# Valid contexts are 'text', 'window', and 'app' for running a TextCommand,
# WindowCommands, or ApplicationCommand respectively.
class RunMultipleCommand(sublime_plugin.TextCommand):
  def exec_command(self, command):
    if not 'command' in command:
      raise Exception('No command name provided.')
 
    args = None
    if 'args' in command:
      args = command['args']
 
    # default context is the view since it's easiest to get the other contexts
    # from the view
    context = self.view
    if 'context' in command:
      context_name = command['context']
      if context_name == 'window':
        context = context.window()
      elif context_name == 'app':
        context = sublime
      elif context_name == 'text':
        pass
      else:
        raise Exception('Invalid command context "'+context_name+'".')
 
    # skip args if not needed
    if args is None:
      context.run_command(command['command'])
    else:
      context.run_command(command['command'], args)
 
  def run(self, edit, commands = None):
    if commands is None:
      return # not an error
    for command in commands:
      self.exec_command(command)

import sublime, sublime_plugin

# Takes an array of commands (same as those you'd provide to a key binding) with

# an optional context (defaults to view commands) & runs each command in order.

# Valid contexts are 'text', 'window', and 'app' for running a TextCommand,

# WindowCommands, or ApplicationCommand respectively.

class RunMultipleCommand(sublime_plugin.TextCommand):

def exec_command(self, command):

if not 'command' in command:

raise Exception('No command name provided.')

args = None

if 'args' in command:

args = command['args']

# default context is the view since it's easiest to get the other contexts

# from the view

context = self.view

if 'context' in command:

context_name = command['context']

if context_name == 'window':

context = context.window()

elif context_name == 'app':

context = sublime

elif context_name == 'text':

pass

else:

raise Exception('Invalid command context "'+context_name+'".')

# skip args if not needed

if args is None:

context.run_command(command['command'])

else:

context.run_command(command['command'], args)

def run(self, edit, commands = None):

if commands is None:

return # not an error

for command in commands:

self.exec_command(command)

パッケージのフォルダをfinderで開く（[Sublime Text]>[Preferences]>[Browse Packages…]）
1.の　〜〜/Packages/直下に”Run Multiple Commands”という名前でフォルダを作る
untitledのファイルを名前を付けて保存。↑の/Run Multiple Commands/内に”run_multiple_commands.py”という名前で保存する（run_multiple_commands.pycも同時に作られる）
↑のrun_multiple_commands.pyをSublime Textで開いた状態で、Package Controlを開く[cmd+shift+P]
“Create Package File”を入力して選択
“Run Multiple Commands”と入力して”Default”を選択してEnter
デスクトップに”Run Multiple Commands.sublime-package”というファイルができるのでユーザーのパッケージフォルダ（/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User）に移動

最終的に

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Run Multiple Commands/　にrun_multiple_commands.pyとrun_multiple_commands.pyc　がある
/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/User/　にRun Multiple Commands.sublime-package　がある

状態になればOK。これでプラグインの設定が完了

キーバインドの設定

ここで複数キーバインドを設定するサンプルとして、複数のファイルを編集中にしている状態で「ファイルを全て保存」した後、「ファイルを全て閉じる」という二つのコマンドを実行する設定を作ってみます。

[Sublime Text]>[Preferences]>[Key Bindings – User]を開く
下記サンプルのように記述する

[
    { "keys": ["alt+command+shift+s"],
        "command": "run_multiple",
        "args": {
            "commands": [
                {"command": "save_all", "context": "window"},
                {"command": "close_all", "context": "window"}
            ]
        }
    }
]

[

{ "keys": ["alt+command+shift+s"],

"command": "run_multiple",

"args": {

"commands": [

{"command": "save_all", "context": "window"},

{"command": "close_all", "context": "window"}

]

}

]

[alt] + [cmd]+ [shift] + [s] を押すと、
“save_all”（ファイルを全て保存）した後、”close_all”（ファイルを全て閉じる）を実行する。
commandを続けて書けば、同様にコマンドを実行できる。

参考

A Sublime Text 2 plugin to enable running multiple commands in any given context from a single key binding.

WEB制作情報

Sassのインポートをディレクトリ単位で指定する sass-globbing

2015年1月4日 co

Sassでimportを行う際は1ファイル毎に指定する必要があります。

例：

@charset "UTF-8";
@import "compass";
@import "mixin";
@import "utility";

@import "foundation/base";
@import "foundation/reset";

@import "layout/container";
@import "layout/header";
@import "layout/main";
@import "layout/aside";
@import "layout/footer";

@import "module/hdg";
@import "module/texts";
@import "module/lists";
@import "module/medias";
@import "module/boxCol";
@import "module/tables";
@import "module/tab";
@import "module/btns";
@import "module/line";
@import "module/movie";

@charset "UTF-8";

@import "compass";

@import "mixin";

@import "utility";

@import "foundation/base";

@import "foundation/reset";

@import "layout/container";

@import "layout/header";

@import "layout/main";

@import "layout/aside";

@import "layout/footer";

@import "module/hdg";

@import "module/texts";

@import "module/lists";

@import "module/medias";

@import "module/boxCol";

@import "module/tables";

@import "module/tab";

@import "module/btns";

@import "module/line";

@import "module/movie";

これだとモジュールが追加になった時等に都度importの記述を追加する必要があり手間になってしまいます。
以下のように指定できると便利ですよね。

@charset "UTF-8";
@import "compass";
@import "mixin";
@import "utility";

@import "foundation/*";
@import "layout/*";
@import "module/*";

@charset "UTF-8";

@import "compass";

@import "mixin";

@import "utility";

@import "foundation/*";

@import "layout/*";

@import "module/*";

こちらを実現するために「sass-globbing」というツールを使用します。

インストール方法

ターミナルを起動して、以下のコマンドを使ってインストール。

$sudo gem install sass-globbing

1	$sudo gem install sass-globbing

Compassを使う場合はconfig.rbに以下を追記

require 'sass-globbing'

1	require 'sass-globbing'

以上でOK

参考：
Automatic Sass Imports with Sass Globbing | Fuse Interactive | Drupal Web Design and Development in Vancouver
sass-globbingでSassファイルをお手軽管理 – Qiita

WEB制作情報

フロントエンド開発に必要な準備（アプリケーション編）

2015年1月4日 co

普段私がコーディング業務で使っているアプリケーションをご紹介します。

Sublime Text

まずはこれですね。DWやCoda、Brackets、Atomなんかも最近出てきましたが、

強力なコード編集機能
豊富なプラグイン
軽量さ

この利点でまだまだSublime Textは使っていけそうです。

MAMP

SassやGitなどの普及によりローカル環境での作業の割合がより大きくなりました。
無料で十分使えますし必要な機能は揃っています。（他のアプリは試していませんが）

iTerm2

Macでターミナル作業を行う際にちょっと見やすくするアプリ。
背景が黒くなってコードがシンタックスハイライトしてわかりやすくなります。あとタブで実行環境をスッキリ管理できます。

また、Sublime Textの”Terminal”のパッケージでデフォルトで起動するアプリをiTermに設定する方法ですが、
[Package Setting] > [Terminal] > [Setting – User] を選択して以下を追記すればOKです。

{
"terminal": "iTerm.sh"
}

{

"terminal": "iTerm.sh"

}

Transmit

高性能なFTPクライアント。

Dropboxに設定を同期
Macのfinderのような見た目。クイックルックも使えます。

Source Tree

GUIでGitを使うならコレ。最近インプレスジャパンさんから刊行された「Web制作者のためのGitHubの教科書」でも標準で使うアプリとして取り上げられました。

CopyPath

これはコーディングの作業というよりはチームで作業する際にファイルやフォルダのパスをやりとりする時に使っています。
以前は無料でしたが、今はappstoreで有料（100円）になっていましたね。

WEB制作情報

Sublime Textの初期設定

2015年1月4日 co

Sublime Textをインストールしたらまずやる事のまとめ。
パッケージのインストールや覚えておきたい操作など。

インストール・初期設定

概要など

まずはインストール

本家サイト
有償ですが、試用版でも機能制限なし。
Sublime Text2もありますが、最新バージョンの3を使います。

オレオレユーザー設定

[Preference] > [Setting – User]　に以下を記載

{  
"bold_folder_labels": true,//フォルダを太字で表示

//Emmetは日本語の変換の確定時に問題があったので、以下の設定を書き込む。  
"disable_formatted_linebreak": true,// 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet  
"disable_tab_abbreviations": true,// tabでの展開の上書きしない for Emmet

"draw_white_space": "all",//スペースの描画。none:描画しない。selection:選択時のみ描画。all:常に描画。  
"highlight_line": true,//現在の行をハイライトする  
"highlight_modified_tabs": true,//編集が行われたファイルのタブをオレンジ色にする  
"preview_on_click": false,//ファイルをクリック時の自動プレビューを解除  
"scroll_past_end": true,//最後の行を超えてスクロール出来る  
"word_wrap": false//テキストを折り返す。true:常に折り返す。false:常に折り返さない。auto: ファイルがプログラムのソースコードなら折り返さない。普通のテキストファイルなら折り返す。  
}

{

"bold_folder_labels": true,//フォルダを太字で表示

//Emmetは日本語の変換の確定時に問題があったので、以下の設定を書き込む。

"disable_formatted_linebreak": true,// 改行でのフォーマットをしない(日本語変換の確定のため) for Emmet

"disable_tab_abbreviations": true,// tabでの展開の上書きしない for Emmet

"draw_white_space": "all",//スペースの描画。none:描画しない。selection:選択時のみ描画。all:常に描画。

"highlight_line": true,//現在の行をハイライトする

"highlight_modified_tabs": true,//編集が行われたファイルのタブをオレンジ色にする

"preview_on_click": false,//ファイルをクリック時の自動プレビューを解除

"scroll_past_end": true,//最後の行を超えてスクロール出来る

"word_wrap": false//テキストを折り返す。true:常に折り返す。false:常に折り返さない。auto: ファイルがプログラムのソースコードなら折り返さない。普通のテキストファイルなら折り返す。

}

オレオレスニペット

https://github.com/WebNAUT-BW/snippets-st-frontend

インストール方法

/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/snippet/
に＊＊＊.sublime-snippetファイルを格納。このディレクトリ以下であれば自由にフォルダに分けてOK。

呼び出し方

[cmd] + [shift] + [p]　→　各スニペットファイルのtabTriggerで設定した名前を入力（予測変換するので途中までの入力でOK）

押さえておきたい基本機能

操作・表示系

名前	詳細
Multiple Selections	[cmd]（windowsなら[ctrl]）を押しながら、複数ヶ所を同時に選択して編集することが出来る
SoftUndo [cmd] + [u]	「選択」「カーソルの位置」なども戻すことができる、便利な「戻る」機能
フォルダによるファイル管理	基本的な作業はフォルダをアプリにドラッグしてサイドバーに設定から行う
Minimap	コードの全体像が把握可能

ショートカット

Sublime Textのキーボードショートカット一覧 (Mac OS X)

よく使うショートカット：

名前	詳細
[cmd] + [d]	一回で単語を選択、二回目から選択中の文字列を検索して順次選択
[cmd] + [alt]+ （数字キー）	ウィンドウを横n等分
[cmd]+ [/]	コメントアウト（コメント解除）
[ctrl]+ [t]	選択された二箇所の文字を交換する
[cmd] + [shift]+ [a]	親のタグまで選択
[cmd] + [shift]+ [d]	カーソル位置の行を下に複製
[cmd] + [alt]+ [f]	置換パネルを開く
検索パネルで[enter]	次を検索
検索パネルで[shift]+ enter	前を検索
[tab]／[shift] + [tab]	インデント／アンインデント

パッケージ

Package Control

パッケージを管理しやすくするパッケージ。まずはこれを入れないと始まらない。

機能概要：

パッケージを簡単にインストール／アンインストールできる、自動的にアップデート
スニペットの呼び出しなどリアルタイムで検索

設定方法：

公式サイトにアクセス（必ず最新の情報でインストールすること）
Sublime Text3のタブが選択されているのを確認して、Installationの項目の「import urllib〜」で始まるコードをコピー。
[View] > [Show Console] をクリック
コピーしたインストール用のコマンドを貼り付けて[enter]
インストールが走っている間しばし待つ
「Package Control: No updated packages」と表示されて処理が止まった所で完了

Package Controlを使ったパッケージのインストール方法：

[command] + [shift] + [p] > 「Install Package」　と入力（変換候補が出るので”install”まででOK）
[enter] を押してしばらく待つ（ステータスバーがLoading中の動きになります。）
インストールしたいパッケージの名前を入力して [enter]

Emmet

Zen-codingの現行版

使い方：

1.ショートコードでタグを展開（[ctl] + [e]）
例：

ul>li*3>a

ul>li*3>a

↓[ctl] + [e]で展開

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

<ul>

</ul>

2.wrap with abbreviation（後からタグで括る）

括りたい範囲を選択して、[ctl] + [alt] + [enter]
ウィンドウの下に「Enter abbreviation」が出るので、指定したいタグを入力して[enter]
複数行をliなどで括る場合はul>li#と入れると行単位でliを指定可能
クラスやIDも1.のショートコード同様指定可能

Emmet Cheat Sheet

http://docs.emmet.io/cheat-sheet/

Bracket Highlighter

htmlのタグ、jsの括弧のペアをハイライトしてくれる

SideBarEnhancements

サイドバーの強化、右クリックで操作できる事が増える

AutoFileName

imgタグやcssなどで、パスを入力する時に、ファイル名を補完してくれる素晴らしいパッケージ

※ユーザ設定に下記を追加するとimgタグのwidthとheightの順番がwidthが先になります。
[Preference] > [Setting – User]

"afn_insert_width_first": true,

1	"afn_insert_width_first": true,

Abacus

イコールとかコロンとかを綺麗に揃える

▼例：使い方

@tableBackground:transparent; // overall background-color  
@tableBackgroundAccent:#f9f9f9; // for striping  
@tableBackgroundHover:#f5f5f5; // for hover  
@tableBorder:#ddd; // table and cell border

@tableBackground:transparent; // overall background-color

@tableBackgroundAccent:#f9f9f9; // for striping

@tableBackgroundHover:#f5f5f5; // for hover

@tableBorder:#ddd; // table and cell border

↓整えたい行を選択して、[cmd] + [alt] + [ctrl] + ]

@tableBackground:       transparent; // overall background-color
@tableBackgroundAccent: #f9f9f9; // for striping
@tableBackgroundHover:  #f5f5f5; // for hover
@tableBorder:           #ddd; // table and cell border

@tableBackground: transparent; // overall background-color

@tableBackgroundAccent: #f9f9f9; // for striping

@tableBackgroundHover: #f5f5f5; // for hover

@tableBorder: #ddd; // table and cell border

ConvertToUTF8

Sublime TextはデフォルトでShift-JISやEUCに対応しておらず、そのまま開くと文字化けしてしまいます。
それらのファイルを開いた時に文字エンコードをUTF8に変換し、保存時にまたエンコードを戻してくれるというパッケージです。

各種シンタックス

SCSS（SASSを入れてしまうと.scssでemmetを使った時にセミコロンが自動で付かない）
Compass
LESS

各種スニペット

HTML Snippets
CSS Snippets
jQuery Snippets pack
JavaScript Snippets

JSHint

JavaScriptのリアルタイム構文チェックを行うパッケージです。
なお、これを使うためには別途Node.js経由でJSHintをインストールする必要があります。

紹介記事

追加するパッケージ

SublimeLinter
SublimeLinter-jshint

TrailingSpaces

全角スペースをハイライト表示するパッケージ
インストールしただけではうまく動かず、

[PackageSetting] > [TrailingSpaces] > [Setting – User] に

{  
"trailing_spaces_regexp": "　|[ t]+"  
}

{

"trailing_spaces_regexp": "　|[ t]+"

}

を記載します。これでOK

参考サイト

上記設定を追記する先が
[PackageSetting] > [Package Control] > [Setting – User]　と書かれていますが、正しくは
[PackageSetting] > [TrailingSpaces] > [Setting – User]　ですのでご注意。

カラーテーマ設定

オリジナルなテーマ設定を行う方法

紹介記事：Sublime Textのテーマをカスタマイズできる「Color Scheme Editor for Sublime」 – へっぽこプログラマーの日記

まずはこちらにアクセス

左上の[Gallery]で既存のテーマを選択
細かい色の調整（必要に応じて）
[download]して＊＊.tmThemeファイルをダウンロード
[Preferences] > [Brouwse Packages] でFinderにPackage内容を表示
　/Users/【ユーザー名】/Library/Application Support/Sublime Text/Packages/User/＊＊.tmTheme　ここにファイルを格納
すると　[Preferences] > [Color Scheme] > [User] にテーマ＊＊が選択できるようになる

WEB制作情報

フロントエンド開発に必要な準備（ターミナル関連）

2015年1月3日 co

Sublime Textでサイドバーからターミナルを起動できるようにするパッケージ

参考サイト

iTermをデフォルトで設定する方法：

[Package Setting]>[Terminal]>[Setting – User]を選択してパッケージ設定ファイルに以下を追記

{
    "terminal": "iTerm.sh"
}

{

"terminal": "iTerm.sh"

}

Sass/Compassのインストール

参考サイト

1.ターミナルを開いて以下を入力

$ sudo gem install sass

1	$ sudo gem install sass

2.以下で確認

$ sass -v

$ sass -v

3.Compassも同様に

$ sudo gem install compass

1	$ sudo gem install compass

$ compass -v

1	$ compass -v

Node.js

Grunt/Gulpを実行するために必要なサーバーサイドJavaScriptです。
「NPM」というNode.jsのパッケージマネージャにGrunt/Gulpが登録されているため、ターミナルでインストールを行い使えるようにします。

インストール手順：

本家サイトにアクセス
Installボタンを押してpkgファイルをダウンロード、実行

Node.jsの動作確認

ターミナルを起動（iTerm）
nodeのバージョンを確認するコマンドを打つ

$ node -v

$ node -v

“v0.10.26″等のバージョンが返ってきたらOK

Grunt

ターミナルを開いて以下のコマンドを入力

$ sudo npm install -g grunt-cli

1	$ sudo npm install -g grunt-cli

Gruntの動作確認

ターミナルを開いて以下のコマンドを入力

$ grunt -h

1	$ grunt -h

以下のようなテキストが出てくればOK

grunt-cli: The grunt command line interface. (v0.1.13)

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

grunt-cli: The grunt command line interface. (v0.1.13)

If you're seeing this message, either a Gruntfile wasn't found or grunt

hasn't been installed locally to your project. For more information about

installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

参考サイト：

Gulp

Gruntと同様に以下のコマンドでインストール

$ sudo npm install -g gulp

1	$ sudo npm install -g gulp

Git

基本的にSource TreeのUIだけでGitを扱えますが、Git mvなど個別にコマンドを実行する際にターミナルからも動かせるようにしておきます。
参考サイト

やりたい事

使ったツールがこちら

まずはアカウント登録

テスト用のGitレポジトリを作成

レポジトリ、サーバーの設定

レポジトリにプッシュしてみる

masterもプッシュしてみる

masterを手動デプロイに変更

まとめ

参考サイト

良い点

イマイチ、わかりにくい点

bxSliderのウリ

ダウンロード、設置

HTMLの指定

関数の呼び出し

オプションについて

バグ等の対処

前後ボタンやページングをクリック後、自動切替が効かなくなる場合の対処

縦スライド版（vertical）設定時にうまく動かない時の対処

IE9以降で動かない時の確認事項

プラグインの設定

キーバインドの設定

参考

インストール方法

インストール・初期設定

概要など

まずはインストール

オレオレユーザー設定

オレオレスニペット

インストール方法

呼び出し方

押さえておきたい基本機能

操作・表示系

ショートカット

よく使うショートカット：

パッケージ

Package Control

機能概要：

設定方法：

Package Controlを使ったパッケージのインストール方法：

Emmet

使い方：

Emmet Cheat Sheet

Bracket Highlighter

SideBarEnhancements

AutoFileName

Abacus

ConvertToUTF8

各種シンタックス

各種スニペット

JSHint

追加するパッケージ

TrailingSpaces

カラーテーマ設定

おすすめ

オリジナルなテーマ設定を行う方法

Sublime Textでサイドバーからターミナルを起動できるようにするパッケージ

iTermをデフォルトで設定する方法：

Sass/Compassのインストール

Node.js

Node.jsの動作確認

Grunt

Gruntの動作確認

Git

WEB制作情報、映画や音楽の話など