Macのキャプチャーやプレビューで画像編集すると、pngファイルの容量が大きくなる傾向があります。画像解像度を小さするには、限界があり、メタデータなど削除が必要です。
pngquantを使う
GUIツールではなく、「pngquant」をインストールして画像圧縮します。
pngquantのインストール
% brew install pngquant
pngquantで変換
pngquantで、png画像を上書き圧縮します。 ※この作業はバックアップをとってください。
% cd 画像フォルダ
% pngquant --ext .png --force *.png
Google Drive では Icon ファイルが自動的に作成されるので、バックアップするときに不要です。 find で「Icon?」で絞り込み、xargs で再起的に削除します。
Icon ファイル検索・削除
ローカルの Google Driveに移動して Icon を検索・削除します。
% /Users/yoo/Google ドライブ
% find . -type f -name Icon* -print0 | xargs -0 rm
※この作業は、Google Drive の同期を停止してください。
今回はピュアなPHPで実装する必要があったので 「php-markdown」を使ったMarkDown 処理を試してみました。
php-markdown
Composer でインストール
Composer で michelf/php-markdown をインストールします。
% composer require michelf/php-markdown
コードブロックの対応は MarkdownExtra を使う
単純にマークダウンを使うときは、Markdown で大丈夫ですが、コードブロックの pre, code タグに対応していません。
use Michelf\Markdown;
コードブロックに対応するには、MarkdownExtra を利用します。
use Michelf\MarkdownExtra;
MarkDown を HTML に変換する
MarkDown を HTML に変換するのはこれだけです。
$markdown = new MarkdownExtra();
$content = $markdown->transform($content);
ただ、 prism.js にも対応させたいので code_class_prefix に language- をつけておきます。関数とかにまとめるとこんな感じです。
function markdownToHtml($content){
$markdown = new MarkdownExtra();
$markdown->code_class_prefix = 'language-';
return $markdown->transform($content);
}
//マークダウン文章
$markdown = "
``` php
function hoge($value)
{
return $value;
}
```
";
//HTMLに変換
$html = markdownToHtml($markdown);
MarkdownExtra の pre, code 処理
これはマニュアルに載ってないので MarkdownExtra のソースコードを調べてみました。 $matches は文章に正規表現をかけた配列で、クラス名は index=2 にマッチします。あとは、 $code_class_prefix をくっつけてますね。
protected function _doFencedCodeBlocks_callback($matches) {
$classname =& $matches[2];
$attrs =& $matches[3];
$codeblock = $matches[4];
if ($this->code_block_content_func) {
$codeblock = call_user_func($this->code_block_content_func, $codeblock, $classname);
} else {
$codeblock = htmlspecialchars($codeblock, ENT_NOQUOTES);
}
$codeblock = preg_replace_callback('/^\n+/',
array($this, '_doFencedCodeBlocks_newlines'), $codeblock);
$classes = array();
if ($classname !== "") {
if ($classname[0] === '.') {
$classname = substr($classname, 1);
}
$classes[] = $this->code_class_prefix . $classname;
}
$attr_str = $this->doExtraAttributes($this->code_attr_on_pre ? "pre" : "code", $attrs, null, $classes);
$pre_attr_str = $this->code_attr_on_pre ? $attr_str : '';
$code_attr_str = $this->code_attr_on_pre ? '' : $attr_str;
$codeblock = "<pre$pre_attr_str><code$code_attr_str>$codeblock</code></pre>";
return "\n\n".$this->hashBlock($codeblock)."\n\n";
}
protonemedia/laravel-ffmpeg
Laravel で動画エンコードするライブラリ、「protonemedia/laravel-ffmpeg」を利用します。
ffmpg のインストール
「laravel-ffmpeg」を利用する前に、 ffmpg のインストールが必要です。ここでは Macでのインストールを説明します。
Homebrew でffmpg をインストールします。また XCode Tools も事前インストールしておいてください。
% brew install ffmpeg
ffmpeg のバージョンを確認します。
% ffmpeg -version
ffmpeg version 4.3.2 Copyright (c) 2000-2021 the FFmpeg developers
Laravel の設定
Composer で laravel-ffmpeg をインストール
Composer で laravel-ffmpeg をインストールします。
% composer require pbmedia/laravel-ffmpeg
artisan で publish
artisan コマンドで laravel-ffmpeg をパブリッシュします。
ファイル指定する場合
php artisan vendor:publish --provider="ProtoneMedia\LaravelFFMpeg\Support\ServiceProvider"
番号指定する場合
% php artisan vendor:publish
ProtoneMedia\LaravelFFMpeg\Support\ServiceProvider の番号を入力します。
...
[13] Provider: Livewire\LivewireServiceProvider
[14] Provider: ProtoneMedia\LaravelFFMpeg\Support\ServiceProvider
[15] Tag: config
...
>14
「Publishing complete」が表示されれば成功です。
Publishing complete.
laravel-ffmpeg.php の確認
パブリッシュが成功すると「config/laravel-ffmpeg.php」が作成されます。 「config/laravel-ffmpeg.php」の内容は以下の通りです。
return [
'ffmpeg' => [
'binaries' => env('FFMPEG_BINARIES', 'ffmpeg'),
'threads' => 12,
],
'ffprobe' => [
'binaries' => env('FFPROBE_BINARIES', 'ffprobe'),
],
'timeout' => 3600,
'enable_logging' => true,
'set_command_and_error_output_on_exception' => false,
'temporary_files_root' => env('FFMPEG_TEMPORARY_FILES_ROOT', sys_get_temp_dir()),
]
ffmpeg のパスを設定
ffmpeg、ffprobeのパスをターミナルで調べます。
% which ffmpeg
/usr/local/bin/ffmpeg
% which ffprobe
/usr/local/bin/ffprobe
ffmpeg、ffprobeのパスを環境設定ファイル .env に ffmpeg 設定します。
FFMPEG_BINARIES=/usr/local/bin/ffmpeg
FFPROBE_BINARIES=/usr/local/bin/ffprobe
Providor と alias の設定
config/app.php に Providor と Facade の alias を設定をします。 namespace は「Pbmedia\LaravelFFMpeg\」です。
'providers' => [
...
ProtoneMedia\LaravelFFMpeg\Support\ServiceProvider::class,
...
],
...
'providers' => [
...
'FFMpeg' => ProtoneMedia\LaravelFFMpeg\Support\FFMpeg::class,
...
]
mp4 をストレージにアップ
storage/app/public/mp4/ に .mp4 ファイルをアップしておきます。 今回は「sample.mp4」とします。
動画情報の取得
Laravel の Controller などで確認してみましょう。
...
use ProtoneMedia\LaravelFFMpeg\Support\FFMpeg
...
class HomeController extends Controller
{
...
public function index()
{
$media = FFMpeg::fromDisk('public')->open('mp4/sample.mp4');
$mediaStreams = $media->getStreams();
$duration = $media->getDurationInSeconds();
$codec = $mediaStreams[0]->get('codec_name');
return view('admin.index')->with(
[
'mediaStreams' => $mediaStreams,
'duration' => $duration,
'codec' => $codec
]
)
}
...
}
Let's Encrypt の無料証明書を発行・管理する certbot-auto が Debian/Ubuntu OS で非対応になりました。certbot と python3-certbot-apache をインストールしてサーバ証明書の管理をします。
Apache の ServerName 設定
/etc/apache2/sites-available/000-default.conf ファイルで ServerName にドメインを設定します。
$ sudo vi /etc/apache2/sites-available/000-default.conf
ServerName ドメイン
...
certbot と python3-certbot-apache のインストールと設定
certbot で Apache の設定を読み込んで実行し、各設問に答えて設定します。
更新通知のメールアドレスを入力します。
$ sudo certbot --apache
Saving debug log to /var/log/letsencrypt/letsencrypt.log Plugins selected: Authenticator apache, Installer apache Enter email address (used for urgent renewal and security notices) (Enter 'c' to cancel):メールアドレス
A を入力して同意します。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must agree in order to register with the ACME server at https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A
Electronic Frontier Foundation からのお知らせを受けてとるか答えます。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: N
対象のドメインを番号で選択します。
Which names would you like to activate HTTPS for?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: xxxxxxxxx
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel):1
HTTP接続のときに HTTPSにリダイレクトするかを選択します。
Please choose whether or not to redirect HTTP traffic to HTTPS, removing HTTP access.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for new sites, or if you're confident your site works on HTTPS. You can undo this change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2
Congratulations! のメッセージが表示されれば設定完了です。
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://logicoya.com You should test your configuration at: https://www.ssllabs.com/ssltest/analyze.html?d=xxxx
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
...
サーバ証明書の有効期限更新を確認
今回の設定でサーバ証明書が自動更新されますが、certbot.timer でサーバ証明書の有効期限や次回更新日時を確認できます。
$ sudo systemctl status certbot.timer
● certbot.timer - Run certbot twice daily
Loaded: loaded (/lib/systemd/system/certbot.timer; enabled; vendor preset: enabled)
Active: active (waiting) since Sun 2021-07-04 15:06:16 JST; 44min ago
Trigger: Mon 2021-07-05 09:59:24 JST; 18h left
Triggers: ● certbot.service
Jul 04 15:06:16 xxxx systemd[1]: Started Run certbot twice daily.
サーバ証明書更新テスト
certbot でサーバ証明書の更新ができますが、 --dry-run でテストできます。
$ sudo certbot renew --dry-run
GitHub の「master」と「main」
2020年末頃から GitHub のデフォルトブランチが「master」から「main」に変更になりました。GitHub をはじめた人がこの変更を知らない人が手順を間違えて「master」に push して放置していることがあります。
手動で master に push してしまうのが原因？
これは GitHub でリポジトリ作成すると「main」ブランチがデフォルトになったにもかからわず、手動コマンドで「master」に push してしまうことが多いようです。
% git push origin master
「main」と「master」の食い違いは最終的に、ブランチを移動する作業が必要ですが、ここでは割愛します。
master を checkout する
今回はデフォルトが「main」ブランチで、「master」ブランチで管理されたソースを pull/checkout してみます。
Git clone する
まずリポジトリをクローンして、プロジェクトフォルダに移動します。
% git clone https://github.com/アカウント名/リポジトリ名.git
% cd プロジェクト名
リモートブランチ（master）をローカルブランチ（master）に checkout
リモートブランチは「master」になっているので、ローカルブランチも「master」にあわせて checkout します。 -b は新しくブランチを作成してくれるオプションです。
% git checkout -b master origin/master
Branch 'master' set up to track remote branch 'master' from 'origin'.
Switched to a new branch 'master'
これでリモートブランチ「master」からソースもダウンロードされます。
ローカルブランチや origin の確認
ローカルブランチが「master」ブランチに変わったことを確認します。
% git branch
main
* master
また origin を確認するとメインが main でその他 master ブランチも追跡していることがわかります。
% git remote show origin
* remote origin
Fetch URL: https://github.com/アカウント名/リポジトリ名.git
Push URL: https://github.com/アカウント名/リポジトリ名.git
HEAD branch: main
Remote branches:
main tracked
master tracked
Local branches configured for 'git pull':
main merges with remote main
master merges with remote master
Local refs configured for 'git push':
main pushes to main (up to date)
master pushes to master (up to date)
Laravel では Auth や Jetstream で認証機能を実装できますが、マルチログインは結構面倒です。
例えば未認証のリダイレクト処理はミドルウェアの Authenticate->redirectTo() で処理していますが、シングルログイン（user）の記述です。
Authenticate のデフォルト設定
app/Http/Middleware/Authenticate.php
protected function redirectTo($request)
{
if (!$request->expectsJson()) {
return route('login');
}
}
ここで user、admin 2つのマルチドメイン認証で「/user/xxx」「/admin/xxx」にアクセスしたとき、上記のルーティングでは「/login」にリダイレクトされてしまいます。
また「/login」でなく「/user/login」「/admin/login」でルーティングすると当然ながら Routing エラーになります。
Symfony\Component\Routing\Exception\RouteNotFoundException
Route [login] not defined.
Authenticate の修正
2つの認証「user」「admin」が未承認時、「/user/login」「/admin/login」 にリダイレクトするよう修正します。今回は直接「user」「admin」と直接設定しましたが、ループ処理は guard の設定と連携してもよいかと思います。
protected function redirectTo($request)
{
if (!$request->expectsJson()) {
foreach (['user', 'admin'] as $user) {
if ($request->routeIs("{$user}.*)) {
return route("{$user}.login");
}
}
}
}
また、認証処理を user、admin の各コントローラーのコンストラクタやサービスなどで認証する場合は、 Authenticate->redirectTo() は無効にする必要があります。
Redis インストール
brew コマンドで redis をインストールします。
$ brew update
$ brew install redis
brew で redis サーバを起動します。
$ brew services start redis
redis サーバが起動しているか確認します。
$ brew services list
Name Status User Plist
mysql started yoo /Users/yoo/Library/LaunchAgents/homebrew.mxcl.mysql.plist
php@7.4 started yoo /Users/yoo/Library/LaunchAgents/homebrew.mxcl.php@7.4.plist
postgresql@12 started yoo /Users/yoo/Library/LaunchAgents/homebrew.mxcl.postgresql@12.plist
redis started yoo /Users/yoo/Library/LaunchAgents/homebrew.mxcl.redis.plist
redis-cli の確認
Redis クライアントでログインし、Redis コマンドで操作してみます。
redis-cli ログイン
$ redis-cli
データ登録
127.0.0.1:6379> set mykey "hello"
OK
データ取得
127.0.0.1:6379> get mykey
127.0.0.1:6379> keys *
1) "mykey"
全データ取得
127.0.0.1:6379> keys *
(empty array)
データ削除
127.0.0.1:6379> del mykey
(integer) 1
ログアウト
127.0.0.1:6379> exit
phpredis のインストールと設定
<
p>macOS の PHP で Redis を利用するには、PECL で Redis をインストールと設定する必要があります。
<
p>
$ pecl install redis
php.ini で redis.so を読み込む
php.ini ファイルをパスを確認します。 以下は /usr/local/etc/php/7.4/php.ini になっていますが、各環境で確認してください。
$ php -r "echo phpinfo();" | grep "php.ini"
Configuration File (php.ini) Path => /usr/local/etc/php/7.4
Loaded Configuration File => /usr/local/etc/php/7.4/php.ini
確認した php.ini を修正し redis.so を読み込むよう設定します。
extension="redis.so"
PHP 再起動
PHP を再起動します。以下は php@7.4 をインストールして有効にしている場合です。 （インストールしているパッケージにあわせてください）
$ brew services restart php@7.4
$ php -i | grep Redis
以前は、jQuery や JavaScript でスムーズスクロールをいろいろ実装していましたが、CSS3 で1行書くだけで対応可能です。
html{
scroll-behavior: smooth;
}
ただ 2021/02 時点で IE はもとより Safari に対応していないので、実際には JavaScript での記述も必要になります。
EC-CUBE4 で Gmail の smtp の設定方法は、.env の MAILER_URL に記述します。
前提として、Googleセキュリティでの2段階認証が必要になります。
- smtp: smtp.gmail.com
- port: 465
- encryption: ssl
- auth_mode: login
- username: Gmail アカウント（Gmail アドレス）
- password: Google セキュリティの2段階認証で作成したパスワード（Gmail アカウントのパスワードではありません）
EC-CUBE の.env
EC-CUBE4 から Swift Mailer を利用しますが、smtpプロトコルの URLをパラメータ方式で設定します。
MAILER_URL=smtp://smtp.gmail.com:465?encryption=ssl&auth_mode=login&username=xxxxx@gmail.com&password=xxxxxx
