【WordPress】httpsへのリダイレクト設定

初期状態だとhttpでのアクセスになるので、
サーバーのSSL設定などを済ませたら、WordPressの設定をhttps用に変更していきます。

管理画面の設定

管理画面から「設定」→「一般」へ進みます。
「WordPress アドレス(URL)」と「サイトアドレス(URL)」のURLを、httpからhttpsに変更します。
変更したら「変更を保存」をクリックします。

.htaccessの設定

WordPressがインストールされているディレクトリに.htaccessというファイルがあるので、こちらを編集していきます。

このサイトの場合、ダウンロードした状態は下記のようになっていました。

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /memo/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /memo/index.php [L]
</IfModule>

# END WordPress

これにhttpsへのリダイレクト設定を追加していきますが、
記述する順序が重要になってきます。

もともと記述されているコードのに以下のコードを追記します。

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

httpのURLにアクセスしてみてhttpsにリダイレクトすることを確認して
リダイレクトされていれば設定完了です。

参考:https://recooord.org/wordpress-redirect-setting/

【Food】仕事中の飲み物(コーヒー)

仕事のお供は定番のコーヒー
こだわりがあるように見せかけて(苦笑)
手軽さが一番と考えて、Amazonで安いものをまとめ買いしています。

購入するタイミングでどちらか安いほうを買っています。(どちらも大体一本100円以下)

コーヒー
コーヒー

コーヒーの効能

コーヒーには以下のような効能があると言われています。
・リラックス効果
・疲労回復
・消化促進
・脂肪の分解
・コレステロール値を下げる
・善玉コレステロールの増加
・ぜんそくを抑える

「リラックス効果」「疲労回復」など仕事中の飲み物としても良いですが、
スポーツ後に飲むと「疲労回復」だけでなく、脂肪も効率的に燃焼できるとも言われています。

コーヒーの注意点

他方、注意点としては…
主にカフェインによって以下のような作用もあるので、適量を心がけるなど注意も必要かもしれません。
・利尿作用
・覚醒作用
・胃酸分泌
・血圧上昇

参考:https://www.ncc.go.jp/jp/cis/divisions/info/project/pub-pt-lib/20161204/20161204_01.pdf

【Food】定番の朝食(リンゴジュースといちじくのドライフルーツ)

定番の朝食として
リンゴジュースとドライフルーツ(いちじく)が最近のお気に入り。

リンゴジュースは以下のものをAmazonでまとめ買いしています。

リンゴジュース

一緒に食べるドライフルーツ(いちじく)はAmazonではなく近所のスーパーで購入していますが(そのほうが安いので)
こちらのものが安くて美味しいので気に入っています。

ドライフルーツといっても完全に乾燥している固いものではなく、半生のソフトなものです。

ドライフルーツ(いちじく)

いちじくに含まれる栄養素と効能

ペクチン(食物繊維)

便秘改善に効果があり腸内環境を整えます。血糖値の上昇を緩やかにし糖尿病を予防する効果もあると言われています。

腸内環境が良くなると、老廃物をため込みにくくなり肌荒れが起きにくくなります。その他にも、腸内の善玉菌が増え免疫力がアップしたり、大腸がんを予防する効果もあると言われています。

鉄分

貧血を予防する効果があります。

葉酸

「造血のビタミン」とも言われ、赤血球を作るのに重要な栄養素と言われています。鉄分とともに貧血予防の効果があります。

葉酸は、細胞の分裂や成熟にも必要と言われており、妊娠初期に摂取することで胎児の先天異常である神経管閉鎖障害のリスクを減らすという効果も報告されています。

カリウム

カリウムはミネラルの一種で、ナトリウムを排出する役割もあり、塩分を体外に排出し高血圧予防に効果があります。

カルシウム

カルシウムは、骨や歯を形成するための栄養素で不足すると骨粗鬆症の原因になります。

カルシウムをより効果的にするためにビタミンDも必要になりますが、日光浴をすることで体内で生成されるので、適度な日光浴も併せるとより効果的です。

参考:https://www.kojima-ya.com/blog/about-dried-fruit/dryichijiku-eiyou/

【CSS】IE11でremを使う場合の注意点(疑似要素でのline-heightバグ)

文字サイズにアクセシビリティを求める場合はremを使うという記事を投稿しました。

2022.06時点で既にシェアは1割未満なのでIEに関するバグはほとんど無視しても良いのかもしれませんが…

場合によってはまだ考慮する場面もあるかもしれませんので
メモとして記事化しておきます。

※Windows10のIE11は2022年6月15日(日本時間6月16日)にサポート終了。2023年2月14日に完全無効化予定(EdgeのIEモードは2029年までサポート予定)

※Windows7(ESU)、Windows8.1、Windows10 LTSC、Windows ServerではIE11が引き続き提供される。(Windows7(ESU)は2023年1月10日有償サポート終了Windows8.1は2023年1月10日延長サポート終了

IE11のrem指定で起きるバグ

IE11では疑似要素(:before、:after)に対して行高(line-height)をremで指定しても正しくレイアウトされないようです。

1行のテキストの場合、
要素の高さ(height)と行高(line-height) を同じ値にして
縦方向の中央寄せ(センタリング)をすることがありますが、これが出来ないということになります。

その他のIE11関連のバグもコチラに紹介されています。
https://kiomiru.co.jp/blog/coding/ie11-bugs/

参考:https://www.webmagazine.kakisiti.co.jp/?p=571
https://www.qbook.jp/column/20220720_1391.html
https://kiomiru.co.jp/blog/coding/ie11-bugs/
https://ja.wikipedia.org/wiki/Internet_Explorer_11

【CSS】文字サイズ62.5%問題(px、em、rem何を使うべきか?)

SNS上で文字サイズ62.5%問題が賑わっているので
内容をまとめてみようと思います。

と言っても、コリスの記事がかなりバランス良く情報がまとまっている内容かな?とは思いますが…
https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html

論点を絞って、最後に自分的な結論(今後どう制作していくか)をまとめようと思います。

px、em、rem何を使うべきか?

emやremのように相対的なサイズ指定がベストではあるものの、
最近のブラウザではズーム機能なども最適化されてきているので、px指定でもそこまで問題は大きくなく、アクセシビリティにどこまでコストを割くかという部分で決めれば良いのではないかと思います。

ちなみに以前制作を担当した案件では

p {
    font-size: 16px ;
    font-size: 1rem ;
}

というようにrem優先、px補助…というような位置づけで併記した記述をするレギュレーションになっていました。
これなら各要素を見ただけでも1rem=16pxになっているんだな、と分かり他人が保守する際も分かりやすいかもしれません。

文字サイズを62.5%指定するのは辞めるべきなのか?

これは元々remなど相対的なサイズを扱いやすくするための裏技的なハックなので
辞めるべきなのだろうと思いますが…

デフォルトの1rem=16pxを変更してしまうもので、サードパーティー製のフレームワークなど1remを16pxのまま扱っているものと混合して使う場合、不具合が生じる場合があることもあるようですが、使わない場合、影響は限定的なのかもしれません。

視覚障害者の方など、ブラウザの設定で文字のデフォルトサイズ(スケーリング)を変更している場合、基本サイズ(1rem)を32pxにしていても、20pxでの表示になってしまい
2/3のサイズで表示されることになってしまうなどユーザーの意図しない表示結果になってしまいますが、

こちらも以下のように
htmlにフォントサイズ62.5%にして、bodyに1.6remすることでブラウザ設定の文字サイズの問題は回避できそうです。

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

先に紹介したpxとremの併記で(他人が見た際の)メンテナンス性を担保することも可能です。

p {
    font-size: 16px ;
    font-size: 1.6rem ;
}

62.5%ハックを使わない方法:CSS変数を使用する

62.5%ハックを使わない方法としては、CSSの問題はCSSで解決したほうがいいと思うので、
CSS変数を使ったコリスの解決方法が最もスマートな方法ではないかと思います。
(もともとSass環境で開発しているなどの場合は、そちらで解決しても良いかも。)

html {
  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
}
p {
  font-size: var(--16px);
}

自分的結論

現時点(2023.01)での私個人の結論としては、

・アクセシビリティへの大きな配慮などが必要な場合は62.5%を使ってrem
・デザイン性を優先する場合はpx

サードパーティー製のフレームワークともともと混合して使う場合や、将来的に混合しそう(WordPressベースでサイトを構築しているなど)な場合は、CSS変数を使うなど、適宜使い分けるのが良いかもしれません。

これだとやや結論としては弱いので私個人としては

・基本はpx
・アクセシビリティ対応が必要な場合は62.5%+rem(別途見積として料金を載せる)

で今後制作していこうかな?と思います。(アクセシビリティ対応が必要ということは、簡易的にでもレギュレーションが必要ということかな…と。)

参考:https://coliss.com/articles/build-websites/operation/css/about-pixels-and-accessibility.html
https://zenn.dev/tak_dcxi/articles/26280e7607bcd2

【Tools】無印良品のノートカバー

愛用のノートを紹介しましたが
そのノートもそのままは使わず、無印良品のノートカバーをして使っています。

無印良品のノートカバー

ジーンズのラベル素材で出来ていて、現行販売されているもので二代目になると思います。
初代から愛用していて、初代は紙質が厚くてかなり良かったですが廃盤になって再販を希望していたところ、再販されたものが現行の二代目になります。

紙質が薄くなって少しチャチくなった印象もありますが、その分内ポケットが付いてビジネスシーンでは名刺など入れることが出来、とても便利になりました。

もともと定価で590円だったものが今は在庫処分のための値下げだと思いますが
295円177円に値下げされているので、このタイミングにまとめ買いしておくのが良いかもしれません。
(たぶん定番商品ではないので在庫が売り切れれば再販はあってもかなり先になるかも…初代が2010年、現行品が2020年くらいの発売なので次は2030年??三代目にはペン差しを付けてほしいですね…)
※2023.02現在タイミングによってはネット通販で売り切れになっていることがありますが、店舗在庫があるところもあるようです。最寄りの店舗にあればそちらで購入。最寄りにない場合は、最寄り店舗に行って在庫店舗から取り寄せてもらうなどすると良いと思います。

無印のボールペンについても紹介しているので是非ご一読ください。
https://www.uki213.com/memo/muji-aluminum-ballpoint-pen/

無印良品のノートカバー

【WordPress】管理ツールバーをカスタマイズ(既存のメニューを非表示化)

WordPressにログイン後表示される管理ツールバーをカスタマイズします。
既存のメニューを非表示化し、使いやすくします。
リンクを追加する方法はこちら

function remove_admin_bar_menu_control( $wp_admin_bar ) {
$wp_admin_bar->remove_menu( 'themes' ); // サイト名 → テーマ(ウェブサイト側)
$wp_admin_bar->remove_menu( 'customize' ); // サイト名 → カスタマイズ(ウェブサイト側)
$wp_admin_bar->remove_menu( 'comments' ); // コメント
$wp_admin_bar->remove_menu( 'widgets' ); // ウィジェット
$wp_admin_bar->remove_menu( 'menus' ); // メニュー
$wp_admin_bar->remove_menu( 'updates' ); // 更新
$wp_admin_bar->remove_menu( 'new-media' ); // 新規 → メディア
$wp_admin_bar->remove_menu( 'new-link' ); // 新規 → リンク
$wp_admin_bar->remove_menu( 'new-page' ); // 新規 → 固定ページ
$wp_admin_bar->remove_menu( 'new-user' ); // 新規 → ユーザー
$wp_admin_bar->remove_menu( 'user-info' ); // マイアカウント → プロフィール
$wp_admin_bar->remove_menu( 'edit-profile' ); // マイアカウント → プロフィール編集
$wp_admin_bar->remove_menu( 'search' ); // 検索(ウェブサイト側)
}
add_action('admin_bar_menu', 'remove_admin_bar_menu_control', 111);

参考:https://wp-labo.com/wordpress-admin-bar-menu-hidden-customize/

【IrfanView】画像の加工(枠をつける)

IrfanViewは起動が早くて画像ビューワーとしてとても優秀ですが、
簡単な画像の加工も可能です。

最新のWordPressはブロックエディターで画像の掲載が簡単なので、IrfanViewでの画像加工の簡単さを組み合わせるとかなり便利になります。

まずIrfanViewで画像を開き
メニュー左から二番目「編集」(英語表記の場合「Edit」)をクリック
三番目の「ペイントツールを表示」(英語表記の場合「Show Paint dialog」)をクリック。ショートカット「F12」でも起動可能です。

IrfanView

起動されたペイントツールの真ん中あたりに
「枠」ツールがあります。

「枠」ツール

枠線の太さや色を設定して
開いている画像の任意の場所でカーソルをクリックした状態でドラッグしていくと枠が描画されます。

そのまま保存してもいいですし、
コピーしてWordPressのブロックエディター上にペーストしても良いです。

参考:http://www.oshiete-kun.net/archives/2013/05/irfanview_5.html

【WordPress】管理ツールバーにリンクを追加

WordPressでログイン後に上部に表示される
管理ツールバーにリンクを追加するカスタマイズ方法です。
既存メニューを非表示にする方法はこちら

管理ツールバーにリンクを追加

ツールバーからすぐにアクセスランキングにアクセス出来るように
functions.phpに以下のようにコードを追記することでリンクを追加することができます。

//管理ツールバーにリンク追加
function customize_admin_bar_menu($wp_admin_bar){
//親メニュー
$title = sprintf(
'<span class="ab-label">%s</span>',
'追加リンク'//親メニューラベル
);
$wp_admin_bar->add_menu(array(
'id' => 'dashboard_menu',
'meta' => array(),
'title' => $title
));
//サブメニュー
$wp_admin_bar->add_menu(array(
'parent' => 'dashboard_menu', // 親メニューID
'id' => 'dashboard_menu-plugins', // 子メニューID
'meta' => array(),
'title' => 'WordPress Popular Posts', // 子メニューラベル
'href' => home_url('/wp-admin/options-general.php?page=wordpress-popular-posts') // 子メニューURL
));
}
add_action('admin_bar_menu', 'customize_admin_bar_menu', 9999);

参考:https://nelog.jp/admin-tool-bar-custom


【WordPress】よく見られているページ・アクセスランキング(WordPress Popular Posts)

よく見られているページ・アクセスランキングなどをサイドバーなどに表示しているサイトが多いですが、表示しないまでもWordPressの管理画面上でどのページ・どの記事がよく見られているかアクセス数などが簡単に見られると便利です。

GoogleAnalyticsでも簡単に見ることは出来ますが、
記事の投稿のついでに気軽に見られると、どのような記事が良く見られているのか、今後の記事を書く上でも役に立ちます。

WordPress Popular Posts

WordPress Popular Posts

インストール方法

「プラグイン」→「新規追加」から
WordPress Popular Postsで検索をします。
インストール→有効化すると計測が始まります。(インストール前は計測されません。)

設定方法

有効化だけでも特に問題なく使えますが、
管理画面のサイドバー「設定」→「WordPress Popular Posts」から設定をして、自分のアクセスを除外することが出来ます。(ログインしている場合のみ除外)

メイン画面の「ツール」タブをクリック
「データ」の「閲覧を記録する対象者」を
「全員」から「訪問者のみ」に変更し
適用ボタンをクリックします。

アクセス数の確認方法

サイトのフロントに表示しない場合、
管理画面からアクセス数を確認するだけの場合、
サイドバー「設定」→「WordPress Popular Posts」と遷移するだけで
確認できます。

参考:https://www.itti.jp/web-design/the-best-way-to-display-popular-posts-in-wordpress/
https://lucy.ne.jp/bazubu/how-to-add-popular-posts-23487.html
https://senior-chie.net/skill/2784/

【WordPress】内部リンクによるセルフピンバックを無効化(No Self Pings)

WordPressで内部リンクを記述して投稿をすると自分のサイトから自分のサイトに対してもpingを送信します。

コメントに未承認コメントが溜まっていくため紛らわしく、この挙動を好まない場合もあります。

No Self Pings

No Self Pings

「プラグイン」→「新規追加」から
No Self Pingsで検索し、インストール→有効化します。

以上でブログ内のpingを無効化することが出来ます。
内部・外部全部のピンバック機能を停止する方法

【CSS】テーブルのセルの幅を均等にする(width: 1%;)

テーブルのセルの幅を均等にしたい場合があります。

少し裏技的な設定方法にはなりますが、
tdwidth: 1%;を設定すると横幅が均等になります。

td {
    width: 1 % ;
}

こちらのページの表に適用しています。

均等ではないほうがキレイに表示される場合もあるので、このサイトではtableタグにclass="equality"を付けたときだけ横幅が均等になるように設定しています。

数字など文字列が長くなる場合は、こちらの「URLなど長い半角英数字の折り返し表示」のページを参考に以下のように改行設定を加えても良いかもしれません。

td {
    width: 1 %;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

参考:https://csshtml.work/td-width-equal/

【WordPress】Google公式のreCAPTCHAの非表示方法

WordPressに設置したreCAPTCHAのバージョン3はGoogleが公式に非表示にする方法を紹介しています。(WordPress以外も同様)

https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

以下のように説明されています。

I’d like to hide the reCAPTCHA badge. What is allowed?
reCAPTCHA バッジを非表示にしたいです。何が許可されていますか?

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
ユーザー フローに reCAPTCHA ブランディングを目に見えるように含める限り、バッジを非表示にすることができます。次のテキストを含めてください。

以下のテキストを該当の箇所に挿入し

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

以下のCSSを追加します。

.grecaptcha-badge { visibility: hidden; }

これでバッジは非表示になります。
このページにも設置しているので確認してみてください。
必要に応じてCSSなどでデザインを整えてください。


WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://jikorich.com/recaptcha-hidden

【WordPress】ログイン画面をreCAPTCHAで保護(Invisible reCaptcha for WordPress)

ログイン画面にreCAPTCHA(リキャプチャ)を設置し、セキュリティをアップさせます。

Invisible reCaptcha for WordPress

Invisible reCaptcha for WordPress

「プラグイン」→「新規追加」から
Invisible reCaptcha for WordPressを検索し
インストール→有効化します。

「設定」に「Invisible reCaptcha」が追加されるので
設定をしていきます。

Googleのサイトでの操作

Googleのサイトにアクセスしキーを発行していきます。(Googleアカウントが必須です)
https://www.google.com/recaptcha/admin?hl=ja

「ラベル」に分かりやすい名称をつけ(ドメインで良いと思います。)
「reCAPTCHA タイプ」で「reCAPTCHA v3:スコアに基づいてリクエストを検証します」を選択します。
「ドメイン」に設置するサイトのドメインを追加し、最後に同意して送信します。

「サイトキー」と「シークレット キー」が発行されるので、メモをしてWordPressの管理画面に戻り設定を行います。

WordPress管理画面での操作

「設定」→「Invisible reCaptcha」から
「サイト鍵」に「サイトキー」のコードを、
「秘密鍵」に「シークレット キー」のコードを入力します。

その他の設定は、
言語:Japaneses
バッジ位置:インライン
とすると良いと思います。

「変更を保存」し、設定タブ下のWordPressタブに移動します。

全ての項目にチェックすると、ログイン画面などにreCAPTCHA(リキャプチャ)が設置されバッジが表示されるようになります。(このサイトではバッジをCSSで非表示にしています。)




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://highneeds.jp/wordpress/95/

【WordPress】ブロックエディターの便利な使い方(画像のコピペ)

ブロックエディターを便利に使うメリットもあります。

そのひとつが画像のコピペです。

クラシックエディターでは「メディアを追加」からアップロードして選択して画像を掲載していましたが、
ブロックエディターでは「コピペ」のみで画像掲載可能になりました。

Windowsの場合、画像ソフトにIrfanView
スクリーンキャプチャソフトにLightscreen Portable
インストールしておくと便利です。

IrfanViewの特徴
・ソフトが軽い(起動が早い)
・画像の部分選択が可能
・フリーソフトである

Lightscreen Portableの特徴
・インストール不要
・クリップボードに残る
・画像も保存される

など、画像をコピペで掲載するのに相性の良いソフトになります。

参考:https://keizokuma.com/image-kopipe/

【WordPress】旧エディターに戻すプラグイン(Classic Editor)

WordPress5.0から投稿画面がGutenbergと言われるブロックエディターに変わりました。

昔からのユーザーにとっては、なかなか使いづらい面も多いものです。
旧エディターに戻すことで、投稿の効率化を図ります。

Classic Editor

Classic Editor

「プラグイン」→「新規追加」で
Classic Editorで検索します。
インストールし有効化すると、投稿画面が旧エディターに切り替わります。

有効化しただけだと、全投稿画面が旧エディター(クラシックエディター)に切り替わるだけなので
今後ブロックエディターを完全に使わない場合このままでも良いですが、
ブロックエディターに切り替えながら使いたい場合は、設定変更が必要になります。
(ソースコードをそのまま表示する場合に使うHighlighting Code Blockはブロックエディターのほうが使いやすいです。)

Classic Editorの設定変更

「プラグイン」→「インストール済みプラグイン」から
プラグイン一覧画面に移動します。
Classic Editorの「設定」をクリック。
「ユーザーにエディターの切り替えを許可」を「はい」に変更し、「変更を保存」します。

これで投稿画面でエディターを切り替えられるようになりました。

参考:https://selifelog.com/blog-entry-2291.html

【GSAP】GSAPの実装(導入と基本機能)

導入

GSAPの実装するための導入方法は大きくふたつあり、
・CDNで読み込む
・公式サイトからライブラリをダウンロードし自サーバーに設置する
かになります。

CDNで読み込むのが一行コードを追加するだけなのでまずは簡単に始められます。下記コードをhead内もしくはbody最下部に記述します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

基本機能

GSAPには様々な機能がありますが、
代表的なものはgsap.to()などのメソッドを使うTween機能です。

単純なアニメーションの場合下記のように記述します。

gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

.sampleというクラス名の要素が、45度回転しながら、x方向に100px、1秒間かけて移動するアニメーションになります。

一般的なメソッドは3種類あり、
gsap.to()・・・アニメーション終了時の値を指定
gsap.from()・・・アニメーション開始時の値を指定
gsap.fromTo()・・・アニメーション開始時と終了時の値を指定

//gsap.to()・・・アニメーション終了時の値を指定
gsap.to(".sample", {rotation: 45, x: 100, duration: 1});

//gsap.from()・・・アニメーション開始時の値を指定
gsap.from(".sample", {opacity: 0, x: 100, duration: 1});

//gsap.fromTo()・・・アニメーション開始時と終了時の値を指定
gsap.fromTo(".sample", {opacity: 0}, {opacity: 0.5, duration: 1});

のように記述します。

主なプロパティ

x: x軸方向への移動量
y: y軸方向への移動量
repeat: アニメーションのリピート回数
delay: アニメーションが開始するまでの時間
duration: アニメーションの長さ
ease: アニメーションの変化率
onUpdate: アニメーションがアップデートされる際に呼び出される関数
onComplete: アニメーション終了した際に呼び出される関数

参考:https://greensock.com/docs/v3/Installation
http://mtrad-blog.com/2021/09/21/post-2488/
https://note.com/shift_tech/n/n6f11974bff71

【GSAP】GSAPとは

GSAP (ジーサップ:GreenSock Animation Platform) は、GreenSock社が開発しているWeb上でアニメーションを実装するためのJavaScript製の高機能アニメーションライブラリです。GSAPは、高度なアニメーションを高速でスムーズに実行することができるためよく使われています。

公式サイトに制作事例もたくさん掲載されているので、
こちらを見るのがどのようなことが出来るのか一番イメージしやすいかもしれません。
https://greensock.com/showcase/

GSAPは、HTML、SVG、Canvas、React、Angular、Vueなど、様々なコンテンツを対象にアニメーションを実装することができ、3Dアニメーションも実装することができるため、Webアニメーションを制作する上で強力なツールとして広く使われています。

もともとはTweenLite、TweenMax、TimelineLite、TimelineMaxとライブラリが分割されていました。

TweenLiteとTweenMaxは、単独の要素をアニメーションするためのライブラリで、TweenLiteは基本的なアニメーション機能を提供し、TweenMaxは TweenLiteの機能を強化したものです。TimelineLiteとTimelineMaxは、複数のTweenアニメーションを管理するためのライブラリで、TimelineLiteは基本的なタイムライン管理機能を提供し、TimelineMaxはTimelineLiteの機能を強化したものです。

2019年11月にGSAP2からGSAP3に移行し、軽量化に伴いこれらはひとつに統合されました。

シンプルな記述が可能で、軽量かつ多機能、豊富なプラグインなどが特徴になっています。

公式サイト:
https://greensock.com/gsap/

参考:https://b-risk.jp/blog/2022/05/gsap/
https://ics.media/entry/200805/
https://ics.media/entry/220822/

【CSS】float卒業(flexboxへの移行)

flexboxのCSSをGUIベースで生成できるWebサービス

https://suiq.jp/flex-layout-generator/

最近は、チートシートを見ながら
なるべくfloatは使わないようにし始めたけど
長年floatで組んできたから、まだまだ脳みそがfloat脳になってる…

チートシートは今のところ
Webクリエイターボックスさんのを使っています。
メルマガ登録が必要だけど、コンパクトにまとまっていて分かりやすいかな。

チートシートやWebサービス使いながら
そろそろ卒業しなければ…

参考:https://www.yuukidesign.com/2022/07/139/
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

【Adobe】オンラインスクールのAdobeライセンス

個人事業主やフリーランスだと仕事に使うソフト代など経費で落とせるものの、やっぱり一円でもコストは抑えたいところ。

オンラインスクールの講座にAdobeのライセンス付きのものがあって
そのライセンスはアカデミック版ではあるものの、
商用利用も大丈夫なものなので、これを契約して使っているフリーランスは多いのかな?と思います。

オンラインスクールだから一度講座を受けてしまうと
二年目以降は受講できないのかな?と思ってしまいがちですが、
同じ講座を翌年契約しても問題ないのは意外と知られていないかも。




参考までにAmazonのオンラインコード版(一般ライセンス)はこちら
Amazonの場合は、毎年12月に行われるブラックフライデーが一番割引率が高いからAmazonで買うならその時期かな。

個人的には買い切りタイプのAffinityに乗り換えたいなと思いつつ、
ソフトの操作方法をまたイチから覚え直すコストを考えるとなかなか完全に切り替えられてないけど
部分部分では便利なこともあるので、少しずつ勉強中。

V2リリース記念オファー – 2023年1月25日まですべてのアプリが 40% オフ!

Affinity V2ユニバーサルライセンスなら、macOS、Windows、iPad用全てパックになっていてお得!

通常価格:¥26,800 → ¥24,400 → 今なら¥15,800
https://affinity.serif.com/ja-jp/affinity-pricing/

Adobeソフトと通信講座のセットはこちら!

【WordPress】DDoS攻撃とPingback機能の無効化

WordPressで、DDoS攻撃を防止するには、Pingback機能を無効化することで防げますが、機能を停止するすることになるのでメリット・デメリットなど検討する必要性があります。
不正ログイン攻撃についてはこちら

DoS攻撃

DoS攻撃(Denial of Service attack:サービス不能攻撃)は、昔からある攻撃手法の一種です。
攻撃の目的は、サービスを妨害したり、停止させたりすることにあります。

DoS攻撃にはさまざまな手法がありますが、
対象のサイトやサーバーに対して複数のコンピューターから大量に行うものを「DDoS攻撃(Distributed Denial of Service attack)」(分散型サービス拒否攻撃)と言います。

Pingback機能

WordPressには自分自身のサイトに対する言及を第三者が行った場合、
それを通知する機能として「Pingback」という仕組みがあります。
他のブログから通知 (ピンバック・トラックバック) を受け付ける機能のことです。

この仕組みをDDos攻撃に悪用されることがあります。
この攻撃でサイトの改ざんなどはありませんが、別のサーバーやサイトに対して、知らない間に攻撃の手助けをしてしまうことがあります。

初期状態のWordPressでは、Pingback機能が有効になっているので、
運用上必要でない場合、無効化しておくことでセキュリティ度は増します。

Pingback機能の無効化

WordPressのPingback機能を悪用したDDos攻撃を防ぐには、Pingback機能を無効化することでリスクを防げます。最近はスパムのトラックバックやコメントが多いので、Pingback機能は無効化してしまって問題ない場合が多いと思います。
内部リンクのピンバック機能のみ停止する方法

Pingback機能の無効化
管理画面から「設定」→「ディスカッション」→「投稿のデフォルト設定」と進み、「他のブログからの通知 (ピンバック・トラックバック) を受け付ける」のチェックを外すと無効化されます。

すでに投稿している記事のPingback機能の無効化
管理画面から「投稿」→「投稿一覧」へ進み、
タイトルの横にあるチェックボックスを全てオン→プルダウンの「一括操作を編集」にして「適用」ボタンを押します。

次の画面右に「トラックバック/ピンバック」という欄があるので、プルダウンを「許可しない」にして「更新」ボタンを押すと無効化されます。




未知のウイルスへの対応力が違います。「ESETセキュリティソフト」

参考:https://help.sakura.ad.jp/rs/2162/
https://rgbdesign.jp/必ずやっておきたいwordpressのセキュリティ/
https://asahinablog.com/archives/2990
https://digitalnavi.net/wordpress/6938/

【CSS】URLなど長い半角英数字の折り返し表示

URLなど長い半角英数字があると
コンテンツの表示領域を超えてしまって表示が崩れてしまうことがあります。

特にスマホでの表示ではコンテンツ部分が縮小されてしまったりと
問題も大きいです。

URLなど長い半角英数字を折り返し表示することで
デザインの崩れを防ぎます。

以下のCSSを適用することでデザイン崩れを防げます。

word-wrap: break-word;
overflow-wrap: break-word;

overflow-wrapプロパティはCSS3で定義された新しいプロパティ名です。

word-wrapは従来からあるプロパティ名です。
(もともとIE独自のプロパティで、現在もIE・EdgeやFirefoxはword-wrapのみ認識)

リセットCSSや共通CSSに最初から記述しておくと便利かもしれません。
2023.01.06 リセットCSSに追加

参考:https://allabout.co.jp/gm/gc/463542/
https://accelboon.com/tn/css-半角英数の連続文字が折り返すようにする/

【HTML】カレンダー形式のフォーム入力(type=”datetime-local”)

inputフォームにtype="datetime-local"を設定すると
カレンダー形式で日時を入力出来るようになります。

<input type="datetime-local">

最小値min="YYYY-MM-DDThh:mm:ss"
最大値max="YYYY-MM-DDThh:mm:ss"など指定できる属性もあるので

最小値の指定は過去を選択できないように出来たり、
最大値は来月以降や来年以降など誤って遠い将来の指定してしまう入力ミス防止の為などの指定も出来ます。

2023.01現在だとiOSでも問題なく使える(Mac環境のChrome可・Safari不可)ので、状況を選べば複雑なJSのフレームワークなど使用しなくてもカレンダー形式の入力を実現でき、入力方法を便利にすることが出来ます。

年月日時分まで全て含むtype="datetime-local"以外にも

  • 年月日だけのtype="date"
  • 年月だけのtype="month"
  • 時分だけのtype="time"
  • 年週だけのtype="week"

などもあります。

参考:https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local
https://www.tagindex.com/html/form/input_datetime_local.html
https://codeforfun.jp/reference-html-tag-input-type-datetime-local/

【WordPress】SNSシェアボタンの設置(AddToAny Share Buttons)

SNSシェアボタンを設置するプラグイン

AddToAny Share Buttons

AddToAny Share Buttons

このサイトにも使っています。
このページの本文の上下に設置しています。

SNS以外にもGメールへの送信だったり、印刷ボタンやリンクのコピー機能もあったり汎用的に使えます。

参考:https://netaone.com/wp/wordpress-sns-plugin/

【WordPress】セキュリティ対策04(wp-config.phpのアクセス権限変更)

ファイルのアクセス権限(パーミッション)をデフォルトから変更することでセキュリティ対策をします。

wp-config.phpは、データベースにログインするためのIDとパスワードが記載されているため、最も重要な設定ファイルになります。

設定内容を見られると、データベースにアクセス出来るようになり、データを削除されたり盗まれたりする可能性が高まります。

デフォルトのアクセス権限は「644」なので、所有者以外も内容を見ることが可能な状態です。

アクセス権限を「644」から「600」にし、所有者だけが読み書きできる状態に変更します。




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://www.mubag.com/blog/wordpress-security-plugin/

【WordPress】不正ログイン攻撃(ブルートフォースアタック/辞書攻撃)

不正ログイン攻撃には、総当たり攻撃やブルートフォースアタック(Brute-force attack)と呼ばれる第3者が想定される認証情報を入力してログインできるか調べる攻撃や、辞書攻撃と言われる良く使われるパスワードを「辞書」的に登録し攻撃に利用するなどがあります。
DDoS攻撃についてはこちら

総当たり攻撃(ブルートフォースアタック)は、試行を繰り返すことでパスワードを特定する攻撃になりますが、最近のパソコンは処理スピードが早いため、パスワードが数字4桁程度の場合、数秒で突破できてしまいます。

使用する文字の種類と文字数での組み合わせパターン数は以下の通りとなります。単純な組み合わせで文字数も少ないとパターン数が意外と少ないことに気付くと思います。

使用する文字の種類 1文字の場合 4文字の場合 6文字の場合
数字のみ(0~9) 10 10,000 1,000,000
英字(大・小文字区別なし) 26 456,976 38,915,776
英字(大小区別なし)+数字 36 1,679,616 2,176,782,336

不正ログイン攻撃の流れ

WordPressの場合、以下の流れで不正ログイン攻撃が行われます。

1.ログイン用URLの特定
変更を加えていない場合、ログインURLは、wp-login.phpとなる。
SiteGuard WP Pluginで変更可能

2.管理者用ユーザIDの特定
WordPressへ特定のリクエストをすることで、存在する管理者用ユーザIDを取得することができる。
Edit Author Slugで対応可能

3.ユーザIDとパスワードを送信する
総当たり攻撃(ブルートフォースアタック)、辞書攻撃、もしくはその両方の組み合わせなどで行われます。
画像認証を追加する

4.返答されるHTTPヘッダを確認する
ユーザIDとパスワードが一致した場合、「Status 302」としてLocationヘッダにダッシュボードのURLを返します。(失敗時は「Status 200」となる。)

5.ダッシュボードへログインする
ログインした後は任意のコードを記述したり、任意のファイルを設置したり、様々な悪意ある改ざんが自由に出来てしまいます。

STEP5も、プラグインなど余分なファイルを削除・整理しておくことで改ざん後の特定が可能になったり、被害を最小限にすることが出来ます。

不正ログイン攻撃を防ぐには

逆に考えると、これらのSTEP4までのどこかのステップを防ぐことで不正ログイン攻撃を未然に防ぐことが可能になります。

複数対策することで、よりセキュリティ度は向上しますが、普段の運用に差し支えないレベルでの対策が望ましいので、各自でどこまで対応するかなど検討が必要かもしれません。

私の個人的な優先順は…

管理者用ユーザID→Edit Author Slugで対応可能
 ↓
ユーザIDとパスワード→画像認証を追加
 ↓
ログイン用URL→SiteGuard WP Pluginで変更

最後のログインURLの変更はAWSでは出来ないため、設定に汎用性を持たせるため優先順位を下げています。




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://knowledge.sakura.ad.jp/4248/
https://ja.wikipedia.org/wiki/総当たり攻撃
https://ja.wikipedia.org/wiki/辞書攻撃

【HTML】PageSpeed Insightsでのアラート修正02(リンクに識別可能な名前が指定されていません)

PageSpeed Insightsでチェックをすると
「リンクに識別可能な名前が指定されていません」
というアラートが出ることがあります。

これはaタグ内に画像を使用している場合に出るアラートになりますが、
以下の要素を追加することで解消できます。

1.altを追加
通常、imgタグにaltを設定するのが一番望ましいです。

2.aria-labelを使う
altが何らかの理由で使えない場合は、aタグにaria-labelを使います。

<a href="readmore.html">Read More</a>
 ↓
<a href="readmore.html" aria-label="Read More">Read More</a>

参考:https://dequeuniversity.com/rules/axe/4.4/link-name
https://www.rectus.co.jp/archives/11570

【HTML】PageSpeed Insightsでのアラート修正01(ボタンにユーザー補助機能名が指定されていません)

PageSpeed Insightsでチェックをすると
「ボタンにユーザー補助機能名が指定されていません」
というアラートが出ることがあります。

これはbuttonタグに以下の要素を追加することで解消できます。

<button id="al"></button>
 ↓
<button id="al" aria-label="Name"></button>

ユーザーに知らせる必要のない要素やフォーカスが当たるべきでない要素に、適宜aria-label="Name"の代わりにaria-hidden="true"などを設定しても良いでしょう。

参考:https://dequeuniversity.com/rules/axe/4.4/button-name
https://cam-inc.co.jp/p/techblog/466554823458685993

【WordPress】投稿で定型文を挿入するのに役立つプラグイン(AddQuicktag)

投稿画面などで定型文を挿入するのに便利なプラグイン

AddQuicktag

AddQuicktag

インストール後、有効化し
「設定」→「AddQuicktag」と進み、
「ボタン名」と「ラベル名」を入力
(投稿画面ではボタン化されるので分かりやすい短めの文字が良い)
 ↓
「開始タグ」に挿入したい定型文を登録します。
横のチェックボタンは「post」のみ入れておけば、通常の記事投稿には充分です。

参考:https://wp-sensei.net/2047/

【Affinity】ドキュメントのカラー設定の変更方法

AffinityのPublisherはPDFファイルをページ丸ごと扱える(Designerも同様にページ丸ごと扱える)ので、AdobeのIllustratorより便利な面も大きいです。

AffinityPublisher

ただ、操作方法が微妙に違い設定変更などが分からないこともあります。

今回はドキュメントのカラー設定の変更方法が分からなかったので、そのメモを…

他ソフトなどで作成したPDFファイルを開くと
グレースケールなどになっている場合があります。
この場合、他ファイルからコピペしてもカラー情報が失われ、全てグレースケールになってしまいます。

カラー設定の変更方法は2パターンあります。

1.開く前に変更するパターン
PDFをドラッグ&ドロップで開く
 ↓
「色空間」を「推定」から「RGB」などに変更する。
開く前に変更するパターン

2.開いた後に変更するパターン
画面の上から3段目の「ドキュメント設定」をクリック
 ↓
ポップアップ画面の中段「カラー」タブに切替え、「カラーフォーマット」をRGBやCMYKなどに適宜変更する。
開いた後に変更するパターン
開いた後に変更するパターン

参考:https://taishon.nagoya/affinity-designer-cmyk-rgb/

V2リリース記念オファー – 2023年1月25日まですべてのアプリが 40% オフ!

Affinity V2ユニバーサルライセンスなら、macOS、Windows、iPad用全てパックになっていてお得!

通常価格:¥26,800→今なら¥15,800
https://affinity.serif.com/ja-jp/affinity-pricing/

【WordPress】全角スペースを含んだ検索のバグ修正

これも色々調べていて初めて知ったのでメモも兼ねて…

WordPressの検索で全角スペースを入れて検索すると
検索0件になるバグがあります。(全角は全て文字と認識しているため、全角スペース前後を含む一語と誤認してしまうようです。)

これを防ぐため、下記のコードをテンプレートファイル内にある
functions.phpの一番最後に追記します。

これで全角スペースを半角スペースに置換して検索してくれます。

//全角スペースを含んだ検索のバグ修正
function empty_search( $query ) {
    if ( $query->is_main_query() && $query->is_search && ! $query->is_admin ) {
    $s = $query->get( 's' );
    $s = str_replace(' ',' ', $s );
    $query->set( 's', $s );
    }
}
add_action( 'pre_get_posts', 'empty_search' );

参考:https://sologaku.com/wordpress/site-search-support-emspace/ https://yululy.com/ワードプレスの全角空白で検索結果がおかしい件/

【WordPress】セキュリティ対策03(SiteGuard WP Plugin)

このサイトには現状使っていませんが、
仕事でWordPressのサイトを構築する際に必須で使用しています。

SiteGuard WP Plugin

SiteGuard WP Plugin

サイトへの不正アクセスのほとんどの攻撃は海外からの場合が多いため、
管理画面へのログインの際、日本語の画像認証でログインするようにしています。

SiteGuard WP Plugin

ログイン画面のURLを変更する機能もありますが、
AWSサーバーでは使えないなどもあるので、これは使用しないのを基本にしたほうが汎用的な設定に出来るかもしれません。




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

【WordPress】セキュリティ対策02(プラグインの削除)

WordPressのセキュリティ対策のひとつに「余分なプラグインを削除する」というものがあります。

ただ、最初からインストールされているプラグインはなかなか削除しにくいものです。

Hello Dollyは世界ではじめて作られたWordPressのプラグインとして最初からインストールされていますが、削除してしまっても特に問題ないため削除してしまいましょう。

「プラグイン」→「インストール済みプラグイン」と進み
Hello Dollyの「削除」をクリックします。

これで余分なプラグインをひとつ削除でき、少しだけセキュリティが向上しました。




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://sologaku.com/wordpress/hello-dolly/

【WordPress】セキュリティ対策01(Edit Author Slug)

これは初めて知ったのでメモも兼ねて…

WordPressの初期設定では/?author=1にアクセスすると管理者のIDが分かってしまうため、セキュリティ上、弱い部分になります。
(リダイレクトでURLに管理者IDが出てしまう。)

Edit Author Slugというプラグインを使うと簡単にセキュリティをアップ出来ます。

Edit Author Slug

Edit Author Slug

まず、WordPressの管理画面上で
「プラグイン」→「新規追加」と進みEdit Author Slugで検索をします。
インストール→有効化し、次に

「ユーザー」→「ユーザー一覧」に進みます。
「管理者」のIDをクリックし、プロフィールの一番下までスクロールし、
「投稿者スラッグ」を初期設定から変更します。

これだけだとユーザーID=表示名になっている場合が多いので
同じページの中段…「ニックネーム (必須)」と「ブログ上の表示名」も変更すると完璧です。

このサイトの動作を確認してみてください。
https://www.uki213.com/memo/?author=1
(リダイレクトされてもIDではなく設定したスラッグの「1」がURLに出ます。)

設定内容としては、
「投稿者スラッグ」を上から二番目の数字(今回の場合「1」)
「ニックネーム (必須)」と「ブログ上の表示名」もそれに合わせて「1」に変更しています。

管理者を複数設定している場合は同様の設定変更を行っていきます。
(管理者は必要最低限にしたほうがセキュリティ対策としても良いかもしれません。)




WEBサイトの改ざん監視なら【SiteLock(サイトロック)】

参考:https://sologaku.com/wordpress/redirect-security/

【WordPress】カテゴリーを自由に並び替えるプラグイン(Category Order and Taxonomy Terms Order)

このサイトのサイド(PC)やハンバーガーメニュー(SP)にも表示されているカテゴリー
これの並び順を任意に変えることが出来るプラグインがあります。

Category Order and Taxonomy Terms Order

Category Order and Taxonomy Terms Order

このプラグインをインストールして有効化して、
管理画面の「投稿」→「タクソノミーの並び順」で自由に変更することが出来ます。

表(おもて)の表示も変更されますが、裏の管理画面の投稿画面のカテゴリーの表示順も変更され
投稿時に見やすくなります。

参考:https://www.infact1.co.jp/staff_blog/webmarketing/14991/

【Tools】マウス・キーボードのサポート(エレコム リストレスト FITTIO)

マウスやキーボードには手首をサポートをするリストレストを使うと身体への負担が一段と軽減します。

私はゲル素材で優しくサポートしてくれるエレコム リストレスト FITTIO MOH-FTPBKを使っています。

2021年に購入して毎日使っているので、少しヘタってきた気もするのでそろそろ買い替えタイミングかも…と思いつつ。

エレコム リストレスト FITTIO MOH-FTPBK

【Tools】冬の必需品(電気毛布)

電気代の節約もありますが、
頭寒足熱…全身を温めるよりも下半身を温めたほうが頭がボーっとせず仕事にも集中できます。

そんなことで冬の自宅での仕事に「電気毛布」は必需品

広電(KODEN)の電気毛布でサイズ130×80cmの小さめのものを使ってます。

広電(KODEN)の電気毛布

消費電力は40Wで、電気代は1時間当たり約0.61円なので一日中使用しても数円のコスト。8時間で自動OFFになる機能もついていて付けたまま寝てしまっても電気代を使いすぎることがなくとても便利です。

電気毛布は不思議な柄・模様のものも多いですが、これはブラウン一色でインテリアを損なわない見た目も良いです。

電気毛布の魅力を存分に語ってくれているコチラのYouTube動画も参考になります。
https://youtu.be/QulyerZaufo
https://youtu.be/UN-H6fbKyZY

【Tools】愛用のノート(ツバメノートA5無地)

普段使っているノートはツバメノートA5無地を使っています。

A5サイズ・無地・紙質が良い

この3つをポイントに探して行き着いたのが今使っているツバメノートです。

この3点を満たすノートって、意外とありそうでないんですよね…

ツバメノートA5無地

なぜA5のノートかというと…
・小型で持ち運びしやすい
・iPad miniとほぼ同サイズ
・見開きでA4コピー出来る
などなど。

【Tools】愛用のボールペン(カランダッシュ・ブラックコード)

仕事などで普段文字を書く時に愛用しているボールペンは
スイスの文房具ブランドのカランダッシュのボールペン、限定モデルのブラックコードを使っています。
オールブラックのマットなものです。

カランダッシュのボールペン

これに純正のインクではなく、リフィルアダプターを使って三菱鉛筆のジェットストリームを使っています。
打合せや講演・勉強などでガシガシ書き殴るには0.7mmの太めが書きやすいです。

普段ノートなど文字を書くときはボールペンしか使わないのですが、ブラックコードと同じくオールブラックのマット仕上げのシャーペン販売されないかな?と思っていたらいつのまにか発売されていますね。
しかも0.5mmこれは良いですね。

カランダッシュのシャーペン

【Tools】普段使いのプリンター(EPSON PX-K100)

仕事の打ち合わせ資料など普段使い用のプリンターは
EPSONのインクジェットプリンター PX-K100を使っています。
EPSON インクジェットプリンター PX-K100

インクジェットのモノクロ印刷のみですが、本体デザインもシンプルで価格も安く、互換インクも安いのでとても重宝しています。

購入自体は10年前で仕事用によく使うようになったのはここ数年とは言え…
電気製品で10年選手はなかなか強いですね…

今はAmazonで本体も中古で買えないし、互換インクも普段買っているお店での取り扱いがなくなってしまいました。

もし次買うとしたら、後継機のコレかな…
PX-K150
互換インクも現役で売ってそうです。
(用紙の給紙トレイがないのが仕事用の普段使いには向いてないかも…)
EPSON PX-K150

レーザープリンターのこっちのほうがいいかな…??
給紙トレイもあって、トナーとかも一応互換品あって、けっこう安く入手できそうだな。
リサイクル品もあるな…

【English】NHKラジオ英会話2023年1月号

NHKのラジオ講座「ラジオ英会話」は、英語学習において定番のプログラムです。
先日購入したこちらと同じ大西先生が担当しており、聴衆の幅広い年齢層に適しています。

講座は4月から始まりますが、新年の1月から始めるのも良いでしょう。

NHKラジオ英会話2023年1月号

NHKラジオ英会話2023年1月号

ラジオはもちろんのこと、音声はNHKのサイト上で聴くこともできます。

また、音声をダウンロードするためには、
https://wiki3.jp/NHK_hta
で提供されている方法を使うことでもできます。

今月のテーマ

限定詞・名詞関連・接続詞のイメージ イメージを隅々に

Week1

12月26日・1月2日 Lesson181 all、everyのイメージ
12月27日・1月3日 Lesson182 noのイメージ
12月28日・1月4日 Lesson183 otherのバリエーション
12月29日・1月5日 Lesson184 both、either、neither
12月30日・1月6日 Lesson185 今週のReview

Week2

1月 9日 Lesson186 人々一般を表す
1月10日 Lesson187 itの基本
1月11日 Lesson188 itを説明するリズム
1月12日 Lesson189 itを使って強調する
1月13日 Lesson190 今週のReview

Week3

1月16日 Lesson191 可算名詞・不可算名詞:基礎
1月17日 Lesson192 思いがけない不可算名詞
1月18日 Lesson193 可算名詞が不可算になるとき
1月19日 Lesson194 可算・不可算で意味が変わる名詞
1月20日 Lesson195 今週のReview

Week4

1月23日 Lesson196 主要接続詞①:流れのand
1月24日 Lesson197 主要接続詞②:選択のor
1月25日 Lesson198 主要接続詞③:流れを打ち消すbut
1月26日 Lesson199 主要接続詞④:because
1月27日 Lesson200 今週のReview

【CSS】色の透明度の指定(3パターン):opacity、RGBA、HEX(16進数)

CSSで色の透明度の指定は3パターンあります。
opacityとRGBAが有名ですが、その他にも通常のHEX(16進数)でも指定できます。

/* opacity */
.colorA{
    background-color: #000; /* rgb(0,0,0);も可 */
    opacity: 0.8;
}

/* RGBA */
.colorB{
    background-color: rgba(0,0,0,0.8);
}

/* HEX(16進数) */
.colorC{
    background-color: #000000CC;
}

opacityは背景色だけでなく指定セレクタ内に文字など他の要素があると、全て透明になってしまうので注意が必要です。

HEX(16進数)はよく使われる6桁#000000の末尾に透明度を16進数を2桁追加する8桁にする#000000CCという色指定なので、便利な一方、透明度を16進数で指定しなければならないため扱いにクセがあります。

透明度5%刻みの場合の16進数は以下のようになります。

不透明度(%) 16進数
100 FF
95 F2
90 E6
85 D9
80 CC
75 BF
70 B3
65 A6
60 99
55 8C
50 80
45 73
40 66
35 59
30 4D
25 40
20 33
15 26
10 1A
5 0D
0 00

参考:https://toriton.link/coding/opacity_colorcode/
https://totolog34.com/444/

【CSS】リセット用スタイルシート

各ブラウザごとにデフォルトの設定が異なり、
同じHTMLでも微妙に異なる表示となるため、仕事としてコーディングする場合、リセット用のCSSを一番最初に読み込むのが最近は定番になっています。

リセット用CSSもどこまでリセットするかなど様々な考え方もあり
世界中に無数のリセット用CSSが公開されています。

私は、YUI LibraryのCSS Resetをベースに自分なりにカスタマイズした下記のものを標準的に使っています。

YUIのリセット用CSSの一番大きな特徴はH1、H2など見出しタグも全て同じ文字装飾にリセットしている点です。

@charset "utf-8";
/*reset*/

html {
    color: #000;
    background: #fff;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
    font: 100%;
}

fieldset,
img {
    border: 0;
}

img {
    vertical-align: bottom;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: 400;
}

ol,
ul {
    list-style: none;
}

li {
    list-style-type: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 400;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
    font-size: smaller;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%;
}

legend {
    color: #333;
}

body {
    font: 12px "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Pゴシック", "MS PGothic", "Lucida Grande", sans-serif;
    letter-spacing: .2em;
    font-feature-settings: "palt";
}

.mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", "Times New Roman", Times, "HG明朝B", "MS 明朝", serif;
}

#container {
    overflow: hidden;
}

input[type=submit] {
    -webkit-appearance: none;
}

*:after {
    display: block;
    clear: both;
}

.cf {
    zoom: 1;
}

.cf:after {
    content: "";
}

@media (max-width:767px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    -o-box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
}

input,
textarea,
select {
    font-size: 16px
}
/*common*/

a {
    transition: all 0.3s linear;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

a:link,
a:visited {
    text-decoration: none;
    color: #666;
}

a:hover {
    text-decoration: none;
    color: #999;
}

button {
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none;
}

.cfはフロートをクリアするためのショートコードなので
floatではなく完全にflexboxでコーディングする場合、不要です。

フォントの指定も游ゴシックや游明朝も入れていますが、クセ(コーディング上の)も強いので場合によっては削除しても良いかもしれません。

#container {
overflow: hidden;
}

で、特にスマホで横ブレなど起きないように設定しています。

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
}

でpaddingやborderなどBOXの横幅に影響するものは全て「込み」で表示されるように指定しwidthの横幅指定からはみ出さないようにしています。

一部色指定なども入れているので、コーディングするデザインに合わせて一部改変して使っています。

2023.01.06 URLなど長い半角英数字をリンク内で折り返すようにCSS追加

HTMLテンプレートはこちら

【HTML】ベースになるHTMLテンプレート

HTMLをゼロベースから書くのは効率が悪いので
テンプレート用のHTMLを用意しておいたり、エディターのショートコードなどですぐに呼び出せる状態にしておくことが仕事でコーディングする場合、必要不可欠です。

私の場合は以下のようなHTMLを標準に使っています。

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>タイトル</title>
  <meta name="keywords" content="キーワード">
  <meta name="description" content="ディスクリプション">
  <link rel="icon" href="/favicon.ico" id="favicon">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/android-touch-icon-192x192.png">

    <!--GA-->

    <!--OGP-->
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/ fb# article: http://ogp.me/ns/ article#">
    <meta property="og:url" content="https://●●●.jp/">
    <meta property="og:type" content="article">
    <meta property="og:title" content="タイトル">
    <meta property="og:description" content="ディスクリプション">
    <meta property="og:site_name" content="名前">
    <meta property="og:image" content="https://●●●.jp/ogp.png">
    <meta name="twitter:card" content="summary_large_image">
    <!--OGP-->

    <!--CSS-->
    <link rel="stylesheet" href="./css/common.css" type="text/css" media="screen,print">
    <link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
    <link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">

    <!--JS-->
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
  </head>
  <body id="top">
    <div id="container">
      <div class="main">

      </div>
      <div class="ftr">
        <div class="copyright">Copyright &copy; 名前 All rights reserved.</div>
      </div>
    </div>
  </body>
</html>

レスポンシブ対応として
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=3">
特に最後のmaximum-scale=3はスマホで3倍までの拡大が出来ることで
ユーザビリティ・アクセシビリティを高めています。

CSSの読み込みも
<link rel="stylesheet" href="./css/sp.css" type="text/css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="./css/pc.css" type="text/css" media="screen and (min-width: 768px)">
上書きではなく、パソコンとスマホとを完全に分けて効率的にコーディング出来るようにしています。
(CSSを最小限にするために、SPファーストでコーディングし、PCで上書きが本来最もベストです。)

SNSでシェアされて拡散してサイトに訪問してもらうのが最近はメインになるのでOGPの設定も不可欠です。

PCの性能が向上したとは言え、表示スピードを意識したコーディングのほうが良いので、ヘッダーの読み込みはCSSを先、JSは後、としたほうが良いでしょう。

リセットCSSはこちら
ファビコンに関する詳細はこちら

【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行目はコピペで日本語の部分だけ
変更していけば、自動で英語に翻訳していってくれます。