WordPressの勉強 vol.1
現在、WordPressの開発というかデザインの修正をおこなっているのですが そもそもWordPressの構造を理解しておらず、現在どのプログラムが実行されているのかわかりませんでした 勉強しているとテンプレート階層と呼ばれる構造になっていることを知りました
http://wpdocs.osdn.jp/wiki/images/wp-template-hierarchy.jpg
実際に実行されているのを確認するには
Query Monitor
というプラグインを入れると 実行されているプログラムがわかるようになりました
早く知りたかった・・・
ちょっとびっくりしたのが SQLのクエリーの回数がわかるみたい
サイトトップだけど
クエリー回数が多いような・・・こんなもの?
2020年の学習について
React
以前にも勉強していたがReduxやクラスコンポーネントが苦手だった。
またマシンが貧弱でビルドや「npm intall」するのにも時間がかかっていた。
ネットのcodesandboxもたまに「create-react-app」で落ちていた。
マシンも購入してビルド時間も短縮されたのでめちゃ勉強しやすい環境になった。
React Fooksはfunctions コンポーネントなので理解しやすい
10月ぐらいからどっぷりReactに入っていった。
2021年もReactを勉強する事になると思う。
まだ完了していないけど次の本(WEBの本)も出したい
Firebase
これも以前に勉強していたがサービスをつくるレベルにはなっていなかった。
サンプルを動かす程度だった。今回はリファレンスをちゃんと読んで、動かして、アウトプットした。
できれば既存のサービスのログイン処理を短縮できるような提案がしたい。
うちのサイトのパスワードなんて覚えてくれるわけないので、Oauthでログイン仕組みは入れたい
wordpress
会社で使う事になったので勉強する事になった。有料のテーマとかもありなんだけど、テーマの変更ができないと辛いので勉強中。
お作法的なところがまだ理解できておらず、勉強中。
技術的にはあまり魅力的ではないが仕事はあるっぽいのでいいと思う。
動画編集
勉強すればするほど、沼にはまる気分。毎日、動画を投稿している人を尊敬します。
・テロップをだすのにも時間かかるし・・・
・素材の切り取りするのにも時間かかるし
若干、PENDだけど落ち着いたら再開したい
猫2020
Z-V1になってちょっとかわいく撮れるようになった気がする
きなこちゃん
にゃーちゃん
しかちゃん
ああ・・・こんなかわいい猫に囲まれて暮らす・・・これ以上の幸せはないです。
2020年に買ってよかったもの
冷蔵庫
生活感がハンパなくでますが、冷蔵庫を購入しました。それまでの冷蔵庫は20年以上前に購入したものなのでうるさく、そして電気代が高かった。 でもそこまで優先順位は高くなかったので放置していた。 突然、冷凍がまったく冷えない状況になり、そして冷凍も死んだ。
急遽、買いに行く事になり、近くの電気屋のノジマで購入したが 購入した冷凍庫が家に入らない事があとあとになってわかった。 再度、購入しにいってやっとの思いで購入できた。 容量はへったけど、電気代が約50%ぐらいカットされた。そして静かになった。
10万もして辛かったけど本当によかった
ゲーミングマウス
APEXゲームのために購入したが、自分の手が小さかったので相性が悪くだめだった。 でも普段の使いには最強だった。普段は机に猫がのるので有線にしているとマウスの場所がなくこまっていたが 無線のゲーミングマウスを購入してからどこでも配置できるので本当によかった。 無線なら何でもよかった疑惑もあるが後悔はない。 2万もしたが・・・
Z-V1
定額給付金で購入しました。前々から気になっていた一眼レフなのですが、ガチ勢ではない私には高かった。 手軽に一眼レフ風の画像が取れればよかった。そんな私にぴったりなカメラがZ-V1だった。
背景ボケモードはマジで神!!
猫を撮っても、背景をぼかさなくてもボケています。 がんばればyoutubeも撮れるので時間があったら撮りたい。 他の人も言っているけどこの商品の唯一の残念なところはusbがタイプCじゃない事。 私はそこまで重い動画(4K)をとらないけど、それでもパソコンに転送する時に時間がかかる。 もし4kの動画をとったら転送に時間がかかる。本当にその部分は残念。SDメモリカードで転送するのが早いのかな
画像のEXIF情報をもとに自動回転を一括でおこなう
とある作業で画像を直接ファイルサーバーにアップするとう事をおこなった。 管理画面でみると何故か、縦画像が横になっていたりした。
調べてみると撮影した写真には内部的には傾いた状態になっていた。 傾きはEXIFのOrientation情報として保存されているがブラウザによって このEXIFのOrientation情報を反映するか無視するかで対応がまちまちです。 (今回の画像はPCのchromeでも反映されなかった。)
http://www.impulseadventure.com/ より引用
対応について
外部サービス(https://cloudinary.com/)でも対応する事ができたが、枚数が2500枚もあったため諦めた。
コマンド
jpegtranというコマンドラインツールでOrientationを戻す事ができる事がわかった
https://jpegclub.org/jpegtran/で jpegtran.exeのリンクを押すとダウンロードされる
手順としては
のツールで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」だった
複数のファイルを選択して変換を選択するだけだった
超ー簡単!!これなら企画担当者もできる
問題点
この「Honeyview」はたぶん中国のソフトです。 もし中国嫌いの人は遠慮した方がいいです。 一応、スパイウェアやウィルスとかは入っていない事は確認しました
GTMでjavascripを実行
Reactのお仕事をしたくてランサーズを見ていたらjavascriptがあった
https://www.lancers.jp/work/detail/3332844
依頼内容は以下のとおりです
当方がユーザーとして利用している予約システムで、エンドユーザーが完了契機に到達したタイミングで、指定されたURLにソケット通信でHTTPリクエストを送信できる仕組みを開発したいです。
□補足1
予約システムの完了画面はソースコードを操作できないため、「完了契機に到達したタイミング」で任意のスクリプトを実行する場合は、GTMの利用が必要です。□補足2
もし、当方の希望要件がGTMのみで実現できない場合は、GTMで自社サーバー(レンタルサーバー)にリダイレクトをかけ、リダイレクト先でポストバックを実行することも検討しています。■開発言語
可能であれば、JSの開発(補足1)を優先的に検討いただける方をお探ししています
実際には受けていないのですが勝手に想定してお仕事をやってみました
前提として
- 「完了契機に到達したタイミング」がURLで判別できるとしました。POSTのパラータで判別する場合はもう少し複雑になるかと思う
- 送信するサーバー側はCORSの設定はやっている。アフィリエイトの会社がこの設定をやっていないとは考えられないのですが・・・
作業としては大きく2つ
- GTMのトリガーにコンバージョンURLを設定する
- GTMのタグにカスタムHTMLを設定して、その中にjavascripを設定する
の2つになります
トリガーを設定
- タグマネージャーのタグのメニューで新規を押す
- トリガーの設定画面がでるのでトリガータイプをページビューに設定する
- 一部のページビューを選択する
- 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の本を記入しています。
本にする事なのでもう1度、プログラム入力をしてテストしています。 メールアドレス変更とパスワード変更をおこなう処理を作っているのですが
- updateEmail(state.email)
- updatePassword(state.password)
を同時にやるとエラーになる
以下のエラーになる
the user's credential is no longer valid. The user must sign in again
単品ならエラーにならない。
マジかよ~
どうしよう・・・修正しないといけない
1ヶ月前はできたはずなんだよ。 参考にしたソースも同じようにしているんだよ