Laravel8 CRUD処理を使った投稿アプリを作成する その10 URLをリンク化する

目的

• 投稿内容の文字列中にURLがあったときにリンク化する方法をまとめる

実施環境

• 筆者の実施環境を記載する。
• ハードウェア環境

項目	情報
OS	macOS Catalina(10.15.5)
ハードウェア	MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports)
プロセッサ	2 GHz クアッドコアIntel Core i5
メモリ	32 GB 3733 MHz LPDDR4
グラフィックス	Intel Iris Plus Graphics 1536 MB

• ソフトウェア環境

項目	情報	備考
PHP バージョン	7.4.8	Homebrewを用いてこちらの方法で導入→Mac HomebrewでPHPをインストールする
Laravel バージョン	8.6.0	commposerを用いてこちらの方法で導入→Mac Laravelの環境構築を行う
MySQLバージョン	8.0.19 for osx10.13 on x86_64	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでMySQLをインストールする
Node.jsバージョン	v12.14.1	Homwbrewを用いてこちらの方法で導入→Mac HomebrewでNode.jsをインストールする

前提条件

• 下記の記事の作業が完了していること。
  • Laravel8 CRUD処理を使った投稿アプリを作成する その9 画像をアップロードできるようにする

前提情報

• 作成するアプリ名は「laravel8_crud」とする。
• 作成するMySQLのデータベース名は「laravel８_crud_DB」とする。
• 下記に今回の作業のあとのソースコードのリモートリポジトリのリンクを記載する。
  • https://github.com/miriwo0104/laravel8_crud/tree/No10
• 「http」か「https」から始まるURLをリンク化する。URLと通常文字列の区切りは、全半角スペースと改行とする。

概要

1. ビューファイルの編集
2. 確認

詳細

1. ビューファイルの編集

   1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

      $ vi resources/views/contents/output.blade.php
      

   2. 下記のように編集する。

      laravel8_crud/resources/views/contents/output.blade.php

      @extends('layouts.app')
      
      @section('content')
      
      <h1>output</h1>
      
      @foreach ($items as $item)
      <hr>
      @if (isset($item['file_path']))
      <img src="{{asset('storage/' . $item['file_path'])}}" alt="{{asset('storage/' . $item['file_path'])}}">
      @endif
      {{-- 下記を修正する --}}
      <p>{!! nl2br(preg_replace('/(https?:\/\/[^\s]*)/', '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>', $item['content'])) !!}</p>
      <a href="{{route('detail', ['content_id' => $item['id']])}}">詳細</a>
      <a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
      @endforeach
      
      @endsection
      

   3. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

      $ vi resources/views/contents/detail.blade.php
      

   4. 下記のように編集する。

      laravel8_crud/resources/views/contents/detail.blade.php

      @extends('layouts.app')
      
      @section('content')
      
      <h1>detail</h1>
      
      @if (isset($item['file_path']))
      <img src="{{asset('storage/' . $item['file_path'])}}" alt="{{asset('storage/' . $item['file_path'])}}">
      @endif
      <p>投稿ID: {{$item['id']}}</p>
      {{-- 下記を修正する --}}
      <p>投稿内容: {!! nl2br(preg_replace('/(https?:\/\/[^\s]*)/', '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>', $item['content'])) !!}</p>
      <p>投稿時間: {{$item['created_at']}}</p>
      <a href="{{route('edit', ['content_id' => $item['id']])}}">編集</a>
      <form action="{{route('delete')}}" method="post">
          @csrf
          <input type="hidden" name="id" value="{{$item['id']}}">
          <input type="submit" value="削除">
      </form>
      
      @endsection
      

2. 確認

   1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

      $ php artisan serve
      

   2. ブラウザで下記にアクセスする。

      • http://127.0.0.1:8000/input

   3. 投稿内容に「https://qiita.com/miriwo」と入力し「送信」をクリックする。

      

   4. 下記にアクセスする。

      • http://127.0.0.1:8000/output

   5. URLがリンク化されており、クリックすると新しいタブで筆者のQiitaの画面が表示されることを確認する。

      

   6. URLの投稿の「詳細」をクリックする。

      

   7. URLがリンク化されており、クリックすると新しいタブで筆者のQiitaの画面が表示されることを確認する。