はじめまして！qiita初投稿です?

最近Laravelで開発することが増えてきて、その中でも便利だなーと思った「画像サイズの圧縮」について書きます。

随時間違っている部分などは訂正していくと思います。ご指摘もいただけると嬉しいです?

開発環境

PHP 7.3.11
Laravel Framework 6.5.1
Composer version 1.9.1

Laravelで画像処理をする。

今回自分は「interventionImage」というパッケージを利用して、画像サイズを小さくして保存を実装しました。

interventionImageはphpの画像処理ライブラリGD LibraryとImagickをサポートしています。

自分はGD Libraryを使用して実装しました。

GD Libraryのインストール方法は環境によっても変わってくると思うので、お使いの環境に合わせてインストールしてください。

実装までの流れ

interventionImageの公式はこちら
http://image.intervention.io/getting_started/installation#laravel

実装の流れとしては、
1.パッケージのインストール。
2.Laravelで使用できるようにセットアップ。
3.実際に画像サイズを変更してみる。

1.Laravelにintervention/imageをインストールする。

composerを使ってintervention/imageをインストール。

composer require intervention/image

2.セットアップ

InterventionImageをインストールしたら、Laravel構成ファイルconfig/app.phpを開き、providers配列とaliases配列に次の行を追加します。

providers配列に、このパッケージのサービスプロバイダーを追加。
Intervention\Image\ImageServiceProvider::class,

このパッケージのファサードをaliases配列に追加。Imageだとモデルとして定義したクラスと被りそうだったので、InterventionImageとしてaliasを保存。
'InterventionImage' => Intervention\Image\Facades\Image::class,

config/app.php

~前略~

'providers' => [

  ~中略~

  // Add Intervention Image.
  Intervention\Image\ImageServiceProvider::class,
],
'aliases' => [

  ~中略~

  'Hash' => Illuminate\Support\Facades\Hash::class,
  // Add Intervention Image.
  'InterventionImage' => Intervention\Image\Facades\Image::class,

~後略~

3.実際に画像サイズを変更してみる。

今回は画像のアスペクト比をそのままで保存しつつ、横幅を1080pxにしました。

config/PostsController.php

//エイリアスに追加したファサードを呼び出す。
use \InterventionImage;

~中略~

//formからの画像リクエストはimagefileで受け付けしたのでimagefileを設定しています。formに合わせて変更してください。
$file = $request->file('imagefile');
$name = $file->getClientOriginalName();
//アスペクト比を維持、画像サイズを横幅1080pxにして保存する。
InterventionImage::make($file)->resize(1080, null, function ($constraint) {$constraint->aspectRatio();})->save(public_path('/images/' . $filename ) );;

ちなみに、横幅と高さを指定する場合はもう少しシンプルにできます。

InterventionImage::make($file)->resize(1080, 700)->save(public_path('/images/' . $filename ) );;

resizeで画像の大きさを指定するだけだったので、めっちゃ簡単だなーと思いめっちゃ感動しました。

まとめ

少し面倒だと思ってた画像のresizeが、かなりシンプルな書き方で実装できて感動しました?

とはいえqiitaの初投稿もできたので、これきっかけでqiitaへの投稿を増やして行けたらいいなーと思いました！

カルネージハート Advent Calendar 2019 1日目の記事です。

カルネージハートEXAの公式アップローダーSATLOKEはお亡くなりになりました。

が、代替アップローダーでEuropaを運営しております。M2です。

Europaのデータ管理について

通常ファイルアップローダーはS3などで管理することが多いと思いますが、Europaについてのファイル管理は直接バイナリをDBに投入して管理しております。

なぜか、、、Herokuだからです。。。 HerokuでもS3使えるやーん的なツッコミあると思いますが、作った当初はノウハウがなくというか知識g

ただLaravelだとバイナリデータ取り出してそのままDBに入れると上手くはいりません...

そこでバイナリデータをラージオブジェクト (LOB)としてInsertしています。

migrationFile.php

    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->increments('id');
            $table->binary('file_data');
        });
    }

    //$hogeFileはリクエストから取得したFileデータ
    $fileData = file_get_contents($hogeFile);

    //Laravel/homesteadではPostgreSQLはpgsqlとして設定
    $db = DB::connection('pgsql')->getPdo();
    $stmt = $db->prepare("INSERT INTO files (file_data) VALUES (?)");
    $stmt->bindParam(1, $fileData, $db::PARAM_LOB);
    $stmt->execute();
    unset($db);

これで無事バイナリデータがDBに投入できます！

最後に

今回カルネージハート Advent Calendar 2019を始動しました。

事実上の最新作EXAが2010年に発売以降続編の情報が皆無ですが、一部の熱狂的ファンは大会を開催してゲームを続けています。ゲームを盛り上げることで続編も出るかもしれません。カルネジスト、ネジらーの皆様のご協力をお願いします！

カルネージハートファンのプログラミング知識を共有しましょう！

腹筋ミサイル回避でお茶を濁します

序文

最近のiosアップデートでiphoneをダークモードに設定できるようになりました。私個人的にはダークモードの方が好みであり、自分自身のiphone,iPad,MacBookも全てダークモードに設定しております。
そこでふと自身で作成したWebページやポートフォリオをダークモードにできないかと思い、調べて見たところ簡単に設定する事ができましたので、下記に共有いたします。

コード

閑話休題、styleの中に下記を追加するだけです。
現在主要なブラウザ、crome,firefox,safariでは対応している模様です。

<style>
    @media (prefers-color-scheme: dark) {
    body{
      background-color: #000;
      color: #aaa;
    }
    }
 </style>

使用例

実際に私の簡単なサイト内で試して見ましたので画像を共有いたします。
＊MacBookAir(2018)をダークモードの設定状態で、ブラウザはcromeを使用しております。
＊サイトはちなみに自身の本管理用途をして,laravel(+vue,jquery)で作成したものです。

1.ダークモード実装前

2.ダークモード実装後

最後に

以上WebページをCSSでダークモードにする方法でした。
なんとなくダークモードの方がテンション上がる気がする笑

環境

Laravel 5.8
node v13.30
npm 6.13.1
webpack.mix.js

問題点

プロジェクト下のターミナルで npm run watch をすると

$ npm run watch
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/emisub/.npm/_logs/2019-12-05T10_11_33_711Z-debug.log

このようなエラーが出てくる。

実は何度かこのエラーに遭遇していて大抵node modulesを再インストールすれば直ることがわかっていたが、この際まとめておこうと思います。

解決策

以下のコマンドを入力する

* インストールされたjsモジュールを全部消す
rm -rf node_modules

* npmのキャッシュをクリア
npm cache clear --force

* 再度モジュールを入れ直して実行
npm install
npm run watch

Laravelではデータベースのテーブルを作成・編集する方法としてマイグレーションという仕組みが用意されている。

前提

• Laravel 6.6.1
• PHP7.3
• MySQL 5.6

マイグレーションの流れ

マイグレーションの流れは大まかに言えば、次の3ステップ。

1. マイグレーションファイルを作成する
2. マイグレーションファイルを編集する
3. マイグレーションを実行する

1.マイグレーションファイルを作成する

マイグレーションファイルを作成するには、php artisan make:migration コマンドを使う。テーブルを新規作成する場合とテーブルを編集する場合でオプションが異なる。

1-1.テーブルを新規作成する場合

コマンド

$ php artisan make:migration 名前 --create=テーブル名

このコマンドを実行すると タイムスタンプ_名前.php のファイル名で、database/migrations にファイルが作成される。

例えば、名前を create_users_table 、テーブル名が users とすると、コマンドは以下のようになる。

コマンド例

$ php artisan make:migration create_users_table --create=users

上記をコマンドを実行すると、database/migrations に2019_12_05_000000_create_users_table.php が作成される。

1-2.テーブルを編集する場合

コマンド

$ php artisan make:migration 名前 --table=テーブル名

このコマンドを実行すると タイムスタンプ_名前.php のファイル名で、database/migrations にファイルが作成される。

例えば、名前を add_api_token_column 、テーブル名が users とすると、コマンドは以下のようになる。

コマンド例

$ php artisan make:migration add_api_token_column --table=users

上記をコマンドを実行すると、database/migrations に2019_12_05_083543_add_api_token_column.php のような名前のファイルが作成される。

2.マイグレーションファイルを編集する

作成したマイグレーションファイルと開くと、以下のようになっている。up メソッドと down が出来ている。

作成したファイル例：2019_12_05_083543_add_api_token_column.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddApiTokenColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            //
        });
    }
}

up メソッドには追加したい作業を記述し、down メソッドには up メソッドの内容を元に戻す作業を記述する。それぞれ Schema::table() が作成されている。テーブルを作成する、すなわち、make:migration のオプションを --create にすると `Schema::create()' が作成されている。

例にupメソッドとdownメソッドを追加

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class AddApiTokenColumn extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            // api_token カラムを password　カラムの次に追加。
            // ユニークキーを追加し、
            // NULL を許可で、デフォルトをNULLにする。
            $table->string('api_token', 80)->after('password')
                        ->unique()
                        ->nullable()
                        ->default(null);
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            // api_token カラムを削除
            $table->dropColumn('api_token');
        });
    }
}

3.マイグレーションを実行する

以下の php artisan migrate コマンドを実行することで、マイグレーションファイルの内容がデータベースに反映される。同時にデータベースの migrations テーブルにファイル名と実行順序が保存される。

コマンド

$ php artisan migration

以下のように Migrating や Migrated が表示されたらOK。

コマンド実行後の例

Migrating: 2019_12_05_083543_add_api_token_column
Migrated:  2019_12_05_083543_add_api_token_column (0.01 seconds)

この記事について

あらすじ

自社サービス開発の中で共通でuser情報を使い回している箇所があり、その部分が煩雑な書き方になっていたので、処理をどこか一つにまとめたいと思っていました。

やりたい事

• 共通でuser情報を使い回しているを共通化する。
• ヘッダーのbladeファイル以外でサイドバーなどの箇所でもuser情報を使いたい。

やってみた事

• Laravel view composerを使って、処理を共通化する。

view composerとは？

ビューコンポーザはビューがレンダーされる時に呼び出される、コールバックかクラスメソッドのことです。

ビューがレンダーされるたびに結合したい情報があるなら、ビューコンポーザがロジックを一箇所にまとめるのに役立ちます。

処理イメージ図

どんな時に使うのか？

• サイドバーなどすべてのページで共通するデータを表示したい時。

• ビューロジックはできればコントローラーに書きたくないし、テンプレートもできるだけロジックを入れず、綺麗なhtmlのままでありたい。

• コントローラーの肥大化を防ぎたい。

実装方法

実装手順

• ①サービスプロバイダーの用意
• ②app/config.phpに登録
• ③Composerクラスの作成
• ④SeriviceProviderへの設定
• ⑤bladeファイルの修正
  

①サービスプロバイダーの用意

$ php artisan make:provider ViewComposerServiceProvider を実行して、サービスプロバイダーを生成する。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use View;

/**
 * Class ViewComposerServiceProvider
 * @package App\Providers
 */
class ViewComposerServiceProvider extends ServiceProvider
{
    /**
     *
     */
    public function boot()
    {
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

②app/config.phpに登録

「config/app.php」へ下記のようにSeriviceProviderを登録する

<?php

'providers' => [
        App\Providers\ViewComposerServiceProvider::class,
    ],

③Composerクラスの作成

「app/Http/ViewComposers」という形でディレクトリを作成し、ViewComposersディレクトリの中に「LayoutComposer.php」を作成します。

<?php

namespace App\Http\ViewComposers\User\Worker;

use Auth;
use Illuminate\View\View;

/**
 * Class LayoutComposer
 * @package App\Http\ViewComposers\User\Worker
 */
class LayoutComposer
{
    /**
     * @param View $view
     */
    public function compose(View $view)
    {
        $view->with([
            'loginUser' => Auth::user(),
        ]);
    }

}

④SeriviceProviderへの設定

bootメソッドにViewComposerが値を渡すviewを、View::composersメソッドを使って指定します。

<?php

namespace App\Providers;

use App\Http\ViewComposers\User\Agent as Agent;
use App\Http\ViewComposers\User\FriendRecommendComposer;
use App\Http\ViewComposers\User\Worker as Worker;
use Illuminate\Support\ServiceProvider;
use View;

/**
 * Class ViewComposerServiceProvider
 * @package App\Providers
 */
class ViewComposerServiceProvider extends ServiceProvider
{
    /**
     *
     */
    public function boot()
    {
        View::composers([
            Agent\LayoutComposer::class => 'agent.*',
            Worker\LayoutComposer::class => 'worker.*',
            FriendRecommendComposer::class => 'user.friend_recommend.block',
        ]);
    }

    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

⑤bladeファイルの修正

$loginUserの変数を該当箇所に書く

<?php
                <div class="user-block">
                    <div class="img-wrap">
                        <img src="{{ $loginUser->userProfile->image->url }}" alt="">
                    </div>
                    <div class="user-name">{{ $loginUser->userProfile->display_name }}</div>
                    <div class="user-type">{{ \App\Enums\UserRole::toJapanese($loginUser->userProfile->role) }}</div>
                </div>

まとめ

• 共通で使うような変数やロジックがあればview composerにまとめよう！

参考記事

• https://readouble.com/laravel/5.5/ja/views.html

ログイン必須なLaravelシステムでファイルの保存と取得を行う

ログイン必須なLaravelシステムでファイルの保存と取得の方法を軽く調べてみました。

要約

だいたいドキュメントに書いてある。。。
- Storageを使う
- ファイルの操作はLaravelのドキュメントの通り。
- ファイルの保存場所のシンボリックリンクをpublicに作らない
- コントローラでファイルを取得して返す

やりたいこと

• Laravelでファイルの保存と取得
• ファイルはログイン済みのユーザのみが見れる
  • 非ログインユーザは見れない

方法

authのミドルウェアを指定したコントローラを経由してファイルを返すようにする。

ファイルの保存

use Illuminate\Support\Facades\Storage;
Route::group(['middleware' => 'auth'], function() {
  Route::get('/', function() {
    $content = "hello world\n";
    Storage::put('test.txt', $content);
    return "saved!";
  });
});

これで$contentの内容がstorage/app/text.txtに保存される。

ファイルの取得

use Illuminate\Support\Facades\Storage;
Route::group(['middleware' => 'auth'], function() {
  Route::get('/test.txt', function() {
    $content = Storage::get('test.txt');
    return $content;
  });
});

最後に

簡単にできた。あとは、コントローラでファイルに対しての認可を行ったりすれば、もっと複雑なことができそうです。

はじめに

最近バッグログのwiki機能を触っている際に、これ、自分でも作れるんじゃね？
と思ったので、色々調べてみると、良さげなエディタを見つけたので使ってみることにした。

Simple MDEとは？

JavaScriptのMarkdownエディターです。
公式ページ

選んだ理由

1. シンプルでわかりやすいUI
2. 記載しながらリアルタイムでプレビューしてくれる書きやすさ
3. 導入のしやすさ

画像で見て取れるように、太字にしたい箇所や見出しにしたい箇所などがわかりやすく、
リアルタイムでプレビューしてくれるので、見やすいし、描きやすい。
なおかつ導入には数コードですむため、初期導入にもってこいの印象

環境

Laravel Framework 5.8.35
PHP 7.1.23 (cli)

simpleMDEはcdnで読み込むことにする
基本サイトはlaravelで組んでいるのでlaravel上で動くことを確認

コード

create.blade.php

<textarea id="body" name="name" rows="8" cols="40"></textarea>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE({ element: document.getElementById("body") });
</script>

問題発生

エディタが入力できねえ・・・

laravel上で読まれているjsかソースの順番からか、jsの読み込み順が前後したっぽい。
なので、domが生成されるのを待って実行することに

create.blade.php

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(document).ready(function(){
        var simplemde = new SimpleMDE({ element: document.getElementById("body") });
    });
</script>

できたーーーー！！！

感想

導入はトラブルもあったがめっちゃ簡単にできた。
色々オプションもあるらしいので調べながら使ってみたい。

ちなみにPOSTデータはこんな感じ。

まあそりゃそうだけどマークダウンのテキストそのままポストされるので、それを保存したらいいかも。

今後も色々試してみる。

routes.phpからレコードの値を取ってきてそのままviewへ表示させたい、という部分があったので、メモ程度に書きます。

環境

PHP : 5.6.30
MySQL : 10.1.21
Laravel : 5.1.46

テーブル

以下サンプルテーブルです。
wordsテーブル

id	message
1	Hello
2	こんにちは

コード

route.php

Route::get('/', function () {
  // cookieからidを設定する
  if ($_COOKIE['lang'] == 'en') {
    $id = 1;
  } else {
    $id = 2;
  }

  // DB::table()を使用して値を取得する
  $query = DB::table('words')
    ->select('message')
    ->where('id', $id)
    ->first();

  $message = $query->message

   return view('main',['message' => $message]);
}

main.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        {{$message}}
    </body>
</html>

bladeの方はおまけ的な感じですが、一応念のため。

ビューの作成

resources/viewsにindex.blade.phpファイルを作成する。
書き方に関しては下記参照
https://blog.hiroyuki90.com/articles/laravel-blade/

//変数を展開する場合
<h1>{{ $hello }}</h1>

コントローラーの作成

app/Http/Controllersにコントローラーを作成する。

HomeControlller.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\View;

class HomeController extends Controller
{
    public function index()
    {
        $hello = 'Hello World';
        return view('index', ['hello' => $hello]);
        //1つ目の引数にディレクトリとファイル名指定
        //2つ目の引数でビューに$hello変数を渡す
    }
}

viewヘルパを使用する際はuse Illuminate\Support\Facades\View;を記載しないとエラーが出てしまう。
viewヘルパの中でresources/viewsにサブディレクトリを作成する際はドット記法を使い記述する。

HomeController.php

return view('admin.index', ['hello' => $hello]);

1つ目の引数のindexの部分がblade.phpのファイル名
2つ目の引数のhelloの部分がblade.phpファイルの中の変数を指定
$helloがビューに渡す変数

compact関数もしくはwithメソッドで渡すことも可能

compact関数
変数名とその値から配列を作成する

HomeController.php

$hello = 'Hello World';
return view('index', compact('hello'));
//返り値　array(1) { ["hello"]=> string(11) "Hello World" }

//もしくは
return view('index')->with('hello',$hello);