【WordPress】アップロードのファイル容量の拡張方法(さくらサーバー)

さくらサーバーではhtaccessでファイルアップロードの容量を拡張設定をします。

WordPressのデフォルトの設定の【前】に追記していきます。

php_value upload_max_filesize 10M
php_value post_max_size 10M
php_value memory_limit 10M
php_value max_execution_time 300
php_value max_input_time 300

最後の2行の記述が抜けると正常動作しないので気をつけてください。

php_value max_execution_time 300
php_value max_input_time 300

関連記事:https://www.uki213.com/memo/expand-file-capacity/

参考:https://help.servmask.com/2018/10/27/how-to-increase-maximum-upload-file-size-in-wordpress/
https://www.sejuku.net/blog/63154

htaccessで特定のIPからのアクセスを除外する

htaccessで特定のIPからのアクセスを除外する方法です。
スパムなど悪意のあるアクセスや攻撃を未然に防ぐためにも一度スパムや攻撃を受けたIPはアクセスの除外設定をしたほうが良いでしょう。

コードとしては以下のものを記述します。

order allow,deny
allow from all
deny from xxx.xxx.xxx

各行の意味は…

order allow,deny
allow(許可)、deny(拒否)の順番を意味

allow from all
(特定のホスト以外の)アクセス全てを許可すると言う意味

deny from xxx.xxx.xxx
アクセス制限をかけるホスト、IPを指定。複数指定する場合は、1行ずつ指定。

複数の場合は以下のように記述します。

order allow,deny
allow from all
deny from xxx.xxx.xxx
deny from yyy.yyy.yyy
deny from zzz.zzz.zzz

参考:https://lolipop.jp/manual/hp/htaccess-03/

Contact Form 7の各パーツにclass、idを付ける

Contact Form 7の各パーツにclassやidを付けます。
画面上からの選択ボタンで入力することも出来ますが、
テキストで直接入力していったほうが早いので簡単なものは覚えておくと便利です。

送信ボタン

class、idの記述順序を間違うと反映されないみたいなので注意が必要…
「送信する」などのテキストラベルの前にclassやidを記述しないと反映されないようです。

[submit class:aaa id:bbb "送信する"]

複数のclassを付ける

複数のclassを付ける場合、以下のようにします。
class:”aaa bbb ccc”のようにまとめたカタチではなく、class:aaa class:bbb class:cccと各class分割したカタチで記述します。

[email* your-email class:aaa class:bbb class:ccc]

selectボックスの初期値

selectボックスに初期値として「選択してください」を入れておきたい場合は
first_as_labelを使用し以下のように記述します。

[select* birthday first_as_label "選択してください" "aaa" "bbb" "ccc"]

参考:https://contactform7.com/ja/submit-button/
https://tech.kurojica.com/archives/15404/
https://tips.adrec-dept.com/wordpress/1596/

Windowsの警告音を消す方法

Windowsを使っていると、様々な警告音が出ます。
普段作業しているときは自分だけの問題で済みますが、zoomなどオンライン会議などしていると
この警告音が気になったりします。

警告音を消す方法は以下になります。

Windows10と11ほぼ同じなので、私が普段使っている10に準拠して説明します。
参考サイトに11の設定方法が書かれているので、11の方はそちらをご参照ください。

1.「通知領域」の「スピーカー」アイコンを右クリック→「サウンド(S)」をクリック

2.「サウンド」タブをクリック→「サウンド設定(H)」欄から「サウンドなし」を選択

3.「OK」をクリック→完了

参考:https://remote.east-flets.net/faq/133

YouTubeの角丸を四角にする方法

YouTubeのデザイン変更によって、再生される動画が角丸になりました。
(著作権などの注意は必要ですが…)動画をキャプチャする際、
角丸の背景が映り込んでしまい変なキャプチャになってしまいます。

都度、デベロッパーツールからCSSの調整なども可能かもしれませんが…
それを防止する方法があります。

Chromeの拡張機能で半永久的に四角にすることができます。

https://chromewebstore.google.com/detail/youtube-unrounded-thumbna/lkklpbhnojokmlapmkpkpphbhakmeifo

YouTubeの角丸を四角にする方法

参考:https://hatsumeihakken.com/ytkadomaru/

reCaptcha認証が通らない場合の動作検証(エラー画面の表示確認)

reCaptchaをフォームなどに実装すると正常な場合の動作検証は可能ですが
認証を通らない場合の動作検証はなかなか難しかったりします。

reCaptcha認証が通らない場合にエラー画面が正しく表示されるかを検証するには、以下の手順を実施します。

無効なトークンをシミュレートすることで、認証失敗時の動作をテストします。

フォーム内に以下のタグを設置します。

<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response" value="invalid-token">

reCaptchaのVer.2の場合、ロボット認証をチェックするとvalue部分が正常なトークン値に書き換えられてしまうので、ブラウザのデベロッパーツールなどで適当な値に書き直します。

送信をして、エラー画面が表示されれば動作検証完了です。

reCaptchaの実装方法は以下の記事にも書いていますが、
https://www.uki213.com/memo/google-form-static-html-recaptcha/
Googleフォームへの送信とエラー画面の表示を切り分けるPHPは以下のような記述となります。

<?php
  $recaptcha_secret_key = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
  $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret_key."&response=".$_POST['g-recaptcha-response']);
  $response = json_decode($response, true);
  if ($response["success"] === true) {
    // reCAPTCHA認証が成功した場合、Googleフォームに値を送信する処理をここに記述
$redirect_url = 'https://docs.google.com/forms/u/0/d/e/zzzzzzzzzzzzzzzzzzzzzzzzzzzz/formResponse';
    //307 (Temporary Redirect)でリダイレクトして通常のフォーム投稿の処理
    header('Location: '.$redirect_url, true, 307);
  } else {
    // reCAPTCHA認証が失敗した場合、エラーメッセージを表示する処理をここに記述
    $error_url = 'https://sample.jp/test/error.html';
    header('Location: '.$error_url, true, 307);
  }
?>

【jQuery】メディアクエリーの幅に応じてjQueryも切り替える

レスポンシブでサイトを作ると、
PCとスマートフォン(SP)でjQueryの設定も横幅に合わせて切り替えたい場合が多々発生します。

カードデザインなど、カードを縦横並べるようなデザインだと
PCとSPで並べる数が変わってきます。
jquery.tile.jsなどを使ってカードの枠自体の高さを揃えたり、カード内の見出しやコンテンツの高さを揃えたりしますが、横並びの数が変わると変な隙間が出来てしまったり、少し不格好なデザインになりがちです。

jquery.tile.js自体の設定でもブレイクポイントを設定することは出来ますが、もっと汎用的に使えるように…

if (window.matchMedia("(max-width: 768px)").matches) {
// windowのサイズが768px以下
}else{
// windowのサイズが768px以上
}

このコードを使うと、例えば以下のような記述になります。
SPのboxは一列、PCのboxは二列となる場合…

if (window.matchMedia("(max-width: 768px)").matches) {
// windowのサイズが768px以下
$(function() {
    $('.box').tile(1);
    $('.card').tile();
});
}else{
// windowのサイズが768px以上
$(function() {
    $('.box').tile(2);
    $('.card').tile();
});
}

PC・SP共通で使うJSはこのコードの外に記述して、
PCとSPで設定を変えたい場合やPCのみ・SPのみの場合、それぞれ記述するだけで簡単に使えます。

参考:
https://appdev-room.com/js-q-responsive
https://frontend.seeknext.co.jp/responsive-js/

【jQuery】validationengine.jsのエラー位置の設定

jQueryで動作するvalidationengine.jsは便利ですが、
エラーの表示位置がデフォルトだと「右上」で、スマホなど幅の狭いデザインでは少し問題が起きてしまいます。

エラーの表示位置を「左上」もしくは「左下」にすると問題は解消されます。

デフォルト(「右上」)

$(function() {
jQuery("#form1").validationEngine();
});

「左上」に設定する

$(function() {
jQuery("#form1").validationEngine(
'attach', {
promptPosition: "topLeft"
}
);
});

「左下」に設定する

$(function() {
jQuery("#form1").validationEngine(
'attach', {
promptPosition: "bottomLeft"
}
);
});

参考:
https://www.rootstyledesign.com/blog/「validationengine.js」でフォームの入力をチェックする

【WordPress】アップロードのファイル容量の拡張方法(お名前サーバー)

お名前.comレンタルサーバー
ファイルアップロードの容量を拡張するのは少しクセがあります。

一般的なサーバーではhtaccessなどで設定しますが、
お名前.comレンタルサーバー php.iniで設定します。

php.iniを各ドメインのルートディレクトリに設置することで
ファイル容量を拡張できます。

下記の設定は50MBに拡張する場合の記述例です。
50の数字を変えることで上限を変更できます。

全て同じ数字にしておくのが一番簡単ですが、
「memory_limit」の数値が一番大きく、「upload_max_filesize」が一番小さく設定する必要があります。
上からmemory_limit > post_max_size > upload_max_filesizeという関係にします。

[PHP]
memory_limit = 50M
post_max_size = 50M
upload_max_filesize = 50M
[/PHP]

WordPressの移行などにAll-in-One WP Migrationを使う場合にファイル容量の拡張が必要になる場面が多いので覚えておくと便利です。

参考:https://kikushima-japan.co.jp/work-blog/お名前レンタルサーバーのファイルアップロード/
https://www.vektor-inc.co.jp/post/upload_max_filesize/

【Adobe】Adobe製品の値上げとオンラインスクールのAdobe学割

SNS上で3/5からのAdobe製品の値上げに関して話題に上がっています。
学割を使うとコンプリートプランを購入する場合、安くなります。

放送大学の学生(※)になって学割を使うというハックも一部SNSで出ていますが、
Adobe学割を使うためだけならアドバンスクールオンラインデジハリなどのオンライン講座の学割のほうがお得かも知れません。
(Adobe以外の学割も使いたい場合は放送大学の学生も選択肢に入るかも)
※科目履修生は学割NG、全科履修生は学割OKみたいなので学割目的の場合キチンと確認したほうが良いかも。

Adobe通信講座なら【アドバンスクールオンライン】

Amazonで例年2/20前後(今年は2/17~3/3が有力そう)にセールをするという噂もあるのでそこでライセンス購入するのも手かも。
Adobe Creative Cloud

デザインにPhotoshopとIllustratorしか使わないなら
フォトプラン20GB(公式からしか購入できない)と

Illustratorの単体版を購入するのが安く抑えられるかも。
Adobe Illustrator

リンクは一年版ですが、場合によっては三年版を購入するとか。
個人利用(フリーランス含む)のAdobe製品の経費も切実に考えなければ…ですね。

以下が3/5以降の新旧価格変更の比較表です。


製品 支払いプラン 旧価格 新価格
コンプリートプラン 月々プラン月々払い 10,280円 12,380円
年間プラン月々払い 6,480円 7,780円
年間プラン一括払い 72,336円 86,880円
単体プラン※ 月々プラン月々払い 3,828円 4,980円
年間プラン月々払い 2,728円 3,280円
年間プラン一括払い 28,776円 34,680円
Lightroom
1TB
年間プラン月々払い 1,078円 1,180円
年間プラン一括払い 12,936円 14,080円
フォトプラン
20GB
年間プラン月々払い 1,078円 1,180円
年間プラン一括払い 12,936円 14,080円
フォトプラン
1TB
年間プラン月々払い 2,178円 2,380円
年間プラン一括払い 26,136円 28,480円
InCopy 月々プラン月々払い 968円 1,080円
年間プラン月々払い 638円 680円
年間プラン一括払い 6,336円 6,780円
Adobe Substance 3D
テクスチャリング
月々プラン月々払い 2,398円 2,680円
年間プラン一括払い 26,818円 29,980円
Adobe Substance 3D
Collection
月々プラン月々払い 6,028円 6,680円
年間プラン月々払い 5,808円 6,480円
年間プラン一括払い 67,078円 74,380円
学生教職員版
初年度
年間プラン月々払い 1,980円 2,180円
年間プラン一括払い 23,760円 26,162円
学生教職員版
2年目
年間プラン月々払い 3,278円 3,610円
年間プラン一括払い 39,336円 43,322円
Adobe
Express
月々プラン月々払い 1,078円 1,180円
年間プラン一括払い 10,978円 11,980円



【WordPress】WP-PageNaviで2ページ目以降が404になる問題の修正

WordPressにプラグインのWP-PageNaviを使ってページネーションを表示する場合、
2ページ目以降が404エラーになってしまう場合があります。

通常、パーマリンク設定やクエリの設定に関連している場合が多いですが、
以下のステップで問題の所在を確認していきます。

1. パーマリンク設定の確認

WP-PageNaviを正しく動作させるには、WordPressのパーマリンク設定が適切に構成されていることが重要です。WordPressの管理ダッシュボードから「設定」→「パーマリンク」に移動し、パーマリンク設定を確認します。一般的な設定としては、「投稿名」を選択することが多いです。設定を変更した場合は、設定を保存して変更を反映させてください。

2. functions.phpファイルの確認

functions.phpファイルにはページネーションに関連するカスタムクエリが記述されている場合があります。ページネーションのクエリが正しく設定されていることを確認します。

記述や設定がされている場合、そのコードがページネーションを正しく処理するようになっていることを確認します。また、このコードが他のカスタムルールと競合していないかも確認します。

3. WP-PageNaviプラグイン設定の確認

WP-PageNaviプラグインの設定を確認し、正しい設定が行われているかを確認してください。WP-PageNaviプラグインの設定画面から、ページネーションの挙動に関する設定を確認できます。

4. テーマの問題

問題の発生している一覧ページのテンプレートファイル(tag.phpやarchive.phpなど)が正しく設定されているか確認します。テーマファイルに問題がある場合、ページネーションが正しく動作しないことがあります。

これらのステップを確認して、問題を解決するのに役立つ情報を得ることができます。
問題が解決しない場合、ページネーションに関連する他のプラグインやカスタムコードが問題の原因である可能性があるため、それらも確認することが重要です。

URLからcategoryを削除するなど、カテゴリー一覧ページに独自の設定をしたことで、
タグ一覧ページの2ページ目以降が表示されない(404になる)ケースを例に修正方法を見ていきます。

上記の「2. functions.phpファイルの確認」にページネーションを設定する記述があったため、
その記述と競合しない新たなルールを加えました。

function custom_tag_pagination_rewrite_rule($rules) {
    $new_rules = array(
        'tag/(.+)/page/([0-9]{1,})/?$' => 'index.php?tag=$matches[1]&paged=$matches[2]',
        'tag/(.+)/?$' => 'index.php?tag=$matches[1]',
    );

    return $new_rules + $rules;
}

function custom_category_pagination_rewrite_rule($rules) {
    $new_rules = array(
        'category/(.+)/page/([0-9]{1,})/?$' => 'index.php?category_name=$matches[1]&paged=$matches[2]',
        'category/(.+)/?$' => 'index.php?category_name=$matches[1]',
    );

    return $new_rules + $rules;
}

add_filter('rewrite_rules_array', 'custom_tag_pagination_rewrite_rule');
add_filter('rewrite_rules_array', 'custom_category_pagination_rewrite_rule');

URLからcategoryを削除しつつ、tagは残し、タグ一覧ページの2ページ目以降が正常に認識され表示されるようになりました。

【WordPress】カスタムフィールドの値を投稿本文(post_content)にコピーする

WordPressでは、カスタムフィールドは通常検索対象になりません。
テンプレートなどを利用していて、検索機能が独自のカスタマイズされていると、カスタムフィールドの値を検索対象にする機能の追加は一苦労です。

カスタムフィールドの値を、投稿本文にコピーすると簡単に検索対象に出来ます。

CSVで一括投稿する場合や、ダッシュボードの投稿画面から情報を入力する場合に
カスタムフィールドの値を取得し、連結、投稿本文(post_content)にコピーするコードをfunctions.phpに追加します。

function update_post_content_with_custom_fields( $post_id ) {
    // 投稿の編集中でない場合や、カスタムフィールドの更新中である場合は処理しない
    if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return;
    if ( defined('DOING_AJAX') && DOING_AJAX ) return;
    if ( 'post' !== get_post_type( $post_id ) ) return;
    // 更新処理中フラグが設定されている場合は処理しない
    if ( get_post_meta( $post_id, '_updating_post_content', true ) ) return;
    // カスタムフィールドの値を取得します。
    $custom_fields = array(
        '項目1',
        '項目2',
        '項目3',
        '項目4',
        '項目5',
    );
    $post_content = '';
    // カスタムフィールドの値を連結します。
    foreach ( $custom_fields as $field_name ) {
        $field_value = get_post_meta( $post_id, $field_name, true );
        if ( ! empty( $field_value ) ) {
            $post_content .= "<strong>{$field_name}:</strong> {$field_value}<br>";
        }
    }
    // post_contentを更新します。
    if ( ! empty( $post_content ) ) {
        // 更新処理中フラグを設定
        update_post_meta( $post_id, '_updating_post_content', true );
        $post = array(
            'ID' => $post_id,
            'post_content' => $post_content,
        );
        // save_post アクションを一時的に無効化
        remove_action( 'save_post', 'update_post_content_with_custom_fields' );
        // 投稿を更新
        wp_update_post( $post );
        // save_post アクションを再度有効化
        add_action( 'save_post', 'update_post_content_with_custom_fields' );
        // 更新処理中フラグをクリア
        delete_post_meta( $post_id, '_updating_post_content' );
    }
}
// 投稿が保存される際に呼び出すアクションフックを追加します。
add_action( 'save_post', 'update_post_content_with_custom_fields' );

function copy_custom_fields_to_post_content_on_import( $post_id ) {
    // インポート中の投稿かどうかを確認
    if ( defined('WP_IMPORTING') && WP_IMPORTING ) {
        // カスタムフィールドの値を取得します。
        $custom_fields = array(
            '項目1',
            '項目2',
            '項目3',
            '項目4',
            '項目5',
        );
        $post_content = '';
        // カスタムフィールドの値を連結します。
        foreach ( $custom_fields as $field_name ) {
            $field_value = get_post_meta( $post_id, $field_name, true );
            if ( ! empty( $field_value ) ) {
                $post_content .= "<strong>{$field_name}:</strong> {$field_value}<br>";
            }
        }
        // post_contentを更新します。
        if ( ! empty( $post_content ) ) {
            $post = array(
                'ID' => $post_id,
                'post_content' => $post_content,
            );
            wp_update_post( $post );
        }
    }
}
// 投稿が保存される際に呼び出すアクションフックを追加します。
add_action( 'save_post', 'update_post_content_with_custom_fields' );
// インポート時にもカスタムフィールドの値を post_content にコピーするためのアクションフックを追加します。
add_action( 'import_post_created', 'copy_custom_fields_to_post_content_on_import' );

前半部分は投稿画面からの更新でのコピー。 後半部分はCSVインポート時のコピーです。

前半部分は単体で使えますが、後半部分は前半部分の機能を一部使っているのでそのままでは使えません。
CSVインポートの時だけ値をコピーする場合は少しカスタマイズが必要になります。

【Google】GASを使って営業時間外のメールに自動返信する方法

グループ展で「終わり」をテーマに作品を作るために、仕事が終わったあと(営業時間外)のメールでのコミュニケーション方法を考えていましたが…

GメールにはGAS(Google Apps Script)というJavaScriptライクなコードを使って簡単な処理を自動化することが可能です。

コードなどに馴染みがないと少し難しい設定にはなりますが、こんなことも出来るんだ…と見ていただければと思います。

設定方法

以下普段使っているGメールにログインしている状態で

1. https://script.google.com/?hl=jaにアクセス

2. 画面左上の「+新しいプロジェクト」ボタンをクリック

3. Apps Scriptのコード記述画面が表示されたら以下のコードを赤枠にコピペ(元々記述されているコードは削除)

function ResponseMail() {
  const subject = '';
  const sendMailSubject = 'ご連絡ありがとうございます';
  const sendMailName = 'Mail O-clock';
  const sendMailBody = 'お世話になっております。ご連絡ありがとうございます。\n\n本日はお先に失礼させていただいており自動返信にて失礼いたします。\n正式なお返事は翌営業日にさせていただきます。\n\n今日一日もお忙しい日をお過ごしのことと思います。\nお身体を癒し、明日へのエネルギーを蓄える時間をお過ごしください。\n\n何かご不明点やご質問がございましたら、どうぞお気軽にお知らせください。\n何かお手伝いできることがあれば、明日、喜んでお手伝いさせていただきます。\n\nどうぞ良い夜をお過ごしください。\n\n引き続き、よろしくお願いいたします。';

  // 現在の日時を取得
  var currentDate = new Date();
  
  // タイムゾーンを設定(例: GMT+9 は日本時間)
  var timeZone = 'GMT+9';
  
  // 現在の時間を取得し、時刻が18時から9時の間であるか確認
  var currentHour = Utilities.formatDate(currentDate, timeZone, 'HH');
  
  if (currentHour >= 18 || currentHour < 9) {
    // 未読スレッド一覧を取得
    var unreadMailThreads = GmailApp.search("label:inbox is:unread");
  
    // 未読スレッド一覧をループ処理でスレッドを一つずつ取り出す
    unreadMailThreads.forEach(function(unreadMailThread) {
      // スレッドのメッセージの一つ目の件名を取得する
      var message = unreadMailThread.getMessages()[0];
      var mailSubject = message.getSubject();
  
      // 取得した件名に特定の文字列が入っていないか確認する
      if (mailSubject.indexOf(subject) != -1) {
        // 入っていた場合はメッセージの差出人のメールアドレスを取得する
        var mailFrom = message.getFrom(); 
  
        // 取得したメールアドレスへ返信メールを送信する
        MailApp.sendEmail({to: mailFrom, subject: sendMailSubject, name: sendMailName, body: sendMailBody});
  
        // 処理したスレッドを既読にする
        GmailApp.markThreadRead(unreadMailThread);
      }
    });
  }
}

コードの解説

2行目の「const subject」に文字列を入れると、その文字列を含む特定のメールのみに自動返信します。(空欄だと全ての新着メールが対象)

16行目の「currentHour >= 18 || currentHour < 9」が18時から翌9時を表しているので、適宜時間を変更出来ます。

3~5行目は自動返信メールの表示内容になります。

問題点と改善点

これはGAS自体の問題点ですが、一日に100通までしかメールが送れません。
100通を超える場合、処理できなくなる問題点があります。

現在掲載しているコード自体の問題…改善点としては、メールの見出しの文字列でフィルターをかけることは出来ますが、基本的には全ての新着メールが対象になります。
仕事用のメールとは言え、広告メールや、仕事には直接関係ない、返信も必要ないメールも受信することもあります。
それら全てに自動返信してしまうので、仕事関連の人だけに返信するように、メールアドレスを登録してフィルターする機能も必要になりそうです。

参考:https://developers.google.com/apps-script/guides/projects?hl=ja
https://techblog.hubbit.io/2020/10/05/google-app-store-response-mail/

【HTML】フォームでのオートコンプリート(自動補完)機能のオフ(無効化)

お問い合わせフォームで入力する際
入力エリアをクリックすると入力履歴が出てきます。

住所の入力など長いものは入力の手間が省けてとても便利な半面。
この機能を使った、手作業(ロボットではなく)でのスパム攻撃(ロボットに比べると件数は少ない)と思われることがあり、オートコンプリート機能をオフにすることがあったのでメモ。

HTMLでformタグやinputタグに以下のタグを設定するとオートコンプリート機能はオフ(無効化)されます。

<input type="text" autocomplete="off">

ただし、Chromeはコレではオフになりません。
ネットで調べると色々なやり方が書かれていますが、どれも今回のスパム対策には向かないため
いろいろ試しましたが、この方法だとChromeでも無効化することができました。

<input type="text" autocomplete="-">

オートコンプリート機能がオフになることでスパム(嫌がらせ)がゼロになるわけではないですが、手入力の場合、時間がかかるのでコレで攻撃者の手を煩わせ、被害も軽減するかもしれません。

【CSS】改行を含む複数行左寄せの文字列を中央寄せにする方法

複数行のテキストを左寄せにレイアウトしながらも、
全体としてはセンタリングしたい場合があります。

全体をdisplay: block;テキスト部分をdisplay: inline-block;としてセンタリングすると実現できます。

<div class="center">
  <p class="txt">
    吾輩は猫である。名前はまだ無い。<br>
    どこで生れたかとんと見当がつかぬ。<br>
    何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
  </p>
</div>
.center {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    border: 1px solid #000;
}

.center .txt {
    text-align: left;
    display: inline-block;
}

参考:https://blog.raizzenet.com/how-to-make-the-text-left-justified-by-centering/

【CSS】ボタンにCSSでアイコンを付ける方法

aタグのみで作成した以下のようなボタンを
CSSのみで装飾する場合、文字のすぐ前や後ろにアイコンなどを付けたい場合があります。

<a href="#" class="icon-btn">ボタン</a>
a.icon-btn {
    display: block;
    color: #fff;
    background: #000;
    text-decoration: none;
    font-size: 16px;
    text-align: center;
    border-radius: 100px;
    padding: 10px;
    margin: 10px auto;
}

a.icon-btn::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(./img/icon-btn.svg) no-repeat;
    background-size: contain;
    vertical-align: middle;
    margin: -3px 5px 0 0;
}

参考:https://webnetamemo.com/coding/css/201708105449

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