Skip to content

JACO-BASS » 制作

ひとに寄り添うデザインの追求

Home » Blog » 制作

Emacs でつくる JavaScript と ActionScript の環境

第7回のウェブテコで発表したネタです。スライドを用意しなかったので、今回はブログの記事として書きます。

Emacs の JavaScript のメジャーモード。

emacs-js2-mode

Emacs では、特定のファイルを編集する場合、それに特化したメジャーモードを使うことで、編集をより便利に行なうことができます。
JavaScript を編集するためのメジャーモードは、以下のものが代表的です。

最近、人気なのは js2-mode の方で、こちらは Java で書かれた JavaScript パーサのRhinoが移植されており、リアルタイムの構文チェックが行なわれるところが他のモードとの大きな違いです。

ただし、非力なマシンであれば、動作が重いかもしれないので、そう感じる人は、javascript-mode を利用しているようです。

js2-mode のインストール

Emacs に Elisp をインストールするための基本的な設定などは、Emacs ビギナーに贈る、これからバリバリ使い隊!!人のための設定講座 その1。を参考にして下さい。

まず、Google Code の js2-mode のサイトからjs2-20080616a.elをダウンロードして、js2.el とリネームしてあなたの Emacs のロードパスであるフォルダに置きます。

続いて、Emacs を起動して、js2.el をバイトコンパイルします。js2-mode はバイトコンパイルしないと動作しないので、この作業は必須となります。

M-x byte-compile-file というコマンドを実行します。M-x というのは、Meta キーを押しながら x のことですが、通常メタキーは Alt になっていますので、Alt + x を押します。すると、Emacs 下部のミニバッファーでコマンドをタイプできますので、byte-compile-file とタイプしてエンターを押して下さい。

ファイルを尋ねられますので、js2.el を指定してエンタを押しましょう。ちなみに、ミニバッファー上では、TAB キーで補完が可能ですので、全てを直にタイプする必要はありません。

バイトコンパイルが実行されると、様々なファイルが生成されますので、終了するまで待ちます。

終了して入力が可能になれば、M-x js2-mode というコマンドを実行すると、js2-mode が起動しますが、いちいちコマンドを実行するのは面倒なので、あなたの Emacs の設定ファイル (おそらく .emacs でしょう)を開き、以下の設定を追加して下さい。

PLAIN TEXT
LISP:
  1. ;; js2-mode
  2. (autoload 'js2-mode "js2" nil t)
  3. (add-to-list 'auto-mode-alist '("\.js$" . js2-mode))

これを行末で C-x C-e で評価するか、もしくは Emacs を再起動すると .js の拡張子のファイルを開いたとき、自動的に js2-mode で編集できるようになります。

JavaScript Lint を利用して構文チェックをより厳しくする

flymake-mode を利用したときのスクリーンショット

Rhino による構文チェックも便利ですが、より厳しくチェックしたい人は、JavaScript Lint を導入しましょう。

JavaScript Lint - あどけない話に詳しい使い方がまとめられているので、js2-mode を使う場合の設定だけ書いておきます。

PLAIN TEXT
LISP:
  1. (when (and (require 'flymake nil t))
  2.   (setq flymake-jsl-mode-map 'js2-mode-map)
  3.   (add-hook 'js2-mode-hook
  4.             (lambda ()
  5.               (require 'flymake-jsl)
  6.               (setq flymake-check-was-interrupted t)
  7.               ;; (flymake-mode t) ; 起動時に flymake-mode をオンにしたい場合はコメントアウトする
  8.               )))

上記の記事の flymake-jsl.el を利用していますので、必ずロードパスにインストールしておきましょう。

js2-mode の時と同様に、再起動した後、JavaScript ファイルを開いて、M-x flymake-mode するとシンタックスチェックがかかります。

PLAIN TEXT
LISP:
  1. (when (and (require 'flymake nil t))
  2.   (set-face-background 'flymake-errline "orange red")
  3.   (set-face-foreground 'flymake-errline "black")
  4.   (set-face-background 'flymake-warnline "yellow")
  5.   (set-face-foreground 'flymake-warnline "black"))

色が見にくい場合は、僕の設定を利用するか、参考にして変更して下さい。

Emacs の ActionScript のメジャーモード

as3-mode の表示

続いて、ActionScript のモードですが、主なものに以下の2つがあります。

導入のしやすさは、actionscript-mode の方が簡単で、Elisp をロードパスに配置して読み込むだけで利用できます。

as3-mode は、flyparse-mode を利用したパーサーを使用する仕組みとなっており、構文チェックが可能な分、actionscript-mode よりも高性能なのですが、導入がすこし面倒です。

actionscript-mode はactionscript-mode.elをダウンロードして、ロードパスに置いて、

PLAIN TEXT
LISP:
  1. (when (require 'actionscript-mode nil t)
  2.   (setq auto-mode-alist
  3.         (cons '("\.as\'" . actionscript-mode) auto-mode-alist))

とすれば良いでしょう。

as3-mode のインストール

as3-mode のインストールについては調べてみたところ、日本語の記事がなかったので、しっかりと紹介しておきます。

まず、flyparse-modeをダウンロードします。

flyparse-mode は、Java で書かれたパーサを利用して、ActionScript と JavaScript と CSS をパースすることができます。ただし、利用するためには lib フォルダにある flyparse-parsers.jar と antlr-runtime-3.1.jar の場所を CLASSPATH に追加してあげる必要があります。

Emacs で CLASSPATH を設定するには setenv 関数を使います。.emacs に CLASSPATH を追加しましょう。

PLAIN TEXT
LISP:
  1. (setenv "CLASSPATH" (concat
  2.         "/Users/tomoya/projects/flyparse-mode/lib/flyparse-parsers.jar:/Users/tomoya/projects/flyparse-mode/lib/antlr-runtime-3.1.jar"))

僕の場合は、このようになります。

続いて、flyparse-mode.el をロードパスに追加します。

今度は as3-mode をダウンロードして、as3-mode.el と fdb.el をロードパスに追加します。

そして .emacs に

PLAIN TEXT
LISP:
  1. (when (require 'as3-mode nil t)
  2.   (setq auto-mode-alist
  3.         (cons '("\.as\'" . as3-mode) auto-mode-alist))
  4.  
  5.   (add-hook 'as3-mode-hook
  6.             '(lambda ()
  7.                (define-key as3-mode-map (kbd "C-c t f") 'flyparse-toggle-debug-overlays)
  8.                (require 'flymake-as3)
  9.                (setq flymake-check-was-interrupted t))
  10.             ))

という設定を書きます。再起動すると、.as の拡張子のファイルを開くと自動的に as3-mode が起動します。

M-x flyparse-toggle-debug-overlays を実行するか、C-c t f (コントロールを押しながら c を押し、コントロールを離して t f を続けて)を押すと、視覚的な構文チェックが実行されます。オフにしたいときは、同じコマンドを実行します。

flyparse-mode の flyparse-toggle-debug-overlays 実行時のスクリーンショット

まとめ

この他にも、auto-complete.elなどを使うことで、開発効率が促進されること間違いないでしょう。

長くなりましたが、Emacs で JavaScript や ActionScript を書く人の参考になれば嬉しいです。

コメント（2） | Permalink | Trackback URL

この記事のタグ

関連記事

第3回ウェブテコ「Microformats 入門」のスライド

12月7日に行なわれた、第3回ウェブテコで発表した、「Microformats 入門」というプレゼンのスライドPDFを公開します。

尚、公開に際して、誤字の修正と、スライドの最後に Appendix としてリンク集を付け加えました。

ですので、解説なしでも、それなりに分かりやすい感じになっているかと思います。

Download
hello-microformats.pdf (1.1 MB)
発表タイトル
Microformats 入門
ライセンス
Creative Commons License Creative Commons 表示-継承 2.1 日本 License

今回は、どんどん実例紹介をしていくか、ひたすらコードを紹介するか悩んだのですが、全体を俯瞰してもらうよりも、実際のコード例を見てもらった方が理解が早いかなと思い、終盤までひたすらマイクロフォーマットとそのプロパティの紹介とコードサンプルをお見せして、解説し続けました。

聞きづらかったかと思いますが、みなさん最後までおつきあい頂いて、本当にありがとうございました。
また、北方さんどうもありがとうございました。

他の発表者のスライドも北方さんのブログに纏められておりますので、どうぞ :-)

コメント（0） | Permalink | Trackback URL

この記事のタグ

関連記事

第2回ウェブテコ発表時の資料。

11月2日に行なわれた、第2回ウェブテコで発表した、「IEのため」だけじゃないCSS対策。というプレゼンのスライドPDFを公開します。

Download
not-only-ie-but-also-css.pdf (1.3 MB)
発表タイトル
「IEのため」だけじゃないCSS対策。
ライセンス
Creative Commons License Creative Commons 表示-継承 2.1 日本 License

あと、前回のスライドもリクエストがあったので、ようやく公開しておきますね。
AutoPagerizeに対応して、もっと便利なサイトにしよう。こちらはHTMLです。
Tempa Playground : ウェブテコ第2回終了の方に他の発表者の資料のまとめがありますので、ご覧下さいませ :-)

コメント（0） | Permalink | Trackback URL

この記事のタグ

関連記事

経験と応用

とある案件で子どもをモデルにした撮影に臨む機会がありました。

以前、取材モノの撮影の際に、カメラマンとインタビュアーの役割を明確に分けておかなかったせいで、写真もインタビューも焦点がぼやけた中途半端な仕事になってしまった、という失敗談を記事にしたことがあります。

その時に、取材モノの撮影においては役割を分担して、それぞれの役割に専念して撮影に臨む必要があると学びました。

今回は取材モノではなく、モデル撮影でしたが、そのモデルの機嫌・表情一つで良い写真にも悪い写真にもなりますから、事前にモデルをリラックスさせて楽しませるような仕掛けが必要だと考えました。そこで中村は、自身はカメラマンに徹して、メンバーであるtokoに“子どもと遊ぶ役”として撮影に参加してもらうことにしました。

何故tokoなのかと言うと、実は彼女には大学時代、大道芸サークルに所属し、多くのステージで観客を楽しませてきたという経歴があります。幼稚園や子どもの沢山いる場所でのステージもあったでしょう。その経験を見込んでtokoに撮影に協力してくれるよう頼んだのです。

その申し出を快く引き受けてくれた彼女は、当日レパートリーの中から、分かりやすくて手軽にできるバルーンアートを現場でモデルのお子さんに見せてくれました。

最初は緊張していたモデルも、バルーンアートを目の前でやって見せて、できたものをプレゼントするとちょっとづつ緊張も和らいで、最後には「もっとつくって！」と撮影そっちのけで、バルーンアートをおねだりしていました。（これはこれでちょっと困りましたが…）結果、望んだ写真を撮ることができ撮影は成功に終わりました。

撮影の前から、子どもがモデルということで、「お菓子を用意しよう」とか「オモチャもいるだろう」とか、いつもより気を遣っていましたが、tokoのパフォーマンスがやはり一番重要だったように思います。彼女がいなければ撮影は失敗してかもしれません。本当に感謝！です。

大学時代にやっていたこと、しかも一見、広告やデザインとはかけ離れた印象のある大道芸が、仕事の鍵を握ったりしちゃうんですね。経験はどこでどう活きるかわからないもんだなぁとつくづく感心するとともに、それをきちんと応用できる能力も育てないと駄目だなぁと感じます。

コメント（0） | Permalink | Trackback URL

この記事のタグ

関連記事

今時の WordPress サイト構築法 (スタイル編)

今回は、僕のスタイル編集について紹介します。前回の今時の WordPress サイト構築法 (テンプレート編)の続きですので、併せて読むと理解しやすいかもしれません。

まず、WordPress のテーマでは、テーマフォルダのstyle.cssというファイルにスタイルを記述するのが基本です。Sandbox では、構造をそのまま使えるのであれば、miyoshiさんの記事に書かれてあるように、テンプレートの継承を利用して、テーマを作成する方が望ましいのですが、商用サイトを作る場合は、どうしても構造を変更してしまう事がほとんどです。

ですので、あくまでベストの方法ではなく、僕の方法であるという事だけ先に述べておきます。

スタイル編集の下準備

では、先ずはディレクトリ構造を説明します。sandbox ディレクトリの中に、以下のディレクトリを作成します。

  • css - CSS ファイルを格納します
  • img - サイトデザインで使用する画像を格納します
  • js - サイトデザインで使用する JavaScript ファイルを格納します

よくある形ですが、この様なディレクトリを作成します。
そして、style.css には、

PLAIN TEXT
CSS:
  1. @import url("./css/default.css"); /* defalt style CSS */
  2. @import url("./css/reset.css"); /* browser default style resetting CSS */
  3. @import url("./css/hack.css"); /* CSS filters and browser specific CSS */
  4. @import url("./css/fonts.css"); /* YUI fonts CSS */

この様に記述しています。つまり、4つの CSS ファイルをインポートし、かつ古いブラウザには、クラッシュを防ぐために CSS を読み込ませないようにしています。

楽に、厳格に、そして未来を見据えてた CSS 管理

さて、4つのCSSですが、基本となるスタイルは default.css に記述します。これは、ブラウザによる差異を気にせず、CSS の仕様に従った正しいCSSを書きます。

次に、reset.css は、Eric Meyer氏の方法を参考に、多少手を加えたものを使っています。1ピクセルのずれも許せないWebデザイナのためにResetting Againという記事でも紹介されていますが、ブラウザ毎の特有のスタイルの差を取り除いてくれます。

hack.css は、ブラウザ独自のCSSバグを潰す為のCSSです。これについては、詳しく後述しますが、正しいスタイルとバグを潰す為のCSSを分けているのは、管理を容易にするのと、恒久的に正しく表示される様にする為です。

最後に font.css ですが、これは、YUI の Font CSS を利用させてもらっています。デザインによっては、px 単位でフォントサイズを指定する事も仕方ない場合がありますが、基本的には、フォントサイズを指定したくはありません。なので、折衷案として、font.css でブラウザ毎のサイズの差を無くして、%指定しようという方針です。

If you want this size in pixels (px) Declare this percent (%)
10 77
11 85
12 93 (was 93)
13 100
14 108 (was 107)
15 116 (was 114)
16 123.1 (was 122)
17 131 (was 129)
18 138.5 (was 136)
19 146.5 (was 144)
20 153.9 (was 152)
21 161.6 (was 159)
22 167
23 174
24 182
25 189
26 197

この表にあるように、YUI Font CSS を利用すると、100% で 13px になります。

ブラウザのCSSバグを潰す方法

CSS のブラウザ毎のバグを潰すのに、僕はCSS Browser Selectorを利用しています。これは、JavaScript でブラウザの判別を行ない、HTML の html 要素に、ブラウザやOSの名前のclassを埋め込んでくれるというものです。

例えば、Mac で Opera9 を使っている場合だと、class="opera opera9 mac js" となります。

default.css にこのように記述していているが、

PLAIN TEXT
CSS:
  1. div.post {
  2.   margin: 0 40px;
  3. }
  4. div#container {
  5.   margin: 20px 0 0 0; padding: 0;
  6. }

IE6 や IE7 のCSS解釈のバグで、ズレが生じた場合、hack.css に

PLAIN TEXT
CSS:
  1. .ie6 div.post {
  2.   margin: 0 20px;
  3. }
  4. .ie7 div#container {
  5.   margin: 0; padding: 20px 0 0 0;
  6. }

頭に .ie6 (もちろん html.ie6 でも良い) の様に記述する事によって、CSS 優先度の関係で、IE6 であれば、 .ie6 に書かれた内容に、IE7 であれば .ie7 に書かれた内容で default.css に記述されたスタイルを上書きしてくれるのです。

覚えておきたいテンプレートタグ

独自のJavaScriptを読み込む場合は、header.php にファイルパスを指定して読み込むのですが、ドメインを変更した場合でも一々修正せずに済むように、WPのテンプレートタグを使います。

PLAIN TEXT
PHP:
  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/css_browser_selector.js"></script>

bloginfo('stylesheet_directory') は、使用しているテーマのディレクトリまでのパスを補完してくれます。

サイト画像も img タグで埋込む場合は、このテンプレートタグを利用した方が管理が楽になるでしょう。

同様の理由で、css で背景画像などを読み込む場合は、相対パスを使って指定するのが望ましいです。

PLAIN TEXT
CSS:
  1. div#header {
  2.   background: transparent url("../img/header.gif") center top no-repeat scroll;
  3.   color: #fff;
  4. }

の様に指定します。

まとめ

スタイルの編集やその管理については、色々な方法がありますが、多人数ではなく一人で管理する場合だと、これくらいが丁度良いと考えています。

大人数であれば、Subversion を利用するなどのバージョン管理を行ったり、CSS を更にモジュール毎に細分化したりなどが必要かもしれません。

さて、次回はどうするかまだ決ってませんが、プラグインあたりについてでも書こうかと思っています。ここを読んでくれている方で、何かリクエストがあればお気軽にお寄せ下さい。

コメント（0） | Permalink | Trackback URL

この記事のタグ

関連記事

カテゴリー

back to top