はてなブログの「アーカイブページをアーカイブするカスタマイズ」のjQueryを1つづつ解析してみた:その2

2回目です!
JavaScriptやjQueryの知識が無いので、今回も翻訳レベルで単語や文法を調べていきます。(間違っていたら泣く・・・)
更新しても、ちょこちょこ修正したりしています。
何回目で終わるのか・・・。

元のプログラムがあるサイト

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
 $('#main-inner').ready(function(){
   "use strict";
   var pc_width = 600;
   var device = window.screen.width < pc_width ? 'sp' : 'pc';

////////今回はここから///////////////////////
   device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
   var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->
   var sections = $('#main-inner > div.archive-entries > section');
////////ここまでやります///////////////////////

   if((sections.length > view_sec_num) && device == 'sp') {
     var page_index = 0;
     var $entries_archive = null;
     var archive_num = 0;
     $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
     $entries_archive.insertBefore(sections[0]);
     for(var i=0; i < view_sec_num; i++) {
       $(sections[i]).appendTo($entries_archive);
       page_index += 1;
     }
     archive_num += 1;
     for(var i=view_sec_num; i < sections.length; i++) {
       if(page_index==view_sec_num) {
         var $read_more_link = $('<p style="text-align:center;background:#ddd"><a href="javascript:void(0)" style="line-height:3;font-size:80%:">もっと表示する</a></p>');
         $read_more_link.on('click',{archive_num: archive_num},function(e){
           $(e.target).hide();
           $('#entries-archive-' + e.data.archive_num).fadeIn("slow");
         });
         var $before_archive = $('#entries-archive-' + (archive_num-1));
         $before_archive.append($read_more_link);

         $entries_archive = $('<div id="entries-archive-' + archive_num + '"></div>');
         $entries_archive.hide();
         $entries_archive.insertAfter($before_archive);
         page_index = 0;
         archive_num += 1;
       }
       $(sections[i]).appendTo($entries_archive);
       page_index += 1;
     }
     $entries_archive.hide();
   }
});
</script>

解析するコードを書きましたが、設定の仕方等は上のサイトを御覧下さい。

区切り線

【用語説明参照サイト】

web design lab
SMART
WEB MANABU
HTML辞典
js STUDIO
HTMLクイックリファレンス
Qiita
teratail
stack overflow
ONZE/BLOG オンズ開発ブログ
ウェブランサー

区切り線

【解析その1】

device = (device == 'pc' && $(window).width() > pc_width) ? 'pc' : 'sp';
【意味】
モニターもブラウザ幅も600より大きければ、PC扱い。
どちらかが600以下または両方600以下なら、sp(スマホ?)扱い。

こんな感じかな。
プログラム的に書くと・・・

【条件】
deviceの箱の中に入ってるのが「pc(文字)」
・htmlを表示しているブラウザの横幅(スクロールバーは含まない)は「600」ピクセルより大きい

【結果】
2つともクリア
してる場合
deviceの箱の中「pc(文字)」を入れ替える

片方または2つともクリアしていない場合
deviceの箱の中「sp(文字)」を入れ替える

前回vardeviceという箱を作って、中に「pc」「sp」の文字を入れていました。
そして、同じくvarpc_widthという箱を作って、中に「600」という数字を入れました。
今回は、この二つの箱を使って、2種類の条件を聞いています。

device == 'pc' && $(window).width() > pc_width
・「==」
左側と右側が同じかどうか聞いてます。

・「&&」
「なおかつ」
的な意味のようです。
「&&の左側と右側の条件が両方OKだった場合」という感じかな。

・「>」
左側の方が右側より大きいかどうか
を聞いてます。
以上・以下を聞く場合は、「>=」「<=」という感じに「=」を追加します。
こういう記号を「演算子」と言うそうです。
「+ 」とか「 - 」とか「 × 」とか「 ÷ 」とかも演算子(四則演算子)です。

【詳細リンク】
【jQuery】入門9. 演算子

「 ? 」 if (もしも)、「 : 」 elseで、「 : 」の左側が条件が当てはまる場合の答えで、右側が条件が当てはまらない場合の答えです。
詳細は前回に出てきたので、その1に書いてあります。

区切り線

【解析その2】

var view_sec_num = 5; <!-- ここに1回あたりの表示記事数を設定 -->

ここから先は

2,266字 / 3画像

¥ 300

モチベーションにも繋がりますので、宜しくお願いします!