投稿

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

国民健康保険と協会けんぽの違い

健康診断予約システム開発に向けて整理整頓しているときの覚書。

「国民健康保険」と「協会けんぽ(社会保険)」は公的医療保険の一つ。
「協会けんぽ」は社会保険を運用する全国健康保険協会の略称。
似た名前ばかりで混乱するから
会社員で社会保険の人は「協会けんぽ」(社保)それ以外は「国民健康保険」(国保) と言い分けている事が多い。


医療保険は社会保険制度(医療保険、年金保険、労働保険)の一部。
日本の全国民は公的医療保険に加入しなければならない(国民皆保険)。
医療保険 - Wikipedia
【比較表】
名称社会保険(健康保険)国民健康保険略称社保国保医療保険種別被用者保険
(被用者=雇われた人)地域保険運営全国健康保険協会
(略称:協会けんぽ)市区町村対象者被用者(社長含む)社会保険に含まれない人(自営業、無職者など)保険料負担会社と折半全額自己負担保険料の計算方法月収年収(世帯所得)扶養家族扶養家族全て含む。
(家族何人いても保険料は一人分)扶養家族という概念がない。
世帯ごと保険料を収める。手続き会社が全部やってくれる入会、脱退共に住まいの市町村役場で行う。
社保に切り替えた場合も脱退の届出を行う必要がある。

普通に生きていれば手続きは会社がやってくれるから「どっちですか?」と聞かれても分からない。



【関連記事】
株式会社設立④:社会保険

PWA(Progressive Web Apps)の2020年動向

新サービスの技術選定をしているときの覚書。
iOSのPWAプッシュ通知はまだ?と思いながら今後のPWAはどんな感じか調べてみた。


Google公式ブログ
Google Developers Japan: Google I/O 2019: Chrome とウェブの新機能 (この記事のまとめ)
Google Chromeは高速かつ軽量にすることに注力しているデスクトップPWAがChromeOSに対応。今後Windows, Mac, Linuxへ展開予定。

Google I/O 2019のまとめ記事
Google I/O 2019 のWeb系セッションをすべて見たので内容をまとめる - Qiitaやっていこう。PWA - Qiita

【個人的に気になったPWAの新機能】

Badging API
アプリアイコンに新着通知のバッジが表示可能になる。
プッシュ通知は嫌がられる傾向になるので、ユーザーへの通知方法として良さそう。
2020年には使えるようになりそう。

Badging for app icons | web.dev


「ホーム画面に追加」を制御可能に
まだChromeだけ。
iPhoneユーザーは多いだけにこれとBadging APIを組み合わせて、スマホのロックを解除すれば新着通知のあるなしを確認できる状態になってほしい。

In Chrome 76 you can hide the Add to Home screen mini-infobar | Web

もう少しiOS(Safari)は積極的にPWA対応してほしい。


【関連記事】
犬猫家族アプリのAMP+PWA化計画PWA(Progressive Web Apps)の概要

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

イメージ
前回に引き続きいい感じのサンプルが落ちてないかと探している時の覚書。

環境: Windows 10 64bit, Android Studio 3.5.2, Flutter 1.9.1+hotfix.6


下記まとめサイトがサンプルを探すのに便利。
Flutter Awesome

GitHubクライアントアプリ。An open-source GitHub Flutter client appGitHub - conghaonet/GitHao: An open-source GitHub Flutter client app


ソースコードが公開されているので、git cloneしてflutter packages getすると開発環境でデバッグができる。
コメントが中国語。
構成全体が一般的なので参考になりそう。


SNSアプリ(ビルド → 画面が進まない)GiHub | saket-shetty/Post-it: social media app which is made entirely with flutter and firebase GoogleまたはTwitterのアカウントでログインして、SNSアプリとして投稿したりできるらしい。
Dart SDKをインストールして、flutter runしたら起動したけど、Googleログイン認証後に次の画面にいかない。
Firebaseと連携するということで期待していたけど残念。


家具アプリGitHub | JideGuru/FlutterFurnitureAppUI: Flutter representation of a furniture app UI ビルドはできた。
けど下タブをタップしても動かず。


Code::StatsクライアントアプリGitHub | Schwusch/codestats_flutter: Flutter app for browsing Code::Stats profilesCode::Stats Viewer app with flutter 下タブとグラフのいいサンプルかなと思ってビルドしてみた。
flutter pub getすると下記エラー
Because codestats_flutter depends on charts_flutter from path which…

Adobe Illustratorでウェブデザインをする際の設定

ウェブデザインをするときに座標の小数点をなしに設定できないかと調べたときの覚書。

環境: Adobe Illustrator 2020

下記サイトを参考にした
IllustratorでWeb向け、ピクセルベースの作業を行う上での設定(完全版) - DTP Transit

新規作成時
幅:1280px, 高さ:2000px裁ち落とし: 0pxカラーモード: RGBカラーラスタライズ: スクリーン(72ppi)プレビューモード: ピクセル

作成直後
アピアランス: 「新規アートに基本アピアランスを適用」のチェックをはずす表示 → 定規 → 定規を表示(アートボード定規)

作業中
座標が小数点にならないように線は内側
その他、気付いたら追記予定。


【関連記事】
PostScriptとPDF/Xとプリンタ

Google Tag Manager(Google Analytics)+WordPressでログイン履歴

WordPressにログインした履歴を保存する機能を実装しているときの覚書。

環境: WordPress 5.2.4



1.ログイン時にデータベースに保存する 今回はログインしているかどうかが分かれば十分なので、ログイン時にadd_user_metaすてデータベースにも保存しておく。
function func_wp_login($user_login, $user) {
if (!empty($user->ID)) {
// Login History
$info = [current_time('mysql')];
$info[] = $_SERVER['REMOTE_ADDR'];
$info[] = $_SERVER['HTTP_USER_AGENT'];
add_user_meta($user->ID, 'login_history', implode(',', $info));
}
}
add_action('wp_login', 'func_wp_login', 10, 2);
参考: Plugin API/Action Reference/wp login | WordPress Codex

頻繁にログインするサイトの場合は履歴を保持する上限を決めた方がいいかもしれない。



2.Google AnalyticsのUser ID機能を使う ここまで導入しなかったけど、下記情報が参考になりそう。
Google Analytics User ID in Google Tag Manager: The Guide


【関連記事】
Google AnalyticsにClient IDをカスタムディメンションとして設定GoogleアナリティクスからGoogleタグマネージャに切り替え

固定資産(一括償却資産、少額減価償却資産)の仕訳方法

今年は24万円のカメラを購入したので、決算のときにどう処理すべきか調査したときの覚書。

環境: 株式会社、一人社長、4年目、MoneyForwardクラウド会計

一括償却資産と少額減価償却資産を理解する。
参考サイト
一括償却とは?一括償却はどんなときに使うの?元国税調査官が解説少額減価償却資産と一括償却資産 | 横浜,逗子,小田原/朝日税理士法人
一括償却資産 10万円~20万円の資産に適用できる。
3年間で均等割した金額を経費に計上する。
償却資産税固定資産税)を納付する必要がない


少額減価償却資産 20万円~30万円の資産に適用できる。
青色申告した中小企業限定。平成32年(2020年)3月31日までの購入が対象。
償却資産税固定資産税)を納付する必要がある
決算時に追加書類を添付する必要がある。別表16(7)。
→ 全力法人税では出力されなかったので手書きで記入


少額減価償却資産のMoneyForwardへの仕訳登録方法は公式FAQを参照
【支出】減価償却が必要な固定資産を購入した場合の仕訳 | マネーフォワード クラウド確定申告


【関連記事】
一人社長の法人決算マニュアル/第2期(自分用)「MFクラウド会計」と「Freee」を比較してMFクラウド会計にした

iPadのSnapBridgeが毎回許可を求めてくる

新しく買ったiPad Air3の設定をしているときの覚書。

環境: Nikon Z6, iPad Air(第3世代) iOS 13.2.3, SnapBridge 2.6.1

撮影するときは、Nikon Z6 → SnapBridgeに自動転送して、バックアップ代わりにしている。
カメラを登録して試しに自動転送したら毎回Bluetoothの許可を求めてくるようになった。

これはiOS13から「ユーザーの同意なしに位置情報にアクセスすることを防止」しているかららしい。

設定 → SnapBridge → 位置情報
で「常に許可」にすればOK。


【関連記事】
iPad Air3 64GB Wi-Fi + Cellularを買ったミラーレス一眼カメラ「Nikon Z6」を購入。開封後の感想。iPad+VGAアダプタ+PowerPoint+プレゼンリモコンの環境構築


iPad Air3 64GB Wi-Fi + Cellularを買った

iPad Pro 9.7インチを使っていたけれど、iPhone SEとのインターネット共有していると(途中で切れて)客先でもたつくことがあったので新しいiPadを買った。

デザリングしても遅いのでイラっとすることが多々あった。

迷った結果買ったのは「iPad Air 3 64GB Wi-Fi + Cellular(スペースグレイ)」。

Cellular(SIM)は必須。
iPad Airに決めた理由など
iPad Proはホームボタンないのが使いにくいらしい。客先でウェブサイトのデモやデザイン案を見せるぐらいなので、そこまでの性能はいらない。撮影した写真(Adobe RGB)を見せたりするので広色域ディスプレイは欲しい。まだLightingケーブルの環境を変えるのが怖い

感想
iPad Pro 9.7よりディスプレイが黄色っぽい(Adobe RGBの写真を表示)
→ True Toneをオフにすると良い感じに縁が黒い(スペースグレイだから)方が中のコンテンツが際立ってよいCPUがA9XからA12 Bionicになったけど体感速度は変わらないブラウザの横幅1024px → 1112px


蓋なしカバーとスタンドの組合せがお気に入り。
Amazon | iPad Air 2019 / iPad Pro 10.5 ケース iPad Air3 10.5インチ ハード ハイブリッド TPU + ポリカーボネート 二重構造 耐衝撃 衝撃吸収 放熱仕様 クリア 透明 ストラップホール付き 軽量 薄型 (ブラック)Amazon | ノーブランド品 iPad タブレット PC スマートフォン 対応 折りたたみ式スタンド 角度調節可能 コンパクト収納 スタンド (折り畳み式スタンド, ブラック)

7万円のアップグレードの価値はあったかな?
今度から持ち運ぶデバイスはCellularモデルにする。


【関連記事】
iPad Pro 32GBとiPhone SE 64GBを購入

同一労働同一賃金を調査

病院へのメルマガ用に「同一労働同一賃金」調べたときの覚書。

参考にしたサイト
改正後のパートタイム・有期雇用労働法で求められる企業の対応について|パート労働ポータルサイト
ここの動画(50分)を見れば何となく理解はできる。


簡単なまとめ
施工は2020年4月1日(中小企業は1年後)
→ 病院は職員100人以下が中小企業正社員とそれ以外の不合理な待遇差をなくさなくてはならない
→ ガイドラインを作成し待遇差を説明できなければならない同じ企業内での比較。他社の待遇は関係ない企業内の全ての労働者。派遣、外国人などの抜け道はない福利厚生・教育訓練は正社員と同一としなければならない

賞与や各種手当も「正社員だから賞与」「将来を期待して」(主観的理由)ではダメ。
待遇差があるのなら論理的に説明できなければならない


よくある誤解
パート・アルバイトの時給を一律で上げればいいということではない。定年後の再雇用で給与を変更するのは問題ない。合理的な理由は必要。争い(裁判)になった場合、その待遇差が「不合理かどうか」が争点。


各種手当の裁判例(運送会社の事例)
通勤手当 … 正社員と契約社員で差をつけるのは不合理皆勤手当 … 正社員と契約社員で差をつけるのは不合理住宅手当 … 正社員は転居を伴う配慮が予定されているので合理給食手当 … 正社員と契約社員で差をつけるのは不合理無事故手当 … 正社員と契約社員で差をつけるのは不合理作業手当 … 正社員と契約社員で差をつけるのは不合理 ※ 同じ名前の手当でも同じ判決となるとは限らない


説明義務の強化 比較対象を明確にする。 同一の事業主に雇用される同じ業務の行っている者
賃金表などを用いて論理的に説明 成果・能力・経験で差をつけるのはOK
説明を求めた労働者が分かる」ことが必要。 基本は「資料を活用しながら口頭で説明」しなければならない。


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で面白いことが出来そうな予感