Web周りの便利なマクロを一気に整える
今週はひたすらWeb開発に勤しみお勉強してます。
前回更新からできたものをこちらにもアップします。
個人スペースリニューアルしました
CSSの勉強を兼ねて、放置していた個人スペースをリニューアルしました。
左上のロゴマークは結構凝って作ったのですが、それ以外がどうしても雑ですね。
少しずつWebデザインも勉強していきたいところです。
ちょっとしたAPIをつくりました
http://manji602.com/api/sta2addr/
今週後半でつくろうと思っているアプリに使おうと思って作りました。
日本の駅名から緯度・経度・住所などをとってきてくれるAPIです。
PHPのGET引数で駅名などを渡し、結果をJSONで返してくれます。
さて、今日の本題に入ります。
今日は、emacsでCSS・HTML・PHPを編集する上で便利なマクロを登録したので、それについて書こうと思います。
OSは、Mac OS X Snow Leopardです。
環境まわりについて
通っていない場合は、.emacsに以下の記述を追加してください。
(add-to-list 'load-path "/usr/local/share/emacs/site-lisp")
基本的に、下記の.elファイルはダウンロードしたらsite-lispフォルダへ置いてください。
CSSマクロ 'css-mode'の導入
.emacsの設定
(autoload 'css-mode "css-mode") (setq auto-mode-alist (cons '("\\.css\\'" . css-mode)auto-mode-alist)) ;;tab's width=2 (setq cssm-indent-level 2) ;; indent is C style (setq cssm-indent-function #'cssm-c-style-indenter)
HTMLマクロ 'html-helper-mode'の導入
本体URL
html-helper-mode.el:http://www.santafe.edu/~nelson/tools/html-helper-mode.el
tempo.el:http://www.santafe.edu/~nelson/tools/tempo.el
html-font.el:http://www.nbi.dk/TOOLS/emacs/lisp/html-font.el
.emacsの設定
;;setting if html-helper-mode (add-to-list 'load-path "/usr/local/share/emacs/site-lisp") (add-hook 'html-helper-load-hook '(lambda() (require 'html-font))) (autoload 'html-helper-mode "html-helper-mode" "Yay HTML" t) (setq auto-mode-alist (append '(("\\.html$" . html-helper-mode) ("\\.shtml$" . html-helper-mode) ) auto-mode-alist))
Yay HTMLの意味が分からないのですが、誰か詳しい人教えてください。
イェイ！ってあれなんですか？ｗ
html-helper-mode入れとくと、htmlファイルを新規作成するときに、自動でやら
PHPマクロ 'php-modeとmmm-mode'の導入
本体URL
php-mode:http://sourceforge.net/projects/php-mode/
mmm-mode:http://sourceforge.net/projects/mmm-mode/
諸準備
emacsでM-x byte-compile-fileと打つと、ターゲットを聞かれるので、/usr/local/share/emacs/site-lisp/php-mode.elとうつとコンパイルしてくれます。
ただし、場合によってはpermissionがうんぬん言われコンパイルができない場合があるので、そういう場合はターミナルでsudo emacsと打ってください。
- css-modeのインストール
ダウンロードしたら、解凍して.configure->make->make installしてください。できたファイル一式をsite-lispフォルダにコピーします。
.emacsの設定
(add-to-list 'load-path "~/.emacs.d/plugins/mmm-mode") (require 'mmm-mode) (setq mmm-global-mode 'maybe) ;;(set-face-background 'mmm-default-submode-face nil) ;;for php-mode in html-helper-mode (mmm-add-mode-ext-class nil "\\.php$'" 'html-php) (mmm-add-classes '((html-php :submode php-mode :front "<\\?\\(php\\)?" :back "\\?>"))) ;;(add-to-list 'auto-mode-alist '("\\.php$" . html-helper-mode))
phpファイルを読み込んだ時、に囲まれた部分はphp-mode.elで処理をし、それ以外のhtmlの部分はhtml-helper-modeで扱うようにします。
今回の記事は以上になります。
これらを導入して、かなり開発環境が整いましたね。
