Website made with rich jQuery,Ajax & Perl,PHP
ジオステーション
Sponsor
タグ、変数の混在
[最終更新日:2011/01/29]
WEBで使用するPHPやPerlは、基本的にhtmlを出力します。 したがって、必然的にタグが多く含まれるわけですが、 言語が使用するクオート("や')がバッティングしてエラーになることがしばしばあります。 これを避けるため、タグ内のクオートの前にバックスラッシュ(日本では半角の¥マーク)を付けてエスケープするのですが、 これを忘れてしまって、またしてもエラーです。 何といっても¥マークだらけで何とも見づらい。 ここでは、このイライラを解消する方法をご紹介します。

$(this).corner("left");PHP

まずはPHPです。 PHPにはタグを出力するのに2つの方法が用意されています。 1つはechoまたはprintを使ってPHPスクリプト内からコマンドで出力する方法です。
  <?php
 $name    = "フジテレビ";
 $zip     = "135-0091";
 $address = "東京都港区台場";
 echo "<div style=\"font-size:14px\">
 放送局:$name<br />
 所在地:〒$zip<br />
 $address</div>";
 ?>  
このようになります。やはり「\」が不愉快ですね。
もう1つは、一度PHPから脱出する方法です。
  <?php
 $name    = "フジテレビ";
 $zip     = "135-0091";
 $address = "東京都港区台場";
 ?>
 <div style="font-size:14px">
 放送局:<?php echo $name?><br />
 所在地:〒<?php echo $zip?><br />
 <?php echo $address?></div>
  
「\」は無くなったのですが、今度はコードが長くなることと、 「\」の問題よりコードが読みにくくなってしまいました。 これらをすべて解消するのが以下の書式です。
  <?php
 $name    = "フジテレビ";
 $zip     = "135-0091";
 $address = "東京都港区台場";
 echo <<<_
 <div style="font-size:14px">
 放送局:$name<br />
 所在地:〒$zip<br />
 $address</div>
 _;
 ?>  
いかがですか? 「\」マークも無くなり、コードもシンプルです。 このサンプルは極端に短いですから効果は薄いかもしれませんが、実際のプログラミングで数千行になると効果は絶大です。 是非お試しください。

$(this).corner("left");Perl

Perlは出力にprintを使用します。
  #!/usr/bin/perl
 $name    = "フジテレビ";
 $zip     = "135-0091";
 $address = "東京都港区台場";
 print "Content-type:tex/html\n\n";
 print "<div style=\"font-size:14px\">
 放送局:$name<br />
 所在地:〒$zip<br />
 $address</div>";
  
これも「\」マークが不愉快ですね。 PHP同様に解消版が以下になります。
  #!/usr/bin/perl
 $name    = "フジテレビ";
 $zip     = "135-0091";
 $address = "東京都港区台場";
 print <<_;
 Content-type:tex/html; charset=UTF-8\n
 <div style="font-size:14px">
 放送局:$name<br />
 所在地:〒$zip<br />
 $address</div>
 _
  
PHPはechoコマンドの後に「<」が3個と_で、Perlはprintコマンドの後に「<」が2個と「_」に「;」が有ることにご注意ください。 どちらも先頭が「_」でPHP「;」の空行までは自由にタグと変数を置く事ができます。クオートも自由に使用可能です。

$(this).corner("left");JavaScript

ついでにjavascriptで複数行記述する方法もご紹介しておきましょう
  <script type="text/javascript">
 var name    = 'フジテレビ';
 var zip     = '135-0091';
 var address = '東京都港区台場';
 document.write('<div style=\"font-size:14px\">');
 document.write('放送局:'+name+'<br />');
 document.write('所在地:〒'+zip+'<br />');
 document.write(address+'</div>');
 </script>
  
PerlやPHPは、標準で複数行の記述をサポートしていますので、 少しの工夫である程度自由にコーディング可能ですが、javascriptは複数行の記述をサポートしません。 したがって、複数行でも1行に見せかける必要が有ります。
  <script type="text/javascript">
 var name    = 'フジテレビ';
 var zip     = '135-0091';
 var address = '東京都港区台場';
 document.write('\
 <div style="font-size:14px">\
 放送局:'+name+'<br />\
 所在地:〒'+zip+'<br />\
 +address+'</div>\
 </script>\
 ';  
このように改行の直前(行の最後)にバックスラッシュを置くことで改行コードをエスケープして、 javascriptには「改行していませんよ」とごまかしています。 これは変数への代入でも使用でき、非常に便利です。
  var filedialog_html = '\
 <div id="filedialog_overlay">\
 	<div id="filedialog" style="left:'+(filedialog_width-800)/2+'px;\
 		top:'+(filedialog_height-600)/2+'px;">\
 		<div id="filedialog_titlebar">\
 			<div id="filedialog_left_top"> </div>\
 			<div id="filedialog_caption">ファイルダイアログ</div>\
 			<div id="filedialog_right_top"> </div>\
 		</div>\
 		<div id="filedialog_toolbar"></div>\
 		<div id="filedialog_body">\
 			<div id="filedialog_treeview">ディレクトリツリー</div>\
 			<div id="filedialog_dirview">ファイル一覧</div>\
 		</div>\
 		<div id="filedialog_statusbar">\
 		</div>\
 	</div>\
 	<iframe name="filedialog_dummyframe" id="filedialog_dummyframe"></iframe>\
 </div>\
 ';
 document.write(filedialog_html);
  
いかがでしょうか?明らかにこちらの方が読みやすく、構文エラーも避けられます。
Comment
$(this).corner("left");コメントに関するお約束

  1. ご意見、ご希望、ご質問など、何かありましたらご投稿ください。
  2. ご質問に対する回答は、分かる範囲でお答えしますが、お約束は出来ません。
  3. 投稿していただいたコメントはこのページに記載されます。
  4. コメントは各ページごとに独立しています。それぞれのテーマに沿ったコメントをお願いします。
  5. タグはいっさい使用できません。タグもそのまま表示されます。
  6. 印は必須です。ハンドル名でも結構ですのでご記入ください。
  7. パスワードを記入しておけばご自分の記事を削除できます。
  8. 当サイトにふさわしくないと判断した記事は管理者の独断で削除することがあります。
お名前
パスワード
件名

Enquete
このページの情報、記事はお役に立ちましたでしょうか?
はい いいえ どちらとも言えない

※ご意見が有ればどうぞ(公開されません)
更新履歴
10/07/26 Winテーマの変更
10/06/08 まだまだ使えるXP
10/06/02 jQueryテーマ...
10/05/25 Win7は業務に...
10/04/11 携帯位置情報取得
10/03/09 カレンダーの追加
10/03/01 サービス開始
有料サービス
  1. データ変換サービス
    番地まで記載されたテキスト形式の住所データをお持ちの場合、「緯度」、「経度」及び、 「最寄り駅」と座標、「最寄のインター」と座標の情報を追加したCSVデータを作成してお返しします。 座標付ですので簡単にGoogleマップに位置表示することができます。
    【例】
    名称 住所
    東京タワー 東京都港区芝公園4丁目2-8

    名称 住所 緯度 経度 沿線 最寄り駅 緯度 経度 高速名 インター 緯度 経度
    東京タワー 東京都港区芝公園4丁目2-8 35.6585873 139.7454247 都営大江戸線 赤羽橋 35.655007 139.743642 首都高速都心環状線 芝公園 35.6544767 139.745769
    ※住所データは必須です。電話番号では特定できません。

    費用は1件当たり、わずか32円。100件で3,200円、1000件でも32,000円です。
    追加される最寄り駅、最寄のインター共に直線距離で最も近いもの1件です。複数必要な場合はお問合せください。
  2. システム開発
    Googleマップや最寄り駅、最寄のインターを利用したWEBシステムを開発します。
    自社製品が全国どこで購入可能で、どの駅で降りれば1番近いのかなどをユーザにお知らせすることができ、販売促進にも貢献します。 また、ご自分の住所を指定して最も近い店舗を検索したり、距離を指定して範囲内の店舗を検索して地図を表示するシステムの開発もできます。
    もちろん、携帯版も可能です。
    携帯版はGIF形式の静止画ですのでキャリヤや機種を選びません。 ほぼ、全て機種で使用可能なシステムになります。

    携帯電話ですからWEBのようなパフォーマンスは望めませんが、 静止画でも地図の「縮小」、「拡大」をサポートします。
    お見積もりは「お問合せ」から、 ご希望の機能をできるだけ詳しくお書きいただき、お送りください。
  3. 最新のユーザインターフェースの導入
    現在注目を集めているAjaxやJavascriptを使用したハイセンスなインターフェースの導入をお手伝いします。
    jQueryプラグインのオーバーレイを複数使用した最先端のドキュメントの生成が可能になります。 また、オーバーレイやAjaxを使用する事で、無駄なリロードを減らすことができ、パフォーマンスも向上します。
お問合せフォーム
  1. 全てのお問合せはこちらの専用フォームをご使用ください。 もちろん、ご意見/ご希望でも結構です。
  2. システムに存在しない路線や、新たに開通した路線をご存知の場合はお知らせください。
  3. 有料サービスで新たなシステム開発のお見積もりをご希望の場合は、 出来る限りご希望の機能を詳しくお願いします。
  4. は必須項目です。必ずご記入ください。
お名前
フリガナ
Email
Email(確認) ※確認のためもう一度 (コピー禁止)
タイトル お問合せ お見積もり ご意見/ご希望
内容