変更 on qwerty.work

【SharePoint】編集フォームのレイアウトを変更する方法メモ

Wed, 25 May 2022 14:10:57 +0900

フォームのレイアウトを複数列にしたい

ShraePointのリストに新規レコードを追加したり、既存のレコードを編集したりする際、デフォルトの状態だとフィールドが縦一列に並んで表示されます。フィールド（列）が少ないと問題ありませんが、登録したい項目が多いとスクロールしたり、情報が部分的にしか見れないため不便です。

そこで、複数列にできないか方法を探したところ、「レイアウトの構成」から「コードの書式設定」にJSON形式で設定を記述すれば、ある程度はカスタマイズできることがわかりました。参考になったページをメモ。

参考ページ

https://www.micknabewata.com/entry/sharepoint/list-form-configuration https://www.micknabewata.com/entry/sharepoint/list-form-configuration

https://idea.tostring.jp/?p=6886 https://idea.tostring.jp/?p=6886

https://pa-wsc.work/2022/03/31/spo_json_list_custom/ https://pa-wsc.work/2022/03/31/spo_json_list_custom/

https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9 https://qiita.com/maekawawawa/items/b814d08cefb3911b5cf9

マイクロソフトのページ

https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

複数列にしたいときの書式例

とりあえず、以下の書式を「コードの書式設定」に貼り付けて必要なフォールド名を書き換えていくことで、感覚が掴めると思います。

{
    "sections": [
        {
            "displayname": "",
            "fields": [
                "Title"
            ]
        },
        {
            "displayname": "Details",
            "fields": [
                "Department",
                "Email",
                "Country"
            ]
        },
        {
            "displayname": "Application",
            "fields": [
                "Application Id",
                "Approver",
                "Reviewer"
            ]
        }
    ]
}

ヘッダーのカスタマイズ

簡易版

とりあえず、ヘッダーに色の付いたタイトルを表示したいときは以下ソースを「ヘッダー」の「コードの書式設定」に貼り付ければ適用できます。

{
    "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}

アイコン付き版

ヘッダーにアイコン付きのタイトルを表示したいときのソース。

{
    "elmType": "div",
    "attributes": {
        "iconName": "Group",
        "class": "ms-borderColor-neutralTertiary, ReactClientFormDefaultHeader"
    },
    "style": {
        "width": "99%",
        "border-top-width": "0px",
        "border-bottom-width": "1px",
        "border-left-width": "0px",
        "border-right-width": "0px",
        "border-style": "solid",
        "border-color": "#ccc",
        "margin-bottom": "16px",
        "color": "#974B8B"
    },
    "txtContent": "=[$Title]"
}

アイコンについて

タイトルの左側に表示されるアイコンは"iconName": "Group"で指定していますが、他のアイコンに変更したいときは以下のページでアイコンを探し、アイコン名を変更すれば可能です。

https://uifabricicons.azurewebsites.net/ https://uifabricicons.azurewebsites.net/

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#icons https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#icons

カテゴリによってアイコンを切り替えたいとき以下のページによると、IF文を使ってカテゴリ名によって表示するアイコンを切り替えることができるようです。

https://www.hogehoge-note.com/2020/02/15/post-695/ https://www.hogehoge-note.com/2020/02/15/post-695/

その他参考ページ

https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1 https://qiita.com/Momono_gg/items/58bf768fb83bddfbdca1

https://qiita.com/Momono_gg/items/dc6b3253e4c0c64cf170 https://qiita.com/Momono_gg/items/dc6b3253e4c0c64cf170

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

Fri, 18 Feb 2022 14:55:37 +0900

デフォルトのソース

何もいじっていなければ、テンプレートは以下のようになっているはずです。これをカスタマイズします。

/app/Plugin/RelatedProduct4/Resource/template/front/related_product.twig

<script>
    $(function () {
         $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
     });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
    <ul class="ec-shelfGrid">
        {% for RelatedProduct in Product.RelatedProducts %}
            {% set ChildProduct = RelatedProduct.ChildProduct %}
            {% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
                  <li class="ec-shelfGrid__item">
                    <a href="{{ url('product_detail', {id : ChildProduct.id}) }}">
                        <p class="ec-shelfGrid__item-image">
                            <img src="{{ asset(RelatedProduct.ChildProduct.main_list_image|no_image_product, 'save_image') }}">
                        </p>
                        <p>{{ RelatedProduct.ChildProduct.name }}</p>
                         <p>
                              {% if RelatedProduct.ChildProduct.hasProductClass %}
                                  {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                                      {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                                  {% else %}
                                     {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                                  {% endif %}
                              {% else %}
                                  {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                              {% endif %}
                          </p>
                      </a>
                      <span>{{ RelatedProduct.content|raw }}</span>
                  </li>
              {% endif %}
         {% endfor %}
      </ul>
  </div>

related-product-plugin/related_product.twig at 4.0 · EC-CUBE/related-product-plugin · GitHub

カスタマイズ後はEC-CUBEの管理画面にログインして以下の画面で「登録」ボタンを押さないとページに反映されないので注意してください。

[コンテンツ管理]-[ページ管理]-[商品詳細ページ]

カスタマイズに使った変数

  変数
  内容




  {{ RelatedProduct.ChildProduct.id }}

  {{ ChildProduct.id }}
  商品ID


  {{ RelatedProduct.ChildProduct.code_min }
  商品コード

  {{ RelatedProduct.ChildProduct.name }}
  商品名


  {% for hoge in ChildProduct.ProductClasses %}

  　{{hoge.id }}

  {% endfor %}
  商品クラスID

カートに入れるために必要なProductClassのIDが取得できずに困りましたが、以下のページが参考になりました。``文を使って取得することが必要でした。

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=17413&forum=5

{% for hoge in Product.ProductClasses %}
　{{hoge.id }}
{% endfor %}

デバッグしたいとき

Product.idなど、Productに関して取得できる変数や値の内容を知りたいということがありました。

.envファイルを開いてデバッグモードにして、商品詳細ページのテンプレート（detail.twig）に{{dump(Product)}} を追記して、商品詳細ページをブラウザで表示すると変数や配列に入っている値を確認できます。

デバッグモードに変更する方法と追記するコード

.envファイルの変更

#本番モード
APP_ENV=prod
APP_DEBUG=0
 ↓
#デバッグモード
APP_ENV=dev
APP_DEBUG=1

テンプレートに追記するコード

Prodect関連の配列や値を確認したい場合。以下のコードをTWIGテンプレートに追記すると配列の内容が画面上に表示されます。

{{dump(Product)}}

参考ページ

https://homupedia.com/eccube4-template-data.html https://homupedia.com/eccube4-template-data.html

作成したソース

<script>
    $(function () {
        $('#RelatedProduct-product_area').appendTo($('.ec-layoutRole__main, .ec-layoutRole__mainWithColumn, .ec-layoutRole__mainBetweenColumn'));
    });
</script>
<div id="RelatedProduct-product_area" class="ec-shelfRole">
<h3>関連商品</h3>
<table class="table table-striped table-hover rp-list-table">
<thead>
    <tr>
        <td>商品コード</td><td>商品名</td><td>金額<small>（税込）</small></td><td>数量</td><td>カート</td>
    </tr>
</thead>
<tbody>
{% for RelatedProduct in Product.RelatedProducts %}
{% set ChildProduct = RelatedProduct.ChildProduct %}
{% if ChildProduct.Status.id == constant("Eccube\\Entity\\Master\\ProductStatus::DISPLAY_SHOW") %}
    <tr class="ec-productRole__actions test">
    <form name="form{{ ChildProduct.id }}" id="productForm{{ ChildProduct.id }}" action="{{ url('product_add_cart', {id:ChildProduct.id}) }}" method="post">
        <td><a href="{{ url('product_detail', {id : ChildProduct.id}) }}">{{ RelatedProduct.ChildProduct.code_min }}</a></td>
        <td>{{ RelatedProduct.ChildProduct.name }}{% for ChildProductClass in ChildProduct.ProductClasses %}&nbsp;<small>（デバッグ用ClassID:{{ChildProductClass.id }}）</small>{% endfor %}</td>
        <td>
            {% if RelatedProduct.ChildProduct.hasProductClass %}
                {% if RelatedProduct.ChildProduct.getPrice02Min == RelatedProduct.ChildProduct.getPrice02Max %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
                {% else %}
                    {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }} ～ {{ RelatedProduct.ChildProduct.getPrice02IncTaxMax|price }}
                {% endif %}
            {% else %}
                {{ RelatedProduct.ChildProduct.getPrice02IncTaxMin|price }}
            {% endif %}
        </td>
        <td class="ec-numberInput"><input type="number" id="quantity{{ ChildProduct.id }}" name="quantity" required="required" min="1" maxlength="9" class="quantity form-control" value="1"></td>
        <td><div class="ec-productRole__btn">
            <button class="ec-blockBtn--action add-cart" data-cartid="{{ ChildProduct.id }}" form="productForm{{ ChildProduct.id }}" type="submit">{{ 'カートに入れる'|trans }}</button>
        </div></td>
    <!-- エラーになるので非表示 <input type="hidden" id="mode" name="mode" value="add_cart" />-->
    <input type="hidden" id="product_id{{ ChildProduct.id }}" name="product_id" value="{{ ChildProduct.id }}">
    {% for ChildProductClass in ChildProduct.ProductClasses %}
    <input type="hidden" id="ProductClass{{ ChildProduct.id }}" name="ProductClass" value="{{ChildProductClass.id }}">
    {% endfor %}
    <input type="hidden" id="_token{{ ChildProduct.id }}" name="_token" value="{{ csrf_token('Eccube\\Form\\Type\\AddCartType') }}" />
    </form>
    </tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

商品詳細ページにオリジナルのカートボタンを設置する際は、商品詳細ページのテンプレート（detail.twig）にあるメイン商品のカードボタン（``）をコメントアウトするなどして、無効または削除しないと関連商品プラグインのテンプレート（related_product.twig）に追加設置したカートボタンで商品がカートに入りませんでした。どうやらform1が優先されるみたいです。

モーダルがうまく動かないとき

「カートに入れる」ボタンを押したときに表示されていたモーダルウィンドウが表示されなくなってしまったときは、商品一覧のテンプレート（list.twig）を参考に商品詳細ページのテンプレート（detail.twig）にある以下の部分を変更したら動きました。これがモーダルウィンドウ（ec-modal）を発火させるトリガーの要素の指定みたいです。

$form = $('#form1');
 ↓
var $form = $(this).parents('.test').find('form');

この上あたりにある規格チェックや数量チェックの一部JSが邪魔してうまく修正できなかったので、そのチェック部分はコメントアウトしました。

その他参考ページ

https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&order=DESC&topic_id=23859&forum=11

【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

Wed, 26 Jan 2022 11:37:19 +0900

アップロード画像の最大サイズを固定したい

EC-CUBEで商品写真をアップロードする際、誤ってリサイズせずに3000x2000ピクセルくらいの画像をアップロードしまうことがありました。デフォルトではサイズは無制限のようです。これをアップロードする際に自動的に800x800ピクセルまたは1000x1000ピクセルくらいにしたいと思い。どのようにしたらできるか調べると以下の参考ページを見つけることができ解決できたのでメモ。

対象バージョン：4.1.1

参考ページ

EC-CUBE4のファイルアップロードには「jQuery File Upload」が使われているようです。

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

https://web.bright-b.com/eccube4-image-size-64/ https://web.bright-b.com/eccube4-image-size-64/

手順

変更を加えるテンプレート

縦横のサイズ上限値を指定するためには以下のファイルに変更を加えます。

ec-cubeのディレクトリ/src/Eccube/Resource/template/admin/Product.twig

追記するコード

Product.twig の 131行目に以下のコードがあるかと思います。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}", 
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

この間に追記します。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}",
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    disableImageResize: false, //新規追加　画像のリサイズを許可
    imageMaxWidth: 1000, //新規追加　横幅の最大サイズ
    imageMaxHeight: 1000, //新規追加  縦幅の最大サイズ
    imageQuality: 0.7, //新規追加　リサイズした画像の画質
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

オプションの説明

https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options

これで、アップロード時にリサイズされた画像がアップロードされていると思います。

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

Thu, 25 Nov 2021 09:43:10 +0900

スマホとパソコンで動画を切り替えたい

動画の再生開始に影響するファイルサイズ

WEBページの背景に動画を使用するサイトを制作する際に気になるのが、埋め込んだ動画のファイルサイズ。

再生時間は15秒から30秒で、ファイルサイズは10MBを基準と考えています。

『ファイル容量を小さくしながらも高画質にしたい』と思いますが、10MB前後を目指すとビットレートを1Mbps～2Mbpsまで落とさなければなりません。ここまで落とすと当然画質は悪くなるですが、背景イメージとしてはギリギリ許容できる画質で、再生時間が30秒前後で何とか10MB前後に収めることができます。

パソコンサイトは通信環境が整っている事が多いので問題ないと思うのですが、スマホなど回線速度が遅いとそうはいきません。たかが10MBでも動画の読込に時間がかかり、自動再生による再生開始が遅くなります。

スマートフォンやタブレットは画面サイズも小さいので、Bootstrap5 のグリッドシステムのブレークポイントを基準にして動画の解像度を考えると、横幅576ピクセル～768ピクセル、大きくても992ピクセルに対応できる解像度のものがあればよく、**480p（854×480 SD画質）または360p（640×360）**の動画を用意すればいいかと思います。この解像度で、ビットレート500kbpsまで下げると、約3MBくらいまでファイルサイズが落ちます。画質は当然悪くなりますが、スマホの画面での背景動画としてはギリギリ観るに耐えれる範囲かと思います。

パソコンとスマホ用に用意した2つの動画ファイル

「レスポンシブサイト制作時の画面サイズと埋め込み動画の解像度の参考値」を参考に、制作中のレスポンシブサイトのブレークポイントを**sm（768px）**としたため、これを境に以下の解像度の異なる動画を用意しました。

パソコン用 … フルHD（1920×1080） MP4・WebM 約10MB
スマーフォン用 … 480p（854×480 ） MP4・WebM 約３MB

この二つをレスポンシブサイトにvideoタグで動画を埋め込み、アクセスしてきた画面サイズに応じて再生する方法がないかと探してみると、jQueryを使って切り替える方法がありました。

jQueryで画面サイズによって切り替える参考

https://shu-naka-blog.com/jquery/responsive_switching/ https://shu-naka-blog.com/jquery/responsive_switching/

ソース例

上記ページのソースを参考に、以下のソースでアクセスしてきたデバイスの画面サイズが768ピクセルを境に再生する動画を切り替えることができました。class="switch"を付ければ、複数ので埋め込んだ動画があっても対応できそうです。

動画のファイル名は最後尾を_spと_pcにします。
タグ内にclass="switch"を設定します。
この例は動画の遅延読込に Lozad.js を使用しているので、ソース指定にdata-srcとしていますので、Javascript内のsrcをdata-srcに変更しています。

<video playsinline autoplay loop muted preload="auto" class="lozad" poster="img/poster.png"/>
   <source type="video/webm" src="" data-src="video_sp.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_sp.mp4" class="switch">
   <source type="video/webm" src="" data-src="video_pc.webm" class="switch">
   <source type="video/mp4" src="" data-src="video_pc.mp4" class="switch">
</video>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

$(function() {
  // 切り替える対象にclass属性。
  var $elem = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;
  
 function imageSwitch() {
  // ウィンドウサイズを取得する。
  var windowWidth = parseInt($(window).width());

 // ページ内にあるすべての`.switch`に適応される。
  $elem.each(function() {
  var $this = $(this);
  // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
  if(windowWidth >= replaceWidth) {
  $this.attr('data-src', $this.attr('data-src').replace(sp, pc));

 // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
  } else {
  $this.attr('data-src', $this.attr('data-src').replace(pc, sp));
  }
  });
}
 imageSwitch();

// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
var resizeTimer;
$(window).on('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    imageSwitch();
  }, 200);
  });
});

STUDIOで使いたいとき

ノーコードでホームページが制作できるSTUDIO（有料プラン）で制作したサイトのキービジュアルに背景動画を埋め込みたいときのJavascriptソース例。ChatGPTに手伝ってもらったソース。動画の遅延表示させるLozad.jsも併用しています。

Googleタグマネージャーで使うときのソース例

Google Tag Manager経由で以下のソースを使用するとうまくいきました。動画ファイルをSTUDIOにアップロードできないので、読み込みたい動画ファイル（MP4とWEBM）は外部のレンタルサーバーにアップロードしてあるものを使用します。STUDIOのBOX要素のIDにmvを設定し、JavascriptでVIDEOタグを挿入し、デバイスの画面幅に合わせてPC用とスマホ用を切り替えます。

Googleタグマネージャーのトリガーは「ページビュー」と「履歴の変更」の二つを設定してください。「ページビュー」のみだと、ブラウザの「戻る」ボタンで他のページから飛んできたときに発火しないので、その対策として「履歴の変更」が必要です。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画がすでに追加されているかを確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 動画を追加する処理
function addVideo() {
  // すでに動画が追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページビューまたは履歴変更時に呼び出す関数
addVideo();
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換し、キャッシュバスティングを追加
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換し、キャッシュバスティングを追加
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

どうしてもカスタムコードで使いたいとき

Googleタグマネージャーの使い方がわからないので、STUDIOのカスタムコードに記載して使いたい場合はこちらのソース。発火のトリガーを複数設定しています。ページの遷移やブラウザによっては発火しないケースがあるかもしれません。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
  var observer = lozad();
  observer.observe();
</script>
<script>
// 動画が既に追加されているか確認する関数
function isVideoAdded() {
  return document.getElementById("mv").querySelector("video") !== null;
}

// 共通の処理を関数として定義
function handleVideoLoad() {
  // 動画が既に追加されている場合は処理を中断
  if (isVideoAdded()) {
    return;
  }

  // 動画要素の作成
  var video = document.createElement("video");
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.setAttribute("playsinline", "");

  // クラス "lozad" を追加
  video.classList.add("lozad");

  // 最初のソース (WEBM) に "switch" クラスを追加
  var source1 = document.createElement("source");
  source1.src = "https://qwerty.work/mv_sp.webm";
  source1.setAttribute("data-src", "https://qwerty.work/mv_sp.webm");
  source1.type = "video/webm";
  source1.classList.add("switch");

  // 2つ目のソース (MP4) に "switch" クラスを追加
  var source2 = document.createElement("source");
  source2.src = "https://qwerty.work/mv_sp.mp4";
  source2.setAttribute("data-src", "https://qwerty.work/mv_sp.mp4");
  source2.type = "video/mp4";
  source2.classList.add("switch");

  // 動画にソースを追加
  video.appendChild(source1);
  video.appendChild(source2);

  // 動画をDOMに追加
  document.getElementById("mv").appendChild(video);

  // 動画の再生処理とエラーキャッチ
  video.play().catch(function(error) {
    console.error("Video play failed:", error);
  });
}

// ページが完全にロードされた時
window.addEventListener("load", handleVideoLoad);

// ページのHTMLが読み込まれた時
document.addEventListener("DOMContentLoaded", handleVideoLoad);

// ブラウザの履歴が変更された時（戻るボタン、進むボタンなど）
window.addEventListener("popstate", handleVideoLoad);
</script>
<script>
// PCとスマホで動画ファイルを切り替える
$(function() {
  // クラス "switch" を持つ <source> タグを対象にする
  var $sources = $('.switch');
  
  // 切り替えの対象のsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  
  // 動画を切り替えるウィンドウサイズ。
  var replaceWidth = 970;
  
  function videoSwitch() {
    // ウィンドウサイズを取得する。
    var windowWidth = parseInt($(window).width());

    // ページ内にあるすべての`.switch`（<source>タグ）に適応される。
    $sources.each(function() {
      var $this = $(this); // <source>要素

      // ウィンドウサイズが970px以上であれば_spを_pcに置換
      if (windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('data-src').replace(sp, pc));
      // ウィンドウサイズが970px未満であれば_pcを_spに置換
      } else {
        $this.attr('src', $this.attr('data-src').replace(pc, sp));
      }
    });

    // <video>要素全体を再ロードして、srcの変更を反映
    $('video').get(0).load(); // <video>要素のload()メソッドを呼び出す
  }

  videoSwitch();
  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      videoSwitch();
    }, 200);
  });
});
</script>

その他参考

jQueryに依存しない以下のJavascriptも見つけましたが、設定や設置方法が悪いのか、うまくいきませんでした。

画面サイズで切り替える例

https://teratail.com/questions/148919 https://teratail.com/questions/148919

ユーザーエージェントで切り替える例

https://iwb.jp/video-tag-src-poster-img-javascript/ https://iwb.jp/video-tag-src-poster-img-javascript/

【簡単】新Microsoft Edge（Chromium版）の検索エンジンをGoogleまたはYahooに変更する方法

Wed, 29 Jan 2020 23:06:30 +0900

検索エンジンをBingからグーグルかヤフーに変更したい

新しいEdgeをインストールしたものの、アドレスバーから検索するとデフォルトのままではBingの検索結果が表示されます。EdgeがMicrosoft製なのでBingが既定になっているのは当然で、Bingの検索精度が良ければ問題ないのですが、自宅はGoolgeを使い、会社ではYahooを使っているので不便で仕方ありません。そこでEdgeの既定の検索エンジンを変更する方法をメモ。メニューの場所さえわかれば結構簡単に変更できます。

変更手順

画面右上の**［**］をクリックし、表示されたメニューの［**設定］**をクリック。

**［*プライバシーとサービス］**をクリック。

画面一番下の**［アドレスバー］**を選択。

ここで**「Bing（推奨）、既定値）」となっているところを「Yahoo!JAPAN」または「Google」**に変更すればデフォルトの検索エンジンの変更は完了です。

独自の検索エンジンを登録したいとき

あまり使うことはないかもしれませんが、メニューには無い検索エンジンやグーグルやヤフーの検索にパラメーターを加えるなどカスタマイズしたいときは以下のメニュー**［検索エンジンの管理］**に入ります。

現在使用できる検索エンジンの登録の一覧で表示されるので、ここで検索URLを登録して新たな検索エンジンの追加や登録済みの検索エンジンのカスタマイズができます。

これで少しChromium版の新しいMicrosoft EdgeがGoogle Chromeチックに使いやすくなります。

Internet Explorer 11のキャッシュ（一時ファイル）の設定を変更するレジストリ

Thu, 15 Jun 2017 22:43:48 +0900

グループポリシーなどで管理者に制限されてインターネットオプションでキャッシュ（一時ファイル）に関する項目がグレーになっていて設定変更ができないといったときにレジストリから変更する方法をメモ。

Windows7/8.1もほぼ共通だと思われます。

インターネット一時ファイルのレジストリ

以下は制限されていないWindows10のIE11の場合の画面です。ここに表示されている項目をレジストリで設定します。

一時ファイルの確認方法を変更するレジストリ

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings
SyncMode5（REG_DWORD）

モード値のデータ

Webサイトを表示するたびに確認する 3

Internet Explorerを開始するたびに確認する 2

自動的に確認する 4

確認しない 0

一時ファイルに使用するディスク領域を設定するレジストリ

ディスク領域を250MBで設定する場合。

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\Cache
ContentLimit（REG_DWORD）
値のデータ：250（10進数）

一時ファイルを保存するフォルダーの場所を指定するレジストリ

Windows10のIE11の場合のデフォルト「C:\Users\info\AppData\Local\Microsoft\Windows\INetCache\」の場合

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders
Cache（REG_EXPAND_SZ）
値のデータ：%USERPROFILE%\AppData\Local\Microsoft\Windows\INetCache

履歴に関するレジストリ

ページを履歴に保存する日数を指定するレジストリ

HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\Url History
DaysToKeep（REG_DWORD）
値のデータ：20（デフォルトの20日の場合）

Windows VISTAで新規保存するときにデフォルトで開くフォルダをマイドキュメントから設定変更したい。

Wed, 29 Jul 2009 19:25:25 +0900

Windows VISTAを使用していると、いつも思う。

エクセルやワードを含むほとんどのアプリケーションで新規作成したファイルを「名前を付けて保存しよう」とした際、エクスプローラーはデフォルトで「マイドキュメント」になっている。

わたくしの場合、

現在作業中ファイル　→　デスクトップ
作業終了済みファイル　→　ネットワークドライブ
共有ファイル　→　ネットワークドライブ

としており、マイドキュメントは使用していません。

マイドキュメントを使用しない理由は、いろんなアプリケーションをインストールすると勝手にいろんなフォルダが作成されて、操作の邪魔になるからです。

そこで、新規保存時にデフォルトでマイドキュメントが表示されないようにする方法を探すのですが、なかなかありません。

今回のことには全く関係ないのですが、何かのヒントになりそうなので、以下の参考サイトをメモしておきます。

http://www.atmarkit.co.jp/fwin2k/win2ktips/1022foldertype/foldertype.html http://www.atmarkit.co.jp/fwin2k/win2ktips/1022foldertype/foldertype.html

http://slashdot.jp/~kazu2/journal/413519 http://slashdot.jp/~kazu2/journal/413519

変更 on qwerty.work

【SharePoint】編集フォームのレイアウトを変更する方法メモ

フォームのレイアウトを複数列にしたい

参考ページ

マイクロソフトのページ

複数列にしたいときの書式例

ヘッダーのカスタマイズ

簡易版

アイコン付き版

アイコンについて

その他参考ページ

【EC-CUBE】関連商品プラグインで表示される商品一覧をカスタマイズしたいとき

関連商品のテンプレートTWIGファイルをカスタマイズしたい

テンプレートファイルの場所

商品詳細ページに表示される部分のテンプレート

管理画面用テンプレート

デフォルトのソース

カスタマイズに使った変数

デバッグしたいとき

デバッグモードに変更する方法と追記するコード

.envファイルの変更

テンプレートに追記するコード

参考ページ

作成したソース

商品詳細ページで使用するときの注意事項

form id=“form1"があるとうまく動かない

モーダルがうまく動かないとき

その他参考ページ

【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

アップロード画像の最大サイズを固定したい

参考ページ

手順

変更を加えるテンプレート

追記するコード

【JS】VIDEOタグで指定する動画をPCとスマホ用に切り替えるJavascript

スマホとパソコンで動画を切り替えたい

動画の再生開始に影響するファイルサイズ

パソコンとスマホ用に用意した2つの動画ファイル

jQueryで画面サイズによって切り替える参考

ソース例

STUDIOで使いたいとき

Googleタグマネージャーで使うときのソース例

どうしてもカスタムコードで使いたいとき

その他参考

画面サイズで切り替える例

ユーザーエージェントで切り替える例

【簡単】新Microsoft Edge（Chromium版）の検索エンジンをGoogleまたはYahooに変更する方法

検索エンジンをBingからグーグルかヤフーに変更したい

変更手順

独自の検索エンジンを登録したいとき

Internet Explorer 11のキャッシュ（一時ファイル）の設定を変更するレジストリ

インターネット一時ファイルのレジストリ

一時ファイルの確認方法を変更するレジストリ

一時ファイルに使用するディスク領域を設定するレジストリ

一時ファイルを保存するフォルダーの場所を指定するレジストリ

履歴に関するレジストリ

ページを履歴に保存する日数を指定するレジストリ

Windows VISTAで新規保存するときにデフォルトで開くフォルダをマイドキュメントから設定変更したい。