prismaで接続文字列に記号が入っていた場合の対策

 

知り合いに、ORマッパーとして「prisma」というものがあるということで勉強中。

Node.js　TypeScript などで使用される、ということで、今後注目のORM。

自分の環境にあるのがMySQLなので、MySQLに接続しようということで

接続文字列の書き方を　こちら　を参考に作成。

MySQLのほかのDBの接続文字列もまとまっていてわかりやすいですね。

ただ、MySQLの場合ですが、私の環境だと、ユーザのパスワードに　@ が入っています。

（たとえば p@ssword）

MySQへの接続文字列が

url = "mysql://janedoe:mypassword@localhost:3306/mydb"

ということだったのですが、そのまま書くと

url = "mysql://janedoe:p@ssword@localhost:3306/mydb"

どこまでがパスワードで、どこからが接続先なのかがわからない！

最初はシングルクォーテーションで囲ってみました。

url = "mysql://janedoe:'p@ssword'@localhost:3306/mydb"

でもダメ。

ユーザごと囲うか？

url = "mysql://'janedoe:p@ssword'@localhost:3306/mydb"

これもダメ。

どうしたものかと思案していたところ、「Example」のすぐ上にありましたね。解決策が。

Special characters

For MySQL, PostgreSQL and CockroachDB you must percentage-encode special characters in any part of your connection URL - including passwords. For example, p@$$w0rd becomes p%40%24%24w0rd.

@→%40

$→%24

ですね。

その他の文字の詳しい対応が、こちら　にありました。

でも何の変換だろう。。。

パーセントエンコーディング？聞いたことないな、、、URLエンコーディングなら聞いたことあるが、、、

調べてみると、ほぼ

　URLエンコーディング　＝　パーセントエンコーディング

として認識されている模様。ただ、半角スペースの場合

　URLエンコーディング　→ +

　パーセントエンコーディング　→ %20

と、変換方法が違う。これが「パーセント」たる所以か。

ちなみに今回の例を、パーセントエンコーディングで変換すると

url = "mysql://'janedoe:p%20ssword'@localhost:3306/mydb"

となります。

いい勉強になったな。。。

【解決】Google Photoのデータ容量が限界 バックアップする

 

「携帯の容量が足りない！何とかならないか？」

IT系の相談を受けました。

まあ、難易度は低いほうかな。

外付けハードディスクにデータを移してほしいらしく、

携帯をPCにつないでみると、何らかのツールで作成されたバックアップデータが数GBあり

それを外付けハードディスクに移してあげて仕事完了。

持ち主に返してみると。

「まだ全然変わっていない！！」

？？

どういうこと？？？

よく話を聞いてみると、「Gmailが見れなくなるって言われてる」と言っている。

Gmail？

GmailはWebメールなので、携帯の容量を圧迫することは無いはずだが、、、

いや待てよ。

Googleアカウント上で、データがたまりすぎているのか、、、？

調べてみると、、、、

原因わかりました。

Googleフォトです。

どうも、その方は、携帯で写真や動画を撮ることが多いらしいのですが、

写真の保存先がGoogleフォトになっていたようです。

この調査を依頼されるまで、Googleフォトのことを良く知らなかったのですが

携帯で写真を撮ったら、オリジナルの画像データは、ローカルのスマホ内ではなく

クラウド上に保管されるそうです。

てっきり、ローカルのスマホにあるものを、クラウドのデータに同期している、

と思っていていたのですが、オリジナルデータのみが、Googleのクラウド上に配置されるようです。

もしインターネットがつながらない場合は、撮った写真みれないじゃないか！

そんな憤りを胸に、Googleフォトのデータバックアップを調べました。

まず、Googleフォトで、クラウドにデータを保存すること自体

バックアップ的な意味になってしまうので、単純に調べてもやり方が出てきません。

色々探して参考になったのは以下のサイト

Googleフォトが有償化!?　さぁ引っ越しだ

Googleフォトの容量制限がかかり、有償化になったのでデータ移行しよう、というものです。

この中で、現行のフォトデータをエクスポートする手順が「Googleフォトをダウンロードする」にあるのですが、、、

「Googleフォトをダウンロードする（2）」にある「データとカスタマイズ」が見つかりません。

サイトの画像はこちら

昨日作業した時の画像がこちら

「データとプライバシー」に変わっています。

画面をスクロールしても「データをダウンロード」は見つかりません。

でも安心してください。

「アプリとサービス」を選択してもらえると、

Googleダッシュボードに行けて、そこで「データのダウンロード」を選択すると、、、

エクスポートの画面に行けます。

ここで、通常のおすすめの１ファイル当たりのサイズは「2GB」らしく

「2GB」にしたのですが、結局50GBで再度取り直しました。

理由としては、分割されたバックアップ対象が、エクスポート先の圧縮ファイル内にあるかどうかがわかりづらかったからです。

通常１、２，３という順番で圧縮ファイルが作成された場合、

１．が一番古くて、次に２，３になるにつれて新しいファイルが登録されているんだろうな。。。

と期待していたのですが、どうもそうでもなさそう。

今消そうとしている画像が、ちゃんとエクスポートされているかが非常に見つけづらかったのです。

１つ目の圧縮ファイルを解凍すると、、、

from 2019フォルダ

from 2020フォルダ

２つ目の圧縮ファイルを解凍すると、、、

from 2019フォルダ

from 2020フォルダ

from 2021フォルダ

from 2022フォルダ

といったように、同一フォルダ名が複数存在していました。

こうなってしまうと、「2019年でまとめてバックアップしたい」となると

それぞれのフォルダ内のファイルを、１つのフォルダに移動する作業が発生します。

それはだるい！

５０GBにしておけば、圧縮は１ファイルになり、展開した時、

from 2019も from 2020 も１つしかないのでとても楽です。

実際、１４GBほどの巨大圧縮ファイルができ、欲しい画像もちゃんとエクスポートされていたので問題ありませんでした。

次に画像の削除です。

Googleフォトに入っている画像を消そうとしますが、

画像表示はサムネイルなので、エクスプローラのような、１ファイルが１行の形で表示できません。

また、複数選択も ctrl + a でやりたかったのですがそれもできず

色々調べて以下のサイトを見つけました。

Google Photosから写真を一括削除する方法と注意すべきこと 2022【Googleフォト】

ここの

大量の写真を一括選択する方法

がとても参考になりました。

ある一つの画像を選択後、Shiftキーを押しながら、マウスカーソルを移動する、というもの。

これでかなりファイルの複数選択が楽になりました。

これで１０GB以上のデータを削除することができ、一安心。

知り合いも喜んでくれました。

よかったよかった。

Gitでは最初ファイル名の大文字小文字を区別しない

謎な現象に出会いました。

nextプロジェクトをビルドしようとしたのですが、

以下のエラーが発生しました。(ファイル名はちょっと変えてます)

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
info  - Linting and checking validity of types ..Failed to compile.
./src/pages/xxx.tsx
Type error: File name 'C:/xx/types/SearchRequest.ts' differs from already included file name 'C:/xx/types/searcRequest.ts' only in casing.
  The file is in the program because:
    Root file specified for compilation
    Imported via "../types/SearchRequest" from file 'C:/xx/pages/planForm.tsx'

> 24 | import { SearchRequest } from "../types/SearchRequest";

compilation 、、、

競合？

よく見てみると、、、

ソース上から参照しようとするファイル名　SearchRequest

実際のファイル名　searchRequest

・・・

・・・

先頭のｓが大文字と小文字だ！

どうも、他の人が修正したとき、ファイル名を直したそうです。

でも直した情報のうち、ソースの内容はコミットされ

ファイル名変更がgitにのらなかったらしく、不整合が起きているようでした。

こちらを参考に、修正者の設定を変更してもらい、

念のため私の環境も変更しました。

sourcetreeがファイル名の変更を検知しないのでignorecaseをfalseにする

これでエラーも出なくなり一安心。

tomcatが立ち上がらない

最近tomcatをほったらかしにしていたのですが

載せたいアプリができたので、乗せようとすると、、、、

起動しない！

状態見てみます。 

$ sudo systemctl status tomcat

Dec 13 20:44:26 xxx systemd[1]: Starting Apache Tomcat 9...
Dec 13 20:44:26 xxx startup.sh[13912]: Existing PID file found during start.
Dec 13 20:44:26 xxx startup.sh[13912]: Removing/clearing stale PID file.
Dec 13 20:44:26 xxx startup.sh[13912]: Tomcat started.
Dec 13 20:44:26 xxx systemd[1]: Can't open PID file /opt/apache-tomcat/tomcat.pid (yet?) after start: No such file or directory
Dec 13 20:45:56 xxx systemd[1]: tomcat.service start operation timed out. Terminating.
Dec 13 20:45:56 xxx systemd[1]: Failed to start Apache Tomcat 9.
Dec 13 20:45:56 xxx systemd[1]: Unit tomcat.service entered failed state.
Dec 13 20:45:56 xxx systemd[1]: tomcat.service failed.

tomcat.pid が見つからない？

探してみると確かにない、、、

sudo less  /etc/systemd/system/tomcat.service

[Unit]
Description=Apache Tomcat 9
[Unit]
Description=Apache Tomcat 9
[Unit]
Description=Apache Tomcat 9
After=network.target

[Service]
User=tomcat
Group=tomcat
Type=forking

PIDFile=/opt/apache-tomcat/tomcat.pid

Environment="JAVA_HOME=/usr/lib/jvm/jre"
Environment="JAVA_OPTS=-Djava.security.egd=file:///dev/urandom"

Environment="CATALINA_BASE=/opt/apache-tomcat/"
Environment="CATALINA_HOME=/opt/apache-tomcat/"
Environment="CATALINA_PID=/opt/apache-tomcat/temp/tomcat.pid"
Environment="CATALINA_OPTS=-Xms512M -Xmx1024M -server -XX:+UseParallelGC"

ExecStart=/opt/apache-tomcat/bin/startup.sh
ExecStop=/opt/apache-tomcat/bin/shutdown.sh
ExecReStart=/opt/apache-tomcat/bin/shutdown.sh;/opt/apache-tomcat/bin/startup.sh

[Install]
WantedBy=multi-user.target

「PIDFile」「Environment="CATALINA_PID」のpidファイルのパスが異なっていたので合わせることにします。 

PIDFile=/opt/apache-tomcat/tomcat.pid
↓
PIDFile=/opt/apache-tomcat/temp/tomcat.pid

さあどうだ。

Dec 13 21:41:06 xxx systemd[1]: Starting Apache Tomcat 9...
Dec 13 21:41:06 xxx startup.sh[2836]: Existing PID file found during start.
Dec 13 21:41:06 xxx startup.sh[2836]: Removing/clearing stale PID file.
Dec 13 21:41:06 xxx startup.sh[2836]: Tomcat started.
Dec 13 21:41:06 xxx systemd[1]: Can't open PID file /opt/apache-tomcat/tomcat.pid (yet?) after start: No such file or directory
Dec 13 21:41:25 xxx systemd[1]: [/etc/systemd/system/tomcat.service:22] Unknown lvalue 'ExecReStart' in section 'Service'
Dec 13 21:42:55 xxx systemd[1]: tomcat.service start operation timed out. Terminating.
Dec 13 21:42:55 xxx systemd[1]: Failed to start Apache Tomcat 9.
Dec 13 21:42:55 xxx systemd[1]: Unit tomcat.service entered failed state.
Dec 13 21:42:55 xxx systemd[1]: tomcat.service failed.

まだエラー、、、

Unknown lvalue 'ExecReStart' って言われても。。。

しらべると、、'ExecReStart'はrootの変数で、フルパスで書かないといけないみたい。

https://teratail.com/questions/232242

 ・・・・

フルパスで書いているが。

原因不明ですが、'ExecReStart'は、結局停止して再起動するだけのせってなので

思い切ってコメントアウトしました。

ExecReStart=/opt/apache-tomcat/bin/shutdown.sh;/opt/apache-tomcat/bin/startup.sh

↓

#ExecReStart=/opt/apache-tomcat/bin/shutdown.sh;/opt/apache-tomcat/bin/startup.sh

さあどうだ。

$ sudo systemctl start tomcat

・・・すぐコンソールが戻ってきた。起動が成功したようです、、、

$ sudo systemctl status tomcat

● tomcat.service - Apache Tomcat 9
   Loaded: loaded (/etc/systemd/system/tomcat.service; enabled; vendor preset: disabled)
   Active: active (running) since Tue 2022-12-13 21:49:56 JST; 23s ago
 Main PID: 6658 (java)
   CGroup: /system.slice/tomcat.service
           mq6658 /usr/lib/jvm/jre/bin/java -Djava.util.logging.config.file=/opt/apache-tomcat/conf/logging.properties -Djava.util.logging.manager=org.apache.juli.ClassLoaderLogManager -...

Dec 13 21:49:56 xxx systemd[1]: Starting Apache Tomcat 9...
Dec 13 21:49:56 xxx systemd[1]: Started Apache Tomcat 9.

起動した、、、、！！！！

結局以下の2点が問題でした。

１．pidの出力先指定ミス

過去の記事で、tomcat10→tomcat9にダウングレードした際、

tomcat.serviceの設定は、複数のサイトで見ながら

それらしい設定値で書いたつもりだったのですが

PIDFile=/opt/apache-tomcat/tomcat.pid

と

Environment="CATALINA_PID=/opt/apache-tomcat/temp/tomcat.pid"

のパスが一致していなかったので、後者の設定で出力されたファイルを

前者の設定で確認しようとして、「あれ、無い」ということでエラーになっていたものと思われます。

２．再起動設定の無効化

ExecReStart=/opt/apache-tomcat/bin/shutdown.sh;/opt/apache-tomcat/bin/startup.sh

シャットダウンしてスタートするだけなのですが、この設定が良くなかったようです。

今回はコメントアウトで乗り越えましたが、きっと正しい書き方であればできるはず。。

もし解決法が分かったら、修正したいと思います。

こんな問題、他の人は遭遇しないだろうな、、、

Next.jsでteratermを閉じても起動したままにしたい

 リモート作業はとても便利なのですが

切断して、再接続したとき

時々リモートデスクトップで作業していた数々のアプリが

落ちているときがあります。

仕方がないので立ち上げ直すのですが、一つ問題が。

Next.jsで動かしているサイトがあるのですが、teraterm経由で接続したサーバ上で

以下のコマンドを実行して立ち上げています。

npm run start &

最後の & で、実行しても、コンソールに戻ってくるので、teratermウインドウを有効活用できます。（つけないとずっと戻ってこない）

でも、

teratermを落とすと、next.jsで作ったサイトも落ちてしまいます。

毎回やり直すのも面倒になってきたので、常に実行できる方法を調べました。

nohup npm start &

これを実行すると以下のメッセージが出てビビります。

nohup: ignoring input and appending output to ‘nohup.out’

でもこれは、

「実行した後の出力文字どこだすの。何も言ってないので　nohup.outに出しとくよ」

という親切なお知らせ。

実際は、実行した直下に「nohup.out」が出力されてました。

停止するときは以下でプロセスIDを探す

ps | grep npm

見つけたIDをKILL

kill {プロセスID}

とりあえずこれで安心か、、な。

※12/11追記

nohup npm start &

してもteraterm閉じたら落ちたよ！

再調査必要、、、

Spring boot 3はやめました

前回、せっかく調べてtomcat10 でも動くようになったspring boot 3　ですが、

最終的に使用するのを断念しました。

理由は２つです。

tomcat10ではSpringBoot2が動かない どうする

SpringBootのアプリを動かそうとしていたのですが、

サーバ側はtomcatの最新版を置いておこうと思ってtomcat10にしました。

で、SpringBootのwarファイルを置いてアクセスしようとしているのですが、

全然反応なし。

Eclipse上からは行けるのに。。。

色々調べてみると、、、

ありました。。。

tomcat10にデプロイすると404になります。

SpringBoot2だとtomcat10で動かない！

しかも、動くはずのSpringBoot3は開発バージョンだと。。。

急いでtomcat9に落とすか、、、10と共存か、、、どうやるんだけ、、、

途方に暮れながら、念のため、Spring Bootのサイトで最新版が何か確認しようとしました、、

すると、、

最新バージョン　3.0.0

おお、

最新が３

でもいつこうなったんだろう

各バージョンのサポート期間を見ます

先月だ、、、

ギリギリ、、、

SpringBootの3への移行はちゃんと手順があるようなので

それで試してみようと思います。

【解決】-bash: /usr/local/bin/docker-compose: Permission denied

 前回、PhotonOSでdocker環境ができたので

docker composeもできるようにしようとしたらハマったのでメモ

まず、dockerを使うとき、いつもsudo つけないとだめなのが面倒なので調べたら

調べてくれている方がいらっしゃったので、ありがたく参考にさせていただきました。

sudoをつけなくてもコマンドを実行できる設定

良しこれで完璧。

次にdocker composeです。

参考にしたのは、公式のdocker compose standaloneのインストール方法

sudo curl -SL https://github.com/docker/compose/releases/download/v2.13.0/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose

※curlの時、/usr/local/bin　に書き込み権限が無くて失敗したので sudoをつけました。

さあ、これで実行

# docker-compose

-bash: /usr/local/bin/docker-compose: Permission denied

????

あれ、公式と違う、、、

ネットで他の人のやり方を見ていますが、全部これで成功している、、、、、

権限周りか？

# ls -ltr /usr/local/bin/

-rwxr-x--- 1 root root 45658112 Nov 30 22:09 docker-compose

うーん。権限周りは良くわからんです、、

えいっ

sudo chmod 777 /usr/local/bin/docker-compose

# docker-compose -v

Docker Compose version v2.13.0

できた、、、

しかしあぶなっかしい、、

後でちゃんとしておかないと、、、

【解決】OPPOで電話着信取れない

最近、年末の食事のお店の予約や、買った商品の問い合わせなどで、店舗に連絡の電話をする機会があり、その折返し連絡をもらうことになっていたのですが、

着信が取れない！

正確には、マナーモードにしていて、バイブは鳴るのですが、いつもの受話器のアイコンをスライドする画面でないのです。

バイブが鳴って、ロックを解除しても、ホーム画面が表示させるだけ。

もう焦ります。

予約できるか、結果をもらう電話だったり、問い合わせの回答をもらう電話なので、早く答えを聞かたいのに、私の愛用機、oppoをどう操作してもダメ。

oppoのバグか？

一瞬頭に浮かんだその考え、他の人は同じような状況か、検索して調べてみました。

Android端末で着信が取れない状況は、いくつか出てきましたが、どれも私の事象に当てはまりません。

困り果てていましたが、そのままでも解決しないのでいろいろ調べて

やっとうまくいった設定をご紹介します。

photon OS のネットワークがやっとつながった これからdockerだ！

Dockerの勉強をしたいのですが、会社ではEsxi上でのVMで作業しており

VM上ではDockerができないみたい、、、、と諦めていたのですが

VMware社謹製のPhoton OSというのもを入れれば、使える、みたいな情報を知りました。

これはいれるしかない

早速イメージをとってきて、いざ使おう、としたところ、

ネットワーク設定で大いにつまづきました。。。

もう1年ぐらいほったらかしだったかも。。。

①キー入力がおかしいので、設定ファイルの編集が思った通りにできない

②社内の別PCからPhotonOSまでsshがつながらない

③PhotonOSが社外に出れない

の3重苦です。

一つ一つ見ていきます。

【OPPO】OSアップデートでアラームがスライドで解除できなくなった

 

今朝、設定したアラームが鳴り、起きました。

止めよう、、、、

とスライドしても止まらない。

？？？

眠い目を無理やり開けて、何か見えるボタンを押してやっと止まりました。

とりあえずスヌーズになったようです。

・・・？？？

よくわからず、とりあえずロック解除して見てみると、OSがアップデートされていました。

設定で、通知が来ていたことは見ていたのですが、、、

設定を見ると「夜間の自動アップデート」がONになっていました。

まあ、アップデートしてしまったものはしょうがない。

とりあえずアラーム設定をみてみると、、、

見た目なんか変わってる、、、

OSアップデートで、標準機能の表示がいろいろ変わっているようです。

「とりあえず、スライドで解除できるように戻したい、、、」

と、アラームの右上の設定画面を開くも、、、

スライドで解除する設定が見当たりません！

まさか、そこまで変えたのか・・・・

結構重宝していた機能だったのですが、、、

もしかしたら他の画面で変えられるかもしれないので、

何かわかったら更新したいと思います。

田中賢一郎氏 Webアプリ開発入門: 4.Jest編 7.2.4 App.vue

 田中賢一郎氏の

Webアプリ開発入門: 4.Jest編 Future Coders テキスト

結構難しくなってきた、、、

今回は　7.2.4 App.vue　です。

App.spec.js

index.html

App.vue

を写経。

筆者の

ここまでテストを記述しながら、在庫アプリを作成する様子をみてきました。まだほかにもいろいろなシナリオが考えられますが、大体どのような形式で記述するかというイメージは伝わったかと思います。

の言葉がつらい。

写経だけでは、何を実装しているのかわからない、、、

動かしながら実感したいが、いきなりテストコードから始まって（ＴＤＤなので当たり前だが）画面がないところで進めると、何をしているのか頭に入らない。

もちろん、テストしたい処理に対して、テスト値を入れ、期待値通りか確認する、というステップはわかるのだが、実装したvueがどう動くのか、が想像できていないので

もう暗中模索状態。

とりあえず実行してみるも、画面は真っ白。

npm run serve は正常に実行されているので、エラーなどは出ていない。

F12でコンソールに出された情報を見てみる。

エラーのファイル名が、自分で実装したファイルではない。

よって、どこが悪いのか、探しにくくなっている。

目視で問題を探すのも限界、、、

答えとdiffだ。

export defaultの階層構造記載ミス

data やmethods は第1階層目から書かれているのに

computed の階層は2階層目から。

書き換えて、、、

う、動いたー

こ、こんなの作っていたんだ、、、

知らなかった。

いや、本にはこういうものを作る、と説明してもらっていたのは知っていたのだが、実感としてわかなかった。

今度はこの画面を見て、中の値とかも見ながら単体テストで何を確認したかったのか、逆に追ってみよう、、、

ということでunitテストもapp.spec.js が通せてなかったのでやります。

コマンドが書かれてなかったのですが

npm run test:unit App

ですね。

test/unitフォルダに　App.spec.js　を入れて実行。

案の定エラーが出ますが、見ていると写経ミスのところばかりで

failedになったところも1つずつ解決していき、、、全部パス。

良かった。。。

念のため、答えの画面見てみますか、、、

！？

棒グラフが縦、、、

私のは横、、、

InventoryChart.vueのところが著しく違います。

InventoryInput.vueのスライダーやボタンの大きさも、答えのほうがすっきりしている。

私の物はボタンおおきすぎです。。

読み進めると、、、「7.3  vue-chart-3,chart.jsによるグラフ描画」という章がありました。

そうか、答えの縦棒はこれをしないとだめなのか！？

vue-chartをnpmで指示通りに入れて、

InventoryChart.vueを書き換えました。

vue run serve!

> tdd-inventory@0.1.0 serve

> vue-cli-service serve

 INFO  Starting development server...

 ERROR  Failed to compile with 1 error                                6:03:19

 error  in ./src/main.js

Module not found: Error: Can't resolve './App.vue' in 'C:\ｘｘｘ\tdd-inventory\src'

ERROR in ./src/main.js 2:0-28

Module not found: Error: Can't resolve './App.vue' in 'C:\ｘｘｘ\tdd-inventory\src'

webpack compiled with 1 error

main.jsでエラー？

とりあえず　Module not found　ということなので、きっと今書き換えたものが動いていないのでしょう、、、、

エラーもざっくりだな。

幸い、答えもSection3フォルダに提供いただいているのでありがたく参照させてもらう。

diffとると、、、

×　method

〇　models

これはわかりずらい。。。

これも直して、diffの差異が無くなった、、、

でもエラーがでる、、、なんで？

・・・

・・・

・・・

App.vue　がいつの間にかなくなっている、、、

そういえば、コマンドを打とうとしたのに、フォーカスが「ターミナル」に入っていなくて、エクスプローラのところにフォーカスが当たっていた時があったような気がしたのですが、その時にいろいろキーを打っていた時に消したかも。

もうここまでくるとさすがに同じ問題で困る人はいないかもしれませんが

念のため残しておきます。

やっとでた。

入庫や在庫をすると、グラフがぐいーっと伸びたり縮んだりするのがきもちいい。

いやー、結構長かった。

ボタンが大きすぎる件は、まあいいか。

ここで 単体テストしてみたらどうなるんだろう、、、

npm run test:unit App

実行

まあ、エラーが出ました。

見ていくと、、、vue-chart-3の部分で何か対応が必要みたいです。

    Details:

    C:\ｘｘｘ\tdd-inventory\node_modules\lodash-es\lodash.js:10

    export { default as add } from './add.js';

    ^^^^^^

    SyntaxError: Unexpected token 'export'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)  

      at Object.<anonymous> (node_modules/vue-chart-3/dist/index.cjs:71:24)

・・・まあここはいいか。

本も次の章に行くようなので、これはまた知識がついてから取り組むことにします。

田中賢一郎氏 Webアプリ開発入門: 4.Jest編 7.2.3 InventoryChart.vue

田中賢一郎氏の

Webアプリ開発入門: 4.Jest編 Future Coders テキスト

こんな低価格で、具体的なコードまで載せてくれて、、、ありがたいです

今回は、7.2.3 InventoryChart.vue

結構つまずきます。

InventoryChart.vue

InventoryChart.spec.js

を写経

unitテスト実行

まあまあ、最初はエラーでも仕方がない。

InventoryChart.spec.jsに問題が出ているようなので

WinMergeで答えと差異をなくしていき、、、再度実行、、、するもダメ。

あれ

多少の違いがあるかもと、答えのInventoryChart.spec.js をプロジェクトに上書き、、、するも同じエラー。。。

なぜ！？

しょうがないので、InventoryChart.vueの答えも上書き、、、でエラー無くなる。

ログで出ていたエラーのファイル名と違う！

実際にvue側を見てみると、、、

scriptタグがおかしなことに！

このほかにも、上部のdivタグの位置がおかしかったり、括弧が足りなかったり、、、

写経していて答えもあって、VSCodeの補完機能も使っているのにここまで間違うとは、、、

実際に仕事で使うとき、どこまで実用に耐えうるのか、、、

それともプラグインをもっと入れれば解決するのか、、、

不安だ、、、

田中賢一郎氏 Webアプリ開発入門: 4.Jest編 5.3 モジュールのモック

  田中賢一郎氏の

Webアプリ開発入門: 4.Jest編 Future Coders テキスト

5.1 jest.fn のコードが難しく、解説を見てもさっぱりで

ちょっと落ち込んでいます。。。。

今回は、5.3 モジュールのモック　です。

今回は郵政のAPIをたたいて値を返却するサンプル。

想像できる動きなのでとりあえず大丈夫そう。

zipmodule.js zip.js を写経

実行

んん？

results[0]のところで怒られる。

そういえば、このあたりは　vscode　のコード補完も効かず、手で打ったから

間違ったのかな、、、間違えてない。

こんな時は、本サイト　https://www.future-coders.net/　　の実装コードを見てしまおう。

氏が用意してくれる答えを見る。

・・・一緒に見える。

WinMerge だ！

results[0]のあたりは一緒っぽいか、、、先頭スペースが全角か半角かの違いか。

ん？

私のコード

答え

なんかちがう！

あれだ、シングルクォーテーションと、、、、ば、バックスラッシュ？

バッククォートでした。

いつもこれ、どこで使うかわからないんですよね。。。

どこで使われているかもわかりずらいし、、、

ネットで調べても、入力方法（Shift+＠）は出てくるのですが、

どこで使うのか、そもそもどんな意味があるのかまでは書かれていない、、、

Linuxでは以下らしい。今回の参考には、、、、ならないか、、、

シングルクォート：囲った中身を文字列として出力

バッククォート：囲った中身をコマンドとして実行。結果を出力

とりあえずバック、、、クォートにしたら、、、

動いた。。。

恐らくリクエストがうまくできずに、からのデータを参照しようとしてエラーになっていたのかも。。。

この辺りって、知っている人は当然のようにやって、

知らない人はとことんつまづくところかと。

なんでこんな紛らわしい文字作ったんだ？？？？

とりあえず axios.get ときたら、バッククォート！　で覚えます、、、

田中賢一郎氏 Webアプリ開発入門: 4.Jest編 4.1 level

 田中賢一郎氏の

Webアプリ開発入門: 4.Jest編 Future Coders テキスト

この本を見ているとワクワクします。

今回は、4.1 level　

levelDBとは初めて聞きました。

テスト用のNoSQLみたいですね。

早速 level-usage.js のコードを写経して動かす。

よし動いた。

さて書籍のほうは、、、

んん？

なんかちがう。

なにがちがうんだ・・・

・・・

・・・

ファイル名がちがう。

自分の実行結果にプラスして　todo　から始まるテキストが出力されている。。

ファイルパスを見ると　beforeafter か。

なにか修正前後の動作確認のキャプチャなのかな。。。

書籍を出すときは、誰かしらのチェックが入ると思うのですが

もしかするとこれは田中氏自身しかチェックしてないのかも。

その分、この低価格なのかもしれない。

このソース自体はlevelDBにデータを書いて、ログ出力できることが確認できたので良しとしよう。

まだまだ読んでいきたい。

【OPPO】HeyTapアカウント 知らないとやばい

OPPO公式サイトから、以下のお知らせが出されていたようです。

HeyTapアカウントサービスアップデートのお知らせ（2022.05）｜OPPO

急いでいる方のために結論から申し上げると、

「HeyTapアカウント」を使っているひとはメールアドレスを登録しないと「HeyTapアカウント」が使えなくなる

というものです。

HeyTapアカウント？

聞き覚えがありませんでしたので調べてみました。

Googleドキュメントの画像が消せない

 Googleドキュメントは、Googleアカウントがあれば無料で使えるので

Word代わりに重宝しています。

Gitに関する資料を作らないといけなくなって、

スクリーンショットや図を入れながら書いていったのですが、

一部のスクリーンショットだけ、なぜかクリックできず、

選択することも消すこともできないものができてしまいました。

※赤枠の画像です。

Google検索で「Googleドキュメント　画像　消せない」で調べても

それらしいものが出てきません。

今度こそ詰まった、と思ったのですが、

同様の事象を昔PowerPointやWordで見たような気がします。。。。。

なんだっけな、、、

、、、、

、、、

ヘッダ・フッタ　だ！

ヘッダ・フッタに設定された文字は、確か普通にでは編集できず、

ヘッダ・フッタ編集画面まで行って初めて編集できた気がする。。。

今回のケースでは、位置が下なので「フッタ」か？

Googleドキュメントのフッタ編集は、、、

「表示形式」「ヘッダーとフッター」か？

出てきたのはヘッダーとフッターの長さ設定と表示ルール、違う！

「挿入」「ヘッダーとフッター」か？

出てきた画面で、先ほど問題になっていた画像が出てきました。

削除できます。正解です。

でもなんでフッターに画像が入っているのでしょう。

特にこの操作をした覚えはありませんでした。

いつの間に入ったんだろう、、、と思ったのですが、

恐らくショートカットキーを押してしまったものと思われます。

Ctrl + Alt + F

を押すと、フッターの編集モードにいきなりなります。

画面のスクリーンショットを張り付けるため

Windowsキー + Shift + S

を押して

Ctrl ＋　V

という作業をしていたのですが、

Ctrl + Alt + F

と

Windowsキー + Shift + S

のキーが微妙に近い。

急いでいて少し位置がずれて押したことがあったかもしれません。

自分の意図しないショートカットが動いた場合は

リカバリーが大変ですよね。。。

Googleドキュメントの使い方は、Wordが使えていたから特に気にしていなかったのですが、書籍で勉強するのもいいかもしれませんね。

こちらは今であればKindle Unlimited対象なので、気軽に読めますね。

もし似たようなケースでお困りの方がいらっしゃったら参考になれば幸いです。

「pip が動かない」ときの簡単な解決方法(Windows)

 田中賢一郎氏の　Webアプリ開発入門: 3.Firebase編 Future Coders テキスト Kindle版

を読んでいます。

以前、Pythonが動かない、ということでいろいろ詰まったのですが、

無事Pythonは動き出し、pipをインストールするため、以下のコマンドも成功しました。

curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py

py get-pip.py

やっとpipだ！と思って実行します。

pip install --upgrade firebase-admin

すると、、、、

'pip' は、内部コマンドまたは外部コマンド、

操作可能なプログラムまたはバッチ ファイルとして認識されていません。

うーん。また詰まった。

しかし今回は素晴らしいサイトを見つけました。

「Pythonが動かない…」の簡単な解決方法（Windows）

方法としては　pythonではなく「py」を使う　らしく

Python自体が実行できないときも、pipが実行できないときも

解説頂いています。

ちなみに今回は、私は以下のコマンドで実行できました。

py -m pip install --upgrade firebase-admin

途中でワーニングが出ているようでしたが、最終的には成功したのでとりあえず良しとしたいと思います。

今回は素晴らしいサイトのおかげですぐ解決できました。

著者に感謝です。

【OPPO】インストール済みアプリが見つからない場合の探し方

 

久しぶりに行ったお店でポイントカードアプリを出す場合に、

アプリが見つからないときがあり、

店員さんに迷惑をかけてしまいました。

また、地震が起こった時に「Yahoo防災アプリ」も見たいと思ったのですが

すぐに見つからず断念したこともありました。

反省の意味を込めて、アプリの探し方をまとめたいと思います。

※今回は「Yahoo防災アプリ」を例にとります。

インストール済みアプリの探し方

Playストアから探す

Playストアを立ち上げ、検索Boxに探したいアプリ名を入れ検索します。

インストール済みのアプリであれば「開く」が出ています。

※今回は「防災」で検索しました。

この方法の欠点は、インストール済みかどうかわかりずらいこと。

「インストール」と「開く」が同じボタン色です。

また、もし検索キーでもっと有名なソフトがあると、上記のように２番目に探したいアプリが出てくるケースがあります。

まだ２番目だからよかったのですが、もっと人気がないアプリの場合は

最悪見つからない可能性があります。

ＯＳから探す

「設定」「アプリ管理」「アプリリスト」の順に選びます。

アプリ一覧から選んでもいいのですが、下のほうにあると探すのが大変ですよね。

でも大丈夫です。

画面上部に検索キーを入れることができるので、アプリ名の一部を入れると部分一致でも検索できます。

まとめ

ホーム画面のどこに行ったか分からないアプリも

今回の方法を使えば見つけられると思います。

本当はホーム画面から１回の操作でできるようにしたかったのですが、

今のところPlayストア経由かOS経由の２つの方法しかないと思いますが

もしよければ参考にしてください。

【OPPO】ロック画面の時計の縦並び修正方法（2022）

 最近壁紙を変えてないので気分転換したいなーと思って色々いじっていたら、、、

やってしまいました。また時計が縦並びに！

充電しているときのデザインはすごく好きなのです。

画面の下には、丁度充電場所から携帯へ、電気が流れていくようなアニメーション。

画面中央にはチャージされている数字と、元気玉のようなチャージされている感も演出。

でも、見ずらい、、、

直したいと思います。

しかし今回は安心。

なんといっても、自分で以前解決しているのですから、

それを見ながらやればいいだけ。

と、思ったら、、、

設定画面に出ているメニューが違う

恐らくOSアップデートで項目名が変わってしまったのでしょう。

何と勝手なことと、、、

仕方がないので、2022年4月時点での最新OSでどうやるか、再度調べてみました。