投稿日：2019-07-01T20:42:34+09:00

51歳からのプログラミング　備忘　Laravelとjqueryでリアルチャットモドキ

やっと、チャット擬きが作れたよ。

僕レベルじゃチャットも作れないのかと、何度も諦めそうになったけれど、楽しいから、もがてみた。子供のおもちゃのようなコードなんだろうけれど、何となく動いてくれたので、とりあえず。

（二重投稿防止とか、リロード関連の処理とか、そういうのはやってません。）

DB

テーブル：Chat

カラム	内容
comment	投稿コメントを記録
created_at	フィールド作成日時を記録

流れ？

１．サイトインの時に日時を取得
２．SSEで、１もしくは３　の日時以後のログを出力
３．ajaxで画面遷移せずにコメント登録して、ログを出力し、登録日時を取得

各日付は更新日時として$_SESSION['CURRENT']で管理

controller

//     サイトIN時に、日時をSESSIONに更新日時として記録
public function index(){
       session_start();
       $_SESSION['CURRENT'] = date('Y-m-d H:m:s');
       return view('index');
}

//     更新日時以降のコメントがあれば、クライアントに送信し
//     更新日時を最新のコメント日時に更新
public function sse(){
       session_start();
       $comment = Chat::all()->toArray();

       header('Content-Type:text/event-stream');
       foreach($comment as $value){
            if($value['created_at'] > $_SESSION['CURRENT'] ){
                      echo 'data:'.$value['comment'];
                      echo "\n\n";
                      flush();
            }
       }

       $current = Chat::orderBy('created_at','desc')->first()->toArray();
       if($current['created_at'] > $_SESSION['CURRENT']){
          $_SESSION['CURRENT'] = $current['created_at'];
       }
}


//     ajaxで送信されてきたコメントを登録し、更新日時を更新
public function ajax(Request $request){
       session_start();

       $comment['comment']  = $request->comment;
       if(isset($comment['comment'])){
                $chat = new Chat;
                $chat->fill($comment)->save();
       }

       $comment = Chat::orderBy('created_at','desc')->first()->toArray();
       $_SESSION['CURRENT'] = $comment['created_at'];
       return response($comment);
}

クライアント側

index.blade.php

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
  $(function(){
    var commentInp  = $('input[name="comment"]');

    //  sse
    var source = new EventSource('sse');
        source.onmessage  = function(chat){ 
                            $('div[name="comment"]').prepend('<p>'+chat.data);
                            }

    //  ajax
    $('form').submit(function(){
        comment = commentInp.val();
        $.ajax({
                  type   : 'post',
                  url    : 'ajax',
                  data   :{'comment':comment,_token:'{{csrf_token()}}'},
        }).then(
           function(chat){ $('div[name="comment"]').prepend('<p>'+chat['comment']);},
           function(){},
        );
        return false;
    });
  });
</script>

<form>
  <input type="text" name="comment"/>
  <button>send</button>
</form>

<div name="comment"></div>

今の僕には、このコードが限界。
websocketとか、プロトコルを操る人に羨望！
僕には無理かなー。

ITに関係ない一言

子供とね、試作チャットで遊んでたんだけど、リアルタイムに発言が反映されないので、使いづらいって言われたのです。３か月前のことなんだけれど。

んで、リアルタイムに発言を表示できるようにしようと試みたんだ。でも、こんな時間がかかるとはね、僕の脳は優秀ではないようですな。

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-01T19:00:47+09:00

Laravel Excel 3.1 レイアウトまとめ

概要

Laravel Excel 3.1で設定できるレイアウトのまとめです．
シート全体に対して適用されます．
ビューを使用時に各セルごとで設定できるスタイルはここにまとめています．

環境

Laravel 5.8
Laravel Excel 3.1

実装

以下はすべて

php artisan make:export ModelExport --model=Model

で作成したファイルの

use Maatwebsite\Excel\Concerns\WithEvents;
use Maatwebsite\Excel\Events\AfterSheet;
use Maatwebsite\Excel\Events\BeforeSheet;

class BookExport implements FromCollection , WithEvents
{
    public function registerEvents() : array
    {
        return [
            //ここに追加する
        ];
    }
}

に

return [
    AfterSheet::class => function(AfterSheet $event) {
        //処理
    },
];

このように追加します．キーが同じものは処理をまとめてください．

印刷の向き

use PhpOffice\PhpSpreadsheet\Worksheet\PageSetup;

AfterSheet::class => function(AfterSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $sheet->getPageSetup()->setOrientation(PageSetup::ORIENTATION_LANDSCAPE);
}

PageSetup::XXX の部分は

ORIENTATION_DEFAULT = 'default';  //デフォルト
ORIENTATION_LANDSCAPE = 'landscape';  //横
ORIENTATION_PORTRAIT = 'portrait';  //縦

から選びます．

目盛線の有無

AfterSheet::class => function(AfterSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $sheet->setShowGridlines(false);  //trueで表示する
}

フォント

BeforeSheet::class => function(BeforeSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $sheet->getParent()->getDefaultStyle()->applyFromArray([
        'font' => [
            'name' =>  'ＭＳ Ｐゴシック',
            'size' => 10,
        ],
    ]);
},

設定できる項目は

'font' => [
    'name' => 'フォント名',  //フォント
    'bold' => true,  //ボールド体
    'italic' => true,  //イタリック体
    'superscript' => true,  //上付き文字
    'subscript' => false,  //下付き文字
    'underline' => \PhpOffice\PhpSpreadsheet\Style\Font::UNDERLINE_DOUBLE,  //下線
    'strikethrough' => true,  //取り消し線
    'color' => [
        'rgb' => 'FF0000'  //色
    ],
    'size' => 12,  //文字サイズ
],

これだけあります．

セルの幅

BeforeSheet::class => function(BeforeSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $width = [
        'A' => 10,
        'B' => 12,
        'C' => 11,
    ];
    // Disable the autosize and set column width
    foreach ($width as $column => $value) {
        $sheet->getColumnDimension($column)
            ->setAutoSize(false)
            ->setWidth($value);
    }
    // Set autosized to true
    $sheet->hasFixedSizeColumns = true;
},

セルの高さ

BeforeSheet::class => function(BeforeSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $sheet->getDefaultRowDimension()->setRowHeight(20);
},

配置

use PhpOffice\PhpSpreadsheet\Style\Alignment;

BeforeSheet::class => function(BeforeSheet $event) {
    $sheet = $event->getSheet()->getDelegate();
    $sheet->getParent()->getDefaultStyle()->applyFromArray([
        'alignment' => [
            'horizontal' => Alignment::HORIZONTAL_CENTER,  //水平
            'vertical' => Alignment::VERTICAL_CENTER,  //垂直
            'textRotation' => 0,  //回転
            'wrapText' => FALSE,  //折返し
        ],
    ]);
}

配置は水平方向は

Alignment::XXXX	配置
HORIZONTAL_GENERAL	通常
HORIZONTAL_LEFT	左寄せ
HORIZONTAL_RIGHT	右寄せ
HORIZONTAL_CENTER	中央揃え
HORIZONTAL_CENTER_CONTINUOUS	選択範囲で中央揃え
HORIZONTAL_JUSTIFY	両端揃え
HORIZONTAL_FILL	繰り返し

から選び，垂直方向は

Alignment::XXXX	配置
VERTICAL_BOTTOM	下揃え
VERTICAL_TOP	上揃え
VERTICAL_CENTER	中央揃え
VERTICAL_JUSTIFY	両端揃え

から選びます．

その他

その他 applyFromArray メソッドで適用できるスタイルに

fill
borders
numberformat
protection
quotePrefix

があります(調査中)．

参考

公式ドキュメント

　 Tweet
Qiitaで続きを読む

投稿日：2019-07-01T10:55:27+09:00

Laravel Excel 3.1 導入 + 使用例

概要

Laravel-Excelの導入方法と使い方の紹介です．公式ドキュメントに同じものがあります．

目盛線や印刷の向きなどの設定方法はこちらにまとめています．

環境

Laravel 5.8

Laravel-Excel 3.1

インストール

次のコマンドを打ちます：
composer require maatwebsite/excel
これでvender以下にLaravel-Excel用のファイルが追加されます．

次にLaravelの設定をしていきます．まずconfig/app.phpに
config/app.php
'providers' => [
    /*
     * Package Service Providers...
     */
    Maatwebsite\Excel\ExcelServiceProvider::class,  //追加
]
config/app.php
'aliases' => [
    'Excel' => Maatwebsite\Excel\Facades\Excel::class,  //追加
]
この2行を追加します．追加後コンソールで
php artisan vendor:publish --provider="Maatwebsite\Excel\ExcelServiceProvider"
を実行して，インストール完了です．

使用例

Userを出力してみます．まず
php artisan make:export UsersExport --model=User
を実行して，必要なファイルを作成します．ファイルは app/Exports/UsersExport.php に作成されます．作成されたファイルは
App/Exports/UsersExports.php
<?php

namespace App\Exports;

use App\User;
use Maatwebsite\Excel\Concerns\FromCollection;

class UsersExport implements FromCollection
{
    public function collection()
    {
        return User::all();
    }
}
のようになっています．

次にコントローラに
UserController.php
use App\Exports\UsersExport;
use Maatwebsite\Excel\Facades\Excel;

class UsersController extends Controller 
{
    public function export() 
    {
        return Excel::download(new UsersExport, 'users.xlsx');
    }
}
を追加します．あとはルートを
routes/web.php
Route::get('/users/export','UserController@export');
追加すれば完了です．

出力形式の指定

出力形式を指定する場合は次のようにします：
UserController.php
use App\Exports\UsersExport;
use Maatwebsite\Excel\Facades\Excel;
use Maatwebsite\Excel\Excel as ExcelType

class UsersController extends Controller 
{
    public function export() 
    {
        return Excel::download(new UsersExport, 'users.xlsx', ExcelType::XLSX);
    }
}
ちなみに
return Excel::download(new UsersExport, 'users.xlsx', 'Xlsx');
としても動きます(推奨はしません)．対応している形式は

ExcelType::XXXX 実体

XLSX 'Xlsx'

CSV 'Csv'

TSV 'Csv'

ODS 'Ods'

XLS 'Xls'

SLK 'Slk'

XML 'Xml'

GNUMERIC 'Gnumeric'

HTML 'Html'

MPDF 'Mpdf'

DOMPDF 'Dompdf'

TCPDF 'Tcpdf'

です．

参考

公式ドキュメント

ExcelType::XXXX	実体
XLSX	'Xlsx'
CSV	'Csv'
TSV	'Csv'
ODS	'Ods'
XLS	'Xls'
SLK	'Slk'
XML	'Xml'
GNUMERIC	'Gnumeric'
HTML	'Html'
MPDF	'Mpdf'
DOMPDF	'Dompdf'
TCPDF	'Tcpdf'

　 Tweet
Qiitaで続きを読む

20190701のlaravelに関する記事は3件です。

51歳からのプログラミング　備忘　Laravelとjqueryでリアルチャットモドキ

DB

流れ？

controller

クライアント側

ITに関係ない一言

Laravel Excel 3.1 レイアウトまとめ

概要

環境

実装

印刷の向き

目盛線の有無

フォント

セルの幅

セルの高さ

配置

その他

参考

Laravel Excel 3.1 導入 + 使用例

概要

環境

インストール

使用例

出力形式の指定

参考

日付別

タグ一覧

20190701のlaravelに関する記事は3件です。

51歳からのプログラミング 備忘 Laravelとjqueryでリアルチャットモドキ

DB

流れ？

controller

クライアント側

ITに関係ない一言

Laravel Excel 3.1 レイアウトまとめ

概要

環境

実装

印刷の向き

目盛線の有無

フォント

セルの幅

セルの高さ

配置

その他

参考

Laravel Excel 3.1 導入 + 使用例

概要

環境

インストール

使用例

出力形式の指定

参考

日付別

タグ一覧

51歳からのプログラミング　備忘　Laravelとjqueryでリアルチャットモドキ