みんな大好きSublimeText2をFTPクライアントにする方法

皆さんほんとSublimeText2大好きですよね。
何か困って検索すると色んな方が色んな記事を書いてくれているのでほんと助かります。

さて、そんなSublimeText2ですが、プラグインを入れる事で、FTPクライアントとしても利用する事ができます。
先日試してみて、結構便利だったのでご紹介します。

プラグインのインストール

まず、Package Controlから Install Packageを選びます。
次にFTPを入力すると「FTPS」と「FTPSync」の二つが見つかります。
FTPSyncは、どうもうまく動かなくて、調べてみるとだめなようですね。(ちゃんと原因までは調べていませんが・・・)
SublimeText2を再起動したら、設定ができそうです。後で使ってみます。

FTPSは設定も簡単ですので、そちらでいきます。

FTPSの使い方

Calms blogさんに詳しく記載してありますので、そちらを参考にしてもらえればいいかと思います。

Calms blog:Sublime Text 2のFTPプラグイン

サイドバーのフォルダ上で右クリックすると、「Map to remote…」をクリックすると設定ファイル(sftp-config.json)が生成されます。

主な設定項目を挙げてみます。

"type": "ftp", // ftp or ftps

[省略]

"host": "example.com", //ホスト名
"user": "username", //ユーザー名
//"password": "password",//パスワード コメントアウトのままだと接続の度にパスワードを聞かれます
 //"port": "22",

"remote_path": "/example/path/",//リモート上のパス

最低限これくらい入力すると、使えるようになります。

設定終了後、サイドバーのフォルダで右クリックをするとFTPのアクションができるようになります。

もともとシンプルなテキストエディタなので、UIはとてもシンプルです。(というかテキストベースです)グラフィカルなUIに慣れている方は却って使いにくいかもしれません。

上記は、リモートファイルを参照する画面です。

個人的には、ブログで紹介するデモなどちょっとアップロードしたいような時や、サーバー上で開発しなければならないような場合などSublimeText2上で直接編集できるので使えると思いました。

シンプルがゆえに拡張性が高いエディタです。プラグインを入れすぎると本末転倒になりそうな気もしますが、使い勝手よくカスタマイズできるのは素晴らしい事ですね。

【追記】
sftp-config.jsonは、サーバーと同期したいフォルダのルートに生成されます。
サイトのファイルをDropboxなどで複数のパソコン間で共有している場合、FTPSプラグインさえ各パソコンに入れておけば、何もしなくてもサーバーのログイン情報も同期できます。
セキュリティ上の問題はあるにせよ、いちいち設定をし直さなくても、共有できるのはすごく便利です。

Photoshopの代わりになる?chromeアプリ「Pixlr Editor」がいいかもな件

photoshopライクな操作画面で、しかも無料で使える画像エディタ
chromeアプリの「Pixlr Editor」がちょっと良さげなので、ご紹介します。

導入方法

chrome上で動くアプリなので、まずは、chromeをインストールしてください。
次に、chromeウェブストアから、「Pixlr Editor」を検索してインストールします。

使い方

アプリを起動すると、画像を開く画面が表示されますので、お好みのメニューを選びます。

画像を開くと、まるでphotoshopのような操作画面が表示されます。

Pixlr Editorでできること

・画像のリサイズ
・回転、切り抜き
・レイヤーの作成
・レイヤーの乗算
・レイヤーマスク!
・テキストの入力
・画像のレタッチ(コントラスト、色調・彩度、レベル調整、トーンカーブ、露光etc)
・フィルター
・その他、ブラシを使った描画やぼかし
・ヒストリー管理機能
などなど
ってほぼ、photoshopじゃないですか!

実際に使ってみましたが、photoshopに慣れていることもあり、かなり直感的に利用できました。

書き出しも、ローカルファイルへの保存はもちろんですが、直接facebookなどへの投稿も可能なようです。
これを使ってwebサイトをデザインしろって言われるとちょっと困りますが、簡単な画像の補正やサイズ調整くらいなら問題なくこなせるレベルだと思います。

起動もはやいので、ちょっとした手直しの時や、クライアントから「無料の画像補正ソフト教えて」って時に使えるかもしれませんね。

それにしてもこれだけのことをブラウザ上でできてしまうって、どんだけすごいんだろ・・・

OneClickCSSが便利な件

今日もツール系のネタですが、先日あたりからTLを賑わせていた「OneClickCSS」というツール。これ大変便利だったのでご紹介します。

htmlコーディングを行なっている中で、結構めんどうなのが、html側で定義したクラスやIDを調べることだと思います。
汎用的なクラス名などは、だいたい覚えているのでいいんですが、固有名詞を利用したようなクラスなど、いちいちhtmlファイルを開いてコピーして、cssを記述するなんてことも多いんじゃないでしょうか。
そのファイルの移動時間が結構なタイムロスにつながります。

で、今日紹介するツールがその手間を解消してくれます。

OneClickCSS

左側にhmtlソースを貼り付けて、吐き出したいcssを指定するだけで、クラス情報を吐き出してくれます。
lessとかsassにも対応していますし、クラスを重複して定義してあっても、ちゃんと一つだけしか書き出さなかったりと、実用性が高いツールだと思います。

欲を言えば、children CSSで書きだした時に、divは入れないでもらえるといいんですが・・・
それでも、コーディング時の定番ツールになりそうです。

CSSspriteとかもそうですが、一昔前は手書きでやってなんぼみないな職人技的作業が多かったんですが、めんどくさい作業はツールが代行してくれるようになると、時間を有意義に使えていいですね。
最近、実作業以外の対応も増えてきたので、いかに効率良く作業するかを真剣に考えなきゃいけないと思っています。

今年のテーマは、「楽する」かな・・・

Adobeからのお年玉-CS2が無料だって【無料ではないです】

新年あけましておめでとうございます。
今年もどうぞよろしくお願いいたします。

さて、本年1本目のブログ。どうやら、AdobeのCS2が無料で公開されるようですよ!って話題です。
ごめんなさい。無料ではなくて、CS2のアクティベーションサーバーを終了したので、既存のユーザーはこの有効なシリアルナンバー使えますよってことのようです。お騒がせしました。

Adobe Creative Suite 2およびAcrobat 7 について

CS2といえば、僕がこの仕事を初めて一番長く使っていたバージョンです。それが無料って・・・

Adobe CS2 ダウンロード

AdobeのIDだけあれば、ダウンロード可能のようですが、この記事を書いている時点では、アクセス過多のためか、メンテナンス中になっています。

ネット上の情報を見る限りだと事実のようで、日本語版もあるみたいですね。

実は、自宅のパソコンにはphotoshopしか入れてないので、Adobeさんのサーバーが復旧したら、Illustratorをダウンロードしてみようかと思っています。
普段はほとんど使わないけど、やっぱないと不便だったりしていましたので。

Illustratorやphotoshopの他にもAcrobatなども無料のダウンロードに含まれるようなので、クリエーターさん以外の方でも恩恵に預かれそうです。実は、僕自身2,3年前までCS2を使っていました。基本的な機能であれば、今でも十分使えると思いますので、これからwebやグラフィックを始めたいという方は、試してみるといいかもしれません。

ITmediaニュース-PhotoshopなどのCS2製品が無料? アクティベーションサーバの停止でAdobeが公開

Zen-cordingの次世代バージョンEmmet

一度使い始めたらもうやめられない「Zen-cording」ですが、すでに次世代バージョンの開発が始まっているようです。
まだベータ版のようですが、機能の一部を試す事ができるようなのでさっそくやってみました。
※対応エディタは限られていますので、今回は、Sublime Text 2で試しています。

新機能 html展開時に上の階層へ戻る[^]

Zen-cordingでは上の階層にもどる場合、()でくくってあげるんですね。
知らなかったので、使っていなかったです。

例えば

<div id="header"></div>
<div id="content">
     <div id="main"></div>
     <div id="sub"></div>
</div>
<div id="footer"></div>

こんな階層を展開する場合、
Zen-cordingではこのように書きます。
div#header+(div#content>div#main+div#sub)+div#footer

知らなかったんですが、ちょっと分かりにくいので、慣れていないと忘れてしまいそうです。

Emmetでは同じ事をこのように記述できます。
div#header+div#content>div#main+div#sub^div#footer

[^]が上の階層に戻るというファンクションになっています。
実際に書いてみると分かりますが、Emmetの方が直感的に記述できるように感じました。

CSSのプロパティに数値を入れる

Zen-cordingで何気に不便だと感じていたのが、cssを展開する時に数値を入れられない事。
例えば width:100px;と書きたい時にZen-cordingすると

wをタイプ

展開キーを押す

width: [ここにカーソル];
となり、最後に数値を入力する

という流れです。

長年の癖で、数値を入力すると「;」もタイプしてしまうので
width: 100px;;
となってしまうこともしばしば・・・
そんな理由でcssではあまりZen-cordingを使っていませんでした。

Emmetでは、数値も含めて記述できるようになっています。
w100px
で、width: 100px;と展開されます。素晴らしい!

他にもベンダーフィックスのプロパティに対応したり、便利な機能が追加されています。

コーディングの手間を少しでも省けると、きっと幸せな事になると思うので、この手のテクニックは覚えておきたいですね。

詳しい導入方法はこちらを参考にさせて頂きました。

Web Design KOJIKA17 Zen-Codingの次期バージョン、Emmet について
Deconcepter 知らない人は遅れてる?新Zen-Coding Emmet

Adobe Edge Animateリリースされました

Adobeのhtml5/css3アニメーション作成ツールEdge Animateがリリースされました。

css3のアニメーションは興味があっても、あれを手書きでつくる根気も能力もありませんから、こういったツールでできると楽です。さっそく簡単なアニメーションを作ってみました。

DEMO

センスがないアニメーションですがorz (これでも学生時代VJをたしなんでいたなんて口が裂けても言えない・・・)
これ、たったの数分でできました。flashのアニメーションやafter effectを使ったことがある方なら直感的に操作できるかと思います。アニメーションをタイムラインで管理して、アクションをつけるところで「キーポイント」を付けてあげて、動きをパラメータで指定するだけです。

しっかり使い込んでいませんが、fontもweb fontが使えますし、画像ファイルなんかも読み込めましたので、もっとしっかりしたアニメーションも実現可能です。

ちなみに上記のアニメーションのソースはこんな感じ。

/**
 * Adobe Edge: symbol definitions
 */
(function($, Edge, compId){
//images folder
var im='images/';

var fonts = {};


var resources = [
];
var symbols = {
"stage": {
   version: "1.0.0",
   minimumCompatibleVersion: "0.1.7",
   build: "1.0.0.185",
   baseState: "Base State",
   initialState: "Base State",
   gpuAccelerate: false,
   resizeInstances: false,
   content: {
         dom: [
         {
            id:'Rectangle',
            type:'rect',
            rect:['79px','199px','46px','200px','auto','auto'],
            fill:["rgba(146,214,154,1.00)"],
            stroke:[0,"rgba(0,0,0,1)","none"]
         },
         {
            id:'Rectangle2',
            type:'rect',
            rect:['146px','400px','46px','177px','auto','auto'],
            fill:["rgba(146,214,154,1)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle3',
            type:'rect',
            rect:['235px','236px','46px','164px','auto','auto'],
            fill:["rgba(146,214,154,1)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle4',
            type:'rect',
            rect:['341px','400px','46px','164px','auto','auto'],
            fill:["rgba(176,116,127,1.00)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         },
         {
            id:'Rectangle5',
            type:'rect',
            rect:['421px','191px','46px','210px','auto','auto'],
            fill:["rgba(254,117,86,1.00)"],
            stroke:[0,"rgb(0, 0, 0)","none"]
         }],
         symbolInstances: [

         ]
      },
   states: {
      "Base State": {
         "${_Rectangle5}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["color", "background-color", 'rgba(254,117,86,1.00)']
         ],
         "${_Rectangle2}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["style", "left", '146px'],
            ["color", "background-color", 'rgba(70,143,79,1.00)']
         ],
         "${_Rectangle3}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["style", "left", '236px'],
            ["color", "background-color", 'rgba(120,176,116,1.00)']
         ],
         "${_Stage}": [
            ["color", "background-color", 'rgba(255,255,255,1)'],
            ["style", "width", '550px'],
            ["style", "height", '400px'],
            ["style", "overflow", 'hidden']
         ],
         "${_Rectangle}": [
            ["style", "top", '399px'],
            ["style", "opacity", '1'],
            ["transform", "scaleY", '1'],
            ["color", "background-color", 'rgba(146,214,154,1.00)']
         ],
         "${_Rectangle4}": [
            ["style", "top", '400px'],
            ["style", "opacity", '1'],
            ["color", "background-color", 'rgba(176,116,127,1.00)']
         ]
      }
   },
   timelines: {
      "Default Timeline": {
         fromState: "Base State",
         toState: "",
         duration: 10000,
         autoPlay: true,
         timeline: [
            { id: "eid63", tween: [ "style", "${_Rectangle3}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid24", tween: [ "color", "${_Rectangle3}", "background-color", 'rgba(120,176,116,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(120,176,116,1.00)'}], position: 7377, duration: 0, easing: "easeInOutQuad" },
            { id: "eid21", tween: [ "style", "${_Rectangle3}", "top", '244px', { fromValue: '400px'}], position: 656, duration: 5574, easing: "easeInQuad" },
            { id: "eid23", tween: [ "style", "${_Rectangle3}", "top", '286px', { fromValue: '244px'}], position: 6230, duration: 1148, easing: "easeInOutQuad" },
            { id: "eid62", tween: [ "style", "${_Rectangle4}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid13", tween: [ "style", "${_Rectangle2}", "top", '326px', { fromValue: '400px'}], position: 2131, duration: 2623, easing: "easeInQuad" },
            { id: "eid15", tween: [ "style", "${_Rectangle2}", "top", '230px', { fromValue: '326px'}], position: 4754, duration: 2623, easing: "easeInQuad" },
            { id: "eid51", tween: [ "style", "${_Rectangle5}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid40", tween: [ "style", "${_Rectangle5}", "top", '367px', { fromValue: '400px'}], position: 0, duration: 820, easing: "easeOutQuad" },
            { id: "eid42", tween: [ "style", "${_Rectangle5}", "top", '376px', { fromValue: '367px'}], position: 820, duration: 328, easing: "easeOutQuad" },
            { id: "eid44", tween: [ "style", "${_Rectangle5}", "top", '295px', { fromValue: '376px'}], position: 1148, duration: 1311, easing: "easeOutQuad" },
            { id: "eid46", tween: [ "style", "${_Rectangle5}", "top", '353px', { fromValue: '295px'}], position: 2459, duration: 2787, easing: "easeOutQuad" },
            { id: "eid48", tween: [ "style", "${_Rectangle5}", "top", '214px', { fromValue: '353px'}], position: 5246, duration: 2131, easing: "easeOutQuad" },
            { id: "eid32", tween: [ "style", "${_Rectangle4}", "top", '236px', { fromValue: '400px'}], position: 1475, duration: 2787, easing: "easeInOutQuad" },
            { id: "eid34", tween: [ "style", "${_Rectangle4}", "top", '325px', { fromValue: '236px'}], position: 4262, duration: 820, easing: "easeInOutQuad" },
            { id: "eid36", tween: [ "style", "${_Rectangle4}", "top", '271px', { fromValue: '325px'}], position: 5082, duration: 2295, easing: "easeInOutQuad" },
            { id: "eid64", tween: [ "style", "${_Rectangle2}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid65", tween: [ "style", "${_Rectangle}", "opacity", '0', { fromValue: '1'}], position: 7377, duration: 2623, easing: "easeOutQuad" },
            { id: "eid19", tween: [ "style", "${_Rectangle3}", "left", '236px', { fromValue: '236px'}], position: 656, duration: 0, easing: "easeInQuad" },
            { id: "eid7", tween: [ "style", "${_Rectangle}", "top", '200px', { fromValue: '399px'}], position: 0, duration: 4590, easing: "easeInQuad" },
            { id: "eid9", tween: [ "style", "${_Rectangle}", "top", '305px', { fromValue: '200px'}], position: 4590, duration: 2787, easing: "easeInQuad" }         ]
      }
   }
}
};


Edge.registerCompositionDefn(compId, symbols, fonts, resources);

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
     Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-43530650");

もはや普通の人間では到底理解できません(^^;

実務として、こういったアニメーションを扱うことはあまりないかもしれませんが、面白いツールだと思います。
むかし、必死でFlashを使って作っていたアニメーションを今は同じような操作でhtmlベースで作れるなんて・・・なんか感慨深いです。

このEdge、現在は無料で利用できます。(Creative Cloudに登録する必要あり)近い将来有料化するようですので、興味がある方は早めに使って操作感を確かめてみるといいかもしれません。

個人的には、同時に発表されたEdge Reflow(レスポンシブなレイアウトをデザインできるツール?)の方が興味があります。
発表のみなので詳細はわかりませんけどね。

HTML5 アニメーションソフト | Adobe Edge Animate

Sublime Text2がいいと思う件

テキストエディタのお話です。
ボクは、基本的に会社ではDreamweaver(win) 自宅ではcoda(mac)(coda2にはしてません。)を使ってます。

とくに不自由は感じていませんでしたが(強いて言えば、codaのZen-Codingが使えない、ドリが安定しないというか思い・・・いや、潜在的に不満はあったみたいですね。)、色んなところからSublime Text2がやばいよってお話をきいていたので、ちょっと試してみました。
これ、そういえば、以前見ていたjqueryのレッスン[Learn jQuery in 30 Days]でも使われていたな・・・

結論からいうと、かなりいいです。

拡張性も高く、Zen-cordingはもちろん、css、html、jQueryなんかの補完もしてくれます。
(Packageという、追加機能を入れることで対応してくれます。)

ショートカットも充実していて、例えば、
「ctrl+shift+D」:選択した行を複製
「ctrl+shift+/」:コメントアウト(コードを選択して押せば、そのコード自体をコメントアウトしてくれる)
あたりは、すでに多用しています。(昨日から試験的に導入しています)

コードの補完も強力で、
readyと入力すると

     jQuery(document).ready(function() {
          // Stuff to do as soon as the DOM is ready;
     });

と書きだしてくれたり、
「$(‘」と入力するとカッコとシングルコーテーションを閉じた状態まで補完してくれます。しかもカーソルはシングルコーテーションの中に!地味だけど、超便利です。

LESSとかにも対応しているようです。win環境でどうやって使おうか検討してたのでちょうどいいですね。

まだまだ使いこなせていませんが、普段の作業は、CMSでフレームを作って、エントリーをゴリゴリHTMLで書いてコピペして投稿。という流れが多いので、HTMLを書くときは、サクサク動くエディタの方がいいかなと思っております。
軽量でレスポンスも早く、コードの色分けも大変見やすく、カスタマイズ性も高いので、メインのエディタにしてもいいかな。

初期設定などはちょっと面倒なので、参考になるサイトをいくつかご紹介します。
時間制限?ありで、フル機能の体験版も使えますので、よかったら試してみてください。

Sublime Text – Download

Sublime Text2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ
Tender Surrender: Sublime Text 2 のススメ

MAMPでMySQLが起動しない

MAMPをインストールして、ローカル環境でwpとかテストしようと思っているのですが、インストールはできたけど、MySQLが起動しなくなってしまったので、対処法のメモ。

MAMPを起動させた状態で、MacのTerminal.appで “killall -9 mysqld” を実行するだけで使えるようになりました。

via:NATO BLOG MAMPでMySQLが起動しなくなった場合