「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を入れました。

まとめ

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

Bootstrapでベースデザインを整える

2019-10-01T08:01:35+09:00

今回は一旦Bootstrapでデザインを整えてみたいと思います。デザインを整えないまま開発を進めすぎてしまうと、いざデザインを組み込む時に今まで作ったページを一通り調整し直さなければなりません。そのためベースだけは最初に整えておいて、新規にページを作る際などは最初からデザインを組み込んでおく方が楽です。

npmの利用

BootstrapはCDNで提供されているURLから直接読み込んで利用することもできます。軽いですし個人的にはおすすめです。ただ、今回はnpmを利用して利用していきたいと思います。ビルドは重くなりますが、色のカスタマイズなどが必要になった時に簡単できるようになったりします。

また、JavaScriptを使う際などにもどのみちnpmを利用していきますので、JavaScriptもCSSも一括でビルドされます。

Node.jsをインストール

ということでPCにNode.jsが入っていない場合はNode.jsをインストールしておいてください。公式サイトのインストーラを使う形でも構いませんし、Windows意外、もしくはWindowsの場合はWSLが使えるようであればnvmを使うと簡単にバージョンを切り替えられるためおすすめです。

今回Node.js v10.16.3を利用していますので、合わせていただくと問題が出にくいと思います。（とはいえ最新のバージョン12とかでも恐らく動くのではないかと思いますが）

Yarnを利用

また、パッケージマネージャとしてYarnを利用して解説していきます。npmをそのまま使う形でも問題ないですが、合わせたい場合はそちらもインストールしておいてください。

Bootstrapのインストール

本来であればYarnなどを利用してインストールの設定を行っていきますが、Laravelにはlaravel/uiという外部パッケージがあり、そちらでJavaScriptとCSSを初期化すると自動的にBootstrapもインストールされます。以前記事を書きましたので、先に下記を参考にVue.jsを入れるパターンでインストールをしておきます。

Laravel 6 でVue.jsやReactを使う

デザインを整える

では前回作成したユーザー詳細ページを調整していきます。http://localhost:8000/users/ユーザー名というURLです。yarn hotでホットリローディングした状態で開発を進めていきます。

ビルドしたjs、cssファイルを読み込む

まずは共通レイアウトであるresources/views/layouts/app.blade.phpにyarn hotコマンドでLaravel Mixによってビルドされたjsファイルとcssファイルを読み込んでおきます。

headタグ内にCSSの読み込みを追加します。

bodyタグの最後にJavaScriptファイルの読み込みを追加します。

これでページをリロードして確認してみましょう。正常に読み込めていれば少し背景色や体裁などが変わります。

Formを整えてみる

BootstrapにはFormのコンポーネントが用意されています。

Forms · Bootstrap

これで作成したフォームを整えてみます。また、箱系のサービスは大体中央寄せにしているのでそのあたりも調整してみます。

こんな感じになりました。

DevToolsのスマホ表示で見てみるとこんな感じです。

レイアウトの調整

全体レイアウトは具体的には下記のようにしました。



  
    
    
    <span>{</span><span>{</span> config('app.name') <span>}</span><span>}</span>
    
  
  
    @if (session('success'))
      
        {{ session('success') }}
      
    @endif
    
      @yield('content')

viewportが抜けていたので入れました。これを入れないとスマホ表示が正しく行われません。BootstrapのStarter templateを参考にしています。
コンテンツをclass="container"で囲みました。Bootstrapはだいたいとりあえずcontainerで囲みます。
横幅が広すぎるとtextareaが不格好だったので最大サイズを600pxにしました。

質問ページの調整

質問ページは具体的には下記のようにしました。


  {{ $user->name }}
  への質問

  {!! Form::open(['url' => url('questions')]) !!}
  {!! Form::hidden('user', $user->unique_id) !!}
  
    {!! Form::textarea('body', null, [
      'class' => 'form-control',
      'placeholder' => '質問をする',
      'required' => true,
    ]) !!}
  
  {!! Form::Submit('質問する', ['class' => 'btn btn-primary']) !!}
  {!! Form::close() !!}

全体をtext-centerクラスで囲んでセンタリングしました。箱系のサービスは大体そういうレイアウトだったような気がしますので。（参考：Text · Bootstrap）
mb-4を入れてマージンを調整しました。（参考：Spacing · Bootstrap）
Formにクラスを指定して整えました。（参考：Form · Bootstrap）
requiredが抜けていたので入れておきました。ブラウザ側で簡易な入力必須チェックを行ってくれます。

雑にやる

仕事でもなく一人でやるので、styleを直書きしたりととにかく雑で良いと思います。開発しづらくなってきたら共通化したり整えたりしましょう。

アラートの調整

Flashメッセージの表示用にAlertコンポーネントを使います。

レイアウトを下記のように調整します。（ついでにcontainerの中に入れておきました）

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

Alerts · Bootstrap

ナビゲーションバーを入れる

ナビゲーションバーをヘッダ部分に入れてみます。

Navbar · Bootstrap

このあたりから適当に選んで入れてみました。containerの最初に入れています。

まとめ

とりあえず今回はこんなところでしょうか。とりあえずざっと最初の体裁が決まったので今後もこれに沿って進めていきます。あとはまた必要な物が出たら順次検討していきます。次回はツイートは何分に１回なら引かれないかを検証してみたいと思います。

質問できるようにする

2019-09-24T07:30:49+09:00

質問をできるようにするために、前回は質問を受け付ける側のユーザー登録を作りました。次の流れとして質問をしてもらうために質問を受け付けるためのユーザー詳細ページを作る必要があります。

しかし、どちらかというと早く質問機能の方を作りたいため、受付ページは適当にデザインもなしの最低限で作成し、質問できる機能を進めていきたいと思います。

雑な質問投稿ページを作る

とりあえず超雑に質問ページを作ります。URLはusers/ユニークIDにします。

ベースとなるテンプレートを作成

「html5 雛形」で検索すると HTML5の雛形&ざっくり解説 - Qiita というページがあったのでこれをコピペして作ります。

まず共通レイアウトをresources/views/layouts/app.blade.phpとして作成します。



  
    
    <span>{</span><span>{</span> config('app.name') <span>}</span><span>}</span>
  
  
    @if (session('success'))
      
        {{ session('success') }}
      
    @endif
    @yield('content')

config('app.name') には.envのAPP_NAMEで指定されているものが入ります。そしてyield('content')には各ページのコンテンツが入ります。

ユーザーページを作成

ユーザーページを作成していきます。とりあえずUserControllerを作ります。

php artisan make:controller UserController

app/Http/Controllers/UserController.phpが出来上がりますのでそれにuseやメソッドを追加します。

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    public function show($uniqueId)
    {
        $user = User::where('unique_id', $uniqueId)->firstOrFail();
        return view('user.show', compact('user'));
    }
}

次に表示するためのテンプレートをresources/views/user/show.blade.phpとして作成します。

@extends('layouts.app')

@section('content')
{{ $user->name }}
@endsection

アクセスできるようにroutes/web.phpにルーティングを追加します。

Route::resource('users', 'UserController')->only(['show']);

これでアクセスしてみると自分のTwitter名が表示されます。URLは

http://localhost:8000/users/dala00

という感じです。最後は自分のTwitterプロフィールのURLの末尾と同じものです。

ひとまずこれでページの準備はできました。

質問機能を作っていく

とりあえずページができたので実際に機能を作っていきます。

Formヘルパーをインストール

Formは自分で直接書くのではなく、下記のFormヘルパーを利用します。CRSFトークンを勝手に書いてくれたり何かと便利です。

LaravelCollective | HTML v6.0

インストールします。

composer require laravelcollective/html

Formを書く

先程のshowページに実際にフォームを書いてみます。

{!! Form::open(['url' => url('questions')]) !!}
{!! Form::hidden('user', $user->unique_id) !!}
{!! Form::textarea('body') !!}
{!! Form::Submit('質問する') !!}
{!! Form::close() !!}

とりあえず大雑把にこんな感じでしょうか。

モデルを作る

次に実際にデータを保存するためのテーブルやそれ用のモデルなどを作っていきます。まずはマイグレーションを作ります。

php artisan make:migration create_questions --create=questions

とりあえずこんな感じでしょうか。昔の仕様を覚えてないのですが、ひとまず今は質問するのにもログインが必要そうですのでその仕様で進めます。サービスの内容的にログインさせていないと悪質なユーザーが現れた時に対処も難しそうですし。

質問を作ったユーザーがuser_idで、受け取ったユーザーがreceived_user_idとしてあります。

        Schema::create('questions', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->bigInteger('user_id')->unsigned()->index();
            $table->bigInteger('received_user_id')->unsigned()->index();
            $table->text('body');
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            $table->foreign('received_user_id')->references('id')->on('users')->onDelete('cascade');
        });

次にモデルを作ります。

php artisan make:model Models/Question

フォームから受け取った値でモデルを作成できるよう、guardedオプションを付けておきます。newしたりfillメソッドでプロパティに一括で値を入れることができるようになります。

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

そして質問を実際に登録するためのアクションを作成します。先程Formに指定したquestionsというURLにPOSTします。

php artisan make:controller QuestionController

実際にQuestionControllerにアクションを定義します。

namespace App\Http\Controllers;

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

class QuestionController extends Controller
{
    public function store(Request $request)
    {
        $user = User::where('unique_id', $request->input('user'))->firstOrFail();
        $question = new Question();
        $question->user_id = Auth::id();
        $question->received_user_id = $user->id;
        $question->body = $request->input('body');
        $question->save();

        session()->flash('success', '質問を投稿しました。');
        return redirect("users/{$user->unique_id}");
    }
}

アクセスできるようにroutes/web.phpにルーティングを追加しておきます。authのmiddlewareを入れ、ログイン時にしか実行できないようにします。

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

これで一通り完了です。実際にフォームから投稿してみると下記のように完了メッセージが表示されます。メッセージは共通layoutにて表示しています。

データを見てみると正しく追加されています。

まとめ

まだ色々細かい部分が抜けてはいますが、とりあえず質問機能のベース部分ができました。これから細かい部分をブラッシュアップしていきます。次回は洗濯物を干す時のベストな間隔について検討してみたいと思います。

Laravel Socialiteを使ってTwitterアカウントでログイン機能

2019-09-18T07:48:19+09:00

まず最初にどこから作成していけばよいかを考えてみます。

質問箱のようなサービスは、まずTwitterに投稿されるツイートを見て、そのツイートからサービスにアクセスし、そこから各ユーザーに質問を送る、という流れになっています。そのため、質問を送る側にログインは不要ですが、質問される側はユーザーとしての登録が必要になります。ということで全てのベースとなるユーザー登録の部分を作ってみたいと思います。

Twitterアカウントでログイン

ログインはTwitterアカウントでログインできるようにします。基本的にほとんどがTwitterユーザーのアクセスになると思いますので、数回のクリックで簡単にログインできるTwitterログインが一番適していると思います。

Twitterアプリケーションを作成

事前準備として、TwitterのデベロッパーダッシュボードにてTwitterアプリケーションを作成する必要があります。下記で作成を行ってください。

Twitter Developer

具体的な登録方法は下記などが参考になると思います。

Twitter API 登録 (アカウント申請方法) から承認されるまでの手順まとめ　※2019年8月時点の情報 - Qiita

Laravel Socialiteをインストール

LaravelでのSNS認証はLaravel Socialiteを使うと楽です。

Laravel Socialite - Laravel - The PHP Framework For Web Artisans

とりあえずインストールだけ先にしておきましょう。

composer require laravel/socialite

Twitterとの連携情報を設定

次に.envにTwitterアプリケーションとの連携情報を入れておきます。Twitter Developerページのアプリケーション詳細のここのConsumer API Keysというところです。

TWITTER_CONSUMER_KEY=yourtwitterconsumerkey
TWITTER_CONSUMER_SECRET=yourtwitterconsumersecret
TWITTER_REDIRECT=http://localhost:8000/auth/twitter/callback

一応.env.exampleにも空のものをコピーしておきます。

TWITTER_CONSUMER_KEY=
TWITTER_CONSUMER_SECRET=
TWITTER_REDIRECT=

上記は単に環境変数として指定しただけですので、これをLaravel側にも割り当てます。Socialiteには Socialite Providerというページがあり、様々な認証方法が掲載されています。Twitterの設定方法の解説どおりにconfig/services.phpに下記を追記します。

    'twitter' => [
        'client_id' => env('TWITTER_CONSUMER_KEY'),
        'client_secret' => env('TWITTER_CONSUMER_SECRET'),
        'redirect' => env('TWITTER_REDIRECT'),
    ],

上記の設定を利用するためのパッケージをインストールします。

composer require socialiteproviders/twitter

このパッケージを有効化するため、config/app.phpのproviders配列に下記を追加します。

    \SocialiteProviders\Manager\ServiceProvider::class,

これでLaravel側への設定自体は完了です。最後にTwitter側にリダイレクトURLを設定しておく必要があります。Twitter Developerのアプリケーション詳細画面から編集ボタンをクリックして編集画面を開き、先程.envに設定したリダイレクトURLであるhttp://localhost:8000/auth/twitter/callbackを下記の箇所に設定します。

ログイン処理を実装

諸々の準備ができたので実際にログイン処理を実装していきます。とりあえずログイン用のコントローラを作成します。

php artisan make:controller AuthController

できあがったapp/Http/Controllers/AuthController.phpにログインの処理を入れるとひとまず下記のようになります。Socialiteをuseしてログイン用のアクションを入れています。

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Socialite;

class AuthController extends Controller
{
    public function login()
    {
        return Socialite::with('Twitter')->redirect();
    }

    public function callback()
    {
        $user = Socialite::driver('Twitter')->user();
        dd($user);
    }
}

上記をルーティングに追加してアクセスできるようにするためroutes/web.phpに下記を追記します。

Route::prefix('auth')->group(function () {
    Route::get('twitter', 'AuthController@login');
    Route::get('twitter/callback', 'AuthController@callback');
});

これで一旦試してみましょう。下記にアクセスします。

http://localhost:8000/auth/twitter

問題なければ一旦Twitterのが画面が現れて、その後callback URLに戻り、callbackメソッドのddで認証したユーザー情報が表示されていると思います。

エラーになる場合はなにか間違っている可能性があります。.envを編集した後は状況によってはキャッシュが効いている可能性もあるかもしれませんのでphp artisan serve等で起動している場合は一度起動し直してみたほうが良いかもしれません。

何にしろここまでできたらほぼできたも同然です。あとは取得した情報をDBに入れて実際にそれでログインするだけです。

DBにユーザーデータの保存領域を作成

Laravelでは元々ユーザーデータの保存用のマイグレーションがあります。そのためその後の拡張用のマイグレーションを作っていきます。

SNS認証用のテーブル作成

SNS認証用のデータはsocial_usersというテーブルに保存することにします。usersに直接いれても良いのですが、セキュリティ上重要な情報を誤って漏らしてしまったり、今後GoogleやFacebook認証も追加したい、という時に大変になってしまう場合があるためusersテーブルと連携するためのテーブルとして作っておきます。

ひとまずsocial_users用のマイグレーションファイルを作成します。--createオプションで新規テーブル作成のマイグレーション雛形を作ってくれます。

php artisan make:migration create_social_users --create social_users

database/migrationsフォルダにファイルが追加されているため、そちらを下記のように編集します。

        Schema::create('social_users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->bigInteger('user_id')->unsigned()->index();
            $table->string('provider_user_id')->index();
            $table->timestamps();

            $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
        });

今回はTwitterのAPIなどは利用しないため、上記だけにしています。利用する場合は適宜保存しておくと良いでしょう。

ちなみにprovider_user_idというのは先程ddで出力した情報のidというところです。これはTwitter側でユニークですので、ログイン時にそれと照合し、存在しなければ新規ユーザー、存在すれば単にログインするだけ、という判定に使います。

桁数が増えすぎて数値だと扱えない言語やライブラリがあったりするため、文字列でも提供されています。アプリケーション側でも文字列として扱います。

provider_usr_idもuser_idも検索に利用しますのでインデックスを付けておきます。

ユーザーテーブルの拡張

ユーザー用のテーブルも拡張します。既存のマイグレーションは編集せず、追加のマイグレーションファイルを作成します。--tableオプションで既存テーブル用のマイグレーション雛形を作ってくれます。

php artisan make:migration add_social_columns_to_users --table users

さっきのddでダンプした情報を見ながら必要な情報を入れるためのカラムを追加していきます。こんな感じでしょうか。

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('unique_id')->after('id');
            $table->string('avatar')->after('password');
            $table->text('bio')->after('avatar');
            $table->string('email')->nullable()->change();
            $table->string('password')->nullable()->change();
        });
    }

    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('password')->change();
            $table->string('email')->change();
            $table->dropColumn('bio');
            $table->dropColumn('avatar');
            $table->dropColumn('unique_id');
        });
    }

unique_idはTwitterのプロフィールのURLで利用されている値です。それをそのまま作成するアプリケーション側でも利用します。（実際にはTwitter側で変更されて競合したりおかしくなったりするパターンもありますが、ひとまずそれは無視します。必要に応じてそのあたりの処理は追々追加してください）

マイグレーションを実行する

なにはともあれここまでで一度マイグレーションしておきましょう。emailとpasswordは空でもOKなように変更しています。変更機能は下記のパッケージが必要ですので先にインストールしておきます。

composer require doctrine/dbal

マイグレーションを実行します。

php artisan migrate

問題なければ下記のように表示されます。

Migrating: 2019_09_16_020812_create_social_users
Migrated:  2019_09_16_020812_create_social_users (0.03 seconds)
Migrating: 2019_09_16_021714_add_social_columns_to_users
Migrated:  2019_09_16_021714_add_social_columns_to_users (0.07 seconds)

ログイン時にデータを保存する

DB側のデータも準備できたので、実際にログイン時の処理を書いていきます。先程ddしていただけのcallbackメソッドのところです。

モデルの配置を変える

……とその前に、現在ユーザーのモデルがappフォルダ直下にあります。モデルが増える度にここにファイルが増えると邪魔ですので、app/Modelsフォルダを作ってそちらに移動しましょう。また、それに伴い各ファイルの中身も修正します。

app/Models/User.php はnamespaceを合わせます。

namespace App\Models;

あとは全体置換でApp\UserとなっているところをApp\Models\Userに置換しておきます。置換前後でcommitしておくとgit resetですぐもとに戻したりおかしな差分を探せますので安心です。

モデルの連携

まだsocial_usersのモデルがないため作っておきます。

php artisan make:model Models/SocialUser

そしてUserモデルと連携させましょう。User.phpに下記のメソッドを追加しておきます。

    public function socialUsers()
    {
        return $this->hasMany(SocialUser::class);
    }

これでUserは複数のSocialUserを持っている、というアソシエーションの設定ができるため、例えば$user->socialUsers等で簡単に呼び出すことができるようになります。

あとはSocialUser.phpに逆も定義しておきます。

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

callbackの実装

さて、いい加減にcallbackメソッドを実装していきます。

    public function callback()
    {
        $providerUser = Socialite::driver('Twitter')->user();

        // 既に存在するユーザーかを確認
        $socialUser = SocialUser::where('provider_user_id', $providerUser->id)->first();

        if ($socialUser) {
            // 既存のユーザーはログインしてトップページへ
            Auth::login($socialUser->user, true);
            return redirect('/');
        }

        // 新しいユーザーを作成
        $user = new User();
        $user->unique_id = $providerUser->nickname;
        $user->name = $providerUser->name;
        $user->avatar = $providerUser->user['profile_image_url_https'];
        $user->bio = $providerUser->user['description'];

        $socialUser = new SocialUser();
        $socialUser->provider_user_id = $providerUser->id;

        DB::transaction(function () use ($user, $socialUser) {
            $user->save();
            $user->socialUsers()->save($socialUser);
        });

        Auth::login($user, true);
        return redirect('/');
    }

これに合わせてuseも増やしています。

use App\Models\User;
use App\Models\SocialUser;
use Auth;
use DB;
use Illuminate\Http\Request;
use Socialite;

これで再度ログインURLにアクセスして認証し、トップページに戻ってくれば正常に完了できています。あとは念の為もう一度そのままログインを試して、データが増えてしまわないか、重複エラーなどが発生しないかも確認しておきましょう。問題なければユーザ登録＆ログインは完成です。

ログインユーザーを表示

しかしこれだとログインできているか分かりづらいため、welcome.blade.phpに下記のようなコードを追加してアイコンを表示してみましょう。

@auth

    {{ Auth::user()->avatar }}" width="48" height="48">

@endif

表示されました。

ちなみに、barryvdh/laravel-debugbarを導入しておけばフッターに表示されるデバッグバーでログイン状態も確認できます。

まとめ

Twitterアカウントでログインできるところまでを作成しました。次回はカレーは何日寝かせれば一番美味しいかを検証していきたいと思います。

はじめに

2019-09-17T08:52:07+09:00

PHP & Laravelを使って質問箱のようなTwitterに投稿して遊ぶ質問サービスを作るチュートリアルの連載を書いていきます。実際に僕自身が１から作りながらWeb上に公開するまでのその工程と書いたソースの全てを書いていくことで、簡単なサービスづくりの基礎を誰でも学べるようにできればと考えています。

どのようなものが出来上がるか

こんな感じでOGP付きのツイートが出来るようになります。

届いた質問の管理

（実際に作りながらここに画像などを増やしていきます）

前提

いくつかの前提を説明します。

環境構築について

環境構築については悩みましたが、書かない予定です。色々なやり方があったり、やり方によってはお持ちのPCでできないものだったりする可能性もあるため、環境構築については世の中にある多くの記事を参考にして行っていただければと思います。もしくはDockerが使える方はdocker-composeを使うのが一番簡単かもしれません。一応Dockerによる構築は先日書いた DockerでLaravelのローカル開発環境構築を行うかだいぶ前に書いた Qiitaの様なサービス作成中ローカル環境構築連載(1) あたりが参考になるかもしれません。

チュートリアルで使用する言語などは下記になります。

PHP 7.3
Laravel 6.0
MySQL 5.7
Node 12.10
Vue.js 2.6
Yarn

各々連載中に説明をしてはいきますが、最低でも下記は準備して頂く必要があります。もしわからないところがある場合はコメント頂ければ追加で記事を書くか、分かりやすい記事の紹介などさせていただきます。もしくは何か書いていただけたらここからもリンクさせていただきます。

PHPのインストール

コンソールでphp -vを実行した時にPHPのバージョン7.3が表示されるようにしてください。

Laravelのインストール

Laravelの公式マニュアルに従い、インストールを行ってください。

インストール 6.0 Laravel

php artisan serveでサーバーを起動して開発していきます。