カテゴリー
Python

変数、名前、オブジェクト

Pythonでは、すべて(ブール値、整数、文字列、浮動小数点、関数、プログラム等)がオブジェクトで実装されている

ミュータブル

データの値を変更できる

イミュータブル

データの値を変更できない

Pythonは、強く型付けされている。つまり、値がミュータブルでも。オブジェクトの型は変わらない。

変数は、値はコピーされない。値の参照である。データを入れているオブジェクトにポストイットのように名前を貼っているだけ。

Type()

変数やリテラルなどの型を調べる

pythonではクラスと型はまったく同じ意味になる

python2では、intは32ビット、longは64ビット

python3ではlongはない。intは任意のサイズ

浮動小数点 float

pythonの文字列はイミュータブル

カテゴリー
HTML/CSS

Bootstrapのブレークポイント

確認環境:

Bootstrap v4.6

Bootstrapとは

レスポンシブ対応のCSSのフレームワーク

モバイルファーストをコンセプトとしている

レスポンシブWebデザインとは

PCとかスマホとか画面サイズの違うデバイスでアクセスされたときでも対応できるようデザインしたサイト

Bootstrapのブレークポイント

ブレークポイントクラス識別子サイズ
X-Smallなし<576px
小さいsm≧576px
md≧768px
lg≧992px
特大xl≧1200px
特大特大xxl≧1400px

Bootstrapで2カラムサイトを作る

まず、以下の公式ページの通り、Bootstrapを使えるようにします。

Bootstrap イントロダクション

その後、以下のようにHTMLを記載します。

<div class="container">
    <div class="row">
        <section class="side col-md-4">
            <h2>サイドコンテンツ</h2> 
            <p>サイドコンテンツの内容</p>
            <h2>サイドリスト</h2>
            <ul>
                <li>メニュー</li>
                <li>メニュー</li>
                <li>メニュー</li>
                <li>メニュー</li>
            </ul>
        </section>
        <section class="main col-md-8">
            <h1>メインコンテンツ</h1>
            <div class="archive">
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
                <div>
                    <img src="no-image.gif" alt="no-img">
                    <p>見出しや文章</p>
                </div>
            </div>
        </section>
    </div>
</div>

こんな感じに2カラムで表示されます。

この例では、「col-md-8」でブレークポイントを設定しているので、

画面の幅が768pxより小さい場合以下のようにブレークされて表示されます。

まとめ

Bootstrapを使えば、2カラムサイトが簡単に作れます。

Bootstrapを使わないと、cssのdisplayとか、potisionプロパティとかいろいろ設定をしないといけないので手間がかかります。

参考サイト

Bootstrap Document(公式サイト)

Bootstrap Breakpoint

Bootstrap イントロダクション

カテゴリー
Laravel

Laravel ログ出力

確認環境:

Windows10、Laravel 7.30.4、PHP 7.2.33、MySQL 5.7.30

Laravelのログ出力の設定ファイル

config\logging.php

ログ出力レベル

8つのレベルがある。上のものほど重要度が高い。

Log::emergency($message);
Log::alert($message);
Log::critical($message);
Log::error($message);
Log::warning($message);
Log::notice($message);
Log::info($message);
Log::debug($message);

参考サイト

Laravel 7.x ログ

RFC 5424規約

カテゴリー
Laravel

LaravelでGmail認証をする

確認環境:

Windows10、Laravel 7.30.4、PHP 7.2.33、MySQL 5.7.30、Gmail

多くのWebアプリケーションは、利用開始時にユーザーのメールアドレスを確認する必要がありますが、Laravelで、とても簡単にメール認証の機能が実装できます。

1) Loginページを作る

上記ページの手順でLoginページを作っておきます。

2) UserモデルにMustVerifyEmailインターフェースを追加する

app\User.php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;
    // ...
}

class User extends Authenticatable

の後ろに implements MustVerifyEmail
を追加する。

3)web.phpにルートパラメータを追加する

routes\web.php

Auth::routes(['verify' => true]);
  1. Loginページを作る でAuth::routes は自動で作られるので、引数に ['verify' => true] を追加する。

4) .envファイルにGmail用の設定をする。

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=任意のGmailアドレス
MAIL_PASSWORD=下記参照
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=任意のGmailアドレス(MAIL_USERNAMEと同じアドレス)
MAIL_FROM_NAME="${APP_NAME}"

自分のGoogleアカウントのセキュリティでアプリパスワードを取得します。

注意点は、2段階認証を選択しておくことです。

取得したアプリパスワードを.envファイルの「MAIL_PASSWORD」に設定します。

5) サイトにアクセスし、新規にユーザー登録する。

ユーザー登録した後、登録時に指定したメールアドレス(Gmail)を確認します。

以下の認証メールが届いていることを確認します。

Verify Email Address ボタンを押すと、認証処理が行われ

/home画面にリダイレクトします。

これだけで、メール認証機能が作れます。すごいシンプルです。

参考サイト

Laravel 7.x 認証

Laravel 7.x メール確認

カテゴリー
Laravel

Laravel Bladeファイルの書き方

ベースのbladeファイル

app.blade.php

<!-- resources/views/layouts/app.blade.phpとして保存 -->

<html>
    <head>
        <title>アプリ名 - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            ここがメインのサイドバー
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

子のbladeファイル

child.blade.php

<!-- resources/views/child.blade.phpとして保存 -->

@extends('layouts.app')

@section('title', 'Page Title')

@section('sidebar')
    @@parent

    <p>ここはメインのサイドバーに追加される</p>
@endsection

@section('content')
    <p>ここが本文のコンテンツ</p>
@endsection

参考サイト

Laravel 7.x Bladeテンプレート

カテゴリー
プログラミング

クラスとは

クラスとは

オブジェクト指向の中核となる概念

ほとんどのプログラミング言語でクラスを実装できる

クラスとインスタンス

お菓子のクッキーで例えると、クラスはクッキーの金型でインスタンスは金型を使って作った、クッキー

星型、ハート型、動物型のクラス(金型)を定義しておいて、

実際に使うときにはnewしてインスタンスを作る。

言語によってはインスタンスをオブジェクトとも言ったりする。

クラスはプロパティとメソッドを持つ

プロパティ(属性、データ)とも言う

メソッド(関数)とも言う

カプセル化(隠蔽化)

private、public

継承

オーバーロード

クラス変数、クラスメソッド

インスタンス変数、インスタンスメソッド

オーバーライド

インターフェイス(implements)、抽象クラス

カテゴリー
Laravel

LaravelでLoginページを作る

確認環境:

Windows10、Laravel 7.30.4、PHP 7.2.33、MySQL 5.7.30

Loginページを作る

まずは、Laravelプロジェクト(ver 7.*)を新規作成する

composer create-project --prefer-dist laravel/laravel larademo01 "7.*"

以下のコマンドで、Loginページ(認証機能)を追加する

composer require laravel/ui
php artisan ui vue --auth

公式サイトによると、このコマンドは、プロジェクト新規作成直後に行うことを勧めています。

このように、コマンド1発で必要なものが準備できることを、スカフォールディングという。

多分、Ruby on Railsなんかでも、スカフォールディングという言葉は使うと思う。

php artisan serve

すると、自動的に以下の4つテーブルが作成されます。

Login時に登録したユーザーは、userテーブルに登録されます。

http://127.0.0.1:8000

にアクセスする。

以下のように、画面右上に、LOGINとREGISTERが表示される。

DBの設定

REGISERページに移動して、ユーザー登録してみる。

エラーになる。

Illuminate\Database\QueryException
SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO) (SQL: select count(*) as aggregate from `users` where `email` = 0gravity000@gmail.com)
http://127.0.0.1:8000/register

原因はDB設定をしていないため。

なので、MySQLでDB設定をする。

.envファイルを編集する

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=larademo01
DB_USERNAME=root
DB_PASSWORD=pass

MySQLのルートユーザーでログインする

ここでルートユーザーのパスワードを入力する

 mysql -u root -p

MySQLでデータベースを新規作成する。

create database larademo01;
use larademo01;

laravelでmigrateする

php artisan migrate

MySQLでテーブルが出来ているか確認する

show tables;

4つテーブルが出来ている。usersテーブルにユーザーが登録される。

+----------------------+
| Tables_in_larademo01 |
+----------------------+
| failed_jobs          |
| migrations           |
| password_resets      |
| users                |
+----------------------+
4 rows in set (0.00 sec)

php artisan serve をし直して、

http://127.0.0.1:8000

にアクセスする。

REGISERページに移動して、ユーザー登録する。

今度は成功する。

MySQL Workbenchで確認する。

usersテーブルに登録したユーザーが登録されている。

リダイレクトパスのカスタマイズ

認証に成功すると、

/home URIへリダイレクトします。

認証後のリダイレクトパスをカスタマイズするには、

RouteServiceProvider の中で

HOME 定数を定義する。

\app\Providers\RouteServiceProvider.php

    /**
     * The path to the "home" route for your application.
     *
     * @var string
     */
    public const HOME = '/home';

認証名のカスタマイズ

デフォルトでは、email フィールドを認証に利用している。

変更するには、LoginController で username メソッドを定義する。

\app\Http\Controllers\Auth\LoginController.php

public function username()
{
    return 'username';
}

ガードのカスタマイズ

???

バリデーション/保管域のカスタマイズ

\app\Http\Controllers\Auth\RegisterController.php

    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:8', 'confirmed'],
        ]);
    }

    /**
     * Create a new user instance after a valid registration.
     *
     * @param  array  $data
     * @return \App\User
     */
    protected function create(array $data)
    {
        return User::create([
            'name' => $data['name'],
            'email' => $data['email'],
            'password' => Hash::make($data['password']),
        ]);
    }

参考サイト

Laravel 7.x 認証

カテゴリー
Vue.js/Nuxt.js

Vue.js/Nuxt.jsとは

Javascriptのフレームワーク

node.js、npmのインストールが必要

Vue.jsだけでも十分に利用できる。

でも、SPA(シングルページアプリケーション)なので、ルーティングがちょっと面倒。

そこで、Nuxt.jsを使えば、ルーティングが簡単に使える。

参考サイト:

Vue.js 公式サイト

Nuxt.js 公式サイト

カテゴリー
Laravel

Laravelで非同期処理をする

参考サイト:

Laravel 7.x キュー

Laravel 7.x Redis

Laravel 7.x サービスコンテナ

Laravel 7.x サービスプロバイダ

Laravel 7.x ミドルウェア

Laravelでキューってみる

laravel非同期処理(キュー)をお手軽に使ってみた

カテゴリー
Laravel

Laravel ミドルウェア

参考サイト:

Laravel 7.x ミドルウェア