react でプロジェクトを作成する

react をインストールする 参考:Create React App npx create-react-app my-app-name 上記のコマンドで react が自動でインストールされる。 ※そんなことしないと思うが、「my-app-name」を「react」にすると怒られ、インストールできないので注意。私は何も考えずにそうして、無事に怒られた。 cd my-app-name 次にインストールしたディレクトリに移動する。 npm start で、ローカルホスト(http://localhost:3000/)が開かれる。 これだけで、reactのアプリが起動する。 起動だけを考えるとvue より楽かもしれない、vueはいろいろと選択する必要があるので。 まずはソースを覗き見る この時点で表示されているのは App.js のようで、 import logo from './logo.svg'; import './App.css'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p>Edit <code>src/App.js</code> and save to reload.</p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >Learn React</a> </header> </div> ); } export default App; 該当ソースがこんな感じで、Javascriptを使用してhtmlを吐き出している? 正直、ぱっと見だとvue のtemplate構文のほうが見やすい気がする。 まあ、少しづつ、慣れていく。

投稿日 · 2021-12-11 · 更新日 · 2024-06-07 · 1 分 · nove-b

サブドメインでアドセンスに申請したので、実況中継する。

おっかなびっくりアドセンス申請 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した 先日お伝えした通り、本ブログもアドセンスに申請を出した。 アドセンスの申請はなかなかハードルが高く、落ちるか、受かるかわからない。 そこで、どのような状況で審査に出し、どういった経緯で、どういう結果になったか記しておく。 申し込んだときの状況は? 実際に申し込み時の状況を記載しておく。 サイト開設:2021年11/23(土) 申請日:2021年12/04(土) 申請時の記事数:11記事 アドセンスに受かる必須条件 ちなみにアドセンス申請条件として下記が言われている。 独自ドメインの利用が必須 総記事数は最低でも10本以上 1記事あたりの文字数は、1000文字以上 1日に100PV程度が必要 実際は定かじゃないが、多くの記事で言及されているので、あながち間違いじゃないと思われる。 本ブログの条件通過具合 本ブログの状況を上記条件と照らし合わせてみる。 独自ドメインの利用が必須 → ok(エックスサーバーの無料キャンペーンで取得済) 総記事数は最低でも10本以上 → ok(11記事) 1記事あたりの文字数は、1000文字以上 → ?(9/11で1000文字越え、平均:1649文字) 1日に100PV程度が必要 → ok(平均:122.5pv) 軒並み基準は超えていると思われる。 1点、文字数で超えていない記事もあるが平均で見ると余裕で超えている。 さらに記事に関しては最大3682文字の記事まである。 JavaScriptを使用してWordPressの投稿に目次を挿入する ただ上記はコードも含まれているので、純粋な文字量で言えば、 転職で失敗しないために気を付けるポイントまとめ 上記記事が2321文字で最多、かつ実体験を通しての記事なので、それなりにユーザーのニーズに合っているだろう。 とはいえ不安は拭えない ということで、基準はクリアしているのだが、不安な点もある。 心配なのがGoogleのクローラーがまだ本ブログに未訪問なこと。 サイト開設から時間があまりたっていないこと。 本ブログがサブドメインで運用されていること。 の3点があげられる。 上記の悩みは他記事でも書かせていただいた。 助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱 アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した さあ、果たして合格するか、否か。 随時更新していく所存である。 12月11日(土曜日)1週間経過 音沙汰がない。 どうしたことだろうか。 登録時のメールには、 チェックが完了すると、アカウント有効化の状況を記載したメールが届きます。通常、審査は数日で終了しますが、2 週間ほどかかる場合もあります。 と書いてある。 つまり、数日で終わらない場合、何らかの問題がある可能性がある? まだインデックスも来ないし、それが影響しているのだろうか? 助けて‼「検出 – インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの😱 12月12日無事にインデックスされたので、上記記事にその過程を付け加えた。 つまり、以降の経過はインデックスは関係ないと思われる。 12月18日(土曜日)2週間経過 何の反応もない。 インデックスだって、それなりにされてきた。 が、連絡がこない。 流石におかしいということで、お問い合わせフォームから連絡をしてみた。...

投稿日 · 2021-12-09 · 更新日 · 2024-06-07 · 1 分 · nove-b

【解決】助けて&#x203c;「検出 - インデックス未登録」とか文句言ってGoogleがなかなかインデックスしてくれないの&#x1f631;

Googleのクローラーが来ない ブログを始めたのが 2021年11月23日 で現在(2021年12月6日)24個のURLを持つサイトになった。 友人とふたりで特に縛りなく、楽しく更新しているので、割といいペースで記事投稿ができるいると思うのだが、アクセスが伸びない。 原因はわかりきっている。 Googleのクローラーが来てくれないのである。 「検出 - インデックス未登録」 サーチコンソールで確認すると「検出 - インデックス未登録」のURLが24件、ずらっと並んでいる。 つまり、すべてのURLが「検出 - インデックス未登録」とのことらしい。 さて、「検出 - インデックス未登録」とはいったいなんなのか。 答えは、クローラーがサイトマップ(sitemap.xmlやfeedなど)やリンクを通してページの存在を把握しているが、インデックスはまだしていないというステータスのこと。 前述したが、クロール待ちとのこと。 「クロール済み-インデックス未登録」とは似て非なる 同じような状況で「クロール済み-インデックス未登録」という状態もある。 こちらも似たようなステータスだが、実は全く異なるステータスで、クローラーが内容を見た上で「インデックスしない」と判断された状態のことをいう。 「価値なし」という烙印を押されたページのことである。 このことを知り、少しほっとしたが、とはいえ、クロールが来ないのは困る。 誰かに読まれたく、ブログを書いているのである。 小説家になれない私たちはネット世界の片隅でこそこそとブログを書くしか、表現の場がないのである。 ちなみに本ブログを共有している ふたみくんはいまだに小説家を夢見ているらしい……、 小説新人賞に応募するまでの道のり ~新人賞の選び方~ 実をいえば私もまだ夢を見ているが、そのことは別記事で語ることにする。 話をもとに戻して続ける。 Googlebotがストライキ中だ! 調べてみると、どうやらこの状況(検出 - インデックス未登録)良く見られるようで、一説によると2021年5月のアップデートで何らかの事象が起きたのではないか、とのこと。 5月から情報が出回り始め、11月には多くのサイトでその影響を受けることになったらしい。 https://twitter.com/Seolyzer_io/status/1460255741860847633 訳: Googlebotがストライキ中だ! Googlebotは11月11日午後6時以降、多くの大規模サイトでクロール活動を大幅に縮小している。これは議論が必要だ! なんて、ツイートが出回るほど。 さらに、Googleのジュン・ミューラー氏もこの現象を認め、現在調査をしているとのこと。 ブログによっては、 クロールは17日遅くから戻りつつあるよう と書いてあったが、定かではない。 現にこのブログにはまだ来ない。 つまり、現状世界的なクローラー不足だと思われる。 私たちはただ待つしかない。待つしかない。 12月10日 現在(謎が深まる) 変わらず、「検出 - インデックス未登録」のまま。 唯一の変更は記事数が増えたので対象URLが27件になったことだけで、当然追加されたURLだって「検出 - インデックス未登録」になってしまっている。 徐々にindexされ始めているというが、ストライキ中に登録した記事は再クロール対象外だろうが。 あるいは公開後、間もないのでクロールの優先順位が低いのか。 この現象に気が付き、今日まで、毎日のようにリクエストしてきたが、意味がないようだ。 初手サブドメインに問題があった? サーチコンソールだが、サブドメインでの細かいデータを見たかったので、URL プレフィックスで登録した。 その後、ドメインプロパティでも同様に登録した。 で、ドメインプロパティの方を見るとどうやらクローラーが訪れてきているようである。 本サイトはトップドメインも「https://media.nove-web.com」にサーバーリダイレクトしているので、そこに来ているのであればクローラーは認識しているってこと? リダイレクトするからいいやと思ってindex.htmlに何も書かなかったせいか、 重複しています。ユーザーにより、正規ページとして選択されていません...

投稿日 · 2021-12-08 · 更新日 · 2024-06-07 · 1 分 · nove-b

クラシックエディタでリンク挿入ボタンがうまく機能していなかったので、原因を調査した

クラシックエディタのリンク挿入ボタンがうまく機能していない 公開から少し経ち、ブログを投稿する機会が増えるにつれ、気が付き始めたことがある。 クラシックエディタのリンク挿入機能がうまく機能していないという点が、その1つ。 調べてみるとクラシックエディタがうまく機能しなくなるバグはよくあることらしい。 プラグインが原因? 調査結果によると多くはプラグインを起因とするものらしく、特定のプラグインを無効化すれば直ったという声をよく見た。 しかし、こういう事態に備えて、プラグインを最小限に抑えている。 とは言え入れていないわけではないので、ひとつひとつ無効化してテストしてみた。 Classic Editor 無効化したが効果が見られず。 というより、そもそもこのプラグインを無効化したら意味がない。 Highlighting Code Block エンジニアの味方。 ブログでコードを簡単に見せることができるプラグイン。 無効化したが効果が見られず。 XML Sitemaps 動的にサイトマップを作成してくれるプラグイン。 無効化したが効果が見られず。 結果、原因はプラグインではない。 functions.phpにいけない記述があるのかしら。 ということで、functions.phpをまるっと削除してみたところ、正常に稼働した。 細分化してエラーの原因を探すと、どうやらビジュアルエディターにcssを当てる記述が悪さをしているとのこと。 書かれたソースがこちら。 // 投稿ページにスタイルを充てる function wpdocs_theme_add_editor_styles() { add_editor_style('パス'); } add_action('admin_init', 'wpdocs_theme_add_editor_styles'); もしやエディタを読み込む関数が非推奨になったのかしらなんて思い、 add_editor_style('パス'); シンプルに記述方法を変えてみたが、変わらず正常に稼働しない。 ついに、原因解明 まさかと思いつつ、ということで読み込んでいるcssの内容をまるっと削除すると、正常に稼働。 そこでトライ&エラーと消しては確認を繰り返すとついに発見。 原因はaタグに指定された「display: contents ;」…! 確かシンプルにリンクにアイコンをつけたくて記述した箇所だが、現状はもう使用してない不要な箇所。 自身が使うエディタのみだから削除を忘れていた。 そして原因はまさかのCSSだった。 無駄な記述は自身の首を絞める 今回の教訓として心に刻むことにした。 せっかくなので、 display: contents ; 理解を深める 表示のスタイルとエディターのスタイルを一元管理する 上記2つを課題として自らに課すことにした。

投稿日 · 2021-12-06 · 更新日 · 2024-06-07 · 1 分 · nove-b

アドセンスでサブドメインが使用できなかったので、ルートから301リダイレクトして対処した

アドセンスに申し込む 記事も10記事たまったので、いったんダメ元でアドセンスに申し込もうと思い立った。 過去に1年間続いたブログではそれなりにアドセンスからの収入があった。 当時は本の感想ブログで、本なんて売れないし、アフェリエイトよりも効率良くアドセンスは収入があったので、なんとしても入れたい。 サブドメインが使用できません で、よし、いざ、と腰を上げると、なんとサブドメインが使用できないとのこと。 本サイトは何を隠そうサブドメインなので、腰を上げた瞬間に座り込んだ。 ブログはサブドメインと言った自分の計画性のなさにうんざりする。 が、なんとしてもアドセンスやりたい。 そこで実現のために2つの方法を考えた。 アドセンスをサブドメインで申請する2つの方法 ルートドメインで新規構築 1つはルートドメインでサイトを構築する。 現状はロゴが真ん中にあるだけのサイトになっている。 アドセンスの審査は厳しいので、それだと落ちるに違いない。 落ちないようにするために、それなりのサイトを作成する必要がある。 当然、自身の労力もかかれば、時間もかかるので、この方法は現実的じゃない。 301リダイレクト 2つ目はルートドメインからサブドメインに301リダイレクトをする方法。 301リダイレクトとは「サーバー側の永続的なリダイレクト」のことで、Google曰く、 検索エンジンの結果に表示されるページの URL を変更する必要がある場合は、可能な限りサーバー側の永続的なリダイレクトを使用することをおすすめします。これは、Google 検索とユーザーを確実に正しいページに導くための最善の方法です。ステータス コード 301 と 308 は、ページが別の場所に完全に移転したことを意味します。 とのこと。 つまり、Googleはリダイレクト先を見てくれるようになる。 これの方が簡単かつシンプルなので、こちらの方法を採用することにした。 301リダイレクトを使用しサブドメインでアドセンス申請 301リダイレクトは .htaccess をいじる必要がある。 でも本ブログで使用しているエックスサーバーでなら管理画面で簡単にできるので、そちらを使用することにした。 リダイレクトが繰り返し行われました 作業は簡単でサーバーパネル > サイト転送設定 > ドメインを選択 > リダイレクト設定追加 > リダイレクト先を追加するだけなのだが、実行すると、 ********でリダイレクトが繰り返し行われました。 というエラーがでた。 なぜ、という思いで調べてみるとサイト転送設定(リダイレクト設定) | レンタルサーバーならエックスサーバーに答えが書かれていた。 指定のURLへリダイレクト設定が可能です。 ※サブドメインを含む、同一ドメインのURLにはリダイレクト設定はできません。 同一ドメイン内でリダイレクト設定を行う場合は、.htaccessファイルで設定してください。 なるほど、エックスサーバーは本当に親切でありがたい。 どうせなら設定できるようにしてくれるともっとありがたいのだが、現状で相当親切にしてもらているのでそんなことは言えません。 とても親切なので、広告リンクを貼ってあげる。 [sc name=“exserver_all_unlimited” ][/sc] .htaccessをエックスサーバーの管理画面で編集する 話を元に戻して――、ということで .htaccessをいじることに。 ただこれもFTPとか使うことなくエックスサーバーなら簡単にできる。 サーバーパネル > .htaccess編集 > ドメインを選択 > ....

投稿日 · 2021-12-05 · 更新日 · 2024-06-07 · 1 分 · nove-b