2020年
1月2月3月4月5月6月7月8月9月10月11月12月
2021年
1月2月3月4月5月

福間創の「this is our music」が届く。
平沢進が加わっているとのことで購入した。
早速聴いてみたが、ほぼ全曲インストのようで、これらの音のいずれかを平沢進が奏でているのだろう。おそらく。

じっくり聞くのは後にして。


Vue.jsにて、Style要素がどのような順番(タイミング)で読み込まれるのか(書き出されるのか)が分かっていない。

動かしてみると、上のようになるのだが、ここで問題なのは、Bootstrapが何度も読み込まれていることである。非常に無駄な動きをしている。

そして、一番最後にBootstrapを再度読み込むものだから、それまでに上書きしたつもりでいたスタイルが、本来のBootstrapの記述に上書きされ、無効とされてしまう(ややこしい)。

main.tsなどで読み込ませているBootstrap等のライブラリやStyleの記述は、どのような順番で書き出されるのか、また、Componentの中で読み込ませた場合には、どのタイミングで書き出されるのかを調べなければならない(でないと、レイアウトが作れない!)。

開発とは関係のない話。

MacBook(2015 Early)の下取りを検討

新年度ということもあり、身の回りのモノを整理している。
その1つとして、昨年春に買ったMacBookPro(2018)がメインマシンになったために、全く使わなくなったMacbook(2015 Early)を下取りに出そうと思う。

Appleの下取り価格だと、1万8千円ほど。
しかし、ソフマップだと、その倍、最高4万ほどつけてくれるらしい。

しかし、そこまで見た目は良くない(本体に傷が入っていたりする)し、購入時のケース等もないので、減額されるだろう。でも、Appleよりかは、高く下取りしてくれるのではないか。

そこで、Macbook(2015)を久しぶりに起動し、下取りに出せるように準備する。

・データを外部HDDに移動
・iCloudからサインアウト
・iTunesの認証の解除
・アクティベーションしていたソフトウェアの解除

これらを行った後に、リカバリーモードで再起動し、ディスクを初期化&OSを再インストールする。

このあたりで、あるトラブルに気付く。

十字キーの「上矢印」ボタンが反応しない。

何度押しても反応しない。そのほかのキーは問題なさそう。
調べてみると、Appleは修理プログラムを出している。

MacBook、MacBook Air、MacBook Pro キーボード修理プログラム

おそらく、MacBook(2015)は、このプログラムの対象になっている(そして、今メインで使っているMacBookPro(2018)も・・・)。

面倒だが、十字キーを直さないと、下取りで大きな減額を食らうだろう。
修理プログラムが適用されるまで、そして、返ってくるまで、どの程度時間がかかるのだろうか—。

急に力尽きるメガネ

そんなことで、テンションが落ちているときに、机の上に置いていたメガネを、誤って床に落とす。

その瞬間、フレームが破損!

ちなみに、レンズは先月交換したばかりである(約2万)
ここで、フレームも修理となると痛い。

フレームは2015年に買ったものなので、そこそこ年月は経っている。
経年劣化かしら。

出費は重なる。

「アオイホノオ」(2014)

先日、「アオイホノオ」を観た。

原作(漫画)は、昔、東京にいた頃(つまり、5年以上前に)に途中まで読んでいたが、こちらもひじょうに良いドラマ(原作に忠実+わかりにくい点を補完)で「あたり」だった。

そこで今日、近くのレンタルCD屋が半額日だったので、OPテーマ曲「あーだこーだそーだ!」ウルフルズ)の入ったアルバムを借りる。

ついでに、真逆の棚にあったZARDのベストを、4枚組というお得感から借りてしまう。

「王立宇宙軍 オネアミスの翼」

こちらもついでにレンタル。
かなり昔に、借りて観たことがあるが、冒頭だけ見て止めてしまった気がする。

先の「アオイホノオ」の準主役(のモデル)だった庵野秀明の作った映画とのことで、見ておこうかな、と。

Vue.jsのStyle要素は研究中

一日中雨だったけれど、桜の花は、落ちていなかった。

ロリポップサーバー/WordPressのタイムゾーン(PHP)

「n月になったら表示」みたいなPHPプログラムを、ロリポップサーバーで動かそうとしたらうまく働かなかった。

例えば、次のようなプログラム。

foreach($month = 1; $month <= 12; $month++){
  echo "${month}月";
  if ($month >= date("n")) break;
}

このプログラムは、4月1日になった瞬間に、1月から4月まで出力する。

しかし、実際には、3月までしか出力しなかった。
ちなみに、現在(4月1日深夜)は4月まで出力されています。時差がある。
プログラムのどこかにミスがあるのか。あるのだろう。

そこで思ったのが、PHPのタイムゾーン。

ロリポップのサーバー側のタイムゾーンがおかしいんじゃないのか?!

phpinfo()でタイムゾーンを確認してみます。

ちゃんと、「Asia/Tokyo」になってますね。
正しくセットされています。
疑って、ごめんなさい。

むしろ、ローカルのXAMPPの方が、ベルリンになってますね。
あとから直さないと・・・。

じゃあ、WordPressでタイムゾーンが上書きされているのか?!

サーバーのタイムゾーンが正しいなら、WordPress上でタイムゾーンがあらぬところに上書きされているのかも。

試しに、WordPressのファイルの1つでdateを出力しました。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:41:00

うーん。今、ターミナルでdateを打つと
「2020年 4月 2日 木曜日 00時43分59秒 JST」
と返ってくるので、タイムゾーンがずれてますね、WordPress上で。

ちょっとググってみます。

【Z.com WP】WordPressのタイムゾーン設定

WordPressの設定画面を確認。

やっぱり「東京」になってますね。
念のため「変更を保存」を押して、再度確認。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:50:11

やっぱ、タイムゾーンがズレてますね。
念のため、「UTC+9」で試してみます。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:53:57

ダメですね。

echo date_default_timezone_get();

でタイムゾーンを確認します。

> UTC

ダメですね。

もうよく分からなくなったので、直指定。

date_default_timezone_set("Asia/Tokyo");

これで、さっきのタイムゾーンの確認と時刻の出力を行ってみます。

echo date_default_timezone_get();
> Asia/Tokyo

echo date("Y-n-j H:i:s");
> 2020-4-2 01:00:16

やっと期待した結果に。

なんでか分からないけれど、私のWPは設定画面で「東京」「UTC+9」を指定しても、「UTC」になってしまうようですね。どこかで上書きされている・・・?

というわけで、共通に読み込むヘッダファイルで

date_default_timezone_set("Asia/Tokyo");

を宣言することにしました。下のような具合です。

<?php
// タイムゾーンを強制的に Asia/Tokyo に指定する
date_default_timezone_set("Asia/Tokyo"); 

?><!doctype html>
<html lang="ja">
  <head>
(略・・・)

邪道な気がしますね。
忘れた頃に、どこかで不具合が起こりそう・・・。

雑記。

MacとWindowsを併用しているのですが、Windows側のiCloud Driveの動きが非常に悪い

具体的には、
・ファイルの同期に異常に時間がかかる。
 (ほかのMacやiOSデバイスでは、すぐに更新が反映される)

OneDriveだと、Mac側にも一瞬で反映されるのですが、iCloud Driveではそういかず。

しかし、タスクマネージャを開いてみると、結構なCPU利用率
そして、ネットワークの項は0%のまま。

一体、何をしているのやら。

以前予約していた、福間創のCDが届きました。

なかなか良い具合です。

Gutenberg

WordPressを用いた開発を本格的にはじめて、3ヶ月ぐらいになります。

今のバージョンのコンテンツエディタは「Gutenberg」というらしいですね。「カスタム投稿」の場合、この「Gutenberg」がデフォルトでは使えません。

調べてみたところ、function.phpを修正することで使用できるようになるらしいです。

WordPress:Gutenbergをカスタム投稿で有効化する方法/有効化されないときの確認ポイント

こちらのページを参考に、カスタム投稿でも「Gutenberg」が使えるようにしてみました。

具体的には、function.php内での該当する「register_post_type」に投げる配列(パラメーター)に、「'show_in_rest' => true」を追加。

下の写真がfunction.phpの編集前。

こちらが編集後。

結局は、「慣れ」なので、使いやすい方が良いのですが、今後カスタム投稿を新しく追加するときには、「'show_in_rest' => true」をいれていく方向にしようかなと考えています。

追記:クラシックエディタとの競合

カスタム投稿にて、すでに投稿していた記事をGutenbergで開くと、クラシックエディタとして開かれることがあります。

私の環境では、画像が入っているものでした。

また、うまくブロック化されず、修正が必要な記事もあります。

現状は、記事数もないので、手作業で追える範囲ですが、投稿数が多い場合にGutenbergを導入すると、やや面倒なことになるかもしれません。

カスタム投稿タイプにリビジョンを追加

最初は、非常に小さな機能だけを想定して開発を進めたので、リビジョン(バージョン管理)などは一切考えていませんでした。

しかし、色々と機能を見ているうちに、カスタム投稿にもリビジョンがあると便利かな、と思いググってみました。

そして、意外と簡単にリビジョンが実装できることが判明。

カスタム投稿タイプのリビジョン有効方法

function.phpにて、add_post_type_support関数を呼び出すだけらしいです。

実際に、設定し、記事を投稿・修正してみました。

上は、phpmyadminにて参照した、各カスタム投稿の行ですが、post_typeにrevisionが入っているのが分かります。

リビジョンがあることで、「データベースが肥大化する」との声もありますが、DBは大きくなってなんぼじゃないかなとも思います(どうなんでしょう・・・)。

正しくインデックスがつけられていれば、クエリも早く返ってくるので、問題ないのではと思いますが、運用していく中で、問題点が出てくるかもしれません。

webpackはどこに?

Vue.jsで開発をつづけていると、WebPackのConfigファイルがないことに気付いた。

そもそも、WebPack自体が、既存のプロジェクトのPackage.jsonにないし、どうも中途半端にプロジェクトを始めてしまった様子。

Vue.jsも「少し」分かってきたので、改めて、Vue-Cliというフォルダを作り、そこにプロジェクトを作成することにした。

ちなみに、せっかくなので、Vue-ui を使う。

% vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000
✨  Creating project in /Users/hiroshi/vue-cli/project.
🗃  Initializing git repository...
⚓  Running completion hooks...
📄  Generating README.md...
Opening /Users/hiroshi/vue-cli/project...

プロジェクト名は暫定的に「project」としてます。

日本語UIでかなり簡単に(やさしく)プロジェクトが生成できました。

プラグインの管理も、UI上でできるので、非常にわかりやすい。

ここで、VuexTypeScriptを導入。

で、webpackのconfigファイルは?

プロジェクト設定の右側、「Vueの設定を開く」を選択すると、

vue.config.jsというファイルが開かれました。
プロジェクトのルートにあるようです。

これが、WebPackのConfigファイルを同じ働きをするみたいですね。

参照

VueCLI3導入とできることまとめ

本日、参照した役立ちリンク集

Atom(エディタ)関連

【すぐわかる!】Atomエディタのインストールと日本語化、便利な使い方

エディタ「Atom」は、デフォルトで日本語が設定できず、日本語化は面倒そうなんでしてなかったんですが、この「Japanese-menu」パッケージをインストールするだけで、全部日本語化できました。★5つ。

Atomテキストエディタのプロジェクトフォルダってそもそも何?

同じく、「Atom」関連。
そもそも、プロジェクトフォルダとは何か、についてから説明をされています。

ESLint関連

Vue-cliでプロジェクトを生成する際に、ESLintをいれたがために、チェックエラーが多発しビルドに失敗する(インストールするんじゃなかったかな)。

Vueのeslint/stylelint設定

.eslintrc.js なるファイルが生成されるようですが、私の開発環境では、どこにも見当たらないですね。

eslint で構文チェック (Webpack)

こっちも、webpack.config.js.eslintrc.jsが生成されるとあります。が、見当たらない。

ESLintで特定のソースコードのチェックを無効にする

ソースコードのチェックを、その場その場で、回避するための設定方法。

ESlintでno-unused-varsのチェックをオフにする方法

なんやかんや繰り返していると、エラーの非表示ができました。
が、根本的な解決にはなっていないですね。

結局、TypeScriptの書式でもつまる

Vue.js to TypeScriptの書き方一覧

vue.js + typescript = vue.ts ことはじめ

データの受け渡しでも、つまる

データバインディング構文

プロパティ

なんだかんだ、Vuexでもつまる

TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた

ゲッター

v-for で配列に要素をマッピングする

WordPressの移行に際して参考になるサイト

テーブルの接頭辞を変えた場合

【WordPress】「このページにアクセスするための十分なアクセス権がありません。」の対処

DBの中で、テーブルの名前を参照している行があります。それらを置換しなければ、動きません。どこを変えるかはこちらが参考になります。★5つ。

ドメインが変わった場合

【WordPress】DBの置換には「Search Replace DB」を使おう

こちらのツールを使ったら、テーブル内のドメイン検索・置換が一瞬でできます。★5つ。

色々な「アカウント」を複数利用していると、自分自身がどこにいるのか分からなくなります。

{variable} is defined but never used

Vue.js でここのところ、こういったコンパイルエラーが出て、作業ができなくなることが多々あり。外部ファイルから interface を読み込んで使っているのですが、使われていないと判断されて、どうしたもんやらと頭を抱えていました。

色々とググったところ次の記事を発見。

Module Error (from ./node_modules/eslint-loader/index.js)ってエラーが出たのですが、これで解消されました。

npm i eslint-loader@2.1.2

Module Error (from ./node_modules/eslint-loader/index.js)

嘘でしょ?

自分のプロジェクトのpackage.jsonをみると、たしかに、”eslint-loader”がない!

略・・・
    "babel-eslint": "^10.0.3",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "node-sass": "^4.13.1",
略・・・

そこで、半信半疑でパッケージインストールのコマンドを打つ。

% npm i -D eslint-loader
+ eslint-loader@4.0.0
added 7 packages from 5 contributors, updated 2 packages and audited 37691 packages in 6.869s

49 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これで、一旦、サーバーを落として再起動。

Vue-cli のプロジェクトをビルドすると、エラーなく、コンパイル完了。

なんか、(全く)しっくりこないですが、問題をクリアできたようです。

Windows版iCloudが意図通りに動かない

iPhone・iPadのiCloud同期を活かすために、OneDriveからiCloudにデータを移行しました。

しかし、Windows版iCloudが思い通りに働いてくれません。

【問題1】
・実際のiCloud上と、ズレがある(Windows上のデータが古い)

【問題2】
・何かしら、ダウンロードできないファイルが存在する。
 →「デバイスに保持する」を選択しても、エラーが返ってきます。

【問題1】については、iCloudの同期を一度解除し、再度同期させることで回復しました。

しかし、その後も【問題2】が何度も起こります。
同期できないファイルは、とくに定まっているわけではありません。
「気付いたら発生している」という具合です。

Appleサポートに聞いても、「OSの再起動」「同期の解除・再同期」しか提案していただけなかったので、こちらのWindowsの問題なのでしょうか(いや、どんなWindowsでも動くように作っていないAppleが悪いのでは・・・)。

あらためて、「空き容量を増やす」で、データをローカルに残さないようにして、何度目かの「同期の解除・再同期」を行っているところです。

朝には、終わっていれば良いのですが、難しいかな。

WindowsでFAT32フォーマットができなくなっていた

そんなわけで、Mac <=> Windowsのデータのやりとりに、現状、iCloudが使えません。Mac <=> Windowsのデータのやりとりは、以前のように、OneDriveに戻すか、USBを介すことにしました。

そこで、USBをWindowsでフォーマットしようとしたところ「FAT32」が選択できないことを知ります。いつからなんでしょうか。

Windowsでもフリーソフトで「FAT32」のフォーマットかけれますが、システムが「FAT32」を切り捨てて、「NTFS」か「exFAT」しか対応していない。

一方で、Macは「FAT32」でフォーマットできるようです。

なんか変な感じですね。

WindowsでもMacでも編集できる「exFAT」が良いのですが、よく使う(少し古い)ハードウェア(プリンタ)は、USBメモリを挿しても認識してくれません。

「exFAT」に対応していないのか、USBメモリと相性が悪いのか、どちらでしょうか。「FAT32」でフォーマットしたら分かりますね。今度やってみます。

iCloud 続き

昨日話題にした iCloud ですが、やはり、Windowsでの同期がうまくいきません。

仕方がないので、さらにもう一度「同期を停止」し、今度は入念に再インストールしました。

1)User ディレクトリにある、iCloud フォルダを削除
2)iCloud 関連のアプリを全消去
3)Microsoft Store から再度インストール

これらを行った後、再び同期を開始しましたが、次はどうでしょうか?

現時点では「〜項目をダウンロード中」となっており、まだ行く末は見えません(しばらく、時間がかかりそうです)。

バックアップ恐怖症

普段が大変ルーズなのに、人が気にしないところに神経質なので、PCのデータのバックアップにも大変過敏になります。

一時は、RAID01も組んだりしていました(2TBのHDD×4台)。
個人でやりすぎた感はあります。

Macはシステムがもっている「TimeMachine」を使って解消しているのですが、Windowsには、これといって自分が落ち着く良いソフトウェアがありませんでした。

Windows10 デフォルトの「ファイル履歴」は、Cドライブ直下しか見てくれないようなので、Dドライブに音楽ファイルや動画ファイルを大量に保存している自分のPC向けではありません。

そこで、「8TB」の外付けHDDをつないで、「Time Machine」 と同様な機能をもつフリーソフトを用いてバックアップをとったりしたのですが、「8TB」のHDDが「いつ、物理的に壊れるか?」など考えたらキリがありません。

そこで、クラウド・サービスです。
OneDrive」や「Google Drive」「DropBox」、そして、「iCloud」などがうってつけなのですが、同期できる容量がネックです。

今のところ、これらの中ではiCloud2TBが最も安く大容量です。
しかし、私のPCは音楽をApple Lossless(無圧縮)で保存していたり、動画ファイルが大量にあったりと、バックアップしたいデータは、現状で約5TBあります。

クラウドでのバックアップも無理かなーと思っていたところ、見つけたサービスが、「Backblaze」です。AWSのGlacierを使っているみたいですね。

魅力は次の2点。

・容量無制限
安い!(年間ライセンス:3,500円ほど)
 これについては、ソースネクストが詳しいですね。

というわけで、現在バックアップ中ですが、約5TBものデータを転送するわけで、初回バックアップが終了するまで、現在「約53日」と表示されています。

私はネット回線に「SoftBank 光 マンション・スーパーハイスピード」を契約しているので、よっぽど好条件がそろえば、1Gbpsの力はもっているらしいです。

そして、1Gbit/s の力がフルに出せれば、0.13GB/sの転送ができるわけで、5TB(5,000GB)0.13GBで割って、約38,461秒(約641分約11時間!)あれば転送できるようです。

しかし、ソフトウェア上では、「88GBytes/日(2.54Mbps→こちらは変動的)」と表示されていますので、気長に待つしかないですね。

ここまで転送して、通信制限とかかからないのか不安ですが、ググってみたところ、通信速度に制限がかかったりすることはないようです。本当でしょうか。

以前は「3日で30GBオーバーしたら、過酷な速度制限」とかあったと思いますが、昔の話でしょうか。いまや、5Gの技術で、固定回線よりも無線の方が速いなどという時代ですからね。

「5G」の通信速度は提供開始時点で受信時最大が3.4Gbps、送信時が最大182Mbpsとなる。6月以降はミリ波を導入することもあり、受信時最大4.1Gbps、送信時最大480Mbpsとなる。

【動画】5Gは4Gと比較してどのくらい速いの? 5Gスピードテストを公開

こちらも、iCloudの同期と同様、しばらく様子見してみます。
順調にいけばいいのですが、明日がどうなるか分からない昨今、期待通りに進むかどうか。

iCloud 続きの続き

昨日の処理を行ったところ、無事、最新のデータが同期されていました。

ディスク容量にも余裕があるので、「全てのデータを保持」として、更新があれば、常にローカルにダウンロードさせる設定にしています。

今のところ、Mac側での変更がWindows側に、その逆の同様に同期されています。

これで、しばらく様子をみてみましょう!

バックアップ恐怖症 その2

BackBlazeに、引き続きローカルのファイルをアップロードし続けています。色々とサイトを見ていると、「3TBの転送に3ヶ月かかった」との情報もあります。そうすると、私の場合は、順調にいっても5ヶ月はかかる見込みでしょうか、初回アップロードが完了するのは、8月以降ですね。

初回アップロードさえこなしてしまえば、後は差分アップロードなので、どうにかなるでしょう。

しかし、「アップロード中にドライブが破損(じゅうぶんにあり得る)」したりすると、目も当てられません。

一応、ローカルでバックアップディスクを作っておくことにします。

まず、「BunBackup」というソフトウェアを試してみました。というか、使っていました。世代管理もできるということで、機能豊富なのですが、「タスクスケジューラ」が私の意図通りに動かず、いまいちフィットせずに、別のソフトを探すことに。

次に、「Backup」というソフトウェアを試してみました。何より惹かれたのは、「FFFTP」の制作者だということです。90年代〜2000年前半に、個人でWEBサイトを作っていた人なら、誰もが知っているソフトウェアではないでしょうか。

というわけで、流れは下の通りになります。

1)ローカルのファイルを外付けHDDに毎時バックアップをかける。
2)それと並行して、BackBlazeにもバックアップを進める。

1)は数日で終わるでしょうが、2)は、どうしても3ヶ月以上かかりそうですね。電気代・・・。

Vue.js (Vue-Cli) の ESLint 関連の参考リンク

Configuration Reference
まずは、公式サイトの確認。

@vue/cli-plugin-eslint
package.json で読み込まれているプラグインについて知っておくことが大切。

Vue.jsスタイルガイドとeslint-plugin-vue検証ルールのマッピング
ESLintの推奨設定(eslint:recommended)のチェック内容
Vueのeslint/stylelint設定
何がエラー判定されるかを知っておくことが大切。

Atom & Vue.js & ESLint で自動整形環境構築
作業時に便利そうな環境構築を。

Vue.js in TypeScript で型定義をどこに書けばいいか
こういったものについて、共通のリファレンスがあると良いね。

Typescript学習メモ①(ExportとImport、require(“xxx”)とmodule.exports)
クラスやインタフェースの定義を export する
はじめてのvue-property-decorator (nuxtにも対応)
そもそも、基本的なところでこけないように。すぐ、忘れてしまいます。

菅原文太の「夕焼け小焼け」が素晴らしい。

なにが素晴らしいかというと、2番の後に入ってくる「語り」である。


夕焼け 小焼けで 日がくれて
山の お寺の 鐘がなる
(略)
ことりが 夢を 見るころは
空には キラキラ 金の星・・・

こんなうたを 歌ってた 子どもの頃は
私にも 帰るうちがあり
そこには あったかい 晩ご飯が待っていました

子どもたちは 毎日遊び呆けていれば それで良く
自分がいつか 生まれ故郷を離れて
人生という 長い 長い旅に出るなんてことは
考えもしなかったんです

皆さんも きっと そうだったんじゃ ありませんか

でも そのうち 私にも
とうとう 旅立ちの日がやってきました

私が 18になった春のこと
将来 何になるという あてもなく
わたくしは 東北線にのって 東京へ向かったんです

(汽笛—汽車の音)


曲長(Duration)が、3分20秒。
語りが、1分20秒くらい。長い。

先日、久しぶりに「あゝ決戦航空隊」を見たけれど、やはり菅原文太はかっこいいですね(主役は鶴田浩二)。

Vuexの使い方

Vue.js でのデータの受け渡しについて、色々と調べている。

それプラス、TypeScript を用いたときに、綺麗な書き方、についても。

まず、「vuex typescript」でググる

TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた

ググると、こちらの記事が上位に出てきますね。
とくに、「vuex」以外のライブラリは使っていないように見えます。

RootStateとか、ActionTreeとかの説明がないので、そのあたりは調べなければならない。


vuex + typescriptをvuex-module-decoratorsで無敵になる

次に出てくるのが、こちらの記事ですね。
このときは、「vuex-module-decorators ってなんのこっちゃっ?」てことで、記事をあまり読み込みませんでした。

結局、今は、vuex-module-decorators を採用しています。


これら2つの記事を見ても、いまいちピントこなかった「Vuex + TypeScript」です。そこで、次に出てきたのが、「vue-class-component」。

vuex-class-component

vuex-class-componentを使ってVuexをクラススタイルでタイプセーフに書いてみよう

こういった記事を見つけ、なんか使いやすそうだな、と。

GitHub(vuex-class-component)をみても、とても分かりやすく解説されている。こいつで決まりかなー、と思ったところで、ドキュメントを読んでいてひっかかったのが、「nuxt」という文字。

nuxtというと、「Nuxt.js」ですよね。
Vue.jsのフレームワークと認識していますが、今回は、Nuxt.jsまで習得する時間がありません。「Vue.js + TS」が限界です。

そして、Nuxt.js のVuex ストアの項を見ると、また別のお作法が書いてある。どれがスタンダードなやり方なのか分からん(動けばいいんだろうけれど、あとからメンテしやすいものが良い)。

vuex-module-decorators

ただ、ここがきっかけで、「Nuxt.js+ TypeScript」というページを見つける。そこのストアの項を見ると、先に出てきた「vuex-module-decorators」が丁寧に解説されている。

最も人気のあるアプローチの1つは vuex-module-decorators です

https://typescript.nuxtjs.org/ja/cookbook/store.html#vuex-module-decorators

最も人気があるのかー、と思いながら、下まで読むと、vuex-class-componentも取り上げている。が、あまりポジティブではなさそうだ。

vuex-class-component は Nuxt ストアに対する非常に有望なクラスベースのアプローチであり、シンタックスは vuex-module-decorators にとても似ています。新しい API をリリースしましたが、Nuxt との互換性は完全ではありません。回避策はデコレーターでモジュールを定義することです。

https://typescript.nuxtjs.org/ja/cookbook/store.html#vuex-class-component

最後にヴァニラでのお作法が書いてあるが、ヴァニラでコーディングする気はないので、パス。

で、「vuex-module-decorators」ですが、こいつの公式リファレンスが非常に分かりやすい。

GitHub(公式)のREADMEすらも分かりやすい。

とりあえず、「vuex-module-decorators」を使ったコーディングをしてみようと思います。


Vuexについて、まだ「コレ!」というスタンダードなやり方が記された書籍が出版されていない中、後からもコーディングが続けられるような(持続可能なプログラム・・・)コードにするために、どのようにすればよいのか、それを探るのに大変な時間を使ってしまった。

「Vuexを使ったデータ保存」だけなら、すぐ実装できるだろう。色々なやり方が、色々な書籍に書いてある。

が、時間を置いて(空けて)再びコードをみたときにも、なるべく、

・分かりやすい
・新しい目的に応じて、修正しやすい

コードにしたい(当然ながら)。
付け焼き刃的な、「そのときだけ動けば、それでいい」的なものに、今回はしたくない。

コロナウイルス対策のため、不要不急な外出を控えなければならない状況が続くため、週末も引きこもることでしょう。「vuex-module-decorator」を取り入れることで、少しでも開発が前進すれば良いのですが(しなければならない・・・)。

シンゴウガ
アオニナリマシタ
オウダンシテクダサイ

これは、歩行者用の信号機。
下にスピーカーがついているところに注目。
こういったものが、おそらくユニバーサルデザイン(合っているかな?)。

この声(音)がどこから流れているのか、考えたことがなかったが、信号機のすぐ下に、スピーカーがあるとは知らなかった。

スピーカーの向き的には、対向車線側で信号待ちをしている人にアナウンスする形なのかな。信号機の近くにいる人だったら、もうちょっと下向きにするんじゃないかな。

いや、写真を撮ったときはあまり考えなかったけれど、この信号機は、歩道の奥に設置されていた気もするね。だったら、信号機の前に横断歩道を渡る人が並んでいる・・・という形なのかな。

それに、対向車線まで聞こえるような、大きな音量で流すと、本来聞こえてはいけない人(赤信号で止まっている人)にも聞こえてしまうよね。事故を防ぐためにも、音が聞こえる範囲はピンポイントじゃないといけないよねー。

・・・などと、全く関係ないことも考えていました。

ElementUIを使う

Vue.js で、「見栄えの良いUIにしたいなー」と思って調べていると、「ElementUI」が良いと書かれていました(山田 2019, p.258)。

早速、ElementUIをnpmでインストールしました。

npm i element-ui -S

そして、main.jsを編集。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

ちなみに、デフォルトは中国語らしいので、日本語に直す必要があります。
(ダイアログなどがChineseになってしまう。)

The default language of Element is Chinese. If you wish to use another language, you’ll need to do some i18n configuration. In your entry file, if you are importing Element entirely:

https://element.eleme.io/#/en-US/component/i18n
import locale from 'element-ui/lib/locale/lang/ja'
Vue.use(ElementUI, { locale })

そして、カスタムテーマをSCSSで作れるようだったので、ちらっとファイルを作って、ビルドしたところ、webpackで生成されるindex.js50MBとかになりました。ローカルでも鬼のように遅いです。

そこで、ElementUIのホームページを見ながらカスタムCSSファイルを作ろうとしたところ、ハマりました。

element-themeのインストール(に失敗)

npmでさっとインストールします(公式ホームページでは、グローバルにインストールせよと書かれていますが、GitHubではプロジェクト内にインストールしていますね)。

npm i element-theme -D
npm i element-theme-chalk -D

そして、et -i と打つと、SCSSファイルが生成されるとあるのですが、ここでエラー。

const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined

なんのことやら。

ググってみたところ、gulpとのバージョンが合わないとか。
Gulp実行でエラーが出力

とりあえず、依存関係を確認。npm audit を打ちます。

すると、いくつかのファイルが依存関係でエラーを吐いています。みてみたら、すべて「element-theme」に関わるものでした。

そういえば、element-theme の導入時に大量のエラーを吐いていた気がします。

npm i element-theme -D
npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated gulp-util@2.2.20: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated graceful-fs@2.0.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
+ element-theme@2.0.1

まず、頭に出てきたgulp-utilですが、こいつが、ネックなのかなと。gulp-utilgulp4がリリースされたため、非推奨らしいです。

脆弱性の警告を受けたnpmパッケージの依存関係を力技で直す

こちらのサイトを手がかりに、一つ一つ潰していっても良いのですが、どうしましょうか。

パッケージを1つ1つ確認するも、うまくいかず・・・

とりあえず、Gulpをインストール

npm i gulp -D
+ gulp@4.0.2
et -i            
fs.js:27
const { Math, Object } = primordials;
                         ^

ダメですね。1つ1つ消していきましょう。

まずは、clean-css

とりあえず、npmで最新版をインストール。
Path          │ element-theme > gulp-cssmin > clean-css
とあるので、プロジェクト下node_modulesのgulp-cssminからclean-cssフォルダを削除。

npm dedupeして、npm audit したら、問題が1つ減っているのが分かります。

と、うまくいっているように見えたのですがnpm i で別のパッケージをインストールしたら、再度アラートが出るように・・・。賽の河原状態・・・。

結局、今回は「et」コマンドで初期ファイルをいじるのは止めました。
今のところ、問題はないですが・・・対策を考えます。

とらいえず、WEB上でカスタムテーマを作成するのが良いでしょうか。

参考文献

山田祥寛 2019 『これからはじめるVue.js実践入門』SBクリエイティブ.(Amazon

MacBookProのキーボードが故障

どうも最近、誤変換が多いと疑問に思っていたのですが、昨日あたりに、「スペースキーが二度押しされる」ということに気付きました。

あと、右シフトが、押さえ込まれたまま帰ってこなかったり。

これは、Appleの出している修理プログラムの対象になるのではと、電話したところ、見事に当たり。

明日、ヤマト運輸が集荷に来て、5日から1週間のちに帰ってくるそうです。

バックアップをとったり、修理用のアカウントを作ったり、暗号化を切ったりと、面倒。

AppleCareプラスに入っているんだから、即日修理とか、代替品とかしてくれると嬉しいのだけれど、そういうのはないのよね。

高いPCの割に、こういった初期不良・故障に最近よく出会います(二度目)。

MacBookPro が修理から帰ってきました

先日,「スペースーキー」が2度押しされて,全く使い物にならないと嘆いていたMacBookProが,「MacBook、MacBook Air、MacBook Pro キーボード修理プログラム」の修理を終えて帰ってきました。

コロナウイルスで,モノの動きも非日常な今ですが,事前のAppleサポートの連絡より,若干早く帰ってきました。

修理の進捗具合は次のとおりです。

4月21日(火)Appleの電話サポートで修理依頼
4月22日(水)ヤマト運輸が集荷に来る
4月23日(木)Appleの修理センターに到着(メールあり)
4月24日(金)修理完了&発送(メールあり)
4月25日(土)自宅に到着

Appleの電話サポートでは,5日〜1週間程度とのことでしたが,その電話込みで5日で修理完了という具合でした。

「トップケースの交換」ということで,キーボードの交換になったのですが,バッテリー一体型だったようで,バッテリーも一緒に交換してもらったようです。

システム情報より

というわけで,止まっていたコーディングを進めなければなりません。

iPad Pro と外部キーボード

MacBookPro がない間,自宅外で作業をするのをどうしようか,と考えたところ,「手持ちのiPadに外部(US)キーボード」をつないで使うのはどうか,と思い試してみました(iPadのUSB-Cポートに変換アダプタを介して,有線キーボードをつないでみました)。

結果は,「使いづらかった!」です。

まず,iPad Pro用の「Word」が非常に使いづらい。

1)OneDrive上のファイルを編集するのがデフォルトなのか,iCloud上に保存したWordファイルを編集するところから面倒(時間がかかる)。

2)Windows, macOS用のWordと違うところが多く,「あれ,○○したいときに,どこ選択したらいいんだ?」みたいなことが多発(慣れの問題かもしれません)。

3)思ったように,文字入力ができない(これはiPadの文字入力ソフトのせいかな)。ライブ変換機能はとくに使いづらかったので,即OFF。

で,iPad用のアプリ「Pages」をダウンロードすると使いやすいのかな,と,そちらも試してみたのですが,これも使いづらい(慣れの問題もあるでしょう)。

結果として,一番使いやすかったのは,「Google ドキュメント」でした。

表の細かいレイアウトなど,凝ったことはできませんが,無難に文書を作るだけなら,「Google ドキュメント」で十分だな,と。
何が良いかというと,とにかく,動作が軽い(早い)!
文書を書くだけなら,「Word」や「Pages」より使いやすく思いました。

これで作ったファイルを,自宅の「Word」で整形すれば,全然使い物になります(「Google ドキュメント」で作ったファイルは,綺麗にWordファイルにエクスポートできました。素晴らしい!)。

あとは,iPad 用に「ATOK パスポート」が対応してくれれば,ユーザー辞書もWin/Macと同期されて便利だろうなーと思っているところです(同期だけなら「ATOK for iPad」でもできるようですが,App Storeの評価が低い・・・。ATOKパスポートに年会費払っているのに,これに1,700円払うのもなぁ・・・)。


ただ,MacBookProが思ったよりも早く帰ってきたので,iPad Proに有線キーボードをつないで入力する機会は,そうないかもしれません。

発売が1ヶ月前倒しになった(4月21日発売)のiPad Pro用のMagic Keyboardも,値段が半額ぐらいなら「買おうかなー」と思うのですが,4万円はなかなか高いです・・・。配送日も現時点で6月(約1ヶ月半先)ですし。もういいかな。