【プログラミング】ポートフォリオの苦戦したところまとめ

2020年12月4日2024年2月24日

【プログラミング】ポートフォリオの苦戦したところまとめ

こんにちは

今回は2週間ほどかけてポートフォリオが完成したので
ポートフォリオで苦戦した箇所をまとめていきたいと思います。

前回同様、自分のメモ程度の感じなので見ずらいと思います。
ちなみに作成したポートフォリオは『naratch-portfolio』です。

苦戦した箇所はHTMLとCSSは省こうと思います。
細かいことを書いているとめちゃくちゃ長くなってしまうと思うので…
苦戦したところを見ていきましょう。

苦戦した箇所

・jQueryの実装
・モーダルウィンドウの実装
・wordpress用の関数など

・jQueryの実装

jQueryの実装のどこが難しいの？
そんなのHTMLにコード書いて終わりじゃんと思うかもしれませんが
そこには一切苦戦していません。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

主に、○○.jsに記入する内容ですね。

今回jQueryでやりたかったことは

・フェードイン（スクロールでふわっと表示の実装）
・画像のアニメーション処理
・チェックボックスの処理

の3つです
コピペで全部行けるのかなと思っていたら
コピペで行けるものもありましたが
出来ないものもあり、結局一から作った物とかもあります。

フェードインの実装

フェードインの動作を実装させるため【スクロールするとフェードインで表示されるアニメーションの作り方】のサイトを参考にしました。

タイトルが横から出てくるようにしてます。

実は左右から出てくるようにしたかったのですが
上手くいかなかったのでスクロールでふわっと表示の実装になりました。

$(window).on('load scroll', function (){

  var box = $('.fadeIn');
  var animated = 'animated';

  box.each(function(){

    var boxOffset = $(this).offset().top;
    var scrollPos = $(window).scrollTop();
    var wh = $(window).height();

    //画面内のどの位置で処理を実行するかで「100」の値を変更
    if(scrollPos > boxOffset - wh + 0){
      $(this).addClass(animated);
    } else {
     $(this).removeClass(animated); //そうでない場合はクラスを削除
   }
  });

});

jQueryのコード自体はコピペでできたと思います。
多分、しっかり理解できていれば左右から出てくるようにできたのだと思います。

なぜ、左右から出てくるようにできなかったか
偶数の要素だけ、row-reverse;を入れて入れ替えてるのに原因があると思っています。
そのせいで、

.fadeIn.animated {
  opacity:1;
  transform:translateX(0%);
}

追加するCSSの実行されずにいたのではないかと思っています。
工夫すればどうにかなったかもしれませんが、諦めました。

画像のアニメーション処理

画像のアニメーション処理をさせるために
【jQueryで複数画像をフェード切り替えする方法】のノートを参考にしました。

トップの画像は入れ替わるようになっています。

(function(){
// 設定
var interval =2000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 1000;// フェード処理の早さ（ミリ秒）
$(".fade-img-box img").hide();
$(".fade-img-box img:first").addClass("active").show();

var changeImage = function(){
   var $active = $(".fade-img-box img.active");
   var $next = $active.next("img").length?$active.next("img"):$(".fade-img-box img:first");

   $active.fadeOut(fade_speed).removeClass("active");
   $next.fadeIn(fade_speed).addClass("active");

       }

setInterval(changeImage,interval);

}());

こちらもコピペで行けましたが、HTLMとCSSを変更する必要があったため
『fade-img-box』に直しました。
そこまでサイトが崩れることもなかったので修正は簡単でした。

チェックボックスの処理

一番苦戦したチェックボックスの処理です。
色んなサイトを見たのですがコピペで行けるような場所がありませんでした。
一応最終的にたどり着いた【クリックでclassを追加・削除する】や【jQueryでチェックボックスを操作するさまざまな方法】などを

やりたかったこととしては、ハンバーガーメニューで内部リンクを押したときに、閉じてほしいだけです。

$(function(){
$('.h-nav-li-a').click(function() {
    $('input:checkbox[name="h-nav-check"]').prop('checked',false);
  });
});

コードもたったこれだけですが、めちゃくちゃ調べまくっていました。

h-nav-li-aをクリックしたときに、h-nav-checkのcheckboxのチェックを外すという処理になっています。

そもそも、ハンバーガーメニューをjQueryを使っていればこんなことにならなかったと
思います。
そのおかげで、クリック動作時にどうするかの処理についてものすごく理解できたきがします。

モーダルウィンドウの実装

モーダルウィンドウの実装も上で紹介したクリックの処理でできるのでは？
と思い必死こいてやっていました。

クリックされたときに、addClass(class)でクラスを追加してあげて、不要な場所を非表示にして…できない
なんてことをひたすらやっていました。

これじゃあ一生終わらないなと思い調べているときに jQuery プラグイン
『LightBox』を見つけました。

こちらのサイト【LightBoxで簡単にギャラリーの実装ができたので導入と使い方メモ】を参考にしています。

使い方もめっちゃ簡単で、速攻でモーダルウィンドウが実装できました。

wordpress用の関数など

最後にサーバーにアップするのにXサーバーを使って
ドメインを取得してHTMLなどをアップして終わりですぐに終わるだろうと思っていたら
全くそうではありませんでした。

ドメインの取得自体はこのブログを作るときに、サブドメインとして取得の方法は
知っていたので苦戦しませんでしたが、取得した後にホームページをアップするのが
めちゃくちゃ大変でした。
【「HTMLサイトをWordPressに移行する」とは？最低限の知識だけシンプルに解説します】のサイトを参考にしました。

しかし、このサイトでは
HTMLとCSS、画像をwordpressに載せる方法しかなく
JavaScriptなどがありませんでした。

JavaScriptを使えるようにするために色々と調べていたら
function.phpにadd_script()で取得しないといけないことが書いており
もうよくわかりませんでした。

PHPについて勉強しないとダメかななんと思ったけども、とりあえず
実行した、ダメだったら他のを試すことを繰り返していました。

最終的に【functions.phpでJSやCSSを一元管理する】のサイトを参考にしました。
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );で行けるみたいなので

function add_scripts() {
	wp_enqueue_script( 'smart-script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '20160608', true );
 
}
add_action('wp_print_scripts', 'add_scripts');

‘/js/main.js’,だけ書き換えて試しました。
function.phpをアップしました。