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

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 の代替案を紹介します。

jQueryで一定の要素を基準に、上の下層や下の階層の値を取得したり、クラスを変更したりする場合が多くあるので、その際の対象の取得方法をメモ。 取得する対象要素は基準要素と比較して、親子・兄弟要素として設定される。兄弟要素とは基準要素と比較して並列階層の要素、親・先祖要素は上の階層、子・孫（子孫）要素は下の階層の要素になる。 関数説明parents()親要素+先祖要素（上位階層の全親要素）を取得parent()1階層上の親要素を取得prev()前の兄弟要素（兄）を取得prevAll()前の全ての兄弟要素（全兄）を取得next()後の兄弟要素（弟）を取得nextAll()後の全ての兄弟要素（全弟）を取得children()子要素を取得find()子要素+孫要素（子孫要素全て）を取得 HTML <div>先祖要素 <div>親要素 <div>兄要素A</div> <div>兄要素B</div> <div>自分 <div>子要素A</div> <div>子要素B <div>孫要素A</div> <div>孫要素B</div> </div> </div> <div>弟要素A</div> <div>弟要素B</div> </div> </div> jQuery-親要素・子要素・兄弟要素を取得する

「電気会社」のキャンペーンページを作成した際に使用した、電気料金のシミュレーション機能の制作方法をメモ。定額料金プラス従量課金の仕組みに加え、一定額に達すると比率が変わるので、条件分岐は多め。 HTML <section> <form method="post"> <dl> <dt>契約電流</dt> <dd> <select name="base_A"> <option value="660">20A</option> <option value="990">30A</option> <option value="1320">40A</option> <option value="1650">50A</option> <option value="1980">60A</option> </select> </dd> <dt>使用量</dt> <dd><input type="number" name="use_A">kWh</dd> <dt>子育て応援プラン適応</dt> <dd><input type="checkbox" name="child_A" value="1" id="child_A_checkbox"> <label for="child_A_checkbox">適応する</label></dd> </dl> <ul class="btn_submit"> <li><input type="submit" name="submit_simulation_A" value="この内容でシミュレーション"></li> </ul> </form> <h3>シミュレーション結果</h3> <dl class="result"> <dt>基本料金</dt> <dd class="result_base_A">0円</dd> <dt>従量料金</dt> <dd class="result_use_A">0円</dd> <dt>合計金額</dt> <dd class="result_total_A">0円</dd> </dl> </section> jQuery $('input[name='submit_simulation_A']').click(function(){ if($('input[name='child_A']').prop('checked')){ var baseA = Math.round($('select[name='base_A']').val() * 0.9); }else{ var baseA = $('select[name='base_A']').val(); } var useA = $('input[name='use_A']').val(); $('.result_base_A').text(separate(baseA)+'円'); if(useA > 300){ useAprice = ((useA-300) * 28.40)+((300 - 120) * 24.57)+(18.02 * 120); }else if(useA > 120){ useAprice = ((useA-120) * 24.57)+(18.02 * 120); }else{ useAprice = 18.02 * useA; } $('.result_use_A').text(separate(Math.round(useAprice))+'円'); $('.result_total_A').text(separate(Math.round(Number(useAprice))+Number(baseA))+'円'); return false; })

「欅BodyTherapistSchool」の制作に携わった際に使用したスライドショウの実装方法をメモ。拡大しながらのフェードインなので、画像を切り替えるのみよりも躍動感が感じられる。 HTML <figure id="mainimage"> <ul class="swiper-slide"> <li class="active"><img src="画像URL"></li> <li><img src="画像URL"></li> <li><img src="画像URL"></li> </ul> <div class="inner"> <h2>キャッチコピーを記載/h2> </div> </figure> <script> $(function(){ slideSwitch(); setInterval("slideSwitch()", 9500 ); //9500は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ width: 100%; height: 80vh; margin: 0 0 30px; position: relative; overflow: hidden; } #mainimage .swiper-slide{ width: 100%; height: 80vh; position: absolute; overflow: hidden; } #mainimage .swiper-slide li{ background: #fff; width: 100%; height: 80vh; position: absolute; top: 0; left: 0; } #mainimage .inner{ margin: 20vh 0 0 50%; color: #fff; position: relative; z-index: 10; } #mainimage .swiper-slide li img{ width: 100%; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } #mainimage .swiper-slide li.active{ z-index:9; } #mainimage .swiper-slide li.last-active{ z-index:8; } #mainimage .swiper-slide li::before{ background: url(../image/top/mask.png); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); if($(window).width() >= 980){ $active.animate({'width':'110%', 'left':'-5%'}, 7000).delay(1000).queue(function(){ $active.find('img').animate({'opacity':'0'}, 1000, function(){ $active.addClass('last-active'); $next.addClass('active'); $active.find('img').css({'opacity':'1.0'}); $active.removeClass('active last-active').css({'width':'100%', 'left':'0'}).dequeue(); }); }); }else{ $active.animate({'height':'70vh', 'top':'-5vh'}, 7000).delay(1000).queue(function(){ $active.find('img').animate({'opacity':'0'}, 1000, function(){ $active.addClass('last-active'); $next.addClass('active'); $active.find('img').css({'opacity':'1.0'}); $active.removeClass('active last-active').css({'height':'60vh', 'top':'0'}).dequeue(); }); }); } } 東京・練馬の整体・美容矯正・ヘッドマッサージの欅BodyTherapistSchool

観光地になっている飲食サービスのホームページの制作に携わった際に、外国の方にも理解できるようにと多言語での対応を求められた際に使用した、「クッキー（cookie）を使った言語切り替え」の方法をメモ。一般的には言語ごとにディレクトリ作成して、別ページで作られるほうが多いかも。 jquery.cookieの取得と設定 クッキーを扱うのは大変なため今回は「jquery.cookie.js」というライブラリを使用。下記のサイトからダウンロード後にサイトにアップロード、または CDNサイトのURLを利用。 https://github.com/carhartl/jquery-cookie cookieの保存 $.cookie('保存したいcookieの名前', '保存したい値', { expires: 有効期限 , path: '有効範囲' }); 通常、cookieの有効期限はブラウザが閉じられるまでですが、上記の有効期限の項目で設定可能。（小数で指定すると時間単位、秒単位で指定可能。） cookieの取得 $.cookie('取得したいcookieの名前'); cookieの削除 $.removeCookie('削除したいcookieの名前'); //cookieの保存時に有効範囲を設定していた場合。 $.removeCookie('削除したいcookieの名前', { path: '有効範囲' }); 使用事例 HTML <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <select class="chagelang"> <option value="jp">日本語</option> <option value="us">English</option> <option value="cn">中文</option> <option value="kr">한국어</option> </select> <section> <hgroup> <h2> <span class="jp">○○○○とは</span > <span class="us">What is it?</span > <span class="cn">是什么？</span > <span class="kr">놋케돈에 대하여</span > <small>NOKKEDON</small> </h2> </hgroup> <p class="jp">○○○○は市場内のお店に並ぶ青森ならではの新鮮な魚介類をはじめ、<br class="br-sp"> 惣菜、地元の特産物や名物から、自分の好きな具材、好きな量をチョイスし温かなごはんにのっけて食べる丼です。<br class="br-sp"> 青森をてんこ盛りにのっけてお楽しみください。</p> <p class="us">The original Aomori Nokkedon is a rice bowl dish of toppings on hot steamed rice:<br class="br-sp"> choose as many toppings as you like from a range of fresh seafood that only Aomori can provide.<br class="br-sp"> There is also deli food and authentic local food sold at the shops in the market. <br class="br-sp"> You can enjoy the original Aomori Nokkedon, which will enable you to experience the true taste of Aomori. </p> <p class="cn">元祖“青森自选海鲜盖饭”是一种可根据自己喜好、所需分量挑选市场内店铺所销售的青森特色新鲜鱼贝类、熟食、当地特产，并搭配热米饭食用的盖饭。<br class="br-sp"> 敬请品尝满载着青森美味的元祖“青森海鲜盖饭”。</p> <p class="kr">원조 “아오모리 놋케돈”은 시장 내 점포에서 취급하는 이곳 아오모리만의 신선한 해산물과 반찬류, 지역 특산품이나 <br class="br-sp"> 명물 중에서 자신이 좋아하는 재료를 좋아하는 만큼 선택하여 따끈한 밥 위에 올려서 먹는 덮밥입니다. <br class="br-sp"> 아오모리를 수북이 올린 원조 “아오모리 놋케돈”을 드셔 보세요.</p> </section> <script> $(function() { selectLang(); }); </script> jQuery $('select.chagelang').change(function(){ var val = $(this).val(); $.cookie('lang', val, {expires: 7, path: '/'});　//選択したvalue値をクッキーに格納 selectLang(); }); //クッキー読み込み function selectLang(){ var language = $.cookie('lang'); if(language == 'us'){ $('.jp').hide(); $('.us').show(); $('.cn').hide(); $('.kr').hide(); $('header select').val('us'); }else if(language == 'cn'){ $('.jp').hide(); $('.us').hide(); $('.cn').show(); $('.kr').hide(); $('header select').val('cn'); }else if(language == 'kr'){ $('.jp').hide(); $('.us').hide(); $('.kr').show(); $('.cn').hide(); $('header select').val('kr'); }else{ $('.jp').show(); $('.us').hide(); $('.cn').hide(); $('.kr').hide(); } }

「ゴルフ大会」のキャンペーンページを作成した際に使用した、モーション付きのスムーススクロールの方法をメモ。移動前にコンテンツ幅を変化させることで、動きに面白みを追加している。 HTML <header> <nav> <ul> <li><a href="section1">リンクボタン1</a></li> <li><a href="section2">リンクボタン2</a></li> <li><a href="section3">リンクボタン3</a></li> </ul> </nav> </header> <article> <section class="section1"> <h2>見出し1</h2> <p>コンテンツ内容を記載</p> </section> <section class="section2"> <h2>見出し2</h2> <p>コンテンツ内容を記載</p> </section> <section class="section3"> <h2>見出し3</h2> <p>コンテンツ内容を記載</p> </section> </article> CSS body{ overflow-x:hidden; } jQuery $('header nav a').click(function(){ var target = '.'+$(this).attr('href'); var position = $('.'+$(this).attr('href')).offset().top; $('article').animate({'opacity':'0.05', 'padding':'0 5%', 'margin-top':'60px'}, '1000', 'swing', function(){ $('body,html').animate({scrollTop:position}, 'slow', 'swing', function(){ $(target+' h2').nextAll().css({'opacity':'0', 'margin-top':'60px'}); $('article').css({'opacity':'1', 'padding':'0'}).animate({'margin-top':'0'}, '1000', 'swing', function(){ $(target+' h2').nextAll().animate({'opacity':'1', 'margin-top':'0'}, '1000', 'swing'); }); }); }); return false; });

「国際HAN-ZOU整体専門学院」の制作に携わった際に使用したスライドショウの実装方法をメモ。動きをつけながらのフェードインなので、画像を切り替えるのみよりも印象に残りやすいのと、表示幅の限られた中で、広がりを演出したい時に便利。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage02"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage03"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 5000 ); //5000は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ position: relative; overflow: hidden; } #mainimage ul li.active{ z-index: 9; } #mainimage ul li.last-active{ z-index: 8; } #mainimage{ width: 100%; position: relative; } #mainimage ul{ position: absolute; top: 0; left: 0; width: 100%; } #mainimage ul li{ width: 110%; position: absolute; top: 0; right: -10%; z-index: 6; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage .inner{ position: absolute; left: 30px; bottom: 30px; z-index: 10; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.addClass('last-active'); $next.css({'opacity':'0', 'right':'0'}) .addClass('active') .animate({'opacity':'1.0', 'right':'-10%'}, 3000, function(){ //(3000は画像が表示されるまでにかかるミリ秒) $active.removeClass('active last-active'); }); }; 一般社団法人国際整体療法師協会 直轄校 国際HAN-ZOU整体専門学院

「FLORABeautyオンラインカレッジ」の制作に携わった際に使用したスライドショウの実装方法をメモ。スライドショウを単調に見せないだけでなく、文字を表示するタイミングを画像と変えることで、自然と文字へと誘導可能。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage02"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage03"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 7500 ); //7500は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ height: 80vh; margin: 0 0 10px; position: relative; overflow: hidden; } #mainimage:before{ background: #212121; content: ""; width: 100%; height: 80vh; display: block; position: absolute; left: 0; bottom: 60px; } #mainimage ul li{ width: 80%; height: 80vh; right: 0; position: absolute; } #mainimage ul li.active{ z-index:9; } #mainimage ul li.last-active{ z-index:8; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage ul li .inner{ position: absolute; top: 60px; left: -20%; opacity: 0; } #mainimage ul li:first-of-type .inner{ opacity: 1; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.find('.inner').animate({'opacity':'0', 'left':'-30%'}, 750, function(){ $active.addClass('last-active'); $next.css({'opacity':'0'}) .addClass('active') .animate({'opacity':'1.0'}, 3000, function(){ $next.find('.inner').css({'left':'-20%'}).animate({'opacity':'1.0'}, 750, function(){ $active.removeClass('active last-active'); }); }); }); }; 美容・痩身の通信講座のFLORABeautyオンラインカレッジ

飲食店サイトを作成した際にしようした簡単なスライドショーの方法をメモ。画像の切り替わりはフェードイン・フェードアウト方式。速度も自由に変更可能。 HTML <figure class="mainimageTop"> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </figure> <script> $(function() { setInterval('slideSwitch()', 5000 ); //5000は次の画像に切り替わるまでのミリ秒 }); </script> CSS .mainimageTop{ width: 100%; position: fixed; z-index: -1; top: 0; left: 0; overflow: hidden; } .mainimageTop::after{ content: ''; width: 60%; height: 100%; display: block; background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),color-stop(0.78, rgba(0,0,0,1.0)),to(#000)); background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.95) 78%,#000); position: absolute; top: 0; right: 0; z-index: 10; } .mainimageTop ul li{ width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; margin: auto; z-index: 5; } .mainimageTop ul li.active{ z-index: 7; } .mainimageTop ul li.next-active{ z-index: 6; } .mainimageTop ul li:nth-of-type(1){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(2){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(3){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(4){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(5){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } jQuery function slideSwitch(){ var $active = $('.mainimageTop ul li.active'); if($active.length == 0 ) $active = $('.mainimageTop ul > li:last'); var $next = $active.next().length ? $active.next() : $('.mainimageTop ul > li:first'); $active.addClass('next-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0},3000,function(){ //3000は画像が表示されるまでにかかるミリ秒 $active.removeClass('active next-active'); }); };

TwitterやFacebookのように一番下までスクロールしたら自動的に追加データを読み込んで表示する機能を実装した時のソースをメモ。サンプルはデータベース（Mysql）から10件づつデータを抽出。 HTML <ul class="items"> <?php require_once ('ini.php'); //DB接続ファイル $sql = $db->query('SELECT * FROM tbl_sample ORDER BY id DESC LIMIT 10'); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } ?> </ul> jQuery $(window).on('scroll', function(){ var doch = $(document).innerHeight(); //ページ全体の高さ var winh = $(window).innerHeight(); //ウィンドウの高さ var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置 if(bottom * 0.9 < $(window).scrollTop()){ var obj = $(this); if (!obj.data('loading')) { obj.data('loading', true); $.get('loadmore.php', {lastid:$('ul.items li:last-of-type').attr('id')}, function(result){ $('ul.items').append(result); obj.data('loading', false); }); } } }); スクロール時のイベントの重複防止に、最初にイベントが発生した時点でのみobj.dataの「loading」をtrueに設定。 TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」 PHP （loadmore.php）追加読み込み用ファイル //追加読み込みの処理 require_once ('ini.php'); //DB接続ファイル $lastid = $_GET['lastid']; if(!empty($lastid)){ $sql = $db->prepare('SELECT * FROM tbl_sample WHERE id < :id ORDER BY id DESC LIMIT 10'); $sql->bindValue(':id', $lastid, PDO::PARAM_INT); $sql->execute(); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } }

キャッチコピーなどを効果的に見せたいときに使用したタイピング風に一文字づつ文字を表示される方法をメモ。複数行にも対応しているので文字の大きさも自由に変更できる。 HTML <p><small class="typ_first">jQueryでテキストを</small><span class="typ_second">タイピング風に一文字ずつ表示</span></p> CSS p { font-size: 6rem; } p small { font-size: 2.8rem; display: block; margin: 0 0 10px; } .typ_first, .typ_second { opacity: 0; } .typ_first span, .typ_second span { opacity: 0; } jQuery var speed = 75; //表示速度 //文字変換 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += '<span>'+this+'</span>' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += '<span>'+this+'</span>' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); //タイピング処理 function typing(name){ for (var i = 0; i <= $(name).children().size(); i++) { $(name).children('span:eq('+i+')').delay(speed*i).animate({'opacity':1}, speed); }; } //非同期処理部分 function func(){ var d = new $.Deferred; typing('.typ_first'); setTimeout(function(){ d.resolve(); }, speed*$('.typ_first').children().size()); return d.promise(); } var promise = func(); promise.done(function(){ typing('.typ_second'); }); 「split」関数を使って対象の文字を、一文字ずつ分解してから「span」タグで囲み、元の位置に再配置。今回は上段を表示してから下段を表示したいので「非同期処理」を利用。 サンプル 「実行」をクリックでタイピング風に表示。 function typingword(){ var speed = 75; //表示速度 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += ''+this+'' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += ''+this+'' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); function typing(name){ for (var i = 0; i

採用サイトを作成した際に、ページ遷移にアクセントをつけたくて実装した開閉アニメーションの方法をメモ。実例はランディングページ（LP）なので、コンテンツをページで分けているサイトでは調整が必要。 HTML <nav class="gnav"> <ul> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> </ul> </nav> <article id="slider"> <div id="filter_left"></div> <div id="filter_right"></div> <section> コンテンツを記載 </section> </article> CSS #filter_left{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } #filter_right{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } jQuery var winH = $(window).height(); var modalW = ($(window).width())/2; $('.gnav a').click(function(){ $('#filter_left').css({'left':'-'+modalW+'px', 'height':winH+'px'}).animate({'left':'0'}, {duration:'slow', easing:'swing', complete:function(){ // ここにページ内遷移のスクリプトを記載（省略） setTimeout(function(){ $('#filter_left').animate({left:'-'+modalW+'px'},{duration:'slow', easing:'swing', complete:function(){ $('#filter_left').css({'height':'0'}); }}); }, 250); }}); $('#filter_right').css({'right':'-'+modalW+'px', 'height':winH+'px'}).animate({'right:0'}, {duration:'slow', easing:'swing', complete:function(){ setTimeout(function(){ $('#filter_right').animate({right:'-'+modalW+'px'}, {duration:'slow', easing:'swing', complete:function(){ $('#filter_right').css({'height':0}); }}); }, 250); }}); return false; }); 求人・採用情報｜ケッズトレーナー

サイト内で画像などを複数並べてアニメーションさせる場合に、一度にアニメーションを適応させるのではなく、画像を1枚ずつ時間をずらして（遅延して）アニメーションさせる方法をメモ。 HTML <ul class="list"> <li><img src="./img01.jpg"></li> <li><img src="./img02.jpg"></li> <li><img src="./img03.jpg"></li> </ul> jQuery $('.list li').each(function(i){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); }); 「delay」の数字の部分が遅延時間（1 / 1000秒）「addClass」を使ったアニメーションを行う場合は遅延処理が行われず、一度に適応されてしまうので、下記のとおり「queue」を使用する。 $('.list li').each(function(i){ 　　$(this).delay(i * 100).queue(function(next) { 　　　　$(this).addClass('active'); 　　　　next(); 　　}); }); また、順序を逆順に行う場合は下記。 $($('.list li').get().reverse()).each(function(){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); });

ランディングページ（LP）では、どこのサイトでも使用されているページ内リンクでのスムーススクロール。ページ内はもちろん、別ページからの遷移時にも使用することも多いので、実装方法をメモ。 HTML <nav> <ul> <li><a href="#target01">○○○○/a></li> <li><a href="#target02">○○○○</a></li> <li><a href="#target03">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </nav> … <main> <article> <section id="target01">遷移先のコンテンツ部分01</section> <section id="target02">遷移先のコンテンツ部分02</section> <section id="target03">遷移先のコンテンツ部分03</section> </article> </main> … 遷移先のリンクをハッシュタグ（#）で、コンテンツ部分を「id」で設定。 jQuery //ページ内での移動 $('header nav ul li a').click(function(){ var $href = $(this).attr('href'); if($href.indexOf('#') >= 0) { var hashary = $href.split('#'); var position = $('#'+hashary[hashary.length -1]).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) //外部ページからの移動 $(window).load(function(){ var $hash = location.hash; if($hash != ''){ var position = $($hash).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) 「attr('href')」または「location.hash」で遷移後のURLの#以下の値を取得。値がある場合に限り「scrollTop:position」で取得値が設定されているタグの冒頭に移動。「$(window).load(function(){」とページ読み込み後に処理を行うのは、画像の高さを取得してからでないと、移動位置がずれるため。 ヘッダー部分を固定している場合は「var position」の値から固定部分の値をマイナスする。 // ○○pxと値が分る場合 var position = $($hash).offset().top - ○○px; // 値が変わる（不定）の場合○○○○と指定タグで取得する var position = $($hash).offset().top - $('○○○○').height(); SOCKSTAR(ソックスター)

メニューの項目数が増えてくると一度で全てを表示するのは難しい。だからといってカテゴリーに分けて何度も読み込みをさせるのもユーザーに対しては親切でない。そんな時に便利な「jquery」で実装可能な開閉式のメニュー(プルダウンメニュー)のメモ。 HTML <nav> <ul> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> </ul> </li> </ul> </nav> jQuery $(function(){ $('nav li a').next('ul').hide(); $('nav li a').click(function(){ var checkElement = $(this).next('ul'); if(checkElement.length && !checkElement.is(':visible')){ checkElement.slideDown('srow'); return false; }else if(checkElement.length && checkElement.is(':visible')){ checkElement.slideUp('srow'); return false; } }); }); 表示するターゲットを「$(this).next('ul').length」で判定し、あれば起動、なければそのままクリック。階層が深くなってもHTMLの追加のみで対応可能。初期状態の表示をCSS（display: none;）にする場合は、「$('nav li a').next('ul').hide();」は不要。 オンマウスの場合は下記 $(function(){ $('nav li').children('ul').hide(); $('nav li').hover(function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideDown('srow'); } },function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideUp('srow'); } }); });

病院のホームページ制作に携わった際に使用したループスライダーの実装方法をメモ。個々の画像をじっくりと見てもらうというようりは、色々なサービスを展開してる場合に、まずは一通り見せて、興味を引きたい時などに便利です。 「ループスライダー」の実装方法 ループスライダーの実装には「jQuery」を利用。まずは外部ファイルを使用するサイトの「head」タグ内にコードを記載。その後、以下のソースコードで実装。 jQueryの設置方法は下記サイトで確認。 jquery HTML .loopSlider　スライダーの表示枠（動かない枠部分）.loopslider_wrap　スライダーの可動枠 <div class="loopSlider"> <div class="loopslider_wrap"> <ul> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> </ul> </div> </div> <script> $(function(){ loopTopSlider(); loopsliderPosition(); }); </script> CSS 基本的に「 表示枠 < 可動枠 」なので「overflow: hidden;」で見えては困る部分を見えなくする。また、「position」プロパティを使うため、枠の高さも設定。 .loopSlider{ height: 230px; overflow: hidden; position: relative; } .loopSlider .loopslider_wrap{ height: 230px; display: -webkit-flex; display: flex; position: absolute; top: 0; left: 0; } .loopSlider .loopslider_wrap ul{ display: -webkit-flex; display: flex; } .loopSlider .loopslider_wrap ul li{ width: 324px; } jQuery スライダー画像の全体幅を「sliderSize」として取得してから、取得値を2倍したものをスライダーの可動枠の幅に設定。「clone」関数でスライダー画像を複製して、スライダー画像の末尾に追加。60000秒かけて稼働枠を左端から、左方向に移動させていき、複製部分の左端が左端に到達した時点(60000秒 ) で、左端 ( 0 )の位置に戻す。あとはこの動作を「setTimeout」関数で60000秒ごとに繰り返す。見た目はループしているように見えますが、実際は複製した画像が左端で重なるようにして、入れ替えています。 function loopTopSlider(){ var sliderSize = $('.loopSlider .loopslider_wrap ul').width(); $('.loopSlider .loopslider_wrap').css({'width':sliderSize*2+'px'}); $('.loopSlider .loopslider_wrap').find('ul').clone().appendTo('.loopSlider .loopslider_wrap'); }; function loopsliderPosition(){ var sliderSize = $('.loopSlider .loopslider_wrap ul:first-of-type').width(); $('.loopslider_wrap').css({left:'0'}); $('.loopslider_wrap').stop().animate({left:'-'+(sliderSize)+'px'},60000,'linear'); setTimeout(function(){ loopsliderPosition(); },60000); };

構造化データとは、検索エンジンがサイトの内容をきちんと認識できるよう、検索エンジンに対してコンテンツを説明するためにサイトのページに記載されるコードのこと。Googleでもこの仕組みを利用して、検索結果を表示しているので、推奨されている構造化データ「JSON-LD」形式のマークアップの方法をメモ。 構造化データをマークアップする方法 構造化データのマークアップは、構造化データを記載したいHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <script type='application/ld+json'> { "@context" : "http://schema.org", "@type" : "WebPage", "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" } </script> 上記は、当サイトのトップページで実際にマークアップしてるJSON-LDの構造化データ。WEBページとして認識できるよう@typeに「WebPage」のプロパティ（属性）とバリュー（属性値）を使用して構造化データをマークアップ。 構造化データのマークアップの4つの手順 JSON-LDの構造化データは、次の4つのマークアップが基本。 JSON-LDの構造化データマークアップを宣言 JSON-LDの構造化データをマークアップするために、script要素でapplication/ld+jsonを指定。こうすることで、括弧内に有効なJSON-LDの構造化データを記述することができる。 <script type="application/ld+json"> { } </script> @context属性を宣言 @contextのプロパティで、「http://schema.org」を指定して、schema.orgを使った構造化データを記述することを宣言。文字コードの設定のようなもの。 "@context": "http://schema.org", @type属性を指定 @typeのプロパティで、ページの種類を指定。ここの部分を実際に記載するページの種類に合わせて書き換える。 "@type": "WebPage", ページの種類は下記サイトで確認。 プロパティとバリューを記載 @typeで指定した属性値に関連するプロパティ（nameやurlなど）を、必要に合わせて@type以降にマークアップ。プロパティは複数設定可能だが、最後の行はカンマ「,」をつけない。 "name" : "ホームページ制作の株式会社衆｜東京都小金井市", "description" : "東京都小金井市にてホームページの作成・システム開発などWEBで実現可能な制作業務を行っています。多彩なパートナーシップによりホームページ以外の制作（パンフレットや動画、イラスト等）もご相談可能。詳しくは問い合わせフォームもしくはお電話にてお問合せください。", "url" : "https://web.syu-u.com/" プロパティの種類は下記サイトで確認。 構造化データの有効性を確認する方法 構造化データをマークアップしても、正しく記載されていなければ検索エンジンに認識されない。 本番に反映（アップロード）する前に、マークアップした構造化データが正しいかどうかを「構造化データテストツール」で検証。 構造化データテストツール

求人サイトやECサイトなどカートを何度も使う必要のあるサイトの場合、カートに入れるや検索フォームなど、よく使う項目は常に表示されているほうが便利。サイドメニューを固定する方法もあるけど、スクロールにあわせてサイドメニューがついてくる方法があったのでメモ。 使用するjqueryライブラリー jquery-1.2.6.min.js jquery-ui.min.js jquery.scrollfollow.js HTML（head部分） <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> HTML（body部分） <div id="menu">コンテンツ</div> javascript $(function (){ $('#menu').scrollFollow(); });

多くの画像を効果的に見せることができるスライドショー。ギャラリーサイトでよく見かけますし自分自身も利用しているのですが、基本はサムネイルは横並び。そんな中、サムネイルを縦に表示できるものを見つけたのでメモ。 使用するスクリプト slideshow.js mootools.js HTML <!-- スライドショー表示部分 --> <div id="show" class="slideshow"> <!-- ローディング画像 --> <img src="lightpop-ico-loading.gif" width="32" height="30" style="position:relative; top:150px; left:190px"> </div> CSS slideshow { display: block; position: relative; z-index: 0; } javascript <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = ['sample02_1.jpg', 'sample02_10.jpg', 'sample02_11.jpg', 'sample02_12.jpg', 'sample02_13.jpg', 'sample02_14.jpg', 'sample02_2.jpg', 'sample02_3.jpg', 'sample02_4.jpg', 'sample02_5.jpg', 'sample02_6.jpg', 'sample02_7.jpg', 'sample02_8.jpg', 'sample02_9.jpg']; //スライドショーで表示する画像ファイル名 var myShow = new Slideshow('show', data, { controller: true, //オンマウスでコントロールパネル表示 height: 300, //スライドショー高さ hu: 'http://sample.com/', //画像(サムネイルも同じ)のある場所のパスを入れる thumbnails: true, //サムネイル表示 width: 400 //スライドショー幅 }); }); //]]> </script>

セレクトボックスを使用して検索をする場合通常は「PHP」で処理するのですが選択項目が単数の場合は選択しただけで移動する方法が便利な場合も「javascript」による方法を見つけたのでメモ HTML <select onChange="moveUrl(this)"> <option value="">選択してください</option> <option value="URL1">リンクテキスト1</option> <option value="URL2">リンクテキスト2</option> <option value="URL3">リンクテキスト3</option> <option value="URL4">リンクテキスト4</option> </select> javascript function moveUrl(selection){ var url = selection[selection.selectedIndex].value; if(url != ""){ location.href=url; } }

モーダルウィンドウの使用により、最近はあまりなくなりましたが一部のホームページ制作で希望される「ポップアップ」javascriptによる制作方法をメモ HTML <a href="#" onclick="window.open('1.html', 'win1', 'width=30, height=40, scrollbars=yes');">ボタンとかテキスト</a> オプションソースコードメニューバー表示menubar=yes/noツールバーの表示toolbar=yes/noURL入力欄の表示locaction=yes/noスクロールバーの表示(右側)scrollbars=yes/auto/noステータスバーの表示(最下段の表示)status=yes/no