Webプログラマの夏休み PHPでNゲージ模型を自由自在に動かそう[動画つき]

第4回 レイアウトエディタ作りました

この記事を読むのに必要な時間:およそ 5 分

さっそくですが,前回予告したレイアウトエディタです。Webでレイアウトを入力するということで,ちょっとがんばって,いわゆるAjaxライクなシステムにしてみました。組込みが好きな方には申しわけないのですが,今回はあまり組込みの話は出てきません。

では,まずこれを使ってレイアウトを入力してみましょう。

インストール

動作条件ですが,シミュレータと同じで,PHP4またはPHP5と,gdライブラリが必要です。また,今回はブラウザ側がJavaScriptとSVGをサポートしている必要があります。当方では,FirefoxとOperaで動作を確認しています。

最初に,レイアウトエディタのファイルを以下からダウンロードしてください。

前回のシミュレータと同様,ダウンロード,解凍したeditrail.phpとrailconf.txtをWebサーバからアクセスできるディレクトリに置きます。入力途中の情報が,raliconf.txtに書き込まれていきますので,chmod a+rw railconf.txtなどとして,railconf.txtにWebサーバから書き込めるように設定します。

次に,editrail.phpの先頭にある$urlを,WebサーバにアクセスするときのURLと同じになるように設定します(これは,POSTを受け取ったときにLocation:でリダイレクトさせ,履歴の問題を回避するのに使用しています)。

シミュレータも使用する場合は,simrail.phpを同じディレクトリに置くと,railconf.txtが共有されますので,作成したレイアウトをすぐにシミュレートすることができます。ただし,このときrailconf.txtがシミュレータによって書き換えられてしまいますので,よく理解した上で使用してください。

editrail.phpをブラウザから開いて,レイアウト画面が表示されれば,インストールは成功です。

図1 レイアウトエディタの画面

図1 レイアウトエディタの画面

レールレイアウトを入力する

では,さっそくレイアウトを入力してみましょう。作るのは,第1回のときに使用した以下のレイアウトです。あらかじめrailconf.txtをエディタで開いて,内容を空にしておいてください。

図2 作成するレイアウト

図2 作成するレイアウト

レイアウトエディタは画面の左側がツールバーになっています。いちばん上の行にある2つのツールのうち,左側が選択ツールです。起動したときはこちらが選択されています。

図3 レイアウトエディタのツールバー

図3 レイアウトエディタのツールバー

レールを入力するときは,右側のレールツールを使用します。まず,右下の直線部分を入力してみましょう。以下のように操作してください。

  1. レールツールをクリックします。
    →レールツールが選択されます。
  2. 画面右側のレイアウトエリアで,ドラッグ操作をします。
    →入力したレールが表示されます。

入力したいレールの始点から終点までドラッグすると,レールが入力されます。向きがありますので,注意してください。今回の場合,右から左にドラッグします。入力した向きに矢が表示されますので,確認できます。

もしここでWebサーバのエラーが表示されてしまう場合は,ファイルの書き込みが可能であるか,$urlの設定が正しいかどうかを確認してください。また,ドラッグしたときにラバーバンドが表示されない場合は,ブラウザがSVGやJavaScriptをサポートしていない可能性があります。エラーコンソールなどを開いて,エラーが出ていないかを確認してみてください。

配線

使用しているコントローラには回路が14組あり,これをレールに配線して使っています。どの番号の回路をつなぐかを,ツールバーの左側にある給電パレットで選択します。「00」などの数字をクリックしてからレールを入力すると,その「00」に接続されたレールが入力されます。さきほど入力したレールは,初期状態の「00」になっているはずです。

では,左側の半円部分を入力してみましょう。このレールにつなぐのは3番の回路ですので,「03」のところをクリックしてから入力します。

  1. レールツールをクリックします。
    →レールツールが選択されます。
  2. 「03」をクリックします。
    「03」が選択されます。
  3. レイアウトエリアでドラッグ操作を行います。
    →レールが入力されます。

このレイアウトエディタでは直線しか入力できませんので,半円は直線の並びとして入力する必要があります。直線どうしは端点が一致していれば,シミュレーション時につながっているものとみなされます。

ところで,このままではどのレールが何番か見分けがつきませんね。こんなときは,「03」の横にある「+」のスイッチをクリックするとレールに給電が行われ,その番号のレールの色が変わります。クリックするたびに「A」(オフ:白)「D」(プラス:赤)「d」(マイナス:青)と切り替わり,レールにも色がついて確認できるようになっています。なお,(マイナス)のときだけは,レールの矢の向きが反対になりますので,給電パターンから車両の走行方向を読み取れるようになっています。

入力後に変更するには?

すでに入力したレールの属性を変更することも可能です。ツールバーの選択ツールをクリックし,変更したいレールをクリックします。このとき,選択されたレールに接続されている回路が,給電パレットに表示されます。

この状態で「00」「01」などをクリックすると,選択されたレールの回路を変更することができます。複数のレールを一度に変更するには,レイアウトエリアでドラッグ操作を行うと,ドラッグ枠の中に入ったレールがすべて選択されますので,この状態で給電パレットをクリックします。

レールを選択したあと,選択枠をドラッグすることでレールを移動することもできます。また,レールを1つだけ選択したときはレールの始点と終点に変形ハンドルが表示されますので,これをドラッグすることでレールの形を変えることができます。

選択ツールの下にあるのは,削除ツールです。これをクリックすると,選択したレールを削除することができます。

著者プロフィール

木元峰之(きもとみねゆき)

独立系ソフトハウスに8年間勤務,パッケージソフトの開発や記事執筆などを行う。現在はフリーのコンサルタント。SWESTなどのワークショップで分科会のコーディネータを務める。デジタル回路設計歴30年,プログラミング歴27年。

きもと特急電子設計
URL:http://business.pa-i.org/

コメント

コメントの記入