0 と 1 の世界の見習い探検家

2016年06月

パスとは、Web上で公開されていたリソースの場所を表すものです。
通常はURLとして http:// から始まる完全なパスを指定しますが、他にも2種類の指定の仕方が存在します。

フルパス(通常のURL)

これは、通常の http:// から始める指定の仕方です。
自分のウェブサイト(ドメイン)とは異なるサイトのHTMLファイルへリンクを張る際などに使用します。

記述例;
<a href="http://blogs.yahoo.co.jp/a32kita">ほげ</a>


この記述でリンクを貼ると、このブログのトップページに飛びます。

ロケーションレラティブ

これは、現在の自分のファイルが存在する場所を基準にした相対パスで指定する方法です。
同じディレクトリやその1つ上位、または下位ディレクトリに存在するコンテンツへリンクを張る際などに使用します。

記述例;
<a href="./">このディレクトリのインデックス</a>
<a href="../">1つ上層のディレクトリのインデックス</a>
<a href="../content.html">1つ上層のディレクトリのcontent.html</a>


イメージ 1
画像:ロケーションレラティブのイメージ

ルートレラティブ

これは、現在の参照元となるコンテンツが属しているサイト(ドメイン)のルートディレクトリからの相対パスで指定する方法です。
"/"から指定します。

記述例;
<a href="/index.html">このサイトのトップページ</a>
<a href="/hoge/foo.html">このサイトのhogeディレクトリのfoo.html</a>


http://www.a32kita.tk/aaa/bbb.html
で記述しようが
http://www.a32kita.tk/cccc/dd/eeee/fff.html
で記述しようが
<a href="/index.html">~~</a>
と指定した場合は、www.a32kita.tk上に存在しているHTMLファイルであれば、常に
http://www.a32kita.tk/index.html
へのリンクを表すことになります。

その他の指定方法

他にも「プロトコルレラティブ」などの指定方法がありますが、ここでは割愛させていただきます。

近年のウェブサイトでは、大抵の場合、統一のヘッダやフッタを使用します。
ヘッダやフッタとは、サイトの上部や最下部にあるアレです。
すべてのページで同じものを表示することで、デザインのわかり易さなどを向上することができます。

イメージ 1
画像:ヘッダの例

これをHTML上に記述する際、直接記述してしまうと問題が起こることがあります。
それはヘッダやフッタの内容を変更したい場合です。
各ページのHTMLに直接記述してしまうと、あとですべてのファイルで変更が必要となり、非常に面倒です。

では、どうしたらいいのでしょうか。
改善法は主に3つあります。
・PHPを使用する
・SSIを使用する
・JavaScriptを使用する

PHPやSSIはお使いのホスティングサービスにもよりますが、規制されている場合がありますので、今回はJavaScriptでやる方法を紹介します。

JavaScriptで具体的にどういうふうに改善するのか、簡単に言うと、ページを読み込んだ際に同一のスクリプトを呼び出して貰う方法です。
JavaScriptはHTML中にも記述できますが、ヘッダ中で<script>タグを使えばもちろん外部のスクリプトファイルを参照することも可能です。
ですから、外部のスクリプトファイルでヘッダやフッタの内容(HTMLソース)を返す関数を定義しておき、それをページを読み込む際にHTML側に記述したJavaScriptで呼び出して、表示させれば良いのです。

イメージ 2
画像:流れのイメージ


ではここで実験。
「hoge.html」と「hoge.js」の2つのHTMLファイルを用意します。

中身は次の通り。

hoge.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>test</title>
       
        <script src="hoge.js"></script>
    </head>
    <body>
        <script>document.write(getTestSource());</script>
    </body>
</html>

hoge.js
// test script

function getTestSource() {
    return "試験的なHTMLソースです。<br>2行目<br>3行目<br><font color=\"red\">これは赤字</font><br>";
}



両方ともファイルに保存する際の文字コードはUTF-8を使用してください。
同じディレクトリに保存し、hoge.htmlをブラウザで見てみてください。

イメージ 3
画像:表示例

まずhoge.jsでHTMLソースを文字列で返す関数「getTestSource」を定義し、ソースを返すように定義します。
文字列をそのまま戻り値としてreturnしていますが、HTMLソースの中にはJavaScriptで文字列の開始と終端を表す記号である " (ダブルクオーテーション)記号が含まれます。
HTMLソース中のダブルクオーテーション記号は、しっかりその前に \ 記号を付加し、エスケープシーケンスとして記述しましょう。

イメージ 4
画像:エスケープシーケンスの例

エスケープシーケンスの詳しいことについては、「JavaScript エスケープシーケンス」で検索してみてください。

一方HTML側ではまず <head> ~ </head> の間で、先程のhoge.jsを参照することを記述しています。
そして<body> ~ </body>内の適当な場所で先程のhoge.jsで定義した関数を呼び出すだけです。

document.write()関数は、現在のページ上に指定したHTMLソースを出力する関数です。
この関数の引数に対して、先程のgetTestSource関数の戻り値をそのまま指定しています。


複数行に渡るソースなどを先ほどのgetTestSource関数のように記述するのは大変困難です。
次は、XmlHttpRequestという仕組みを使った簡単な方法を紹介します。


【Web日誌】XmlHttpRequestを使用したヘッダ・フッタ (2016/6/26(日) 午後 10:45)
http://blogs.yahoo.co.jp/a32kita/14387780.html


イメージ 1

HDDをまた購入しました。
1年間のうちに2台購入するのは非常に珍しいです。

実は前回HDDを買って、念のためにと一番古いHDDを中心にファイルのバックアップを取っていたら、数週間後にほんとに壊れてしまいまして。
バックアップを取るまで頑張ってくれてたんですね。

壊れたHDDは一応フォーマットをかけたら正常に動きそうだったのですが、動作に不安があるということでテレビの録画用にまわしました。

今まで基本的にHDDは1TB以上のものは購入しない主義だったのですが、偶然2TBのものが安く売っているのを見かけてしまいましてね。
前回壊れたHDDからバックアップしたデータの中でも家族で撮った写真などで逼迫していたぶんをなんとか改善するために購入してしまいました。
ついでにUSB3.0のハブも。
HDDつなぎすぎてポートがもう無いんですよ。


イメージ 2

「コンピュータ」はこの様子です。
ドライブレターの枯渇が心配。。

古いHDDで使っていたドライブレターは諸事情により現在使えないもので。。。
ディレクトリにマウントしてみるなど、いろいろ策を考えないといけませんね。

では。

※Twitterの本日の#a32trainツイート一覧

京成線 快速特急 上野行き 3026-7 #a32train 3026編成: A07 #keisei_unyo
新京成線 種別なし 松戸行き 8809-6 #a32train 8809編成: 運用不明
新京成線 種別なし 京成津田沼行き 8805-2 #a32train 8805編成: 運用不明
京成線 快速特急 成田空港行き 3681 #a32train 3688編成: 67K #keisei_unyo

イメージ 1

イメージ 2
※写真は6月20日撮影

京成電鉄3000形3030編成にヘッドマークが掲出されていました。

「直通運転25th」
京急線・都営浅草線・京成線・北総線の4直の記念ステッカーみたいです。



撮影当日の3030編成は67K運用に充当されていました。
(乗車記録より)
2016年06月20日 本日の乗車記録 (2016/6/20(月) 午後 10:31)
http://blogs.yahoo.co.jp/a32kita/14369695.html

都営車にも同様のヘッドマークが掲出されているのを京成津田沼で見かけましたが、このヘッドマークを掲出した状態で実際に他社線の方にまで行ってるんですね。

このページのトップヘ