Posts

上位を目指してみるなんて言ってみたが、現状（12月11日）本サイトをGoogleに認識されていない。 助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱 色々、調査中である（12月12日にインデックスされ解決した）。 で、調査中において、MicrosoftのBing Webmaster Toolsが非常に便利だったので、ぜひとも後世に残しておきたい。 Bing Webmaster Toolsとは？ Bing Webmaster Tools Bing Webmaster Toolsアカウントを使用すると、検索最適化計画（SEO）を非常に簡単に開始できます。ウェブマスターツール内では、SEOセクションの下に、バックリンクの調査、キーワードの調査、サイトや個々のURLのSEOエラーの分析などのタスクに役立つツールのリストが表示されます。 SEOレポートは、アカウントで確認したドメインで隔週で自動的に実行されます。したがって、月に約2回、SEOで対処する必要のある項目に関する提案を含む最新のレポートが表示されます。 つまりbingの検索エンジンで上位に来るように色々調査できるというもの。 つまりつまり、サーチコンソールのbing版というもの。 登録方法は割愛中 登録方法とかは別に難しいこともないので割愛する。 １つアドバイスとすればサーチコンソールを先に登録したほうがいい。 なぜかというと、Bing Webmaster Toolsはサーチコンソールのデータを引き継ぐことができるのである。 つまり、サーチコンソールに登録しておけばBing Webmaster Toolsに登録するのが楽になる。 で、何が優秀なのか 話を戻すことにして、優秀な機能の１つとしてサイト スキャン機能がある。 これはサイトのエラーや警告を通知してくれるのである。 seo > サイト スキャン > 新しいスキャンを開始 で、調査が始まる。 後はメールで通知してくれるので、待つだけである。 結果は非常にわかりやすい。 Meta Description タグがありません 画像がない場合の Alt 属性 Meta robots タグに制限付きのロボット ディレクティブが含まれています タイトルが長すぎます Meta Description が長すぎるか短すぎます こんなに具体的に教えてくれるので、修正もしやすい。 サーチコンソールとは違ってわかりやすい サーチコンソールだとこうはいかない。 サーチコンソールは漠然としたことしか教えてくれない。 「検出 - インデックス未登録」みたいな感じで、どうしてそうなったのかを教えてくれないのである。 それに比べて「Bing Webmaster Tools」は丁寧なこと、この上ない。 もちろん、この丁寧に教えてくれるエラーを解消したところで、「検出 - インデックス未登録」が直るわけではないのだが、人間全くわからないよりはすこしでも分かっている方が、落ち着くのである。 そういう意味でも「Bing Webmaster Tools」は技術だけでなく、心にもいいツールであると言える。

コメント投稿機能が表示されない ブロガー朝のルーティン 朝起きてから自身の予約投稿した投稿が、無事に公開されているか確認する。 そんなブロガーであり、目覚めの悪い私が驚き飛び起きたのには訳がある。 コメント投稿欄が非公開になっていたからである。 11月、機能追加したコメント投稿機能がうまく動作していなかったのかしら、と他ページを見てみたところ、どうやら問題なく表示されている。 どうしてこのページだけ、投稿機能が動作しないのか。 長いバグ修正の旅に 長い長い、そして結論はいたってシンプルであったバグ修正の旅に出る。 まずは同じ現象が起きているページを探してみる。 結果、2ページが該当した。 該当したのは下記ページ（現在は正常に動作中なので、コメントください）。 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した nove月次報告書（2021年11月）-初月の収益を公開- この２つにはいくつかの共通点があった。 ひとつは、カテゴリが「メディア」であるということ。 ひとつは、今月機能追加で採用したショートコード管理プラグインが動作しているということ。 そこでふたつの共通点を順に調査していくことに。 カテゴリが関係しているのか まず、カテゴリについて実験してみる。 他の記事をメディアカテゴリに移管する→投稿機能は無事に動作している。 該当記事を他のカテゴリに移管する→投稿機能は変わらず表示されない。 つまり、カテゴリは今回のバグに関係ない。 プラグインが関係しているのか 次にショートコード管理プラグインを疑ってみる。 この時点で私は相当このプラグインを疑っていた。 だからプラグインなんて採用するものじゃない、なんて悪態すらついていた。 そんな心境でデバックを開始する。 まずはプラグインを無効にしてみる→該当ページの投稿機能は変わらず表示されない。 他の記事に上記プラグインを使用してショートコードを挿入する→投稿機能は無事に動作している。 該当ページにあるショートコードの記述を削除してみる→投稿機能は変わらず表示されない。 つまり、プラグインは問題ない。 そもそも評価4.1かつ多くの人が使用しているプラグインを疑うくらいなら自身の作成したテーマを疑うべきである。 というわけで、自作テーマを見返したが、どうにも原因となる部分は見つからない。 解決編 そこでいろいろ調べていると、 ダッシュボード > 投稿 と移動し、 該当する投稿の「クイック編集」で「コメントを許可」にチェックを入れてみてください。 という記述を見つけた。 まさか、と思い上記手順で確認してみたところ、どうしてか知らないが、チェックが外れている。 唖然としつつ、チェックをいれ、再度ページを見ると、無事にコメント機能が動いていた。 また、つまらぬことに時間を割いてしまった、なんて内心解決にほっとしている気持ちを隠しつつ、ハードボイルドに言ってみたりする。 共通点ある、なんてどっかの私立探偵のみたいなセリフは何も生み出さなかった。

以前、reactをインストールする方法を書いたが、今日（2021年12月22日）急にインストールができなくなった。 react でプロジェクトを作成する You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/ というエラーが出てくる。 なにうえ、と調べるといくつかヒットした。 キャッシュを消せとか、色々出てきたので、検索して試してみるといいと思われる、が。 私にはどの方法もうまくいかなかった。 で、結局うまくいったのは…下記の通り。 これが正解…？ npx clear-npx-cache C:\Users\{name}\AppData\Roaming\npm-cache 削除 npm init npx create-react-app myapp これが正解なのだろうか。...

コピペは決して悪じゃない エンジニアはとにかくコピペをするべきである、って新卒で入ったウェブ制作会社で言われたのは、もう6年も前。 少しややこしい言い方をしたが、ロジックも含めてコピペをするわけじゃなくて、単語とかをコピペしろ、っていう意味で言われた。 確かに、デバック中にスペルの抜けで動いてないことを知った時、エンジニアは皆、般若のような顔になる。 つまりとても理にかなっている。 理にかなっているので、実践してきた。 例えば、event 時に実行する関数は、 対象の要素.addEventListener(種類, function() { // 処理を記述 }, false); というコードをクリップボードに保存して使う。 これならスペルミスも生まれないし、時短にもなる。 が、がしかし、である。 かっこいいエンジニアになりたい 最近、まあ、6年近くウェブに携わってきたので、後輩に教えることが多くなってきた。 「わかりません」と呼ばれ、後輩の机に移動する。 「あー、これね、こんなの簡単よ」ってどや顔し、いざパソコンと向き合った時、わかる、わかるのだが、スペルがわからない。 「ごめんだけど、アドイベントリスナーってググってくれない？」 「え、あどいべんとりすなー？」って後輩に聞き返される。 なんて、恥ずかしい思いはしたくない。 そう思うならコピペを辞めるのも手じゃなかろうか。 私はコピペを辞めました。 以来、だれのパソコンでもすらすらと日本語を書くように、というと言い過ぎだが、コードを書けるようになった。 前述したが、コピペは全く悪じゃない。 コピペエンジニアと言われている人たちがいるが、あれはロジックを理解せずに使っているエンジニアで、スペルミスを防ぐためにコピペをしているのはコピペエンジニアではない。 ただ後輩の前でかっこつけたいのであれば、なるべく手を動かし書くべきだと思う。 結果、たまに般若のような顔を後輩に見られることになるかもしれないが。

defaultの有無 export default で書き出した値は、中括弧なしでimport できる。 export で書き出した値は、中括弧ありでimport する。 そしてさらに少しややこしくなるが、export で書き出した値は { xxx as yyy } とすることで任意の変数名に変えることができる。 とのこと。 参考：ES2015のモジュール機能(import/export) 実際に動かしてみた 上記の参考とまんまだが、実際に動かしてみた。 export default "uchida hyakken"; export const firstNaMe = "hyakken"; export const lastName = "uchida"; import name, { firstNaMe, lastName } from "./export"; console.log("name", name); // name uchida hyakken console.log("firstNaMe", firstNaMe); // firstNaMe hyakken console.log("lastName", lastName); // lastName uchida 下に小さくあるconsole ボタンを押して見ていただければ成功していることが確認できる。 うん、動かすことで理解が深まった。 export / import を使いこなすことで、ファイル管理を楽にしていこう。