ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

jQueryでanimateを使ってスライダーをBootstrapに自作その1

ホームページのトップページをスライダーで飾ることは多々あります。世の中には、jQueryのSliderのライブラリは山ほど有り、どれも優れています。ただ、プログラマとしては、自作したいものです。javascriptは、さほど普段使っていないのですが、これを機にjQueryjavascriptの勉強も兼ねて、スライダーを自作してみることにしました。

4枚の画像が一定間隔でDIV要素の中をくるくる回り続けるというものです。

パソコン、タブレットスマホに対応するために、レスポンシブとなっております。そのために、親要素の幅、子要素の幅を所得して、移動距離を算出するところに工夫しました。

デモ https://burrn.work/honoka/top7.html

jQueryをダウンロードし、./js内に jquery-3.3.1.min.js を設置します。

HTMLファイル内にjQueryを指定します。
<script src="./js/jquery-3.3.1.min.js"></script>

HTML内に下記を記載します。box_parentが親要素でその中にbox_childが子要素として4つ有ります。

<div class="row">
 <div class="col-lg-12" id="box_parent">
 <!-- 以下 Jqueryで要素を動かす -->
  <div id="box_child_1" class="box_child"><img src="./images/sub_image_1.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_3" class="box_child"><img src="./images/sub_image_2.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_4" class="box_child"><img src="./images/sub_image_3.jpg" alt="" class="img-responsive"></div>
  <div id="box_child_5" class="box_child"><img src="./images/sub_image_4.jpg" alt="" class="img-responsive"></div>
  <div class="box_text">jQueryでスライダーを自作その1</div>
  <!-- 以上 Jqueryで要素を動かす -->
 </div>
</div>

CSSファイルの記述です。

#box_parent { position: relative; height: 450px; width:100%; }
@media (max-width: 767px) {
 #box_parent { height: 350px; }
}
.box_child{ position: absolute; width: 300px; height: 210px; padding: 10px; }
@media (max-width: 767px) {
 .box_child{ width: 200px; height: 140px; }
}
#box_child_1 { background-color: #007bff; top:10px;left:10px; z-index: 4; }
#box_child_3 { background-color: #8ff9fa; top:10px;right:10px; z-index: 3; }
#box_child_4 { background-color: #007bff; bottom:10px;right:10px; z-index: 2; }
#box_child_5 { background-color: #8ff9fa; bottom:10px;left:10px; z-index: 1; }
.box_text{
 position: absolute;
 width: 500px; height: 50px; top: 0;bottom: 0;left: 0;right: 0; margin: auto;
 font-size:2.0rem; font-weight:600; text-shadow: 1px 1px 1px #007bff;
 z-index: 5;
}
@media (max-width: 767px) {
 .box_text{
  width: 300px;  height: 35px;  font-size:1.2rem;
 }
}

jQueryの記述です。

<script type="text/javascript">
$(function() {
 setTimeout('box_loop()');
});?

function box_loop() {
 var yohaku = 10;
 var sokudo = 1000;
 var box_parent_width = $('#box_parent').width();
 var box_parent_height = $('#box_parent').height();
 var box_child_width = $('.box_child').width();
 var box_child_height = $('.box_child').height();
 $('#box_child_1')
  .animate({'left':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'top':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'left': yohaku + 'px'},{'duration': sokudo})
  .animate({'top': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_3')
  .animate({'top':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'right':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'top': yohaku + 'px'},{'duration': sokudo})
  .animate({'right': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_4')
  .animate({'right':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'bottom':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'right': yohaku + 'px'},{'duration': sokudo})
  .animate({'bottom': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 $('#box_child_5')
  .animate({'bottom':( box_parent_height - box_child_height - 3*yohaku ) + 'px'},{'duration': sokudo})
  .animate({'left':( box_parent_width - box_child_width + 0*yohaku) + 'px'},{'duration': sokudo})
  .animate({'bottom': yohaku + 'px'},{'duration': sokudo})
  .animate({'left': yohaku + 'px'},{'duration': 2*sokudo,'easing': 'swing'});
 setTimeout('box_loop()', 6000);
}
</script>

結構簡単に出来るんだな?と思いました。実際のWEBサイトのトップページにするには、もうちょっと体裁を整えねばならないでしょうが、既存のライブラリのみならず、自作も楽しいのでは?と思いました。色々これからも自作してみます。ですので、「その1」というタイトルにしました。

詳しい解説は、後日にする予定です。本日はこれまでにします。

デモ

https://burrn.work/honoka/top7.html

Bootstrapにパララックス効果を導入

Bootstrapにパララックス効果を導入しました。

作業最終形デモ 

https://burrn.work/honoka/top5.html

WEBサイトを縦スクロールする際に、縦スクロールの移動距離に対して、画像の移動距離が短く、閲覧者にトリッキーな印象を与える効果があります。

Bootstrapに導入してみました。

Parallax.js | Simple Parallax Scrolling Effect with jQuery

こちらより、いつも通り制作者に感謝してダウンロードさせていただきます。

解凍して、parallax.jsを ./jsに配置します。

HTMLファイル内に以下を追記します。

<script src="./js/parallax.js"></script>

私の場合は、HTMLファイルのかなり下部に追記しました。

パララックス効果を得たい箇所に以下を記載しました。 

<div class="parallax-window" date-android-fix="false" data-image-src="./images/para_image_4.jpg">

    <p>パララックスで<BR>視差効果を得ます</p>

</div>

そして、CSSファイルに以下を追記しました。

.parallax-window {
 padding:30px;
 min-height: 360px;
 background: transparent;
}

min-heightの値を大きくすれば、見える画像ファイルの縦が長くなります。

400px未満で小さくが私としては好みです。

画像だけでは寂しいので、文字列「パララックスで視差効果を得ます」を画像に入れました。

作業最終形デモ 

https://burrn.work/honoka/top5.html

Bootstrapに設置したドロワーメニューの背景色・文字色を変更し、画像を挿入

f:id:php-7com:20181008203649j:plain

作業最終形デモ 

https://burrn.work/honoka/top4.html

前回の記事でBootstrap Honokaに導入したドロワーメニューですが、白背景に黒文字と殺風景です。 

f:id:php-7com:20181008144531j:plain

これを格好良くします。

メニューの背景色を鮮やかな青色とし、文字を白色に変更します。 

前回の記事で./cssに設置したdrawer.min.cssを編集します。

実際は一行で記載されているのですが、分かり易いように改行しました。下のようにcolorとbackground-colorを変更します。

.drawer-nav{
 position:fixed;z-index:2;top:0;overflow:hidden;width:16.25rem;height:100%;
 /* color:#222;background-color:#fff; */
 color:#ffffff; background-color:#007bff;
}
.drawer-brand{
 font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;
 /* color:#222; */
 color:#fff;
}
.drawer-menu{margin:0;padding:0;list-style:none}
.drawer-menu-item{
 font-size:1rem;display:block;padding:.75rem;text-decoration:none;
 /* color:#222; */
 color:#fff;
}

下のように背景色と文字色が変更されたことを確認します。 

f:id:php-7com:20181008151712j:plain

作業最終形デモ 

https://burrn.work/honoka/top4.html

まだまだ殺風景ですので、ドロワーメニューに画像を挿入して、賑やかにします。

HTMLファイルのheader内に追加します。

<header role="banner">
 <button type="button" class="drawer-toggle drawer-hamburger">
  <span class="sr-only">toggle navigation</span>
  <span class="drawer-hamburger-icon"></span>
 </button>
 <nav class="drawer-nav" role="navigation">
  <ul class="drawer-menu">
   <li><a class="drawer-brand" href="#">Drawer</a></li>
   略
   <li><a class="drawer-menu-item" href="#">Wiki</a></li>
   <li><a class="drawer-menu-item drawer-img" href="#"><img src="./images/sub_image_1.jpg" alt="" class="img-responsive"></a></li>
   <li><a class="drawer-menu-item drawer-img" href="#"><img src="./images/sub_image_8.jpg" alt="" class="img-responsive"></a></li>
   <li style="height:500px"><span class="drawer-menu-item" >height:500px box</span></li>
   <li><span class="drawer-menu-item" >box end</span></li>
  </ul>
 </nav>
</header>

画像を単に挿入しただけでは、上下の余白が広過ぎ、左右の余白に余裕が無く、見た目が見苦しいので、drawer-imgというクラスを作成し、指定しています。

drawer.min.cssを編集します。

.drawer-img{ padding:0.25rem 1rem;}

f:id:php-7com:20181008203649j:plain

大分良くなりました!

作業最終形デモ 

https://burrn.work/honoka/top4.html

Bootstrap Honokaで左ドロワーメニュー

f:id:php-7com:20181008011841j:plain

お洒落なサイトやスマホサイトによくある左上とか右上にあるアイコンを押すと、シュワっとメニューが表れてくるドロワーメニューをBootstrap Honokaに導入してみました。下のようなメニューです。

作業最終形デモ

https://burrn.work/honoka/top3.html

f:id:php-7com:20181008011908j:plain

Drawer - Flexible drawer menu using jQuery, iScroll and CSS.

こちらからCSS、JSファイルを制作者に感謝して、ダウンロードさせていただきます。

ダウンロードしたdrawer-master.zipを解凍し、その中から、
drawer.js を ./jsフォルダに
drawer.min.csssandbox.cssを ./cssフォルダに入れました。

HTMLファイル
<head>~</head>内に下記CSSのリンクを貼りました。
<link rel="stylesheet" type="text/css" href="css/drawer.min.css">
<link rel="stylesheet" type="text/css" href="css/sandbox.css">

<body>に以下のクラスを指定しました。
<body class="drawer drawer--left">

<body>内下部にJSファイルのリンクを貼り、以下の記述をしました。

<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src="./js/drawer.js" charset="utf-8"></script>
<script>
 $(document).ready(function() {
  $('.drawer').drawer();
 });
</script>

HTMLに元々あった<header>~</header>を削除して、下記に入れ替えました。

<header role="banner">
 <button type="button" class="drawer-toggle drawer-hamburger">
  <span class="sr-only">toggle navigation</span>
  <span class="drawer-hamburger-icon"></span>
 </button>
 <nav class="drawer-nav" role="navigation">
  <ul class="drawer-menu">
   <li><a class="drawer-brand" href="#">Drawer</a></li>
   <li><a class="drawer-menu-item" href="#">Top</a></li>
   <li><a class="drawer-menu-item" href="#">Japanese Page</a></li>
   <li><a class="drawer-menu-item" href="#">English Page</a></li>
   <li><a class="drawer-menu-item" href="#">Download</a></li>
   <li><a class="drawer-menu-item" href="#">Wiki</a></li>
   <li style="height:500px"><span class="drawer-menu-item" >height:500px box</span></li>
   <li><span class="drawer-menu-item" >box end</span></li>
  </ul>
 </nav>
</header>

おーっ!ドロワーメニュー出来ました!

スマホで確認すると、h1要素とアイコンが重なっていましたので、@mediaでCSSの調整が必要でした。調整したところ、スマホでも良い感じであることを確認しました。

 

f:id:php-7com:20181008012053j:plain

作業最終形デモ

https://burrn.work/honoka/top3.html

Bootstrap Honoka でグリッドを5列に、グリッド(flex)に画像を挿入、上部メニューを固定

1.Bootstrap Honoka でグリッドを5列に

f:id:php-7com:20181006230644j:plain

作業最終形デモ

https://burrn.work/honoka/top2.html

Bootstrapのグリッドシステムは、横並びにする列として合計12となるように、2列とか3列とか4列とか制約があります。しかし、グリッドを5列にする必要がありました。5列にしてみました。前記事のHTMLスライダーに関する箇所の下に以下を追加しました。

<section class="clearfix">
 <div class="flex_container">
  <div class="flex_in card text-white bg-primary">
   1列目がここに入ります。1列目は文字数が普通です。
  </div>
  <div class="flex_in card bg-light">
   2列目がここに入ります。2列目は文字数が少し多いです。
  </div>
  <div class="flex_in card text-white bg-primary">
   3列目がここに入ります。3列目は文字数がいちばん多いです。3列目は文字数がいちばん多いです。
  </div>
  <div class="flex_in card bg-light">
   4列目がここに入ります。4列目は文字数が普通です。
  </div>
  <div class="flex_in card text-white bg-primary">
   5列目がここに入ります。5列目は文字数が普通です。
  </div>
 </div>
</section>

そして、bootstrap.cssに以下を追加しました。

 .flex_in { padding:10px; margin:5px; }

 一旦サーバにUPLOADしました。f:id:php-7com:20181006210025j:plain

 5列どころか、5行です。

5列にするために、flex_containerクラスに以下のCSSを記述します。幅を均一にするためにflex_inクラスにwidthを指定しました。 

.flex_container {
 display:flex;
 justify-content: space-between;
}
.flex_in {
 padding:10px; margin:5px;
 width:20%;
}

f:id:php-7com:20181006215239j:plain

Bootstrap honokaでグリッドが5列になりました。

ただし、スマホにすると5列では見れたものではありませんので、スマホの場合は、5列ではなく、5行となるようにCSSで調整しました。

2.グリッド(Flex)に画像を入れる

画像を用意し、HTMLファイルを以下の様に修正します。

<section class="clearfix">
 <div class="flex_container">
  <div class="flex_in card text-white bg-primary">
   <img src="./images/sub_image_1.jpg" alt="" class="img-responsive">
   1列目がここに入ります。1列目は文字数が普通です。
  </div>
  <div class="flex_in card bg-light">
   <img src="./images/sub_image_2.jpg" alt="" class="img-responsive">
   2列目がここに入ります。2列目は文字数が少し多いです。
  </div>
  ~略~
  <div class="flex_in card text-white bg-primary">
   <img src="./images/sub_image_5.jpg" alt="" class="img-responsive">
   5列目がここに入ります。5列目は文字数が普通です。
  </div>
 </div>
</section>

クラスにimg-responsiveを追加しないと画像の縦横比が維持されないようです。

bootstrap.cssに本家のCSSの以下の記述を追加しました。

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
 display: block;
 max-width: 100%;
 height: auto;
}

以下のように中々良い感じになりました。

f:id:php-7com:20181006223241j:plain

作業最終形デモ

https://burrn.work/honoka/top2.html

 3.上部メニューを固定

上部メニューを固定するのは、簡単でした。

HTMLファイルのheaderに sticky-top クラスを指定するだけで出来ました。

<header class="sticky-top">

 

Bootstrap Honoka でCSS余白調整、スライダー設置などしてTOP PAGEを作る

ホームページを作成するのに、今まで大よそ20年間、HTMLファイル、CSSファイルをゴリゴリとエディターで手書きしていたのですが、パソコンだけでなく、iPhoneAndroidに対応したレスポンシブホームページが常識になっている現在、ゼロベースでCSSファイルを作成するのは非常に効率が悪くなってきました。

作業の最終形デモ https://burrn.work/honoka/top1.html

これをきっかけにBootstrap Honokaでホームページを作ってみることにしました。
※Bootstrap Honokaとは、日本語も美しく表示できる Bootstrap テーマとの事です。
日本語の可読性を考慮したHonokaを使わせていただくことにしました。感謝感謝。

最初にBootstrap Honoka を自分のサーバに置いて、CSSを調整してみることに。

1.Bootstrap Honokaのダウンロード
https://github.com/windyakin/Honoka/releases/tag/v4.1.3
こちらからHTMLファイル、CSSファイルを一式含むbootstrap-honoka-4.1.3-dist.zipをダウンロードしました。こちらを解凍しました。

2.解凍したファイル・フォルダのUPLOAD

f:id:php-7com:20181006084906j:plain

bootstrap.htmlとcssフォルダ、jsフォルダをご自分のサーバにUPLOADしました。

※実際に必要なのは、htmlファイルとcss内のbootstrap.cssと、js内のbootstrap.min.js

ブラウザでbootstrap.htmlを確認しました。私は最初に下の余白が気になりました。

f:id:php-7com:20181006090548j:plain

Navbarsの上部の空いた幅が気になりました。Bootstrap Honokaはsectionとsectionの余白が大きいのでした。これを小さくしました。

bootstrap.html内の16行目当たり、margin-topを8から2に変更しました。

@media (min-width: 768px) {
.bs-docs-section {
 margin-top: 2em;
}

作業の最終形デモ https://burrn.work/honoka/top1.html

このように余白が縮まったことを確認しました。

bootstrap.htmlファイルを見ると気づきますが、HTMLファイル内にCSSの記述が有りましたので、./css/bootstrap.css内に入れました。

3.上部メニューの上部にh1要素やp要素などの文字を入れる。

Bootstrap Honokaの標準の上部メニューの更に上部にサイトのタイトルや文字を入れてみました。トップページに多いパターンにしたかったからです。

f:id:php-7com:20181006094816j:plain

最初は、<header>~</header>の下部にあった、<div class="page-header" id="banner">を<header>より上に貼り付けました。その際に、<div class="container">で挟みました。 f:id:php-7com:20181006112706j:plain

このように上部メニューバーの上に移動しました。これも余白が勿体無いように思いました。余白1,余白2、余白3を小さくするには、CSSの何処の箇所を調整するのか調べなければなりません。Google Chromeの検証で当たりをつけることができます。

f:id:php-7com:20181006114147j:plain

余白1、余白3を小さくするには、bootstrap.cssファイル内の「.mt-4,.my-4」と「.mb-4,.my-4」を調整すれば良いことが分かります。margin-top、margin-bottomの値を小さくしました。

.mt-4,.my-4 {  margin-top: 0.5rem !important;  }

.mb-4,.my-4 {    margin-bottom: 0.5rem !important;  }

同様に余白2も小さくするために、

.display-3 内を
 line-height: 1.0;
 margin-bottom:0 !important;
としました。

薄いグレーの上部メニューも幅が有り過ぎるように思いましたので、

.navbarのpaddingを調整しました。

f:id:php-7com:20181006124435j:plain

4.h1要素の右に キャッチフレーズや問合せ先などを入れる

キャッチフレーズやお問い合わせはコチラのような文字を上部メニューの右上に配置します。

f:id:php-7com:20181006131348j:plain

htmlファイル内の<p class="lead">~</p>下に、<div>要素を二つ入れました。

bootstrap.css ファイルの最下部に以下を追記しました。

.header-right-1{
 position: absolute;
 right: 15px;
 top: 15px;
 font-size: 0.85rem;
 padding: 5px 15px;
 border: solid 1px #D6D6D6;
}
.header-right-2{
 position: absolute;
 right: 15px;
 top: 50px;
 font-size: 0.95rem;
 padding: 5px 5px;
}

f:id:php-7com:20181006132218j:plain

上部メニューの右上に配置されていることを確認しました。

作業の最終形デモ https://burrn.work/honoka/top1.html

5.スマホ用にCSS調整

Google Chromeデベロッパーツールでスマホでの状態を確認すると、酷いことになっています。h1要素に他のdiv要素が重なっています。leadクラスも二行になっていて格好良くないです。CSSの調整が必要です。

f:id:php-7com:20181006140540j:plain

p の「Bootstrap Honokaでスマートなホームページを作成」leadクラスがスマホになっても一行になるように、ブラウザ幅が768pxよりも小さくなった場合に、自動的に文字の大きさを小さくするようにします。

.lead {
 font-size: 0.85rem;
 font-weight: 400;
 margin-bottom:5px;
}
@media (min-width: 768px) {
 .lead {
  font-size: 1.15rem;
 }
}

div の「Boostrapを使ったサイト構築に自信があります」がスマホの場合、非表示になるように、HTMLファイルのdiv要素に<div class="header-right-1 hidden-sm">のように、hidden-smクラスを追加します。

CSSファイルに以下のように追記します。

@media (max-width: 767px) {
  .hidden-sm { display: none !important; }
}

divの「お問合せはコチラまで!」がスマホで閲覧しても、他の要素に重ならないようにCSSを以下のように調整します。

.header-right-2{
 position: absolute;
 right: 15px;
 top: 50px;
 font-size: 0.95rem;
 padding: 5px 5px;
}
@media (max-width: 767px) {
 .header-right-2{
  position: initial;
  right: initial;
  top: initial;
  font-size: 0.95rem;
  padding: 0 5px 10px;
  text-align:right;
 }
}

以下のように改善されました。

f:id:php-7com:20181006142335j:plain

6.スライダーの設置

上部メニューの下にsliderを配置してみます。

本家bootstrap 

こちらを参考にして、<div class="container">の下部に、スライダーに相当する記述をします。

f:id:php-7com:20181006155439j:plain

1800×532pxの画像を3枚用意しました。あっけなくスライダー設置できました。

f:id:php-7com:20181006155838j:plain

 恰好良くなりました!

作業の最終形デモ https://burrn.work/honoka/top1.html

 

 

レッド・ツェッペリン III 再聴

レッド・ツェッペリン IIIは、1971年に発売されたアルバムです。
私が生まれる前に発表されています。
ブックオフで760円で販売されていましたので、購入しました。
20年振りに聴いてみました。

移民の歌 - Immigrant Song
アアアーアー こんなメロディ どこから浮かんだのでしょう?
昨日日本人がノーベル賞を受賞しましたが、ロック市場におけるノーベル賞に匹敵する雄たけびから歌メロは始まります。
エフシャープを刻むだけのリフに乗っかるプラントの雄たけびにまずノックアウトされます。
バイキングがズンズン 異国に侵入するようなタイトル通り。
僕は、今も外国に行くたびに空港でImmigrantの文字を見るたびに、プラントの「アアアーアー」が頭の中に響きます。
あわせて、沖縄民謡の「あっちゃめー小」も同じような印象を受けます。沖縄民謡についても、後日語ってみたいと思います。
みんなが知っているハードロックのスタンダード。
ライブでは、ギターソロも挟んで、長めに演奏されていますね。

フレンズ - Friends
友達という曲ですが、ただならむ友達というか、決して平穏ではない、多少アラビックな曲です。
ドラムではなく、打楽器はボンゴでしょうか?
カシミールにつながるような中近東的な感じです。
エンディングは不気味な低音のメロディーが続き、「祭典の日」が始まります。

祭典の日 - Celebration Day
Bメロでもあるサビはもろにメジャーキーでビートルズ的な感じもします。
Aメロは「パラパラパララン」というギターリフが個性的です。
2007年の再結成ツアーの名称が「Celebration Day」でしたね。

貴方を愛しつづけて - Since I've Been Loving You
ペイジのギターソロが美しいマイナースローブルース。
たたたたたーーーーーんのブルースフレーズから入った瞬間、フリートウッドマック「ブラック・マジック・ウーマン」を彷彿とするが、ブラックマジックは曲を通して均一なテンションなのですが、当「あなたを愛し続けて」は、静と動の格差がとても著しい。
バックを沿えるジョーンズのハモンドオルガンも良い。
ペイジとプラントのギターとボーカルの応酬が凄まじく、静けさと激しさの共存したブルースがプログレに昇華したような曲です。
この手の曲はアフリカ系アメリカ人のブルースが元ネタなんでしょうが、完全にZeppelinの最高潮時の録音だからか、とんでもないテンションになっています。
フリートウッドマックやサンタナが弾いてもそりゃ美しいでしょうが、
このマイナーペンタトニックでブルースぽくもありますが、むせび泣くような悲しくもあり、美しくも有り、せつなくも有り、哀愁も有りです。
ペイジはパープルのブラックモアとは異なり、フレーズをカチッカチッとまとめるのではなく、抽象的な感じで混沌としたイメージを抱かせます。
ドラムが最後半、クライマックスを迎え、曲は昇天します。
「朝7時から夜11時まで働いている」というような歌詞から始まるんですが、ツアーに明け暮れて、プラントは疲れ切っていたのでしょうか?
バンドは大成功、一気にスターダムに上ってしまったが、精神のハイテンションはいつまでも維持できるものではない。ハイテンションのクライマックスの産物が「移民の歌」と「貴方を愛し続けて」だったのでしょうね。
当曲を境にこのアルバムの後続する曲は、片田舎でトラディショナルソングを奏でるアルバムへと移行してしまいます(あくまで私の解釈です)。

ギャロウズ・ポウル - Gallows Pole
意味は良くないようですが、軽快な曲です。
バンジョーが入っているからでしょうか?トラディショナルな印象になります。

タンジェリン - Tangerine
「天国への階段」の前章のようなアルペジオから始まります。このアルペジオが美しい。ギターとユニゾンするような歌メロから始まります。
でも一気に明るい曲になります。期待するような劇的な展開は残念ながら有りません。
Zeppelinは、1,2とツアーで疲弊しきったようです。その反動からか、癒しのようなイメージです。

ザッツ・ザ・ウェイ - That's the Way
これも田舎にこもってアコギで作ったそんな感じです。
正直 良いですが、まだ私も若いからか、あるいはそんなに人生経験が無いからか、このフォークっぽさが物足らない。

スノウドニアの小屋 - Bron-Y-Aur Stomp
これもペイジのスコットランド民謡が混じったかのようなアコギからはじまる歌。
スコットランドの祭りかなんかで踊り出しそうなイメージだ。
ダダだだー というところが、正に衆人一緒に踊っていそう。
良いには良いが 当時のハードロックを期待したファからすれば、ショックだったでしょうね。
ペイジがエレキを捨てて、3曲も続けてアコギ弾かれたら。
最近は、Zeppelinはハードロックではなく、もっと広義にビートルズでも聴くかのように聞くべきと思っています。

ハッツ・オフ・トゥ・ロイ・ハーパー - Hats off to <Roy> Harper
これもまた、エレキではないです。ブルースが色濃く、スライドギターもちりばめられています。
ロバートジョンソンのような、感じです。

はじめて聞いたのは20数年前だったと思いますが、移民の歌には、ノックアウトされましたが、当時は非常に退屈な作品でした。

当時のリアルタイムファンも困惑したでしょうね?
しかし、次作レッド・ツェッペリン IV によって、その不安は完全に払拭されるのです。
ロックロール、ブラックドッグ、天国への階段 という誰もが歴史を変えることができないスタンダードが発表されたのですから。
ではでは。

別件

そういえば、ジョンサイクスが結成した「ブルーマーダー」のベーシスト「トニーフランクリン」はZeppelin解散後にジミーペイジが結成した「ザ・ファーム」で若くして抜擢されたベーシストだったんですね?「ブルーマーダー」がスーパーバンドして注目された訳だ。