東京・小金井市のWEB制作会社の豆知識

以前、飲食店サイトを制作した際に、記念写真を掲載する目的でメインビューに使っていたスクリプトを思い出しのたのでメモ。卓上に写真を広げるような感じでレイアウトでき、ドラッグ操作で動かせるので、一覧表示と比べると若干の見づらさはあるものの、目的のものを探し出す体験も含めて、一定の効果はありそうです。 HTML <ul id="photo-list"> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> </ul> CSS #photo-list { position: relative; width: 100%; height: 100vh; margin: 0 auto; padding: 0; background: #f5f5f5; overflow: hidden; } #photo-list li { list-style: none; position: absolute; width: 25vw; /* 親幅に応じて自動調整 */ left: 100vw; } #photo-list li:active { cursor: grabbing; } #photo-list li img { width: 100%; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 6px; transition: transform 0.8s ease-out; user-select: none; } jQuery var $items = $('#photo-list li'); var $container = $('#photo-list'); var zIndexCounter = 1; function getAreaSize() { return { width: $container.width(), height: $container.height() }; } function getItemSize($el) { return { width: $el.width(), height: $el.height() }; } // 初期位置：右外からばらまく $items.each(function() { var area = getAreaSize(); var item = getItemSize($(this)); $(this).css({ left: area.width + 200, top: area.height / 2 - item.height / 2, opacity: 0, transform: 'rotate(0deg) scale(0.8)' }); }); // ばらまきアニメーション setTimeout(() => { $items.each(function() { var area = getAreaSize(); var item = getItemSize($(this)); var left = Math.random() * (area.width - item.width); var top = Math.random() * (area.height - item.height); var rotate = (Math.random() * 60) - 30; var delay = Math.random() * 800; $(this).delay(delay).animate({ left: left, top: top, opacity: 1 }, { duration: 1000, easing: 'swing', step: function(_, fx) { $(this).css('transform', `rotate(${rotate}deg) scale(1)`); } }); }); }, 500); if ($(window).width() < 980) { // スマホ・タブレット用ドラッグ $items.on({ touchstart: function(e) { var $this = $(this); var touch = e.originalEvent.touches[0]; $this.data({ startX: touch.pageX, startY: touch.pageY, offsetX: touch.pageX - $this.position().left - $container.offset().left, offsetY: touch.pageY - $this.position().top - $container.offset().top, isDragging: false, dragOccurred: false }); zIndexCounter++; $this.css('z-index', zIndexCounter); }, touchmove: function(e) { var $this = $(this); var touch = e.originalEvent.touches[0]; var startX = $this.data('startX'); var startY = $this.data('startY'); var offsetX = $this.data('offsetX'); var offsetY = $this.data('offsetY'); var isDragging = $this.data('isDragging'); var dragOccurred = $this.data('dragOccurred'); var dragThreshold = 5; var deltaX = Math.abs(touch.pageX - startX); var deltaY = Math.abs(touch.pageY - startY); if (!isDragging && (deltaX > dragThreshold || deltaY > dragThreshold)) { isDragging = true; dragOccurred = true; } if (isDragging) { e.preventDefault(); $this.css({ left: touch.pageX - $container.offset().left - offsetX + 'px', top: touch.pageY - $container.offset().top - offsetY + 'px' }); } $this.data({ isDragging: isDragging, dragOccurred: dragOccurred }); }, touchend: function(e) { var $this = $(this); var dragOccurred = $this.data('dragOccurred'); if (dragOccurred) e.preventDefault(); $this.removeData('isDragging dragOccurred startX startY offsetX offsetY'); } }); } else { // PC用ドラッグ $items.on('mousedown', function(e) { var $this = $(this); e.preventDefault(); var startX = e.pageX; var startY = e.pageY; var offsetX = startX - $this.position().left - $container.offset().left; var offsetY = startY - $this.position().top - $container.offset().top; var isDragging = false; var dragThreshold = 3; var dragOccurred = false; zIndexCounter++; $this.css('z-index', zIndexCounter); function clickPreventer(e) { e.preventDefault(); } function mouseMoveHandler(e) { var deltaX = Math.abs(e.pageX - startX); var deltaY = Math.abs(e.pageY - startY); if (!isDragging && (deltaX > dragThreshold || deltaY > dragThreshold)) { isDragging = true; dragOccurred = true; $this.find('a').on('click.prevent', clickPreventer); } if (isDragging) { $this.css({ left: e.pageX - $container.offset().left - offsetX + 'px', top: e.pageY - $container.offset().top - offsetY + 'px' }); } } function mouseUpHandler(e) { $(document).off('mousemove', mouseMoveHandler); $(document).off('mouseup', mouseUpHandler); if (dragOccurred) { $this.one('click', function(e) { e.preventDefault(); }); $this.find('a').off('click.prevent', clickPreventer); } } $(document).on('mousemove', mouseMoveHandler); $(document).on('mouseup', mouseUpHandler); }); } SAMPLE #photo-list { position: relative; width: 100%; height: 100vh; /* 画面幅に応じた高さ */ margin: 0 auto; padding: 0; background: #f5f5f5; overflow: hidden; } #photo-list li { list-style: none; position: absolute; width: 25vw; /* 親幅に応じて自動調整 */ left: 100vw; } #photo-list li:active { cursor: grabbing; } #photo-list li img { width: 100%; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 6px; transition: transform 0.8s ease-out; user-select: none; }

時間を指定して表示を切り替える際にPHPを使用することが多かったのだけれど、利用しているサービス（ASP）の都合でPHPが使用できないため、jQueryを使用して対応した方法をメモ jQuery(javascript) const today = new Date(); const targetDate = new Date("2025-06-25 10:30:00"); // 2025年6月25日10時30分00秒を指定 if (today < targetDate) { $('.top__mv__main').html('<a href="/202505/"><img src="/202505/img/top.jpg"></a>'); } else { $('.top__mv__main').html('<a href="/202506/"><img src="/202506/img/top.jpg"></a>'); } HTML <div class="top__mv__main"></div>

ホームページへ動画を組み込む際に、動画が設置されているところまでスクロールして、表示された時に動画を再生したいとの要望を受けて実装した方法をメモ。 HTML <div class="video_wrap"> <video playsinline controls muted id="myvideo"> <source src="○○○○.mp4" type="video/mp4"> </video> </div> jQuery $(window).scroll(function(){ var offsetTop = $(window).scrollTop(); var sH = window.innerHeight * 7 / 10; if($('.video_wrap').length){ if(offsetTop > $('.video_wrap').offset().top - sH){ $('#myvideo').get(0).play(); }else{ $('#myvideo').get(0).pause(); $('#myvideo').get(0).currentTime = 0; } } }); トリガーの位置は「sH」の値を変えることで調整可能。 動画を音声有りにすると、ブラウザ制限により自動再生ができなくなるため、必ず「消音（muted）」を付与する必要があります

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、PHPでそのまま実装すると再読み込みが発生してしまい、再度コンテンツを読んでいた位置まで進める必要が出てきたので、Ajaxと組み合わせ実装した際の方法をメモ HTML <form action="" method="post" enctype="multipart/form-data" id="entryform"> <textarea name="text"></textarea> <input type="file" name="newimage"> <button type="submit" id="submit">登録する</button> </form> <div id="result"></div> jQuery $(function(){ $('form').on('submit', function(event) { event.preventDefault(); // フォームのデフォルト送信を防止 var $form = $('#entryform'); var formData = new FormData($form.get(0)); $.ajax({ type: 'POST', url: 'save.php', data: formData, processData: false, contentType: false, dataType: "json", success: function(response) { if (response.status === "success") { $("#result").html("アップロード成功"); } else { $("#result").html("エラー: " + response.message); } }, error: function() { $("#result").html("エラーが発生しました。"); } }); }); }); save.php（PHP） if($_SERVER['REQUEST_METHOD'] === 'POST'){ $uploadDir = "uploads/"; $file = $_FILES["image"]; $fileName = basename($file["name"]); $targetFile = $uploadDir.$fileName; $text = filter_input(INPUT_POST, "text", FILTER_SANITIZE_STRING); if (!$text) { echo json_encode(["status" => "error", "message" => "テキストが無効です"]); exit; } if (isset($_FILES["newimage"])) { $finfo = new finfo(FILEINFO_MIME_TYPE); $mimeType = $finfo->file($file["tmp_name"]); $validMimeTypes = ["image/jpeg", "image/png", "image/gif"]; if (!in_array($mimeType, $validMimeTypes)) { echo json_encode(["status" => "error", "message" => "画像の種類が正しくありません"]); exit; } // 画像サイズの制限（2MB） if ($file["size"] > 2 * 1024 * 1024) { echo json_encode(["status" => "error", "message" => "画像サイズは2MB以下にしてください"]); exit; } // 画像を保存 move_uploaded_file($file["tmp_name"], $targetFile); } }

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字をCSSで無限ループさせる場合の実装方法をメモ。 HTML <div class="loop__wrap"> <div class="loop__text"><span>CSSを使って無限ループさせる文字を記載</span></div> </div> CSS @keyframes textscroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } } .loop__wrap { overflow: hidden; } .loop__text { display: flex; } .loop__text span { white-space: nowrap; animation: textscroll 10s infinite linear both; } jQuery if($('.loop__text').length){ var looptxtSize = $('.loop__text span').width() + 〇px; $('.loop__text span').css({'width':looptxtSize + 'px'}); $('.loop__text').css({'width':looptxtSize * 2 +'px'}); $('.loop__text').find('span').clone().appendTo('.loop__text'); } CSSセレクター「.loop__text span」の箇所で幅を直に設定することでもループスライダーの実装可能ですが、文字数や文字サイズが変わった場合でもそのまま使えることと、同じテキストを複数回記載する必要もなくなるようjQueryを使用しています。

管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能ですが、入力した住所から動的に地図を生成する方法を実装していた際のコードをメモ。 Geocodingを使用した緯度経度の取得方法 実装する前にAPIキーを取得する googlemapの「geocoding」機能を使用するためにはAPIキーを取得する必要があります。google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「Geocoding API」を有効化。他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。 ヘッドにAPIキーを記載する 取得したAPIキーを、対象ページのヘッド内に下記を記載。 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ジオコーディングを実装する HTML <form id="addressForm"> <table> <tr> <th>住所</th> <td> <input type="text" name="address" id="address" value="" onblur="initialize(this)"> <input type="hidden" name="latitude" id="latitude" value=""> <input type="hidden" name="longitude" id="longitude" value=""> </td> </tr> </table> <button type="submit" name="submit">送信</button> </form> javascript function initialize(obj){ var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var address = document.getElementById('address').value; geocoder.geocode({'address': address},function(results,status){ if (status == 'OK') { var latlng = results[0].geometry.location; document.addressForm.latitude.value = latlng.lat(); document.addressForm.longitude.value = latlng.lng(); }else{ alert('Geocode was not successful for the following reason: ' + status); } }); } 後は用途に応じてフォームから取得した値をPHP等を使用してデータベースに保存します。

ホームページ内に動画を掲載する場合、youtube等のサービスを利用する場合は問題ないのですが、公開条件等によって既存のサービスが使用できない時に、canvasとjavascriptを使用して表示時に動画（videoタグ）のサムネイル（ポスター画像）を自動で生成した方法をメモ HTML <video id="myVideo" onclick="this.play();" controls="" controlslist="nodownload" playsinline> <source src="video.mp4" type="video/mp4"> </video> <canvas id="myCanvas" style="display:none;"></canvas> javascript document.addEventListener("DOMContentLoaded", function() { var video = document.getElementById("myVideo"); var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 動画データが読み込まれた後に実行 video.addEventListener("loadeddata", function() { // video の幅と高さを canvas に合わせる canvas.width = video.videoWidth; canvas.height = video.videoHeight; // 0.5秒後のフレームを取得 video.currentTime = 0.5; }); // 指定フレームが読み込まれたら canvas に描画 video.addEventListener("seeked", function() { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // canvas を画像データに変換してポスターに設定 var posterDataUrl = canvas.toDataURL("image/jpeg"); video.setAttribute("poster", posterDataUrl); }); }); 尚、iOSでは機能制限があるようなので、読み込み時の自動取得は不可。再生ボタンクリック時に取得はできますが、本来の目的とは異なるため個別にポスター画像を用意するか、動画の登録時に自動生成したものを保存して使用する方法が良さそうです。

ホームページ内でスクロールバーを使用する場合、特に設定がなければ左上を基準に表示されますが、デザインの都合で初期位置を変更する必要があったため、対応方法をメモ HTML <div class="scroll__flame">任意のコンテンツ</div> CSS .scroll__flame { width: 90vw; margin: 0 auto; overflow: auto; } jQuery（javascript） $(document).ready(function() { var $elm = $('.scroll__flame'); if($elm.length){ var halfScrollWidth = $elm[0].scrollWidth / 2; $elm.scrollLeft(halfScrollWidth); } }); 参考例はスクロールバーの水平位置が最大表示横幅（90VW）の半分の位置で表示されるように設定 垂直位置を調整する場合は下記。最大表示縦幅を利用します。 CSS .scroll__flame { height: 90vh; overflow: auto; } jQuery（javascript） $(document).ready(function() { var $elm = $('.scroll__flame'); if($elm.length){ var halfScrollHeight = $elm[0].scrollHeight / 2; $elm.scrollTop(halfScrollHeight); } });

PHPを使用してPDFファイルを動的にダウンロードしたところ、「header」関数でのリダイレクトができなくなってしまったため「cookie（クッキー）」とjavascriptを併用して対応した方法をメモ HTML <form action="download.php" method="post"> <input type="hidden" name="download__token" value="xxxxxxxxxx"> <dl> <dt>メールアドレス</dt> <dd><input type="text" name="email" placeholder="例）mail@example.com"></dd> </dl> <div class="btnSubmit"><input type="submit" name="download" value="送信する"></div> </form> download.php(PHP) if(!empty($_POST['download'])){ //値の取得処理とバリデーションを記載 if(empty($err_msg['error'])){ //クッキーを設定 setcookie('downloaded', '○○○○', time()+60*60, '/'); //ファイル名 $filename = '○○○○.pdf'; //ファイルのパス $filepath = dirname(__FILE__).'/'.$filename; header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename="'.rawurlencode($filename).'"'); header('Content-Length: '.filesize($filepath)); ob_end_clean(); readfile($filepath); }else{ header('location:'.$_SERVER['HTTP_REFERER']); } } jQuery（javascript） $('form').submit(function() { setInterval(function(){ if(document.cookie){ //クッキーを配列に収納 var params = document.cookie.split(';'); var array = {}; for(i = 0; i < params.length; i++){ var term = params[i].split('='); var key = term[0].trim(); var value = term[1] ? term[1].trim() : ''; array[key] = value; } if(array['downloaded']){ //クッキーの削除処理 document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; window.location.href = '完了ページのURL'; } } }, 1000); }); 今回はメールアドレスを取得したのちにPDFをダウンロード可能にする仕様のため、フォーム（HTML）にはメールアドレスの入力項目を設置。フォームの受け取り処理でバリデーションを実行し、エラーの無い場合に「setcookie」関数を使用してクッキーを設定（変数名：downloaded）javascriptの「setInterval」を使用し1秒毎に、クッキーの値を判定して、条件に合った時のみ完了ページに遷移させています。 ファイルダウンロード完了後に画面遷移などをjavascriptで行う 尚、jquery側で入力チェックを行う名う場合は下記 jQuery（javascript） $('form').submit(function() { var error = ['']; if($('input[name="email"]').val() ==''){ error[1] = 'メールアドレスを入力してください'; }else if(!$('input[name="email"]').val().match(/^[a-zA-Z0-9_\.\-]+@(([a-zA-Z0-9_\.\-]+\.)+[a-zA-Z0-9]+$)/)){ error[1] = 'メールアドレスを正しく入力してください'; } var errors = ''; for( a = 0; a < 1; a++){ if(error[a].length > 0){ errors = errors + error[a]; } } if(errors.length > 0){ alert(errors); return false; } setInterval(function(){ if(document.cookie){ //クッキーを配列に収納 var params = document.cookie.split(';'); var array = {}; for(i = 0; i < params.length; i++){ var term = params[i].split('='); var key = term[0].trim(); var value = term[1] ? term[1].trim() : ''; array[key] = value; } if(array['downloaded']){ //クッキーの削除処理 document.cookie = "downloaded=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; window.location.href = '完了ページのURL'; } } }, 2000); }); 入力チェックの処理時間を考慮して「setInterval」の実行を2秒後にしています。

テキスト入力時に文字を装飾したり画像や表を埋め込めるリッチエディタ。ワードプレスを使用することが増え、使用する機会は減ったものの代表的なツールも有料化され、クライアントへの提案が難しくなったためこれを機会に自作したものの一部をメモ。 PHP <div class="richtexteditor"> <form id="editorForm" method="POST" action="" onsubmit="prepareForm()"> <nav id="toolbar"> <ul> <li><button id="toggleView">ソースを見る</button></li> <li><button onclick="execCmd('bold'); return false;" id="bold"><i class="fas fa-bold"></i></button></li> <li><button onclick="execCmd('createLink', prompt('Enter the URL', 'http://')); return false;" id="links"><i class="fas fa-link"></i></button></li> <li><button onclick="execCmd('unlink')"><i class="fas fa-unlink"></i></button></li> <li><button type="button" onclick="showImageModal(); return false;"><i class="far fa-image"></i></button></li> <li><div class="toolbar__li__inner"><i class="fas fa-tint"></i><input type="color" id="textColor" title="Text Color"></div></li> <li><div class="toolbar__li__inner">フォントサイズ <select onchange="execCmd('fontSize', this.value); return false;" name="fontSize" id="fontSize"> <option value="">標準</option> <option value="10px">10px</option> <option value="12px">12px</option> <option value="14px">14px</option> <option value="16px">16px</option> <option value="18px">18px</option> <option value="24px">24px</option> <option value="30px">30px</option> <option value="36px">36px</option> </select> </div></li> </ul> </nav> <div id="editor" contenteditable="true"></div> <textarea id="textarea" style="display: none;" name="html"></textarea> <ul class="submitbtn"> <li><input type="submit" name="submit" value="登録"></li> </ul> </form> <!-- 画像選択用モーダル --> <div id="imageModal" class="modal"> <div class="modal-content"> <span class="close" onclick="closeImageModal()">&times;</span> <h2>画像選択</h2> <div class="image-list"> <!-- サーバー内の画像ファイルリスト --> <?php $dir = 'upload/'; $files = array_diff(scandir($dir), array('.', '..')); foreach ($files as $file) { echo '<img src="' . $dir . $file . '" onclick="selectImage(\'' . $dir . $file . '\')" alt="' . $file . '">'; } ?> </div> </div> </div> </div> サンプルは「太字」「リンク付与/打消し」「画像」「文字色」「文字サイズ」を変更できるボタンと「ソース切替」ボタンを設定。リッチエディタとして動くよう編集エリアに「contentEditable="true"」を記載。画像はモーダルウィンドウ形式にして対象フォルダ（upload）の中を参照できるようにしています。 CSS @import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css'); .icon-code::before{ font-family: "Font Awesome 5 Free"; content: "\f1c9"; font-weight: 400; margin: 0 5px 0 0; } .richtexteditor .submitbtn { display: flex; justify-content: center; padding: 0; } .richtexteditor .submitbtn li { margin:0 10px; list-style: none; } .richtexteditor .submitbtn li input { background: #3f6fab; width: 20vw; line-height: 44px; border: #3f6fab solid 3px; margin: 0; color: #fff; cursor: pointer; } .richtexteditor .submitbtn li input:hover { background: #fff; color: #3f6fab; } #toolbar { background: #f8f8f8; margin: 0 0 5px; padding: 5px; box-sizing: border-box; border: 1px solid #ccc; } #toolbar ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; } #toolbar ul li { list-style: none; margin-right: 5px; } #toolbar button { background: none; padding: 10px; border: none; font-size: 14px; text-align: center; line-height: 1.0; } #toolbar button i { font-size: 14px; } #toolbar button.active { background: #fff; border: #ddd solid 1px; } .toolbar__li__inner { display: flex; align-items: center; padding: 10px; font-size: 14px; line-height: 1.0; } #toolbar select { margin: 0 0 0 5px; padding: 0; border: #ddd solid 1px; } #toolbar input[type="color"] { height: 14px; margin: 0 0 0 5px; padding: 0; border: #ddd solid 1px; } #editor, textarea { width: 100%; height: 66vh; padding: 10px; box-sizing: border-box; border: 1px solid #ccc; overflow: auto; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); padding-top: 60px; } .modal-content { background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover { color: black; text-decoration: none; cursor: pointer; } .image-list img { max-width: 100px; cursor: pointer; margin: 5px; } jQuery $(document).ready(function() { let isSourceMode = false; // 選択範囲の状態取得 document.onselectionchange = function() { updateToolbar(); } // コマンドを実行する関数 window.execCmd = function(cmd, value) { // 現在のテキスト選択を取得 var selection = window.getSelection(); // 現在の選択範囲を取得 var range = selection.getRangeAt(0); switch (cmd) { case 'bold': var ancestor = findAncestor(range.commonAncestorContainer, 'STRONG'); if (ancestor) { unwrap(ancestor); } else { var strong = document.createElement('strong'); range.surroundContents(strong); } break; case 'createLink': var a = document.createElement('a'); a.href = value; a.textContent = range.toString(); range.deleteContents(); range.insertNode(a); break; case 'unlink': var parent = range.commonAncestorContainer.parentElement; if (parent && parent.tagName === 'A') { var textNode = document.createTextNode(parent.textContent); parent.parentNode.replaceChild(textNode, parent); } break; case 'insertImage': var img = document.createElement('img'); img.src = value; range.deleteContents(); range.insertNode(img); break; case 'foreColor': var existingSpan = findExistingSpanWithStyle(range, 'color'); if (existingSpan) { existingSpan.style.color = value; } else { var span = document.createElement('span'); span.style.color = value; range.surroundContents(span); } break; case 'fontSize': var existingSpan = findExistingSpanWithStyle(range, 'fontSize'); if (existingSpan) { if (value === '') { unwrap(existingSpan); } else { existingSpan.style.fontSize = value; } } else { var span = document.createElement('span'); span.style.fontSize = value; range.surroundContents(span); } break; default: document.execCommand(cmd, false, value); } updateTextarea(); updateToolbar(); }; // RGBからHEXへ変換 function rgbToHex(color) { var hex = '#'; if (color.match(/^#[a-f\d]{3}$|^#[a-f\d]{6}$/i)){ return color; } var regex = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); if (regex){ var rgb = [ parseInt(regex[1]).toString(16), parseInt(regex[2]).toString(16), parseInt(regex[3]).toString(16) ]; for (var i = 0; i < rgb.length; ++i){ if (rgb[i].length == 1){ rgb[i] = '0' + rgb[i]; } hex += rgb[i]; } return hex; } } // タグの削除 function unwrap(element) { var parent = element.parentNode; while (element.firstChild) { parent.insertBefore(element.firstChild, element); } parent.removeChild(element); } //該当範囲にタグが反映されているのか確認 function findAncestor(node, tagName, allowedTags) { while (node) { if (node.nodeType === 1 && node.tagName === tagName) { return node; } if (allowedTags && allowedTags.includes(node.tagName)) { return node; } node = node.parentNode; } return null; } // 該当範囲にスタイルが適応されているかの確認 function findExistingSpanWithStyle(range, style) { var container = range.commonAncestorContainer; while (container) { if (container.nodeType === 1 && container.tagName === 'SPAN' && container.style[style]) { return container; } container = container.parentNode; } return null; } // ツールバー更新関数 function updateToolbar() { // ボタンの状態をクリアする $('#toolbar button').removeClass('active'); $('#toolbar #textColor').val('#000'); $('#toolbar select#fontSize').val(0); var selection = window.getSelection(); if (selection && selection.rangeCount > 0) { var range = selection.getRangeAt(0); var parentElement = range.commonAncestorContainer.parentElement; // bold var ancestorStrong = findAncestor(range.commonAncestorContainer, 'STRONG'); if (ancestorStrong) { $('#toolbar button#bold').addClass('active'); } // font color var existingSpanColor = findExistingSpanWithStyle(range, 'color'); if (existingSpanColor) { var fontColor = existingSpanColor.style.color; $('#toolbar #textColor').val(rgbToHex(fontColor)); } // font size var existingSpan = findExistingSpanWithStyle(range, 'fontSize'); if (existingSpan) { var fontSize = existingSpan.style.fontSize; $('#toolbar select#fontSize').val(fontSize); } } } // エディタの内容をテキストエリアに反映する関数 function updateTextarea() { var content = $('#editor').html(); $('#textarea').val(content); } // テキストエリアの内容をエディタに反映する関数 function updateEditor() { var content = $('#textarea').val(); $('#editor').html(content); } // モード切替関数 function toggleView() { if (isSourceMode) { $('#textarea').hide(); $('#editor').show(); updateEditor(); $('#toggleView').text('ソースを見る'); } else { updateTextarea(); $('#editor').hide(); $('#textarea').show(); $('#toggleView').text('エディタに戻る'); } isSourceMode = !isSourceMode; } // 画像モーダル表示関数 window.showImageModal = function() { $('#imageModal').show(); }; // 画像モーダル閉じる関数 window.closeImageModal = function() { $('#imageModal').hide(); }; // 画像選択関数 window.selectImage = function(imgSrc) { execCmd('insertImage', imgSrc); closeImageModal(); }; // フォーム送信前の処理 window.prepareForm = function() { // 不要なタグや空のタグを削除する処理 var editorContent = $('#editor').html(); var cleanedContent = cleanHTML(editorContent); $('#editor').html(cleanedContent); }; // HTMLをクリーンアップする関数 function cleanHTML(html) { var cleaned = html.replace(/<div><br><\/div>/g, '<br>'); cleaned = cleaned.replace(/<div><br\s*\/?><\/div>/g, '<br>'); cleaned = cleaned.replace(/<div><\/div>/g, ''); cleaned = cleaned.replace(/<p><br><\/p>/g, '<br>'); cleaned = cleaned.replace(/<p><br\s*\/?><\/p>/g, '<br>'); cleaned = cleaned.replace(/<p><\/p>/g, ''); // cleaned = cleaned.replace(/<strong><\/strong>/g, ''); cleaned = cleaned.replace(/<em><\/em>/g, ''); cleaned = cleaned.replace(/<u><\/u>/g, ''); return cleaned; } // 初期化：テキストエリアの内容をエディタに反映 updateEditor(); // フォーカスをエディタに設定 $('#editor').focus(); // エディタの内容が変更されたときにテキストエリアを更新 $('#editor').on('input', updateTextarea); // ソースビュー切り替えボタンのイベントハンドラ $('#toggleView').on('click', toggleView); // 文字色変更イベントハンドラ $('#textColor').on('input', function() { execCmd('foreColor', this.value); }); }); 「window.getSelection()」を使用してカーソールで選択している範囲を取得。「execCmd」関数に押されたボタンの値を送ることで各タグを実装。 「findAncestor」関数や「findExistingSpanWithStyle」関数は押したボタンのタグが既に付与されているかを判定するのに使用、スタイルのみを変更することで二重にタグを付与することを防いでいます。

スライダーの中に音源を設置し都度再生したいとのご要望があった際に、スライドが切り替わる度に自動で音源が停止されるように実装した、音源の停止方法をメモ。 HTML <div class="slide"> <div class="slide__flame"> <ul class="list"> <li> <audio controls src="sample01.mp3" id="sample01">音源01</audio> <img src="img01.jpg"> <div class="play"><a href="sample01">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample01">停止</a></div><!-- iOS用 --> </li> <li> <audio controls src="sample02.mp3" id="sample02">音源02</audio> <img src="img02.jpg"> <div class="play"><a href="sample02">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample02">停止</a></div><!-- iOS用 --> </li> … <li> <audio controls src="sample09.mp3" id="sample09">音源09</audio> <img src="img09.jpg"> <div class="play"><a href="sample09">再生</a></div><!-- iOS用 --> <div class="pause"><a href="sample09">停止</a></div><!-- iOS用 --> </li> </ul> </div> <nav class="slide__nav"> <ul class="slide__nav__list"> <li class="slide__nav__list__item"><a href="" class="prev">前へ</a></li> <li class="slide__nav__list__item"><a href="" class="next">次へ</a></li> </ul> </nav> </div> jQuery $(function(){ var setWidth = $('.slide__flame').width(); var sliderSize = $('.list').length; var position_slide = 0; var maxposition_slide = sliderSize - 1; //音源の停止処理 $('.slide__nav__list a').click(function(){ for($i = 0; $i < sliderSize; $i++){ $('audio').get($i).pause(); $('audio').get($i).currentTime = 0; } }); $('.slide__nav__list__item .prev').click(function(){ if(position_slide > 0){ $('.modal .list').animate({'margin-left':'+='+ setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = position_slide - 1; }else{ $('.modal .list').animate({'margin-left': '-'+ maxposition_slide * setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = maxposition_slide; } return false; }); $('.slide__nav__list__item .next').click(function(){ if(position_slide < maxposition_slide){ $('.modal .list').animate({'margin-left':'-='+ setWidth +'px'}, {duration:500, easing:'swing'}); position_slide = position_slide + 1; }else{ $('.modal .list').animate({'margin-left':'0'}, {duration:500, easing:'swing'}); position_slide = 0; } return false; }); }) 一時停止（pause）後に「currentTime 」を使い開始位置まで巻き戻しすることで停止と同様の機能を実装しています。 尚、iOSでは再生ボタンをクリックしても動かないため、「再生、停止」のボタンを追加し、下記をスクリプトに追記しています。 $('.play a').click(function(){ var audio = '#'+$(this).attr('href'); $(audio).get(0).play(); return false; }); $('.pause a').click(function(){ var audio = '#'+$(this).attr('href'); $(audio).get(0).pause(); $(audio).get(0).currentTime = 0; return false; }); 【JavaScript】Safari だけじゃないオーディオ再生の制約と再生開始遅延の解決方法 jQueryでvideoやaudioを再生したい時はオブジェクト取得方法に注意が必要 【HTML5 + jQuery】音声ファイルの再生／停止を制御するボタン Safari で音声、動画を再生する際に発生する NotAllowedError に対応する方法

トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多いですが、「setInterval」と「clearInterval」で時間の管理をしっかり行わないと均一に処理が行われなくなることがあるので実装方法をメモ。 Javascript $(function(){ //画像の数を数えてナビゲーションを設置 var fadeSize = $('.fanc__fadeimage ul li').length; var fadeOrder = []; for (var i = 0; i < fadeSize; i++){ fadeOrder.push('<li><a href=""></a></li>'); } $('.fanc__fadeimage__nav ol').html(fadeOrder); $('.fanc__fadeimage__nav ol li:first-of-type a').addClass('active'); //自動繰り返しの開始 var timerId = setInterval(fadeImage, 6000); //ナビゲーションボタンクリック時の処理 $('.fanc__fadeimage__nav a').click(function(){ //自動繰り返しの停止 if(timerId) { clearInterval(timerId); } $('.fanc__fadeimage__nav a').removeClass('active'); $(this).addClass('active'); var index = $(this).parent('li').index(); var next = $('.fanc__fadeimage ul li').eq(index); $('.fanc__fadeimage ul li').removeClass('last-active'); $('.fanc__fadeimage ul li.active').addClass('last-active').removeClass('active'); next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500, function(){ //自動繰り返しの再設定 timerId = setInterval(fadeImage, 6000); }); return false; }); }); //フェードインアニメーション関数 function fadeImage(){ var fadeSize = $('.fanc__fadeimage ul li').length; var index = $('.fanc__fadeimage__nav a.active').parent('li').index(); $('.fanc__fadeimage__nav ol li a').removeClass('active'); if(index < fadeSize - 1){ $('.fanc__fadeimage__nav li').eq(index + 1).find('a').addClass('active'); }else{ $('.fanc__fadeimage__nav li:first-of-type a').addClass('active'); } var fadeActive = $('.fanc__fadeimage ul li.active'); var next = fadeActive.next().length ? fadeActive.next() : $('.fanc__fadeimage ul li:first'); $('.fanc__fadeimage ul li.last-active').removeClass('last-active'); fadeActive.addClass('last-active').removeClass('active'); next.css({'opacity':'0'}).addClass('active').animate({'opacity':'1.0'}, 2500); } HTML <div class="fanc__fadeimage"> <ul> <li class="active"><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> <li><img src="○○○○.jpg"></li> </ul> <nav class="fanc__fadeimage__nav"> <ol> </ol> </nav> </div> 参考例はフェードインアニメーション「fadeImage（）」。「setInterval」を使用して6秒ごとにがフェードインアニメーション関数の仕様で画像を自動切り替え。停止する際に対象となる処理を指定するため「timerId」を定義しています。 ナビゲーションボタンをクリックされたときに「clearInterval」を使用して繰り返し処理を停止。クリック時の処理を完了したのち再度「setInterval」を使用して繰り返し処理を再設定しています。 setInterval（一定時間ごとの処理）の中断と再開。 【JavaScript】setIntervalを停止させたり再開させる方法・コード例 jQueryで処理を遅延実行させる方法を解説！

電話やDMなど、自社サービスを営業する上で欠かせないのが営業用のリスト。業種の違いはありますが、販売されているリストを購入する以外では、自社サービスで売上に貢献できそうな企業様の掲載されているページを探して記録していく流れになると思います。その際に一点づつコピー・ペーストでも出来るのですが、数十件ともなると時間がかかるので一斉取得する方法をメモ。 営業用リストの作成方法 リストの記載されてるページのソースを取得する まずは、リストに必要な項目の掲載されているページを開き、「ソースを見る（Ctr+u）」で必要な部分の「HTMLタグ」をコピーし、新規にHTMLファイルを作成する。 例：弊社制作実績ページ HTML <ul class="works_list__post__list"> <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> サービスサイト</span> <a href="https://web.syu-u.com/blog/?works=%e3%81%84%e3%81%91%e3%81%b0%e3%81%aa-%e6%a1%82%e5%8f%a4%e6%b5%81%e3%83%bb%e6%a1%82%e6%b5%81"> <figure class="works_list__post__list__item__img"> <img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.47-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">いけばな 桂古流・桂流</h2> <p class="works_list__post__list__item__content__description"> 京都桂離宮の華務職を始祖とし、日本の伝統的な生け花と現代花を教授する他、今の時代にマッチしたクリエイティブ・フラワーの指導も行っている「いけばな　桂古流・桂流」のサービスサイト。CMSはワードプレスを使用して構築。海外からの応募もあるため、日本語と英語の二か国語で作成。各言語に合わせてページを分けるのでなく、cookie（クッキー）を使用した表示切替により同一ページ内に異なる言語を混在する形式を採用。ページが増えることを抑えることで運用もしやすくしています。</p> </section> </a> </li> <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> コーポレートサイト</span> <a href="https://web.syu-u.com/blog/?works=presby%ef%bc%88%e3%83%97%e3%83%ac%e3%82%b9%e3%83%93%e3%83%bc%ef%bc%89"> <figure class="works_list__post__list__item__img"> <img width="1899" height="1266" src="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-300x200.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1024x683.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-768x512.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2024/01/スクリーンショット-2024-01-24-16.21-1536x1024.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">presby（プレスビー）</h2> <p class="works_list__post__list__item__content__description"> オリジナルブランドの度数調節メガネ「 ドゥーシリーズ 」を手掛ける「Presby（プレスビー）」のコーポレートサイトです。CMSはワードプレスを使用して構築。カスタム投稿タイプ機能を使うことで、商品・取扱店舗一覧・お客様の声の投稿を実現。商品カテゴリー部分はトップページのカテゴリー項目やスライダーとも連動し、HTMLを操作することなくカテゴリーの追加・編集も可能です。</p> </section> </a> </li> ・ ・ ・ <li class="works_list__post__list__item"> <span class="works_list__post__list__item__cat"> サービスサイト</span> <a href="https://web.syu-u.com/blog/?works=%e3%83%a1%e3%83%87%e3%82%a3%e3%82%ab%e3%83%abdr%e3%82%bb%e3%83%a9%e3%83%94%e3%82%b9%e3%83%88%e3%82%b9%e3%82%af%e3%83%bc%e3%83%ab"> <figure class="works_list__post__list__item__img"> <img width="1899" height="913" src="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg" class="attachment-full size-full wp-post-image" alt="" decoding="async" loading="lazy" srcset="https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45.jpg 1899w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-300x144.jpg 300w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1024x492.jpg 1024w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-768x369.jpg 768w, https://web.syu-u.com/blog/wp-content/uploads/2023/01/スクリーンショット-2023-01-19-11.45-1536x738.jpg 1536w" sizes="(max-width: 1899px) 100vw, 1899px" /></figure> <section class="works_list__post__list__item__content"> <h2 class="works_list__post__list__item__content__heading">メディカルDr.セラピストスクール</h2> <p class="works_list__post__list__item__content__description"> 一般社団法人日本メディカルDr.セラピスト協会が運営する美容・痩身に関する通信講座を取り扱う「メディカルDr.セラピストスクール」のサービスサイト。 </p> </section> </a> </li> </ul> HTMLファイルにjavascriptを追記して抜き出したい項目を設定する 作成したHTMLファイルに、ソースの中から抜き出したい項目を選定してjavaseciptを追記。該当項目の出力回数分ループ処理を行い「console.log」で出力。複数の変数を抜き出す場合は「,（カンマ）」等の区切り用文字を入れておと後で編集しやすい jQuery（javascript） <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ var size = $('h2').size(); for($i = 0; $i < size; $i++){ var url = $('.works_list__post__list__item').eq($i).find('a').attr('href'); console.log($('h2').eq($i).text()+','+url); } }); </script> 参考例は「サイト名称（h2）」と掲載ぺーじの「URL（.works_list__post__list__item a）」を抽出 編集したファイルにアクセスし、コンソール画面を開く 編集したファイルをクリックしてローカルで開きます。そのままの状態でgoogleクロームなどのブラウザに備わっている開発ツール（Ctr+Shift+i）を使用してコンソールタグを開くと、今回設定した内容が表示されます。 画面に記載されているリストをコピーし、エクセルに貼り付け、調整する コンソール画面に表示されている内容をコピーしてエクセルに貼り付け。「データ」タブの「区切り位置」ボタンをクリック、②で設定したカンマや空白等でデータを区切って整えると営業用リストの完成。 ソースによって出力項目の設定は必要ですが、一点づつコピー・ペーストするよりも時間が短縮できます。

以前、画面の端から端まで無限ループするスライダーを実装したのですが、そちらの応用版。適当なところで巻き戻し、先送りをしたいとの要望があったので実装方法をメモ。 HTML <div class="loopSlider"> <div class="loopslider__wrap"> <ul> <li><img src="○○○○"></li> <li><img src="○○○○"></li> <li><img src="○○○○"></li> <li><img src="○○○○"></li> <li><img src="○○○○"></li> <li><img src="○○○○"></li> <li><img src="○○○○"></li> </ul> </div> </div> <nav class="loopSlider__nav"> <ul> <li class="toleft"><a href="">toleft</a></li> <li class="toright"><a href="">toright</a></li> </ul> </nav> <script> $(function(){ loopsliderPosition(); }); </script> CSS .loopSlider { overflow: hidden; } .loopslider__wrap { display: flex; } .loopslider__wrap ul { display: flex; } .loopslider__wrap ul li { width: 350px; height: 320px; padding: 0 30px 0 0; } .loopslider__wrap ul li img { width: 100%; height: 100%; object-fit: cover; } jQuery $(function () { var LoopsliderSize = $('.loopslider__wrap ul').width(); $('.loopslider__wrap').css({'width':LoopsliderSize * 3 +'px'}).attr('id', '-'+LoopsliderSize); $('.loopslider__wrap').find('ul:first').clone().appendTo('.loopSlider .loopslider__wrap'); $('.loopslider__wrap').find('ul:first').clone().appendTo('.loopSlider .loopslider__wrap'); var loopslider__FW = $('.loopslider__wrap ul li:first').width(); $('.loopSlider__nav .toleft a').click(function(){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) - loopslider__FW; //停止位置を保存 $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'-='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; }); $('.loopSlider__nav .toright a').click(function(){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) + loopslider__FW; //停止位置を保存 $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'+='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; }); }); function loopsliderPosition(){ //画像一点に対して7.5秒に設定 var Looptime = $('.loopslider__wrap ul:first li').size() * 7500; //ループする距離を取得 var LoopsliderSize = $('.loopslider__wrap ul:first').width(); //ループの開始位置（座標位置）を取得 var loopslider__position = Number($('.loopslider__wrap').attr('id')); //必要に応じて開始位置を調整 if(loopslider__position >= 0){ loopslider__position = loopslider__position - LoopsliderSize; }else if(loopslider__position - LoopsliderSize <= '-'+LoopsliderSize*3){ loopslider__position = loopslider__position + LoopsliderSize; } $('.loopslider__wrap').css({'margin-left':+loopslider__position +'px'}); $('.loopslider__wrap').stop().animate({'margin-left':+(loopslider__position - LoopsliderSize)+'px'}, Looptime, 'linear', function(){ loopsliderPosition(); }); }; クリック時に対象方向へ移動させるのは通常のクリックスライダーと同じですが、常に左方向へ移動してるため、クリックした時点でループを解除。停止位置の座標を取得し値をidに保管してから、再度ループ処理（loopsliderPosition）を読み込むことでスライダーを再開。この時に開始位置がオリジナル画像の範囲内に無い場合は、開始位置を調整することで途切れることのないスライダーを実装しています。 スマホのフリック対応は下記。PC版のクリック処理の後に追記する。 jQuery if($(window).width() < 960){ $('.loopSlider').bind({ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; }, 'touchmove': function(e) { var moveX = this.touchX - event.changedTouches[0].pageX, moveY = this.touchY - event.changedTouches[0].pageY, moveRate = moveX / moveY; if(moveRate > Math.tan(15 * Math.PI/180)){ e.preventDefault(); } this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, 'touchend': function(e){ edge = this.slideX % top__item__slider__FW; if(edge < -50){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) - loopslider__FW; $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'-='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; }else if(edge > 50){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) + loopslider__FW; $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'+='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; } } }); } サンプル .loopSlider { overflow: hidden; } .loopslider__wrap { display: flex; } .loopslider__wrap ul { display: flex; } .loopslider__wrap ul li { width: 350px; height: 320px; padding: 0 30px 0 0; } .loopslider__wrap ul li img { width: 100%; height: 100%; object-fit: cover; } 左へ 右へ $(function(){ var LoopsliderSize = $('.loopslider__wrap ul').width(); $('.loopslider__wrap').css({'width':LoopsliderSize * 3 +'px'}).attr('id', '-'+LoopsliderSize); $('.loopslider__wrap').find('ul:first').clone().appendTo('.loopSlider .loopslider__wrap'); $('.loopslider__wrap').find('ul:first').clone().appendTo('.loopSlider .loopslider__wrap'); var loopslider__FW = $('.loopslider__wrap ul li:first').width(); $('.loopSlider__nav .toleft a').click(function(){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) - loopslider__FW; //停止位置を保存 $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'-='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; }); $('.loopSlider__nav .toright a').click(function(){ var result = $('.loopslider__wrap').css('margin-left').replace(/px/g, ''); var val = Number(result) + loopslider__FW; //停止位置を保存 $('.loopslider__wrap').attr('id', val); $('.loopslider__wrap').stop().animate({'margin-left':'+='+loopslider__FW+'px'}, 'slow', 'swing', function(){ loopsliderPosition(); }); return false; }); loopsliderPosition(); }); function loopsliderPosition(){ //画像一点に対して7.5秒に設定 var Looptime = $('.loopslider__wrap ul:first li').size() * 7500; //ループする距離を取得 var LoopsliderSize = $('.loopslider__wrap ul:first').width(); //ループの開始位置（座標位置）を取得 var loopslider__position = Number($('.loopslider__wrap').attr('id')); //必要に応じて開始位置を調整 if(loopslider__position >= 0){ loopslider__position = loopslider__position - LoopsliderSize; }else if(loopslider__position - LoopsliderSize

サイト内の特定のページに関して、一定のサイトからの流入を判別する際にパラメータとPHPを使用してcookie（クッキー）の取得を行うことが多いのだけれど、今回はjavascriptでの指定があったので対応方法をメモ javascript if(document.cookie){ var params = document.cookie.split(';'); var array = {}; for(i = 0; i < params.length; i++){ var term = params[i].split('='); // キーと値の前後のスペースを除去 var key = term[0].trim(); var value = term[1] ? term[1].trim() : ''; array[key] = value; } console.log(array); //確認用にコンソールに出力 //目的のクッキーに対しての処理 if(array['○○○○'] == '○○○○'){ alert('○○○○'); } } サイト内に存在している全てのクッキーを取得してパラメータ単位に「split」で分割。更に上記をキーと値とに分割して連想配列に収納。最後の処理で目的のクッキーと合致した場合にのみアラートを表示させています。

CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッグ＆ドロップで感覚的に操作して入れ替える方法をメモ。 実装前に「jquery-ui」を読み込む ドラグ＆ドロップ機能を実装するにあたり、jQueryとjQuery UI のライブラリを読み込む必要があります。今回はCDNを利用しています。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> ドラッグ＆ドロップ機能の実装 HTML <form action="○○○○.php" method="post"> <table class="listTable"> <thead> <tr> <th>NO</th> <th>カテゴリー名</th> <th>並び順</th> </tr> </thead> <tbody id="sortdata"> <tr name="1"> <td>1</td> <td>タロット占い</td> <td name="num_data"><input type="hidden" name="data[]" value="1"><input type="text" name="item_order[]" value="1"></td> </tr> <tr name="1"> <td>2</td> <td>ヒーリング</td> <td name="num_data"><input type="hidden" name="data[]" value="2"><input type="text" name="item_order[]" value="2"></td> </tr> <tr name="1"> <td>3</td> <td>西洋占星術</td> <td name="num_data"><input type="hidden" name="data[]" value="3"><input type="text" name="item_order[]" value="3"></td> </tr> </tbody> </table> <ul class="submitbtn"> <li><input type="submit" name="changeno" value="表示順を更新する"></li> </ul> </form> <!-- ページ送り機能 --> <nav> <ul class="paging"> <li><a href="">最初のページ</a></li> <li><a href="?pageno=1">1</a></li> <li><a href="?pageno=2">2</a></li> <li><a href="?pageno=3">3</a></li> <li><a href="?pageno=3">最後の(3)ページ</a></li></ul> </nav> <!-- ページ送り機能 --> trタグの「name」の値にはオブジェクトの開始番号を入力。上記例は最大表示数3までで、1ページ目のため1。2ページ目の場合は「3*（2-1）+1＝4」、3ページ目の場合は「3*（3-1）+1＝7」となります。 jQuery $('#sortdata').sortable(); var defno = $('#sortdata').find('tr').attr('name'); $('#sortdata').bind('sortstop',function(){ $(this).find('[name="num_data"]').each(function(idx){ $(this).find('input[type="text"]').val(Number(defno)+idx); }); }); jQuery UI の Sortableメソッドを利用し、ドロップ時に取得したオブジェクトのの開始番号から加算して自動的に番号を割り振り、入力項目に値を挿入。 PHP if(!empty($_POST['changeno'])){ $count = count($_POST['data']); for($i = 0; $i < $count; $i++){ //データベースへの登録処理 $updatesql = $db->pdo->prepare('UPDATE ○○○○ SET ○○○○ = :item_order WHERE ○○○○ = :id'); $updatesql->bindValue(':item_order', $_POST['item_order'][$i], PDO::PARAM_INT); $updatesql->bindValue(':id', $_POST['data'][$i], PDO::PARAM_INT); $updatesql->execute(); } } サブミットボタンの押下時にフォームの値を取得してデータベースの値を更新しています。 仕様上、ページを渡ってオブジェクトの入れ替えができないので、その際は数値を直接入力してから再度並びを調整します。 jQuery UI を利用したテーブル行のドラッグ＆ドロップによる入れ替え方法

ホームページ内に動画を設置する際にYouTubeを利用する場合は多い。YouTubeの埋め込み自体は、対象の動画ページから埋め込みタグを取得して設置することで可能ですが、読み込みに時間がかかるため軽量化してほしいとの相談があったので解決した時の実装方法をメモ HTML <ul class="youtube__list"> <li> <div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div> </li> <li> <div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div> </li> <li> <div class="youtube__fast"><iframe data-src="https://www.youtube.com/embed/動画ID" width="560" height="315"></iframe></div> </li> </ul> jQuery $(function(){ var fast_movies = []; var fast_movies_w = []; var fast_movies_h = []; $('.youtube__fast iframe').each(function(index, element) { var fast_srcs = $(this).attr('data-src'); fast_movies[index] = fast_srcs.split('/'); fast_movies_w[index] = $('.youtube__fast').width(); fast_movies_h[index] = $('.youtube__fast').width() * 0.5625; //置き換え $(this).after('<div class="youtube__play" style="height: '+fast_movies_h[index]+'px"><img src="https://img.youtube.com/vi/'+fast_movies[index][fast_movies[index].length -1]+ '/maxresdefault.jpg" width="' + fast_movies_w[index] + '" height="'+fast_movies_h[index]+'"></div>').remove(); }); $('.youtube__play').each(function(index, element) { $(this).hover(function(){ $(this).after('<div class="youtube__frame"><iframe width="'+fast_movies_w[index]+'" height="'+fast_movies_h[index]+'" src="https://www.youtube.com/embed/'+fast_movies[index][fast_movies[index].length -1]+'" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>').remove(); }); }); }); CSS .youtube__list { display: flex; width: 1100px; margin: 20px auto 0; } .youtube__list li { width: 350px; } .youtube__list li + li { margin-left: auto; } @media screen and (max-width: 768px) { .youtube__list { display: block; width: 97%; } .youtube__list li { width: 100%; } .youtube__list li + li { margin: 10px 0 0; } } .youtube__frame { position: relative; width: 100%; height: 0; padding-top: 56.25%; } .youtube__frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube__play { position: relative; cursor: pointer; } .youtube_play img { width: 100%; height: 100%; object-fit: cover; } .youtube_play::after { content: ""; display: block; background: url(YouTubeアイコン.png); background-size: 100% auto; width: 70px; height: 50px; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; } 初回読み込み時にYouTubeの読み込みタグ（iframe）を画像に置換。オンマウス時に再置換してYouTubeタグに戻しています。スマートフォンではマウスオーバーが使えないためクリックが一回分増えます。 Youtube 動画の埋め込みで遅いページの高速化YouTube動画の埋め込みを軽くする

YouTubeに掲載している動画の特定再生リストをサイト内に一覧表示したいという要望がありましたので実装した方法をメモ Javascript var apikey = '○○○○'; //google apiキー var results = []; // URLを生成する関数 function generate_api_url(listid) { var url = 'https://www.googleapis.com/youtube/v3/playlistItems'; url += '?part=snippet'; url += '&playlistId=' + listid; url += '&key=' + apikey; return url; } // データを取得する関数 function get_api_data(listid) { var getData = $.ajax({ url: generate_api_url(listid), dataType: 'json' }); getData.then( function(data) { for (var i = 0; i < data.items.length; i++) { if(data.items[i].snippet.title!='Private video' && data.items[i].snippet.title != 'Deleted video'){ results.push({ "title": data.items[i].snippet.title, "id": data.items[i].snippet.resourceId.videoId }); } } for (var i=0; i < results.length; i++){ $('.movielist__mv__list').append('<li class=""><div class="movielist__mv__list__image"><a href="'+results[i]['id']+'"><img src="https://img.youtube.com/vi/'+results[i]['id']+'/0.jpg" alt="'+results[i]['title']+'" /></a></div><h3><a href="'+results[i]['id']+'">'+results[i]['title']+'</a></h3></li>'); } }, function(error) { console.log(error); } ); } $(function (){ get_api_data('○○○○'); //再生リストID }); HTML <ul class="movielist__mv__list"> </ul> google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「YouTube Data API v3」を選択。他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。 Youtube Data API APIキー発行手順と有料か無料かを解説・セキュリティ対策も【2022年9月】YouTube Data API v3を試してみましたYouTube Data APIで再生リスト内の動画情報をまとめて取得する

CTAボタンの実装時にいつでも目につくよう配置しておきたいと希望されることがあります。ボタンが単独で配置されているデザインであれば固定で対応できましすが、今回はコンテンツ内に組み込まれているものだったので対応方法をメモ。 jQuery $('.sidebar__order').css({'width': $('#sidebar1').width()+'px'}); $(window).scroll(function(){ //スクロールするオブジェクトの高さ var boxhight = $('.sidebar__order').height(); //追従開始位置 var toplimit = $('.sidebar__sticky').offset().top; //追従終了位置 var bottomimit = $('.seminar').offset().top - boxhight - 40; if($(window).scrollTop() > toplimit){ $('.sidebar__order').css({'position':'fixed', 'top': '0'}); if($(window).scrollTop() > bottomimit){ $('.sidebar__order').css({'position':'absolute', 'top': bottomimit+'px'}); } }else{ $('.sidebar__order').css({'position':'initial', 'top': 'auto'}); } }); HTML <div id="sidebar1"> <div class="sidebar__bnr"> <img src="○○○○.png"> </div> <section class="sidebar__auther"> <p class="sidebar__auther__image"><img src="○○○○.png"></p> <dl> <dt class="sidebar__auther__heading">運営会社：○○○○</dt> <dd>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</dd> <dd class="sidebar__auther__btn"><a href="/" target="_blank">公式サイトを見る＞</a></dd> </dl> </section> <div class="sidebar__sticky"> <section class="sidebar__order"> <div class="sidebar__order__inner"> <h2 class="sidebar__order__heading">まずはお気軽に<strong>お問い合わせ</strong>を。</h2> </div> <p class="sidebar__order__btn"><a href="">ホームページ制作の<br>プロに相談する（無料）</a></p> </section> </div> </div> <section class="seminar"> <h2 class="section__heading"><i class="fas fa-th-large"></i>セミナー情報</h2> <p class="section__btn"><a href="/seminar/">セミナー情報を見る</a></p> </section> 「sidebar__order」で囲まれた部分が「sidebar__sticky」の範囲内で追従。スクロールに合わせて「sidebar__order」に上部からの座標を付与して固定。「offset()」では下部座標をとれないので、下部コンテンツ「seminar」の上部座標位置を起点に追従できる下限座標を算出。 ※実装サイトは「sidebar1」はメインコンテンツの右側に配置されているため「sidebar__sticky」に高さが設けられています。 Jquery で一定範囲のみスクロールに追従させてみる。 実装サイト Webly（ウェブリー）

フリックスライダーなどページ表示幅を自動取得して機能を実装する場合、ウィンドウサイズを変更した際には設定幅を再取得する必要があります。手動のページ再読み込みでも可能ですが、自動で再読み込みできるようにした方法をメモ javascript var timer = false; var prewidth = $(window).width(); $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var nowWidth = $(window).width(); if(prewidth !== nowWidth){ location.reload(); } prewidth = nowWidth; }, 200); }); ウインドウのリサイズ操作が終わった時にリロードする方法

パソコンやスマートフォンの戻るボタンを使って画面を戻す（ブラウザバックする）時がありますが、スクロールアニメーションなどを使用している場合は、ブラウザバック時には画面が真っ白になる場合もあります。そこで、ブラウザバック時にも問題なく画面が表示されるよう、戻るボタンにイベント設置する方法をメモ。 javascript //ブラウザバック処理 $(document).ready(function () { if (window.performance.navigation.type == 2) { //ここに処理を記載 } }); ブラウザバックで画面遷移してきたことを判定し、処理を動かすブラウザバック時にイベントを仕掛けたい

javascriptを使用して指定値を取得する際に、「jQuery」を使うことが多いのですが、既存のサイトを編集できる権限がない状態で、googleタグマネージャー等の外部ツールに値を渡す必要があり、無理矢理値を取得した際に使った方法をメモ。 事例1：コンバージョン時の値を取得 今回は「お申込みボタンクリック時に表中のお名前の姓に該当する値のみを取得する」という内容。 HTML <h2 id="order_info_checkout_title" class="form_title">お客様情報</h2> <table id="order_info_checkout"> <tr id="order_info_name"> <th>お名前</th> <td>カブシキカイシャ&nbsp;シュウ</td> </tr> <tr id="order_info_kana"> <th>ふりがな</th> <td>かぶしきかいしゃ&nbsp;しゅう</td> </tr> <tr id="order_info_zip"> <th>郵便番号</th> <td>〒184-0002</td> </tr> <tr id="order_info_prefecture"> <th>都道府県</th> <td>東京都</td> </tr> <tr id="order_info_address1"> <th>住所1（市郡区/町・村・丁目・番地）</th> <td>小金井市梶野町</td> </tr> <tr id="order_info_address2"> <th>住所2（マンション名・号室）</th> <td></td> </tr> <tr id="order_info_tel_no"> <th>電話番号</th> <td>042-316-1895</td> </tr> <tr id="order_info_email"> <th>メールアドレス</th> <td>○○○○@syu-u.com</td> </tr> </table> <section class="k-button"> <a href="">申し込む</a> </section> javascript //値の取得 let entryname = document.getElementById("order_info_name"); let val_entryname = entryname.innerHTML; val_entryname = val_entryname.replace(/\r?/g, "").replace(/\s+/g, "").replace(/<th>お名前<\/th><td>/g, "").replace(/<\/td>/g, ""); val_entryname_ary = val_entryname.split("&nbsp;"); //クリック時にアラートを出力 let targets = document.getElementsByClassName("k-button"); for(let i = 0; i < targets.length; i++){ targets[i].addEventListener("click",() => { alert("姓"+val_entryname_ary [0]); }, false); } 該当箇所に直接クラスやIDが割り振られていないため、親要素のID（order_info_name）から「innerHTML」を使用してHTMLを一式取得してから、「replace」を使用して改行と不要な文字列を削除。最終的に得られた値を「split」を使用して分割して目的の値を取得。 アラート処理もクラス（k-button）から取得する都合で、一度で処理できないので「for」ループ処理を介して機能を実装。

フォームの入力項目を作成した際に、テキストエリアとは別にカラーピッカーを設置する必要があった時に実装した「Spectrum」の使い方をメモ。 datepicker導入の手順 spectrum.jsを読み込む HTML <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css"> inputタグを設置し、spectrumを適応。 HTML <input type="hidden" name="color" value="#f00"> <input type="text" id="colorpicker"> カラーピッカーの設置のみであれば「<input type="text" id="colorpicker">」で可能だが、フォームを送信した際に値を取得できないため、「<input type="hidden" name="color">」を使用し値を取得。初期値の「value」は自由に変更可。 jQuery <script> var defcolor = $('input[name="color"]').val(); //初期値を取得 $("#colorpicker").spectrum({ color: defcolor, showPalette: true, chooseText: "決定", change: function(color){ setcolor = color.toHexString(); $('input[name="color"]').val(setcolor); }, }); </script> 参考例はカラーパレット、初期値、色を変更した際のアクション、テキストをカラーピッカーに設定しているが、その他に色々と設定ができるようなので、詳しくは下記サイトを参照。 Spectrumの使い方 (Webページにカラーピッカーを導入する)spectrum.jsで簡単にカラーピッカーを設置する サンプル var defcolor = $('input[name="color"]').val(); //初期値を取得 $("#colorpicker").spectrum({ color: defcolor, showPalette: true, chooseText: "決定", change: function(color){ setcolor = color.toHexString(); $('input[name="color"]').val(setcolor); }, });

レスポンシブ対応でサイトを制作時に「$(window).width()」や「$(window).innerWidth()」（jQuery）を使い、ブレイクポイントをCSSで設定してるメディアクエリの値と同じにしてしまうと誤差が生じる時があります。これはCSSとjQueryとでは、スクロールバーの幅に対しての処理が異なり、jQueryではページ幅にスクロールバーの幅は含まないから。そこで、誤差が生じないための解決方法をメモ。 javascript if(window.innerWidth < 数値){ //ここに処理を記載 } 普通のjavasciptを使用することで、CSSのメディアクエリの値と一致します。

jQueryを使用したページスクロールアクション（パララックス）の一つ。対象コンテンツの直前で、コンテンツ（ボタン）を左右交互にスライドインで表示させる方法のメモ。 HTML <section class="sample"> <ul class="sample__slide__list"> <li class="sample__slide__list__item"><a href="">リンクボタン01</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン02</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン03</a></li> <li class="sample__slide__list__item"><a href="">リンクボタン04</a></li> </ul> </section> CSS .sample { overflow: hidden; } .sample__slide__list__item { width: 100%; background: rgba(0, 0, 0, 1); position: relative; z-index: 0; overflow: hidden; opacity: 0; } .sample__slide__list__item:nth-of-type(2n+1) { margin-left: 100vw; } .sample__slide__list__item:nth-of-type(2n) { margin-left: -100vw; } .sample__slide__list__item:nth-of-type(n+2) { margin-top: 1px; } .sample__slide__list__item::before { content: ""; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: -1; opacity: 0.77; } .sample__slide__list__item:nth-of-type(1)::before { background: #f00; } .sample__slide__list__item:nth-of-type(2)::before { background: #f00; } .sample__slide__list__item:nth-of-type(3)::before { background: #f00; } .sample__slide__list__item:nth-of-type(4)::before { background: #f00; } .sample__slide__list__item a { display: block; width: auto; padding: 40px 0; font-weight: bold; text-align: center; color: #fff; } 表示範囲の大枠を「overflow: hidden;」に設定することで、スマホでもレイアウトを崩すことなく表示できる。 Javascript $(window).scroll(function(){ var sH = window.innerHeight * 2 / 3; var offsetTop = $(window).scrollTop(); if(offsetTop > $('.sample').offset().top - sH){ $('.sample__slide__list__item').each(function(i){ //250ミリ秒×並び順（i番目）の待機後アニメーションを実行 $(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing'); }); } }) sHの値でファンクションのトリガー（発動位置）を設定。参考例は対象コンテンツの上位置から使用ブラウザの画面高さの2/3を引いた位置で設定。each関数で「sample__slide__list__item」の個数分、括弧内の処理を実行。delay関数はアニメーション実行までの待機時間。 サンプル .sample { overflow: hidden; } .sample__slide__list { } .sample__slide__list__item { width: 100%; background: rgba(0, 0, 0, 1); position: relative; z-index: 0; overflow: hidden; opacity: 0; } .sample__slide__list__item:nth-of-type(2n+1) { margin-left: 100vw; } .sample__slide__list__item:nth-of-type(2n) { margin-left: -100vw; } .sample__slide__list__item:nth-of-type(n+2) { margin-top: 1px; } .sample__slide__list__item::before { content: ""; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: -1; opacity: 0.77; } .sample__slide__list__item:nth-of-type(1)::before { background: #f00; } .sample__slide__list__item:nth-of-type(2)::before { background: #f00; } .sample__slide__list__item:nth-of-type(3)::before { background: #f00; } .sample__slide__list__item:nth-of-type(4)::before { background: #f00; } .sample__slide__list__item a { display: block; width: auto; padding: 40px 0; font-weight: bold; text-align: center; color: #fff; } リンクボタン01 リンクボタン02 リンクボタン03 リンクボタン04 $(window).scroll(function(){ var sH = window.innerHeight * 2 / 3; var offsetTop = $(window).scrollTop(); if(offsetTop > $('.sample').offset().top - sH){ $('.sample__slide__list__item').each(function(i){ $(this).stop().delay(i * 250).animate({'opacity':'1.0', 'margin-left':'0'}, 250 ,'swing'); }); } })

レンタルサービスのサイト制作に携わった際に使用した、jQuery用プラグイン「datepicker」を使ったカレンダーの実装方法をメモ。 datepicker導入の3つの手順 jQueryを利用するのに必要なcssとjsのURLを読み込む <!-- JQuery-uiのcss ※Datepickerにデザインを適用するために必要--> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- Datepicker日本語化のためのJavascriptをCDNで呼び出す--> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> cssのURL中のbaseが jQuery UI のテーマの名前で、ここを変えると見た目の色が変わる。テーマは ThemeRoller から選択可能。ページ左側の「 Gallaery 」タブから好みのテーマを選んで、テーマ名を小文字にして CSS のリンクに書く。テーマ名が「UI darkness」だったらui-darknessと記述。 inputタグを設置し、Datepickerを適応。 HTML <input type="text" name="○○○○" id="datepicker"> jQuery $(function(){ $('#datepicker').datepicker(); }); 選択範囲（不可日含む）をオプションで設定 jQuery $( function() { //選択不可日を記入 var holidays = ['20200921', '20200922']; $('#datepicker').datepicker({ //申込期日はツアー当日の3日前 minDate: '+3d', //本日から1ヶ月後以降の申込は受け付けない maxDate: '2m', dateFormat: 'yy/mm/dd', beforeShowDay: function (date) { var ymd = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2); if (holidays.indexOf(ymd) != -1) { //選択不可日の処理（前述[holidays]の設定日） return [false, 'ui-state-disabled']; } else if (date.getDay() == 0 || date.getDay() == 6) { //選択不可曜日の処理（日曜日・土曜日） return [false, 'ui-state-disabled']; } else { //選択可能日 return [true, '']; } } }); }); 用途に合わせて選択範囲をオプションで設定。上記は選択不可日と選択不可曜日、選択できる範囲の指定を行っている。 [jQuery UI] Datepicker の使い方とオプション【jQuery入門】Datepickerの使い方とオプション設定まとめ！jqueryuiのdatepickerで日曜・祝日を選択不可にする KARICO / 旅行用品のレンタルサービス

電話番号を記載する際にPCの場合は番号の記載のみで問題ありませんが、スマートフォンの場合は直接電話を掛けることができるようにリンクを設置するのが親切。PCとスマートフォンでHTMLタグを別に記載する方法もありますが、記載漏れの無いように、今回はjQueryを使い自動でリンクを設置する方法をメモ。 HTML <div class="tel">○○○-○○○-○○○○</div> jQuery if($(window).width() < 560){ $('.tel').each(function(){ var str = $(this).text(); $(this).html('<a href="tel:'+str+'">'+str+'</a>'); }); } //実行結果 <div class="tel"><a href="tel:○○○-○○○-○○○○">○○○-○○○-○○○○</a></div> 「$(this).text」関数で対象となるタグ（例：class="tel"）の電話番号（テキスト情報）を取得。「$(this).html」関数を使って、もともとの記載のあった箇所にリンクを付与した電話番号を置き換えています。 「each」関数で繰り返し処理を行っているので、同ページに電話番号が複数ある場合でも可。冒頭のif文（場合分け）は画面サイズ（例：560px）を利用しています。 【jQuery】.text()と.html()の違い

「東洋堂」のランディングページ制作に携わった際に使用したランダムでの画像表示の実装方法をメモ。アクセスすたびに画像の表示順序が変わるので、コンテンツが単調になりにくく、また一点づつ表示されるので、一度に全ての商品を見せるよりも印象付けることができる。 HTML <ul class="mainimage__list"> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> <li class="mainimage__list__item"><img src="画像URL"></li> </ul> jQuery var $list = $('.mainimage__list__item'); var showlist = []; $list.each(function(i) { showlist.push(i); }); showlist.sort(function() { return Math.random() - Math.random(); }); $('.mainimage__list__item').css({opacity:0}); $list.css({opacity: 0}).each(function(i){ $(this).delay(showlist[i] * 500) .animate({opacity: 1}, 500); }); 「each」を使用して、表示する画像のリスト（通し番号）を配列に保存。保存した配列を「sort」を使ってランダムに入れ替える。入れ替えの完了した配列を「animate」を使って表示。表示までの待ち時間は「delay」で指定。 要素をランダムに並び替える 高品質法人印鑑セットを特別価格でご案内｜東洋堂

PC、スマホともにフリック（ドラッグ）できる自動送り式のイメージスライダーを実装した時のソースをメモ。idを取得して、id毎に作動するのでページ内にいくつでも設置可能。 HTML <figure class="imageslider" id="areai_d"> <div class="imageslider__frame"> <ul class="imageslider__frame__slides"> <li><img src="画像URL" ondragstart="return false"></li> <li><img src="画像URL" ondragstart="return false"></li> <li><img src="画像URL" ondragstart="return false"></li> </ul> </div> <nav class="imageslider__nav"> <ol> </ol> </nav> </figure> 「ondragstart」属性の設定は「firefox」対策。 CSS .imageslider .imageslider__frame { width: 100%; height: -webkit-calc(100% - 40px) ; height: calc(100% - 40px) ; position: relative; overflow: hidden; } .imageslider .imageslider__frame .imageslider__frame__slides { display: -webkit-flex; display: flex; } .imageslider .imageslider__frame .imageslider__frame__slides li img { width: 100%; height: 100%; object-fit: cover; } .imageslider .imageslider__nav { margin: 25px 0 0; } .imageslider .imageslider__nav ol { display: -webkit-flex; display: flex; } .imageslider .imageslider__nav li { width: 65px; margin: 0 5px; } .imageslider .imageslider__nav li a { background: #eee; width: auto; height: 15px; display: block; } .imageslider .imageslider__nav li a.active { background: #916f22; } jQuery var target = []; var size = []; var divFW = []; var startMargin = []; var listblock = []; var listposition = []; var listpositionmax = []; var leftposition = []; for(i = 0; i < $('.imageslider').length; i++){ target[i] =$('.imageslider').eq(i).attr('id'); size[target[i]] = $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides li').length; divFW[target[i]] = $('#'+target[i]+' .imageslider__frame').width(); startMargin[target[i]] = size[target[i]]*divFW[target[i]]; $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides').css({'width':size[target[i]]*divFW[target[i]]*3+'px', 'margin-left':'-'+startMargin[target[i]]+'px'}); $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides li').css({'width':divFW[target[i]]+'px'}); listblock[i] = $('#'+target[i]+' .imageslider__frame .imageslider__frame__slides').find('li'); listblock[i].clone().appendTo('#'+target[i]+' .imageslider__frame .imageslider__frame__slides'); listblock[i].clone().prependTo('#'+target[i]+' .imageslider__frame .imageslider__frame__slides'); var li = []; for (var j = 0; j < size[target[i]]; j++){ li.push('<li><a href=""></a></li>'); } $('#'+target[i]+' .imageslider__nav ol').html(li); $('#'+target[i]+' .imageslider__nav ol li:first-of-type a').addClass('active'); listposition[target[i]] = 0 + startMargin[target[i]]; listpositionmax[target[i]] = divFW[target[i]]*(size[target[i]]-1) + startMargin[target[i]]; } $('.imageslider__nav li a').click(function(){ var id = $(this).parents('.imageslider').attr('id'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $(this).addClass('active'); var index = $(this).parent('li').index(); $('#'+id+' .imageslider__frame__slides').animate({'margin-left':startMargin[id]*(-1)-index*divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = Number(index*divFW[id]); return false; }); //PCでのマウス操作 if($(window).width() > 980){ $('.imageslider .imageslider__frame__slides').mousedown(function(e){ this.touchX = event.pageX; this.slideX = $(this).position().left; $('.imageslider .imageslider__frame__slides').mousemove(function(e){ e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.pageX ); $(this).css({left:this.slideX}); this.accel = (event.pageX - this.touchX) * 5; this.touchX = event.pageX; }); }).mouseup(function(e){ var id = $(this).parents('.imageslider').attr('id'); edge = this.slideX % divFW[id]; leftposition[id] = parseInt($('#'+id+' .imageslider__frame__slides').css('margin-left'),10)*(-1); if(edge <= 0){ if(leftposition[id] < listpositionmax[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]+divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.next a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('next'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+startMargin[id]+'px'}); }); listposition[id] = 0+startMargin[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:first-of-type a').addClass('active'); } return false; }else{ if(leftposition[id] > 0 + startMargin[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]-divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').prev().addClass('prev'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.prev a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('prev'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+listpositionmax[id]+'px'}); listposition[id] = listpositionmax[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:last-of-type a').addClass('active'); }); } return false; } $('.imageslider .imageslider__frame__slides').off("mousemove"); }); }else{ //スマホでのフリック操作 $('.imageslider .imageslider__frame__slides').bind({ 'touchstart': function(e) { this.touchX = event.changedTouches[0].pageX; this.slideX = $(this).position().left; }, 'touchmove': function(e) { e.preventDefault(); this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX ); $(this).css({left:this.slideX}); this.accel = (event.changedTouches[0].pageX - this.touchX) * 5; this.touchX = event.changedTouches[0].pageX; }, 'touchend': function(e){ var id = $(this).parents('.imageslider').attr('id'); edge = this.slideX % divFW[id]; leftposition[id] = parseInt($('#'+id+' .imageslider__frame__slides').css('margin-left'),10)*(-1); if(edge <= 0){ if(leftposition[id] < listpositionmax[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]+divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.next a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('next'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+startMargin[id]+'px'}); }); listposition[id] = 0+startMargin[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:first-of-type a').addClass('active'); } return false; }else{ if(leftposition[id] > 0 + startMargin[id]){ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing'); listposition[id] = listposition[id]-divFW[id]; $('#'+id+' .imageslider__nav li a.active').parent('li').prev().addClass('prev'); $('#'+id+' .imageslider__nav li a').removeClass('active'); $('#'+id+' .imageslider__nav li.prev a').addClass('active'); $('#'+id+' .imageslider__nav li').removeClass('prev'); }else{ $('#'+id+' .imageslider__frame__slides').animate({'margin-left':'+='+divFW[id]+'px'}, 'slow', 'swing', function() { $('#'+id+' .imageslider__frame__slides').css({'margin-left':'-'+listpositionmax[id]+'px'}); listposition[id] = listpositionmax[id]; $('#'+id+' .imageslider__nav ol li a').removeClass('active'); $('#'+id+' .imageslider__nav ol li:last-of-type a').addClass('active'); }); } return false; } } }); } //自動スライド処理 setInterval(function(){ for(i = 0; i < $('.imageslider').length; i++){ target[i] =$('.imageslider').eq(i).attr('id'); if(listposition[target[i]] < listpositionmax[target[i]]){ $('#'+target[i]+' .imageslider__frame__slides').animate({'margin-left':'-='+divFW[target[i]]+'px'}, 'slow', 'swing'); listposition[target[i]] = listposition[target[i]]+divFW[target[i]]; $('#'+target[i]+' .imageslider__nav li a.active').parent('li').next().addClass('next'); $('#'+target[i]+' .imageslider__nav li a').removeClass('active'); if($('#'+target[i]+' .imageslider__nav li.next').length > 0){ $('#'+target[i]+' .imageslider__nav li.next a').addClass('active'); $('#'+target[i]+' .imageslider__nav li').removeClass('next'); }else{ $('#'+target[i]+' .imageslider__nav li:first-of-type a').addClass('active'); } }else{ $('#'+target[i]+' .imageslider__frame__slides').css({'margin-left':'-'+Number(startMargin[target[i]]-divFW[target[i]])+'px'}).animate({'margin-left':'-='+divFW[target[i]]+'px'}, 'slow', 'swing'); listposition[target[i]] = 0+startMargin[target[i]]; $('#'+target[i]+' .imageslider__nav ol li a').removeClass('active'); $('#'+target[i]+' .imageslider__nav ol li:first-of-type a').addClass('active'); } } }, 5000); //数字は時間設定5000=5秒 【コピペで30秒!!】超簡単！マウスでフリックをレスポンシブ対応でお手軽実装！

wordpress（ワードプレス）の投稿記事を別サイト（同一ドメイン）で読み込みで表示したという相談があった際にjQueryのみで実装した方法をメモ。 HTML <ul id="feedList"></ul> jQuery $(function(){ $.ajax({ url: 'rssのURL', cache: false, dataType:"xml", success: function(xml){ $(xml).find('item').each(function(){ var title = $(this).find('title').text(); var url = $(this).find('link').attr('href'); $('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList'); }); } }); }); 外部ドメイン（クロスドメイン）のRSSを読み込む場合 外部ドメインのRSSを読み込む際は、セキュリティの関係で ajax では同一ドメインのファイルとしか通信できない制限があるため、別でPHPファイルを用いて実装が必要。 rss.php（PHP） $url = 'rssのURL'; $xml = file_get_contents($url); header('Content-type: application/xml; charset=UTF-8'); print $xml; 上記の内容で作成したファイルを、jqueryの「url」の値として読み込みます例では『rss.php』としてます。 jQuery $(function(){ $.ajax({ url: 'rss.php', cache: false, dataType:"xml", success: function(xml){ $(xml).find('item').each(function(){ var title = $(this).find('title').text(); var url = $(this).find('link').attr('href'); $('<li></li>').html('<a href="'+url+'">'+title+'</a>').appendTo('ul#feedList'); }); } }); }); RSSをJSのみで表示させる | 福島県郡山市のホームページ制作、Web制作　Kyasper Web Design キャスパーウェブデザイン【jQuery + PHP】クロスドメイン対応版：Google Feed API の代替案を紹介します。