【CSS】iOSのハンバーガーメニューがスクロールできない場合の修正方法

スマートフォンでハンバーガーメニューのコンテンツ量が多く
スクロールをさせたい場合、positionプロパティとoverflowプロパティを指定することがありますが、
iOSで以下のような設定をしてしまうとハンバーガーメニューのスクロールが効かなくなります。

  • positionプロパティがabsoluteまたはfixed
  • heightプロパティが固定幅(相対値、絶対値)
  • overflowプロパティがスクロール指定(autoやscroll)
  • -webkit-overflow-scrollingプロパティがtouch
  • 同じ要素にpositionプロパティとoverflowプロパティを指定

実際のcssで以下のような記述の場合、正常にスクロール動作しません。

.menu {
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

positionプロパティとoverflowプロパティを別の要素に指定するとスクロール出来るようになります。

/* 位置指定用 */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* スクロール用 */
.menu .inner {
    overflow: auto;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
参考:https://shanabrian.com/web/html-css-js-technics/css-ios-safari-02.php

【CSS】複数の背景画像の設置方法

CSSでひとつのクラスに複数の背景画像を設置することが可能です。
記述は以下のようになります。

background-image: A,B,C;
background-repeat: A,B,C;
background-position: A,B,C;
background-size: A,B,C;

具体的には以下のようになります。

.icon {
    background-image: url(./icon.svg), url(./icon2.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: 0 50%, 100% 50%;
    background-size: 10px, 15px;
}

参考:https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds

【Tools】YahooIDとPayPayの連携方法(元PHS 070のSMS未対応)

YahooIDとPayPayが連携できず、
連携しようとすると
「登録中の携帯電話番号にSMS送信ができない状態のため、PayPayに登録している携帯電話番号を変更してください。」というアラートが出てしまう場合があります。

これは登録が古く、070で始まる番号の元々PHSでSMSに対応していない時期に登録していることが原因のようです。

一度電話番号を削除し、再登録することでSMS受信が可能になり、連携も出来るようです。
(SMS対応している端末を使っているので、私は出来ました。)

携帯電話番号ログイン設定を解除する

https://support.yahoo-net.jp/PccLogin/s/article/H000004709

Yahoo! JAPAN IDに携帯電話番号を設定する

https://support.yahoo-net.jp/PccLogin/s/article/H000004666

【CSS】行末を三点リーダーで省略する

CMSなどでサイトを構築すると、
運用後のコンテンツ量がバラバラになるので、
デザイン崩れを抑えるために行数を設定しておき、溢れた分は三点リーダーなどで
省略しておくのがスマートなのではないかと思っています。

一行版

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

複数行版

最後の2が行数に対応する部分なので、三行であれば3に変更などすると行数を変更できます。

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

参考:https://and-ha.com/coding/clamp/

【Tools】WikipediaのURLを短縮する(ページID)

日本語のWikipediaのURLをそのまま使おうとすると、
日本語部分がエンコードされた状態で扱いづらい場合があります。

Wikipediaのページには固有の番号(ページID)が振られているので
そのIDを使って短いURLでページにアクセスすることも出来ます。

通常の日本語がエンコードされたURLを

https://ja.wikipedia.org/wiki/%E3%83%A1%E3%83%A1%E3%83%B3%E3%83%88%E3%83%BB%E3%83%A2%E3%83%AA

以下のように数字のみで表せるようになります。

https://ja.wikipedia.org/?curid=237821

URLを短縮したいページを開いて、ページ右上の「ページ」をクリックし開閉メニューの中の「ページ情報」をクリックします。
基本情報の「ページID」がこのページヘアクセスするIDになります。

[ID]にこの数字を入れたURLが短縮URLになります。

https://ja.wikipedia.org/?curid=[ID]

参考:https://sleepygamersmemo.blogspot.com/2017/06/wikipedia-url-shortener.html

【Tools】グラデーション参考サイト

グラデーションをPhotoshopやIllustratorで作るのは簡単ですが、
色の組み合わせや混ざり具合などがイメージしづらいこともあり、
サンプルがたくさん掲載されているサイトはとても参考になります。

https://www.eggradients.com/

グラデーション部分が画像になっているので
コピペして、Illustratorなどのツールに貼り付け、スポイトで色をとって
自分のグラデーションを作ります。

参考:https://twitter.com/ane_creator/status/1641025848932454400

【Google】ピクチャー・イン・ピクチャー(小窓)で動画を見る方法(Google Chrome拡張機能)

WBC決勝もあり、仕事をしながら配信を見たい人(配信を見ながら仕事をする??)が
多いのではないかと思います。

Google Chrome拡張機能として、Googleが出しているものに
Picture-in-Picture Extensionというものがあり、
こちらをインストールすると、AmazonPrimeでもYouTubeでも様々な動画配信が
ピクチャー・イン・ピクチャー(小窓)で見れるようになります。

使い方

公式ページにアクセスし
Picture-in-Picture Extension
画面右上の「Chromeに追加」をクリック

インストールしただけではブラウザ上に拡張機能のアイコン(下記画像の左)が表示されない場合があるので
その場合は、アメーバのようなアイコン(下記画像の右)をクリックし、ピンアイコンを色付きに変えます。

WBC決勝のページにアクセスし、配信を再生後、Picture-in-Picture Extensionのアイコンをクリックすると、ピクチャー・イン・ピクチャー(小窓)でで見れるようになります。

参考:https://tebikisyo.info/amazon/prime-video/picture-in-picture-2/
https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg?hl=ja&

【Google】iPhoneで録音したボイスメモを共有する方法(Googleフォーム)

iPhoneで録音したボイスメモを遠方の人と共有(送ってもらう)のに
いろいろ調べたけど、案外環境に依存する(Googleドライブアプリをインストールしてるか…とか)
方法しか紹介されてないなと、試行錯誤、最も環境に依存せず
ITの知識にも左右されない方法かな?と個人的に思ったので他の方にも役立つかもと思いメモ。

まずはGoogleフォームでファイル添付できるものフォームを作ります。
(共有だけならメールアドレスや個人情報は一切不要)

iPhoneで録音したボイスメモを共有する方法(Googleフォーム)

Googleフォームが出来たら以下の手順を相手に伝えます。
URLは先程作ったものをコピペ

Googleフォームの仕様上、ファイルサイズの上限が1GBになってしまうけど、
音声ファイルならそこまで大きくないので大丈夫かな?と。
同様に1GB以内なら動画でも大丈夫です。

■ボイスメモアプリでの操作
・ボイスメモの該当ファイルの○三点ボタンをタップ
 ↓
・「ファイルに保存」で分かりやすい任意の場所に保存(通常そのまま上部の保存タップでOK)
 ↓
■ブラウザでの操作(Googleフォーム)
・以下のURLにアクセス
(GoogleフォームのURL)
 ↓
・「ファイルを追加」をタップ
 ↓
・「BROWSE」→「ファイルを選択」をタップ
 ↓
(・ファイルがすぐ見つからない場合は検索窓から検索)
 ↓
・該当ファイルを選択→アップロードがはじまります(wifi環境推奨)
 ↓
・アップロードが完了したら「送信」ボタンをタップ
 ↓
・完了

【Tools】画像→ベクターデータへの変換

aiなどのベクターデータがない場合、
画像データをトレースして使ったりしますが、
トレースの手間を省きつつ、高精度にトレースしたい…という場面は多々あります。

イラストレーターの機能にもトレース機能がありますが、
まだまだ精度は高くありません。

オンラインのサービスでこれは結構精度が高かったです。
他にももっと良いサービスあるかもしれませんが。

https://picsvg.com/

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

NHKのラジオ講座「ラジオ英会話」
本年度の講座としては最後の3月です。

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

講座は新学期に合わせて4月から始まるので、
来期どの講座を受けるか3月中に他の講座などを試しに聞いてみるのも良いかもしれません。

音声をダウンロードするためのツールは、
https://wiki3.jp/NHK_hta
で入手できます。

今月のテーマ

発言の流れ(フロー)を作る重要表現

Week1

2月27日 Lesson221結果のフロー③
2月28日 Lesson222目的を表すフロー
3月1日 Lesson223条件を表すフロー①:ifの意図
3月2日 Lesson224条件を表すフロー②:そうしなければ
3月3日 Lesson225今週のReview

Week2

3月6日 Lesson226条件を表すフロー③:条件を表すさまざまなフレーズ
3月7日 Lesson227譲歩のフロー①:ifを使う
3月8日 Lesson228譲歩のフロー②:「変わらない」を表す表現
3月9日 Lesson229譲歩のフロー③:wh語を用いる
3月10日 Lesson230今週のReview

Week3

3月13日 Lesson231比較・対照のフロー
3月14日 Lesson232積み重ねるフロー①
3月15日 Lesson233積み重ねるフロー②
3月16日 Lesson234例を示すフロー
3月17日 Lesson235今週のReview

Week4

3月20日・27日 Lesson236焦点化のフロー①
3月21日・28日 Lesson237焦点化のフロー②
3月22日・29日 Lesson238話題転換のフロー
3月23日・30日 Lesson239まとめるフロー
3月24日・31日 Lesson240今週のReview

【WordPress】目次を自動的に付ける(Easy Table of Contents)

プラグインを使うと目次を自動的に付けることが出来ます。
様々なプラグインがありますが、Easy Table of Contentsが細かな設定が出来るので使いやすいです。

Easy Table of Contents

参考:https://www.onamae.com/column/wordpress/11/

【WordPress】カテゴリーIDからカテゴリー一覧ページへのURLを取得する

カテゴリーIDからカテゴリー一覧ページへのURLを取得するコードを記述しておくことで
カテゴリー名やスラッグを変更してもURLが自動的に修正されます。

※「カテゴリーID」には数字を入れます。

<?php echo esc_url(get_category_link('カテゴリーID')); ?>

参考:https://hacknote.jp/archives/6022/

【WordPress】記事に紐づいたタグの取得(get_the_tags)

WordPressの記事に紐付いたタグを取得するためのコードです。
get_the_tagsを使用します。

WordPressに登録されている全てのタグを取得する場合はget_tagsを使用します。
get_tagsの使い方はコチラの記事でサイドバーへのタグ一覧表示方法にて紹介しています。

基本

<?php the_tags('前', '区切り文字', '後'); ?>
タグ一覧の前に表示する文字列 初期値:「タグ: 」
区切り文字 タグ名とタグ名の間のに表示する文字列または記号 初期値:「カンマ(, )」
最後のタグの後ろに表示する文字列 初期値:なし

タグの名前だけを表示

下記の参考コードはタグ名の前後をspanで囲うようにしています。

<?php 
  $tags = get_the_tags();
  foreach ( $tags as $tag ) {
    echo '<span>' . $tag->name . '</span>';
  }
?>

その他

上の参考コードの4行目をそれぞれ変えると出力できます。

タグ名の出力 echo $tag->name;
タグのスラッグ名の出力 echo $tag->slug;
タグIDの出力 echo $tag->term_id;
タグの説明の出力 echo $tag->description;
タグに属する記事の数を出力 echo $tag->count;
タグのリンクだけを出力 echo get_tag_link($tag->term_id);

参考:http://kawatama.net/web/629
https://thewppress.com/libraries/get-the-tags-array/
https://design-tera.com/blog/archives/2387/
https://recooord.org/wordpress-get-the-tags/











【WordPress】記事に紐付いているカテゴリーをひとつだけ取得

記事に紐付いているカテゴリーをひとつだけ取得する場合、
一行の簡単なコードの記述で取得が可能です。

カテゴリー名の取得

<?php echo get_the_category()[0]->name; ?>

スラッグの取得

<?php echo get_the_category()[0]->slug; ?>

リンクURLの取得

<?php echo get_category_link(get_the_category()[0]->term_id); ?>

カテゴリーIDの取得

<?php echo get_the_category()[0]->cat_ID; ?>

参考:https://wordpress-web.and-ha.com/post-category-name-id-slug/

【FFmpeg】動画の余分な部分を無劣化でカットする

スマホで動画を撮影する際、
前後少し余分に撮影しておいて、ネットなどに上げる際や
友人と共有したいときに余分な部分をカットしたいことがあります。

FFmpegを使うと簡単なコードを書いたバッチだけで簡単にカット出来ます。
無劣化の場合、時間もエンコードなどのパワーを使わないのでほとんど時間も掛かりません。

iPhoneで撮影したものはmov形式で無劣化カットし、最後にmp4に変換すると効率的にカット圧縮できます。圧縮方法は、別記事のこちらを参考にしてください。

参考サイトには様々なカット方法が書かれていますが、以下の2つのコードの組み合わせで基本的にはほとんどの場合、カット出来るかと思います。

[duration]は秒数を入れます。

前半を残し、後半をカット

ffmpeg -i input.mp4 -t [duration] -c copy output.mp4

前半をカットし、後半を残す

ffmpeg -ss [duration] -i input.mp4 -c copy output.mp4

参考:https://nico-lab.net/cutting_ffmpeg/

【WordPress】カテゴリーの選択をひとつだけにする方法(カテゴリーのラジオボタン化)

WordPressで作り込んだデザインなどを実装する場合、
複数カテゴリーを選択できるより、ひとつの記事にひとつのカテゴリーとしておいたほうが
便利な場合が多くあります。

使用しているテンプレートのfunctions.phpに以下のコードを記述します。

//カテゴリーをラジオボタン化
function change_category_to_radio() {
  ?>
<script>
jQuery(function($) {
  // ラジオボタン化
  $('#categorychecklist input[type=checkbox]').each(function() {
    $(this).replaceWith($(this).clone().attr('type', 'radio'));
  });
  // 「新規カテゴリーを追加」を非表示
  $('#category-adder').hide();
  // 「よく使うもの」を非表示
  $('#category-tabs').hide();
});
</script>
<?php
  }
add_action( 'admin_head-post-new.php', 'change_category_to_radio' );
add_action( 'admin_head-post.php', 'change_category_to_radio' );

参考:https://junpei-sugiyama.com/wp-category-radio/

【WordPress】サイドバーにタグ一覧を表示する

WordPressのサイドバーにタグ一覧を表示するためのコードです。

記事に紐付いたタグの取得はコチラの記事をご参照ください。

登録されている全てのタグを表示

こちらはシンプルに登録されているタグを全て表示するだけのコードです。
登録されている全てのタグを取得するのでget_tagsを使います。

<ul>
  <?php
  $posttags = get_tags();
  if ($posttags) {
    foreach($posttags as $tag) {
      echo '<li><a href="'. get_tag_link($tag->term_id) .'">' . $tag->name . '</a></li>';
    }
  }
 ?>
</ul>

タグの表示件数を制限する

先程のコードは100件でも200件でも登録されただけタグが表示されてしまうので
上位○件というように表示件数を制限するコードになります。

6行目の'number' => 20という部分が20件表示の設定になるので
適宜デザインや登録件数に併せて変更してみてください。

<ul>
<?php
$args = array(
  'orderby' => 'count',
  'order' => 'desc',
  'number' => 20
);
$tags = get_terms('post_tag', $args);
foreach($tags as $value) {
  echo '<li><a href="'. get_tag_link($value->term_id) .'">'. $value->name .'</a></li>';
}
?>
</ul>

参考:https://shu-naka-blog.com/website/wp-taglist2/

【WordPress】現在のページのURLを取得するコード

WordPressでサイトを構築する際によく使うコード

今回は
「現在のページのURLを取得するコード」

<?php echo get_the_permalink();?>

参考:https://cms-hikaku-navi.com/column/5694/

【WordPress】ベーシック認証を使わずサイト全体にパスワード設定(Password Protected)

WordPressでサイトを構築する際や
公開前に記事を準備するのに、サイト全体にパスワード設定をして
見れない状態にしておきたいものです。

WP自体がhtaccessに設定を書き込んだりもするので
あまりいじりたくない部分であったりもするし、
AWSではhtaccessがデフォルト状態では使えないため
プラグインなどで設定するのが簡単です。

Password Protected

参考:https://kinsta.com/jp/blog/password-protect-wordpress-site/

【Google】英語でGoogle検索をする方法

Googleで検索するのが一般的になっていますが、
以前は英語サイトも検索対象にするなどの検索設定の変更が出来ましたが
最近では、日本国内から日本語で検索する場合、日本のサイトしか検索結果に引っかからないようになってしまいました。

普段はコレでも大きな問題はありませんが、
英語で調べたいときや、英語の言い回し(固有名詞や固有名詞的な使い方)が正しいかなど調べたいときには
英語のサイトが検索に出てこないのは不便です。

以下のURLにアクセスすると、英語のサイトが検索に出るようになります。

https://www.google.com/?gl=us&hl=en&gws_rd=cr&pws=0

パラメータで設定を強制的に変えています。
この設定は、アメリカ英語で検索と、
リダイレクトの無効化とパーソナライズの無効化をしています。

詳しくは、参考リンクからご確認ください。
アメリカを他の国に変えたり、言語を英語以外の言語にすることも可能です。

参考:https://www.suzukikenichi.com/blog/how-to-search-on-google-com-in-english-from-japan/

【Food】常温保存できる牛乳

コンビニやスーパーがどんなに近くにあっても
仕事が忙しいとその往復すら時間がもったいなかったりします。

特にコロナ以降、自宅で出来ること(仕事自体は勿論のこと、打合せなども)が増えたため、
外出する機会が減ったことも大きいと思います。

冷蔵庫や冷凍庫の容量も限りがあるので
缶詰やレトルトなど常温保存できる食糧を購入しておくのも
効率よく生活するために役立ちます。

最近リピートしているものが
常温保存できる牛乳

常温保存できる牛乳

コスパは良いとは言えないので、
外出したときは通常の牛乳を買って、外出頻度の低いときはこの常温保存できる牛乳を飲むなど使い分けると、コスパと利便性を少しだけ両立できるかもしれません。

※以前紹介した常温保存できる豆腐も便利です。

【WordPress】LightsailのWordPressをSSL化する方法

ウェブサイトのSSL化はSSHを使いコマンドで実行する必要がありますが、
Lightsailには、Bitnami HTTPS Configuration Toolという専用のツールが用意されています。

Bitnami HTTPS Configuration Toolは

・証明書の取得
・HTTPSへのリダイレクト
・www有・無(リダイレクト)
・cronでの自動更新

を設定してくれるツールになります。

複雑なコマンドを実行せずにSSL化する事が可能になる便利なツールです。

LightsailのWordPressをSSL化する手順

SSHクライアント、もしくはLightsailのコンソールから
コマンドを実行していきます。

1. 以下のコマンドを実行します。
※アップデートするか聞いてくる場合は「Y」と入力して、再度同じコマンドを実行します。

sudo /opt/bitnami/bncert-tool

2. Domain listにSSL化するドメインを入力します。

3. www付きのドメインが含まれていない場合、対象に含めるか確認されます。
含める場合は「Y」、含めない場合は「n」を選択してください。

4. HTTPからHTTPSへのリダイレクトを有効にするか聞いてきますので「Y」を入力します。

5. www無しのドメインからwww有りのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

6. www有りのドメインからwww無しのドメインにリダイレクトするか確認されます。
希望する場合は「Y」、しない場合は「n」を選択してください。

7. 設定内容が表示されるので確認します。

8. 証明書に関連付けるメールアドレスを入力します。

9. 契約内容が表示されるので確認します。問題なければ「Y」を入力します。
※契約内容にはリンクがあります。

10. SSL化の処理が正常に完了した場合「Success」と表示されます。

11. Enterキー押して完了です。

12. ウェブサイトが正常にSSL化されていることを確認します。

参考:https://soma-engineering.com/wordpress/set-ssl-letsencrypt-lightsail/2021/03/07/

【jQuery】クリップボードにコピーするボタンの設置

jQueryのみでクリップボードにコピーするボタンの設置する方法です。

ボタンのクリックでURLを値として取得し、
.successを表示してコピー完了した旨を知らせるという挙動です。

以下のHTMLとjQuery以外にも.successにCSSdisplay:none;などを適宜適用しておきます。

SNSのシェアボタンと並べて使うことを想定してaタグにしていますが、hrefを設定していないとマウスオーバーしてもポインターに変わらないので、CSSにcursor:pointer;も設定しておくと良いです。

SNSのシェアボタンと並べて使うことが多いのでこちらのページも併せて確認しておくと良いでしょう。

<a id="copy-url" data-url="https://sample.com/">リンクをコピー</a>

<div class="success">コピーしました</div>
$(function () {
    $('#copy-url').click(function () {
        // 値の取得
        const url = $(this).data('url');

        // コピー
        navigator.clipboard.writeText(url);

        // メッセージ表示
        $('.success').fadeIn("slow", function () {
            $(this).delay(2000).fadeOut("slow");
        });
    });
});

参考:https://ungifted.tech/blog/copy-to-clipboard/

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

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

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

【Tools】無印のボールペン ✕ ジェットストリーム

愛用のボールペンを紹介しましたが、
愛用のボールペン以外にもサブ用のボールペンを常備しています。

無印良品のアルミのボールペン
このボールペンは元々ZEBRAのサラサ用に設計されているようですが(無印の専用リフィルはサラサのOEM)
サラサとジェットストリームの互換型番があり、このジェットストリームのリフィルも使えます。
文房具店など安いところだと一本70円くらいからあり更に安価に購入できます。

入手のしやすさもそうですが、安さ・書きやすさとデザイン性のバランスがとれたとても良いボールペンです。

無印良品のアルミのボールペン

別の記事で無印のノートカバーの紹介もしているので是非ご一読ください。
https://www.uki213.com/memo/muji-notecover/

【HTML】ファビコンの設置方法

ファビコンの設置はファビコンファイル以外にも
スマホ用のアイコンと一部Androidで表示出来ない場合があるためAndroid用のアイコンの
ファイルとしては3つを最低限準備します。

解像度としては、16×16、32×32、180×180、192×192の4つになります。

favicon用・・・favicon.ico
スマホ用(iOS)・・・apple-touch-icon-180×180.png
Android用・・・android-touch-icon-192×192.png

<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">

もっと厳密に設置したい方はコリスの紹介方法を参考に設置するのが良いかと思います。
https://coliss.com/articles/build-websites/operation/work/how-to-favicon.html

HTMLテンプレートにもデフォルトで入れておくと便利です。
https://www.uki213.com/memo/html-template/

参考:https://blog.senseshare.jp/favicon.html
https://keywordfinder.jp/blog/seo/favicon/

【jQuery】slickでスライド枚数を数字で表示する方法(何枚目/総数)

slickでスライド枚数を数字で表示する方法
「何枚目/総数」という表示をするためのカスタマイズ方法です。

基本的な設置方法は以前の記事を参照ください。

$(function() {
  $('.slide').on('init', function(event, slick) {
    $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
    $('.current').text(slick.currentSlide + 1);
    $('.total').text(slick.slideCount);
  })
  .slick({
    // ここにオプションを記述
    autoplay: true,
    autoplaySpeed: 4000,
    infinite: true,
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    $('.current').text(nextSlide + 1);
  });
});

.slide ・・・ スライドさせる要素のclass名
.current ・・・ 現在何枚目のスライドか
.total ・・・ スライドの総数

参考:https://www.nxworld.net/jquery-plugin-slick-slide-counter.html
https://junpei-sugiyama.com/slick-slide-count/

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

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

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

【HTML】SNSシェアボタンの設置(Twitter、Facebook、LINE、note)

SNSシェアボタンの設置方法です。
Twitter、Facebook、LINE、noteのシェア方法の紹介になります。

SNSシェアボタンは、URLのコピーボタンも一緒に並べると利便性が高くなるのでこちらのページも併せて確認しておくと良いでしょう。

Twitterシェアボタン

Twitterシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://twitter.com/share?url=【シェアするURL】" target="_blank">Twitterでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

TwitterにはURL以外にも、以下のようなパラメータもあります。

パラメータ 説明
text デフォルトで入れておくテキストの設定です。
ページのタイトルを入れるのが良いでしょう。
via 「@◯◯さんから」という表示を追加できる項目です。
公式アカウントがあれば、そのidを設定しましょう。
related ツイート後に、フォローを促したいアカウントがある場合に設定する項目です。
公式アカウントがあれば、そのidを設定しましょう。
hashtags ハッシュタグを付けられる項目です。カンマ区切りで複数設定できます。

パラメータを追加すると以下のようになります。
全部のパラメータを追加しても良いですし、一部の追加でも良いです。

<a href="https://twitter.com/share?url=【シェアするURL】&text=【ツイートしたいテキスト】&via=【ツイート内に含むユーザ名】&related=【ツイート後に表示されるユーザー】&hashtags=【ハッシュタグ】" target="_blank">Twitterでシェアする</a>

Facebookシェアボタン

Facebookシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://www.facebook.com/share.php?u=【シェアするURL】" target="_blank">Facebookでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

LINEシェアボタン

LINEシェアボタンを設置する方法は
以下のコードを設置してください。

<a href="https://social-plugins.line.me/lineit/share?url=【シェアするURL】" target="_blank">LINEでシェアする</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

「noteで書く」ボタン

「noteで書く」ボタンを設置する方法は
以下のコードを設置してください。

<a href="https://note.com/intent/post?url=【シェアするURL】" target="_blank">noteで書く</a>

【シェアするURL】をシェアしたいサイトのURLにしてください。

参考:https://www.help-note.com/hc/ja/articles/360000272622–noteで書く-ボタン
https://www.gaji.jp/blog/2022/06/10/10057/
https://webdesign-trends.net/entry/3632

【CSS】効率的なコーディング作業04(セレクタの命名)

以前紹介したGoogleスプレッドシートを使ったclassの命名のための英語化の方法
より効率的にするGoogleスプレッドシートの関数の紹介です。

前回は日本語を英語にするだけのものでしたが、
更に、英語をclassに使いやすいように大文字を小文字に、スペースをハイフンにする関数です。

例:最新記事→New article→new-article

=LOWER(SUBSTITUTE(B2, " ", "-"))

「B2」は元のテキストを含むセルを示しています。
「SUBSTITUTE」関数がスペースをハイフンに置換し、
「LOWER」関数がテキストを小文字に変換します。

スプレッドシートには以下のように記述します。

   A B C
1 ja en
2 最新記事 =IF($A2<>"", GOOGLETRANSLATE($A2,$A$1,B$1),"") =LOWER(SUBSTITUTE(B2, " ", "-"))

【Food】常温保存のできる豆腐

Amazonで常温保存のできる豆腐を買ってみてとても便利だったので
今後リピート買いしようと思います。
常温保存できる牛乳もリピート中

森永 常温 絹とうふ 250g×12個

森永 常温 絹とうふ 250g×12個

豆腐だけだと味気ないので
ツナ缶とマヨネーズを載せてヘルシーなご飯にして食べると
美味しいだけでなく、保存が効くので自宅にストックしておいて
忙しい時や外出できないときのご飯にとても良いです。

はごろも オイル不使用シーチキンマイルド 70g (0272) ×24個

はごろも オイル不使用シーチキンマイルド 70g (0272) ×24個

豆乳マヨ

豆乳マヨ

豆腐の健康効果

豆腐は、低カロリー・高たんぱくで、
100gあたりのカロリーは、絹ごし豆腐で56Kcalとお茶碗1/3杯程度で、
糖質も低いため、ダイエットの強い味方になります。

また、イソフラボンやマグネシウムなどの栄養素も多く含まれており、
全体的な栄養素も高く、しっかりと栄養をとりたい方にもオススメです。

成分 木綿豆腐 絹ごし豆腐
エネルギー(kcal) 72 56
水分(g) 86.8 89.4
たんぱく質(g) 6.6 4.9
脂質(g) 4.2 3
炭水化物(g) 1.6 2
カルシウム(mg) 120 43

たんぱく質・リノール酸

豆腐は豊富なタンパク質を含み、コレステロールの減少や血圧の上昇の抑制に有効です。また、豆腐には多くのリノール酸が含まれており、コレステロールに効果的で、善玉コレステロールの増加に寄与します。高血圧やコレステロール値の不正な状態の改善に効果的で、動脈の硬化を防ぎ、脳出血や心筋梗塞などを予防することがメリットです。

レシチン・βコングリシニン

レシチンは不飽和脂肪酸からなる成分で、血管に付着したコレステロールを溶かすことや付着を防ぐことができ、動脈硬化の予防に役立つと期待されます。大豆に含まれるβコングリシニンは内臓脂肪を減らす効果があり、レシチンと一緒に作用して肝臓に多くの脂肪が溜まらないように防ぐこともできます。

レシチン・コリン

レシチンには、脳を活性化する役割を果たす成分であるコリンも含まれています。レシチンは神経細胞の材料になり、コリンはレシチンから分解されて情報を伝達する物質に変化します。この2つの成分によって、記憶力や集中力が高まるという特徴があります。

サポニン

サポニンは、豆腐の食感や風味を作り出す成分です。この成分には様々な健康効果があり、脂肪蓄積を防ぐこと、便通を改善すること、血栓を防ぐことなどがあります。サポニンは、成人病や老化を防ぐ栄養として注目されています。まだ多くのことがわかっていませんが一部の報告によると、がん発生やエイズの発症を抑制する効果もあると言われています。

イソフラボン

大豆から作られる豆腐に含まれる成分であるイソフラボンは女性ホルモンに似た作用をすると言われています。これにより、骨粗しょう症や更年期障害などの原因とされる女性ホルモンの減少を防ぐことができます。また、乳がんや前立腺がん、胃がんの予防にも効果があると考えられています。

オリゴ糖

豆腐の甘味をつかさどるオリゴ糖は、腸内の悪玉菌を減らし、免疫力を上げる「ビフィズス菌」のための栄養源となります。腸の働きを活発にし、発がん物質を分解する働きもあるので、排便を改善し、がん予防にも効果的です。

カルシウム

カルシウムは、骨や歯を作る栄養素です。カルシウム不足は、気分をコントロールするのにも重要です。豆腐はカルシウムが豊富で、他の食材と一緒に食べやすく、ビタミンDを含むものと一緒に食べることで、カルシウムの吸収をサポートできます。

ビタミン

豆腐には美容にいいビタミン類が多く含まれています。肌の調子を整えるビタミンE、皮膚や粘膜に働きかけるビタミンBなどが含まれています。肌を綺麗にするサポートをします。

参考:https://sharedine.me/categories/生活習慣病/article/effect-of-eating-tofu-every-day
https://prezo.jp/column/1282
https://www.ssnp.co.jp/soy/317040/

【Tools】Windowsの右クリック新規作成でutf-8の新規テキストファイルを作る設定に挑戦(失敗)

Windowsの右クリック新規作成でutf-8(BOMナシ)の新規テキストファイルを作る設定に挑戦します。
結論から言うと出来ませんでした…苦笑

以下のフォルダに
C:\Users\ユーザ名\AppData\Roaming\Microsoft\Windows\Templates
テンプレートになる新規テキストファイルをutf-8(BOMナシ)で保存します。

ファイル名は任意で良いですが仮にutf-8.txtとします。

regeditなどでレジストリエディターを起動し、
HKEY_CLASSES_ROOT\.txt\ShellNewを探します。

変更を加えるので、バックアップに保存をします。
右ペインにある「NullFile」を右クリック→削除します。
右ペインの空いている空間で右クリック→新規→「文字列値」とたどります。
新しく出来たエントリを「FileName」という名前に変更し、名前をダブルクリックして、「値のデータ」にファイル名「utf-8.txt」を指定します。
(フルパスを記述する必要はありません。)

原因

テンプレートファイルに全角文字が含まれていないため、
文字コードを認識できず、通常通りShift-JISで作成されてしまいます。

BOM付きや全角スペースなどをテンプレートに入れておけば可能かもしれませんが
BOM付きは当初のBOMナシではなくなってしまうため他の方法を見つけだら追記させていただきます。

参考:http://menushowdelay.blog.fc2.com/blog-entry-3168.html
http://tecopark.blogspot.com/2012/05/andoroidiphonewindows-cpphutf8.html

【jQuery】jQueryプラグインでのスライドショー・スライダーの実装(slick)

スライドショーをjQueryのプラグインを使って実装する場合、オプションの種類が豊富で、レスポンシブにも対応しているなど機能豊富なslickが使いやすいです。

slick

slickの準備

slick公式サイトの「get it now」からダウンロードします。

最低限必要なものはslick.js(もしくはslick.min.js)、slick.cssslick-theme.css、その他必要に応じてfontsフォルダajax-loader.gifも用意してください。

slickの読み込み

<!-- css -->
<link rel="stylesheet" href="./js/slick/slick.css">
<link rel="stylesheet" href="./js/slick/slick-theme.css">

<!-- js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="./js/slick/slick.min.js"></script>

HTML

 <ul class="slide">
   <li><img src="dummy1.png"></li>
   <li><img src="dummy2.jpg"></li>
   <li><img src="dummy3.jpg"></li>
 </ul>

JS

slickに簡単なオプションを付与した書式は下記となります。

$(".slide").slick({
  autoplay: true,
  autoplaySpeed: 4000,
  infinite: true,
});

レスポンシブ

レスポンシブでの書式は下記となります。

$('.slide').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  dots: true,

  responsive: [{
   breakpoint: 768, // ブレイクポイントを指定
    settings: {
     slidesToShow: 2,
     speed: 600,
    },
   },
  {
   breakpoint: 480,
    settings: {
     slidesToShow: 1,
     centerMode: true,
     centerPadding: '20%',
   },
  },
 ]
});

参考:https://zero-plus.io/media/jquery-slick/
https://releases.jquery.com/

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

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

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

【Google】Googleフォームに柔軟な自動返信機能を導入する

Googleフォームには標準機能として
自動返信をする機能もありますが、カスタマイズなど柔軟性が少ないため
少し導入ハードルは高いですが、GASを使うことで柔軟な自動返信機能を導入することが出来ます。

コードの準備

以下のコードを適宜編集し、GAS画面での設定の下準備をします。

18行目のvar NAME_COL_NAME = '名前';名前をGoogleフォームで設定した項目名に
19行目のvar MAIL_COL_NAME = 'メールアドレス';メールアドレスをGoogleフォームで設定した項目名に設定します。

9行目の自動返信メールの件名を設定し、11行目の本文を設定します。

23行目~27行目のメールの設定をします。
adminは基本的にGoogleフォームを設定したGoogleアカウントのメールになりますが、念のため入れておくのが良いです。
sendernameはそれの表示名になります。

その他必要に応じてccbccreplyなども設定します。
Googleフォームに紐付けたGoogleスプレッドシートで入力内容を確認出来ますが、bccに自分自身のメールを入れておくと新着の確認がしやすくなります。
adminと普段の運用メールが異なる場合はreplyも設定してください。(良くあるnoreply@~など)

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 // 件名、本文、フッター
 var subject = "【テスト】ご登録ありがとうございます。"; 
 var body
 = "ご登録ありがとうございます。\n株式会社テスト担当でございます。\n\n以下の通り、仮登録を承りました。\n2~3営業日以内に担当より追ってご連絡させていただきます。\n\n"
 + "------------------------------------------------------------\n";
 var footer
 = "------------------------------------------------------------\n"
 + "\n";

 // 入力カラム名の指定
 var NAME_COL_NAME = '名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin = "●●●@gmail.com"; // 管理者(必須)
 var sendername = "テスト担当";//送信者名(必須)
 var cc = ""; // Cc:
 var bcc = "●●●@gmail.com"; // Bcc:
 var reply = "●●●@gmail.com"; // Reply-To:
 var to = ""; // To: (入力者のアドレスが自動で入ります)


 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);

 // メール件名・本文作成と送信先メールアドレス取得
 for (var i = 2; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); // カラム名
 var col_value = rg.getCell(rows, i).getValue(); // 入力値
 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;

 // 送信先オプション
 var options = {from: admin};
 if ( cc ) options.cc = cc;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;

 // メール送信
 if ( to ) {
 MailApp.sendEmail(to, subject, body, options);
 }else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}

GAS画面での設定

GoogleフォームからGoogleスプレッドシートの関連付けをし、
Googleスプレッドシートのメニュー拡張機能Apps Scriptと進みます。

拡張機能→Apps Script

コードの貼り付け

以下の赤枠部分に準備したコードを貼り付けます。

コードを貼り付け

保存

保存

承認

承認が必要になるので、作成しているアカウントを選び以下の通り
「詳細」→「(安全でないページ)に移動」→「許可」と進んでいきます。

承認
詳細
(安全でないページ)に移動
許可

動作確認

「実行」を押して動作するか確認します。
このとき、Googleスプレッドシートの一番最後の行を実行するので確実にテスト用のデータ(自分に飛ぶ)ことを事前に確認しておいてください。

実行

トリガー設定

「時計マーク」を押して、「トリガーを追加」をクリックし、トリガー設定をします。
ポップアップ画面の「イベントの種類」を「フォーム送信時」に変更し保存します。

時計マーク トリガーを追加
「フォーム送信時」に変更

再度、承認画面が出てくるので同様に「許可」まで進めていきます。(二回目は多分下記のように英語です。)
許可をクリックしたら設定は全て完了です。

Advanced
Go to (unsafe)
Allow
参考:https://liapoc.com/googelform2.html

【HTML】Googleフォーム連携した静的なHTMLにreCAPTCHAを設置する方法

Googleフォーム連携した静的なHTML
reCAPTCHAを設置する方法です。
※この設定では、よくあるオリジナルの完了画面へのリダイレクトが出来ないかも…

reCAPTCHAのバージョンはV2での実装方法になります。
reCAPTCHA公式サイトよりV2でそれぞれサイトキーとシークレットキーを発行します。

HTML

必要な項目のinputタグを設定し、entry.0000000など該当する値に変えます。
formタグのactionは認証が完了したらPHP内に記述されたURLへ送信するのでhtmlへの直接的な記述は不要です。

<form name="gr_form">
    名前:<input type="text" name="entry.0000000" value="" placeholder="山田太郎"><br>
    メールアドレス:<input type="text" name="entry.0000000" value="" placeholder="メールアドレス"><br>
    <div id="gr_checkbox"></div>
    <input type="button" value="送信" disabled="disabled" id="gr_submit" onclick="trySubmit();" />
</form>

CSS

#gr_checkboxreCAPTCHA自体の表示に関するCSS、#gr_submit:disabledreCAPTCHA認証前の送信ボタン(非活性)のCSSです。

#gr_checkbox {
    display: table;
    margin: 10px auto;
}

#gr_submit:disabled {
    pointer-events: none;
    opacity: 0.5;
}

JS

最初に発行したサイトキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述します。
22行目の./gr_check.phpは設置場所に合わせてパスを修正してください。(同じ階層の場合はこのままで可)

<script src="https://www.google.com/recaptcha/api.js?onload=grOnloadCallback&render=explicit" async defer></script>
<script type="text/javascript">
    var grOnloadCallback = function() {
        grecaptcha.render('gr_checkbox', {
            'sitekey' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
            'callback' : grCallback,
            'expired-callback' : grExpiredCallback
        });
    };

    var grCallback = function(response) {
        document.getElementById('gr_submit').removeAttribute('disabled');
    };

    var grExpiredCallback = function(response) {
        document.getElementById('gr_submit').setAttribute('disabled', 'disabled');
    };
    
    var trySubmit = function() {
        if( document.gr_form.reportValidity() ) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', './gr_check.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4 && xhr.status === 200) {
                    if('' != xhr.responseText) {
                        document.gr_form.action = xhr.responseText;
                        document.gr_form.method = 'POST';
                        document.gr_form.submit();
                    }
                }
            }
            var gr_response = document.getElementById('g-recaptcha-response').value;
            xhr.send('response=' + gr_response);
        }
    }
</script>

PHP

最初に発行したシークレットキーをxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxに記述し、
https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponseを該当する値に変え、
ファイル名をgr_check.phpにして下記のコードを記述し保存します。

<?php
    $token = $_POST['response'];
    if($token) {
        $url = 'https://www.google.com/recaptcha/api/siteverify';
        $secret_key = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $response = file_get_contents("{$url}?secret={$secret_key}&response={$token}");
        $json = json_decode($response, true);
        if($json['success'] == 'true') {
            echo 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzz/formResponse';
        }
    }
?>

参考:https://migi.me/javascript/google-recaptcha-ajax/

【Tools】効率的な本の読み方(Kindleと読み上げソフト)

本を読むのが苦手で、
本を買っても後回しにして、なかなか読めなかったりします。

最近、Kindle for PCと読み上げソフトの「詠太」を使って
効率的に本を読むようにしています。

黙読だと難しい漢字が出てきて読めないとモヤモヤした状態のまま読み進めることになり、
集中力が途切れがちになり、本を読むことを中断してしまったりと、どうしても本を読むことを後回しにしてしまいます。

読み上げソフトの「音読」と、目で文章を追う「黙読」とを組み合わせることで、
読めない漢字が軽減するのと同時に、目と耳ふたつ同時に情報がインプットされることで
本の内容がアタマに入りやすくなります。

ただ、Kindle for PCにはコピー制限があり、
本をまるまるコピーすることはできません。

一手間かかってしまいますが、

Kindle上で読み上げたい文章を選択→(右クリック)→「ウェブを検索する」→ブラウザの検索窓からコピー

で、1000字以上の文字数でもコピーできるので通常の1ページ分であればコピーできます。

個人的に「詠太」は使いやすいと思いますが、
有償のソフトウェアであることや、単体購入できないなど入手のしづらさなどもあるので、
パソコンの標準機能や、フリーソフト、Webサービスなど様々読み上げツールはあるので
自分に適したものを探すのも良いかもしれません。

参考までに…「吾輩は猫である」を「詠太」で読むと、読みが怪しい部分もありますが大体問題ないレベルではないかと思います。

私はMISAKIという女性の声の設定にしています。
この声質が一番聞きやすかな?と思います。

参考:https://localhost8888.net/amazon/304/

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

NHKのラジオ講座「ラジオ英会話」が1月に続き、2月も放送されます。大西先生が担当しています。

講座は4月から始まりますが、新年に続いて2月も頑張って学習することで、英語力をアップすることができるでしょう。

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

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

音声をダウンロードするためのツールは、
https://wiki3.jp/NHK_hta
で入手できます。

今月のテーマ

接続詞 発言の流れ(フロー)を作る

Week1

1月30日 Lesson201 主要接続詞⑤:when
1月31日 Lesson202 主要接続詞⑥:while
2月 1日 Lesson203 主要接続詞⑦:though、although
2月 2日 Lesson204 主要接続詞⑧:thoughの軽さ
2月 3日 Lesson205 今週のReview

Week2

2月 6日 Lesson206 主要接続詞⑨:if──基本
2月 7日 Lesson207 主要接続詞⑩:if──二択
2月 8日 Lesson208 主要接続詞⑪:ifを用いたさまざまな表現
2月 9日 Lesson209 主要接続詞⑫:as──同時性
2月10日 Lesson210 今週のReview

Week3

2月13日 Lesson211 主要接続詞⑬:as──「=」に基づくそのほかの使い方
2月14日 Lesson212 時のフロー①
2月15日 Lesson213 時のフロー②
2月16日 Lesson214 理由・原因のフロー①
2月17日 Lesson215 今週のReview

Week4

2月20日 Lesson216 理由・原因のフロー②
2月21日 Lesson217 理由・原因のフロー③
2月22日 Lesson218 結果のフロー①
2月23日 Lesson219 結果のフロー②
2月24日 Lesson220 今週のReview

【WordPress】VisualStudioCode風の配色(Highlighting Code Blockのカスタマイズ)

以前の記事で紹介しているように
普段のテキストエディタはEmEditorを使っているで
VisualStudioCodeは使っていないのですが、
コードの配色が落ち着いていて玄人っぽさが出るかな?と
このサイトのHighlighting Code Blockでコード表示しているものをVScode風に変えてみました。

以下のCSSを適用テンプレートのCSSなどに追記すると変更されます。
/* VSCode */
.hcb_wrap.hcb_wrap code, .hcb_wrap.hcb_wrap pre { color: #9cdcfe!important; background: #1e1e1e!important;}/* 全体 */
.token.keyword { color: #c586c0!important;}/* 予約語 */
.token.keyword.def { color: #569cd6!important; font-style: initial!important;}/* 予約語def */
.token.string { color: #ce9178!important;}/* 文字列 */
.token.comment { color: #7ba85f!important;}/* コメント */
.token.class-name {color: #38cdae!important;}/* クラス名 */
.token.function { color: #dcdcaa!important;}/* 関数 */
.token.operator, .token.punctuation { color: #c8c8c8!important;}/* 演算子・記号(句読点) */
.token.number { color: #bcd2b0!important;}/* 数字 */
.token.boolean { color: #569cd6!important;}/* ブール */
.token.interpolation .token.punctuation { color: #569cd6!important;}/* リテラル内の記号(句読点) */
.token.builtin { color: #e3e3e3!important; font-style: initial!important;}/* 組み込み */

参考:https://youonly.net/wordpress-highlighting-code-block-vscode/

【HTML】AMPのcanonicalタグ

AMPページのcanonicalタグは
本体ページと対になるように以下のように記述します。

canonicalタグのURLは必ず絶対パスで記述します。

本体ページ

// 本体のページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
  <link rel="amphtml" href="https://uki213.com/sample/amp/">
</head>

AMPページ

// AMPページ
<head>
  <link rel="canonical" href="https://uki213.com/sample/">
</head>
参考:https://www.e-webseisaku.com/column/marketing/1883/

【WordPress】httpをhttpsに運用後に変えた際のGoogleアナリティクスとサーチコンソールの設定変更

運用を始める前にSSLの設定などをして、最初からhttpsでの運用が望ましいですが、
httpで運用をはじめて、途中からhttpsに切り替えることも多いと思います。

httpをhttpsに途中から、運用後に変えた場合の
Googleアナリティクスとサーチコンソールの設定変更の仕方です。

httpからhttpsへのリダイレクト設定はこちらをご確認ください。
https://www.uki213.com/memo/wordpress-redirect-setting/

Googleアナリティクスの設定変更

httpのままでも特に問題なく計測出来るようですが、
httpsで運用する場合、httpsに修正しておいたほうが良いでしょう。

画面サイドの「歯車マーク」→「データストリーム」とクリック。
Googleアナリティクスの設定変更

Googleアナリティクスの設定変更

「鉛筆マーク」をクリック。
Googleアナリティクスの設定変更

httpをhttpsに変更し「ストリームの更新」ボタンをクリックします。
Googleアナリティクスの設定変更

サーチコンソールの設定変更

サーチコンソールは既存の登録の変更はないため、httpsで新たに登録し直し適宜httpの古い登録を削除します。

参考:https://dadadaweb.com/wordpress-really-simple-ssl/

【WordPress】最速で検索エンジンにインデックス登録させる方法(たぶん)

2023.01現在でたぶん…
Googleサーチコンソールで1ページずつURLを登録するのが一番確実で一番早く検索エンジンにインデックス登録させる方法かもしれません。

Googleサーチコンソールの一番上部の検索窓(赤枠)に各ページのURLを入力し、
インデックス登録をリクエスト(赤枠)」をクリックします。

最速で検索エンジンにインデックス登録させる方法

これで通常、24時間以内にインデックスされます。
WordPressの最低限のSEO対策をしておくとインデックスの効果を最大限に活かせるかもしれません。

検索順位を調べるなら、検索順位チェックツールGRC



集客できるウェブ担当者になろう!【SEO検定】

【WordPress】外部リンクにアイコンを付ける(画像にはアイコンを付けない)

WordPressで自動的に外部リンクにアイコンを付け、
画像にはアイコンを付けないような設定をしてみます。

プラグインでも出来ますが、今回はfunctions.phpへのコードの追記と
CSSの設定だけで実現できるもの。

WordPressのテーマ内のfunctions.phpに以下のコードを追加します。

// 外部リンクにアイコンを付ける
add_filter( 'the_content', 'add_external_content', 12 );
function add_external_content( $content ) {
$add_img = 0; // img(画像での外部リンク)にもアイコン付ける場合は 1 付けない場合は 0
preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

$my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

foreach( array_unique( $link_array[0] ) as $link ) {
$replaced = $link;

if( !preg_match( "/href=['|\"]?\s*?${my_url}[^>]+?['|\"]/i", $link ) ) {
$replaced = str_replace( ">", " class=\"external ext_icon\">", $replaced );
$content = str_replace( $link, $replaced, $content );
if( !$add_img ) {
// img の時はアイコン消す(class="external" は残す)
$content = preg_replace(
"/(<a[^>]+?href[^>]+?external) ext_icon([^>]+?>\s*?<\s*?img[^>]+?src[^>]+?>\s*?<\/a>)/is",
"$1$2",
$content
);
}
}
}
return $content;
}

CSSには以下を追加し、CSSと同階層にlink-icon.svgをアップロードします。
※ファイル名や設置場所は適宜変更してください。

a.ext_icon[target="_blank"] {
background: url(./link-icon.svg) 100% 50% no-repeat;
padding-right: 15px;
margin-right: 2px;
}

aタグのあとに改行が入るとテキストと認識してしまうため、アイコンの付与にCSSには.ext_iconだけではなく、[target="_blank"]も判断基準に付け加えています。

参考:https://www.iscle.com/web-it/wp/external-link-icon.html
http://thk.kanzae.net/net/wordpress/t1316/
https://fukuro-press.com/wp-way-to-add-icon-to-ext-link/

【WordPress】WordPressでのSEO対策

WordPressでのSEO対策として
最低限やったほうが良いものをまとめていきます。

サーチコンソールがパンくずやAMPも登録されるため、
パンくずやAMPを設定後、サーチコンソールに登録するのが良いと思います。

SSL設定(サーバー・htaccess)
・(Really Simple SSLプラグインのインストール)・・・htaccessなどで設定している場合は不要
 ↓
Googleアナリティクスの設置
 ↓
All in One SEOプラグインのインストール
・(サイトマップ系プラグイン(XML Sitemaps)のインストール)・・・All in One SEOでも生成できるので、All in One SEOを入れている場合は不要
 ↓
・(パンくず系プラグイン(Breadcrumb NavXT)のインストール)・・・テンプレートにパンくずがある場合は不要。カテゴリーが複雑な場合など使用すると良い。
 ↓
・(AMPプラグイン(AMP for WP)のインストール)・・・更新頻度の高い場合はキャッシュに注意
 ↓
サーチコンソールへのサイトマップXMLの登録
・(サーチコンソールへの個別ページURLの登録
 ↓
WebSubプラグインのインストール
 ↓
PageSpeed Insightsでの最適化

場合によっては、キャッシュ系のWP Super CacheプラグインをインストールするとHTMLベースのページになり表示も軽くなり、PageSpeed Insightsの点数も上がります。

検索順位を調べるなら、検索順位チェックツールGRC





集客できるウェブ担当者になろう!【SEO検定】






【WordPress】インデックス登録を早める方法(WebSub)

検索エンジンに認識され検索出来るようになる状態を「インデックス登録」と言います。

WebSubよりもサーチコンソールに1ページずつURLを登録するのが(もしかしたら)一番確実で一番早くインデックスされるかも。。。(2023.01現在調べ)

通常はGoogleサーチコンソール(通称:サチコ)の「サイトマップの送信」などをしてGoogleに登録します。

WordPressには、これ以外にもサイトの更新をいち早くGoogleの検索エンジン伝えてくれるプラグインがあります。

WebSub (FKA. PubSubHubbub)
WebSub (FKA. PubSubHubbub)
※FKA.とは、formerly known asの略で「以前は…として知られていた」という訳で「旧名称」や「旧」という意味です。

インストール方法

管理画面の「プラグイン」→「新規追加」から
「WebSub」で検索します。
インストール→有効化したら完了です。

WebSubの仕組み

WebSub(旧:PubSubHubbub)は、WordPressの新しい記事を検索エンジンに対して瞬時に通知する仕組みです。
Googleは近年、ロボットによるクローリングに頼らない、WebSubを利用したインデックスに取り組んでいます。

通常、GoogleのクローラーがサイトマップXMLなどを定期的に巡回し更新情報を取得します。
この仕組みではGoogleのクローラーが巡回に来るまで新しい記事は検索エンジンにインデックスされないことになってしまいます。

WebSubを利用することで、新しい記事の公開と同時に通知され、検索エンジンにインデックスされるようになります。

参考:https://the-simple.jp/wordpress-websubpubsubhubbub
https://netaone.com/wp/pubsubhubbub/
https://ja.wikipedia.org/wiki/WebSub

検索順位を調べるなら、検索順位チェックツールGRC





集客できるウェブ担当者になろう!【SEO検定】

【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/