目的

投稿内容の文字列中に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と通常文字列の区切りは、全半角スペースと改行とする。

概要

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

詳細

ビューファイルの編集

laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
```
$ vi resources/views/contents/output.blade.php
```

下記のように編集する。

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

laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。
```
$ vi resources/views/contents/detail.blade.php
```

下記のように編集する。

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

確認
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の画面が表示されることを確認する。