やや曇りがちで涼しいが、風がとても強い。
レシピ集の最新レシピ３件を、JavaScriptで外部ファイルとして書き出し、トップページで読み込む仕組みを完成させた。簡単に言うと、新しいレシピを追加したら、自動でトップページの写真も変わる仕組みだ。いわゆるJSファイルというやつだ。結構使えるやり方なので、下に解説を加えておきたい。あっているかは、わからないけど。
JSファイルを使おう
- ページの一部を別ファイルに移すことで、本体のソースを見やすくしたい
- ナビゲーションなど、複数のファイルで共通の部分をまとめたいが、フレームは使いたくない
- JavaScriptの処理内容を外部ファイル化したい
という時に使えます。余計な情報を外部ファイル化する結果、ソースがすっきりとし、検索エンジン対策にも効果があるとか。ただ、逆に外部ファイル化したテキストは、検索エンジンで検索されないし、動作しない環境もあるので、多用は避けたほうがよさそうだ。
JSファイルの作成と読み込み
ここでは、単純にHTMLソースの一部を外部ファイルに移し、それを読み込む場合について説明します。
text.jsというファイルを作り、下のように記入
document.write('<p>テスト</p>\n');複数行にわたる場合は、同じ行をつなげていくだけです。これを読み込むには、HTMLのソース内の、「テスト」と表示させたい部分に以下のような文を入れます。
HTMLソース内に記入
<script type="text/javascript" src="./text.js"></script>src=の後には、text.jsへのパスを書きます。「http･･･」から始まる絶対パスでも構いません。
これで、ソースを追加した部分に、「テスト」と表示されるはずです。このようにして、外部ファイルにHTMLソースの一部を移し、読み込むことが可能になります。
詳しくは他のページを参考に。