投稿

2019の投稿を表示しています

ImageMagickでPNGをWebPへ変換すると色が黒くなる

PNGをWebPに変換したら黒くなるので調べたときの覚書。

前は問題なかった。
JPEG形式は問題なし。

環境: CentOS 7.7, ImageMagick 6.9.10-68, libwebp 1.0.2

変換コマンド
# mogrify -quality 80 -format webp -path ./ ./*.png

cwebの最新版をダウンロードして試す
参考: Compiling the Utilities | WebP | Google Developers
# cd /opt/software/
# curl -O https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz
# tar -xzvf libwebp-1.0.3-linux-x86-64.tar.gz
# cd libwebp-1.0.3-linux-x86-64
# ls -l ./bin/

変換してみる
$ /opt/software/libwebp-1.0.3-linux-x86-64/bin/cwebp logo.png -o logo.webp

Google Chromeへドラッグアンドドロップして確認。
(Windows 10で表示すると色が濃くなるのでChromeで確認した方がいい)
無事変換されている。


なので、おそらくImageMagickのバグ。
しばらくしたら直ると思うので、それまではcwebpコマンドで変換する。


【関連記事】
ホームページ開発に画像形式WebPを導入

Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links

下記エラーになってハマった時の覚書。

systemd[1]: Can't open PID file /var/run/nginx.pid (yet?) after start: Too many levels of symbolic links
環境: Kagoya VPS(Open VZ), CentOS 7.7, nginx 1.16.1


yum updateするとこの現象が起きるらしい。
カゴヤのサポートに問い合わせてみたところ「最近 CentOS の systemd 周りの更新があったようで、yum update によりおっしゃる状況となることがあるようです。」とのこと。
答えが知りたい方は途中読み飛ばして、「systemd設定ファイルのPIDパスを変更」を参照してください。



【現象】
nginxが自動起動しないsystemctl start nginxを実行しても上記エラーで起動しない開発環境の仮想マシン(ほぼ同じ環境)では起こらない。カゴヤVPS上で起こる。OpenDKIMも自動起動していないMariaDBは無事起動している再起動直後は自動起動するが上記エラーで止まる。


【この現象が起きる前にやったこと】
yum updatephpを7.2から7.3へアップデート


【試した事】
nginxの再インストールphpの再インストール


【分かった事】
直接「/usr/sbin/nginx -c /etc/nginx/nginx.conf」を実行すると起動できる。systemdが何かおかしい気がする(?)


IPv6を疑う(←意味なかった) /var/run/は/run/にシンボリックリンクを貼ってるけど、今まで大丈夫だったし別の仮想環境で問題ないから、環境周りの原因からと思い、もう一度サーバーのエラーログを眺める
# less /var/log/messages
systemd: Binding to IPv6 address not available since kernel does not support IPv6. このエラーが気になった。
カゴヤVPSではデフォルトでIPv6は無効状態(参考: IPv6 の利用 - KAGOYA Internet Routing)。
なので、OSレベルでIPv6を無効にしてみる。
# vi /etc/sysctl.d/dis…

Flutter開発のサンプルアプリを探す

イメージ
いい感じのFlutterサンプルアプリをスクリーンショットを撮りながら探しているときの覚書。

環境: Windows 10, Flutter SDK v1.9.1 , Android Studio 3.5


参考サイト
samples/INDEX.md at master · flutter/samples · GitHub

Playground app for Flutter 下記エラーで動かなかった。
* Error running Gradle:
ProcessException: Process "D:\Documents\Projects\GitHub\FlutterPlayground\android\gradlew.bat" exited abnormally:
  Command: D:\Documents\Projects\GitHub\FlutterPlayground\android\gradlew.bat app:properties
Finished with error: Please review your Gradle project setup in the android/ folder.

Platform Design
右上の切り替えボタンで、サブメニューとタブメニューを切り替えて表示できる。
合わせてマテリアルデザインのナビゲーションの概念も参考に。
GitHub: samples/platform_design at master · flutter/samples · GitHub

Shine
ショッピングアプリ。
横スクロールで商品を閲覧する。
Material Componentをカスタマイズする例。
Page: Shrine - Material Design
GitHub: samples/material_studies/shrine at master · flutter/samples · GitHub


Rally Page: Rally - Material Design
GitHub: samples/material_studies/rally at master · flutter/samples · GitHub
「AndroidManifest.xml could not be …

CentOS7のPHP 7.2をPHP 7.3にYUM経由でアップデート

PHP 7.2のアクティブサポートが2019年11月末で切れるので、PHP 7.3をインストールしたときの覚書。

環境: CentOS 7.7.1908, WordPress 5.2.3


PHPのサポート状況は公式サイトで確認
PHP: Supported Versions

remiリポジトリの設定ファイルで切り替えるだけ。
# cd /etc/yum.repos.d/
# less remi-php73.repo
[remi-php73]
enabled=1
# less remi-php72.repo
[remi-php72]
enabled=0
アップデート実行
# yum update

PECL関連でWarning。一応メモ。
PHP Warning:  Invalid argument supplied for foreach() in /usr/share/pear/PEAR/Command.php on line 249
PHP Stack trace:
PHP   1. {main}() /usr/share/pear/peclcmd.php:0
PHP   2. require_once() /usr/share/pear/peclcmd.php:31
PHP   3. PEAR_Command::getCommands() /usr/share/pear/pearcmd.php:54
PHP   4. PEAR_Command::registerCommands() /usr/share/pear/PEAR/Command.php:302
PHP Warning:  Invalid argument supplied for foreach() in /usr/share/pear/PEAR/Command.php on line 249
実行ユーザーを変更しているので権限再設定
# chown nginx.www -R /var/lib/php/

確認
# php --version
PHP Warning:  PHP Startup: Unable to load dynamic library 'mecab.so' (tried: /usr/lib64/php/modules/mecab.so (/usr/lib64/php/modul…

React Routerを理解するのに有用なMaterial UIサンプルアプリ

React Router(ページ遷移)のいいサンプルがないものかと探しているときの覚書。

環境: CentOS 7.6, Node.js v12.10.0

Material UIの公式サイトからFREEのものをダウンロード。
React Templates | Material-UI Themes

こちらのテンプレートを選んだ。
Material Dashboard React: Free Material-UI Dashboard @ Creative Tim
v1.8: React v16.9.0, Material UI v4.3.2, React Router v5.0.1

展開してインストール
$ unzip material-dashboard-react-master.zip
$ cd material-dashboard-react-master
$ npm install

package.jsonを確認。start実行
$ less package.json
$ npm run start

ブラウザで表示すると。。。動いた。


ちゃんとFunction Componentで書かれているので読みやすい。
Reactのダッシュボードサンプルアプリとして非常に助かる。

あとはコードを読む。
React初心者はチュートリアルをやった後でないと意味が分からないと思う。


かなり時間の節約になったので、投げ銭的な意味でプレミアム版を買った。6,800円。
プレミアム版にはForm Validationなど、さらにサンプルが豊富なので買って正解。
ドキュメントも割としっかりしている。


【関連記事】
【React】Function ComponentでstateやcomponentDidMountも可能Reactを使ったUIコンポーネント「Material-UI」

Facebookの友達申請用QRコード生成

イメージ
名刺にFacebook用のQRコードを表示しようと調査したときの覚書。

QRコードをスキャンするとFacebookアプリが起動して、簡単に友達申請できるようにしたい。
さらにFacebook用QRコードだと分かるような見た目にしたい。

1.Facebookアプリから自分のプロファイルへのリンクを取得 手順
Facebookアプリを起動して、右上の虫眼鏡をタップ「qr」と入力して検索「QRコード」が表示されるので選択(下図参照)「マイコード」を選択して自分のQRコードを表示シェアでPCに送付PCでQRコードを表示して、スマホのQRコードリーダーでスキャンURLを保存メモ
Facebookアプリでの検索結果


QRコードに埋め込まれているURL形式は
https://www.facebook.com/qr?id=100000123456789
という感じ。


2.QRコードを生成する 下記サイトが色とかロゴも追加できて使いやすい。
Design QR Code generator - Free - Unitag
Facebookのロゴは公式サイトから。
Facebookブランドリソースセンターアセットおよびブランドガイドライン 名刺は「印刷用パッケージ」に当てはまるのか迷ったけど大丈夫だと思う。


3.調査してる過程で分かったこと いろいろ彷徨った記録
FacebookのプロファイルページのURLをQRコードにしてもブラウザが起動するだけ「メッセンジャーコード」というメッセンジャー専用のコードがある。
→ QRコードではない(Messengerアプリでないと読み込めない)。
→ 2019年10月末で廃止予定(参考:Messengerコード - Messengerプラットフォーム - ドキュメンテーション - Facebook for Developers)「m.me」という仕組みでQRコードを生成する方法がある。
→ Messengerアプリが必要。Messenger Liteでは起動しない(参考: m.meリンク - Messengerプラットフォーム - ドキュメンテーション - Facebook for Developers)「fb://」のURI Schemeではアプリ起動しない(?よく調べてない)

LINEのQRコードも載せてたけど、仕事の名刺はFacebookだけで良さ…

ReactのMaterial UIのtheme構造

makeStylesの引数であるthemeの構造が知りたくて調査したときの覚書。

環境: React v16.9.0, Material UI v4.4.1

公式サイトでtheme構造が公開されている。
Default Theme - Material-UI
画面右上のヘッダーにあるテーマ切り替えボタンで、light/darkを切り替えるとそれに合わせて表示のtheme値も変わる。


例えばNavLinkで適用された文字装飾と文字色を戻すときは、
  linkText: {
    textDecoration: 'none',
    color: theme.palette.text.primary,
  } これを適用する。


【関連記事】
Reactを使ったUIコンポーネント「Material-UI」


Error: ENOSPC: System limit for number of file watchers reached

Reactの開発をしているときにOSのファイルを開く上限に達したときの覚書。

環境: CentOS 7.6

開発アプリをwatchしながら、別のサンプルアプリを起動したら下記エラー。
Error: ENOSPC: System limit for number of file watchers reached, watch '/home/httpd/httpdocs/material-dashboard-react-master/public'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1274:11)
参考になったサイト
Increasing the amount of inotify watchers · guard/listen Wiki

現在の設定値を確認
# cat /proc/sys/fs/inotify/max_user_watches

設定変更
# echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

無事動いた。


本番環境でシステムが開くファイルの上限を拡張するときは、nginxの「worker_rlimit_nofile」設定も見直しが必要かも。


【関連記事】
CentOS7 + Nginx + PHP7 + MariaDB + Node.jsの環境を構築する手順まとめカゴヤ・クラウドVPS(CentOS)の初期設定

WordPressのnonceの有効期限

WordPressのフロントエンドの管理画面をReactで開発しているときの覚書。
Ajax通信するときはWordPressのnonceを使った方がいいじゃないかと思い、nonceの有効期限を調べてみた。

「wp_create_nonce」で作成したnonceの有効期限はデフォルトで最大24時間。

UNIX時刻のAM0時とPM0時を2つ超えた時点で無効になる。
なので実質12~24時間。

詳しくは公式サイトで。
WordPress Nonces | WordPress Codex フックを使えば有効期限を任意に変更できる。


CSRF(シーサーフ)対策のためにも、DBに書き込む処理はnonceをチェックした方がいい。
クロスサイトリクエストフォージェリ - Wikipedia

【関連記事】
WordPressのXML-RPCとREST API(WP-JSON)を無効にする(Nginxの設定)

Reactの日付処理を「moment.js」で。日本語設定も

React開発で日付処理のライブラリを探したときの覚書。

環境: React v16.9.0, Material UI v4.4.0

Moment.jsが安定
Moment.js | Home

ドキュメントが充実していて、日付の足し算、引き算、経過日数などやりたいことは全てできる。

日本語設定も標準で配布されているので、importして設定すれば曜日を日本語表示可能。
設定方法は下記サイトで。
webpackでmoment.jsを日本語設定したものをimportする - Qiita


【関連記事】
ビルドツール「Webpack」を試す。LESSをCSSにビルド[Titanium] メモリリークを起こさないために気をつけること

【React】Function ComponentでstateやcomponentDidMountも可能

サンプルのFunction ComponentをClass Componentに書き直しているときに、Function Componentで状態を管理できるし、componentDidMountも出来るようになって、しかも実行速度が速い。
という衝撃の事実が発覚したときの覚書。

環境: React v16.9.0, Material UI v4.4.0

この仕組みを提供するのがHooks。
React v16.8からの新機能。
詳しくは公式サイトで。
フックの導入 – React
Class Componentで悩んだ経験がないと「動機」に書いてあることが理解できないかもしれない。
「ビデオによる紹介」がとても分かりやすいので見とくのがおすすめ(英語)。


フックを使ってデータ取得を行うサンプルはこちら。
フックでデータの取得をどのように行うのですか?|フックに関するよくある質問 – React

これからはFunction Component + Hooksが主流になる。


【関連記事】
Reactを使ったUIコンポーネント「Material-UI」React.jsを学ぶ。買った本とVueとの比較。

Reactを使ったUIコンポーネント「Material-UI」

ReactのUIコンポーネントを探しているときの覚書。

仕事ではBootstap v3を使っている。
なので、React Bootstrapにしようかと思ったけど、Reactを使う場面はアプリのようなUIがいいのではと思い、「Material-UI」を試してみることにした。
Material-UI: A popular React UI framework

特徴(Bootstrapユーザーの目線から)
CSSがJSファイルに埋め込まれているCSS-in-JSに少し抵抗がある。参考: Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
→ 出来るだけ標準スタイルを利用する。独自部分は色だけ。それがマテリアルデザイン。React全般にいえることだけどPHPと連携しづらい(後日追記予定)


インストール 前の記事で作ったチュートリアル用アプリを元にして、公式サイトを参考にする。
$ cd react-demo
$ npm install --save @material-ui/core @material-ui/icons

前に作ったApp.jsxを編集してみる。
$ less src/App.jsx
import React, { Component} from "react"; import Button from '@material-ui/core/Button'; //import "./App.css"; class App extends Component{ render(){ return( Hello World ); } } export default App;
ビルド
$ npm run build

ちゃんとスタイルされたボタンが表示された。
スタイルを含め全部bundle.jsに出力されているみたい。
これだけでもbundle.jsは1.5Mになった。

CSSを書かなくていいのが不思議な感じ。

あとは公式のTemplatesにソースコードが公開されているので参考にする。
Free React Templates - Material-UI

Dashboardサンプルを試す Githubからgit …

React + Babel + Webpackのチュートリアル

WordPressの1ページをReactを使って開発したいと勉強しているときの覚書。

環境: CentOS 7.6, node v11.14.0

今まで通りPHPでさくっと作れるけれど下記理由で今に至る
Flutterを最近使い始めたから。FlutterがインスパイアーされたReactの仮想DOMの考え方を学びたい予約システムやLINEのようなコミュニティシステムの開発は、SPA(Single Page Application)になると思うそろそろ技術の淘汰が進んで学びやすくなっていそう

まずはReact公式サイトを読む
Create a New React App – React

そこからリンクされている記事を参考にする。
Creating a React App… From Scratch. - Noteworthy - The Journal Blog

作業環境を作る$ mkdir react-demo
$ cd react-demo/
$ npm init -y

各種ディレクトリ作成
$ mkdir public src dist

index.htmlはGistのを流し込む。
$ vi public/index.html

BabelのインストールBabelの公式サイトで各種パッケージの説明がある。
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

Babelの設定ファイルを作る
$ vi .babelrc
{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}
Webpackのインストール まずは必要なものだけ。
$ npm install --save-dev webpack webpack-cli babel-loader

設定ファイルを作る
$ webpack.config.js
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  mode: "development",

React.jsを学ぶ。買った本とVueとの比較。

React(仮想DOM)を試してみたくて、WordPressサイトの一部(ログイン後の管理画面)をReactで構築したときの覚書。

Reactの基礎 Reactは「UI構築のためのJavaScriptライブラリ」
React – ユーザインターフェース構築のための JavaScript ライブラリ

Reactの主な特徴
「learn once, use everywhere(一度学習すれば、どこでも使える)」が目標SPA(Single Page Application)を構築するのに優れている。仮想DOMの考え方はFlutterにも影響を与えた。
参考:翻訳記事:俺のFlutterはレボリューション(革命)だ! - Qiita
Reactの参考書籍
買ったのはこの本
Reactビギナーズガイド ―コンポーネントベースのフロントエンド開発入門
余計なことを掲載せず「Reactとは」を理解するには良書だと思う。
詳しいことはウェブに全部あるし。

React.jsとVue.jsとの比較 VueはReactの考え方を元に、よりシンプルに記述できるよう設計された。

参考サイト
ReactとVueのどちらを選ぶか - Qiita他のフレームワークとの比較 — Vue.js【JavaScript】3大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA

決めてになったのは最期の速度比較記事。
バックエンドがPHP(WordPress)なので、Vueの方が合っているような気もするけど、将来的なことを考えてReactを採用することにした。
…というか、これから試して実装するか判断する。



【関連記事】
「Flutter」でAndroidアプリ、iOSアプリ開発計画CentOS6でv8をソースからビルド

ビルドツール「Webpack」を試す。LESSをCSSにビルド

ReactのチュートリアルをやっているときにBabelのビルドツールとしてWebpackを導入したときの覚書。

環境: CentOS 7.6, Node.js v11.14.0, webpack v4.39.3

今までのタスクランナーは
Grunt → PhpStormのファイル監視機能
を使って問題なく開発していた。

Reactを学ぶ際に、最近流行りのWebpackも覚えておこうとやってみた。

Webpackとは Node.jsで動くビルドツール。タスクランナー、開発ウェブサーバーとしても機能もある。
最近はGulpやGruntからWebpackに移行している流れ。
[意訳]私がGulpとGruntを手放した理由 - Qiitastep by stepで始めるwebpack - Qiita

公式のチュートリアルをやる まずは大人しく公式のチュートリアルをやってみる(読んだだけでやった気にならない)。
Getting Started | webpack

lessファイルをビルド チュートリアルのディレクトリで作業する。
Lessファイルを作成
$ mkdir less
$ cd less
$ vi variables.less
@red: #ff0000;$ vi main.less
@import "./variables";
body {
  background-color: @red;
} 公式に従いless-loaderをインストール(参考:less-loader | webpack
$ npm install less-loader --save-dev

必要なモジュールをインストール
$ npm install less style-loader css-loader --save-dev

設定変更
$ vi webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {

法人でタイムズカーシェアを利用する

駅から遠いお客様のところへタクシーを使うのも費用がかさむので、法人でタイムズカーシェアを契約したときの覚書。

公式ページはこちら。
カーシェアリングならタイムズカーシェア(旧タイムズカープラス)

タイムズカーシェアのメリット
法人の場合は月額基本料金0円キャンペーン期間中はカード発行手数料も0円使った分だけクレジットカード決済で経費処理が楽15分206円。ガソリン代込み主要な駅にはステーションがある24時間入出庫可能ゴルフ行くときなど早朝出発前から使える(夜中駐車場に停めておく必要ない)

使えるようになるまで約10日ぐらい掛かるので注意
ウェブサイトから入会申し込みして書類を発送1週間ぐらいすると法人用ログインIDが発行される(メールが届く)法人専用画面から法人でログインしたあと個人IDを確認通常画面から個人IDでログインし直す運転免許証を登録 →3営業日で認証される入会申し込みして10日後ぐらいに法人カードが届いた

アプリもある
スマートフォンアプリ | カーシェアリングのタイムズカーシェア

公式サイトの利用シーンとかみると確かに便利そうだと思う。
利用シーン | カーシェアリングのタイムズカーシェア


使ってみた感想
いろんな車に乗れて楽しいネットで事前予約するだけ(2週間前から可能)で使えるので、レンタカーみたいに受付がなくてスムーズニコニコレンタカーを使わなくなった


法人であれば登録しておいて損はない。
自宅近くの駅前にステーションがあったし、もっと早く利用すれば良かったと思ったほど。

Flutter + Firebaseでアプリ開発のチュートリアル

FlutterとFirebaseを使う方針が立ったので、具体的なアプリ開発に向けてFlutterを勉強しているときの覚書。

環境: Windows 10 Pro 64bit 1903, Flutter SDK v1.7.8, Android Studio 3.4.2

下記のチュートリアルを進める。
Write Your First Flutter App, part 1 | Google CodelabsWrite Your First Flutter App, part 2 | Google CodelabsFirebase for Flutter | Google Codelabs
感想など
昔は一文字変えるだけでもビルドし直していたので、ホットリロードは感動する。アプリ開発がウェブ開発と同じくらいやりやすくなってきた。Dart言語もJavaScriptに似ているので全く気にならない。「全てがWidget」の考え方が分かってきた。

あとは必要なときにGitHubにあるサンプルをみれば大丈夫そう。
firebase/quickstart-android: Firebase Quickstart Samples for Android | GitHub


【関連記事】
Firebaseを理解するためにウェブチャットのサンプルを試すFlutterでアプリ開発。サンプルアプリを試す

Googleマイビジネスで追加した写真が反映されない

Googleマイビジネス(GMB)に登録した写真がGoogle検索しても表示されないので調査したときの覚書。

サポートに問い合わせすれば対応してくれるらしい。
ビジネスオーナーが登録した写真が2週間たっても反映されない - Google 広告主コミュニティ

サポートに問い合わせする方法
Googleマイビジネスの管理画面の左メニューにある「サポート」「ご不明な点がある場合」「ビジネス情報と編集」「住所を変更する」「メールサポート」

追加可能な写真の仕様
複数のビジネス情報に写真を追加する - Google マイビジネス ヘルプ
写真は JPG、GIF、PNG、TIFF、BMP のいずれかの形式にしてください。各写真のサイズは 5 MB 未満としてください。追加する写真は 720×720 ピクセル以上、3,000×3,000 ピクセル以下にすることをおすすめします。写真の長い方の長さが、短い方の長さの 2 倍を超えないようにする必要があります。Google のサービスでは縦長の写真よりも横長の写真の使用をおすすめします。1 つのビジネス情報に登録できる追加の写真は 25 枚までです。ピントの合った十分に明るい写真を使用します。Photoshop などの画像編集ソフトによる加工や、過度のフィルタ使用は避けてください。画像は現実に則している必要があります。
引用元:ビジネス情報一括処理時の写真についてのガイドライン - Google マイビジネス ヘルプ

追加した写真はPhotoshopで明るさなど調整しているけど、傷を消したりなどの加工はしていない(撮影するときに現場でキレイに見せるための努力はしている)。
あと、一眼レフ+広角レンズで撮影しているので、スマホでは撮れない絵にはなっている。


またサポートから返信があったら追記予定。
(2019/07/30追記)3日後サポートから「反映処理を行いました」と返信あり。


Googleマイビジネスの概要はさいたま起業家協議会で書いたコラムを参考に。
最低限知っておくべきSEO対策:「Googleマイビジネス」編 | さいたま起業家協議会

【関連記事】
Googleマイビジネスの「更新内容の確認」が消えない

Firebaseを理解するためにウェブチャットのサンプルを試す

Flutterを使ったアプリ開発のバックエンドとしてFirebaseを検討しているときの覚書。

環境: Windows 10 64bit

チュートリアルに従って単純なチャットアプリを試してみる。
Codelabsにチュートリアルがまとまっている。
Google Codelabs

個人的にウェブが得意なので、今回はこちらのチュートリアルを進める
Firebase Web Codelab

チュートリアルが分かりやすいので特に書くことはない。(笑)

「7. Set up user sign-in」のGoogleログインするときに下記エラー
Error: restricted_client
Application: Friendly Chat Web
You can email the developer of this application at:
This app is not yet configured to make OAuth requests. To do that, set up the app’s OAuth consent screen in the Google Cloud Console.このIssuesを参考にGoogle Cloud Platform(GCP)のFirebase用に作ったプロジェクトを選択、
APIとサービス→認証情報
を開いて、OAuth同意画面のロゴにpublic\images\にあるfirebase-logo.pngを指定(何でもいい)で保存。
これで動いた。


「11. Show notifications」では下記エラーでdevice tokenを取得できなかった。
Unable to get messaging token. FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script. (messaging/failed-serviceworker-registration). localhostでhttpsの環境で…

ミラーレス一眼カメラ「Nikon Z6」を購入。開封後の感想。

今まで仕事でもNikon D5500を使ってきたけど、一つ上のステップに進もうとZ6を買ったときの覚書。

D850、Z7、Z6で迷っていた。


ニコンZ6にした理由
瞳オートフォーカスが仕事で役に立ちそう無音撮影がしたい。「カシャカシャ」が気になるお客様が多いフルサイズにしては軽いSnapBridgeでスマホ転送が便利そう評判がいいZ7の間に10万円分の機能差はなさそう

買ったのはFTZマウントアダプターキット: 238,200円
価格.com - ニコン Z 6 FTZ マウントアダプターキット 価格比較

その他買ったのは
替えバッテリーXQDメモリーカード 64GBXQDアダプター

レンズは前に持っていたものを使う。
AF-S NIKKOR 35mm f/1.8G ED - 概要 | NIKKORレンズ | ニコンイメージングAF-S DX NIKKOR 10-24mm f/3.5-4.5G ED - 概要 | NIKKORレンズ | ニコンイメージング

持ってみると意外にずっしりくるので、重量を比較してみた(バッテリー、メモリーカード込み)。
D6 + FTZ: 810g(675g + 135g)
D5500: 470g

プラス340gでもD5500に慣れていると重く感じる。
D5500は右手だけで持っていても全然疲れない。
でもZ6は持っていると疲れるので、どこかに置きたくなる。
「軽さは正義」を実感。

ちなみに現場ではネックストラップを付けずに
Nikon FLX スリングバッグ + Peak Design キャプチャー v2で機動力を発揮するのが自分にあっている。


まだZ6を仕事で使ってないので、しっかり使いこなしていきたい。


【関連記事】
一眼レフカメラデビュー。「ニコン D5500」を買った

アプリ開発プラットフォームFlutterをMacにインストール

FlutterをWindowsにインストールすることは成功したので、iOS開発用に古いMac mini(Mid 2010)でも可能か試したときの覚書。

環境: macOS High Sierra 10.13.6, Flutter SDK v1.5.4, Android Studio 3.4.1, Xcode 10.1

公式サイトを参考に。
MacOS install  - Flutter
以下はWindowsからTeraTermで操作している。

SDKインストール SDKをダウンロードして展開
$ cd Downloads/
$ curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.5.4-hotfix.2-stable.zip
$ unzip flutter_macos_v1.5.4-hotfix.2-stable.zip

ApplicationsディレクトリへインストールしてPATHの設定
$ mv flutter /Applications/
$ less ~/.bash_profile

# Flutter
export PATH=$PATH:/Applications/flutter/bin
反映して開発用バイナリデータをダウンロード。確認
$ source ~/.bash_profile
$ flutter precache
$ flutter doctor

Warningになっているのをひとつずつ解決していく。

Android SDKの設定 Android Studioを最新にしてFlutterプラグインをインストール。
SDK ManagerからAndroid SDK 29をインストール。
Androidライセンスへ同意
$ flutter doctor --android-licenses

これでAndroid toolchainにチェックマークが付いた。

iOS開発の設定 flutter doctorに表示されているコマンドを実行
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

同じくbrewコマンドを実行していく
$ brew update
$ b…

Flutterでアプリ開発。サンプルアプリを試す

Flutterの開発環境を整えたので、今度はサンプルアプリを試してみたときの覚書。

環境: Windows 10 64bit, Flutter SDK v1.5.4, Android Studio 3.4.1

サンプルへのリンクは下記から
Learn more  - Fluttersamples/INDEX.md at master · flutter/samples | GitHub

まずはシンプルそうなこちらから。
nisrulz/flutter-examples: [Examples] Simple basic isolated apps, for budding flutter devs.
適当なフォルダにcloneして、README.mdにあるようにパッケージを取得する。
> git clone https://github.com/nisrulz/flutter-examples.git
> cd .\flutter-examples\
> .\get_packages.sh

...と思ったらシェルスクリプトだからWindowsで実行できない。
ソースをみたら各ディレクトリに移動してコマンドを実行しているだけなので、手動でやってみる。
> cd .\simple_material_app\
> flutter packages get

simple_material_appフォルダをAndroid Studioから開く。
AVD Managerから仮想デバイスを起動。
Runボタンを押して実行。
Test drive  - Flutter 動いた。嬉しい。


あとはGitHub上の各フォルダのREADMEを見れば、どんな感じか分かる。


次にこちらのサンプルを試す。

iampawan/FlutterExampleApps: [Example APPS] Basic Flutter apps, for flutter devs.

インスタグラムっぽいアプリをcloneしてみる。
> git clone https://github.com/iampawan/Flutter-Instagram-UI-Clone.git

Android Studioで開く。
エラーが出るのでさっきと同じコマンドを実行
> cd .\Flutter-Insta…

Flutterでアプリ開発。インストールと環境設定編

Flutterを試したときの覚書。

環境: Windows 10 64bit, Flutter SDK v1.5.4, Android Studio 3.4.1

公式ページが十分に分かりやすいので、そちらを参考に。
Windows install  - Flutter

SDKインストール Android SDKと同じフォルダ「D:\Documents\Android」に配置。
flutter_console.batをダブルクリックで実行。
PATHを設定してコンソールを起動するだけみたい。

Windowsの「Environment Variables」からユーザーパスを設定。
PATHに「D:\Documents\Android\flutter\bin」を追加。
(編集しやすくなっていて驚いた)
PowerShellを起動して、flutterコマンドが使えるか確認。

同じくPowerShellでチェックコマンドを実行
> flutter doctor

Flutter SDKがインストールされていることが確認できる。
環境変数にANDROID_HOMEもないといけないようなので設定する。

PowerShellを再起動して確認
> flutter doctor

Android SDK version 27.0.3を使っていて、Android SDK 28に上げろと言われたので、Android StudioのSDK Toolsから最新のAndroid SDK Build-Tools 29をインストールしてみた。

PowerShellで確認
> flutter doctor

Android toolchainのところでライセンスがどうのこうのとあるので書いてあるコマンドを実行
> flutter doctor --android-licenses

yを押して了承していく。
確認
> flutter doctor

ここでFlutterとAndroid toolchainにチェックマークがついた。

Android Studioの設定 Android Studioはインストール済みだったので、Flutterプラグインをインストール。
同時にDartプラグインもインストールされた。
Android Studioを再起動。

PowerShellで確認
> fl…

「Flutter」でAndroidアプリ、iOSアプリ開発計画

「犬猫家族アプリ」を再起動しようとしているときの覚書。
4年ほど前はAppcelator Titanium + Node.jsで作っていたけど、今度はFlutter + PHP7(WordPress)にしていく。

Flutterとは。 Googleが開発しているマルチプラットフォーム開発環境。2018年12月にFlutter 1.0がリリースされた。
Flutter - Beautiful native apps in record timeFlutter - Wikipedia

Flutterの特徴 記述はDart言語。
対応するプラットフォームは
モバイルアプリウェブデスクトップアプリ組み込みアプリ で真のマルチプラットフォームを目指している。


その他ウェブから集めた情報など
Dart言語はJavaScriptに似ているので敷居が低いドキュメントやサンプルが充実していて開発者に優しい。

あとはとりあえずやってみることが大事。

【関連記事】
犬猫家族アプリのAMP+PWA化計画KotlinでiOS開発は出来るのか調査Appcelerator Titaniumで作った「犬猫家族」アプリ

PHPStormでESLintを使って文法チェック

イメージ
PHPStormを使うようになってからは、PHPStormの機能だけでJavaScriptの文法チェックをしていたけど、ちゃんとlintツールを使うように設定したときの覚書。

環境: Windows 10, PHPStorm 2019.1.2

lintはバグの原因になるような曖昧な記述を警告してくれるプログラム(の総称)。
lint - Wikipedia

JavaScriptのLintツールは今なら「ESLint」を使っておけば間違いない。
まずは公式のスタートガイドを読む。
ESLint - Pluggable JavaScript linterGetting Started with ESLint - ESLint - Pluggable JavaScript linter

npmでインストールする。
# npm install --save-dev eslint

設定ファイルを作る
# vi .eslintrc.json

{
  "extends": ["eslint:recommended"],
  "env": {
    "browser": true,
    "jquery": true
  },
  "rules": {
    "strict": ["error", "function"],
    "no-console": "error"
  }
}
PHPStormの設定 公式サイトのヘルプを参考に。
ESLint - Help | WebStorm

ESLintを「Manual ESLint configuration」にする。

.eslintrc.jsonをPHPStormで編集した後は右クリックで「Apply ESLint Code Style Rules」で読み込む。
単独のjsファイルは問題ないのだけれど、PHPファイル内のscriptタグにはESLintでチェックされない?


JavaScriptのコーディング規約 調べる中で「JavaScript Standard Style」というコーディング規約が広まっているのを知…

Postfixのメール送信が遅れる。IPv4の接続を優先する設定

メールログを見ていて下記エラーが目に留まった時の覚書。

環境: CentOS 7.6, Postfix 2.10.1

postfix/smtp[13310]: connect to gmail-smtp-in.l.google.com[2404:6800:4008:c01::1a]:25: Connection timed out
postfix/smtp[13310]: Trusted TLS connection established to gmail-smtp-in.l.google.com[108.177.125.26]:25: TLSv1.2 with cipher ECDHE-RSA-AES128-GCM-SHA256 (128/128 bits)
最初のログはIPv6で接続しようとしていてタイムアウトしている。
タイムアウトを待つ分だけメール送信に時間が掛かっていた。

IPv6を無効にするのも何となく不安なので、IPv4から先に試すように設定。
「smtp_address_preference」を使う。Postfix 2.8から使える設定。
Postfix Configuration Parameters
Postfixのバージョンを確認
# yum info postfix

postconfを使う方法もある
# postconf -d | grep version

設定ファイルを編集
# less /etc/postfix/main.cf
# Enable IPv4, and IPv6 if supported
inet_protocols = all
# Try IPv4 first
smtp_address_preference = ipv4
testしてサービス再起動
# postfix check
# systemctl restart postfix

ログを監視しながら動作確認
# tail -f /var/log/maillog
# mail hoge@gmail.com


【関連記事】
CentOS7で/var/log/maillogを作るrsyslogのインストールと設定CentOS7 + Nginx + PHP7 + MariaDB + Node.jsの環境を構築する手順まとめ

CentOS7で/var/log/maillogを作るrsyslogのインストールと設定

KagoyaのVPSの最小構成で作成したCentOS7がmaillogを作ってくれず、しばらく放置していたけど、rsyslogをインストール/設定したときの覚書。

環境: CentOS 7.6, rsyslog 8.24.0

rsyslogのインストール
# yum install rsyslog

設定の確認
# less /etc/rsyslog.conf
# less /etc/rsyslog.d/listen.conf

初期設定でjournalを監視してくれている。

サービス起動と自動起動設定。
# systemctl start rsyslog
# systemctl enable rsyslog

前に設定したjournaldの設定変更。
# less /etc/systemd/journald.conf

#Storage=persistent
サービス再起動
# systemctl restart systemd-journald

rsyslogの稼働状況を確認
# systemctl status rsyslog
rsyslogd[12874]: imjournal: begin to drop messages due to rate-limiting
rsyslogd[12874]: imjournal: 198872 messages lost due to rate-limiting
メッセージが捨てられているようなログ。
Ratelimit.Interval(デフォルトで600秒)の間にRatelimit.Burst(デフォルトで20000)のメッセージ数を超えていると出力されるらしい(参考:imjournal: Systemd Journal Input Module | rsyslog 80488ad docs)。
この設定を変更する。
# less /etc/rsyslog.conf
# @see https://www.rsyslog.com/doc/v8-stable/configuration/modules/imjournal.html
$imjournalRatelimitInterval 60
$imjournalRatelimitBurst 200000 「$ModLoad imjournal」のあとに記述する。
$imjournalRat…

WordPressのwp_mailをSMTP経由にする

特定の機能から送ったメールだけSMTP経由で送信したかったので、調べた時の覚書。

環境: WordPress 5.2.0, PHP 7.2.18

全部のメールをSMTP経由にする場合はプラグインを使った方がいいかもしれない。
WP Mail SMTP by WPForms | WordPress プラグイン | WordPress.org

公式ページに「phpmailer_init」にフックするやり方がある。Gistも参考に。
wp_mail() | Function | WordPress Developer ResourcesConfigure WordPress wp_mail function to send through SMTP server http://b.utler.co/Y3 | Gist

ソースコードはwp-includes/pluggable.phpの484行目あたり。

PHPmailerの仕様はwp-includes/class-phpmailer.phpを見れば分かる。



【関連記事】
PostfixにSPFとDKIMと暗号化の設定まとめGmail(Google Apps)経由でメールを送信するPostfixのSMTP設定

IE9での表示確認。ホームページ制作で対応すべきIEのバージョンは?

今(2019年5月)だとどこまでのIEに対応してないといけないか調査したときの覚書。
期限の切れたブラウザは大幅にレイアウトが崩れなければOK。

Googleアナリティクスでシェアを確認 とあるサイトで確認した結果(Google Analyticsの実データ)。IEのシェアは全体の1割程度
さらにその中の割合
IE11: 83.9%(全体の8.4%)IE9: 15.2%(全体の1.5%)IE10: 0.5%(全体の0.05%)IE8: 0.1%(全体の0.01%)IE7: 0.1%(全体の0.01%)
意外にIE9が多い。
たぶんWindows VistaがIE9までだからだと思う。
今後はIE9までにすることにした(今まではIE8まで)。

各IEのサポート期限は公式サイトを参考に。
Windows 10 に搭載される 2 つの Webブラウザ、Microsoft EdgeとInternet Explorer 11 - Windows Blog for Japan

ちなみにTLSのバージョンも考慮する必要がある。
Template:ウェブブラウザにおけるTLS/SSLの対応状況の変化 - Wikipedia
ホームページ制作ではあと数年Bootstrap v3にお世話になりそう。


IE9のVMをダウンロード Microsoft公式サイトから仮想マシンをダウンロードする。
Free Virtual Machines from IE8 to MS Edge - Microsoft Edge Development
VMwareはimportに失敗したので、Hyper-Vをダウンロード。
起動すると(なぜか)IE8だったので、Windows7用IE9のインストーラーを公式サイトからダウンロードしてインストール。
(公式サイトにIEでアクセスすると固まるのでFirefoxをインストールした)
インストール完了後は「checkpoint」しておく。

デスクトップの壁紙風の値
IE Version: 9.0.8080.16413RC
OS Version: Windows 7
Service Pack: Service Pack 1


IE9対応 IE9からはHTML5とCSS3に対応している。使えるHTML5タグは下記を参考に。
HTML5 Support in Internet E…

CentOSのMariaDBを10.1から10.3にアップグレード

MariaDBを10.1から10.3にアップグレードした時の覚書。

環境: CentOS7.6, MariaDB 10.1.40

10.1のサポートは2020年10月まで。
参考: Maintenance Policy - MariaDB.org

手順は公式サイトを参考に。
Upgrading from MariaDB 10.2 to MariaDB 10.3 - MariaDB Knowledge Base

1.バックアップ mariadbbackupというツールがあるのでインストールして使ってみる。
参考: Full Backup and Restore with Mariabackup - MariaDB Knowledge Base
# yum install MariaDB-backup

保存する場所を作ってバックアップ実行
# mkdir /home/backup
# mariabackup --backup --target-dir=/home/backup/20190515 --user=root --password=mypassword

容量(サイズ)の確認
# du -hx --max-depth=1 /home/backup/20190515/

念のためphpMyAdminからもエクスポートしておく。



2.アンインストール サービスを停止
# systemctl status mariadb
# systemctl stop mariadb

YUMでアンインストール
# yum remove MariaDB-server


3.インストール YUMのリポジトリを修正(参考: MariaDB - Setting up MariaDB Repositories - MariaDB
# less /etc/yum.repos.d/MariaDB.repo

# MariaDB 10.1 CentOS repository list - created 2016-04-07 10:30 UTC
# http://mariadb.org/mariadb/repositories/
#[mariadb]
#name = MariaDB
#baseurl = http://yum.mariadb.org/10.1/centos7-amd64
#gpgkey=https://…

システムからSMS(ショートメール)を送るAPI調査

予約システムを設計しているときに、登録したスマホ(電話番号)にSMSを送れないかと調査したときの覚書。

有名どころではTwilioというサービスがいいらしい。
SMS, Short Message Service | Text Messaging for Mobile & Web AppsTwilio を介した SMS サービスと音声サービス | PHP の App Engine スタンダード環境 | Google Cloud

日本ではKDDIが代理店になっている。
Twilio for KDDI Web Communications  | コミュニケーションAPI


Asterisk(PBX)で試した人の記事
Asteriskで普通の外線電話を作る - Qiita


AWSのAmazon SNSを使う方法もある。
受信者が携帯電話番号の場合のユーザー通知に Amazon SNS を使用する (SMS 送信) - Amazon Simple Notification Service

その他のアイデア
AndroidのSmsMnager, MessageClientを使った自作アプリと連携する仕組みを作るLine APIを使う方が日本ではいいかもしれない



【関連記事】
Google Voice, Asterisk, Androidで面白いことが出来そうな予感

Google Compute Engineの無料枠を使ってサーバーの死活監視

オフィス出るときに開発サーバーをShutdownするつもりが本番サーバーをShutdownしてしまったので、常にサーバーを監視してアラートを送る仕組みを作ろうとしているときの覚書。


やりたいこと
別サーバーから本番サーバーを監視無料死活監視(Ping)Pingが通らなかったらメール通知bash + cronがいい。複雑なことしない。プラスアルファでウェブサイトの表示確認ができたら嬉しい。
本番サーバーは別でリソースモニターがあるのでそちらで十分

調べてみるとサーバー監視ソフトのZABBIXが良さそう
Zabbixオフィシャル日本語サイト :: エンタープライズクラスの分散監視オープンソースソリューション 試してみたくはなるけど、ここまでの機能は必要ない。


Pingを並列処理できるfpingを使えば良さそう。
fping Homepage でも結局使わなかった。


参考にしたシェルスクリプト
UNIX / Linux Shell Script For Monitoring System network with ping command | nixCraftA simple bash script to watch packets loss using ping on Unix/Linux | GistWrite the bash shell script to test the ping against multiple server and send the report to email for unresponsive servers - Stack Overflow
監視サーバーはGoogle Cloud PlatformのVMインスタンスの無料枠を使うことにした。
インストールと設定は長くなったので別記事にまとめた。
Google Cloud PlatformのGCEでCentOS7のVMインスタンスをインストールしてメール送信設定
作成したシェルスクリプトはGitLabに保存。
Gistにあったのからほとんど変えてない。
GCEのVMインスタンスでgit cloneする。

5分毎にcrondで定期実行する。
rootになってから。
$ sudo su -
# cd /etc/cron.d/
# vi plwatch
MAILTO=""
# Packet…

Google Cloud PlatformのGCEでCentOS7のVMインスタンスをインストールしてメール送信設定

本番サーバーに対してPing死活監視するサーバーを準備しているときの覚書。

GCE(Google Compute Engine)の無料枠を使う。

参考サイト
よくある質問 | Google Cloud Platform の無料枠 | Google Cloudこれから始めるGCP(GCE) 安全に無料枠を使い倒せ - Qiita

無料枠にするための注意点
マシンタイプを「f1-micro」を選ぶリージョンを「us-west1」を選ぶ(us-east1, us-central1も無料枠の対象)条件が変わる可能性が大いにあるので、公式ドキュメントをよく読む
このVMには頻繁にログインしないので「ブラウザからのSSH」で十分。
どうしてもTeratermでログインしたい場合は結構面倒くさい作業が必要。
高度な方法を使用してインスタンスに接続する | Compute Engine ドキュメント | Google Cloud

稼働中のサービス確認
$ systemctl list-units --type=service

登録されている全サービス確認
$ systemctl list-unit-files --type=service


サブドメインをCloud DNSで管理する設定 Cloud DNSを使うと良さそうな気がしたのでやってみた。
Cloud DNSでゾーンを作成した後にName Serverが表示されるので、レジストラのDNSを変更する。
value-domainの場合の例。
ns gcp ns-cloud-a1.googledomains.com.
ns gcp ns-cloud-a2.googledomains.com.
ns gcp ns-cloud-a3.googledomains.com.
ns gcp ns-cloud-a4.googledomains.com.

エフェメラル(ephemeral)な外部IPをCloud DNSで動的に変更したい
エフェメラルだとVMが再起動したときに変わってしまう(参考:IP アドレス | Compute Engine ドキュメント | Google Cloud)。

Cloud DNSを使うと簡単に設定できるかと思ったら、APIを叩く必要があるみたい。
How to update Google Cloud DNS with ep…

BenQ SW271 + X-Rite i1Display Proでキャリブレーション

イメージ
去年(2018年)の9月にキャリブレータを買ったのだけど、よく分からず使っていたので、カラーマネジメントについて勉強しながらキャリブレーションしているときの覚書。

ハード環境: BenQ SW271, NVIDIA Quadro P1000
ソフト環境: Windows 10, i1Profiler v1.8.3, X-Rite Device Services v3.1.7.6, Palette Master Element v1.3.3



参考サイト
SW2700PT、SW271をハードウェアキャリブレーションしてPhotoshop、Lightroomで活用する方法 - studio9


買ったのこちら。
i1Display Proキャリブレーション; X-Rite

Amazonで32,808円だった。

i1Displayはプリンタのプロファイルには対応していない。
i1のシリーズ比較
機能比較表 | x-rite i1(エックスライト アイワン)シリーズ


キャリブレーション BenQのPalette Master Elementとi1Profilerで試行錯誤しているときのログ。

選択する値とかよく分からずに参考サイトを見ながらPalette Master Elementを使うと明らかにディスプレイの色が違う(暗い感じ)次にi1Profilerだとコントラストが強すぎる(Palette Master Elementよりは見た目まし)SW271が再起動する動きをしてから本体のカラー調整が出来なくなるSW271のディスプレイドライバを公式サイトからダウンロードしてインストールPalette Master Elementで再度キャリブレーションしたら本体のカラー調整機能復活i1Profilerで各設定の意味を調べながら何度もキャリブレーションし直す何度やっても白く抜ける感じになるキャリブレータのレンズに指紋っぽい汚れがあるので、一眼レフレンズ用のレンズペンで綺麗にするPalette Master Elementで再度キャリブレーション。やっぱりキャリブレーション直後は暗くなる。SW271の電源を切ってから入れ直す。→ 綺麗!!SW271本体のカラー調整は出来なくなった。
キャリブレーション後は電源On/Offが必要みたい(?)。
このSW271がはずれで、不安定なだけな気がして…

NVIDIA Quadro P1000を購入。SW271+10bitカラー設定

イメージ
最近ディスプレイ周りの調子が悪いので、ビデオカード(グラフィックボード)を新調したときの覚書。

旧ビデオカード: N660GTX Twin Frozr III OC
PC環境: Windows 10, 自作PC
ディスプレイ環境: (メイン)BenQ SW271 + (サブ1)EIZO FlexScan S1931 + (サブ2)EIZO FlexScan M190


ビデオカードの限界を感じた動作
使っていると突然3秒ぐらいSW271だけがブラックアウトする(そのあと普通に使える)。YouTube動画を見ていると(たまに)固まってブルースクリーンになる。DPC_WATCHDOG_VIOLATIONになって再起動される。ウィンドウをディスプレイ間で移動させると時間がかかる。

1年前に4K+10bitカラー対応のSW271を買ったし、奮発してNVIDIA Quadro P1000を購入した。
NVIDIA Quadro P1000 | 株式会社 エルザ ジャパン 価格は45,679円

約6年前にN660GTXを買ったときは21,891円。
デザインしなければ同じ金額のGeForceで十分だと思う。

今回はビデオカードのみのアップグレード。
N660GTXが2スロット+補助電源が必要だったので、Quadro P1000が小さくて付け替える時にちょっと不安になる。

ドライバは公式ページからダウンロード。

NVIDIAドライバダウンロード

換装直後はWindowsが自動でドライバをインストールするのでちょっと待つ。
古いGeForceドライバをアンインストール。
今の最新ドライバをインストール。これ。


換装後に行ったPC設定 Windows 10のDHR/WCGをonにしたら10bit対応になった。



Photoshopの設定変更

「OpenCLを使用」と「30bitディスプレイ」にチェック。

Illustratorは特に設定不要。



感想YouTubeの動画を見てても落ちなくなった。ディスプレイ間のウィンドウ移動も速くなった気がする(そんなに変わってない)。突然ブラックアウトして復活する現象は起こる。ハードの問題な気がしてきた。


ちゃんとキャリブレーションをして使いたい。


【関連記事】

4Kディスプレイ「SW271」を購入。HDMIとDisplay Port

ホームページ開発に画像形式WebPを導入

イメージ
Microsoft EdgeがWebP形式に対応するということで、ホームページ開発でもそろそろ本格的にWebPを導入しようと調査しているときの覚書。

今のブラウザ対応情報はこちら。

IEとSafari以外は対応済み。

画像の最適化に関する参考になる記事。
画像の最適化を自動化する| Web Fundamentals | Google Developers


WebPの公式サイト
A new image format for the Web | WebP | Google Developers


JpegをWebPに変換する方法 Photoshopのプラグインがある。
fnordware/AdobeWebM: WebM plug-ins for Adobe programs | GitHub

だけど更新されていないので、Windows10の場合はGIMPがいいと思う(GIMP 2.10.0から対応)。参考:GIMP 2.10.8 Released - GIMP

Linuxの場合は将来的な自動化も含めて、ImageMagickで変換するのがいいと思う。PHPからも使えるし。
ImageMagickをインストールするときに意識してなかったけどWebP対応してた。
# convert --version
Version: ImageMagick 6.9.10-40 Q16 x86_64 2019-04-15 https://imagemagick.org
Copyright: c 1999-2019 ImageMagick Studio LLC
License: https://imagemagick.org/script/license.php
Features: Cipher DPC Modules OpenMP
Delegates (built-in): bzlib cairo djvu fftw fontconfig freetype gslib gvc jbig jng jp2 jpeg lcms ltdl lzma openexr pangocairo png ps raw rsvg tiff webp wmf x xml zlib
# convert -list format | grep web
WEBP* WEBP      rw-   WebP Image Form…

OWASP ZAPでWordPressサイトをセキュリティ診断してみる

OWASP ZAPというセキュリティ診断ツールがあることを知ったので、試しに使ってみたときの覚書。

クライアント環境: Windows 10 64bit, OWASP ZAP 2.7.0
サーバー環境: CentOS 7.6, nginx 1.14.2, WordPress 5.1.1


OWASP ZAPとは OWASP ZAP(The OWASP Zed Attack Proxy)はOWASP財団が無料で公開しているセキュリティ診断ツール。
OWASP(Open Web Application Security Project)はNPOの世界的オープンソース・ソフトウェアコミュニティ。

参考サイト

zaproxy/zaproxy: The OWASP ZAP core project | GitHubJapan - OWASP

Windowsにインストール 下記からダウンロードしてインストール実行するだけ。
「Cross Platform Package」は要Java実行環境。


Downloads · zaproxy/zaproxy Wiki

フォントが小さいのが気になる場合は、Java 9以上をインストールするかexeファイルのプロパティを設定すれば直るらしい。
ZAP doesn't play nice with high-DPI displays · Issue #3689 · zaproxy/zaproxy


セキュリティ診断実行 Quick Startタブに対象のサイトのURLを入力して実行するだけ。
Report → Generate HTML Report
で読みやすいHTML形式で出力してくれる。

自社ホームページで実行したら
Mediumが2件
Lowが4件

結構自信があったので、Mediumが2件もあったのが意外。
解決策も記載されているので、とても勉強になる。

自社運営のWordPressサイトで実行したら2時間弱かかった(他の作業をしながら)。

本番環境で実行するときは大量のアクセスログとそれなりの負荷がかかるので、時間帯は考えた方が良さそう。

興味本位で他のサイトで実行するとブラックリストに登録される可能性があるので注意。



【関連記事】

NginxのSSL/TLS設定を見直す(2019年版)CentOS7 + Nginx + PHP7 +…

送信ドメイン認証のDMARCを設定

SPFとDKIMは設定してあるけど、DMARC(Domain-based Message Authentication, Reporting & Conformance)は知らなかったので、調査と設定したときの覚書。

環境: G Suite(Gmail)

DMARCとは。 下記サイトを参考に
DMARC を使用して不審なメールを管理する - G Suite 管理者 ヘルプ送信ドメイン認証DMARCとは | ウェアポータル株式会社

DMARCを設定すると、送信元が所有ドメインの場合、メールを送った先で認証が失敗したに通知を受け取ることができる。


DMARCを設定する G Suite管理者ヘルプが分かりやすい。
DMARC レコードの追加 - G Suite 管理者 ヘルプ

まずは何もせずにうちの会社「dksg.co.jp」ドメインになりすましているメールのレポートを受け取る設定。value-domainでのDNS設定例
txt @ v=DMARC1; p=none; rua=mailto:info@dksg.co.jp あとはGmailがこのレコードを見てレポートを送ってくれる。


自前でメール受信サーバーを建てている場合は、postfix + opendmarcで処理できるみたい。



【関連記事】
PostfixにSPFとDKIMと暗号化の設定まとめCentOS7 + Nginx + PHP7 + MariaDB + Node.jsの環境を構築する手順まとめ[Google Apps]DNSのSPFとDKIMを設定してSecurityを高める(送信Domain認証)