質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

1836閲覧

変換ソフトを作成していますが、微調整がしたいです。宜しくお願い致します。

b1ackc0ffee

総合スコア267

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2015/06/02 04:19

下記は現在のコードは現在のコードです。
[質問]
1.左右のtextareaの間の3つのボタンを縦に並べたい。
2.最初の説明文「<p>左側に変換したい文章を記入し、[<br>]もしくは[<br><br>]ボタンを押してください。
<br>右側に変換後の文章が表示されます。」の[]の中の<br>をそのまま表示させたいですが、改行として認識されます。
3.ボタン押下後左側のtextareaの文章を維持させたい。
4.



<br>ボタンを押下したら
<br>
<br>
<br>
と変換されて欲しいのですが、
<br><br><br>
と横並びになります。


<DOCTYPE! html>

<html> <head><title>変換ツール</title></head> <body> <h1>ニュース解説 変換ツール</h1> <p>左側に変換したい文章を記入し、[<br>]もしくは[<br><br>]ボタンを押してください。 <br>右側に変換後の文章が表示されます。 <?php /* 下記「全角」英数字を「半角」に変換します。 */ if(isset($_POST['left'])){ $after = mb_convert_kana ($_POST['left'] , "a" ); // もし"left"の中に文字が入力されていたら、$after // 入っていなかったらこの処理は無視され、次の処理が行われます。 // $_POST['left'] の部分は、変換したい文字の変数 // formの変数を指定するときは$_POST['任意の名前']のかたちにしないといけない。 // "a"の部分は、変換方法(どのような変換をしたいか) $order = array("\r\n", "\n", "\r"); if(isset($_POST['br1'])){ $after = str_replace($order, "<br>",$after); } // bt1をおした時の処理 // str_replace ("検索文字列", "置換え文字列", "対象文字列"); else if(isset($_POST['br2'])){ $after = str_replace($order, "<br><br>",$after); } } ?> <form action="/test.php" method="post"> <textarea name="left" rows="20" cols="45" placeholder="ここに変換したい文字を入力してください。"> </textarea> <input type="submit" name="br1" value="<br>"> <input type="submit" name="br2" value="<br><br>"> <input type="reset" value="リセット"> <textarea name="right" rows=20" cols="45"> <?php if(isset($after)){echo $after;} // もし、$afterの中身が空でなければ、$afterを表示します。 else{ echo "変換後の文章がこちらに表示されます。"; } // 空だった場合は"変換後の文章がこちらに表示されます。"と表示するようにします ?> </textarea> </form> </body> </html> ---------------------------------------------------------- 以上です。 よろしくお願いいたします。

![イメージ説明]WIDTH:600

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

少し余談にはなりますが、nl2brを使用した場合、
<br><br>と置き換えるにはどうしたらよいでしょうか。

このケースでnl2brを使うのは適切ではないので考えないほうがいいでしょう。

何が何でもnl2brを使わなければならないのだったらこんな感じでしょうか。しかしbrの連続の間に改行が入ってしまいます。

もしもこれに対応するならば、改行を2倍に置換する処理で、通常の改行の連続とは区別するために、その前後に印をつけた上で、置換しなおすことになるでしょう。「\n」を「[\n\n]」等と置換して、あとで「[<br>\n<br>\n]」を「<br><br>\n」に置換するなど。ただ面倒なのでそんなことをするくらいならnl2brを使わずに素直にpreg_replaceを使えばいいとおもいます。

lang

1if (isset($_POST['left'])) { 2 // 「全角」英数字を「半角」に変換します。 3 $input = mb_convert_kana($_POST['left'], "a"); 4 5 if (isset($_POST['br2'])) { 6 $pattern = "/(\r\n|\r|\n)/"; 7 $replacement = "$1$1"; 8 // preg_replace("検索パターン", "置換え文字列", "対象文字列"); 9 $input = preg_replace($pattern, $replacement, $input); 10 } 11 $after = nl2br($input, false); 12}

投稿2015/06/02 09:55

miu_ras

総合スコア902

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/06/03 04:48

なるほどですね。 こんなに複雑な表記をしないといけないのですね。 有難うございます★
guest

0

ベストアンサー

<br><br>
<br><br>
となってしまいました

それはstr_replaceの注意点です。置換後の文字列も次の検索対象になってしまうので、
そのようなケースではstr_replaceを使用するのは適切ではないでしょう。
私ならpreg_replaceを使います。解説は省いてコードを載せます。

あと細かいところをいくつか
・変数の使いまわしは避けたほうがいい。置換する部分で$afterを引数に、結果も$afterに入れていて、一瞬何のことか分からなくなる
・同じ処理はまとめて、異なる部分だけを書いたほうがいい。どちらのボタンを押しても置換をするなら、IF文では置換後の異なる部分だけを定義した方がいい
・異なるページにリクエストを送信するならaction属性は必要です。同一ページに送信するなら不要です。書いても動きますが、不要なコードは書かないほうがいいです
・PHPのコードとHTMLは分離しましょう。結果を表示するtextarea部分
・名前には意味を持たせましょう。left, rightだと、ただの場所です。上下に表示するようレイアウトを変更したら何のことかさっぱり分からなくなります。レイアウトに依存する名前ではなく、input, result等役割に着目した名前の方が、変更に強いですし他の人が見たときにわかりやすいです。

lang

1<DOCTYPE! html> 2<html> 3<head><title>変換ツール</title></head> 4<body> 5 6<h1>ニュース解説 変換ツール</h1> 7<p>左側に変換したい文章を記入し、[&lt;br>]もしくは[&lt;br>&lt;br>]ボタンを押してください。 8<br>右側に変換後の文章が表示されます。 9 10<?php 11if (isset($_POST['left'])) { 12 // 「全角」英数字を「半角」に変換します。 13 $input = mb_convert_kana($_POST['left'], "a"); 14 15 if (isset($_POST['br1'])) { 16 $replacement = "<br>$1"; 17 } else if (isset($_POST['br2'])) { 18 $replacement = "<br><br>$1"; 19 } 20 $pattern = "/(\r\n|\r|\n)/"; 21 // preg_replace("検索パターン", "置換え文字列", "対象文字列"); 22 $after = preg_replace($pattern, $replacement, $input); 23} 24 25if (isset($after)) { 26 $result = $after; 27} else { 28 $result = "変換後の文章がこちらに表示されます。"; 29} 30?> 31 32<form method="post"> 33<textarea name="left" rows="20" cols="45" placeholder="ここに変換したい文字を入力してください。"></textarea> 34<input type="submit" name="br1" value="<br>"> 35<input type="submit" name="br2" value="<br><br>"> 36<input type="reset" value="リセット"> 37<textarea name="right" rows=20" cols="45"><?php echo $result;?></textarea> 38</form> 39 40</body> 41</html>

投稿2015/06/02 08:08

miu_ras

総合スコア902

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

b1ackc0ffee

2015/06/02 09:22

miu_rasさん 回答有難うございます。 非常に見やすくてシンプルな、コードですね。 エンジニア歴が長いのでしょうか? たくさんのご指摘も全て参考になりました。 特に同一ページに送信するならaction属性不要だとは知らなかったので助かりました。 少し余談にはなりますが、nl2brを使用した場合、 <br><br>と置き換えるにはどうしたらよいでしょうか。 宜しくお願い致します。
b1ackc0ffee

2015/06/02 09:39

あと、 if (isset($_POST['left'])) { // 「全角」英数字を「半角」に変換します。 $input = mb_convert_kana($_POST['left'], "a"); if (isset($_POST['br1'])) { $replacement = "<br>$1"; } else if (isset($_POST['br2'])) { $replacement = "<br><br>$1"; } $pattern = "/(\r\n|\r|\n)/"; // preg_replace("検索パターン", "置換え文字列", "対象文字列"); $after = preg_replace($pattern, $replacement, $input); } の部分の$1とは何のことでしょうか。
miu_ras

2015/06/02 10:01

>部分の$1とは何のことでしょうか。 正規表現で、マッチした括弧の1番目になります。 >$pattern = "/(\r\n|\r|\n)/"; は『「\r\n」か「\r」か「\n」のどれか』を意味します。そして、「$1」には『「\r\n」か「\r」か「\n」のどれか』にヒットしたものが入ります。 。 つまり何が来ても「\r\n」とするのではなく、送信された改行コードをそのまま使ってあげるという意味です。 正規表現は少し難しいので今はあまり気にせず、PHPがもう少しわかってきてから別途勉強するといいと思います。
b1ackc0ffee

2015/06/03 02:17

> >部分の$1とは何のことでしょうか。 > > 正規表現で、マッチした括弧の1番目になります。 ううう~ん。 私はまだ理解するだけのレベルに達していません。 変数でしょうか。 __ダブルクォート内のドルマークは、変数を記述するために使われるのが基本です。 ドルマークを文字として扱う場合は、"<br>\$1" のように、円マーク(バックスラッシュ) でエスケープするのが基本です。 ちなみに % $replacement = "<br><br>$1"; は、同じですが、以下のところでも、似たようなことが言えます。 % $pattern = "/(\r\n|\r|\n)/"; __ > <?php echo $result;?> 結果は成功だったのですが、 この表記で、どうしてinputに入力した文字が維持されるのかわかりません。 それぞれの関数の意味を日本語でご教示願えますでしょうか。 > 正規表現は少し難しいので今はあまり気にせず、PHPがもう少しわかってきてから別途勉強するといいと思います。 本当に難しそうですね。少しずつ成長します。有難うございます。 ---------------------------------------------------------- __% if (isset($after)) { ここの分岐は、条件的には上の分岐(15行目のif)と実質同じ意味となるので、 吸収させてしまった方が、構造としては少し単純になります。 % echo($_POST['left']); ユーザの入力をそのままページに表示させるのは良くないです。 定番の対応については普段から行うようにしましょう。 例えば </textarea> を入力した後で、スクリプトを入れると、埋め込めるのではないかな? ちなみに、echo $result; も同じですね。htmlspecialchars($str); を使うことをお勧めします。 __
b1ackc0ffee

2015/06/08 07:07

・変数の使いまわしは避けたほうがいい。置換する部分で$afterを引数に、結果も$afterに入れていて、一瞬何のことか分からなくなる ということですが、$replacementのような使い方はいいのでしょうか。 やはり、$1の意味が分かりません。 変数のルールは、英字か_から始まるはずですが、$1ってなんですか?
guest

0

最初の説明文は、<&lt>&gtとしてください。
テキストエリア内は<br>\r\nとしてください。
\はバックスラッシュです。

投稿2015/06/02 04:42

orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

orange0190

2015/06/02 04:44

すみません。少し間違えました。 テキストエリア内は<br>のあとに\r\nです。
b1ackc0ffee

2015/06/02 06:39

回答有難うございます。 説明文は、その記述で成功しました。 テキストエリア内は、そのまま<br>と表示されました。 あ あ あ と入力し<br>ボタンを押下すると、 あ<br><br> <br><br> あ<br><br> <br><br> あ<br><br> <br><br> となってしまいました 一行目に改行が入っており、文間にも改行が入っています。 素人の勘ですみませんが、 htmlspecialchars()関数を使用するのでしょうか。 あと、3つ目の質問の 「ボタン押下後左側のtextareaの文章を維持させたい。 」 に関してはご存知でしょうか。 お手数おかけしますが、宜しくお願い致します。
orange0190

2015/06/02 07:07

確認ですが、テキストの変換後はテキストの改行は維持しつつ、改行のある場所に<br>が表示されているということでよろしいですか? あと変換後の左側の保持ですが、最初のテキストエリアに <?php if(isset($_POST['left'])){ echo $_POST['left']; } ?> とすれば、できるかと思います。
b1ackc0ffee

2015/06/02 08:40

> 確認ですが、テキストの変換後はテキストの改行は維持しつつ、改行のある場所に<br>が表示されているということでよろしいですか? はいそうです。 > あと変換後の左側の保持ですが、最初のテキストエリアに > <?php > if(isset($_POST['left'])){ > echo $_POST['left']; > } > ?> > とすれば、できるかと思います。 なるほど。 正確に動作しました。 私は、発想力がまだまだ足りないですね。 有難うございました★
guest

0

つまり、説明文中に"<br>"と表示したいということですね?

<br>と記述するとタグとして認識してしまうので、
<は<、

は>と

記述すると良いと思います
詳しくは 「html 特殊文字」などで検索すると出てきます

投稿2015/06/02 04:40

LunaR

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

LunaR

2015/06/02 04:54

すいません、質問が複数あったのですね ボタンを縦に配置したい場合はTableタグを使用し、 縦に配置するというのはいかがでしょうか テキストエリア内の改行は"<br>"で置き換えるのではなく、 "<br>\r\n"で置き換えれば テキストエリア内でも改行がされていると思います
b1ackc0ffee

2015/06/02 06:30

複数回答有難うございます。 > つまり、説明文中に"<br>"と表示したいということですね? > > <br>と記述するとタグとして認識してしまうので、 > <は&lt;、 > >は&gt;と > 記述すると良いと思います > 詳しくは 「html 特殊文字」などで検索すると出てきます はい、そうです。 調べ方までアドバイスいただき有難うございます。 この記述で解決出来ました。 > ボタンを縦に配置したい場合はTableタグを使用し、 > 縦に配置するというのはいかがでしょうか 本件もtableタグを使用し解決出来ました。 有難うございます。 > テキストエリア内の改行は"<br>"で置き換えるのではなく、 > "<br>\r\n"で置き換えれば > テキストエリア内でも改行がされていると思います これに関しては、そのまま<br>と表示されました。 あ あ あ と入力し<br>ボタンを押下すると、 あ<br><br> <br><br> あ<br><br> <br><br> あ<br><br> <br><br> となってしまいました 一行目に改行が入っており、文間にも改行が入っています。 素人の勘ですみませんが、 htmlspecialchars()関数を使用するのでしょうか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問