【171日目】自作ブログ投稿フォーム:既存記事の画像を編集画面に表示する
Posted: Last Update:
「記事の投稿ページを作成する」プロジェクト。基本的なフォームの形ができ、本文も部分的に呼び出せるようになりました。昨日は既存記事の画像を呼び出すことがうまくできずに途中で挫折…。今日こそは綺麗に呼び出していきたいです！
ここまでの成果
今手打ちでタグとかも書いている入力を、フォームで簡単にできるようにするのが目標です。一大プロジェクト「記事の投稿ページを作成する」！現在までにできているのが、大まかに次に四つです。
- フォームのデザインを整えた
- ページ左側のMenuからサイトを選ぶと、真ん中に記事一覧ページを表示させられるようになった
- 記事のクリックで編集ページに遷移できるようになった
- 編集ページに記事の一部を表示できるようになった
昨日は既存記事のブログ内リンクを呼び出したり、画像を呼び出したりしたのですが…。画像の部分がなんだかループしている！と困り果てたまま時間が来てしまいました。
昨日の様子はスクショで見るとこんな感じ。なぜかツリーになっています…。
画像を綺麗に読み込む
画像の部分を弄る前に、少し振り返りです。投稿フォームに呼び出したいパーツは下のリストの通り。だいぶ完成していますね。
- 記事のパラグラフを読み込むPHPを作成 ←完成。文中のリンクや草食など検討必要
- 見出しh2~4までを読み込むPHP ←完成
- 記事内画像を読み込むPHP ←ここがうまくいかない
- 記事内のコードを読み込むPHP ←作成途中、コードを色分けして読み込みたい
- 記事内のリンクを読み込むPHP ←完成
- 記事内のリストを読み込むPHP
では、昨日の続き、画像の読み込みです。ちょっと詳しく見てみたところ、どうも設定がループしている模様…。書き換えたimgタグの部分をまた書き換える、という現象が起こっている様子です。
foreachで上から順番に作業しているので、なぜそんなことが起こっているのか分からないのですが…。とりあえずの回避策として、書き出す方の画像タグの書き方を変えておきました。
後日ゆっくり原因を探ってみたいと思います。今はとりあえず見た目を整えてしまいたい！というわけで、画面はこうなりました。
今書いているPHPがこんな感じ。後日書き換えるので、メモです。
preg_match_all($imageset, $articlebody1, $matches, PREG_SET_ORDER);
$i = 0;
foreach($matches as $image){
$i++;
$id = 'image-' .$i;
$images = preg_replace( '/<img src="(.*?)" alt="(.*?)">/i',
'<div class="entry">
<label for="description">画像URL</label>
<input type="text" id="image" name="image" value="$1">
<label for="description">画像説明</label>
<input type="text" id="image" name="image" value="$2"><br>
<img src="'.$kameurl.'/$1">
</div>', $image[0]);
$articlebody1 = preg_replace($imageset, $images, $articlebody1, 1);
}
リストを読み込む
とりあえず画像はできたことにして、次のパーツに行きましょう！次はリストですね。
ULリスト（箇条書き）とOLリスト（数字が付くリスト）があります。まずはULリストから作成。すんなり書けた！
スクショで見ると、大きい四角の3つめがリストです。
こちらもタグがそのまま表示されています。目標はタグ打ちをしなくてよい入力フォーム。将来的には、ここもリスト形式で表示できるようにしたいですね。
今日はここまで
はい、ここで時間が来てしまいました！今日の作業はここまで。
明日はリストを投稿フォームに呼び出す部分の続き、OLリストの書き足しから始めたいと思います。OLリストの書き出しを終わったら、もう少し画面表示も弄りたいな…。
では、また明日です！