忍者ホームページやFC2ホームページといった無料サービスで、Wordpressっぽいサイトを作ることを考えてみました。
HTMLサイトとWordpressのサイトの違い
HTMLサイトとWordpressのサイトの違いのひとつに、サイト内容がデータベースに格納されているか否かがあります。
WordPressを使用している当サイトの場合、「wp_posts」というテーブルに、投稿した内容が入っています。
画像はphpmyadminもので、記事を更新するたびにレコード（行）が追加されていました。
WordPressのサイトは、ここに格納されたデータを呼び出し、ウェブページとして表示しています。
対して、無料で使える忍者ホームページやFC2ホームページでは、データベースが使えません。
文章内容はHTMLに、デザインはCSSに記述することになります。
一昔前のように、デザインもHTML内に記述できますが、そうするメリットは少ないでしょう。
例えば、全ページのテキストリンクのカラーを変える場合、HTMLに記述していると全HTMLファイルを修正する必要があります。CSSに記述して読み込む場合、そのCSSを修正するだけで全ページが変わります。
同じように、Wordpressを利用したサイトでは、新規投稿が全ページに影響します。
指定したカテゴリーに追加され、タグからも見つけられる。アーカイブとして月単位でまとめられ、新着情報や関連記事にも自動的に表示されます。
それはデータベース上で投稿日時やタグといったデータが管理され、適切なリンクを自動生成してくれるからです。
データベースが利用できない無料ホームページでは、こうはいきません。
もし、同じことをやるとしたら、1つ1つのページに新規の投稿内容を反映させることになります。ページ数が増えるほど手数が増えるので、ハッキリ言って現実的ではありません。
そんな現実的でない作業をJavaScriptの読み込みで、ちょっと変えてみた話を書いたのが当ページです。
JavaScriptの使用例
全ページにある新着情報を一斉に更新したい場合、次のような方法があります。
まず、全HTMLファイルの新着情報を表示する箇所に、次のようなタグを書き込みます。
<script type="text/javascript" src="sample.js"></script>
これは「sample」というJavaScriptのファイルが、HTMLと同じ階層にあるときの記述になります。これで、その箇所に「sample.js」の内容が反映されます。
次に、その「sample.js」に以下のような記述を書きます。
document.write ('<p>サンプル</p>')
これで、そこに「サンプル」という文章が表示されます。
ここの文章を変えることで、新着情報を更新することができます。全HTMLファイルで同じJavaScriptのファイルを読み込んでいれば、このファイルを変えるだけで切り替わります。
「iframe」というタグを用いて、HTML内で別のHTMLを読み込むこともできますが、無料ホームページでやると広告だらけになってしまいます。
無料ホームページではbodyタグに反応して広告を出していたりするので、読み込んだHTMLにも反応して広告が増えてしまうのです。
なお、「document.write」という書き方はHTML5では非推奨となっていますが、忍者おまとめボタンなど、多くのサービスで使用され続けています。
「document.write」の代わりとなる書き方としては、「innerHTML」があります。
新着情報をinnerHTMLで出すとなると、HTML内の出したい箇所にulタグを書き、子要素であるliタグをinnerHTMLで追加する感じでしょうか。
具体的に書くと、次の通り。
【HTML側の更新情報枠】
<ul id="pickup"></ul>
【JavaScript側】
var sample = document.createElement("li");
sample.innerHTML = "サンプル";
pickup.appendChild(sample);
「pickup」というidのついたところに、サンプルという箇条書きを追加する内容です。
「次の記事」と「前の記事」
WordPressのサイトでは投稿日時が記録されるため、「次の記事」と「前の記事」へのリンクが自動生成されます。
これを無料ホームページでやる場合、次のような方法が考えられます。
まず、HTMLファイルの名前に法則性を持たせます。
「a001.html」「a002.html」といった具合に、数値を増やしていく感じです。
次に、表示されているページのURLを取得します。
var url = location.href;
これで、urlという変数にURLが入ります。
文字列を部分的に抽出する「substring」を使い、urlからファイル名を抜き出します。
var now = url.substring(31,35);
上の場合は、開始位置が31、終了位置が35になります。
前半のアドレスや「.html」という拡張子は要らないので、このような書き方をしていますが、開始位置の数字はアドレスの長さによって変わることでしょう。
var categorize = now.substr(0,1);
「a001.html」の「a」で「a」というカテゴリーを示す場合、その部分を取得することでカテゴリー単位での表示可能になります。
上の記述では、0文字目から1文字分だけを抽出しています。
aというカテゴリーの新規投稿をした際に、同一カテゴリーの記事数を示す変数を更新することで、最大値前なら「次の記事」は+1、最大値なら1とするだけで、同じような内容を全ページで展開できます。
「前の記事」のときは、逆の処理をすればいいだけです。
リンク箇所の例は次の通り。
【HTML側の更新情報枠】
<a href="#" id="next">次の記事</a>
【JavaScript側】
var nextURL = categorize + num + ".html";
document.getElementById("next").href = nextURL;
上記は、HTML側にダミーとして入れているリンク先を上書きする内容です。
nextというidのリンク先が、nextURLという変数に入っているものになっています。numには数値が入ります。
ただ、上のように「001」といった書き方にした場合、計算時に数値として扱うため、前半の00が消されるので、その対処が必要になります。
下記は、その一例。
next = ('000' + next).slice(-3);
sliceは文字列の切り出しに使うもので、上の場合は開始位置が「-3」になります。
終了位置が入っていないので、後ろから3番目から最後までを取得します。
記事のタイトルも出したいときは、それ用の変数を用意して呼び出すことになります。配列の数値とURLの番号を一緒にするのが簡単でしょうか。
最後に
私はJavaScriptが得意というレベルではないので、もっと良い方法はあるでしょう。
あくまで、少しかじった程度の人でも、「このくらいはできるよ」くらいの話です。まぁ、需要がある内容かは不明ですが……。