【2023/06/15】ブログページが少し進化！
(2023/11/26)
現行のバージョンでは、以下の内容と相違があります。
忙しかったことが落ち着いたので、少し新しい要素を取り入れてみました！
普段、見てくれている方ならわかると思いますが、記事ページの右（スマホは下）に「最新記事5件」という項目を入れてみました！
さらに...下の方を見ますと、「← 次の記事」「前の記事 →」リンクを付けました！
そんな感じですが、最新記事一覧のやつは、本ウェブサイト初めてJavascriptを利用して実装しています。
実は、ブログトップページと記事内の記事一覧エリアは、iframeで同じページを読み込み、埋め込んであります。
なのに、もうお気付きかと思いますが、記事内の記事一覧エリアに限って、5件しか表示していません。
同じページを読みこんているはずなのに、なぜこうなっているのでしょうか!?
答えは、javascriptでリンク5個分の高さを取得しているからです。
どういうことかというと、ブログトップページでは、記事一覧として、「すべての」記事リンクがありますよね。これは、iframeにページ丸ごと埋め込んであるためです。
それに対し、記事内の記事一覧エリアでは、埋め込んだページのリンク要素を上から5件、javascriptで取得し、それぞれのリンク文字列（リンク行）の行の高さを取得しています。
それで、取得した5つの高さを全部足せば、5件分のリンク行の高さが取得できる、なんてわけです。その求めた値を表示部分（iframe）の高さに適用しています。
...と言っても、文字だけではうまく伝わっていないと思うので、以下の画像にまとめました。
どんなことに戸惑ったのか、なども含め、参考にした情報を以下に備忘録も兼ねて列挙したいと思います。
| 困ったこと等 | （私の場合の）対処法 | 関連URL | 備考 |
|---|---|---|---|
| iframeで埋め込んだページの要素の取得ができない！ エラー Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. | サーバーを立ててテストする（Simple Web Serverを導入） | JavaScriptでサブウィンドウAからサブウィンドウBへ指示を出す方法 | こちら のサイトなどのように、iframeに埋め込んであるページの要素を取得するには、「contentWindow.document」を利用すれば良いらしいですが、利用してみたら、エラーが出ているじゃないですか。 これの原因は、contentWindowが非対応、ではなく、ただ単にローカルでテストしていたことです。 |
| 右側に一覧を並べたい！（要素の並列） | floatを使う | ・CSSのfloatプロパティで要素を横並びにする方法 ・CSSのfloatを使ってdiv要素を横並びする方法 | floatの扱い方です。関連URLの、2つ目の方にはレイアウトが崩れた時の対処法も載っています。 floatの解除方法は、こちらを参考 |
| 要素の高さを取得したい | ~.style.heightを使う | [JavaScript] 要素のwidth、heightを取得する | iframe内の要素は取得できても、高さが取得できないと意味がない！ |
| ウィンドウのサイズが変わってもサイズを対応させる | window.onresizeを利用。 | resizeイベント：ウィンドウサイズが変更されたとき | ウィンドウサイズが変わると、5件分の高さが変わり、枠からはみ出してしまったため、ウィンドウサイズが変わったら高さを再計算する必要がありました。window.onresize=XXX()で、関数を呼ぶだけです。 |
| 一行内に、２つの文字列を並べたい | display: table(table-cell);を利用する | CSSで一行の中で左寄せと右寄せを使いたい時 | 「← 次の記事」「前の記事 →」の２つの文字列を一行内で、左・右に別々に寄せる方法です。詳細は、リンクをどうぞ。 |
| ページ読み込み時にjs関数を実行したい | <body>タグ内に、「onload=""」を記述 | ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ | |
| すべての<a>タグに「target="_blank"」を一括で適応したい | 「getElementsByTagName("a")」で<a>タグ取得し、for文を使って取得した要素の数だけ、「setAttribute('target', '_blank')」する | 【JavaScript】外部リンクにtargetを自動追加して別タブで開くようにする | 組み込み方は、リンクをどうぞ。 |
| 閲覧している端末がスマホかを調べたい | UserAgentから判定する | 【JavaScript】スマホ判定する方法 | スマホなら最新記事一覧を下側に、パソコンなら右側に、といった処理をするためです。 |
いかがだったでしょうか（別に何もないと思うけど）。jsが使えると、結構楽しそうですね。
ではまた。