やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

microCMSとJavascriptを利用して簡単なサイトを作る

HTML,CSS,javascript メモ

WordPressを入れるほどじゃないけど、HTML手打ちもバカバカしいので
ヘッドレスCMSを利用して、更新を簡単にしたいな〜と思ったのだった。

microcms.io

APIスキーマ

今回作るのは、タイトルすら不要なサイト。テキストエリアだけ。

  • フィールドID：textField
  • 表示名：内容
  • 種類：テキストエリア

ちなみに「テキストエリア」にはHTMLタグを含めることができる。

JSONデータをブラウザで表示させる

スクリプト

本当に基礎がわかっておらず、めちゃめちゃ苦労したのだった

window.addEventListener('DOMContentLoaded', function(){
getJsonData();
});

function getJsonData(){
       fetch(
           "https://〜〜〜.microcms.io/api/v1/content?limit=50",
           {
             headers: {
               "X-API-KEY": "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXX"
             }
           })
         .then(function(data){
          return data.json();
         })
         .then(function(myjson){
         for (const i in myjson.contents) {
            const h = '<div class="block">' + myjson.contents[i].textField + "</div>";
            var element = document.getElementById("wrap");
            element.insertAdjacentHTML("beforeend", h);
           }
        });
}

微妙にjQueryを使っており、正直いらないが、面倒なのでこのままです。ひどい
jQueryのappend()だった部分をinsertAdjacentHTML()に変えたので、無事jQueryいらなくなった

cpoint-lab.co.jp

何がそんなに大変だったのか

JSONデータを見てみると入れ子構造になっており、
その中からピンポイントでtextFieldの値を取り出すのに苦労した。
配列とかJSの基本をわかってないからこうなるんだけど、
わからないものはわからない。今も正直よくわかってない…
やっぱり苦手だな

参考
techacademy.jp

メモ：jQueryあれこれ

HTML,CSS,javascript メモ

html、cssは省略します

WordPressの時

jQuery(function($){
 //ここに色々書く。$(function(){ はダメ
});

ページを読み込んだら、ってわざわざ言いたい時

window.addEventListener('DOMContentLoaded', function(){
// ここに書く。$(function(){　}); だとエラーが出た時、これで直ったことがある
});

スムーススクロール（スムーズスクロール）？

$('a[href^="#"]').click(function(){
    var adjust = -60;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
});

スクロールすると出現する「トップに戻るボタン」

var topBtn = $('#go2top');    
    topBtn.hide();
$(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
});

続きを読むボタン

親要素の高さで指定するver.

.hiddenwrap を position:relative overflow:hiddenにする
.onhiddenがついてる時、高さをpx指定する

$('.showmore').click(function(){
		$(this).parent('.hiddenwrap').toggleClass('onhidden');
		$(this).toggleClass('btnclose');
});
前の要素全部隠すver.
$('.showmore2').click(function(){
	$(this).prev().slideToggle();
	$(this).toggleClass('btnclose');
});

ハンバーガーメニュー

$("#nav-open").on("click", function() {
        $(this).toggleClass("active");
        $(this).next().slideToggle();
    });
$('#nav-content li a').click(function() {
        $("#nav-content").hide();
	$('#nav-open').removeClass("active");
});
$('#nav-drawer').click(function() {
	event.stopPropagation();
});

最後のは親要素 #nav-drawer にかけるおまじない。
イベントを途中で止める効果がある

クリックしたあと、一定の時間をあけて複数の処理を順に行う

$('.class').click(function(){
		$(this)処理A;
		 setTimeout(() => {
		 	$(this).処理B;
		},1000);
});

下の記事でダサいとか問題ありと言われているが、取り急ぎ…
liginc.co.jp

jQueryで、loading

HTML,CSS,javascript

JavaScriptがそもそも苦手すぎて、
どうもVueとかReactをやる気になれない。

結局たよりになるのはjQuery、、、

気をつけたところ

Scriptは、対象となるDOM要素（#loader-bgなど）の後ろに書かないと、
エラーが出ることがあるっぽい。

追記2 一瞬ちらっと見えちゃう問題

JS内で指定するのではなく、
noscriptの中にstyleタグを記述・loaderをdisplay:none;書いておくことで解決
（これをやらないとJSがない環境で永遠にloadingしてしまう）
参考
cly7796.net

追記 エラー対応

Safariで再読み込みした際に、ローディングのまま動かなくなるエラーが発生。

なので、Scriptの $(function() { 部分を以下のJSに書き換えました。

window.addEventListener('DOMContentLoaded', function(){

参考
pisuke-code.com

コード

<head>
〜〜〜
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#loader-bg {
  background: #dbdbdb;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5000;
}
#loader {
  height: 61px;
  left: 50%;
  margin-left: -18px;
  margin-top: -30px;
  position: fixed;
  top: 50%;
  width: 36px;
}
#loader p { text-align: center; }
#loader p img { display: inline-block; }
</style>
<noscript>
	<style>#loader-bg,#loader {display: none;}</style>
</noscript>
</head>
<body>
<div id="loader-bg">
    <div id="loader">
        <p>
            <img src="/img/loading.gif">
        </p>
    </div>
</div>
<script>
window.addEventListener('DOMContentLoaded', function(){
var bg = $('#loader-bg'),
    loader = $('#loader');

$(window).on('load', stopload);
setTimeout('stopload()',10000);
function stopload(){
    bg.delay(900).fadeOut(800);
    loader.delay(900).fadeOut(300);
    $(window).scrollTop(0);
}
});	
</script>
<!-- /loading -->
<div id="wrap">
〜〜〜