Drag&Dropを使ってみよう

<head>
	<meta charset="utf-8">
	<title>Document</title>
	<style>
	.dd {
		line-height:300px;
		text-align:center;
		font-size:12px;
		color:#ccc;
		width:300px;
		height:300px;
		border:1px dotted #ccc;
	}
</style>
</head>
<body>
	<div class="dd">ファイルをドラッグ&ドロップしてください</div>
	<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  	<script>
  		$(".dd").on("drop", function(e){
  			e.preventDefault();
  			console.log(e.originalEvent.dataTransfer.files);
  		});
  		$(".dd").on("dragover",function(e){
  			e.preventDefault();
  		});
  	</script>
</body>

うん。

＞ベントが明示的に処理されない場合に user agent に、そのデフォルトアクションを通常どおりに行うべきではないと伝えます。

え？何を言ってるのかさっぱりわからない。
デフォルトの操作をさせないって意味？

drag系のイベントに以下があるが、dragとdrop, dragenterは解るが、、、
dragover dragenter dragend drag drop

あ、mozillaに書いてありますね。
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API
> dragenter
ドラッグ中に、マウスポインタが要素の上に乗った最初の時点で発行されます。
> dragover
このイベントは、ドラッグ中にマウスポインタが要素の上で動いた時に発行されます。
> drag
このイベントは、ドラッグ操作が行われている間、ドラッグ元の要素（※ dragstart イベントが発行された要素）において定期的に発行されます。
> drop
drop イベントは、ドラッグ操作の最後に、ドロップされた位置の要素において発行されます。
> dragend
ドラッグ元の要素は、ドロップに成功したかどうかに関わらず、ドラッグ操作が完了した時に dragend イベントを受け取ります。

なんだこれ、”drag”って、定期的に発行されるって、意味不明だな。

qbmail

Githubより、qdmail.phpとqdsmtp.phpをダウンロードします。
Github QdmailをPHP7.0に対応させる

require_once('vendor/qdmail.php');
require_once('vendor/qdsmtp.php');
$mail = new Qdmail();
$mail -> errorDisplay(false);
$mail -> smtp(true);

$param = array(
	'host' => 'xxxxx.xsrv.jp',
	'port' => 587,
	'from' => 'hoge@foo.xsrv.jp',
	'protocol' => 'SMTP_AUTH',
	'user' => 'username',
	'pass' => 'password'
);
$mail -> smtpServer($param);

なんか、本家のサイトがあるようなんだが、更新が2008年で止まっている模様。なんだこれは。。
http://hal456.net/qdsmtp/download
qdはあまりニーズがないのかな。

blade property {{ __(‘Login’) }}

/rosources/views/layouts/app.blade.php

<li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>

この{{ __(‘Login’) }}を変えると。

/rosources/lang/en/login.php

return [
    'Login' => 'ログイン2',
];

/rosources/views/layouts/app.blade.php

<li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('login.Login') }}</a>
                                <!-- <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> -->
                            </li>

なるほど、{{ __(‘${hoge}’) }}は、ローカルのヘルパーのようですね。
参考:https://laravel.com/docs/5.6/localization#retrieving-translation-strings

サクッといきます。このあたりは、面倒ですな。

{{ config(‘app.name’, ‘Laravel’) }}って何？

/resources/views/layout/app.blade.php

{{ config('app.name', 'Laravel') }}

これは、config/app.php の env’APP_NAME’を読み込んでいるという意味。

    'name' => env('APP_NAME', 'Laravel'),

env’APP_NAME’は.envのAPP_NAMEを読み込んでおり、なければLaravelって表示する、という意味だ。

APP_NAME=Laravel
APP_ENV=local

したがって、.envのAPP_NAMEを”フリーランスプラットフォーム”と変更すると

APP_NAME=フリーランスプラットフォーム
APP_ENV=local
APP_KEY=hoge
APP_DEBUG=true
APP_URL=http://localhost

このように変わる。

Laravelでログインユーザーのみページを表示させる

# /resources/viewsの下にmenu.blade.phpをつくる。適当にhelloとしておく

# 続いて、/app/Http/Controllersに MenuController.phpをつくる

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MenuController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        return view('menu');
    }
}

# /routes/web.phpにroutingを追加

Route::get('/home', 'MenuController@index')->name('menu');

#　ログインしている時

# ログアウトしている時は自動的にloginにリダイレクトされる

おおおおおおおおおおおおおお、なるほど、ようは、controllerで$this->middleware(‘auth’);があればいいのね。なるほど。ログインサービス作りたくなってきた。

laravelの.envでsmtpを設定

# 初期値

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

# mailtrap.ioから、usernameとpasswordを取得して.envを編集
# password reset buttonを押下

Expected response code 250 but got code "530", with message "530 5.7.1 Authentication required

う。。。

# キャッシュクリア
[vagrant@localhost angel]$ php artisan config:cache
Configuration cache cleared!
Configuration cached successfully!

# 再度password reset buttonを押下

# mailtrapで確認

なるほど。

laravelのログイン認証を勉強しよう

# ディレクトリを作成します
[vagrant@localhost app]$ mkdir angel

# 作成したディレクトリに移動
[vagrant@localhost app]$ cd angel
[vagrant@localhost angel]$ ls

# composerをインストール
[vagrant@localhost angel]$ curl -sS https://getcomposer.org/installer | php
[vagrant@localhost angel]$ ls
composer.phar

# composerでlaravelをインストール。ディレクトリ名は適当にangelとしておきます。
php composer.phar create-project –prefer-dist laravel/laravel angel

# mysqlにログイン
[vagrant@localhost ~]$ mysql -u root -p
Enter password:
mysql> show databases;

# mysqlでDBの作成
mysql> create database angel;
Query OK, 1 row affected (0.12 sec)

# .envファイルを編集

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=angel
DB_USERNAME=root
DB_PASSWORD=secret

# migration 実行
[vagrant@localhost angel]$ cd angel
[vagrant@localhost angel]$ php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated: 2014_10_12_100000_create_password_resets_table

# 作成されたtable確認
mysql> use angel;
mysql> show tables;
+—————–+
| Tables_in_angel |
+—————–+
| migrations |
| password_resets |
| users |
+—————–+
3 rows in set (0.00 sec)

mysql> describe migrations;
+———–+——————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+———–+——————+——+—–+———+—————-+
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| migration | varchar(255) | NO | | NULL | |
| batch | int(11) | NO | | NULL | |
+———–+——————+——+—–+———+—————-+
3 rows in set (0.08 sec)

mysql> describe password_resets;
+————+————–+——+—–+———+——-+
| Field | Type | Null | Key | Default | Extra |
+————+————–+——+—–+———+——-+
| email | varchar(255) | NO | MUL | NULL | |
| token | varchar(255) | NO | | NULL | |
| created_at | timestamp | YES | | NULL | |
+————+————–+——+—–+———+——-+
3 rows in set (0.00 sec)

mysql> describe users;
+——————-+———————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+——————-+———————+——+—–+———+—————-+
| id | bigint(20) unsigned | NO | PRI | NULL | auto_increment |
| name | varchar(255) | NO | | NULL | |
| email | varchar(255) | NO | UNI | NULL | |
| email_verified_at | timestamp | YES | | NULL | |
| password | varchar(255) | NO | | NULL | |
| remember_token | varchar(100) | YES | | NULL | |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
+——————-+———————+——+—–+———+—————-+
8 rows in set (0.00 sec)

# 認証機能を生成
[vagrant@localhost angel]$ php artisan make:auth
Authentication scaffolding generated successfully.

# routes/web.phpに追加されている

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

# php artisan serveでサーバを立てる
[vagrant@localhost angel]$ php artisan serve –host 192.168.35.10 –port 8000
Laravel development server started:

# ${domain}/register にアクセス

おおおおおおおおおお、これはちょっと勉強が必要だ。

WebController

Webcontroller is an HTML5-based browser application which allows to build versatile user interfaces for visualization, control and debugging of ROS systems. It uses and shows ROS messasges, services and parameters, much like the rqt-tools. GUIs are created right in the browser by drag&drop and can be saved. A menu bar displays the available ROS resources and widgets.