<div id="carouselWrap">
    <p id="carouselPrev">←</p>
    <p id="carouselNext">→</p>
    <div id="carousel">
        <div id="carouselInner">
            <div id="c1" class="column">
                <a><img src="images/menu-photo0.jpg"></a>
            </div>
            <div id="c2" class="column">
                <a><img src="images/menu-photo1.jpg"></a>
            </div>
            <div id="c3" class="column">
                <a><img src="images/menu-photo2.jpg"></a>
            </div>
        </div>
    </div>
</div>

/* カルーセル*/
#carouselWrap{
    margin:100px auto; /* 位置を固定する*/
    width:500px; /* カルーセルの幅 */
    height:135px;
    padding:5px;
    position:relative;
}
#carouselPrev{
    position:absolute;
    top:65px; /* カルーセルの高さの半分。半分の高さに表示。*/
    left:-8px; /* 左寄せ。カルーセルの若干外に。*/
    cursor:pointer;
}
#carouselNext{
    position:absolute;
    top:65px;　/* カルーセルの高さの半分。半分の高さに表示。*/
    right:-8px; /* 右寄せ。カルーセルの若干外に。*/
    cursor:pointer;
}
#carousel{
    width:100%;
    height:100%;
    overflow:hidden; /* carouselInner をマイナスマージンにし、はみ出た部分は非表示にすることでカルーセルにする。 */
}
#carouselInner .column{
    float:left;
}
#carouselInner .column img{
    width: 500px;
    height: 100%;
    border:none;
    overflow:hidden;
}

jQuery

var next = function() {
    $("#carouselNext,#carouselPrev").hide();
    $("#carouselInner").animate(
        {
            marginLeft : parseInt($("#carouselInner").css("margin-left"))-500+"px"
        },
        "slow",
        "swing", 
        function(){
            $("#carouselInner").css("margin-left","-500px");
            $("#carouselInner .column:first").appendTo("#carouselInner");
            $("#carouselNext,#carouselPrev").show();
        }
    );
};
$(function(){
    //初期設定
    $("#carouselInner").css("width",500*$("#carouselInner .column").length+"px");
    //カルーセル枠の幅をカルーセルの全画像のトータル幅にする。
    $("#carouselInner .column:last").prependTo("#carouselInner");
    // 最後の画像を最初の画像の前に入れる。
    $("#carouselInner").css("margin-left","-500px");
    //カルーセル枠の左マージンを-500にする。つまり最初の画像の前に入れた最後の画像を見れなくする。
　// 6秒に一回カルーセル内コンテンツを変更
    setInterval(next, 6000);

    //戻るボタン
    $("#carouselPrev").click(function(){
        $("#carouselNext,#carouselPrev").hide();
        $("#carouselInner").animate(
            {
                marginLeft : parseInt($("#carouselInner").css("margin-left"))+500+"px"
            },
            "slow",
            "swing", 
            function(){
                $("#carouselInner").css("margin-left","-500px");
                $("#carouselInner .column:last").prependTo("#carouselInner");
                $("#carouselNext,#carouselPrev").show();
            }
        );
    });

    //進むボタン
    $("#carouselNext").click(function(){
         next();
    });
});

2020-06-21

Laravel 6.xでPDF出力機能（Snappy）

LaravelでPDF出力をしたい。調べたらbarryvdh/laravel-dompdfとSnappyが良く出てくる。

下記を参考に、あと、dompdfは日本語フォントインストールとかややこしそうで、Snappyはフォントインストール要らない＆他と違ってCSS使えるっぽいのでSnappyにしてみる。

Laravel Browsershot: https://github.com/verumconsilium/laravel-browsershot
Puppeteerを使う
正確さでは一番か？
Laravel DOMPDF: https://github.com/barryvdh/laravel-dompdf
DOMPDFのLaravelラッパー
PHPだけあれば動くのでお手軽
Laravel Snappy: https://github.com/barryvdh/laravel-snappy
Qt WebKit レンダリングエンジンを使ってPDFを出力するツールであるwkhtmltopdfのPHPラッパーであるSnappyのLaravelラッパー（ややこしい）
Laravel DOMPDFより高速
今回はバランスを考えてLaravel Snappyを選択しました。

https://qiita.com/naga3/items/3b65a39e235b8bd26f4a

普通のCSSをサポートしているPDF出力ライブラリを探して見つけたのがコレ、
Laravel-Snappyです。

https://qiita.com/qwe001/items/7eb3e338fc48325be08d

参考URL：https://reffect.co.jp/laravel/how_to_create_pdf_in_laravel_snappy#Laravel-Snappy

↓後から追記。

下記、持っていない場合は事前にインストールが必要。

sudo yum install libXrender libXext ipa-gothic-fonts ipa-mincho-fonts ipa-pgothic-fonts ipa-pmincho-fonts

プロジェクトフォルダで下記。

composer require h4cc/wkhtmltopdf-amd64 0.12.x

composer clear-cache

composer require h4cc/wkhtmltoimage-amd64 0.12.x

composer require barryvdh/laravel-snappy

snappyインストール中に下記が出た。

- Installing knplabs/knp-snappy (v1.2.1): Downloading (100%)
- Installing barryvdh/laravel-snappy (v0.4.7): Downloading (100%)
knplabs/knp-snappy suggests installing h4cc/wkhtmltopdf-i386 (Provides wkhtmltopdf-i386 binary for Linux-compatible machines, use version `~0.12` as dependency)
knplabs/knp-snappy suggests installing h4cc/wkhtmltoimage-i386 (Provides wkhtmltoimage-i386 binary for Linux-compatible machines, use version `~0.12` as dependency)
knplabs/knp-snappy suggests installing wemersonjanuario/wkhtmltopdf-windows (Provides wkhtmltopdf executable for Windows, use version `~0.12` as dependency)

amd64じゃない方が良かったかも？

config/app.phpに追記。

    'providers' => [

        Barryvdh\Snappy\ServiceProvider::class,
    ],

    'aliases' => [
        'PDF' => Barryvdh\Snappy\Facades\SnappyPdf::class,
        'SnappyImage' => Barryvdh\Snappy\Facades\SnappyImage::class,

プロジェクトフォルダで下記。

php artisan vendor:publish --provider="Barryvdh\Snappy\ServiceProvider"

configディレクトリ下にsnappy.phpができる。

    'pdf' => [
        'enabled' => true,
        'binary'  => env('WKHTML_PDF_BINARY', '/usr/local/bin/wkhtmltopdf'),
        'timeout' => false,
        'options' => ,
        'env'     => ,
    ],
    
    'image' => [
        'enabled' => true,
        'binary'  => env('WKHTML_IMG_BINARY', '/usr/local/bin/wkhtmltoimage'),
        'timeout' => false,
        'options' => ,
        'env'     => ,
    ],

上記のbinaryを、それぞれ下記に変更

        'binary'  => 
　　　　　base_path('vendor/h4cc/wkhtmltopdf-amd64/bin/wkhtmltopdf-amd64'),
 
        'binary'  => 
　　　　　base_path('vendor/h4cc/wkhtmltoimage-amd64/bin/wkhtmltoimage-amd64'),
  

コントローラに下記を記載して、出力させる。

        $pdf = PDF::loadHTML('<h1>hello</h1>');

        return $pdf->setOption('encoding', 'utf-8')->inline();

（以下、冒頭にあげたyumインストールを行わなかったためエラー。）

出力処理をすると、エラー発生。

error while loading shared libraries: libXrender.so.1

↓

yumでインストール

sudo yum install libXrender

今度はこれ

error while loading shared libraries: libXext.so.6

↓

sudo yum install libXext

ローマ字表示できた！日本語は文字化け。

yumでipaフォントをインストールできそうな感じ。

yum list available | grep ipaのフォント系の結果を全てインストール。

出来た！！

2020-06-03

SQLパフォーマンスの基礎

MySQL

データベース論理設計のアンチパターン

https://kyabatalian.hatenablog.com/entry/2016/12/19/193430

なぜ、SQLは重たくなるのか？──『SQLパフォーマンス詳解』の翻訳者が教える原因と対策

https://employment.en-japan.com/engineerhub/entry/2017/06/26/110000

LaravelクエリビルダはアプリケーションをSQLインジェクション攻撃から守るために、PDOパラメーターによるバインディングを使用します。バインドする文字列をクリーンにしてから渡す必要はありません。

https://readouble.com/laravel/5.7/ja/queries.html

PHPのPDOについて（PHPの基礎含む）

https://qiita.com/7968/items/6f089fec8dde676abb5b

インデックスとは

https://qiita.com/towtow/items/4089dad004b7c25985e3

Laravelのリレーション取得時のSQL文

https://qiita.com/mtakehara21/items/3cef9d12869d162e1ce9

DB::enableQueryLog()でクエリのログを記録することができる
DB::getQueryLog()でそれを出力。

※tinkerで実施。

MySQLクエリパフォーマンス改善簡易まとめ

https://qiita.com/peutes/items/6a5d771d41168e9b738d

一覧画面のページングについていろいろ考えた

https://qiita.com/egnr-in-6matroom/items/e1beba82d5dc76c85596

2020-05-14

Laravel モデル（Eloquent）から値を取得する便利機能！（アクセサとミューテタ）

Laravel Laravel 5.5

・謎の値に遭遇した。

$user = App\User;
$user->full_name;

usersテーブルにfull_nameなんてカラムは無いし、Userモデルにfull_name()なんて関数は定義していない。

第3の定義方法を発見した！便利すぎる！

public function getFullNameAttribute()
{
    return "{$this->first_name} {$this->last_name}";
}

①アクセサ

モデルに上記のように、

　　　get(先頭大文字のキャメルケース)Attribute()

の形の関数を定義すると、（）かっこ内をスネークケースにした文字でその関数の返り値をモデルの属性として取得できる。

getFullNameAttribute()を定義すると、$user->full_nameでフルネームを取得できる。

（姓last_nameと名first_nameはDBのカラムとして存在する状態）

逆に、DB保存するときの加工方法を指定できるミューテタというのもある。

setFirstNameAttribute()の形式で関数を宣言。

https://readouble.com/laravel/5.5/ja/eloquent-mutators.html

②DBのカラム

該当テーブルのカラムにあれば、取得可能。

③モデル内にリレーション定義していれば、取得可能。

2020-05-10

Laravel 6.0プロジェクトの作り方（認証含む）

Laravel 6.x

composerインストール済

①メモリ開放

　sudo sh -c "echo 3 > /proc/sys/vm/drop_caches"

②Laravelプロジェクト作成

　1. プロジェクトを作成するフォルダへ移動

　2. コマンド

　　 composer create-project --prefer-dist laravel/laravel project_name "6.*"

　　・・・自動で6.0の最新を選択してくれる

③Gitの管理下に置く

　Laravelフォルダに移動して

　　　git init　→　git add . 　→git commit

　　　※初期状態で一旦保存しておく

④データベースと接続

　1.　.envファイルのデータベース関連の情報を修正

　　DB_CONNECTION=mysql

　　DB_DATABASE=project-name　※あとで作成するDatabase名の通りにする

　　DB_USERNAME=abcde

　　DB_PASSWORD=password

　2. データベース作成

　　sudo service mysqld start　MySQLサーバ起動

　　mysql -u abcde -　　　　ログイン

　　CREATE DATABASE `project-name`　データベース作成

　3. 接続確認

　　php artisan tinker

　　DB::connection();　→エラーが出なければOK

⑤タイムゾーンの設定

　config/app.phpファイルの下記を修正

　'timezone' => 'Asia/Tokyo',

　'locale' => 'ja',

⑥テーブル設計前の初期設定

　app/Providers/AppServiceProvider.phpのbootメソッドに追記

　 public function boot()
　{
　　\Schema::defaultStringLength(191);
　}

https://readouble.com/laravel/6.x/ja/authentication.html

⑦ vagrant + centos7で仮想環境で見れるようにする

⑦-1. /etc/httpd/conf.d/vhost.confファイルを編集　※Laravelの場合

<VirtualHost *:80>
DocumentRoot /var/www/html/project/public
ServerName localhost.project
</VirtualHost>

⑦-2. ホストPCの設定

C:\Windows\System32\drivers\etc\hostsファイルを編集

192.168.33.10 url.url

（ブラウザから検索するときにhttp://の後に入力する文字を数字の後に記載）

⑧　認証一括作成

（プロジェクトフォルダで）composer require laravel/ui "^1.0" --dev

　※引っかかった記録は下記。

rintaro2019.hatenablog.com

php artisan ui vue --auth

Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.
Authentication scaffolding generated successfully.

ホストOSにのプロジェクトフォルダに移動して下記。
npm install

npm run dev

　※引っかかった記録は下記。

rintaro2019.hatenablog.com

npm run watch　←これをすると、変更があるたびに自動でコンパイルしてくれる

■マイグレーション→モデル→ルータ・コントローラ・ビュー

⑦基本のデータを作成

⑦-1. CSSファイル

/public/css/app.cssファイルを作成し、cssを記述。

asset()関数を使うとpublicディレクトリ内のリソースを読み込める。

https://qiita.com/kotsuban-teikin/items/9b00d0faa0b7eaf70796

■Sass(Scss記法)

メディアクエリを書いておく。今回は基本をスマートフォン、指定した場合にPC用とする。

https://www.tam-tam.co.jp/tipsnote/html_css/post10708.html

⑦-2. jQueryを使う

(1) jQueryを利用する場合は、下記を記述すると自動で全jQueryリクエストヘッダにトークンを足してくれる。

※下記の代わりになる。

$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

https://readouble.com/laravel/6.x/en/csrf.html

(2) metaタグにjQueryCDNを読み込み。（ダウンロードでも可）

下記から選んでコードをコピー、headに貼り付け。

https://code.jquery.com/

(3) jsファイル作成

head内、必ず(2)より下に！！jsファイル読み込みを記述。

/public/js/app.jsファイルを作成。

2020-05-09

Laravel 6.xの認証・ログインの中身

Laravel公式を読み解く Laravel 6.x

toCとtoBでログイン後の遷移先を分けたいと思って調べたこと

LoginControllerの中身

ルートに書かれているアクションは全てトレイトAuthenticatesUsersにある。

    public function showLoginForm()
    {
        return view('auth.login');
    }

    public function login(Request $request)
    {
        $this->validateLogin($request);// PW等バリデーション

        // ThrottlesLoginsトレイトによりユーザ名とIPからログイン試行を制限できる
        if (method_exists($this, 'hasTooManyLoginAttempts') &&
            $this->hasTooManyLoginAttempts($request)) {
            $this->fireLockoutEvent($request);

            return $this->sendLockoutResponse($request);
        }
 // 下で解説。ここに入れば、ログインできる。
        if ($this->attemptLogin($request)) {
            return $this->sendLoginResponse($request);
        }

        // ログイン失敗が多すぎるとロックされるようカウント
        $this->incrementLoginAttempts($request);

        return $this->sendFailedLoginResponse($request);
    }

    protected function attemptLogin(Request $request)
    {
        return $this->guard()->attempt(
            $this->credentials($request), $request->filled('remember')
        );
    }

attemptLoginの返り値＝attempt()の返り値。

このguard()は何なのか。

 use Illuminate\Support\Facades\Auth;
    /**
     * Get the guard to be used during authentication.
     *
     * @return \Illuminate\Contracts\Auth\StatefulGuard
     */
    protected function guard()
    {
        return Auth::guard();
    }

Illuminate\Support\Facades\Auth

    @method static mixed guard(string|null $name = null)

Illuminate\Contracts\Auth\Factory

 
        /**
         * Get a guard instance by name.
         *
         * @param  string|null  $name
         * @return mixed
         */
        public function guard($name = null);

    /**
     * Attempt to authenticate a user using the given credentials.
     *
     * @param  array  $credentials
     * @param  bool  $remember
     * @return bool
     */
    public function attempt(array $credentials = [], $remember = false);

    /**
     * Get the needed authorization credentials from the request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    protected function credentials(Request $request)
    {
        return $request->only($this->username(), 'password');
    }

処理が何にもないfunction function_name () ;

これが返すのはtrueなのかfalseなのか？？？

return を省略した場合は NULL を返します。

https://www.php.net/manual/ja/functions.returning-values.php

結局分からず、下記サイトがとても分かりやすかった。

https://reffect.co.jp/laravel/laravel-authentification-by-code-base#attemptLogin

attempt() は、SessionGuardインスタンスのattemptメソッドらしい。

大企業営業から未経験ITエンジニアを目指すブログ

アラサー大企業営業から未経験ITエンジニアを目指すブログ。日々学んだことを忘備録的に記します。

Windows10にVagrantとVirtualBoxでCentOSの仮想環境を構築⑫Dドライブに再インストール

CSSチャレンジ１：カルーセルをつくる（HTML、CSS、jQuery）

Laravel 6.xでPDF出力機能（Snappy）

SQLパフォーマンスの基礎

Laravel モデル（Eloquent）から値を取得する便利機能！（アクセサとミューテタ）

Laravel 6.0プロジェクトの作り方（認証含む）

Laravel 6.xの認証・ログインの中身