読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ

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>

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