スポンサードリンク
スポンサードリンク
|
←マクロミルはここがすごい！ ◆なんといっても他社アンケート会社の追随を一歩も許さない、その圧倒的アンケート数の多さ・充実ぶりにあります。アンケート数が多いということは、それだけ私たちにとっては稼げるチャンスがふえるということ。 |
メルマガ「超ビギ・パソコン教室」だよりはこちら
パソコン挑戦記録 (2009年〜) パソコン
「一定スクロールで出る「トップに戻る」ボタンの作り方」で困ったこと
All Aboutさん（https://allabout.co.jp/gm/gc/444816/）の表記の「トップに戻る」は別のHP内で利用させていただいております。これをこのHPに適用しようとして動作せず困った経緯を書きます。
ＪQuery
前に扱ったのはずっと以前なので、覚えている範囲でボタンのhtmlやcssなどをコピーしたが、肝心のjQueryを忘れていた。
直接書くとＯＫ
表記のボタンのスクリプトを直接ページのhtml内に記載すると動作した。しかし、これだと個々のページにスクリプトを入れなければならない。
ＪＳファイル内に書くとＮＧ
ところが、以前のHPの個々のページ内にはこのスクリプトが入っていない。各ページのヘッダーを表示するＪＳファイル内にヘッダー以外のコーディングがあったのを思い出して調べると、ボタンのスクリプトだった。 その通りにこのHPのＪＳファイル内に記載したが動作しない。
読み込み順序に問題あり 解決
色々検索したりして調べるとファイルの読み込み順序に原因があったようだ。当たり前のことかもしれないが、Jクエリーの本体を読み込んでおかなければスクリプトの関数は作用しない。 Jクエリーの本体読み込み、ヘッダー（＋ボタンのスクリプト）ＪＳファイルの読み込み順にすると動作した。 以下に、上記のお手本のＨＰにある動作サンプルページのソースのコメントをあげておきます。読み込み順序の参考にすると良いと思います。
<head> <title>スクロール量に応じて「TOPへ戻る」ボタンを表示する例</title> <!-- ====================== --> <!-- ▼jQuery本体を読み込み --> <!-- ====================== --> <!-- ▼今回のスクリプト --> <!-- ========================================== --> <!-- ▼ボタン掲載のためのサンプルスタイルシート --> <!-- ========================================== --> </head> <body> <!-- ================= --> <!-- ▼TOPへ戻るボタン --> <!-- ================= --> </body>
サブディレクトリ型への対応（その１）
サブディレクトリ型での「ルート相対パス」が機能しなかった。
それに対応するため、<base>タグを使用してみた。<base>タグは<head>のすぐ下に置き、<base href="rootに指定するパス”>のようにそのページのrootパスを固定できる。
２階層めのディレクトリーのページに<base href="http://www.eonet.ne.jp/˜ユーザー名/">（ｅｏネットの場合）を置いて、リンクは相対パスで表示すると、Ｗｅｂ上ではうまくいった。
しかし、ローカルＷＥＢ環境では、当然うまくいかない。リンクの先がローカルからＷｅｂ上に飛び出してしまうからです。
２階層めのディレクトリーのページに<base href="/˜ユーザー名/">を置いても同様の結果となる。ローカルＷＥＢ環境でも、うまくいくようだ。しっかりと確認はしていないが。
サブディレクトリ型への対応（その２）
上のように「<base>タグ」の利用もあるが、.htaccessファイルに記載してサブディレクトリをrootにすることができるようだ。しかし私の場合はうまくファイルを設置できない。設置が拒否されているように思う。
サブディレクトリ型への対応（その３）解決
「ルート相対パス」にこだわってみる。ｅｏ光のURLは
http://www.eonet.ne.jp/˜ユーザー名/index.html
のようになっている。ルートパスの位置はドメイン名の最後の位置/になる。
ホームページのコーディング
このルートパスがルートパスになるように、ホームページのhtmlの記載を行う。
「ルート相対パス」のrootの位置をサブディレクトリーの前にするために/˜ユーザー名/index.htmlや/˜ユーザー名/css/style.cssのように/の前にサブディレクトリー名を入れる。
xamppによるテスト環境
一方、ローカルのＷＥＢテスト環境では、Ｗｅｂ上に表示されるサブディレクトリ（˜ユーザー名）をローカルWeb rootの下に同じ名称（˜ユーザー名）で作成する。
localhost/˜ユーザー名/index.html や localhost/˜ユーザー名/css/style.cssのようにする。
以上でテスト環境で確認できれば、アップロードすれば良い。
ヘッダー共通と(サイト)ルート相対パス
ヘッダー共通化
ＨＰの各ページヘッダーを共通化する場合にひとつのデータを呼び出して共通にするのが変更にも強く管理しやすい。
そのため、ＪＳファイルでhtmlの内容を作成し呼び出して使用している。その際、相対パス方式ですると、ディレクトリの階層によって記載を変えなければならないのでそれを避けるため、「ルート相対パス」を採用した。（サブドメイン型のさくらインターネットのレンタルサーバー）
ところが、同様にサブディレクトリ型のｅｏ光の場合に適用したが、「Not Found」が出てリンクがつながらない。
ＪＳファイルでhtmlの内容は「ルート相対パス」を採用したので/index.htmlは、http://www.eonet.ne.jp/index.html となり、
http://www.eonet.ne.jp/˜ユーザー名/index.htnl とはならないからです。
ローカルに作成したＷＥＢ環境でのテスト結果OKでもＷＥＢへアップロードするとうまくいきません。次の「２ ルート相対パス」を参照してください
ルート相対パス
ルート相対パスではhtml内のパスは / で始まりそこがrootの位置になります。
さくらインターネットのレンタルサーバーはサブドメイン型なのでhtml内の / root指定とurl上のroot（/）が一致します。その結果、ＸＡＭＰＰ（ザンプ）によりローカルに作成したＷＥＢ環境でのテスト結果がそのままアップロードしたサーバー内で動きます。
ｅｏ光の場合は、サブディレクトリ型なのでhtml内の / のroot指定は、ＷＥＢ上にアップロードした場合は http://www.eonet.ne.jp/が指定され本来の http://www.eonet.ne.jp/˜ユーザー名 / が指定されない。
そのため、ＸＡＭＰＰ（ザンプ）によりローカルに作成したＷＥＢ環境でのテスト結果がうまくいっても、ＷＥＢ上にアップロードした場合はユーザー名無しにリンクされ「Not Found」となる。
ローカルＷＥＢ環境
ＷＥＢ上サーバー
サブドメイン
〇
〇
サブディレクトリ
〇
×（ユーザー名ディレクトリ無し）
続きは 2021年8月14日(土) へ
2021年8月12日(木)
ｅｏ光のホームページでの（サイト）ルート相対パスの問題点
この間、ＨＰの更新を行っている。
「Another HTML-lint gateway HTML文書の文法をチェックし、採点しますhttps://cetus.sakura.ne.jp/htmllint/htmllint.html」によるチェック。
各ページのヘッダーを共通化
Html５準拠へ。「Another HTML-lint 5 http://www.htmllint.net/html-lint/htmllint.html」によるチェック。
� 銑�を順次または並行して実施
出てきた問題点（文法上の誤りは多数指摘された。）
サブドメインとサブディレクトリ（この過程で、分かったこと）
サブドメイン
例 赤字部分がサブドメイン
Yahoo!ショッピング: https://shopping.yahoo.co.jp/
ヤフオク: https://auctions.yahoo.co.jp/
Yahoo!路線情報: https://transit.yahoo.co.jp/
Yahoo!地図: https://map.yahoo.co.jp/
サブディレクトリ
例 赤字部分がサブディレクトリ
https://digital-marketing.jp/seo1/
https://digital-marketing.jp/seo2/
https://digital-marketing.jp/subblog/サブドメインとサブディレクトリの違い
さくらインターネットのレンタルサーバーは、サブドメインの形
ｅｏ光の場合は、サブディレクトリの形
ルートパスの位置はいずれもドメイン名の最後の位置/になるようです。
続きは 2021年8月13日(金) へ
2009年12月20日（日）
SOTECのパーティションにWin98をインストールしようと思ったが、インストールの途中でパーティション選択がないようなのでやめた。
2009年12月19日（土）
SOTECにWin98を入れるのにHDにデータを一部退避させたりした。
2009年11月15日（日）
ハブが突然、通電しなくなっていた。ジョーシンで買ってきた。
2009年11月9日（月）
eo光TVを申し込んだ。
2009年6月26日（金）
bcapよりホームページの転送作業をさせていただきましたとのこと。
見ると、bcapにアクセスがあるとそのままeoにつながるようになっていた。
2009年6月22日（月）
bcapのホームページがいつまでも削除されないので問い合わせ。
2009年2月8日（日）
メルマガ発行。「コピー」「貼り付け」「切り取り」について、その2。
2009年2月4日（水）
今年向けに、ホームページ、リンク変更し、アップロード。
2009年2月2日（月）
PCの方の、年別リンクに、2009年を追加するとともに、リンク切れなど見直し。
2009年1月31日（土）
今年初めてのメルマガをようやく発行。
2009年1月30日（金）
メルマガ、ほぼ完成。
2009年1月29日（木）
今年初めてのメルマガの準備。
「コピー」「貼り付け」「切り取り」についてだが、「コピー」「貼り付け」をまず発行することにした。
2009年1月25日（日）
boox for ライフマイルというのに登録。
岩波講座物理の世界、購入手続きをした。
送料無料で、ゆうメールで届くようだ。局留めで頼んだ。
支払いが、カードのみだった。
送料無料、配達、マイルが付く、という良いことづくめ。
今回は、キャンペーン期間中で、500マイルくらい付く予定。
2009年1月13日（火）
昨年9月で終了のはずの、びわ湖キャプテンのホームページがまだ生きているので問い合わせをしたところ、3月末めどで消すとのメールがあった。
2009年1月12日（月）
！！ あなたのメールマガジンに読者アクションがありました ！！
【Ameba】あなたの昨日のペタ数は？
【Ameba】sakura-yokomine さんのブログが更新されました x4。
2009年1月11日（日）
ホームページ更新。
パソコン挑戦記録年リンク | 2000,2001 | 2002 | 2003 | 2004 | 2005 | 2006 | 2007 | 2008 | 2009,10 |
| ＨＯＭＥ | Linux 挑戦日記 |
パソコン 挑戦記録 |
望遠鏡 製作記 |
百人一首 | 伝言板 | 御意見メール | 変更履歴 |
