Click here to enter
LESSというCSSの記述方法を拡張(変数、ネスト化、Mixinsなど)するRuby製のライブラリを導入してみました。 Codaには「.lessファイルを.cssファイルに変換(コンパイル)するプラグイン」と「less用の構文モード」があるので、簡単にLESS環境を構築することができます。 LESSの環境を構築 RubyとRubyGemsをインストール Ruby製のライブラリなので「Ruby」とRuby用のパッケージマネージャー「RubyGems」が必要ですが、Mac OS Xには標準で入っているようです。 ※私の環境はMac OS X Leopardになります。 LESSをインストール 下記のコマンドを実行し、LESSをインストールします。 私はHomebrewでインストールしてみました。 gem install less ここで302エラーが返ってくる場合は、.bash_profile
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
去年MacBookAIRを購入してから、念願だったMac専用のwebオーサリングツール『Coda』をインストールしたんですが、 DWとの違いにかなり戸惑ってしまいあまり使いこなせていなかった霙(@xxmiz0rexx)です。 使い方さえ覚えてしまえばさらに快適なコーディングライフを送れると思うので、機会を作ってちゃんと覚えてみようと思い記事にしました。 プラグインを入れて快適に使う まずはCodaの環境を整えます。DWではpタグやhタグなどはショートカットキーで挿入していたので、 まったく同じキーではないにしても同じような事ができないかと思い探したところ、Zen-CodingのCoda版プラグインである『TEA for Coda | One Crayon 』を入れれば良いという結論に達しました。 このプラグインを入れておけば、例えばpタグやhタグ、strongタグなどを素早く挿入することが
I've been using Coda for a while now, and it's become my web development application of choice. There are quite a few great web development applications out there (read "18 Wonderful IDEs for Windows, Mac, and Linux") but if you're a Mac user, Coda is easily one of the best. Here are 20 excellent Coda tips to increase productivity that I've gathered during my use of Coda so far. 1. Set Your Prefer
「Coda」にインストールした「Zen-Coding」の、デフォルトのショートカットを変更する方法です。 「ユーザ名 > ライブラリ > Application Support > Coda > Plug-ins > TEA for Coda.codaplugin」のパッケージの内容を表示 して、「Content > Resources > English.lproj > TextActions.plist」まで潜り込み、「Expand Abbreviation」のショートカットを「^,(control + ,)」などに変更します。 Zen-Coding については、こちらのサイトで非常に良くまとめられていますね。 »マークアップ効率化 – zen-codingでコーディングを倍速に (Yahoo! JAPAN Tech Blog)
coda2をインストールしてまずやることをまとめてみた。 せっかく購入したのに新機能やcodaから変更されたUIに戸惑って なかなか使いこなせない方も多いはずー!! 使いやすく環境に整える 分割ウィンドウ codaの魅力はウィンドウをいくつも分割してコーディングできること。 例えばcssとhtmlとプレビューを1画面で見ながらコーディングできます。 編集すれば更新ボタンを押さなくてもファイルを保存すれば自動的に再読み込みしてくれます。 デフォルトでは新規ウィンドウを開くと以下のように縦に分割表示されます。 でもコレ見にくい〜 optionボタンを押しながら開くと縦に分割されるんですがいちいち押すのも面倒。 そこで環境設定 > 一般から縦か横かどちらに分割プレビューするかを設定します。 サイドバーの位置を決める 次にサイドバーの位置を決めます。 サイドバーとはファイルの管理をするメニューの事
Panic のブログに「Top 20 Secrets of Coda 2」 という記事があったので意訳してみました。Coda 1 の時からある機能も載っていましたが、それらもそのまま載せています。 別々のファイルを分割表示する方法 別々のファイルを分割表示する方法です。大きく分けて2つのやり方があります。 1. ウィンドウを分割した状態で、別のファイルをOption+ダブルクリック、またはパスバーにファイルをドラッグ&ドロップ。 HTML + CSS + ライブプレビュー 縦に3分割してHTML、CSS、プレビューを表示させると開発が楽です。 HTML、CSSどちらを修正しても自動でプレビューが更新されます。 サイトをグループで管理可能 iPhone のホーム画面のようにサイトをグループで管理できます。 タブをアイコンではなくてテキストで表示 タブバーの下をドラッグするか右クリックから「テ
6. import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http:// sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' Su
Posted 7月 2nd, 2011 by codechord. 1 Comment Tweet Tweet コーディング時のエディタは何をつかっていますか?最近Vimでのコーディングが気になりだしています。 Vimをプラグインなどでカスタマイズしまくると、かゆいところに手が届くすばらしいエディタになるとのことで。でも覚えるのが大変。。。 コーディングを早くするコツ。 なぜ、Vimが優れているかといわれると。数少ないキータッチのコマンドで、あっと驚くようなことができてしまうということ。ですよね? つまり、Vimに限らず、エディタの便利なコマンドを頭に叩き込めば、早くコーディングできるという逆転の発想です。 コーディングにかぎらず、PCのアプリケーションを使う作業は、ショートカットを覚えた数が、作業のスピードに比例すると自分は思っています。 ということで、CodaとZen-Codingのシ
cmd+E:選択文字を検索 cmd+G:次を検索 cmd+shif+G:前を検索 cmd+}:次のタブ cmd+{:前のタブ cmd+↑:ページ先頭に移動 cmd+↓:ページ末尾に移動 ctrl+A:行先頭へ移動 cmd+enter:文章途中にカーソルあっても行末で改行 cmd+shift+enter:文末に;を付けて改行 Esc:入力補完を表示したり消したり cmd+]:インデント挿入 cmd+[:インデント削除 cmd+ctrl+B:ファイルブラウザを隠すor表示 cmd+ctrl+S:新規分割ウインドウを開く ctrl+K:行削除 ctrl+T:カーソル前後の文字を入れ替え ctrl+U:行を下にコピー ctrl+W:単語選択 ctrl+shift+→:カーソルから右を選択 ctrl+shift+→:カーソルから左を選択 cmd+opt+.:タグを閉じる ※9/11追記 ※2009/
いろいろなエディタ環境を触ってみて、結果的にcoda(時々dreamweaver)に行き着いたわけですが、今回は自分好みのカスタマイズにするためのメモをしておこうと思います。 1.Codaのダウンロード パニック・ジャパン – Coda – Mac OS X 用 シングルウインドウ Web 構築環境 2.CodaにWordpressのシンタックスモードを入れる プラグインはこちらからダウンロードする。「WordPress Mode » Pradador.com」 ダウンロードし、回答して出来た「WordPress.mode」のフォルダ丸ごとを 「/Users/ユーザー名/Library/Application Support/Coda/Modes」にコピーする。 3.Zencodingを入れる プラグインはこちらからダウンロードする。「TEA for Coda | One Crayon」
Coda 2 が5月24日の0時に発売され、「本日限り半額(App Storeで ¥4,300)」ということで、発売直後から Twitter でだいぶ盛り上がってましたね。 私もせっかくなので、半額のうちに買いました。 最近はスクールの準備でちょっと忙しいし、レビューは後日でもいいかなーと思ってたところ Webクリエイターボックス の Mana さんに下記のように脅されたため、泣きながらこの記事を書きました。 @stocker_jp 皆がCoda2のレビュー書かないのは、本日中にナツキさんがうpするレビュー記事を見てから購入予定だからですよ :) ホレホレ…ン? — Manaさん (@chibimana) 5月 24, 2012 結論から言うと、Coda 2 はかなり気に入りました。 これは、特に CSS 書くのが速くなるのではないでしょうか。 実は私は Coda は体験版しか使ったことが
ちょっと前からメインのエディターをCodaにしてみました。 Codaの日本語ドキュメントはまだまだ少ない印象がありますが、サードパーティプラグインに着目してみるとそこそこ充実しているようです。 そこでCodaのプラグインの中でほんの一部ですが、使えそうなものを紹介します(アルファベット順)。 last modified(プラグインの追記) ‐ 2012年4月14日 update ‐ 2012年5月24日 Coda 2で標準機能として組み込まれたものもあるようです。 常用中のプラグイン Bookmarker Codaのコードナビゲータにブックマークとして認識されるコメントアウトができるようになります。 ショートカットはcommand + shift + K。 Coda PHP & Web Toolkit PHPの構文の検証 PHP、HTML、CSSのコードフォーマット(プラグイン独自の環境設
僕は Subversion やら Trac やら Git やら、そもそもバージョン管理ってのが良くわかっていないのですが、そんな僕でも Coda を使って Mac のローカルでバージョン管理をする環境が作れたよっていうお話です。 僕は、Movable Type のプラグインやWebサイトを制作をするときに、これまでは nori さんの『CodaとGoogle Codeで始めるプロジェクトのバージョン管理 :: 5509(+1)』を参考にして 「Google Code」を使ってバージョン管理の真似事をやっていました。公開したくないものについては「どこでもプロジェクト管理バックログ」のフリープランを使っていたりもしました。 しかし、僕の場合、電車などの移動中にコードを書くことが多々あるのですが、イーモバイルなども持っていないので、できればオフラインでバージョン管理ができればいいなーと思っていた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く