【jQuery】下スクロールで消えて、上スクロールで再表示するヘッダーメニュー

下スクロールで消えて、上スクロールで再表示する
ヘッダーメニューをjQueryで実装します。

HTMLを

<div class="header">
  <div class="menu">
    <div class="inner">sample text</div>
  </div>
</div>

CSSを

.menu {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    transition: 1s;
}
.menu.hide {
    transform: translateY(-50px);
}

50pxの高さのメニューを50px上に移動させて隠す、という動きにしています。

jQueryを

$(function() {
    var pos = 0;
    var header = $('.menu');
    $(window).on('scroll', function() {
        if ($(this).scrollTop() < pos) {
            header.removeClass('hide');
        }
        else {
            header.addClass('hide');
        }
        pos = $(this).scrollTop();
    });
});

下スクロールでhideを付けて隠し、上スクロールでhideを削除して再表示するという挙動にしています。

参考:https://www.esz.co.jp/blog/2885.html

【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【Tools】パソコン用モニター(EIZO ColorEdge CS2420-Z)

2022年に購入したものの中ではベストバイかもしれない。
もっと早く買っていれば良かったと後悔するほど。

パソコン用のモニターとして憧れのEIZO!
EIZO ColorEdge CS2420-Zを購入して使っています。

EIZO ColorEdge CS2420-Z

本当はUSB-C一本で繋げられるものが良いかな?と思いましたが、金額がグッと上がってしまうので…
HDMI接続のものにしましたが、特に不便なこともなく使えています。

仕事的には印刷物は扱わないので、EIZOのモニターはオーバースペックなのかもしれませんが、
とにかく目の負担が少ない。

そういう意味でももっと早くに買っておけば良かったなと本当に後悔するほど良い買い物でした。(高いけど…)

【Tools】仕事用の椅子(イームズのアルミナムチェア)

仕事用の椅子は
イームズのアルミナムチェアを使っています。

イームズのアルミナムチェア

仕事用の椅子は10万20万するような高いものも多いですが、
確かに長時間座るものなので人間工学に基づいた良いものを使ったほうが身体には良いのかもしれませんが、
一方で人間工学に基づいていて身体への負担が少ないが故に長時間働けすぎてしまうという弊害もあるのでは?と友人デザイナーが言っていました。

そんなこんなで独立するにあたって、どんな椅子を買おうかと考え、

金額・デザイン性・機能性

この3つをポイントに探しました。

最新の10万20万するような椅子は機能性は高い反面、その分サイズも大きく重量も重くゴツくて取り回しが悪く
(人によるかもしれないけど)デザイン性は決して良いとは言えないかな?と個人的に…

機能性も、最新の身体に負担が少ない反面、働けすぎてしまうのも困ったもので、最新より、長年使われているものが良いもので、人間にあっているのだという考え方も出来るかな…と

そうなるとリプロダクト(ジェネリック)など価格を抑えつつ、
機能性・デザイン性両面を求められるな…
と行き着いたのがイームズのアルミナムチェアになります。

ハイバックのメッシュタイプのものを使っています。
個人的には、敢えてアーム部分やキャスターは付けずに使っています。

楽天のコチラで購入し、
3~4年ほど使っていますが今のところ特に問題なく使えています。

座面もメッシュなのは身体を包み込むような感覚は良いものの
脚の接地面積が大きいためか下半身への血流を圧迫するような感覚を個人的には感じます。(特に夏)
無印良品の座布団キルティングシートクッションは中綿の密度も高く、接地面積を軽減してくれ座り心地が良くなるので組み合わせて使っています。
無印良品キルティングシートクッション

チャールズ&レイ・イームズ アルミナムチェア[メッシュタイプHi_21A] オフィスチェア DAIVA

参考書籍:イームズを読み解く: 図面からわかった、その発想とデザイン

【Tools】最強のテキストエディター(EmEditor)

個人的に最強のテキストエディターはEmEditorだと思っている。

普段使っているので、このブログを書き始めたので
オススメツールとして改めて紹介しようと久しぶりにサイトを見てみたら…

https://jp.emeditor.com/

EmEditor

永久ライセンス4万円超えなのね…

サブスク全盛時代とは言え、なかなかのお値段…(サブスクだけじゃないのは救いとも言えるかもだけど…)
私が使い始めたのが10年以上前で、その時は永久ライセンス1万もしなかったので
「超お得」だったのですが、4万は…なかなか簡単に「オススメ」ですとは言えないけど…

今、履歴を調べたら4000円だった…だいぶ安いな…
使い始めたのは2009年くらいで永久ライセンス買ったのが2010年だった…
12年13年か…

【Tools】Qi対応モバイルバッテリー(AUKEY PB-Y25)

10,000mAhの小さめのモバイルバッテリーが壊れてしまったので
先日、購入し直した。(10,000mAhより少し小さい8,000のmAhもの)

Qiはまだまだ充電性能などイマイチだから
あまり期待していなかったのですが、実際に使ってみると
充電のためにケーブルを持ち歩かなくて良いのでとても便利!

5Wと充電スピードはそれほど早くないものの
バッテリーとスマホをぴったり重ねていれば充電できるので
ボタンをダブルクリックして重ねて充電状態になったら、ポケットに入れておけば問題なく充電できる。

モバイルバッテリーへの充電もマイクロUSBからでもUSB-Cからでも出来るので汎用性も高い。
(USB-Cは出力も可能)

個人的改善ポイントは
パススルー(充電しながら)Qi充電出来たら完璧だったかな?

QI対応 モバイルバッテリー PB-Y25

Qi対応モバイルバッテリー(AUKEY PB-Y25)

2022.12.25現在の価格が1,549円と2,000円以下なのも嬉しいところ。

容量: 8000mAh / 29.6Wh
テクノロジー: USB Power Delivery 2.0, Qualcomm® Quick ChargeTM 3.0, Adaptive Charging
バッテリータイプ: リチウムポリマ
Micro-USB 入力: 5V 2A
USB-C 入力(Power Delivery): (Power Delivery 2.0) DC 5V 2A, 9V 2A
USB-C 出力(Power Delivery): (Power Delivery 2.0) DC 5V 3A, 9V 2A, 12V 1.5A
USB 出力1: (Adaptive Charging) DC 5V 2.4A
USB 出力2: (Quick Charge 3.0) DC 5V–6V 3A, 6V–9V 2A, 9V–12V 1.5A
ワイヤレス充電: 5W
総出力: 18W
寸法: 147 x 75 x 14mm
重量: 198g

【CSS】効率的なコーディング作業03(セレクタ用の英語化)

CSSを書く際、セレクタの命名に時間がかかってしまう場合が
多くあります。

その原因のひとつに、セレクタに日本語が使えないからということもあるかと思います。
(日本語をローマ字に置き換えて…ということは可能ですが。)

そんなときはGoogleスプレッドシート
自動翻訳機能で英語化すると便利です。

一行目にそれぞれ訳したい言語を記入します。
今回は「日本語を英語に翻訳」なので、それぞれjaenを記入します。

二行目以降は…
各要素をdivで囲ったBOXの内容を要約し
A列に日本語を記入していきます。

英語を表示したいセル(B列)に下記のように
=IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")を記述します。

   A B
1 ja en
2 最新ニュース =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"")

if文の最後のほう$A$1ja$B$1enを指していて、
A2(最新ニュース)をja(日本語)からen(英語)に
訳しなさい…という指定になっています。

一行作成しておけば、2行目3行目はコピペで日本語の部分だけ
変更していけば、自動で英語に翻訳していってくれます。

【CSS】効率的なコーディング作業02(CSSの圧縮と整形)

CSSを手打ちで書いていくと、癖や非効率な記述や記述揺れなども多く発生します。
そのままでもブラウザでの表示には問題ありませんが、
少しでもコードをキレイにしておきたいものです。

CSSの圧縮や整形を活用することで、
効率的にコードを一定の状態に保てます。

エディターの標準機能や拡張機能などでも実現できますが、
Webサービスで簡単に出来るもの。

探すといくつかありますが、
以下のものが使いやすいと思います。

■CSSの圧縮
https://syncer.jp/css-minifier

■CSSの整形
https://lab.syncer.jp/Tool/CSS-PrettyPrint/

圧縮は全コードを一括ではなく、
ブロックごとにコピペを繰り返していくとメンテナンス性を保つことが出来ます。

整形は全てをまとめてコピペで大丈夫です。

効率的なコーディング作業01(CSSのアウトライン生成)
生成したCSSだと使わない空のセレクタもあるので、これも削除せずそのまま整形すると

div {
}

div {}

こうなるので{}をエディターで検索して
空の行を削除していくと不要なコードを除けます。

【CSS】効率的なコーディング作業01(CSSのアウトライン生成)

HTMLを記述して、そのコードを下記のサイトにコピー&ペーストして
CSSのアウトラインを生成することができます。

OneClickCSS

私の場合は「Childrens CSS」を使います。
下記のHTMLを貼り付け「Childrens CSS」ボタンをクリック。

<div class="box">
  <img src="./photo.jpg" alt="test photo" class="photo">
  <p class="txt">text sample text sample</p>
  <p class="cmt">comment sample comment sample</p>
</div>

下記のようなCSSが生成されます。

div.box {
}
div.box img.photo {
}
div.box p.txt {
}
div.box p.cmt {
}

エディターでdivを削除していくと余分なコードを省けます。

.box {
}
.box img.photo {
}
.box p.txt {
}
.box p.cmt {
}

場合によってはimgpも削除しても良いです。
(残しておいたほうがHTMLの構造が分かりやすい場合もあります。)

セレクタの命名にdivを含めない(例:diveやdivingなど)ようにしておくと、divを一斉置換で削除でき、より効率的なコーディング作業が実現できます。

【WordPress】記事詳細ページに関連記事一覧のリンクを設置

記事詳細ページに関連記事一覧のリンクを設置する方法。

下記のコードで同じカテゴリーの記事を呼び出します。

<?php
  $categories = get_the_category();
  $category_ID = array();
  foreach($categories as $category):
    array_push( $category_ID, $category -> cat_ID);
  endforeach ;
  $args = array(
    'post__not_in' => array($post -> ID),
    'posts_per_page'=> 3,
    'category__in' => $category_ID,
    'orderby' => 'rand',
  );
  $query = new WP_Query($args); 
?>

posts_per_pageが記事の取得件数になります。「3」を「5」に変更すると最大5件表示されます。

記事のカテゴリーが複数選択されている場合、「AもしくはB」で取得されます。(AとB両方)

'orderby' => 'rand','orderby' => 'date','order' => 'DESC',に変更すると新着順、'orderby' => 'date','order' => 'ASC',にすると古い順になります。

orderbyのパラメータは、その他にも以下のようなオプションがあります。

date 投稿日時による並び替え(デフォルト)
title タイトルによる並び替え
name スラッグによる並び替え
modified 最終更新日時による並び替え
parent 親投稿のIDによる並び替え
rand ランダムに並び替え
comment_count コメント数による並び替え
menu_order メニュー順による並び替え(ページの場合のみ)
meta_value カスタムフィールドの値による並び替え
meta_value_num カスタムフィールドの数値値による並び替え

下記のコードで関連記事一覧のリンクを書き出します。(設置したい場所に、表示したいHTMLで設置する。)

<?php if( $query -> have_posts() ): while ($query -> have_posts()): $query -> the_post(); ?>
  <a href="<?php the_permalink() ?>">
    <?php the_title(); ?>
  </a>
<?php endwhile; else:?>
  <p>関連記事はありません</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

実際にこのページにも設置しているのでご確認ください。(HTMLやCSSは調整しています。)

参考:https://tamatuf.net/wordpress/wordpress-category-in-article/


【English】英語の勉強(NHKラジオ英会話 英会話 話を組み立てるパワーフレーズ トレーニング編)

年明けてから新年に「今年は○○をしよう!」とそこから準備するとなかなか実行できないことが多いので年末の今のうちに準備。

英語の勉強を再開しよう再開しようと思っていて、なかなか出来ていなかったので、この本がクリスマスセールで半額になっていたので今のうち購入
(2022.12.23現在で660円)

NHKでよく講師をされてる大西泰斗先生は「英語をイメージでつかもう」というコンセプトで「単語の意味を詳細に覚えて…」という受験英語的な勉強方法じゃないから、英語を聞いてイメージを思い浮かべる(ザックリ内容を理解)というのにはすごく向いていると思う。

講義編もあるからコチラも安くなったタイミングで購入しようかな?

音声がないけど「英語のイメージをザックリ網羅的に…」というのには
ハートで感じる英文法 決定版」こちらも結構良い。クリスマスセールで半額以下というのもあるし(2022.12.23現在で825円)

【WordPress】ソースコードを本文にそのまま挿入する方法(Highlighting Code Block)

ソースコードを本文にそのまま挿入したい場合
プラグインの「Highlighting Code Block」を
WordPressにインストールします。

Highlighting Code Block

Highlighting Code Block

ブロックエディターで使用するのが使いやすい。
(個人的には…普段はクラシックエディターが使いやすい。)

投稿画面のブロック追加から「Highlighting Code Block」を選択して
表示された枠(ブロック)にソースコードをそのまま入力します。

こちらのページで実際に使っているので
表示のされ方など参考にしてみてください。

参考:https://webnetamemo.com/coding/wordpress/2021040610576

【jQuery】バナーのランダム表示

jQueryでバナーをランダム表示したい場合、
headerに
<script type="text/javascript">
  jQuery(function($) {
    $.fn.extend({
      randomdisplay: function(num) {
        return this.each(function() {
          var chn = $(this).children().hide().length;
          for (var i = 0; i < num && i < chn; i++) {
            var r = parseInt(Math.random() * (chn - i)) + i;
            $(this).children().eq(r).show().prependTo($(this));
          }
        });
      }
    });
    $(function() {
      $("[randomdisplay]").each(function() {
        $(this).randomdisplay($(this).attr("randomdisplay"));
      });
    });
  });
</script>

htmlは
<ul class="randomdisplay" randomdisplay="3">
    <li>~</li>
</ul>

randomdisplayの数字を変更することで表示するバナーの数を変更できます。(この場合3枚表示)

このサイトのサイドバー(PC)やヘッダー(SP)で実際に使っているのでリロードしてランダム表示されることを試してみてください。

参考:https://web-omusubi.com/blog/omusubi75.html
【jQuery参考書】
■初級・入門向け
10日でおぼえるjQuery入門教室 第2版

■中級・実務向け
jQueryポケットリファレンス (POCKET REFERENCE)

■上級・開発向け
jQueryクックブック(オライリー)

【WordPress】AWS LightrailサーバーでのWP CSV Exporterプラグイン

AWS LightrailサーバーでWordPressのプラグイン
WP CSV Exporterを使おうとすると、そのままのインストールでは
500エラーで動作しません。

プラグインフォルダ内(wp-content→plugins)の
wp-csv-exporter→admin→download.php

2行目の
require_once '../../../../wp-load.php';

require_once '/opt/bitnami/wordpress/wp-load.php';
に修正します。

AWSに限らず、
wp-load.phpの場所がデフォルトと異なる場合、
修正が必要になります。
(AWSの場合、正確にはwp-contentの位置がデフォルトから変更されていると言えるかも。)