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をインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 8.6.0 | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |
| Node.jsバージョン | v12.14.1 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでNode.jsをインストールする](https://qiita.com/miriwo/items/73d1546220f1c091a7d5) |
# 前提条件

- 下記の記事の作業が完了していること。
    - [Laravel8 CRUD処理を使った投稿アプリを作成する その9 画像をアップロードできるようにする](https://qiita.com/miriwo/items/450f28be3a34366f9940)

# 前提情報

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

# 概要

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

# 詳細

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

        ```terminal
        $ vi resources/views/contents/output.blade.php
        ```
    1. 下記のように編集する。

        ```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
        ```
    1. laravel8_crudディレクトリで下記コマンドを実行してビューファイルを開く。

        ```terminal
        $ vi resources/views/contents/detail.blade.php
        ```
    1. 下記のように編集する。

        ```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. 確認
    1. laravel8_crudディレクトリで下記コマンドを実行してローカルサーバを起動する。

        ```terminal
        $ php artisan serve
        ```
    1. ブラウザで下記にアクセスする。
        - [http://127.0.0.1:8000/input](http://127.0.0.1:8000/input)
    1. 投稿内容に「https://qiita.com/miriwo」と入力し「送信」をクリックする。

        ![laravel8_crud-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/3c557cba-f335-547f-b571-43b556b45d2b.png)

    1. 下記にアクセスする。
        - [http://127.0.0.1:8000/output](http://127.0.0.1:8000/output)
    1. URLがリンク化されており、クリックすると新しいタブで筆者のQiitaの画面が表示されることを確認する。

        ![laravel8_crud-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/77ed47cf-1302-e534-495b-2409888fda2b.png)

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

        ![laravel8_crud-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/a9c6ac98-078a-9660-5470-cecf5929ca2f.png)

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

        ![laravel8_crud-8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4dd4f382-d2de-3a01-156e-2cbd714ffd37.png)