kamenokoki.com

【164日目】自作ブログ投稿フォーム:本文の見出しとパラグラフの同時読み込み

Posted:  Last Update:

「記事の投稿ページを作成する」プロジェクト。フォームの見た目を整えて、既存の記事の一部を読み込めるようになりました。今日は、読み込みをもう少し丁寧に作っていきたいと思います。

ここまでの成果

今手打ちでタグとかも書いている入力を、フォームで簡単にできるようにするのが目標。一大プロジェクト「記事の投稿ページを作成する」!ここまでの作業で完了したことは大きく次の4つです。

  1. フォームのデザインを整えた
  2. ページ左側のMenuからサイトを選ぶと、真ん中に記事一覧ページを表示させられるようになった
  3. 記事のクリックで編集ページに遷移できるようになった
  4. 編集ページに記事の一部を表示できるようになった

昨日の作業で、本文のパラグラフを読み込めるようになりました。スクリーンショットで見るとこんな感じです。

記事本文を呼び出せるようになりたい!

本文の見出しとパラグラフを同時に読み込む

さて、昨日の作業では、本文は小見出しと文章部分でばらばらに読み込んでいました。小見出しとパラグラフがバラバラなところにあるので、どんな記事なのかすらわかりません!

というわけで、今日はまず本文の見出しとパラグラフを同時に読み込めるようにしたいと思います。

PHPを弄って…、ひとまずこうなりました。それぞれの小見出しの下に本文が来ています。

本文の見出しとパラグラフを同時に読み込む

現在のPHPがこんな感じです。

<?php
$articlebody1 = $articlebody;

$headingset = '/<h[2-5]>(.*?)<\/h[2-5]>/i';
preg_match_all($headingset , $articlebody1, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $heading){
$i++;
$id = 'heading-' .$i;
$headings = preg_replace( '/<(.+?)>(.+?)<\/(.+?)>/', '<label for="description-$id">小見出し「$1」</label><br><input type="text" id="$1-$id" name="$1-$id" value="$2"><br>', $heading[0]);
$articlebody1 = preg_replace( $headingset, $headings, $articlebody1, 1);
}

$paragraphset = '/<p>(.*?)<\/p>/s';
preg_match_all($paragraphset, $articlebody1, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $paragraph){
$i++;
$id = 'paragraph-' .$i;
$paragraphs = preg_replace( '/<p>(.+?)<\/p>/s', '<label for="description">本文</label><br><textarea type="text" id="description" name="description" rows="4" cols="50">$1</textarea><br>', $paragraph[0]);
$articlebody1 = preg_replace($paragraphset, $paragraphs, $articlebody1, 1);
}

echo $articlebody1;
?>

コード部分も読み込んでみる

本文以外にも、このサイトにはコードを紹介していることが多いので、その部分も読み込めるようにしたいと思います。

読み込んでみると、このような感じになりました。ページ中ほどのコードがたくさん書かれているのが該当箇所です。装飾用のSpanも全て見えてしまっているのでちょっと分かりにくいですね…。これはのちのち変えて行かないといけないな…。

本文の見出しとパラグラフを同時に読み込む

書いたPHPはこんな感じです。先にご紹介したPHPに付け加えています。

$codedivset = '/<div id="code">(.*?)<\/div>/s';
preg_match_all($codedivset, $articlebody1, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $codediv){
$i++;
$id = 'codediv-' .$i;
$codedivs = preg_replace( '/<div id="code">(.+?)<\/div>/s', '<label for="description">コード</label><br><textarea type="text" id="description" name="description" rows="30" cols="50">$1</textarea><br>', $codediv[0]);
$articlebody1 = preg_replace($codedivset, $codedivs, $articlebody1, 1);
}

今日はここまで

ここで今日は時間が来てしまいました!

だいぶ本文を読み込めるようになったので、明日は少しデザインを弄って、小見出しの大きさが分かるようにしてみたいと思います。文章部分も、文章とコードを色分けしたりして、見やすくしたいな。

明日やる作業を考えつつ、…また明日です!

記事をシェアする

亀の子に連絡

ランキング参加中!ぽちっとしてね

F2cランキングアイコン 人気ブログランキング ブログランキング・にほんブログ村へ

広告