Web / スクリプト系の開発でも統合環境を使う

ぼくはお仕事では PHP とかはかきませんが、趣味で書くときはふだん仕事でつかっているようなツールをつかってかいています。

インターネットをみると、いわゆる Web 屋さんの方はあまりこのような環境をつかっていないみたいですが、ぼくらソフト屋さんのテキストファイル編集ノウハウは割と HTML とか CSS とか PHP にも転用可能じゃないかとと思い、ここに紹介してみます。 🙂

ソースコードを集中してかくときの、ぼくの勘所は、

  • OS のファイルシステムを意識しないこと。
  • シンタックスを機械的に間違えないようにすること。

です。 他のものが見えないようにすること、ミスを少なくすることで効率をあげます。

まー、ツールはなんでもいいとおもいますが、ぼくが普段つかっている Eclipse で紹介します。 いわゆる統合環境ってやつです。

実は Dreamweaver とかでもできるのかな、ともおもいつつ。 とりあえず、以下の環境は Windows/Mac/Linux で動作して、フリーでそろえることができます。

外見はこんな感じ。

webeclipse01

ビューの並びとかは好きにできるのですが、左にそのプロジェクトのファイル集団。 右にソースコードとするのが一般的です。 これは逆にするひともいますね。 これで、OS のファイルシステムから必要な部分だけを見えるようにします。 ソース修正中に、システムファイルなんかみちゃだめです。

ファイルの数が増えてくると、さらにそのほかのファイルをみたくないときがあります。 たとえば WordPress でいえばテーマをつくっているときとか。 テーマのディレクトリさえみれればOKです。

webeclipse03 

そういうときは、該当フォルダを右クリックして「次へジャンプ」。

webeclipse04

左は自分の作っているテーマのファイルだけになりました。 これで集中できます。

こうやってテキストファイルを編集していくわけですが、人間には間違えがつきもの。 間違って大事な部分けしちまったーとか、まちがってファイル上書きしちゃったーとか。 間違えはしょうがないけど、お客さんは待ってくれません(笑)

そんなことも統合環境にまかせておきましょう。 たとえば、Eclipse の場合は、バージョン管理システムなんかつかわずとも、勝手にある程度保存履歴をとっておいてくれます。

 webeclipse19

ちょっと小さくてわかりずらいですが、下のヒストリーペインがローカルの保存履歴。 保存した時間がでています。 ここに残っているものはいつでも戻すことができ、保存のたびに勝手に履歴をとってくれます。 また、保存単位でのファイル比較(diff)も可能で、上の絵のようにどこが変わっているのかを表示させることもできます。

では次はコード保管とシンタックス。 手で書いたら間違うようなことは、やってもらいましょう。 たとえば、CSS。

webeclipse05

これは普通のテキストエディタでもできるのありますが、コード保管です。 Eclipse の Aptana プラグインによる機能。 IE/Firefox の対応具合とかもだしてくれます。

また、41 行目をみると×印がついているとおもいますが、これがリアルタイムシンタックスチェックです。 CSS に間違えがあるとエラーを申告してくれます。 いまは書きかけで、CSS が成立していないのででているわけです。 まさにリアルタイム。

ブラウザってやつは、エラーに寛容なので、逆に意図せぬ寛容さ具合でうまく動作しないことがあって、無言の不具合ほど解析が難しいものはない。 ってなわけで、そういうのを未然に防ぐことができます。

同じように PHP のシンタックスチェックの例。

webeclipse07

これまた、小さくて分かりづらいですが、 53行目でセミコロンを忘れています。 忘れたまま続きのコードを書いた瞬間に、エラー申告がでてくれます。 ソース中の赤い部分と下のペインに出力されています。

これがない環境の場合、ブラウザで動かしてみてエラーがでてやっとわかることになりますので、非常に効率が悪いです。 リアルタイムシンタックスができる環境では、シンタックスエラーに関しては動作前からバグフリーとなります。

では、セミコロンをなおして・・・、と。

webeclipse08

ありゃ、こんどはワーニングでちゃいました。(黄色) いわゆる変数の未初期化ワーニング。

PHP などのスクリプト言語は変数の宣言なしに新しい変数を使うことができます。 これは、同時に変数名をスペルミスしても動作するというのと同意。 そして、スペルミスした変数の中身は"空"です。 意図せぬ値がはいったプログラムは当然うまく動きません。

というわけで、こういったいきなり出現した変数を申告してくれて注意を促してくれます。 スクリプト系の言語でプログラム書くならこれ必須じゃないかなーっておもうくらいの機能です。

というわけで、まだまだ統合環境には便利な機能があるわけですが、今回はこの辺で・・・。

特に下のほうに書いたソースのリアルタイムチェック系は、高度な構文解析がひつようなため、一般的なテキストエディタではできないことがほとんどだとおもいます。

このため、一般的に統合環境の動作はそれほど速くありませんが、1日作業くらいまでいくのであれば、全体的な作業時間を考えたら間違いなく効率はよくります。 よければおためしください。 🙂

XBMC を使ってリビングでマルチメディア再生

NAS やら PC やらにいれた MP3 や動画ファイルを、リビングのコンポやテレビにもってくることを昔からやっていて、PC を直接テレビにつないで見たり、MediaWiz 買ってみたりしてみていたのですが、数年前からは "初代"XBOX の XBMC を使っています。

いろいろ使ってみましたが、XBMC はどう考えてもこの手の STB 中最強性能。 さきほど久しぶりにオフィシャルのページをみたら、なんと Windows / Mac / Linux に移植開始の模様! Linux に関しては既に動作始めているようです。 🙂

XBMC //

XBMC (formerly named "XBox Media Center") is a free and open source (GPL) media-player and entertainment hub. XBMC can play a very complete spectrum of of multimedia formats, and featuring playlist, audio visualizations, slideshow, and weather forecast functions, together with a multitude of third-party plugins. Originally developed as XBox Media Player (XBMP) for the first-generation Xbox game console in 2002, XBMC have eventually become a complete graphical user interface replacement for the original Xbox Dashboard, and it is currently also being ported to run natively under Linux, Mac OS X, and Microsoft Windows operating-system. This, The XBMC Project is also known as "XBMC Media Center" or simply "XBMC").

STB として、XBOX で動作させる XBMC は、

  • 元はゲーム機なので、テレビに映すことに関しては一流。 超高級RAMDACと、フリッカーフィルターは他の STB の追随を許さない高品質。
  • PentiumIII、GeForece 搭載という STB らしからぬ高スペックハード。
  • なんといっても、2秒で起動する。 🙂

という感じなのですが、この高級なプラットフォーム上で作られた UI は華麗で、またちゃんと実用している人がつくっているため、使い勝手もすばらしいです。

正直、これをみてしまうと他の STB とか 360/PS3 のメディア再生機能なんか、ほんと使って作っているのか?ってかんぐるくらい貧弱だと思ってしまいます。。

てなかんじで、UI も機能もすごいので、他のプラットフォームに移植されるというのはとても面白そうです。 メーカ製のメディアセンターって商売っけがありすぎて、どうもすきになれず、なのです。

まずは、起動画面。 当然 16:9 対応であります。 ちなみに、初代XBOX は当時から 16:9 対応ゲームがおおいっす。 PS2 もグランツーとか一部は対応でしたか。

画面はスキンでいろいろかえれるのですが、とりあえずデフォルト。

xbmc01

XBMC おそるべしのひとつ。 いろいろなサーバプロトコルに対応。 なので、普通に Windows のファイル共有を再生できたりします。 NAS にファイルいれておけばそれでOK。 iTunes サーバとかもみれるのかな。(やったことはない)

xbmc02 

音楽系の選択。 たくさーーん、ファイルあってもすばやくたどり着ける UI になっています。 もちろんリモコンもOK。

xbmc03

動画再生。 再生中もほかのことできて、小窓で再生とかもできます。 🙂

xbmc04

動画のアスペクト比率等やズームもボタン一発でいけます。

xbmc05

とにかくすごいです。 🙂

これを XBOX で動かすには、XBOX 本体のハックが必要で、

基板のハンダ付けと、PC/XBOX の

[tegaki]電源を入れたまま![/tegaki]

IDE のケーブルをスワップさせるという大技(笑)、その後も相当の苦難が待ち受けているので、万人にはおすすめできませんが、移植され PC で動くようになるとみんなが使えるようになりますね。(初代XBOX なんか安くうってると思うので、挑戦する価値は十分にありますが・・・)

最後に、XBMC on Linux の動画を youtube より。

あの、まだポーティング中だと思いますが、"あの" 3D UI が良く動いているのが見えますね。 楽しみです。 🙂