249 lines
24 KiB
Markdown
249 lines
24 KiB
Markdown
|
---
|
||
|
title: プレースホルダを用いる
|
||
|
author: kazu634
|
||
|
date: 2009-07-29
|
||
|
url: /2009/07/29/_1305/
|
||
|
wordtwit_post_info:
|
||
|
- 'O:8:"stdClass":13:{s:6:"manual";b:0;s:11:"tweet_times";i:1;s:5:"delay";i:0;s:7:"enabled";i:1;s:10:"separation";s:2:"60";s:7:"version";s:3:"3.7";s:14:"tweet_template";b:0;s:6:"status";i:2;s:6:"result";a:0:{}s:13:"tweet_counter";i:2;s:13:"tweet_log_ids";a:1:{i:0;i:4729;}s:9:"hash_tags";a:0:{}s:8:"accounts";a:1:{i:0;s:7:"kazu634";}}'
|
||
|
categories:
|
||
|
- Perl
|
||
|
|
||
|
---
|
||
|
<div class="section">
|
||
|
<p>
|
||
|
PerlでDBを操作する際に、ユーザーからデータの入力を受け付けたい場面があります。例えば今回私が作成したウェブページでは住所を入力してもらい、それからクエリーを作成しています。こんな風に:
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
<br /> <a href="http://d.hatena.ne.jp/video/youtube/mbyITC5y9RM" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/video/youtube/mbyITC5y9RM', '');" alt="この動画を含む日記"><img src="http://d.hatena.ne.jp/images/d_entry.gif" alt="D" border="0" style="vertical-align: bottom;" title="この動画を含む日記" /></a>
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
この際に、安易にコーディングしてしまうと、住所の入力を求めるテキストボックスエリアにSQL文を入力した場合に任意のSQL文が実行されてしまいます。それを防ぐためにプレースホルダという仕組みがあります。
|
||
|
</p>
|
||
|
|
||
|
<p>
|
||
|
このプレースホルダを使用すると、仮にSQL文が入力されても無害にしてくれる…そんな仕組みです。
|
||
|
</p>
|
||
|
|
||
|
<h4>
|
||
|
SQL文
|
||
|
</h4>
|
||
|
|
||
|
<p>
|
||
|
次のようにして事前に用いるSQL文を試してみます。
|
||
|
</p>
|
||
|
|
||
|
<pre class="syntax-highlight">
|
||
|
kazu634@kazu634-desktop% mysql -uroot -pmusashi ~/public_html/cgi-bin [<span class="synConstant">3508</span>]
|
||
|
Welcome <span class="synSpecial">to</span> the MySQL monitor. Commands <span class="synSpecial">end</span> <span class="synSpecial">with</span> ; <span class="synStatement">or</span> \g.
|
||
|
Your MySQL connection id <span class="synSpecial">is</span> <span class="synConstant">93</span>
|
||
|
Server version: <span class="synConstant">5.0</span>.<span class="synConstant">75</span>-0ubuntu10.<span class="synConstant">2</span> (Ubuntu)
|
||
|
<span class="synSpecial">Type</span> <span class="synConstant">'help;'</span> <span class="synStatement">or</span> <span class="synConstant">'\h'</span> <span class="synSpecial">for</span> help. <span class="synSpecial">Type</span> <span class="synConstant">'\c'</span> <span class="synSpecial">to</span> clear the buffer.
|
||
|
mysql> use sample;
|
||
|
Reading <span class="synSpecial">table</span> information <span class="synSpecial">for</span> completion <span class="synSpecial">of</span> <span class="synSpecial">table</span> <span class="synStatement">and</span> <span class="synSpecial">column</span> names
|
||
|
You can turn off this feature <span class="synSpecial">to</span> get a quicker startup <span class="synSpecial">with</span> -A
|
||
|
Database changed
|
||
|
mysql> <span class="synStatement">SELECT</span> address <span class="synSpecial">FROM</span> renoir <span class="synSpecial">WHERE</span> address <span class="synStatement">LIKE</span> <span class="synConstant">'東京%'</span>;
|
||
|
+<span class="synComment">---------------------------------------------+</span>
|
||
|
| address |
|
||
|
+<span class="synComment">---------------------------------------------+</span>
|
||
|
| 東京都豊島区東池袋<span class="synConstant">1-40-2</span> |
|
||
|
| 東京都豊島区東池袋<span class="synConstant">1-42-8</span> |
|
||
|
| 東京都豊島区巣鴨<span class="synConstant">1-15-1</span> |
|
||
|
| 東京都文京区本郷<span class="synConstant">4-37-13</span> |
|
||
|
| 東京都品川区大崎<span class="synConstant">1-6-4</span> |
|
||
|
| 東京都中野区中野<span class="synConstant">5-61-2</span> |
|
||
|
| 東京都中野区中野<span class="synConstant">5-67-5</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">2-7-18</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">2-5-5</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">2-8-15</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">2-11-6</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">3-3-11</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">6-12-10</span> |
|
||
|
| 東京都中央区銀座<span class="synConstant">5-15-1</span> |
|
||
|
| 東京都中央区日本橋<span class="synConstant">2-3-6</span> |
|
||
|
| 東京都中央区日本橋本町<span class="synConstant">1-1</span> |
|
||
|
| 東京都中央区八重洲<span class="synConstant">1-6-17</span> |
|
||
|
| 東京都中央区八重洲<span class="synConstant">1-7-4</span> |
|
||
|
| 東京都大田区大森北<span class="synConstant">1-1-10</span> |
|
||
|
| 東京都大田区西蒲田<span class="synConstant">8-1-7</span> |
|
||
|
| 東京都台東区上野<span class="synConstant">6-1-1</span> |
|
||
|
| 東京都台東区上野<span class="synConstant">4-10-7</span> |
|
||
|
| 東京都台東区上野<span class="synConstant">2-13-13</span> |
|
||
|
| 東京都台東区谷中<span class="synConstant">7-20-6</span> |
|
||
|
| 東京都千代田区五番町 |
|
||
|
| 東京都千代田区富士見<span class="synConstant">2-2-6</span> |
|
||
|
| 東京都千代田区三崎町<span class="synConstant">3-6-13</span> |
|
||
|
| 東京都千代田区内神田<span class="synConstant">2-9-9</span> |
|
||
|
| 東京都千代田区内神田<span class="synConstant">3-21-8</span> |
|
||
|
| 東京都千代田区鍛冶町<span class="synConstant">2-1-4</span> |
|
||
|
| 東京都千代田区有楽町<span class="synConstant">1-6-1</span> |
|
||
|
| 東京都千代田区外神田<span class="synConstant">1-16-10</span> |
|
||
|
| 東京都千代田区外神田<span class="synConstant">1-11-6</span> |
|
||
|
| 東京都千代田区神田佐久間町<span class="synConstant">1-18</span> |
|
||
|
| 東京都杉並区阿佐ヶ谷南<span class="synConstant">2-14-10</span> |
|
||
|
| 東京都杉並区高円寺北<span class="synConstant">2-4-4</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">1-24-1</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">1-17-1</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">1-5-11</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">7-23-2</span> |
|
||
|
| 東京都新宿区新宿<span class="synConstant">2-19-1</span> |
|
||
|
| 東京都新宿区新宿<span class="synConstant">3-4-1</span> |
|
||
|
| 東京都新宿区市谷田町<span class="synConstant">1-3</span> |
|
||
|
| 東京都新宿区四谷<span class="synConstant">1-3-22</span> |
|
||
|
| 東京都新宿区歌舞伎町<span class="synConstant">1-3-5</span> |
|
||
|
| 東京都新宿区歌舞伎町<span class="synConstant">1-14-4</span> |
|
||
|
| 東京都新宿区歌舞伎町<span class="synConstant">1-26-6</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">7-1-1</span> |
|
||
|
| 東京都新宿区西新宿<span class="synConstant">7-9-7</span> |
|
||
|
| 東京都新宿区百人町<span class="synConstant">1-18-8</span> |
|
||
|
| 東京都新宿区百人町<span class="synConstant">2-11-25</span> |
|
||
|
| 東京都新宿区高田馬場<span class="synConstant">2-18-6</span> |
|
||
|
| 東京都新宿区高田馬場<span class="synConstant">2-14-2</span> |
|
||
|
| 東京都新宿区高田馬場<span class="synConstant">1-34-8</span> |
|
||
|
| 東京都新宿区高田馬場<span class="synConstant">1-34-12</span> |
|
||
|
| 東京都渋谷区代々木<span class="synConstant">1-30-6</span> |
|
||
|
| 東京都渋谷区千駄ヶ谷<span class="synConstant">1-30-8</span> |
|
||
|
| 東京都渋谷区桜丘町<span class="synConstant">15-15</span> |
|
||
|
| 東京都渋谷区渋谷<span class="synConstant">2-17-5</span> |
|
||
|
| 東京都渋谷区宇田川町<span class="synConstant">36-2</span> |
|
||
|
| 東京都渋谷区渋谷<span class="synConstant">1-16-14</span> |
|
||
|
| 東京都荒川区西日暮里<span class="synConstant">5-23-6</span> |
|
||
|
| 東京都荒川区東日暮里<span class="synConstant">5-51-11</span> |
|
||
|
| 東京都港区赤坂<span class="synConstant">3-10-2</span> |
|
||
|
| 東京都港区新橋<span class="synConstant">4-10-2</span> |
|
||
|
| 東京都港区新橋<span class="synConstant">1-17-2</span> |
|
||
|
| 東京都港区芝<span class="synConstant">5-34-7</span> |
|
||
|
| 東京都港区芝大門<span class="synConstant">2-3-1</span> |
|
||
|
| 東京都港区港南<span class="synConstant">2-3-29</span> |
|
||
|
| 東京都港区高輪<span class="synConstant">3-25-22</span> |
|
||
|
| 東京都江東区亀戸<span class="synConstant">2-20-7</span> |
|
||
|
| 東京都葛飾区東金町<span class="synConstant">1-42</span> |
|
||
|
| 東京都立川市柴崎町<span class="synConstant">3-4-14</span> |
|
||
|
| 東京都立川市曙町<span class="synConstant">2-13-10</span> |
|
||
|
| 東京都立川市曙町<span class="synConstant">2-9-1</span> |
|
||
|
| 東京都武蔵野市中町<span class="synConstant">1-6-7</span> |
|
||
|
+<span class="synComment">---------------------------------------------+</span>
|
||
|
<span class="synConstant">76</span> <span class="synSpecial">rows</span> <span class="synStatement">in</span> <span class="synStatement">set</span> (<span class="synConstant"></span>.<span class="synConstant">00</span> sec)
|
||
|
mysql> exit
|
||
|
Bye
|
||
|
</pre>
|
||
|
|
||
|
<h4>
|
||
|
Perlのソース
|
||
|
</h4>
|
||
|
|
||
|
<pre class="syntax-highlight">
|
||
|
<span class="synPreProc">#!/usr/bin/env perl</span>
|
||
|
<span class="synComment"># === Libraries ===</span>
|
||
|
<span class="synStatement">use strict</span>;
|
||
|
<span class="synStatement">use warnings</span>;
|
||
|
<span class="synStatement">use </span>Data::Dumper;
|
||
|
<span class="synStatement">use </span>CGI;
|
||
|
<span class="synStatement">use </span>CGI::Carp;
|
||
|
<span class="synStatement">use </span>DBI;
|
||
|
<span class="synComment"># === Main part ===</span>
|
||
|
<span class="synStatement">my</span> <span class="synIdentifier">$q</span> = <span class="synStatement">new</span> CGI;
|
||
|
<span class="synStatement">my</span> <span class="synIdentifier">$query</span> = <span class="synIdentifier">$q</span>->param(<span class="synConstant">'adr'</span>) || <span class="synConstant">'東京'</span>;
|
||
|
<span class="synComment"># データベースへの接続</span>
|
||
|
<span class="synStatement">my</span> <span class="synIdentifier">$dbh</span> =
|
||
|
DBI-><span class="synStatement">connect</span>( <span class="synConstant">'dbi:mysql:dbname=sample'</span>, <span class="synConstant">'root'</span>, <span class="synConstant">'musashi'</span>,
|
||
|
{ <span class="synConstant">RaiseError </span>=> <span class="synConstant">1</span>, <span class="synConstant">AutoCommit </span>=> <span class="synConstant"></span> } );
|
||
|
<span class="synComment"># ステートメントハンドラの作成</span>
|
||
|
<span class="synComment"># ここでプレースホルダを指定している</span>
|
||
|
<span class="synStatement">my</span> <span class="synIdentifier">$sth</span> = <span class="synIdentifier">$dbh</span>->prepare(<span class="synConstant">"SELECT address FROM renoir WHERE address LIKE ?;"</span>);
|
||
|
<span class="synComment"># ステートメントハンドラの実行</span>
|
||
|
<span class="synComment"># プレースホルダに入れ込む変数を指定している</span>
|
||
|
<span class="synIdentifier">$sth</span>->execute(<span class="synConstant">"</span><span class="synIdentifier">$query</span><span class="synConstant">%"</span>);
|
||
|
<span class="synStatement">print</span>(<span class="synConstant">"Content-type: text/html; char-set=utf-8</span><span class="synSpecial">\n\n</span><span class="synConstant">"</span>);
|
||
|
<span class="synStatement">print</span>(<span class="synConstant">"<table width=</span><span class="synSpecial">\"\"</span><span class="synConstant"> cellspacing=</span><span class="synSpecial">\"\"</span><span class="synConstant"> cellpadding=</span><span class="synSpecial">\"\"</span><span class="synConstant"> border=</span><span class="synSpecial">\"\"</span><span class="synConstant">></span><span class="synSpecial">\n</span><span class="synConstant">"</span>);
|
||
|
<span class="synStatement">print</span>(<span class="synConstant">"<tr></span><span class="synSpecial">\n</span><span class="synConstant"><th>住所</th></span><span class="synSpecial">\n</span><span class="synConstant"></tr></span><span class="synSpecial">\n</span><span class="synConstant">"</span>);
|
||
|
<span class="synStatement">while</span> ( <span class="synStatement">my</span> <span class="synIdentifier">@row</span> = <span class="synIdentifier">$sth</span>->fetchrow_array ) {
|
||
|
<span class="synStatement">print</span> <span class="synConstant">"<tr></span><span class="synSpecial">\n</span><span class="synConstant"><td></span><span class="synIdentifier">@row</span><span class="synConstant"></td></span><span class="synSpecial">\n</span><span class="synConstant"></tr></span><span class="synSpecial">\n</span><span class="synConstant">"</span>;
|
||
|
}
|
||
|
<span class="synStatement">print</span>(<span class="synConstant">"</table>"</span>);
|
||
|
<span class="synComment"># ステートメントハンドラの解放</span>
|
||
|
<span class="synIdentifier">$sth</span>->finish;
|
||
|
<span class="synComment"># データベースハンドラの解放</span>
|
||
|
<span class="synIdentifier">$dbh</span>->disconnect;
|
||
|
</pre>
|
||
|
|
||
|
<h4>
|
||
|
htmlのソース
|
||
|
</h4>
|
||
|
|
||
|
<pre class="syntax-highlight">
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">html</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">head</span><span class="synIdentifier">></span>
|
||
|
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">title</span><span class="synIdentifier">></span>DB test<span class="synIdentifier"></</span><span class="synStatement">title</span><span class="synIdentifier">></span>
|
||
|
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">"Content-Type"</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">"text/html; charset=UTF-8"</span><span class="synIdentifier"> /></span>
|
||
|
<span class="synPreProc"> </span><span class="synIdentifier"><</span><span class="synStatement">meta</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">"Content-Script-Type"</span><span class="synIdentifier"> </span><span class="synType">content</span><span class="synIdentifier">=</span><span class="synConstant">"text/javascript"</span><span class="synIdentifier"> /></span>
|
||
|
<span class="synPreProc"> </span><span class="synIdentifier"></</span><span class="synStatement">head</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">body</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">style</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"text/css"</span><span class="synIdentifier">></span>
|
||
|
<span class="synStatement">html</span>, <span class="synStatement">body</span> <span class="synIdentifier">{</span>
|
||
|
<span class="synType">width</span>: <span class="synConstant">100%</span>;
|
||
|
<span class="synType">height</span>: <span class="synConstant">100%</span>;
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synStatement">html</span> <span class="synIdentifier">{</span>
|
||
|
<span class="synType">overflow</span>: <span class="synType">hidden</span>;
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synStatement">body</span> <span class="synIdentifier">{</span>
|
||
|
<span class="synType">margin</span>: <span class="synConstant">0px</span> <span class="synConstant">0px</span> <span class="synConstant">0px</span> <span class="synConstant">0px</span>;
|
||
|
<span class="synType">padding</span>: <span class="synConstant">0px</span> <span class="synConstant">0px</span> <span class="synConstant">0px</span> <span class="synConstant">0px</span>;
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synIdentifier">#mymap</span> <span class="synIdentifier">{</span>
|
||
|
<span class="synType">margin-bottom</span>: <span class="synConstant">80%</span>;
|
||
|
<span class="synType">height</span>: <span class="synConstant">25%</span>;
|
||
|
<span class="synType">width</span> <span class="synConstant">25%</span>;
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synIdentifier">#bottompanel</span> <span class="synIdentifier">{</span>
|
||
|
<span class="synType">position</span>: <span class="synType">absolute</span>;
|
||
|
<span class="synType">left</span>: <span class="synConstant">0px</span>;
|
||
|
<span class="synType">border</span> <span class="synType">solid</span>;
|
||
|
<span class="synType">bottom</span>: <span class="synConstant">0px</span>;
|
||
|
<span class="synType">height</span>: <span class="synConstant">75%</span>;
|
||
|
<span class="synType">width</span>: <span class="synConstant">25%</span>;
|
||
|
<span class="synType">overflow</span>: <span class="synType">auto</span>;
|
||
|
<span class="synType">padding</span>: <span class="synConstant">0px</span> <span class="synConstant">5px</span> <span class="synConstant">0px</span> <span class="synConstant">10px</span>;
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">style</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"text/javascript"</span><span class="synIdentifier"> </span><span class="synType">src</span><span class="synIdentifier">=</span><span class="synConstant">"prototype.js"</span><span class="synIdentifier">></</span><span class="synStatement">script</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">script</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"text/javascript"</span><span class="synIdentifier">></span>
|
||
|
<span class="synComment">//<![CDATA[</span>
|
||
|
<span class="synIdentifier">function</span><span class="synSpecial"> lwws</span>()<span class="synSpecial"> </span><span class="synIdentifier">{</span>
|
||
|
<span class="synComment">// 結果の表示先に「しばらくお待ちください」と表示する</span>
|
||
|
<span class="synStatement">document</span><span class="synSpecial">.getElementById</span>(<span class="synConstant">"result"</span>)<span class="synSpecial">.innerHTML = </span><span class="synConstant">"<p>しばらくお待ちください...</p>"</span><span class="synSpecial">;</span>
|
||
|
<span class="synStatement">new</span><span class="synSpecial"> Ajax.Updater</span>(
|
||
|
<span class="synConstant">"result"</span><span class="synSpecial">, </span><span class="synConstant">"cgi-bin/mysql.pl"</span><span class="synSpecial">,</span>
|
||
|
<span class="synIdentifier">{</span>
|
||
|
<span class="synSpecial">parameters : Form.serialize</span>(<span class="synConstant">"ajax"</span>)<span class="synSpecial">,</span>
|
||
|
<span class="synSpecial">method : </span><span class="synConstant">"post"</span>
|
||
|
<span class="synIdentifier">}</span>
|
||
|
)<span class="synSpecial">;</span>
|
||
|
<span class="synIdentifier">}</span>
|
||
|
<span class="synComment">//]]></span>
|
||
|
<span class="synSpecial"> </span><span class="synIdentifier"></</span><span class="synStatement">script</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"mymap"</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">h1</span><span class="synIdentifier">></span>DB test<span class="synIdentifier"></</span><span class="synStatement">h1</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">form</span><span class="synIdentifier"> </span><span class="synType">method</span><span class="synIdentifier">=</span><span class="synConstant">"post"</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"ajax"</span><span class="synIdentifier"> </span><span class="synType">action</span><span class="synIdentifier">=</span><span class="synConstant">""</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">"ajax"</span><span class="synIdentifier">></span>
|
||
|
住所: <span class="synIdentifier"><</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"text"</span><span class="synIdentifier"> </span><span class="synType">name</span><span class="synIdentifier">=</span><span class="synConstant">"adr"</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">input</span><span class="synIdentifier"> </span><span class="synType">type</span><span class="synIdentifier">=</span><span class="synConstant">"button"</span><span class="synIdentifier"> </span><span class="synType">value</span><span class="synIdentifier">=</span><span class="synConstant">"送信"</span><span class="synIdentifier"> </span><span class="synSpecial">onclick="lwws</span>()<span class="synSpecial">"</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">form</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"bottompanel"</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"><</span><span class="synStatement">div</span><span class="synIdentifier"> </span><span class="synType">id</span><span class="synIdentifier">=</span><span class="synConstant">"result"</span><span class="synIdentifier">></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">div</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">body</span><span class="synIdentifier">></span>
|
||
|
<span class="synIdentifier"></</span><span class="synStatement">html</span><span class="synIdentifier">></span>
|
||
|
</pre>
|
||
|
|
||
|
<h4>
|
||
|
まとめ
|
||
|
</h4>
|
||
|
|
||
|
<p>
|
||
|
prepareの部分で「?」を用いましょう!
|
||
|
</p>
|
||
|
</div>
|