IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / ページによる振り分け、動的に DOM要素を作る=はてなブログテーマ hyperspace (3)

ページによる振り分け、動的に DOM要素を作る=はてなブログテーマ hyperspace (3)

2016/04/21 javascript, はてなテーマ, はてなブログ

「HTML5 UP の Hyperspace デザインイメージを「はてなブログ」で実現できるか?」の3回めです。

下がデモサイトです。時間が取れる時に少しずつやっていますので徐々に変わっていきます。
hyperspace.hatenablog.jp

次は、nav-panel に入れるコンテンツ作りです。javascript で動的に DOM要素をつくって入れるしかないですね。プログラミングを系統的に学んだことはなく、見よう見まねで始めたことですので、間違いや他に良い方法があればツッコミ歓迎です。

コードは Github で公開しています。

スムーススクロールの実現には、to-R さんが MITライセンスで公開されているスクリプトを再利用させていただいています。
smoothScroll.js

ページによる振り分け

var page = document.body.className;
if (page.match(/page-index/)) {
    alert('トップページです');
} else if (page.match(/page-entry/)) {
    alert('記事ページです');
} else if (page.match(/page-archive/)) {
    alert('カテゴリー、アーカイブペイジです');
} else if (page.match(/page-about/)) {
    alert('プロフィールです。');
}

こんな感じでいけそうですが、今チェックしましたら、日付をクリックした時に page-entries-year-month-day というクラス属性が付きますので、これも追加しなくてはいけませんが、扱いは page-archive と同じでいいでしょう。

動的に DOM要素を作る

element = document.createElement(tagName);
element : 生成される element オブジェクト
tagName : 生成される要素の型を特定する文字列。生成される要素の nodeName は tagName の値で初期化されます。

動的に要素を作るには、createElement を使うことになりますが、今回のように何度も DOM操作を繰り返す場合のパフォーマンスが気になります。たとえば、トップページに5つの記事を表示している場合は、li を5個作成し、その度に setAttribute して、ul に入れ、さらに div に入れるといったことを行うことになります。

この方法が正しいのかどうかははっきりしませんが、とりあえず、2個以上作ることになる要素は template をつくっておいて cloneNode で複製を作り、DOM要素へのアクセスが繰り返される場合は DocumentFragment を使うことにします。

たとえば、こんな感じです。

var tmplLi = document.createElement(‘li’);
elementLi = tmplLi.cloneNode(true);

動的に作成されたナビパネル(nav-panel)の html

<div id="nav-panel">
<input id="trigger" type="checkbox">
<div id="panel">
<label for="trigger"></label>
<div id="panel-inner">
<div class="hatena-module-title">最新記事</div>
<div class="pager-top"><a href="javascript:void(0)" rel="#container">トップ</a></div>
<ul>
<li><a href="javascript:void(0)" rel="#entry-10328537792371582580">記事11あのイーハトヴォのすきとおった風</a></li>
<li><a href="javascript:void(0)" rel="#entry-10328537792371582549">記事10夏でも底に冷たさをもつ青いそら、</a></li>
<li><a href="javascript:void(0)" rel="#entry-10328537792371582527">記事9うつくしい森で飾られたモーリオ市、</a></li>
<li><a href="javascript:void(0)" rel="#entry-10328537792371582519">記事8郊外のぎらぎら光る草の波。</a></li>
<li><a href="javascript:void(0)" rel="#entry-10328537792371582510">記事7</a></li>
</ul>
<div class="pager autopagerize_insert_before">
<span class="pager-next"><a href="http://hyperspace.hatenablog.jp/?page=1460941965" rel="next">次のページ</a></span>
</div>
</div>
</div>
</div>

次は、「前のページに戻る」をどう実現するか?です。なぜ、はてなブログには「次のページ」があるのに「前のページ」はないのでしょう?

はてなブログテーマ hyperspace (2)
はてなブログに SessionStorage で「前のページ」を実装する=はてなブログテーマ hyperspace (4)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/09/14

GDPRを設定する

2023/08/30

scroll-behavior:smoothは履歴に残る

2023/08/22

要素がトップにきたことを感知する-IntersectionObserver

2023/08/8

ホームページとは別に投稿一覧ページをつくる方法-WordPress

2023/07/28

WordPress:シングルページにループはいらない

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ215
  • WebTips110
  • javascript100
  • Joomla!88
  • Wordpress78
  • Windows68
  • CSS64
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google36
  • Plamo33
  • はてなプラグイン25
  • php23
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • Git入門6
  • ConoHa WING6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • Xserver3
  • Firefox3
  • 静的サイトジェネレーター3
  • SSD3
  • Docker3
  • Blankslate3
  • Twitter2
  • Mactype2
  • GitHub2
  • youtube1
  • はてなブクマ1
  • rails入門1
  • 映画1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com