[連載] Laravelで質問箱みたいなサービスを作るの投稿 - Crieit

未回答のものを絞り込む機能を追加する

2020-02-11T23:48:05+09:00

前回作った受け取った質問一覧ページは未回答のものも回答済みのものも表示されていて未回答のものを探しにくいため、未回答の質問を絞り込む機能を作成します。

アクションを検索に対応

まずはアクション内の絞り込みの部分を調整します。URLにno_answer=1というパラメータが付いた場合だけ未回答の絞り込みを行うようにします。

検索条件は質問に紐づく回答が存在するかになります。SQLでいうとquestionsに紐づくanswersが存在しないもの、ということになります。具体的にはLaravelのQuestionControllerのindexメソッドを下記のように変更しました。

    public function index(Request $request)
    {
        $query = Question::with('answer')
            ->where('received_user_id', Auth::id())
            ->orderByDesc('id');

        if ($request->input('no_answer')) {
            $query->whereDoesntHave('Answer');
        }

        $questions = $query->paginate();
        return view('question.index', compact('questions'));
    }

これで例えばhttp://localhost:8000/questions?no_answer=1のようなURLにアクセスすると未回答のものだけを表示できるようになりました。

前回Debugbarを導入して、実際に発行されているSQLを簡単に見ることができるようになったため見てみると、下記のようなSQLが発行されるようになりました（整形及び一部省略しています）

select
    *
from
    `questions`
where
    `received_user_id` = 1
and not exists(
        select
            *
        from
            `answers`
        where
            `questions`.`id` = `answers`.`question_id`
    )
order by
    `id` desc

ページ分けに対応

このままだと、ページ分けされた際に別ページのリンクをクリックした際にno_answer=1のパラメータが解除されてしまいます。そのため、パラメータを維持できるようにページネーションの表示を下記のように変更します。

    {{ $questions->appends(request()->only(['no_answer']))->links() }}

このようにlinksメソッドを呼ぶ前にappendsを挟んで追加パラメータを指定することで、ページネーションのリンクにも追加のパラメータが維持されるようになります。

ちなみに$query->paginate(2)の様に表示されるデータより少ない数のlimitを指定すればデータを増やさなくても確認できます。

実際に切り替えられるようにする

あとは実際にno_answer付きと無しのURLを切り替えられるようにしておきます。テンプレートに下記のような記述を追記しました。

  
    
      すべて
    
    
      未回答のみ

Bootstrapの下記のコンポーネントを利用しています。

Navs · Bootstrap

ちなみにこの横並びの表記にはFlexboxが利用されています。センタリングしておきたかったのでnavのクラスにjustify-content-centerを追加しています。

Justify content - Flex · Bootstrap

SQLの調整

これで一通り対応はできました。ただしこのサービスの場合、質問と回答のデータはメインになる、且つ一番増える可能性が高いため、上記で実装したようにリレーションを利用しての検索は後々重くなりすぎて問題になる可能性があります。そのため一旦ちょっと軽量化のための対策を行います。

動作としてはすでに出来ており、必須ではありませんので読み飛ばしても問題ありません。

具体的な対応方法として、リレーションして判断させるのではなく、回答がついた際に質問データ側に回答済みフラグを付けておくようにします。そのようにすることで質問データのみを使ったSQLで機能を実現できるようになります。

回答された際に回答済みフラグを更新するようにする

AnswerControllerのstoreアクションの回答データ登録後に下記の処理を追加しておきます。

        $question->has_answer = true;
        $question->save();

問題なければ回答時にhas_answerフラグがオンになります。（※answersテーブルの作成マイグレーションの外部キー作成が間違っていたので修正済みです。質問に回答する機能を作る）

検索クエリを変更する

先程作成した回答済みのみを抽出するSQLをフラグを使ったシンプルな形に変更します。さきほど実装したwhereDoesntHaveを変更します。

        if ($request->input('no_answer')) {
            $query->where('has_answer', true);
        }

これで一通り完了です。動作確認しておきましょう。クエリも下記のようなシンプルな形になりました。

select * from `questions` where `received_user_id` = 1 and `has_answer` = 1 order by `id` desc

まとめ

これで未回答のものだけで絞り込みができるようになりました。

次はナビゲーションなどがまだ未整備で使いづらいためそのあたりを調整していきたいと思います。

LaravelのDebugbarを導入する

2020-02-09T18:53:13+09:00

すこし横道にそれますが、Debugbarという便利ツールを導入してみます。

barryvdh/laravel-debugbar: Laravel Debugbar (Integrates PHP Debug Bar)

Debugbarは開発時に様々な情報を表示してくれる便利なツールです。これを導入しておくと、わざわざダンプしなくても簡単に画面上で様々な値を確認することが出来ます。APIサーバーなどの場合は意味がありませんが、普通にページを表示するアプリケーションの場合に有用です。ページ表示時だけでなく、ajaxで通信した値なども自動的に表示してくれたりします。

インストール

Composerでインストールします。

composer require barryvdh/laravel-debugbar --dev

古いバージョンのLaravelでなければ基本的にこれだけで導入は完了です。環境変数でAPP_DEBUG=trueの設定にしておけば表示されます。

まとめ

ということで次でちょっとLaravelが発行しているSQLを見ながら話を進めたかったのでDebugbarの回を挟んでみました。

受け取った質問一覧ページを作る

2019-11-11T07:50:57+09:00

次は受け取った質問の一覧ページを作成します。一通り主要な詳細ページは作ってきましたが、今のままではサービスとしては利用できません。受け取った質問一覧ページを作成し、全ての質問にアクセスできるようにします。

質問一覧ページを作成

実際に質問一覧ページを作成していきます。

アクションを作成

まずはQuestionControllerに一覧ページ用のアクションを追加します。getではなくpaginateを使うことでページ切り替えをして全て閲覧できるようにしています。

    public function index()
    {
        $questions = Question::where('received_user_id', Auth::id())
            ->orderByDesc('id')
            ->paginate();
        return view('question.index', compact('questions'));
    }

ルーティングを作成

このアクション用のルーティングを設定します。authミドルウェアが設定されているQuestionControllerの設定にindexを追加します。元々storeのルーティングが作成済みだったのでそちらに追記します。

    Route::resource('questions', 'QuestionController')->only(['index', 'store']);

テンプレートを作成

次にresources/views/question/index.blade.phpを作成します。

@extends('layouts.app')

@section('content')

  届いた質問一覧

  @foreach ($questions as $question)
  id}/received") }}">
    
      
        {{ $question->body }}
      
    
  
  @endforeach

  
    {{ $questions->links() }}
  


@endsection

これでログインした状態でhttp://localhost:8000/questionsにアクセスすれば表示されます。

これでアクションのpaginate()をpaginate(2)等にして１ページ内のデータ表示数を試しに変えてみることでページの表示も確認できます。

次は

あとは未回答のものだけを絞り込む機能をつけようかと思いましたが、せっかくLaravel Mixを使っているのでVue.jsのコンポーネントを使った簡単なJavaScriptの処理を入れて実装してみたいと思いますので次回に分けることにします…と思いましたがそこまで必要性を感じられていないのでとりあえず普通にJavaScript無しで実装していきます。

Twitterシェア用のOGPを作成する

2019-10-21T07:45:11+09:00

質問、回答と作成しましたので、次にその回答をツイッターに画像つきで投稿する必要があります。ツイートされた時に画像を表示するため、そのOGP用の画像を生成する処理を作成します。

こんな画像を作成します。

ちなみに実は以前別の記事でもLaravelでOGPを作る方法を解説しました。

LaravelでOGPを作る

上記ではGDを使って生成しています。同じような解説になってしまってもあまり意味がないので、今回はImagickを使って生成してみます。サーバーにはImageMagick自体とPHPのImagickがインストールされている必要があります。準備が難しい場合はGDのパターンで試してみてください。

背景画像を用意する

簡単にOGPをカッコよくしたいので、背景には枠画像を使うことにしました。下記でフリー素材をダウンロードしてきました。

街中の住宅シルエットフレーム素材枠-囲み 247 | 素材Good

これをresources/images/ogp.pngとして保存しておきます。

フォントを用意する

文字を描画するためにはフォントが必要です。Googleフォントから日本語フォントをダウンロードしてきました。これをresources/fontsフォルダに保存しておきます。

画像の生成処理を作る

素材が準備できましたので、Questionモデルに画像の生成処理を作ります。

まずはuseを追加します。

use Imagick;
use ImagickDraw;

そしてメソッドを追加します。各行の文字数が長いと画像からはみ出してしまうため、適当に折り返しを行っています。

    public function generateOgp(): Imagick
    {
        $body = $this->getWordwrapedBody();

        $image = new Imagick(resource_path('images/ogp.png'));

        $draw = new ImagickDraw();
        $draw->setFont(resource_path('fonts/MPLUS1p-Regular.ttf'));
        $draw->setFontSize(24);
        $draw->setTextAlignment(Imagick::ALIGN_CENTER);
        $lines = explode("\n", $body);
        $draw->annotation(300, 157 - (count($lines) - 1) * 12, $body);

        $image->drawImage($draw);

        return $image;
    }

    private function getWordwrapedBody(): string
    {
        $lines = explode("\n", $this->body);
        $result = [];
        foreach ($lines as $line) {
            $length = mb_strlen($line);
            for ($start = 0; $start < $length; $start += 20) {
                $result[] = mb_substr($line, $start, 20);
            }
        }
        return join("\n", $result);
    }

画像を表示する

実際にコントローラに画像を表示するためのアクションを追加します。AnswerControllerに追加します。

    public function ogp($id)
    {
        $answer = Answer::findOrFail($id);
        $image = $answer->question->generateOgp();
        return response($image, 200)
            ->header('Content-Type', 'image/png');
    }

順番が前後してしまいましたが、上記でanswerから関連するquestionを取得するようにしているため、Models/Answer.phpにリレーションを定義しておきます。

    public function question()
    {
        return $this->belongsTo(Question::class);
    }

アクセスできるようにルーティングを設定します。誰でもアクセスできるようにする必要があるので認証ミドルウェアのグループ外に記述します。

Route::get('answers/{id}/ogp.png', 'AnswerController@ogp');

これでhttp://localhost:8000/answers/1/ogp.pngのようなURLにアクセスすると、画像が表示されます。（ホスト名とIDは適宜置き換えてください）

画像ができましたので、次に実際にTwitterにURLをシェアしてもらうための回答詳細ページを作成します。URLはanswers/IDにします。questionsのreceived機能とほとんど同じではあるのですが、あちらは質問を受け取った登録済みユーザー専用のページになります。表示もほとんど同じで良いと思いますが、同じページで共通化して条件分岐などでの対処にしてしまうと、不具合が発生した時に誰でも質問を見れてしまう場合が発生してしまう可能性があります。そういった問題を避けるためにも多少冗長化し、answersデータがあるものだけは一般公開で表示する、という安全な仕様にしています。

とりあえずAnswerControllerにメソッドを追加します。

    public function show($id)
    {
        $answer = Answer::findOrFail($id);
        return view('answer.show', compact('answer'));
    }

ここにアクセスできるようにルーティングを追加しておきます。ogpの下辺りにshowメソッドの追加を並べておきます。

Route::get('answers/{id}/ogp.png', 'AnswerController@ogp');
Route::resource('answers', 'AnswerController')->only(['show']);

表示する時に回答者の名前も表示するため、回答データから回答ユーザーを取得できるように、Models/Answer.phpにリレーションの定義を追加しておきます。

    public function user()
    {
        return $this->belongsTo(User::class);
    }

これで$answer->userのような形でアクセスできます。

そしてテンプレートをresources/views/answer/show.blade.phpとして作成します。基本的にreceivedからコピーして不要部分を削っただけです。せっかくなので質問の箇所はOGPと同じ画像を表示するようにしています。軽くはないと思うのでリリース後はCloudflareでキャッシュしたいですね。

@extends('layouts.app')

@section('title', "{$answer->user->name}さんへの質問")
@section('description', $answer->body)
@section('ogp', url("answers/{$answer->id}/ogp.png"))

@section('content')

  届いた質問
  
    {{ url("answers/{$answer->id}/ogp.png") }}">
  

  {{ $answer->user->name }}さんからの回答

  
    
      {{ $answer->body }}
    
  

@endsection

sectionでtitle, description, ogpを指定しています。この様にして、各ページごとに共通レイアウトに渡したい値を指定することが出来ます。共通レイアウト側にこれを受けて表示をするための処理を追加しておきます。headタグ内に下記を追加します。（タイトルの部分は条件分岐を追加しています）

    @hasSection('title')
    @yield('title') - <span>{</span><span>{</span> config('app.name') <span>}</span><span>}</span>
    
    @else
    <span>{</span><span>{</span> config('app.name') <span>}</span><span>}</span>
    
    @endif
    @hasSection('description')
    
    
    @else
    
    
    @endif
    
    
    @hasSection('ogp')
    
    
    
    @endif

こんな感じで表示できるようになりました。

今はローカル環境で試しているのでダメですが、サーバーにアップしている状態であればこのページのURLをツイートすればTwitterでも画像が表示されるようになっているはずです。

ちなみに上記のスクリーンショットのようにちょっと左右のズレがあるようです。画像のサイズと画面の横幅があっていないため、共通レイアウトに直接書かれている600pxという表記を適当に全て700pxに変更しておきます。

まとめ

とりあえずメインの機能はおおよそできてきました。このあと面白くなくなってくる可能性があるのでこの記事はあとにすればよかったと後悔しています。次回は細々としたところを調整していくか、ハロウィン仕様への変更を予定しています。

質問に回答する機能を作る

2019-10-09T21:39:36+09:00

質問機能は作成済みですので、同様にメインとなる機能である回答機能を作成していきます。

回答テーブルを作成する

とりあえず回答用のテーブルのマイグレーションを作成しておきます。

php artisan make:migration create_answers --create answers

中身はこんな感じです。

class CreateAnswers extends Migration
{
    public function up()
    {
        Schema::create('answers', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->bigInteger('question_id')->unsigned()->index();
            $table->bigInteger('user_id')->unsigned()->index();
            $table->text('body');
            $table->timestamps();

            $table->foreign('question_id')->references('id')->on('questions')->onDelete('cascade');
        });
    }

    public function down()
    {
        Schema::dropIfExists('answers');
    }
}

どの質問への回答か、どのユーザーが回答したか、回答の内容のカラムを追加しています。user_idは実際には不要で、question_idでquestionsを検索し、questionsのreceived_user_idでどのユーザが回答したかは分かります。

ただし、回答者用の自分の回答一覧ページを作る際に、わざわざ上記のような形でJOINして検索を行わなくてはならないため負荷が増える可能性があります。具体的には下記のようなSQLです。個人的にはJOIN先のみでWHEREするのは非常に微妙だと思っています。

SELECT answers.*
FROM answers
LEFT JOIN questions ON questions.id = answers.question_id
WHERE questions.received_user_id = {{ユーザーID}}

そのためリレーショナルデータベース的には不要ですが、検索を軽量化するための冗長化としてuser_idも入れています。これで下記のシンプルなSQLで取得が可能となります。むちゃくちゃ軽いです。

SELECT * FROM answers WHERE user_id = {{ユーザーID}}

何にしろマイグレーションを実行しておきます。

php artisan migrate

回答ページを作成

本来であれば自分に来た質問一覧ページからリンクをクリックして回答ページへ行く流れですが、とりあえず回答処理を作ってしまいたいので直接回答ページから作っていきます。

回答するページのURLはquestions/{id}/receivedとします。とりあえずルーティングを設定します。authミドルウェアの中に入れましょう。

Route::group(['middleware' => ['auth']], function () {
    Route::get('questions/{id}/received', 'QuestionController@received');
    Route::resource('questions', 'QuestionController')->only(['store']);
});

回答フォーム用の処理を入れていきます。QuestionControllerに下記のようなアクションを入れます。

    public function received($questionId)
    {
        $question = Question::where('id', $questionId)
            ->where('received_user_id', Auth::id())
            ->firstOrFail();

        return view('question.received', compact('question'));
    }

取得する質問データが自分に宛てられたものかどうかもチェックしており、違う場合は本来存在しないURLですのでfirstOrFailで404にしています。このあたりはチームでやっているのであれば各プロジェクトのルールによって適宜適切なエラー処理のルールで対応していくと良いと思います。

続いて表示するためのテンプレートをresources/views/question/received.blade.phpとして作成します。

@extends('layouts.app')

@section('content')

  回答する
  
    
      {{ $question->body }}
    
  

@endsection

とりあえず回答時に見るための質問表示です。Bootstrapのカードで適当に表示しています。

Cards · Bootstrap

http://localhost:8000/questions/1/received にアクセスすると下記が表示されます。ホスト名、ポート、ID（URLの例で1になっているところ）は適宜自分の環境に合わせてください。認証ガードをしていますのでうまく表示されない場合はログインしておいてください。表示が崩れる場合はyarn hotの実行も必要です。

続いてcard（の閉じタグ）の下にフォームを入れていきます。質問フォームとほとんど同じです。

  
    
      {{ $question->body }}
    
  

  {!! Form::open(['url' => url('answers')]) !!}
  {!! Form::hidden('question_id', $question->id) !!}
  
    {!! Form::textarea('body', null, [
      'class' => 'form-control',
      'placeholder' => '回答する',
      'required' => true,
    ]) !!}
  
  {!! Form::Submit('回答する', ['class' => 'btn btn-primary']) !!}
  {!! Form::close() !!}

質問とくっついてしまうので質問のclassにmb-4でmargin-bottomも入れています。

回答を登録する

formもできたので回答を登録できるようにします。まずは回答処理用のコントローラを作成します。

php artisan make:controller AnswerController

ついでにモデルも使うと思うので作っておきます

php artisan make:model Models/Answer

Questionの時と同様、guardedを設定しておきます。

class Answer extends Model
{
    protected $guarded = ['id'];
}

回答データを保存する際、質問データの子として保存しますので、その関係を質問のモデルにも定義しておきます。Models/Question.phpをに下記のような定義を追加します。

    public function answer()
    {
        return $this->hasOne(Answer::class);
    }

これはそのままの通り、Question has one answer、つまり質問データは一つの回答データを持つ、という定義でリレーションといいます。このようにリレーションを定義しておくことでデータを保存する際や取得する時に簡単に処理を作成することができるようになっています。詳しくは下記の公式マニュアルにも書かれており、他にも様々な種類のリレーションの定義ができるようになっています。

Eloquent：リレーション 6.0 Laravel

実際に回答登録処理を作成します。まずは回答用のルーティングを作成します。answersというところです。なんとなくですが、問題がでるところでなければアルファベット順で書くと増えた時に見やすいと思います。

Route::group(['middleware' => ['auth']], function () {
    Route::resource('answers', 'AnswerController')->only(['store']);
    Route::get('questions/{id}/received', 'QuestionController@received');
    Route::resource('questions', 'QuestionController')->only(['store']);
});

resourceとは

ところでこのresourceとは何かを一旦解説します。resourceというのは、基本的な処理のためのアクションをまとめてルーティングに登録できる機能です。Laravelでは具体的には下記になっています。

メソッド	アクション	意味
GET	index	一覧
GET	create	新規登録ページ
POST	store	新規登録処理
GET	edit	編集ページ
PUT, PATCH	update	更新処理
DELETE	destroy	削除

アクションというのはコントローラのメソッド名ですので分かりやすいと思います。今回の例でいうと回答の登録処理にはstoreというメソッドを追加します。

メソッドというのはちょっと最初はわかりにくいかもしれませんが、アプリケーションにどのような処理をするか、というのを伝えるためには実はURLだけでなく、URLとメソッドの組み合わせが必要になっています。

普段ブラウザでWebにアクセスする場合は意識していないと思いますが、単にURLにアクセスしているだけではなく、実はGETメソッドでそのURLにアクセスを行っています。そしてformで何かを登録する際も、その登録先のURLにただアクセスしているわけではなく、POST, PUT, PATCH, DELETEのどれかでアクセスを行っています。

つまり例えば同じ/questionsというURLでも、ブラウザで単にアクセスした場合はGETのアクセスになるので一覧ページが表示され、formでPOSTした場合はデータが登録される、ということになります。とりあえず今のところは深く考える必要はなく、上記のテーブルのメソッドとアクションの組み合わせでコントローラに処理を書けば良い、ということになります。そして、そもそもRoute::resourceというメソッドがそれを勝手にいい感じに処理してくれるため、とりあえずは深く考える必要はありません。

回答ページであるquestions/{id}/receivedのように、resourceの形ではなく独自で定義したい場合にRoute::getやRoute::post等を利用することができる、という感じです。

マニュアルでもこのあたりは書かれています。

リソースコントローラ

回答処理を作成

さて、では実際にAnswerControllerに回答の登録処理を作成します。

namespace App\Http\Controllers;

use App\Models\Answer;
use App\Models\Question;
use Auth;
use Illuminate\Http\Request;

class AnswerController extends Controller
{
    public function store(Request $request)
    {
        $question = Question::where('id', $request->input('question_id'))
            ->where('received_user_id', Auth::id())
            ->firstOrFail();

        $answer = new Answer($request->all());
        $answer->user_id = Auth::id();
        $question->answer()->save($answer);

        session()->flash('success', '回答しました。');
        return redirect("questions/{$question->id}/received");
    }
}

最初は回答フォームの処理と同様、自分に来た質問かどうかをチェックしています。

次に回答データを作成しています。$question->answer()->save($answer);という処理により、その$questionの配下になるように回答を保存してくれます。この保存の仕方だとわざわざ$answer->question_idを自分で代入しなくても勝手に入れて保存してくれます。先程モデルに定義したリレーションによってこれができるようになっています。

これで実際に回答フォームから回答を登録すると正常にデータが入ります。

回答ページに回答済みの内容を表示する

既に回答した質問に回答フォームを表示してしまうとおかしいため、回答済みの場合は回答データを表示するようにしておきます。回答ページのテンプレートの回答フォームを条件分岐で表示を切り替えます。ちょこちょこ見出しも変えたりしたためまるごと下記に書きます。


  届いた質問
  
    
      {{ $question->body }}
    
  

  回答

  @if ($question->answer)

  
    
      {{ $question->answer->body }}
    
  

  @else

  {!! Form::open(['url' => url('answers')]) !!}
  {!! Form::hidden('question_id', $question->id) !!}
  
    {!! Form::textarea('body', null, [
      'class' => 'form-control',
      'placeholder' => '回答する',
      'required' => true,
    ]) !!}
  
  {!! Form::Submit('回答する', ['class' => 'btn btn-primary']) !!}
  {!! Form::close() !!}

  @endif

リレーションを定義しているため、$question->answerという形で簡単に回答が取れます。回答データがあれば@ifの方が実行されて回答が表示されます。回答がなければnullになりますので、@elseの方が実行され、回答フォームが表示されます。回答データを直接phpMyAdmin等で削除してみたり再度回答してみたりすると切り替わるのが分かると思います。

これで一旦回答機能の作成は完了です。

微調整

少し気になるところが出てきたため一旦微調整しておきます。

ナビを調整

ナビがcontainerの中に入って短く切れている感じが変だったので、containerから出してbodyの最初に配置しました。また、ナビの中にcontainerをいれて全体的な横幅を揃えました。

    
      
      ：
      ：
      
    

    
      @if (session('success'))
      
        {{ session('success') }}
      
      @endif
      @yield('content')

最初の余白を調整

質問ページも回答ページも最初の要素にpt-4をいれて、ナビとくっつきすぎるのを防いでいました。しかし全てのページでこれをやるのは微妙すぎるため、ナビのmargin-bottomをつけて共通化するようにしました。

具体的には各ページのpt-4を削除し、ナビにmb-4を入れました。

まとめ

質問形サービスの根幹となる機能がまた一つできました。まだ細かいところも大きいところもちょこちょこ残っていますので、引き続き進めていきます。次回は片手で小銭を最大何枚持てるかを検証していきたいと思います。