こんにちは、たねやつです。
前回の記事ではapache2のインストールとHello Worldの表示でRaspberry Pi内のHTML文書を外部のブラウザから見ることができましたね！
今回はもう少し実用的(?)なお気に入りリストを作成します。ブラウザやPC/スマホ関係なく同じお気に入りリストを参照できる空間をRaspberry Piに作ります。
CSSにはBootstrapというフレームワークを使用していきます。難しそうに聞こえるかもしれませんが、HTML文書に一行追加するだけで簡単に使い始めることができます！
前の記事
この記事でできること
こんな感じの静的なお気に入りリストを作成します。BootstrapというCSSフレームワークを使用して、手軽にいい感じの一覧を作成することができます。
Bootstrapについて
今回の作成するお気に入りリストはBootstrapというCSSフレームワークを使用して作成します。自分でCSSを書いてデザインしてもいいのですが、フレームワークやライブラリを使用するほうが手軽に見栄えのいい・統一感のあるページを作成することができます。
残念ながら依然紹介したProgateではBootstrapは学ぶことはできないようです。が初歩的な部分はそこまで難しくないと個人的には思うので一度以下のサイトに目を通すと大体は理解できるはずです🤔
私個人では別のBlumaというものをよく使用しています。こちらのほうがマイナーですがより簡単にレスポンシブ対応できるかなあという感じです。
手順
それでは作成していきましょう。今回のページは前回のhello-world.htmlとは別のものとして作成を進めていきます。
新しいfavorite.htmlというファイルを作成する
前回と同じように、/var/www/html/内にファイルを作成していきます。ファイル名はfavorite.htmlとして置きましょう。
$ cd /var/www/html/
$ vim favorite.html
HTML文書の基本形
hello-world.htmlはとても簡素な記述のページでしたが、今回はもう少しちゃんとした構造で作成していきます。
まずは以下のようなソースを追記します。何を参考にすればいいかいつも忘れてしまうのですが、これはVSCodeのhtmlで補完できる内容に少し手を加えたものです。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style></style> </head> <body> </body> </html>
<meta>タグがいくつか並んでいますが、文字コードや画面の幅や拡大倍率を設定しています。<body>...</body>タグは前回のソースにもありましたね！ここに画面上に表示したい内容を書いていきます。
<title>...</title>内に設定した値がページのタイトルとなります。ブラウザのタブに表示される名前となります。何を書いても大丈夫ですが、Favorite Listとでも入れておきましょう。
Bootstrapのソースを読み込む
body内を書き出す前にもう一つheader内に追加しておきたい処理があります。上記の状態ではまだBootstrapのソースは読み込めていないので設定します。
<style></style>タグの上に以下の一行を追加します。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
ローカル内のファイルを読み込むのではなくCDN配信されているものを使います。「ファイルをダウンロードして、ディレクトリに配置して、…」とするよりもかなり手軽に実装することができますね😎
読み込みできているかの確認は後回しにします。
一覧を作成する
それではbody内を追記していきます。お気に入りリストを作成したいので、タイトルと、リンクの一覧で<table>タグで作成するのかな？とピンときている方もいるかもしれません。
しかし、Bootstrapではdivタグとクラスで作成していくlist-groupという一覧が一般的なようです。
リンク先のLinks and buttonsという部分にいい感じのタイトル付きの一覧がありますね。これを使います。
また、Bootstrapのグリッドシステムにはさらにcolクラス、rowクラス、containerクラスで包んであげる必要があります。「なんのこっちゃ？」という方は以下のソースをとりあえず見て、body内に書いてください。
<div class="container"> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="list-group"> <p class="list-group-item active">リスト1</p> <a href="#" class="list-group-item list-group-item-action">リンク1-1</a> <a href="#" class="list-group-item list-group-item-action">リンク1-2</a> <a href="#" class="list-group-item list-group-item-action">リンク1-3</a> </div> </div> <div class="col-sm-12 col-md-6"> <div class="list-group"> <p class="list-group-item active">リスト2</p> <a href="#" class="list-group-item list-group-item-action">リンク2-1</a> <a href="#" class="list-group-item list-group-item-action">リンク2-2</a> <a href="#" class="list-group-item list-group-item-action">リンク2-3</a> </div> </div> </div> </div>
これを保存してhttp://[Raspberry PiのIPアドレス]/favorite.htmlにアクセスすると以下のような感じに表示されます。
リストを包んでいるdivのクラスをcol-sm-12 col-md-6と設定することで、「画面の大きさが中くらい位以上の時は画面の半分の大きさの一覧を2個並べて表示、それ以下のときは画面の横幅いっぱいの一覧を1つ表示」という感じにできます。Bootstrapでは画面を縦に12分割した単位を使用します。
試しにブラウザの横幅を小さくしていくと、一覧の横幅が徐々に小さくなっていき、ある地点から一覧が縦並びにになります。これがレスポンシブデザインというもので端末の画面の大きさに合わせて、ページの要素の大きさなどを変化させるデザインです。PC用、スマホ用とソースを分けて作成する必要がないので開発がとてもらくになりますね！
containerクラスが無いと画面横の余白がなかったり、rowがないとうまく横に並ばなかったりします。
一覧の間隔などを直したいところもあるかもしれませんが、とりあえず細かなデザインは後回しです。
URL、リンク名を設定する
あとは好きなように一覧を作成するだけです。一覧内の各行のhref=""の部分にリンク先のURLを入れ、<a></a>の間に表示名を設定します。
例えば、以下のようなソースでは、
<div class="col-sm-12 col-md-6"> <div class="list-group"> <p class="list-group-item active">検索エンジン</p> <a href="https://google.com" class="list-group-item">Google</a> <a href="https://www.yahoo.co.jp/" class="list-group-item">Yahoo! Japan</a> <a href="https://www.bing.com/" class="list-group-item">Bing</a> <a href="https://duckduckgo.com/" class="list-group-item">DuckDuckGo</a> </div> </div> <div class="col-sm-12 col-md-6"> <div class="list-group"> <p class="list-group-item active">ECサイト</p> <a href="https://www.amazon.co.jp/" class="list-group-item">Amazon JP</a> <a href="https://www.amazon.com/" class="list-group-item">Amazon US</a> <a href="https://www.aliexpress.com/" class="list-group-item">AliExpress</a> <a href="https://www.gearbest.com/" class="list-group-item">GearBest</a> </div> </div>
こんな感じに表示されます。
同じようにコピペして下に追記していけば、一覧を追加していくことができます。
上部にタイトルを設定する
このままだと何のページかよくわからないので上部にナビゲーションバーのようなものを設置して、タイトルを表示しておきましょう。こんな感じです。
ソースはこんな感じです。Bootstrapでは上部のナビゲーションバーも簡単に実装できます。 これが自分で実装しなければならないとなると結構大変です。。。😣
<body> <nav class="navbar navbar-dark bg-dark"> <div class="container"> <p class="navbar-brand">お気に入りリスト</p> </div> </nav> <div class="container"> <!-- 先ほどの一覧のソース --> </div>
ボディ直下で、先ほどの一覧の集まりのcontainerの外に追記します。中に書いてしまうと画面の横全域に広がるバーのようになってくれません。
ナビゲーションバー内には別にcontainerクラスを用意してあげます。
ちょっとCSSを修正して完成
これでほぼほぼ完成しているのですが、スマホなどで表示したときに一覧が縦になる場合に、一覧同士がくっついて表示されてしまいます。これを解消するためにCSSを追加します。
header内にからのstyleタグが用意されているので、以下のようにしてクラスを追加します。
<style> .list-group-margin { margin-top: 30px; } </style>
そして、各一覧にlist-group-marginクラスを追加します。
<div class="col-sm-12 col-md-6"> <div class="list-group list-group-margin"> <!-- ... --> </div> </div>
これで各一覧の上部に余白を設定することができました！
最終的なコード
今回はここまでとなります。最終的にこんな感じのコードになりました。
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Favorite List</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <style> .list-group-margin { margin-top: 30px; } </style> </head> <body> <nav class="navbar navbar-dark bg-dark"> <div class="container"> <p class="navbar-brand">お気に入りリスト</p> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-6"> <div class="list-group list-group-margin"> <p class="list-group-item active">検索エンジン</p> <a href="https://google.com" class="list-group-item">Google</a> <a href="https://www.yahoo.co.jp/" class="list-group-item">Yahoo! Japan</a> <a href="https://www.bing.com/" class="list-group-item">Bing</a> <a href="https://duckduckgo.com/" class="list-group-item">DuckDuckGo</a> </div> </div> <div class="col-sm-12 col-md-6"> <div class="list-group list-group-margin"> <p class="list-group-item active">ECサイト</p> <a href="https://www.amazon.co.jp/" class="list-group-item">Amazon JP</a> <a href="https://www.amazon.com/" class="list-group-item">Amazon US</a> <a href="https://www.aliexpress.com/" class="list-group-item">AliExpress</a> <a href="https://www.gearbest.com/" class="list-group-item">GearBest</a> </div> </div> <div class="col-sm-12 col-md-6"> <div class="list-group list-group-margin"> <p class="list-group-item active">はてなブックマーク</p> <a href="http://b.hatena.ne.jp/hotentry/all" class="list-group-item">総合</a> <a href="http://b.hatena.ne.jp/hotentry/it" class="list-group-item">テクノロジー - 人気</a> <a href="http://b.hatena.ne.jp/entrylist/it" class="list-group-item">テクノロジー - 新着</a> </div> </div> </div> </div> </body> </html>
最後に
前回と比べてちょっとだけ(?)使えそうなページになりましたね！外部公開していないので自宅のWi-Fi内でしか使うことができませんですが、複数端末で同じブックマークを共有することができます。
次回記事ではRSSリーダーを作成していきます。これは個人的には結構よく使っています。
次の記事
参考
以下のサイトの情報を引用・参考にしました。
