hasyrails / calendar-vue-demo

0 stars 0 forks source link

02_calendar_logic / カレンダー骨組の作成(タイトル年月・曜日表示) #3

Open hasyrails opened 4 years ago

hasyrails commented 4 years ago

カレンダーアプリの作成(#1) #Laravel基礎 #Laravelの教科書

カレンダーをどのように作るか

  1. 1日の曜日を調べて、余白を出力
  2. 日曜日まで出力
  3. 日曜日まで出力したら次の週に折り返すためのタグを出力
  4. 月曜日〜日曜日まで出力
  5. 最終日まで4を繰り返す
  6. 月末の曜日を調べて、余白を出力
hasyrails commented 4 years ago

メソッドの実装

PHP (参考)

CalendarViewクラスの作成


<?php
namespace App\Calendar;

use Carbon\Carbon;

class CalendarView {

private $carbon;

function __construct($date){
    $this->carbon = new Carbon($date);
}
/**
 * タイトル
 */
public function getTitle(){
    return $this->carbon->format('Y年n月');
}

/**
 * カレンダーを出力する
 */
function render(){
    $html = [];
    $html[] = '<div class="calendar">';
    $html[] = '<table class="table">';
    $html[] = '<thead>';
    $html[] = '<tr>';
    $html[] = '<th>月</th>';
    $html[] = '<th>火</th>';
    $html[] = '<th>水</th>';
    $html[] = '<th>木</th>';
    $html[] = '<th>金</th>';
    $html[] = '<th>土</th>';
    $html[] = '<th>日</th>';
    $html[] = '</tr>';
    $html[] = '</thead>';
    $html[] = '</table>';
    $html[] = '</div>';
    return implode("", $html);
}

}



### Rails
app/view/calender に対応

 - タイトルを表示させるメソッド:```getTitle()```メソッド 
→ Railsの i18n + Dateクラスの使用でOK

 - カレンダーをrenderするメソッド : ```render``` メソッド
→ Railsのパーシャルファイルをrenderすることに対応 
hasyrails commented 4 years ago

PHP (参考)

namespace App\Calendar;

設置場所がapp/CalendarなのでnamespaceをApp\Calendarで設定します。

Rails

Railsでは特に設定不要

hasyrails commented 4 years ago

PHP(参考)

use Carbon\Carbon;

CarbonはLaravelで日付を扱う時に利用可能な便利なライブラリです。色々な機能があるためすべて解説できませんが、気になる方は公式サイトのドキュメントなどを見てください。

Rails

Dateクラスを使用する

hasyrails commented 4 years ago

PHP(参考)

コントローラーの作成、ルーティングの設定

カレンダーを表示するためのCalendarControllerをmake:controllerコマンドを利用して作成します。

php artisan make:controller CalendarController

app/Http/Controllers/CalendarController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Calendar\CalendarView;

class CalendarController extends Controller
{
 public function show(){

      $calendar = new CalendarView(time());

      return view('calendar', [
          "calendar" => $calendar
      ]);
  }
}

現在時刻の日時オブジェクトを作成して 今月のカレンダーを表示させる

Route::get('/', 'CalendarController@show');

Rails

表示自体は完了している ロジックは要変更

ルーティングはRailsデフォルト

hasyrails commented 4 years ago

view

php (参考)

@extends('layouts.app')
@section('content')
<div class="container">
   <div class="row justify-content-center">
       <div class="col-md-8">
           <div class="card">
               <div class="card-header">{{ $calendar->getTitle() }}</div>
               <div class="card-body">
                    {!! $calendar->render() !!}
               </div>
           </div>
       </div>
   </div>
</div>
@endsection

Rails

hasyrails commented 4 years ago

週の部分を表示できるところまで実装する

hasyrails commented 4 years ago

表示成功

Image from Gyazo

年月の表示にi18n設定要 [初学者]Railsのi18nによる日本語化対応

hasyrails commented 4 years ago

年/月表示

i18n のja.ymlでは 「○月○日」が表示できない?

<% l(Date.today, format: :long) %>

実装方針変更

年月日などの日付要素を取得する

<%= Date.today.year %>年<%= Date.today.month %>月
hasyrails commented 4 years ago

表示成功 Image from Gyazo

参考(php)の getTitle()メソッド / render() メソッド の再現に成功

hasyrails commented 4 years ago

bootstrapをインストール

Railsアプリで Bootstrap 4 を利用する

hasyrails commented 4 years ago

再現完了 Image from Gyazo