masalibの日記

システム開発、運用と猫の写真ブログです

WordPressの勉強 vol.1

現在、WordPressの開発というかデザインの修正をおこなっているのですが そもそもWordPressの構造を理解しておらず、現在どのプログラムが実行されているのかわかりませんでした 勉強しているとテンプレート階層と呼ばれる構造になっていることを知りました

http://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg

実際に実行されているのを確認するには

Query Monitor

というプラグインを入れると 実行されているプログラムがわかるようになりました

早く知りたかった・・・

ちょっとびっくりしたのが SQLのクエリーの回数がわかるみたい

サイトトップだけど

f:id:masalib:20210104194414p:plain

クエリー回数が多いような・・・こんなもの？

2020年の学習について

React

以前にも勉強していたがReduxやクラスコンポーネントが苦手だった。
またマシンが貧弱でビルドや「npm intall」するのにも時間がかかっていた。
ネットのcodesandboxもたまに「create-react-app」で落ちていた。

マシンも購入してビルド時間も短縮されたのでめちゃ勉強しやすい環境になった。
React Fooksはfunctions コンポーネントなので理解しやすい

10月ぐらいからどっぷりReactに入っていった。
2021年もReactを勉強する事になると思う。

まだ完了していないけど次の本（WEBの本）も出したい

zenn.dev

Firebase

これも以前に勉強していたがサービスをつくるレベルにはなっていなかった。
サンプルを動かす程度だった。今回はリファレンスをちゃんと読んで、動かして、アウトプットした。
できれば既存のサービスのログイン処理を短縮できるような提案がしたい。
うちのサイトのパスワードなんて覚えてくれるわけないので、Oauthでログイン仕組みは入れたい

wordpress

会社で使う事になったので勉強する事になった。有料のテーマとかもありなんだけど、テーマの変更ができないと辛いので勉強中。
お作法的なところがまだ理解できておらず、勉強中。
技術的にはあまり魅力的ではないが仕事はあるっぽいのでいいと思う。

動画編集

勉強すればするほど、沼にはまる気分。毎日、動画を投稿している人を尊敬します。

・テロップをだすのにも時間かかるし・・・
・素材の切り取りするのにも時間かかるし

若干、PENDだけど落ち着いたら再開したい

2020年に買ってよかったもの

冷蔵庫

f:id:masalib:20201231181959j:plain

生活感がハンパなくでますが、冷蔵庫を購入しました。それまでの冷蔵庫は20年以上前に購入したものなのでうるさく、そして電気代が高かった。 でもそこまで優先順位は高くなかったので放置していた。 突然、冷凍がまったく冷えない状況になり、そして冷凍も死んだ。

急遽、買いに行く事になり、近くの電気屋のノジマで購入したが 購入した冷凍庫が家に入らない事があとあとになってわかった。 再度、購入しにいってやっとの思いで購入できた。 容量はへったけど、電気代が約50%ぐらいカットされた。そして静かになった。

10万もして辛かったけど本当によかった

ゲーミングマウス

Logicool G ゲーミングマウス 無線 G903h HEROセンサー LIGHTSPEED ワイヤレス 多ボタン LIGHTSYNC RGB POWERPLAY ワイヤレス充電 最長180時間バッテリー 国内正規品

Logicool G ゲーミングマウス 無線 G903h HEROセンサー LIGHTSPEED ワイヤレス 多ボタン LIGHTSYNC RGB POWERPLAY ワイヤレス充電 最長180時間バッテリー 国内正規品

  • 発売日: 2019/06/27
  • メディア: Personal Computers

APEXゲームのために購入したが、自分の手が小さかったので相性が悪くだめだった。 でも普段の使いには最強だった。普段は机に猫がのるので有線にしているとマウスの場所がなくこまっていたが 無線のゲーミングマウスを購入してからどこでも配置できるので本当によかった。 無線なら何でもよかった疑惑もあるが後悔はない。 2万もしたが・・・

Z-V1

ソニー Vlog用カメラ VLOGCAM ZV-1

ソニー Vlog用カメラ VLOGCAM ZV-1

  • 発売日: 2020/06/19
  • メディア: Camera

定額給付金で購入しました。前々から気になっていた一眼レフなのですが、ガチ勢ではない私には高かった。 手軽に一眼レフ風の画像が取れればよかった。そんな私にぴったりなカメラがZ-V1だった。

背景ボケモードはマジで神！！

猫を撮っても、背景をぼかさなくてもボケています。 がんばればyoutubeも撮れるので時間があったら撮りたい。 他の人も言っているけどこの商品の唯一の残念なところはusbがタイプCじゃない事。 私はそこまで重い動画（4K）をとらないけど、それでもパソコンに転送する時に時間がかかる。 もし4kの動画をとったら転送に時間がかかる。本当にその部分は残念。SDメモリカードで転送するのが早いのかな

定額給付金があったため、いつもより高いものを購入した。来年はmacのm1が一番高いのかな

画像のEXIF情報をもとに自動回転を一括でおこなう

とある作業で画像を直接ファイルサーバーにアップするとう事をおこなった。 管理画面でみると何故か、縦画像が横になっていたりした。

調べてみると撮影した写真には内部的には傾いた状態になっていた。 傾きはEXIFのOrientation情報として保存されているがブラウザによって このEXIFのOrientation情報を反映するか無視するかで対応がまちまちです。 （今回の画像はPCのchromeでも反映されなかった。）

f:id:masalib:20201229111826g:plain

http://www.impulseadventure.com/ より引用

対応について

外部サービス（https://cloudinary.com/）でも対応する事ができたが、枚数が2500枚もあったため諦めた。

コマンド

jpegtranというコマンドラインツールでOrientationを戻す事ができる事がわかった

https://jpegclub.org/jpegtran/で jpegtran.exeのリンクを押すとダウンロードされる

手順としては

freesoft-100.com

のツールでEXIFの設定値を出力する

その内容をもとに

jpegtran -rotate 90 -outfile 000001.jp 000001.jp
or
jpegtran -rotate 180 -outfile 000001.jp 000001.jp
or
jpegtran -rotate 270 -outfile 000001.jp 000001.jp

のコマンドを作る

GUI

だが・・・・これをもし企画担当者の人にお願いした時にできるだろうか・・・と考えた

・・・・無理

GUIのツールでできないのかと調査した結果、たどり着いたのが 「Honeyview」だった

複数のファイルを選択して変換を選択するだけだった

f:id:masalib:20201229112048p:plain

f:id:masalib:20201229112324p:plain

超ー簡単！！これなら企画担当者もできる

問題点

この「Honeyview」はたぶん中国のソフトです。 もし中国嫌いの人は遠慮した方がいいです。 一応、スパイウェアやウィルスとかは入っていない事は確認しました

GTMでjavascripを実行

Reactのお仕事をしたくてランサーズを見ていたらjavascriptがあった

https://www.lancers.jp/work/detail/3332844

依頼内容は以下のとおりです

当方がユーザーとして利用している予約システムで、エンドユーザーが完了契機に到達したタイミングで、指定されたURLにソケット通信でHTTPリクエストを送信できる仕組みを開発したいです。

□補足１
予約システムの完了画面はソースコードを操作できないため、「完了契機に到達したタイミング」で任意のスクリプトを実行する場合は、GTMの利用が必要です。

□補足２
もし、当方の希望要件がGTMのみで実現できない場合は、GTMで自社サーバー（レンタルサーバー）にリダイレクトをかけ、リダイレクト先でポストバックを実行することも検討しています。

■開発言語
可能であれば、JSの開発（補足１）を優先的に検討いただける方をお探ししています

実際には受けていないのですが勝手に想定してお仕事をやってみました

前提として

  • 「完了契機に到達したタイミング」がURLで判別できるとしました。POSTのパラータで判別する場合はもう少し複雑になるかと思う
  • 送信するサーバー側はCORSの設定はやっている。アフィリエイトの会社がこの設定をやっていないとは考えられないのですが・・・

作業としては大きく２つ

  • GTMのトリガーにコンバージョンURLを設定する
  • GTMのタグにカスタムHTMLを設定して、その中にjavascripを設定する

の２つになります

トリガーを設定

  1. タグマネージャーのタグのメニューで新規を押す
  2. トリガーの設定画面がでるのでトリガータイプをページビューに設定する
  3. 一部のページビューを選択する
  4. Page URLに該当のURLを設定する

カスタムHTMLにjavascripを設定

タグマネージャーのタグのメニューで新規作成を押す

カスタムHTMLを選択して下記のjavascripを貼り付ける

<script>
console.log("test tag start")
  
fetch('https://jsonplaceholder.typicode.com/todos/1').then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});  

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
}).then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});

  
</script>

ちなみにECMASCRIPT6(es2015)じゃないと動かないみたい・・・

This language feature is only supported for ECMASCRIPT6 mode or better: arrow function.

エラーがでたのでbabalでトランスパイラしました

Babel · The compiler for next generation JavaScript

変更前

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

変更後

fetch('https://jsonplaceholder.typicode.com/todos/1').then(function (response) {
  return response.json();
}).then(function (json) {
  return console.log(json);
});

感想

タグマネージャーってECMASCRIPT6(es2015)なのね・・・

FirebaseのupdatePasswordとupdatePasswordが仕様変更？

現在、Zenn.devの本を記入しています。

zenn.dev

本にする事なのでもう１度、プログラム入力をしてテストしています。 メールアドレス変更とパスワード変更をおこなう処理を作っているのですが

  • updateEmail(state.email)
  • updatePassword(state.password)

を同時にやるとエラーになる

以下のエラーになる

the user's credential is no longer valid. The user must sign in again

単品ならエラーにならない。

マジかよ～

どうしよう・・・修正しないといけない

１ヶ月前はできたはずなんだよ。 参考にしたソースも同じようにしているんだよ

github.com