5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

投稿者: muneando

  • 国勢調査の報酬が出たのでChromebookのLenovo Ideapad Duetを買った話し

    こちらの話しの続き

    国勢調査の報酬が出たことだし、経済を回せということで、いろいろなものを年末に買っています。その一つとして、勢いでChromebookのLenovo Ideapad Duetを買いました。

    購入したのは、アマゾンではなくヨドバシ.comで、ストレージが128GBのモデルです。注文した当日発送、翌日到着でした。

    セットアップはChromebookだから簡単と思いきや、Googleアカウントの二段階認証で引っかかりました。スマートフォンにコードを送られて来るようですが、いくら待っても送られてきません(実際は相当時間が経ってコードを送ってきた)。

    仕方ないので、yubikeyで認証しました。USBの口がType-Cで刺さらないので、Pixel4についていたType-Cの変換コネクタを使ったらうまく認証できました。こんな感じになりました。

    認証できてGoogleアカウントに入ってしまえば、あとは簡単にインストールできます。パスワードマネージャーをセットアップしておけば、アプリケーションやWebサービスの設定も捗ります。

    ChromebookはLinuxが動くのですね。というか、Linuxの上でChromebookが動いているのか。まあ、どっちでもいいかもな。

    ということで、Visual Studio Codeもインストールしてしまいます。Googleさんに尋ねると、いろいろ教えてくれますが、参考にしたのは、次のサイトです。中には古い情報がありますので注意しましょう。

    日本語入力については、以下のサイトを参考にしています。

    本当なら、Macbookのように「かな」キーでIMEオン、「英数」キーでIMEオフのようにして、通常のWindowsのように「半角/全角」キーでIMEのトグルをしたくありません。UbuntuでしたらMozcで設定できるのですが、IMEのキーバインドの方法がわかりませんでした。最低限ATOK風のキーマップの設定までやっておきました。

    Gitも使えるので、社内のGitlabからリポジトリをクローンできます。あとは、node.jsをインストールして、npm run startでSCSSの変換もできますので、本ブログのテーマを修正できるようにしておきました。VS Codeの上では、ほとんどChromebookであるという意識がなく、普通のPCと同じ使い方ができそうです。

    このタブレットに近いものとして、iPadを持っているのですが、こちらのChromebookのほうが使い勝手は楽です。Chromeがきちんと動くのがいいですね。iPadでもChromeは動くのですが、動きが微妙のところがあって、結局Safariにしてしまいます。そうすると、便利なChromeの拡張機能が使えないということなります。

    Chromebookの場合は、Chrome以外にAndroidのアプリも動きますが、中には動かないものもあります。代表的なのはATOKでした。

    ATOK(Passport)はインストールはできるのですが、キーボードの設定のところから有効にしようとするとグレーになっていて有効になりません。しかたないですね。Windows10のPCと同様にGoogle日本語入力にしてます。

    Androidのアプリをイントールしてもいいのですが、なるべくChromeでできるサービスは、PCに合わせてChromeのほうがよさそうです。例えば、Gmailとかは、Chromeで使ったほうが便利に思えます。

    ChromebookのLenovo Ideapad Duetを一日使ってみた感想ですが、Chromebookも悪くないなという感じです。小さなLinuxが使えるキーボード付きの電話が使えないスマフォといった感じでしょうか。

    モバイルでノートPCを持ち出すことなく、このChromebookのLenovo Ideapad Duetでも大丈夫そうです。Chromeの上で使っている限りでは、ほぼPCの作業と同じです。

    ただし、残念だったのは、持ってみると意外と重量があるな、ということでした。それと厚みもあります。私の場合、現物を見ずに買ったので、実際に買われるのであれば、現物を見てから買われることをお勧めします。「軽さは正義!」って、自慢できないのは辛いところです。Lenovoも Ideapad Duet以上に、軽くてサクサク動くChromebookを作ってくださいね。

    以上、Lenovo Ideapad Duetでこの記事を書いていますが、特に問題なく、画像も挿入できますし、文章も入力(キーボードが多少打ちにくいですけど)できました。

    最後の教訓。

  • WordPressのTwenty Twenty-Oneテーマの子テーマをダークモードに対応させた話し

    WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話しの続きの話しです。ダークモードに対応させてみました。

    しかし、Wordpressの管理画面でダークモードをOnにすると、子テーマのstyle.cssの前に親テーマのstyle.cssが出現してデザインが元に戻ってしまいます。他に親テーマのstyle.cssが登録しているところが見つかりませんので、おかしな動作です。

    おかしいとも言ってられないので、親テーマのstyle.cssの後に子テーマのstyle.cssが来るようにします。こちらのサイトを参考にしました。

    変更したのはfunction.phpのところです。

    function theme_enqueue_styles() {
    	wp_enqueue_style( 'child-style',
    		get_stylesheet_directory_uri() . '/style.css', array( 'twenty-twenty-one-style' ) 
    	);
    	wp_enqueue_style( 'child-dark-style',
    	get_stylesheet_directory_uri() . '/assets/css/style-dark-mode.css', array( 'tt1-dark-mode' ) 
    	);
    }
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

    最初のwp_enqueue_style()の第3引数に親テーマのIDを指定して、style.cssの順番を明示的に指定しています。2番めのwp_enqueue_style()がダークモードのCSSです。

    これで、ダークモードに対応できましたが、本来ならば親テーマのstyle.cssは必要ないので読み込むのも無駄ですし、どうして最初に動かなかったかは不明です。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • WordPressのTwenty Twenty-Oneのテーマのページナビゲーションの翻訳がおかしいので修正した話し

    気になると修正箇所が出てくるWordpressのTwenty Twenty-Oneのテーマですが、ページナビゲーションの表示がとてもおかしいので修正してみます。

    こんな感じでページ番号の頭に「固定ページ」が追加されて表示されてしまっています。

    「固定ページ」って何でしょうか? このページナビゲーションを表示しているファイルは、/inc/template-tags.phpのようです。以下のthe_posts_pagination()で表示しています。

    the_posts_pagination(
      array(
        /* translators: There is a space after page. */
        'before_page_number' => esc_html__( 'Page ', 'twentytwentyone' ),
        'mid_size'           => 0,
        'prev_text'          => sprintf(

    しかし、’before_page_number’プロパティの’Page’が「固定ページ」と翻訳ファイルとリンクされているようで、おかしな表示になっています。

    そこで、’before_page_number’プロパティを削除して、シンプルにページ番号で表示させるようにします。ついでに、前後のページ番号を3つ表示するように変更してしまいます。修正した結果は以下のようになります。

    the_posts_pagination(
      array(
        /* translators: There is a space after page. */
        'mid_size'           => 3,
        'prev_text'          => sprintf(

    最初、子テーマに変更した/inc/template-tags.phpを作ってあげても、その変更は反映されませんでした。いろいろ探ってみると、行き着いたのは以下のサイトです。

    the_posts_pagination()を定義している関数twenty_twenty_one_the_posts_navigation() をfunction.phpに追加してあげればいいようです。function.phpに追加した結果は、以下の通りとなりました。

    以上のように、まともで見やすいページナビゲーションとなりました。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

  • WordPressのTwenty Twenty-Oneテーマを子テーマに対応させた話し

    このブログはWordpressのTwenty Twenty-Oneのテーマを使っています。Twenty Twenty-Oneのテーマは見出しが異常に大きいとか、細かい所で惜しいバグがあるとかありますので、いろいろとカスタマイズしています。

    最初は、子テーマでの対応の方法がわからなくて、外観のCSS編集でCSSの上書きをしましたが、いろいろ大変で心が折れました。次にTwenty Twenty-OneテーマのSCSSを直接修正していましたが、Twenty Twenty-Oneテーマがアップデートするたびに元に戻ってしまいます。そこで、何とか子テーマでの対応をしてみました。

    最初に参考にしたサイトは、次のサイトです。

    そのものずばりのタイトルなのですが、このままコピペしてみると、親テーマのTwenty Twenty-Oneテーマのstyle.cssが優先になって子テーマのほうのstyle.cssを適用してくれません。

    今回は、親テーマのTwenty Twenty-OneテーマのSCSSを子テーマにコピーし、そのSCSSを編集してstyle.cssを生成していきますので、親テーマのTwenty Twenty-Oneテーマのstyle.cssは不要となります。

    そこで、親テーマのTwenty Twenty-Oneテーマのfunction.phpにある

    wp_enqueue_style( 'twenty-twenty-one-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
    

    を無効にしなければいけません。この文をコメントアウトすればいいのですが、これではwenty Twenty-Oneテーマがアップデートしたときに、また元に戻ってしまいます。

    おそらく、CSSの適用はWordpressではキューに入れてからまとめで、HTMLファイルに出力しているようですので、だったらキューから該当するCSSを登録しているキューから削除してしまえ、ということと勝手に理解しました。

    そこで、wp_enqueue_style()関数の反対の動作をする関数を探します。

    関数リファレンスの関連項目からwp dequeue script()という関数を目星をつけます。

    しかし、単純に

    wp_dequeue_style( 'twenty-twenty-one-style');

    とやっても、Twenty Twenty-Oneテーマのstyle.cssが追加されたままです。いろいろ調べてみると、次に見つけたサイトは以下のサイトです。

    イベントを実行するキューには当たり前ですが順番があります。キューを実行する優先順位を指定してあげないといけないようです。

    最後に、以下のようなコードをfunction.phpに書いてあげると、親テーマのTwenty Twenty-Oneテーマのstyle.cssを出力せずに子テーマのstyle.cssだけをHTMLの<head>に書き出してくれるようになりました。

    function theme_enqueue_styles() {
      wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css'
      );}
    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    
    function remove_enqueue_parent_style() {
      $name = 'twenty-twenty-one-style';
      if( wp_style_is( $name ) ) { wp_dequeue_style( $name ); }}
    add_action( 'wp_enqueue_scripts', 'remove_enqueue_parent_style', 11);

    add_action()の第3パラメータの”11”が今回の記事の肝です。このパラメータが優先度で、デフォルトが”10”ですので、優先度が低くなりますのでこちらが最後に実行されます。デフォルトのwp_enqueue_scriptsイベントより早く実行されると、上書きされて追加されたままになります。

    これで、親テーマのTwenty Twenty-Oneテーマがアップデートされても、子テーマを適用している本ブログには影響がなくなりました。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    続きはこちらから

  • WordPressのグーテンベルクの再利用ブロックが、ブロック追加でたまに表示できなくなった話し。今は解決している話し。

    現在、さくらインターネットで本ブログを運用していますが、いろいろ障害が出ています。

    障害というのは、必ず発生するのであれば原因を特定しようがあるのですが、たまに発生するというのは意外と厄介です。出るときと出ないときがあって、特にたまたま出るというのは何ともしがたいのです。

    たまにInternal Server Errorが出ると、ずっと言ってきて、ああでもないこうでもないと対策を取ってきましたが、なかなか解決はしません。今度は、Gurtengergの編集画面で、再利用ブロックが表示できなくなっていました。

    正常ならば、左上のブロック追加の+アイコンを押すと、再利用可能というタブが出てくるのですが、いくら待っても出てこないことがあります。

    正常な状態。だけど、Wordpressのアイコンが表示していないのもおかしい

    何回かブラウザで更新をしてあげると、再利用ブロックのタブが出てくれることがあります。何回かというのも定かではありません。これは気まぐれです。

    もし、既に再利用ブロックが記事内に挿入されているのであれば、うまく再利用ブロックのプレビューが表示できていません。

    こんな感じで再利用ブロックが真っ白なままです。こちらも、何回かブラウザの更新をしてあげると、まともにプレビューをしてくれることがあるので更新ボタンを繰り返し押します。

    おそらくサーバーのメモリが足りないとかの原因だとは思いますが、さくらインターネットのサーバーが悪いのか、こちらのWordpressのサイトが悪いのか、はたまたこちらのネットワークが悪いのか、今のところ断定ができません。断定できないとなると、さくらインターネットのサポートに連絡して手間をかけることもできません。

    とりあえず、しつこくブラウザの更新をすればサーバーが機嫌が良ければ治る、という曖昧な回避策があるので何とかやっているのですが、さてこれからどうしましょうか???

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記

    ChromeのConsoleを見ると、エラー出ています。この辺りが怪しいかもしれません。

    エラーの内容からWordpressのサイトにログインしているけど、ログインできていないようなエラーのような気がします。ログインできていないから、再利用ブロックの取得ができないということかもしれません。

    いずれにしても、今のところ解決策はありません。

    追記2

    今インストールしているWordpressのプラグインを無効にしたり有効にしたりしましたが解決せず、もしかしたらということで、Gurtengergのプラグインをインストールしてみました。Gurtengergプラグインをアンインストールしたのは、再利用ブロックが10個以上表示できなかったのでアンインストールしていました。

    Gurtengergのプラグインをインストールしたところ、再利用ブロックが表示できるようになりました。だけど、必ず再利用ブロックが表示できるとは限らないというものも痛いところです。まだまだ、Gurtengergは不安定なところが残っているのでしょうか?

    しかも、再利用ブロックは正常に10個以上表示できていますGurtengergのプラグインをインストールしていなくても、今までどうしてGurtengergが使えていたのは、今となってはわかりません。

    何だかWordpressというCMSは、よくわからなくなりました。

    追記3(2021年2月3日)

    最近になって、また再利用ブロックが表示しなくなった。今度は確実に再利用ブロックが表示できない。

    この記事を書いた間にGurtengergのバージョンが何度かアップされたので、それが原因なのか、それともさくらインターネットのサーバーが原因なのか?

    さくらインターネットのコンソールからエラーログを見ると、

    End of script output before headers: index.php

    というエラーが出ていた。

    End of script output before headers さくら WordPress

    でGoogleさんに聞いてみると、ファイルのパーミションを確認しろと出てくるが、確認しても問題ない。

    今のところ原因不明である。おそらくサーバーだな。

    追記4(2021年11月30日)

    最近になって再利用ブロックが表示しなくなることが多くなった。ブラウザで再読み込みをすると直ったけど、今は全く直らない。

    また再度Googleさんに聞くと、こんな情報が上がっていた。

    https://soublog-goodluck.com/teach-how-to-solve-problem-of-wordpress/

    別のブラウザを使ってみるか、ブラウザの履歴を削除すると直るらしい。そんな単純なことで直るの? って思って試してみた。

    普段使っているのはChromeだけど、Edgeで試しみた。何と、再利用ブロックが表示できた。なんとことだろう・・・。

    次にChromeの履歴を削除してみた。履歴を削除すると再ログインしなければいけないサービスがあるから面倒くさいからやりたくないけどやってみた。なんと、再利用ブロックが表示できるようになった。

    そんなことで今まで悩んでいたことが解決した。対処方法は意外と簡単なことなのね。

    追記5(2021年12月1日)

    今日になって再利用ブロックを記事に追加したいと思っても表示できなかった。Chromeで再利用ブロックの挿入はできないみたい。いちいちブラウザの履歴を削除したくない。Edgeだと再利用ブロックの表示ができるので、WordPressで記事を書くときはChromeではなくてEdgeで書かなくてはいけないな。

    Chromeでの再利用ブロックのトラブルの話題は、そんなに聞かないので、自分のところだけのトラブルかもしれないな。

    追記6(2022年3月30日)

    あれから1年以上経っていますが、現在はChromeだろうがEdgeだろうが再利用ブロックの一覧を取得できません。本当にたまに表示してくれます。履歴をクリアしてもダメです。

    しかも、カテゴリー一覧が表示してくれないとか、タグも一覧表示してくれないとかもあります。こちらは表示してくれるほうが多いので、まだ致命的な障害にはなっていません。

    おそらくさくらインターネットのデータベースサーバー周りと睨んでいますが、確証はありません。そろそろさくらインターネットの新しいサーバーがはじまるようなので、こちらに期待してもし改善されなければ移行を考えなければいけません。

    追記7(2022年7月13日)

    こちらのWordpressのグーテンベルクの再利用ブロックの一覧が表示できない問題は解決しました。結局は、さくらインターネットのサーバーが原因でした。さくらインターネットがサーバーをアップデートしてくれたおかげで、問題なく再利用ブロックの一覧が表示できるようになりました。

    今まで対応してきた時間を返してほしいと、さくらインターネットに言いたい!

  • さくらインターネットのレンタルサーバーでInternal Server Errorが出る件は、All in One SEO Packを削除したら直ったかも、でもまだ直っていないかも、どちらなの、という話し

    ずっと本ブログサイトで出ていたInternal Server Errorが出る件は、ようやく落ち着いてきました。原因は、All in One SEO Packプラグインのようでした。

    “ようでした”というのは、All in One SEO Packを削除してから、Internal Server Errorが出なくなくなったというだけで、本当にAll in One SEO Packが原因がどうかはわかりません。単純にInternal Server Errorが出るからって、All in One SEO Packを削除すればいいとは限りません。

    どうしてAll in One SEO Packを何でインストールしたかというと、Bing Webmaster Toolsでたくさん

    説明がページのヘッド セクションにありません。

    と怒られたせいで、それで<meta name=’description’ を付けようということになって、面倒なのでAll in One SEO Packプラグインでやってしまえ、ということでインストールしました。後は、キレイにTwitterに投稿した記事を共有できるということです。

    All in One SEO Packプラグインを削除することにすると、<meta name=’description’ を違う方法で付けてあげなければいけません。Twitterの共有については、共有できていればいいだけですので放っておきます。descriptionのほうは、以下のサイトを参考に、Wordpressのfunction.phpでプログラムで生成してあげるようにします。

    そのまま利用するのではなく、適当に本ブログで必要なcontent=””を生成しています。

    しかしながら、All in One SEO Packは重いプラグインと言いながら、これでInternal Server Errorを出すようなさくらインターネットのレンタルサーバーはいかがながものでしょうか?

    さくらインターネットのレンタルサーバは、WordpressのAll in One SEO PackプラグインでSEOをバリバリやるのであれば、使わないほうがいいような気がします。自分のような、適当なブログサイトなら問題ないかもしれません。

    でも、そんなことを言うのなら、もっと金を払ってスペックの高いサーバーを契約しろ、というところでしょうか。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2020年12月22日)

    相変わらず、まだInternal Server Errorはたまに出ています。All in One SEO Packプラグインが原因ではないのかな? たまにエラーが出るくらいなので、サイトの運用には問題ないレベルだから、放っておいてもいいレベルなのかな?

    その他、WordpressのテーマをTwentyTwenty-oneにしたりキャッシュのプラグインを見直したりで、アクセスがだいぶ速くなったし、よくわからない。さくらインターネットのレンタルサーバーで共有している他のユーザーのサイトに、アクセスが集中しているのだったらしょうがないな。

    昔のことを思い出したけど、Wordpressはさくらインターネットのレンタルサーバーの機能を使ってインストールした覚えがある。これでWordpressのインストールや設定がしくじっているとかだと辛いかもな。

    さくらインターネットから別のレンタルサーバーに移行するのも面倒だし、どうしてものやら・・・。

    続きはこちらから

  • FreeNASが動いているHPのMicro Serverにメモリを増設した話し

    こちらの話しの続き。

    FreeNASが動いているHPのMicro Serverのメモリが、表示4GBで心もとないので増設した。

    メモリ増設前
    メモリ増設前

    4GBだと、ほぼ空きエリアはない状態である。システムと同じくらいにZFSをメモリを使っていることがわかる。

    購入したメモリは、下記のこれである。HPのMicro Serverは、4GBという制限があるらしいけど、DDR3なら動くという情報もあるので、大丈夫だろうと楽観的に考えた。

    メモリの交換方法は、下記のサイトと参考にする。以前にHPのMicro Serverのマザーボードを取り出したことがあるけど、そんなに頻繁にやるようなことではないので忘れた。

    メモリを交換して無事に認識できて、空きエリアはこのようになった。

    メモリ増設後
    メモリ増設後

    だいぶメモリの空きが増えた。

    SambaをLinuxサーバーのインストールしてファイルサーバーとして動かすよりも、サクッとQNAPを入れてしまったほうが簡単、安心、便利でおすすめ。ファイルサーバーだけではなくてIntelのCPUのQNAPなら、Dockerでいろいろとコンテナを設定してサーバーをたくさん立てられるしね。

  • 祭りが終わった、このブログのアクセス数の話し

    WordPressのJetpackにあるサイト統計情報を見て楽しんでします。

    今週は一気にアクセス数が伸びました。こんな感じです。

    何が原因かというと、以下の投稿をたくさん読まれたためでした。

    どうも、該当する迷惑メールが、再度届いているようで、皆さん気になって「商業オファー」で検索してくるようでした。

    何も考えずにメールのリンクをクリックするよりも、一旦気持ちを落ち着けて検索するのはいいことだと思います。間違っても、こんなメールのリンクをクリックしてはいけません。その前に、メールを開けないように削除してしまったほうがいいです。

    しばらくすると、また落ち着いて元のアクセス数に戻ります。アクセス祭りは、すぐに終わります。

    著:一般社団法人 日本ダイレクトメール協会
    ¥3,240 (2025/03/16 19:06時点 | Amazon調べ)
    WAVE出版
    ¥1,650 (2025/03/19 06:53時点 | Amazon調べ)
  • さくらインターネットのレンタルサーバーでInternal Server Errorが出るようになったので、WordPressのテーマをTwenty Twenty-Oneにしてみた話し

    このWordpressで動いているブログにアクセスすると、Internal Server Errorが出るようになってしまいました。必ずInternal Server Errorが出るのではなく、たまに出るのが痛いところ。

    サーバーのエラーログを見てみると、

    End of script output before headers: index.php

    が出ています。これは、index.phpのパーミッションを変更すればいいそうです。

    しかし、これでは解決しませんでした。相変わらず、Internal Server Errorがでます。今回も忘れたときに、たまに出るのは嫌な感じです。

    さくらインターネットのサポートに聞いてもいいのですが、どうせ「ユーザー固有のトラブルだから対応しない。」とか言われそうなので、自力で解決しなければいけません。もし、自力で解決できなければ、他のレンタルサーバーに移るしか手はなさそうです。

    次にやってみたのは、Wordpressのテーマを新しいTwenty Twenty-Oneに変更してみました。現在はTwenty Twentyを使っていますが、最近のWordpressはGutenbergに対応しに行っているので、なるべくGutenbergに対応した新しいテーマをしたほうがよさそうです。そこで、最新のWordpress謹製のテーマであるシンプルなTwenty Twenty-Oneにしてみました。

    Twenty Twenty-Oneは、日本語のサイトにすると、見出しの文字の大きさとか、モバイルのメニューの表示とか、若干気に入らないところがありましたので、CSSを追加して上書きしておきました。シンプルで良さげなテーマです。

    Twenty Twenty-Oneにしたおかげで、サイトのページの表示スピードが早くなりました。およそ、メインのHTMLファイルが1桁ほど速くなっています。今まではキャッシュに入っていても遅かったので、これはTwenty Twenty-Oneにして良い効果です。

    肝心のInternal Server Errorは、今のところ出ていません。しばらく、様子を見ていきます。

    次に調べなければいけないのは、Wordpressのプラグインでしょうね。

    著:久保田涼子, 著:西原礼奈, 著:阿諏訪聡美
    ¥2,399 (2025/03/19 15:43時点 | Amazon調べ)

    なんやかんやでWordPressのサイト構築で躓くのは、PHPのプログラミングなのでした。

    追記(2020年12月19日)

    さくらインターネットのレンタルサーバーのコンソールから、エラーステータスはだいぶ減っているが、依然多い。エラーログでもだいぶ減っている。

    Google Search Consoleで、相変わらずLCP の問題: 4 秒 超(パソコン)が大量出ている。これは、今回のテーマをTwenty Twenty-Oneにして、なくなることを期待している。

    Twenty Twenty-Oneでの表示を最適化するために、CSSを追加しているが、本来ならばSASSでCSSをTwenty Twenty-Oneでは実現しているので、SASSを修正していかなければいけない。しかし、WP-SCSSプラグインではエラーが出てコンパイルできなかった。

    12/19/20 12:36:13: style.scss - function is not a number: line: 96
    12/19/20 12:36:13: style-editor.scss - function is not a number: line: 96

    こちらは原因不明である。でも、SCSSファイルを修正していったほうが楽であるので、なんとかしなければいけないな。

    ローカルでSCSSからCSSへのコンパイルできるようにしなければいけないかもしれない。ただ、Twenty Twenty-OneでのSCSSの@importを使った外部SCSSファイル命名が通常とは違うので、いろいろと厄介そうだ。今のところ、VS Code + Easy SASSでのコンパイル環境では、うまく行っていない。

    今気がついたが、Twenty Twenty-Oneのテーマでは、Wordpressの編集画面で再利用ブロックのタブが表示できてこない。これは致命的なバグである。もしかしたら、自分のところだけか?

    一度、編集画面から抜けて、もう一度編集画面に入ってら、今度は再利用ブロックのタブが表示できるようになった。

    追記(2020年12月19日)

    Twenty Twenty-OneのSCSSのCSSのコンパイルは、Twenty Twenty-Oneのディレクトリにpackage.jsonがあったので、npm iでいろいろインストールが始まってコンパイルの環境が構築できた。npm run start でコンパイルの監視ができるが、いろいろエラーが出力される。エラーが出ても、きちんとSCSSからCSSにコンパイルできたので気にしない。

    さくらインターネットのInternal Server Errorが発生する件だが、相変わらずエラーが出る。たまに、スタイルシートが読み込めないとかになるので、多分さくらインターネット側のサーバーの問題なのだろう。

    さくらインターネットのサポートに問い合わせる前に、All In One SEO Packとか重そうなプラグインを無効にしてみよう。問い合わせは、それからだ。

    追記(2020年12月20日)

    Twenty Twenty-OneテーマのSCSSからCSSにコンパイルするときにchokidarでSCSSファイルの更新を監視しているのだが、こちらのスクリプトでエラーが出ている。

    "build:stylelint": "stylelint **/*.css --fix --config .stylelintrc-css.json"

    .stylelintrc-css.jsonなしのlint:scssのスクリプトであれば、正常に動作して構文チェックをしてくれる。.stylelintrc-css.jsonの設定ファイルが怪しそうである。stylelintは、よくわからないので、package.jsonのscriptsから削除しておく。何かSCSSの構文エラーがあったので、こちらは対応しておく。

    しかしながら、Twenty Twenty-Oneテーマがアップデートされたら、修正したSCSSファイルが上書きされるのだろうな。子テーマで実現しようしたら、子テーマのCSSが読み込めないというトラブルがあったのでやめた。Wordpressの管理画面の外観のCSSの編集で、CSSを上書きするようにしていたけど、SCSSになってglobal.scssにある値を編集してコンパイルされたstyle.cssをアップしたほうがいろいろ変更するには簡単である。何かテーマを編集するのに、最適な方法があるのだろうか?

    続きはこちらから

  • Emergency dayの結果と、その検討結果の話し

    一日、メインのPCが壊れて使えなくなった、あるいはWindows Updateが失敗して起動できなくなったことを想定して、別のPCで作業できるか検証しました。

    結果的には、特に問題なく作業を継続できました。これでメインのPCが故障しても、そのまま作業を続行できます。

    どうして問題なかったというと、私のPCの使い方から以下が考えられす。

    データはローカルに格納されていても、すべてクラウドストレージで同期が取れていたこと。

    一番大きかったのが、これに付きます。私の場合は、作業で必要なデータファイル(文書など)をすべてDropboxに置いて、すべてのクライアントと同期を取っていました。もちろん、すべてのファイルをDropboxに置くのは無駄ですので、作業に必要なものだけど置いています。クライアントによってはディスクの容量が少ないものがありますので、この場合は必要なファイルだけを選択して同期を取っています。

    クラウドストレージにファイルを同期することでバックアップにもなります。もし、クライアントのPCのハードディスクが故障しても、再度Dropboxから同期をすれば、ファイルのリストアになります。

    以前は、ファイルサーバーでリモートドライブとしていましたが、Dropboxの場合、ネットワークのオフラインでローカルにファイルがありますので、どこでも作業できるのも魅力です。このおかげで写真(もっとも写真は、Google Photoに格納していますが)などの大容量のファイル以外では、ファイルサーバーを使用しなくなりました。

    ソースファイルはGitのリモートリポジトリに格納していたこと。

    肝心の仕事の成果物であるソースファイル(仕様書も含め)は、すべてGitでバージョン管理するようにしていました。そしてGitlabをインストールしてリモートリポジトリの管理をしています。ソールファイルの取り出しは、どこでもGitlab経由でGitでクローンかプルしておけば、最新の成果物を取得して開発を開始することができます。

    クライアントPCは必要なアプリケーションをインスールするだけにしておく。

    データは外部から取得すると言っても、必要なアプリケーションはインスールしておく必要があります。まとめて必要なアプリケーションをインスールする機能でもあれば、もし、PCが故障して使えなくっても、短時間で復旧することができるかもしれません。

    しかし、そんなにPCが故障するということもないので、この辺りはその都度インスールしていくということでいいのでしょう。


    以上、みなさんも万が一使っているPCが壊れても影響がないかとうを知るためにも、一度Emergency dayを設けてテストしてみてはいかがでしょうか。慌てる前のなんとやら・・・。

    マイクロソフト
    ¥15,000 (2025/03/17 10:32時点 | Amazon調べ)
    マイクロソフト
    ¥21,490 (2025/03/21 12:50時点 | Amazon調べ)

    自作PC用に一番左のWindows11のパッケージを実際に購入しましたが、問題なくインストールできました。Windowsは使うPCの分だけ正しくライセンスを購入しましょう。