皆さんほんとSublimeText2大好きですよね。何か困って検索すると色んな方が色んな記事を書いてくれているのでほんと助かります。そんなSublimeText2ですが、プラグインを入れる事で、FTPクライアントとしても利用する事ができます。先日試してみて、結構便利だったのでご紹介します。Packageを選びます。次にFTPを入力すると「FTPS」と「FTPSync」の二つが見つかります。FTPSyncは、どうもうまく動かなくて、調べてみるとだめなようですね。(ちゃんと原因までは調べていませんが・・・)SublimeText2を再起動したら、設定ができそうです。FTPSは設定も簡単ですので、そちらでいきます。blogさんに詳しく記載してありますので、そちらを参考にしてもらえればいいかと思います。remote...」をクリックすると設定ファイル(sftp-config.json)が生成されます。主な設定項目を挙げてみます。"/example/path/",//リモート上のパス最低限これくらい入力すると、使えるようになります。設定終了後、サイドバーのフォルダで右クリックをするとFTPのアクションができるようになります。シンプルなテキストエディタなので、UIはとてもシンプルです。(というかテキストベースです)グラフィカルなUIに慣れている方は却って使いにくいかもしれません。上記は、リモートファイルを参照する画面です。個人的には、ブログで紹介するデモなどちょっとアップロードしたいような時や、サーバー上で開発しなければならないような場合などSublimeText2上で直接編集できるので使えると思いました。シンプルがゆえに拡張性が高いエディタです。プラグインを入れすぎると本末転倒になりそうな気もしますが、使い勝手よくカスタマイズできるのは素晴らしい事ですね。【追記】sftp-config.jsonは、サーバーと同期したいフォルダのルートに生成されます。サイトのファイルをDropboxなどで複数のパソコン間で共有している場合、FTPSプラグインさえ各パソコンに入れておけば、何もしなくてもサーバーのログイン情報も同期できます。セキュリティ上の問題はあるにせよ、いちいち設定をし直さなくても、共有できるのはすごく便利です。Editor」がちょっと良さげなので、ご紹介します。導入方法chrome上で動くアプリなので、まずは、chromeをインストールしてください。Editor」を検索してインストールします。使い方アプリを起動すると、画像を開く画面が表示されますので、お好みのメニューを選びます。画像を開くと、まるでphotoshopのような操作画面が表示されます。・その他、ブラシを使った描画やぼかし・ヒストリー管理機能などなどってほぼ、photoshopじゃないですか!実際に使ってみましたが、photoshopに慣れていることもあり、かなり直感的に利用できました。書き出しも、ローカルファイルへの保存はもちろんですが、直接facebookなどへの投稿も可能なようです。これを使ってwebサイトをデザインしろって言われるとちょっと困りますが、簡単な画像の補正やサイズ調整くらいなら問題なくこなせるレベルだと思います。起動もはやいので、ちょっとした手直しの時や、クライアントから「無料の画像補正ソフト教えて」って時に使えるかもしれませんね。今日もツール系のネタですが、先日あたりからTLを賑わせていた「OneClickCSS」というツール。これ大変便利だったのでご紹介します。htmlコーディングを行なっている中で、結構めんどうなのが、html側で定義したクラスやIDを調べることだと思います。汎用的なクラス名などは、だいたい覚えているのでいいんですが、固有名詞を利用したようなクラスなど、いちいちhtmlファイルを開いてコピーして、cssを記述するなんてことも多いんじゃないでしょうか。そのファイルの移動時間が結構なタイムロスにつながります。今日紹介するツールがその手間を解消してくれます。OneClickCSS左側にhmtlソースを貼り付けて、吐き出したいcssを指定するだけで、クラス情報を吐き出してくれます。lessとかsassにも対応していますし、クラスを重複して定義してあっても、ちゃんと一つだけしか書き出さなかったりと、実用性が高いツールだと思います。CSSで書きだした時に、divは入れないでもらえるといいんですが・・・それでも、コーディング時の定番ツールになりそうです。対応も増えてきたので、いかに効率良く作業するかを真剣に考えなきゃいけないと思っています。新年あけましておめでとうございます。今年もどうぞよろしくお願いいたします。AdobeのCS2が無料で公開されるようですよ!って話題です。無料ではなくて、CS2のアクティベーションサーバーを終了したので、既存のユーザーはこの有効なシリアルナンバー使えますよってことのようです。ついてCS2といえば、僕がこの仕事を初めて一番長く使っていたバージョンです。ダウンロードAdobeのIDだけあれば、ダウンロード可能のようですが、この記事を書いている時点では、アクセス過多のためか、メンテナンス中になっています。ネット上の情報を見る限りだと事実のようで、日本語版もあるみたいですね。実は、自宅のパソコンにはphotoshopしか入れてないので、Adobeさんのサーバーが復旧したら、Illustratorをダウンロードしてみようかと思っています。普段はほとんど使わないけど、やっぱないと不便だったりしていましたので。Illustratorやphotoshopの他にもAcrobatなども無料のダウンロードに含まれるようなので、クリエーターさん以外の方でも恩恵に預かれそうです。実は、僕自身2,3年前までCS2を使っていました。基本的な機能であれば、今でも十分使えると思いますので、これからwebやグラフィックを始めたいという方は、試してみるといいかもしれません。2012年10月14日Zen-cordingの次世代バージョンEmmet一度使い始めたらもうやめられない「Zen-cording」ですが、すでに次世代バージョンの開発が始まっているようです。ベータ版のようですが、機能の一部を試す事ができるようなのでさっそくやってみました。html展開時に上の階層へ戻る[^]Zen-cordingでは上の階層にもどる場合、()でくくってあげるんですね。知らなかったので、使っていなかったです。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を展開する時に数値を入れられない事。[ここにカーソル];となり、最後に数値を入力するという流れです。100px;;となってしまうこともしばしば・・・そんな理由でcssではあまりZen-cordingを使っていませんでした。Emmetでは、数値も含めて記述できるようになっています。100px;と展開されます。素晴らしい!他にもベンダーフィックスのプロパティに対応したり、便利な機能が追加されています。コーディングの手間を少しでも省けると、きっと幸せな事になると思うので、この手のテクニックは覚えておきたいですね。詳しい導入方法はこちらを参考にさせて頂きました。Animateがリリースされました。css3のアニメーションは興味があっても、あれを手書きでつくる根気も能力もありませんから、こういったツールでできると楽です。簡単なアニメーションを作ってみました。(これでも学生時代VJをたしなんでいたなんて口が裂けても言えない・・・)これ、たったの数分でできました。effectを使ったことがある方なら直感的に操作できるかと思います。アニメーションをタイムラインで管理して、アクションをつけるところで「キーポイント」を付けてあげて、動きをパラメータで指定するだけです。fontが使えますし、画像ファイルなんかも読み込めましたので、もっとしっかりしたアニメーションも実現可能です。ちなみに上記のアニメーションのソースはこんな感じ。"EDGE-43530650");もはや普通の人間では到底理解できません(^^;実務として、こういったアニメーションを扱うことはあまりないかもしれませんが、面白いツールだと思います。むかし、必死でFlashを使って作っていたアニメーションを今は同じような操作でhtmlベースで作れるなんて・・・なんか感慨深いです。このEdge、現在は無料で利用できます。Cloudに登録する必要あり)近い将来有料化するようですので、興味がある方は早めに使って操作感を確かめてみるといいかもしれません。Reflow(レスポンシブなレイアウトをデザインできるツール?)の方が興味があります。発表のみなので詳細はわかりませんけどね。Text2がいいと思う件テキストエディタのお話です。自宅ではcoda(mac)(coda2にはしてません。不自由は感じていませんでしたが(強いて言えば、codaのZen-Codingが使えない、ドリが安定しないというか思い・・・いや、潜在的に不満はあったみたいですね。Text2がやばいよってお話をきいていたので、ちょっと試してみました。結論からいうと、かなりいいです。拡張性も高く、Zen-cordingはもちろん、css、html、jQueryなんかの補完もしてくれます。(Packageという、追加機能を入れることで対応してくれます。「ctrl+shift+/」:コメントアウト(コードを選択して押せば、そのコード自体をコメントアウトしてくれる)あたりは、すでに多用しています。「$(‘」と入力するとカッコとシングルコーテーションを閉じた状態まで補完してくれます。カーソルはシングルコーテーションの中に!地味だけど、超便利です。LESSとかにも対応しているようです。win環境でどうやって使おうか検討してたのでちょうどいいですね。使いこなせていませんが、普段の作業は、CMSでフレームを作って、エントリーをゴリゴリHTMLで書いてコピペして投稿。いう流れが多いので、HTMLを書くときは、サクサク動くエディタの方がいいかなと思っております。軽量でレスポンスも早く、コードの色分けも大変見やすく、カスタマイズ性も高いので、メインのエディタにしてもいいかな。初期設定などはちょっと面倒なので、参考になるサイトをいくつかご紹介します。時間制限?ありで、フル機能の体験版も使えますので、よかったら試してみてください。Text2ってエディタがすごくイイ。2012年8月30日MAMPでMySQLが起動しないMAMPをインストールして、ローカル環境でwpとかテストしようと思っているのですが、インストールはできたけど、MySQLが起動しなくなってしまったので、対処法のメモ。実行するだけで使えるようになりました。