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

要素を円形に添って配置する図を作成する場合、画像で作成されている場合も多いのだけれど、要素が増える度に位置を調整して画像を作り直すのも大変だったので、CSSを使用して円形のパスに添ってボタンを等間隔に配置した方法をメモ。 HTML <div class="circle-wrapper"> <div class="circle-button" style="--i: 0;">1</div> <div class="circle-button" style="--i: 1;">2</div> <div class="circle-button" style="--i: 2;">3</div> <div class="circle-button" style="--i: 3;">4</div> <div class="circle-button" style="--i: 4;">5</div> <div class="circle-button" style="--i: 5;">6</div> <div class="circle-button" style="--i: 6;">7</div> <div class="circle-button" style="--i: 7;">8</div> <div class="circle-button" style="--i: 8;">9</div> <div class="circle-button" style="--i: 9;">10</div> <div class="circle-button" style="--i: 10;">11</div> <div class="circle-button" style="--i: 11;">12</div> </div> CSS .circle-wrapper { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 2px dashed #ccc; border-radius: 50%; } .circle-button { --count: 12; /* 合計の個数 */ --radius: 130px; /* 円の半径 - ボタン半径 */ position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #3498db; border-radius: 50%; transform: rotate(calc(360deg / var(--count) * var(--i))) translate(var(--radius)) rotate(calc(-360deg / var(--count) * var(--i))); transform-origin: center; margin: -20px 0 0 -20px; /* ボタンの中心を基準にする */ text-align: center; line-height: 40px; } HTMLに記載されている「style="--i: 0;"」はカスタムプロパティ（CSS変数）の設定。タグごとに設定し直すことで「transform」の値を変更しボタンの順序に応じて角度をずらして配置しています。「--radius」の値は外側の円に内接するよう外側の円の半径からボタンの半径を差し引いた値を設定。外側の円に外接する場合は外側の円の半径にボタンの半径を加えた値（例は170px）になります。 サンプル .circle-wrapper { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 2px dashed #ccc; border-radius: 50%; } .circle-button { --count: 12; --radius: 130px; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #3498db; border-radius: 50%; transform: rotate(calc(360deg / var(--count) * var(--i))) translate(var(--radius)) rotate(calc(-360deg / var(--count) * var(--i))); transform-origin: center; margin: -20px 0 0 -20px !important; text-align: center; line-height: 40px; } 1 2 3 4 5 6 7 8 9 10 11 12

以前、飲食店サイトを制作した際に、記念写真を掲載する目的でメインビューに使っていたスクリプトを思い出しのたのでメモ。卓上に写真を広げるような感じでレイアウトでき、ドラッグ操作で動かせるので、一覧表示と比べると若干の見づらさはあるものの、目的のものを探し出す体験も含めて、一定の効果はありそうです。 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; }

ページのアクセス数はgoogleアナリティクスでも確認は出来るのですが、ワードプレスの管理画面からも簡易的に人気記事を確認できたり、ページに閲覧数を表示して、より興味を示してもらえるようにと閲覧数（総合値）を取得できるようにした方法をメモ functions.php（PHP） // 閲覧数を取得 function get_post_views($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count == ''){ delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); return "0"; } return $count; } // 閲覧数をカウント function set_post_views($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count == ''){ $count = 0; delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); }else{ $count++; update_post_meta($postID, $count_key, $count); } } // REST APIやボットによるリクエストを無視 function is_real_user(){ return !(is_admin() || wp_doing_ajax() || strpos($_SERVER['HTTP_USER_AGENT'], 'bot') !== false); } // 閲覧数を投稿閲覧時にカウント（singleページ） function count_post_views(){ if(is_single() && is_real_user()){ global $post; set_post_views($post->ID); } } add_action('wp_head', 'count_post_views'); // カラムの追加 function add_views_column($columns) { $columns['post_views'] = '閲覧数'; return $columns; } add_filter('manage_posts_columns', 'add_views_column'); // カラムに表示する内容 function display_views_column($column_name, $post_id) { if($column_name === 'post_views'){ echo get_post_views($post_id); } } add_action('manage_posts_custom_column', 'display_views_column', 10, 2); // 閲覧数カラムをソート対象に追加 function post_views_sortable_column($columns) { $columns['post_views'] = 'post_views'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'post_views_sortable_column'); // ソート実行のためのクエリ調整 function post_views_orderby($query) { if (!is_admin()) return; $orderby = $query->get('orderby'); if ('post_views' == $orderby) { $query->set('meta_key', 'post_views_count'); $query->set('orderby', 'meta_value_num'); } } add_action('pre_get_posts', 'post_views_orderby'); single.php（PHP） <p><?php echo get_post_views(get_the_ID()); ?> 回閲覧されました</p> 閲覧数を登録するメタキーに「post_views_count」を作成。今回は投稿ページを対象とするため「single.php」にアクセスがあった際にカウント処理が動くようになっています。他のページ（カスタム投稿「○○」等）に使用する際はカウント処理「count_post_views」と各管理画面側の項目をそれぞれ変更します。 functions.php（PHP） // 閲覧数を投稿閲覧時にカウント function count_post_views(){ if ( is_singular(['post','○○']) && is_real_front_user() ) { set_post_views( get_queried_object_id() ); } } add_action('wp_head', 'count_post_views'); // カラムの追加 function add_views_column($columns) { $columns['post_views'] = '閲覧数'; return $columns; } add_filter('manage_posts_columns', 'add_views_column'); add_filter('manage_○○_posts_columns', 'add_views_column'); // カラムに表示する内容 function display_views_column($column_name, $post_id) { if($column_name === 'post_views'){ echo get_post_views($post_id); } } add_action('manage_posts_custom_column', 'display_views_column', 10, 2); add_action('manage_○○_posts_custom_column', 'show_views_column', 10, 2); // 閲覧数カラムをソート対象に追加 function post_views_sortable_column($columns) { $columns['post_views'] = 'post_views'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'post_views_sortable_column'); add_filter('manage_edit-○○_sortable_columns', 'post_views_sortable_column'); // ソート実行のためのクエリ調整 function post_views_orderby($query) { if (!is_admin() || !$query->is_main_query()) return; if ($query->get('orderby') === 'post_views') { $query->set('meta_key', 'post_views_count'); $query->set('orderby', 'meta_value_num'); } } add_action('pre_get_posts', 'post_views_orderby');

ワードプレスの投稿画面で表を作成する場合、表（テーブル）用のブロックを使用しているのだけれど、項目の多いものになると打ち込みが大変なうえに、打ち間違いも増えるので、オリジナル投稿ブロックを作成してCSVファイルから自動生成できるようにした方法をメモ original-blocks.js (function (blocks, editor, element, blockEditor){ var RichText = editor.RichText; var { InnerBlocks } = blockEditor; //CSVファイル展開 blocks.registerBlockType('sample/csv-viewer', { title: 'CSVファイル展開', icon: 'media-spreadsheet', category: 'common', edit: function(props){ return element.createElement('div', {className: 'post_csvviewer'}, [ element.createElement('div',　{className: 'post_csvviewer__container' }, [ ] ), element.createElement('div',　{className: 'post_csvviewer__input' }, [ element.createElement( InnerBlocks, { template: [ ['core/file', {className: ''}], ] } ), ] ), ] ) }, save: function(props){ return element.createElement('div', {className: 'post_csvviewer'}, [ element.createElement('div',　{className: 'post_csvviewer__container' }, [ ] ), element.createElement('div',　{className: 'post_csvviewer__input' }, [ element.createElement( InnerBlocks.Content, {} ), ] ), ] ); }, }); }( window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor ) ); original-blocks.css .post_csvviewer { display: flex; padding: 20px; border: 1px solid #ddd; } .post_csvviewer .post_csvviewer__container::before { content: "読み込みファイル"; } .post_csvviewer .post_csvviewer__input .wp-block { margin: 0 0 0 20px; } .post_csvviewer .post_csvviewer__input .wp-block-file__button-richtext-wrapper { display: none; } ファイル（メディア）の登録はコアブロック（デフォルトで用意されているもの）を使用登録画面では表の生成は行わず、使用しているファイルをそのまま表示。編集画面に不要なボタン（ダウンロードボタン）が表示されるのでCSSで調整を行っています。 詳しい投稿ブロックの作成方法は前回のブログで確認いただけます WordPress（ワードプレス）のグーテンベルクにオリジナル投稿ブロックを設置する javascript（jQuery） async function loadCSV(url) { try { const response = await fetch(url); // Shift-JIS → UTF-8 に変換 const arrayBuffer = await response.arrayBuffer(); const decoder = new TextDecoder('shift-jis'); const text = decoder.decode(arrayBuffer); const rows = text.split('').map(row => row.split(',')); return rows; } catch (err) { console.error(err); return []; } } function renderTable(data, $i) { var $table = $('<table>'); data.forEach(row => { // row の中で空文字以外があるか確認 var hasContent = row.some(cell => cell.trim() !== ''); if (!hasContent) { return; // 空行ならスキップ } var $tr = $('<tr>'); row.forEach(cell => { var $td = $('<td>').text(cell); $tr.append($td); }); $table.append($tr); }); $('.post_csvviewer__container').eq($i).append($table); } $(function(){ if($('.post_csvviewer__container').length){ $('.post_csvviewer__input').hide(); var count = $('.post_csvviewer__container').length; var csvUrl = []; var urlPath = [] for(let i = 0; i < count; i++){ //読み込みファイルの取得 csvUrl[i] = $('.post_csvviewer__input').eq(i).find('a').eq(0).attr('href'); //表示ページのプロトコル（http or https）に差し替える var currentOrigin = window.location.protocol + '//' + window.location.host; urlPath[i] = csvUrl[i].replace(/^https?:\/\/[^/]+/, ''); csvUrl[i] = currentOrigin + urlPath[i]; loadCSV(csvUrl[i]).then(data => { renderTable(data, i); }); } } }); 表示側のjavascriptで対象ファイルを読み込み、表示ページのプロトコル（http or https）に差し替えてから「post_csvviewer__container」の箇所に表を自動生成して表示。 ループ処理を使用しているためページ内に複数のCSVファイルが存在していても上書きされることなく表示が可能。ファイル名の表示されている部分はまとめて非表示にしています。 また、CSVファイルの生成は「Shift-JIS」を使用されることが多いため、「Shift-JIS」から「UTF-8」への変換を行っていますが、必要ない場合（もともとUTF-8の場合）は下記を参照 javascript（jQuery） async function loadCSV(url) { try { const response = await fetch(url); const text = await response.text(); // デフォルトでUTF-8として読み込み const rows = text.split('').map(row => row.split(',')); return rows; } catch (err) { console.error(err); return []; } } 「投稿ページ用」とは書きましたが「固定ページ」でも使用が可能。表の差し換えもCSVファイルを入れ替えるだけで可能になるので、定期的に報告書などを掲載している方には便利です。※カラムを結合している複雑な表には対応していません

迷惑メールが増えてきたので、メールフォームに「reCAPTCHA v3」を設置したいとの相談を受けた際にPHPを使用して実装した手順をメモ。 Google「reCAPTCHA v3」に登録 まずはGoogle reCAPTCHAのサイト情報の登録画面にアクセスし、必要情報を入力。送信ボタンを押した後に表示される「サイトキー」と「シークレットキー」を取得します。※登録にはgoogleアカウントが必要です。 入力項目入力内容ラベル管理用の任意の文字列を入力reCAPTCHAタイプ｢スコアベース(v3)｣を選択ドメインreCAPTCHA v3を使うサイトのドメインを入力 Google reCAPTCHAのサイト情報の登録画面 Google reCAPTCHA v3をサイトに設置 メールフォームの設置されてるページに「reCAPTCHA v3」用のjavascriptとinputタグを設置します。 HTML <script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('サイトキー', { action: 'submit' }).then(function (token) { document.getElementById('recaptcha_response').value = token; }); }); </script> <form action="sendmail.php" method="post"> <!-- reCAPTCHA v3 用タグ --> <input type="hidden" name="recaptcha_response" id="recaptcha_response"> <!-- reCAPTCHA v3 用タグ --> <dl> <dt>お名前</dt> <dd><input type="text" name="name"></dd> <dt>メールアドレス</dt> <dd><input type="text" name="email"></dd> <dt>電話番号</dt> <dd><input type="text" name="tel"></dd> <dt>お問い合わせの内容</dt> <dd> <textarea name="content"></textarea></dd> </dl> <div><input type="submit" name="submit" value="入力内容を確認する"></div> </form> PHP（sendmail.php） if(!empty($_POST['submit'])){ $secret_key = 'シークレットキー'; if(isset($_POST['recaptcha_response'])) { $token = $_POST['recaptcha_response']; }else{ $token = ''; } $remote_ip = $_SERVER['REMOTE_ADDR']; // トークンをGoogleに検証依頼 $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$token}&remoteip={$remote_ip}"); $result = json_decode($response, true); // スコアのしきい値（例：0.5以上で人間と判断） if ($result["success"] && $result["score"] >= 0.5) { // 通過処理 ここにメール送信処理などを記述 } else { // botまたは不正なアクセスと判断 停止処理などを記述 } } 「reCAPTCHA v3」を利用する際の注意事項 「reCAPTCHA v3」の利用には費用が必要となります。月間1万アクセスまでであれば無料で利用ができますが、以降は利用した量に応じて費用が請求されます。多くの中小企業サイトであれば無料枠内で問題なく運用は可能かと思いますが、運用してみたら想定外の費用が必要になった、という事のないよう、アクセス解析等を確認しながら、どの程度の費用が必要となるかを事前に確認しておくのが良いです。 ワードプレスを使用している場合はプラグインを使うことでより簡単に実装ができるようです。 Google reCAPTCHA v3認証の導入方法 – 2025年度版

アクセス解析をする際に、非常にお世話になっている「googleアナリティクス」専用タグの設置してあるサイト内ページであれば計測が簡単なのだけれど、外部リンクには自社タグが設置できないため、仮想ページとリダイレクト処理を使用して計測できるようにした方法をメモ。 まず、GA4からのgoogleアナリティクスの仕様変更により、パス表示ではパラメータ形式のURLは個別ページとして表示してくれないため、ディレクトリ構成でのURLを生成する必要があります。参考例はワードプレスを使用し、カスタムフィールド（target_url）に外部リンクのURLが設定しています。 計測したいサイト内ディレクトリ直下に計測用のディレクトリ「links」を作成。その中に「.htaccess」と「index.php」を設置します。 .htaccess RewriteEngine on RewriteRule ^(.*)$ index.php [L] index.php <?php require_once(__DIR__.'/../wp-blog-header.php'); $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $id = $segments[1]; if(!empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 $url = esc_url(get_post_meta($dt['id'], 'target_url', true)); } ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex, nofollow"> <title>外部リンク｜<?php echo get_the_title($dt['id']); ?></title> <!-- Google tag (gtag.js) をここに記載--> <meta http-equiv="refresh" content="0; URL=<?php echo($url); ?>"> </head> <body> </body> </html> phpでのリダイレクト処理では「header関数」を使用することが一般的ですが、その場合は計測タグが読み込めなくなるため、今回はメタリフレッシュを使用しています。自然な遷移になるよう、リダイレクトまでの処理時間を「0秒」に設定していますが、遷移先のページの読み込みが遅い場合は一定時間、空のページが表示されてしまいます。訪問者が戸惑わないよう「リダイレクト中」などの表記を加えても良いかもしれません。 外部リンクを設置するページ（single.php） <a href="/links/<?php echo get_the_ID(); ?>" target="_blank" rel="noreferrer noopener">外部リンク先名</a> 外部リンクを設置するページではリンクを仮想ページ（links）に向けます。以上です。 尚、今回は外部リンク設定が1点でしたが、複数になる場合はリンクの記載に対象となるカスタムフィールドの値を追記し、受け取り側で判別して振り分けることも可能です。 外部リンクを設置するページ（single.php） <a href="/links/target_url/<?php echo get_the_ID(); ?>" target="_blank" rel="noreferrer noopener">外部リンク先名</a> 受け取り側の処理は下記を参考ください index.php <?php require_once(__DIR__.'/../wp-blog-header.php'); $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $category = $segments[1]; $id = $segments[2]; if(!empty($category) && !empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 $url = esc_url(get_post_meta($dt['id'], $category, true)); } ?> 以下省略 PHP「parse_url」とhtaccessを使ってパラメータ形式のURLをディレクトリ形式に変更する

リモート化が加速したあたりから紙（捺印）での契約書にかわりグローバルサイン等、WEBでの契約締結が多くなってきています。弊社でもサービスの導入を考えましたが、制作会社であることから同じようなことができないかと考え、「TCPDF」と「FPDI」を組み合わせてPHPで実装した方法をメモ 実装手順 管理画面で受付番号付きURLを発行 契約ページにアクセスできる人を制限するため、受付番号付きのURLを作成して対象者にメールを送信。弊社では専用の管理画面を用意してメールの送信（契約書の発行）を行っています。 契約ページでサインアップ 契約ページで受付番号のチェックを行い、同時に使用期限（発行から10日程度を想定）に達している番号の削除処理も行う。内容に問題がなければ入力フォームに進む。 契約処理（PDF書き込み処理） PHP if(!empty($_POST['submit'])){ foreach($_POST as $key => $value){ $dt[$key] = mb_convert_kana($value, "KVa","UTF-8"); } //入力エラー処理省略 if(empty($err_msg['error'])){ //ライブラリ読み込み include '../vendor/tcpdf/tcpdf.php'; include '../vendor/fpdi/autoload.php'; $tcpdf = new setasign\Fpdi\Tcpdf\Fpdi('P', 'mm', [210, 297], true, 'UTF-8', false); // ヘッダーの出力無効 $tcpdf->setPrintHeader(false); // フッターの出力無効 $tcpdf->setPrintFooter(false); //契約書ファイル（PDF）の読み込み $pathToPdf = '../pdf/○○.pdf'; //契約書のページ数をカウント $pageCount = $tcpdf->setSourceFile($pathToPdf); for($pageNo = 1; $pageNo <= $pageCount; $pageNo++){ $templateId = $tcpdf->importPage($pageNo); $size = $tcpdf->getTemplateSize($templateId); $tcpdf->AddPage($size['orientation'], [$size['width'], $size['height']]); $tcpdf->useTemplate($templateId); if($pageNo === 2) { $tcpdf->SetFont("kozgopromedium", "", 12); // デフォルトで用意されている日本語フォント //記載位置を調整し、入力内容を追記 $tcpdf->Text(18, 223, '甲）'.htmlspecialchars($dt['address'], ENT_QUOTES, 'UTF-8')); $tcpdf->Text(18, 230, htmlspecialchars($dt['company'], ENT_QUOTES, 'UTF-8')); $tcpdf->Text(18, 237, htmlspecialchars($dt['name'], ENT_QUOTES, 'UTF-8')); } } // 保存する $tcpdf->Output(__DIR__.'/../pdf/sign_'.$dt["id"].'.pdf', 'F'); //保存したPDFファイルをメールに添付して送信処理省略 //使用済み受付番号の削除処理省略 //作成したPDFの削除処理省略 $dt = array(); header("location: ○○○○"); //完了画面へ遷移 exit; } } まずは「TCPDF」と「FPDI」をそれぞれのサイトからダウンロードし、サーバーにアップロード。今回は契約書の2ページ目に追記をしたいので、使用する契約書のページ数を数え、2ページ目に記載処理を実装。記載の完了したPDFは一時的にサーバー内に保存してからメール添付で送信を行っています。 尚、使用するPDFに関して複数ページでバージョンが1.5以上の場合は動かなくなるため、バージョンを1.4以下に下げる必要があります。 TCPDF+FPFI】PHPでpdf帳票を作成する方法【グラフも】 PHPでテンプレートPDFに動的に文字や数値を追記し出力する方法(TCPDF&FPDI) Adobe Reader/Adobe Acrobat FAQ: PDFファイルのバージョンを下げる

.htaccessを使用してベーシック認証を設定する場合、設定したいページ（ディレクトリ）毎にファイルを設置すれば良いのだけれど、パラメータから生成した仮想ディレクトリの場合に設置が難しいことと、多くなりすぎると管理がしずらくなるため一元化した時の実装方法をメモ .htaccess Authtype Basic AuthGroupFile /dev/null <If "%{REQUEST_URI} =~ m#^/○○○○/△△△△/dir1/#"> AuthUserFile /○○○○/.htpasswd_user1 //フルパス AuthName "Please enter your ID and password" Require valid-user </If> <If "%{REQUEST_URI} =~ m#^/○○○○/△△△△/dir2/#"> AuthUserFile /○○○○/.htpasswd_user2 //フルパス AuthName "Please enter your ID and password" Require valid-user </If> パスワード用のファイル（.htpasswd_user1、.htpasswd_user2）をそれぞれ用意し、全てのファイルをホームページディレクトリの直下に設置。「IF」を使用してディレクトリごとに設定を切り分けています。 尚、パスワードを1種類にして流用する場合は「SetEnvIf」を使用して、対象ディレクトリのみに制限をかけることも可能。 .htaccess Satisfy Any AuthType Basic AuthUserFile /○○○○/.htpasswd //フルパス AuthName "Please enter your ID and password" AuthGroupFile /dev/null SetEnvIf Request_URI "^/○○○○/△△△△/dir1/" auth_dir1 SetEnvIf Request_URI "^/○○○○/△△△△/dir2/" auth_dir1 Require valid-user Order Allow,Deny Allow from all Deny from env=auth_dir1 また、ファイル単位で指定したい場合は下記。 .htaccess <Files △△△△.php> AuthUserFile /○○○○/.htpasswd //フルパス AuthGroupFile /dev/null AuthName "Please enter your ID and password" AuthType Basic require valid-user </Files> ワードプレスの管理画面のみにベーシック認証を設定したい場合はファイル名に「wp-login.php」を指定します。

ホワイトペーパーのダウンロードを実装した際に、数が増え、単体で何回もフォームの入力操作を行ってもらうのも不便なので、複数のファイルを同時にダウンロードできるように実装した方法をメモ。 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> <dt>希望ファイル</dt> <dd><?php FormCheckboxary($dlfiles, 'doc', $dt['doc'], 'label'); ?></dd> </dl> <div class="btnSubmit"><input type="submit" name="download" value="選択ファイルを圧縮してダウンロード"></div> </form> download.php(PHP) $dlfiles = array( 1=> array('label'=> '○○○○', 'name'=>'○○○○.pdf'), array('label'=> '△△△△', 'name'=>'△△△△.xlsx'), array('label'=> '□□□□', 'name'=>'□□□□.xlsx') ); if(!empty($_POST['download'])){ // フォームの取得 foreach($_POST as $key => $value){ if(!is_array($_POST[$key])){ $dt[$key] = $value; }else{ foreach($_POST[$key] as $innerkey => $value){ $dt[$key][$innerkey] = $value; } } } // エラー処理省略 // 圧縮対象のフォルダ $sourceDir = '../dlfiles/'; // ファイルが保存されているフォルダ $zipFileName = 'compressed_documents.zip'; // ZIPファイル名 $zipFilePath = __DIR__ .'/'.$zipFileName; // ZIPオブジェクトの作成 $zip = new ZipArchive(); if ($zip->open($zipFilePath, ZipArchive::CREATE | ZipArchive::OVERWRITE) !== true) { die('ZIPファイルを作成できませんでした。'); } // 指定フォルダ内の対象ファイルを取得 foreach($dt['doc'] as $val){ $filePath = $sourceDir.$dlfiles[$val]['name']; if(is_file($filePath)) { $zip->addFile($filePath, basename($filePath)); } } $zip->close(); // ZIPをダウンロードさせる header('Content-Type: application/zip'); header('Content-Disposition: attachment; filename="'.$zipFileName.'"'); header('Content-Length: '.filesize($zipFilePath)); readfile($zipFilePath); // 一時ZIPファイルを削除 unlink($zipFilePath); exit; } function FormCheckboxary($array, $name, $no, $id){ echo('<ul>'); foreach($array as $key => $value){ $str=explode("<>", $no); if(in_array($key, $str)){ echo('<li><input type="checkbox" name="'.$name.'[]" value="'.$key.'" checked="checked" id="checkbox'.$name.$key.'"><label for="checkbox'.$name.$key.'">'.$value[$id].'</label></li>'); }else{ echo('<li><input type="checkbox" name="'.$name.'[]" value="'.$key.'" id="checkbox'.$name.$key.'"><label for="checkbox'.$name.$key.'">'.$value[$id].'</label></li>'); } } echo("</ul>"); return; } 対象ファイルのリストを連想配列で作成し、チェックボックスで選択したもののみをZIP形式でダウンロードできるようにしています。

ホームページへ動画を組み込む際に、動画が設置されているところまでスクロールして、表示された時に動画を再生したいとの要望を受けて実装した方法をメモ。 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）」を付与する必要があります

ホームページを作るのに欠かせないのが「ドメイン」と「サーバー」。中でもドメインはブランドの認知度やSEOを考慮する上で欠かせない重要な要素の一つで「独自ドメイン」「共有ドメイン」「サブドメイン」と呼ばれる種類があり、それぞれ特徴や用途が異なります。本記事では、これらの違いを初心者向けにわかりやすく解説していきます。 ドメインとは？基本の仕組み ドメインとは、インターネット上での「表札（会社名、店名）」のようなものです。例えば、このサイトのURLは「https://web.syu-u.com/blog/○○○○」となっていますが、この「syu-u.com」の部分がドメインにあたります。 本来、ホームページのURLは「123.456.1.1」のようなIPアドレス（座標のようなもの）で管理されていますが、数字の羅列では覚えにくいため、わかりやすい文字列（ドメイン名）に置き換えられています。 独自ドメイン・共有ドメイン・サブドメインの3つの種類のドメイン 独自ドメインとは？ 独自ドメインとは、ユーザー自身が独自に取得（作成）して使用するオリジナルのドメインで、日常的な会話やビジネスの文脈で「ドメイン」と言った場合、そのほとんどは独自ドメインを指します。 メリット ブランディングに有利（企業や個人のブランドを確立しやすい） SEOに有利（長期的に検索エンジンの評価を蓄積できる） メールアドレスとして利用可能（例：info@○○○○.com） デメリット 取得・更新に費用がかかる（年間1000円〜5000円） 設定が必要（レンタルサーバーとの接続など） サブドメインとは？ サブドメインは、独自ドメインを親として、その一部を利用して作られるドメインで、親となるドメインの下にある「枝」のようなものです。例えば、「shop.syu-u.com」や「blog.syu-u.com」のように「○○○○.独自ドメイン」の形になります。最も馴染みのあるサブドメインの表記と言えば「www.yahoo.co.jp」ではないでしょか。また、このサイトはサブドメインで運用されています。 メリット 独自ドメインを取得していれば無料で作成可能 同じ独自ドメイン内で複数作れる 異なるコンテンツを整理できる（企業サイトとブログを分けるなど） デメリット SEOの評価が独立することがある（サブドメインごとに検索エンジンの評価が変わる） 管理が複雑になる可能性（複数サイトの運用が必要） 共有ドメインとは？ 共有ドメインは、複数のユーザーが同じドメインを共用して使用する形式のドメインです。各種ホームページの作成サービスや、使用するサーバーに初めから用意されていることが多く、無料で使用できる代わりに、他のユーザーとドメイン部分が同じになります。 表記自体はサブドメインと変わりませんが、ユーザーにはドメインの所有権がないため、サブドメインではなく、共有ドメインと呼ばれています。（所有者にとってはサブドメインになります）例えば、Wixの無料プランでは「wixsite.com」の部分を共有して「○○○○.wixsite.com」、Studioの無料プランでは、「studio.site」の部分を共有して「○○○○.studio.site」となります。 メリット 無料で利用できる 設定不要 デメリット 独自のブランディングができない（ドメインに利用中のサービス名が入る） サービス終了のリスクがある（サービス終了時にドメインもなくなる） まとめ：ホームページの目的に応じて、適切なドメインを選びましょう！ 種類こんな人におすすめ独自ドメイン本格的にサイト運営したい人サブドメインすでに独自ドメインがあり、用途別にサイトを分けたい人共有ドメイン無料で手軽に試したい人 最終的にどの方法を選ぶかは、目的や運営方法、予算などによって決まります。お試しでホームページを立ち上げたい場合は「共有ドメイン」、長期的に安定した運営やブランドの確立を目指す場合は「独自ドメイン（サブドメイン）」を選ぶとよいでしょう。それぞれにメリットとデメリットがありますので、自身の目的に合った方法を選択することが重要です。

ホームページ制作時にパラメータを使用して詳細ページ等を表示する時がありますが、見た目がわかりにくく、スッキリさせたいとの要望でディレクトリ形式に変更した際の実装方法をメモ。 今回は「example.com/products/index.php?category=shoes&id=123」のページを「example.com/products/shoes/123/」に変更します。 .htaccess RewriteEngine on RewriteRule ^(.*)$ index.php [L] ディレクトリ形式に変更したいページと同階層に上記htaccessを設置。（今回の場合「products」内）アクセスを全て「index.php」に集約することで、存在しないディレクトリにアクセスしても「404」エラーが出ない状態にします。 index.php（PHP） $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $category= $segments[1]; $id = $segments[2]; if(!empty($category)){ $dt['category'] = preg_replace('/[^a-zA-Z0-9-]/', '', $category); //英数字とハイフンのみを有効化 } if(!empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 } //以下パラメータ取得時と同様の処理を記載（省略） 「parse_url」を使用してURLの構成要素を取得したのち、「trim」を使用し文字列の先頭と末尾の「/（スラッシュ）」を取り除く。その後「explode」を使用してディレクトリごとに配列に収納。 配列に挿入した値は、必要な部分のみを変数に入れてパラメータ時と同様の処理を行います。

WordPress（ワードプレス）を導入する際に「投稿機能」を新着情報として利用される企業様が多いのですが、その際によくご依頼をいただくのが「外部リンク機能」の設定。自社で記事を書かない場合は、配布用資料やサイト内ページへの直リンクを好まれるので実装方法をメモ。 functions.php（PHP） //メディア機能との連携処理 function enqueue_mycustomfield_script($hook){ if('post.php' == $hook || 'post-new.php' == $hook){ wp_enqueue_media(); wp_enqueue_script('mypost_custom_script', get_template_directory_uri().'/js/mypost_custom.js', array('jquery'), null, true); } } add_action('admin_enqueue_scripts', 'enqueue_mycustomfield_script'); //カスタムフィールドの設定 function add_mycustomfield_post(){ add_meta_box('mypost_link', '外部リンクURL', 'create_mypost_link', 'post', 'normal'); add_meta_box('mypost_media', 'リンクメディア', 'create_mypost_image', 'post', 'normal'); } add_action('add_meta_boxes', 'add_mycustomfield_post'); function create_mypost_link($post){ $keyname = "mypost_link"; $get_value = get_post_meta($post->ID, $keyname, true ); if(!empty($get_value)){ echo('<input type="text" name="'.$keyname.'" value="'.$get_value.'">'); }else{ echo('<input type="text" name="'.$keyname.'">'); } wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } function create_mypost_image($post){ $keyname = 'mypost_image'; $mypost_image = get_post_meta($post->ID, $keyname, true); if($mypost_image){ echo('<img src="'.esc_url($mypost_image).'" id="thmb_mypost_image">'); }else{ echo('<img src="" style="display: none;" id="thmb_mypost_image">'); } echo('<input type="hidden" name="'.$keyname.'" id="mypost_image" value="'.esc_attr($mypost_image).'" readonly="readonly"> <button type="button" class="button mypost_image_upload_button">メディアを選択</button> <button type="button" class="button mypost_image_delete_button">削除</button>'); wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } //入力内容の保存処理 function save_custom_field_contents( $post_id ) { if(isset($_POST['mypost_image'])){ update_post_meta($post_id, 'mypost_image', esc_url($_POST['mypost_image'])); } $custom_fields = array('mypost_link'); foreach( $custom_fields as $d ) { if(isset($_POST['nonce-'.$d])){ if(wp_verify_nonce($_POST['nonce-'.$d], 'action-'.$d)){ if(current_user_can('edit_post', $post_id)){ if(get_post_meta($post_id, $d) == ""){ add_post_meta($post_id, $d, $_POST[$d], true); } elseif($_POST[$d] != get_post_meta($post_id, $d, true)){ update_post_meta($post_id, $d, $_POST[$d]); }elseif($_POST[$d] == ""){ delete_post_meta($post_id, $d, get_post_meta($post_id, $d, true)); } } } } } return $post_id; } add_action('save_post', 'save_custom_field_contents'); mypost_custom.is（jQuery） jQuery(document).ready(function($){ var frame; $('.mypost_image_upload_button').on('click', function(e){ e.preventDefault(); if(frame){ frame.open(); return; } frame = wp.media({ title: '画像を選択', button: { text: '選択' }, multiple: false }); frame.on('select', function(){ var attachment = frame.state().get('selection').first().toJSON(); $('#mypost_image').val(attachment.url); $('#thmb_mypost_image').attr('src', attachment.url).show(); }); frame.open(); }); $('.mypost_image_delete_button').on('click', function(){ $('#mypost_image').val(''); $('#thmb_mypost_image').attr('src', '').hide(); }); }); 「mypost_custom.js」はテーマディレクトリ直下に「js」ディレクトリを作成し、その中にアップロード index.php（PHP） <ul> <?php //出力処理 if (have_posts()) : while (have_posts()) : the_post(); if(get_post_meta($post->ID, 'mypost_link', true)){ $link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_link', true )).'" target="_blank">'; }else if(get_post_meta($post->ID, 'mypost_image', true)){ $link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_image', true )).'" target="_blank">'; }else{ $link = '<a href="'.get_the_permalink().'">'; } ?> <li> <time class="news__time"><?php the_time('Y.m.j') ?></time> <span><?php echo($link.get_the_title()); ?></a></span> </li> <?php endwhile; else: ?> <?php endif; ?> </ul> カスタムフィールドの実装は「プラグイン（カスタムフィールドアドバンス等）」でも可能です。プラグインでの実装はノーコードでできる良さと、テーマに依存しないことの利便性がありますが、開発元（運営会社）に依存するのと、バージョン未対応で使えなくなることがあるため、今回はテーマ適応時に自動反映できることでの流用のしやすさを考えてカスタマイズにしています。

WordPress（ワードプレス）での投稿時にハイフンを連続して記載する機会があったのですが、セキュリティーの観点から禁止されていたので解決方法をメモ。 「-」（ハイフン）を「&#45;」と置き換えて投稿 投稿画面でハイフンを文字コード「&#45;」に置き換えて記載。記載する際にはエディタモードを「コードエディタ」に切り替えて作業を行います。尚、コードブロック内では問題なく表記されます。

CSSのコーディング時に同じ色、同じフォント、同じ文字サイズなど、何度も同じ値を使用する際に個別にクラスを用意してマークアップを行っていくのでも良いのだけれど、THTMLへの追記なくCSSファイルのみで完結できる「カスタムプロパティ（変数）」が非常に便利だったのでメモ。 CSSのカスタムプロパティ（変数）とは CSSのカスタムプロパティは、CSSの値を事前に変数として登録しておくとこで、各セレクターでの指定時に再利用できる値のこと。具体的にはルートセレクター（:root）に設定することで全てに適応することが可能となります。 CSS :root { --maincolor: #4790bb; --accentcolor: #2a5772; --subcolor: #b0d7d5 --bigsize: 1.8rem; --middlesize: 1.4rem; --enfont: "Jost", serif; } .common__label { color: var(--accentcolor); font-family: var(--enfont); font-size: var(--bigsize); font-weight: 700; } .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize); } 設定時に「--○○○○」の形式で登録、実行時に「var(--○○○○)」の形式で記載。変更する際も「:root」の値を変更するだけで一括で変更できるほか、誤って「:root」の値を削除してしまった時のために「フォールバック値（代替値）」の設定も可能です。 CSS .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize, 20px); } 「var」の第二引数（カンマの後の値）に記載されたものが「フォールバック値」。カスタムプロパティが空の場合に代わりに適応されます。

掲示板など不特定多数の方が利用できるサービスを作成する際に、不適切な書き込みができないよう禁止ワード（ＮＧワード）を設ける場合もあるため、実装方法をメモ。 PHP $ngWords = '/○○○○|○○○○|○○○○|○○○○|○○○○|○○○○|○○○○/u'; function checkNGWord($ngWords, $text) { if (preg_match($ngWords, $text)) { return true; } else { return false; } } // 使用例 $comment = "お前は○○○○"; if(checkNGWord($ngWords, $comment)){ //禁止ワードが含まれている際の処理を記載 } 禁止ワードが含まれる投稿を一切登録できなくする方法もありますが、その場合は対象の文字が含まれている普通の用語（例：禁止ワード「エロ」の場合の、投稿ワード「ピエロ」）も登録できなくなってしまうこともあるため、禁止ワードを過剰に設定しない、管理者に通知が届くにとどめて目視で削除する、または承認制にする等の運用方法を考える必要はありそうです。

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、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); } }

ワードプレスを使用する際に、新たにカスタム投稿を追加をせずに投稿を「新着情報」として使用することが多いですが、そのままの名前で運用すると分かりにくいとお声をいただいた際に対応したメニューの名称（ラベル）の変更方法をメモ。 functions.php（PHP） 「functions.php」に以下の内容を追記します。 function change_my_post_menu_label() { global $menu; global $submenu; $menu[5][0] = '新着情報'; $submenu['edit.php'][5][0] = '新着情報一覧'; $submenu['edit.php'][10][0] = '新着情報追加'; $submenu['edit.php'][15][0] = '新着情報カテゴリー'; //カテゴリを変更する場合は追記 $submenu['edit.php'][16][0] = '新着情報タグ'; //タグを変更する場合は追記 } function change_my_post_object_label() { global $wp_post_types; $labels = &$wp_post_types['post']->labels; $labels->name = '新着情報'; $labels->singular_name = '新着情報'; $labels->add_new = '新規追加'; $labels->add_new_item = '新着情報の新規追加'; $labels->edit_item = '新着情報の編集'; $labels->new_item = '新規新着情報'; $labels->view_item = '新着情報を表示'; $labels->search_items = '新着情報を検索'; $labels->not_found = '新着情報が見つかりませんでした'; $labels->not_found_in_trash = 'ゴミ箱に新着情報は見つかりませんでした'; } //カテゴリを変更する場合はこちらも追記 function change_my_category_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['category']->labels; $labels->name = '新着情報カテゴリー'; $labels->add_new_item = '新着情報カテゴリーを追加'; $labels->edit_item = '新着情報カテゴリーの編集'; $labels->all_items = '新着情報カテゴリー一覧'; $labels->search_items = '新着情報カテゴリーを検索'; $labels->not_found = '新着情報カテゴリーが見つかりませんでした'; } //タグを変更する場合はこちらも追記 function change_my_tags_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['post_tag']->labels; $labels->name = '新着情報タグ'; $labels->add_new_item = '新着情報タグを追加'; $labels->edit_item = '新着情報タグの編集'; $labels->all_items = '新着情報タグ一覧'; $labels->search_items = '新着情報タグを検索'; $labels->not_found = '新着情報タグが見つかりませんでした'; } add_action('init', 'change_my_post_object_label'); add_action('init', 'change_my_category_object_label'); add_action('init', 'change_my_tags_object_label'); add_action('admin_menu', 'change_my_post_menu_label');

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字を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を使用しています。

画像を使用する際に、曲線等の特殊な形で実装したい時があります。マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。 マスク用の画像を用意する マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。 コードの実装 HTML <figure> <img src="画像のurl" class="image__mask"> </figure> CSS .image__mask { -webkit-mask-image: url(マスク用画像のURL); mask-image: url(マスク用画像のURL); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } サンプル .image__mask { -webkit-mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } CSS マスキング mask-image の使い方

アクセス制限を設けるWEBページを作成する際に、ログイン機能を設けることは一般的ですが、更に同時にアクセスできる人数まで制限したい場合の実装方法をセッションIDを利用した方法でメモ。 同時アクセス人数制限の実装方法 実装したい内容を整理するとログイン処理時に、既にログインしていユーザーの人数をカウントして、上限数を超える場合はアクセスできなくする。といった処理になります。 参考例は、100人を最低1時間の利用で制限。データベースに「tbl_login 」というテーブルを作成し、そこに「ユーザーネーム（username）」「セッション情報（loginkey）」「セッションの生成時間（logindate）」のカラムを用意しています。 HTML <form action="login.php" method="post"> <dl> <dt>ユーザーネーム</dt> <dd><input type="text" name="username"></dd> <<dt>パスワード</dt> <dd><input type="password" name="password"></dd> </dl> <ul> <li><input type="submit" name="submit" value="ログイン"></li> </ul> </form> login.php（PHP） session_start(); $max = 100; //1時間よりも前に生成されたセッション情報を削除 $pastdata = date('Y-m-d H:i:s', strtotime('-1 hour')); $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE logindate < :logindate'); $delsql->bindParam(':logindate', $pastdata, PDO::PARAM_STR); $delsql->execute(); //ログイン処理 if(!empty($_POST['submit'])){ foreach($_POST as $key => $value){ $dt[$key] = $value; } //入力エラー処理省略 if(empty($err_msg['error'])){ //パスワード照合処理省略 if($set_password != $dt['password']){ $err_msg['error']['login'] = error01; }else{ //ログインしている人数をカウント $count_list_sql = $db->pdo->query('SELECT * FROM tbl_login); $count = $count_list_sql->rowCount(); if($count <= $max){ session_regenerate_id(true); $user_key = session_id(); $login_date = date('Y-m-d H:i:s'); //cookieに保存 setcookie('user_key', $user_key, time()+60*60*24*7); //セッション情報をデータベースに保存 $addsql = $db->pdo->prepare('INSERT INTO tbl_login(username, loginkey, logindate) VALUES(:username, :loginkey, :logindate)'); $addsql->bindParam(':username', $dt['username'], PDO::PARAM_STR); $addsql->bindParam(':loginkey', $user_key, PDO::PARAM_STR); $addsql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $addsql->execute(); $dt = array(); header("location: ○○○○"); //ログイン完了ページに遷移 exit; } } } } まずは、ログイン処理時に保存しているセッション情報から対象外となるもの（今回は時間制限で1時間以上経過したもの）を削除し、そこから最大件数に満たない場合はセッション情報を追加するようにしています。 入力処理やパスワードの認証処理（暗号化処理を含む）、データベースへの接続に関する記載は、今回は省略しています。 logincheck.php（PHP） session_start(); $value = $_COOKIE['user_key']; //ログインチェック $check_login_sql = $db->pdo->prepare('SELECT id FROM tbl_login WHERE loginkey = :loginkey'); $check_login_sql->bindParam(':loginkey', $value, PDO::PARAM_STR); $check_login_sql->execute(); $check_login_count = $check_login_sql->rowCount(); if(!isset($value) or $check_login_count < 1){ header("location: ○○○○"); //ログインページに遷移 exit(); }else{ //セッション情報（時間）を更新 $login_date = date('Y-m-d H:i:s'); $updatesql = $db->pdo->prepare('UPDATE tbl_login SET logindate= :logindate WHERE loginkey = :loginkey'); $updatesql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $updatesql->bindParam(':loginkey', $value, PDO::PARAM_STR); $updatesql->execute(); } 次に、ページを遷移する度にログインチェックを行うと同時にセッション情報の更新を行います。これを怠ると時間制限により、他の方がログイン処理を行った際に自動的にログアウトされています。 logout.php（PHP） session_start(); $value = $_COOKIE['user_key']; //セッション情報を削除 $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE loginkey　= :loginkey'); $delsql->bindParam(':loginkey', $value , PDO::PARAM_STR) $delsql->execute(); //クッキーの削除 setcookie('user_key', '', time()-60); header("location: ○○○○"); //ログインページに遷移 exit(); 最後にログアウト処理の記載です。そのままにしておいても時間制限でセッション情報は削除されてしまいますが、不正アクセスや個人情報の流出から自身を守るといった安全面や、他の方の利用を制限している可能性があることを考えると自発的に削除できる機能は必要不可欠となります。

管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能ですが、入力した住所から動的に地図を生成する方法を実装していた際のコードをメモ。 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等を使用してデータベースに保存します。

ホームページ制作を行っていると、稀に検索エンジンにヒットさせたくないファイルが出てくることもあります。サーバーから削除するのが確実ではありますが、諸事情もあるため削除せずにクロールをさせない実装方法をメモ。 robots.txt User-agent: * Disallow: *.pdf$ 上記はファイル（拡張子）対象とした方法。ディレクトリを指定する場合は下記 User-agent: * Disallow: /pdf/ 「robots.txt」はホームページのディレクトリ直下に設置します。

ホームページに訪れた方のサイト内の滞留時間を高めるために、関連のある記事へのリンクを設置するのは有効な手法。ワードプレスの投稿機能を使用時に閲覧している記事の下部に前後の記事へのページネーションを実装する方法をメモ。 single.php // 前の記事を取得 $previous_post = get_previous_post(); // 次の記事を取得 $next_post = get_next_post(); if($previous_post){ echo('<a href="'.get_permalink($previous_post).'">前の記事: '.get_the_title($previous_post).'</a>'); } if($next_post){ echo('<a href="'. get_permalink($next_post).'">次の記事: '.get_the_title($next_post).'</a>'); } 同一カテゴリーに限定する場合は「get_previous_post」「get_next_post」の引数に「true」を指定します。 WordPressでの前後の記事へのページネーション実装方法

サイト内で見かけるパスのアニメーション。あまり使う機会がないのだけれど、必要の際に思い出せるようにCSSとSVGを使用して実装方法をメモ。 HTML <div class="path__wrap"> <svg xmlns="http://www.w3.org/2000/svg" width="79.82" height="33.09" viewBox="0 0 79.82 33.09"> <path d="M953.39-90.53c-19.23,6.84-17.13,12.21-12.87,15.74,10.57,8.76-18.56,19.12-21,16-3.21-4.07,35.73-29.34,38.74-21.15.3.83,0,1.88-2.21,5.62-2.46,4.19,8.68,3.25,14.57-5.57,0,0-14,18.49-16.47,19.57-3.08,1.34-3.12-1.88.73-3.47,2.65-1.09,19.22-9.88,26.36-16.1,0,0-8.48,6.77-4.09,7.86s12.82-7.08,13.6-7.37c0,0-5.92,8.05,2.17,3.78a17.61,17.61,0,0,0,5.48-4.61" transform="translate(-918.88 90.92)" /> </svg> </div> CSS .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; /* パスの全長を設定 */ stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 「stroke-dasharray」を使用して線が全て埋まるまでの数値（パスの全長）を指定。次に「stroke-dashoffset」を使用して上記パスの開始位置が0になるまでオフセット（パスの全長と同じ値を指定）。こうすることで初期状態ではパスが全く描かれていない状態になります。この状態から「animation」プロパティを使用してオフセットを0まで変化させることでパスが描かれていくようなアニメーションになります。 プロパティ公開strokeパスの色を指定するstroke-widthパスの太さを指定するfillパスで囲まれた面の色を指定する。パスアニメーションの場合は無色にする場合が多いstroke-dasharrayパスの間隔を指定する（破線にする）stroke-dashoffset破線のオフセット（打消し量）を後ろから指定する サンプル .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 尚、パスのアニメーションの方向が反対になった場合の対処法と、書き出したSVGの形式がポリライン（polyline）だった場合の対処法は下記になります。それぞれイラストレーターでの「パスの方向反転」、「複合パス作成」で解決可能です。 MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法 たったこれだけ！SVGのpolylineをpathに変換する方法

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。 CSS .bg__image { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。指定した要素の背後にあるすべてに適用されます。 関数名効果値blurぼかし0px 〜 10pxbrightness明るさ0%～contrastコントラスト0%～drop-shadow影grayscaleモノクロ0% ～ 100%hue-rotate色相回転0deg ～ 360deginvert階調0% ～ 100%opacity透過0%～sepiaセピア0% ～ 100%saturate彩度0%～ backdrop-filterの使い方解説！CSSでグラスモーフィズムを実装！

ワードプレスのリビジョン機能は過去の投稿を履歴として残しておく機能です。誤ってブラウザを閉じてしまったり、違えた内容で保存してしまった際に、過去の投稿内容に復旧できるため、とても便利なのですが、そのままにしておくと延々と履歴が溜まり、サイト自体の表示が遅くなることもあるため、制御方法をメモ。 wp-config.php（PHP） define('WP_POST_REVISIONS', 5); 末尾の数値を残しておきたい履歴数を設定。サーバーによっては「wp-config.php」ファイルの書き込みが禁止されているものもあるため、その場合は各種FTPソフト等でパーミッションを「600」に変更して書き込みを許可したのち、元に戻します。 尚、設定前に作成されたリビジョンは上記のコードでは消えないため、別途データベースを編集するか、プラグインで対応する必要があります。

WordPress（ワードプレス）の投稿編集からタグを指定する際に、初期状態（デフォルト設定）だとテキスト入力形式となっていて間違いやすいため、カテゴリーと同様にチェックボックスでの選択形式に変更した際の実装方法をメモ。 function.php（PHP） function change_post_tag_to_checkbox(){ $args = get_taxonomy('post_tag'); $args -> hierarchical = true; //Gutenberg対応 $args -> meta_box_cb = 'post_categories_meta_box'; //Classicエディタ対応 register_taxonomy('post_tag', 'post', $args); } add_action('init', 'change_post_tag_to_checkbox', 1); 上記を「function.php」に追記。「グーテンベルク」と「クラシックエディタ」とで記載方法が異なるようなので注意

背景等で斜線や格子柄を実装する際に、以前は画像を作成して処理していたのですが、CSSのみで実装できる方法があったのでメモ。 CSS //斜線 background: repeating-linear-gradient(135deg, #f00, #f00 6px, #fff 6px, #fff 18px); 「repeating-linear-gradient」は反復処理を行ってくれるので、パターンを指定することで斜線や格子が実装できます。 上記の斜線は角度135度、1色目（#f00）を0から6px、2色目（#fff）を6pxから18pxの間隔で繰り返します。角度を0度、90度にすることで罫線（横線・縦線）の実装も可能です。二重指定も可能なので、組み合わせることで格子状にもできます。 CSS //格子状 background: repeating-linear-gradient(90deg, #000 , #000 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #000 , #000 1px, #fff 1px, #fff 32px); 格子状の際には上位レイヤーの2色目に使用する色に透明色（transparent）を指定。こちらを使用しない場合は下位レイヤーのパターンが塗りつぶされます。

WordPress（ワードプレス）でページごとにタイトル（title）やディスクリプション（description）タグを変更する場合、「all in one seo」等のプラグインを使用されることが多いのだけれど、プラグインの多用はサイト遅延の原因にもなるので、phpを使用して直接記載する方法をメモ。 function.php（PHP） //タイトルタグの設定 function custom_document_title($title) { if(is_home() || is_front_page()) { $title = get_bloginfo('name'); }elseif(is_single()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_page()) { $title = get_the_title().'｜'.get_bloginfo('name'); }elseif(is_category()) { $title = single_cat_title('', false).'｜'.get_bloginfo('name'); }elseif(is_tag()) { $title = single_tag_title('', false).'｜'.get_bloginfo('name'); }else if(is_archive()){ $title = '投稿一覧｜'.get_bloginfo('name'); }else{ $title = get_bloginfo('name'); } return $title; } add_filter('pre_get_document_title', 'custom_document_title'); //ディスクリプションタグの設定 function custom_meta_description() { global $post; $description = ''; if(is_home() || is_front_page()) { $description = 'カスタムホームページディスクリプションを記載'; }elseif(is_single() || is_page()) { // 抜粋がある場合 if(has_excerpt($post->ID)) { $description = strip_tags(get_the_excerpt($post->ID)); }else{ $description = 'カスタムホームページディスクリプションを記載'; } }elseif(is_category()) { $description = 'カテゴリー: '.single_cat_title('', false).'に関する記事一覧ページです。'; }elseif(is_tag()) { $description = 'タグ: '.single_tag_title('', false).'に関連する記事一覧ページです。'; }elseif(is_archive()) { $description = '投稿記事一覧ページです。'; }else{ $description = 'カスタムホームページディスクリプションを記載'; } // ディスクリプションタグを出力 echo('<meta name="description" content="'.esc_attr($description) .'">').""; } add_action('wp_head', 'custom_meta_description'); 「header.php」内に既に「title」タグが記載されている場合は、「title」タグの削除が必要です。