月別: 2017年9月

bootstrap で画像とメッセージを表示　その２

bootstrap で画像とメッセージを表示　その２

せっかくなので、レスポンシブ対応の画像も追加
レスポンシブ対応するには
class=”img-fluid” を設定すればOK

今回は

1
<img src="image1.jpg" alt="" class="img-fluid">

としてみた

古い情報だと
.img-responsive　と書かれているので注意
変更点については
https://getbootstrap.com/docs/4.0/migration/#images
に記載あり

次にグリッドシステムで配置を調整
emmet で書くと

1
div.container>div.row>div.col-md-8.col-md-offset-2

これをtab で展開すると

1
2
3
4
5
6
7
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
       
    </div>
  </div>
</div>

となるので、ここへ .media 部分のコードを移動

これで

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="media">
      <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        メッセージ
 
        <img src="image1.jpg" alt="" class="img-fluid">
        <div class="media">
        <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
        <div class="media-body">
          <h5 class="mt-0">Media heading　その２</h5>
          メッセージ その２
        </div>
      </div>
    </div>
    </div>
    </div>
  </div>
</div>

というかんじに

これで余白が調整され、中央にコンテンツ表示に

mbs4

次に画面上部にナビゲーションバーの設置

1
2
3
4
5
6
<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

を追加

これで上部に検索欄とボタンが設置される

mbs5

今回のソースは

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<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">
  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>Document</title>
</head>
<body>
 
  <nav class="navbar navbar-light bg-light">
    <form class="form-inline">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </nav>
 
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
 
         
        <div class="media">
        <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
        <div class="media-body">
          <h5 class="mt-0">Media heading</h5>
          メッセージ
 
          <img src="image1.jpg" alt="" class="img-fluid">
          <div class="media">
          <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
          <div class="media-body">
            <h5 class="mt-0">Media heading　その２</h5>
            メッセージ その２
          </div>
        </div>
      </div>
      </div>
      </div>
    </div>
  </div>
 
 
 
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
</body>
</html>

bootstrap で画像とメッセージの表示

bootstrap で画像とメッセージの表示

Atom エディタを使い
左に画像、右に文章というtwitter のようなかんじで表示

media.html というファイルを作成し

1
html:5

でtab で展開すると

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
   
</body>
</html>

というコードが一気に作成できる

次にbootstrap の css を適用するために

1
2
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

を head の中へ記述

また javascript や jquery 関連を読み込む必要があるので

1
2
3
4
5
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

を body の閉じタグの前に記述

次に画像と文章の表示
https://getbootstrap.com/docs/4.0/layout/media-object/
にサンプルコードがリファレンスとして載っているので
これを参考に貼り付け

1
2
3
4
5
6
7
  <div class="media">
  <img class="d-flex mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>

のままだと長い上に画像がないので
src=”…” の部分には画像ファイルを指定し
文章は簡単なものに変更

せっかくなので画像を丸くしておきたいので

1
class=" rounded-circle"

を画像に指定

元の大きさだと大きすぎなので

1
width="64" height="64"

で縦横を調整

表示エリアを

1
2
<div class="media">
</div>

で決めて、その中に記述する

今回のソースは

1
2
3
4
5
6
7
  <div class="media">
  <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    メッセージ
  </div>
</div>

というかんじ

これで左に画像、右に文章になる

mbs

そして

1
2
<div class="media-body">
</div>

が１つのメディア単位になっている
つまり、 media-body の中に media を用意すると入れ子になる

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="media">
  <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    メッセージ
    <div class="media">
    <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
    <div class="media-body">
      <h5 class="mt-0">Media heading　その２</h5>
      メッセージ その２
    </div>
  </div>
</div>

とすると入れ子になる

mbs2

とりあえず全体のソースとしては

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<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">
  <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <title>Document</title>
</head>
<body>
  <div class="media">
  <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    メッセージ
    <div class="media">
    <img class="d-flex mr-3  rounded-circle" src="image2.jpeg" alt="Generic placeholder image" width="64" height="64">
    <div class="media-body">
      <h5 class="mt-0">Media heading　その２</h5>
      メッセージ その２
    </div>
  </div>
</div>
 
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
</body>
</html>

というかんじ

Gitlab のインストール

Gitlab のインストール

2年ぶりに Gitlab のインストール
いろいろと変更がありそうなので
GitLab Installation

を参考にインストール

1
sudo apt-get install -y curl openssh-server ca-certificates

次にメールサーバーのインストール

1
sudo apt-get install -y postfix

を実行すると確認画面がでるので、tabを押して
了解で Enter

2017gitlab

次に、どの形式にするか選択がでるけど
ドキュメントには
During Postfix installation a configuration screen may appear. Select ‘Internet Site’ and press enter. Use your server’s external DNS for ‘mail name’ and press enter. If additional screens appear, continue to press enter to accept the defaults.

意味は
Postfixのインストール中に、設定画面が表示されることがあります。 [インターネットサイト]を選択し、Enterキーを押します。サーバーの外部DNSを「メール名」に使用し、Enterキーを押します。追加の画面が表示された場合は、enterを押してデフォルトを受け入れます。

となっているので
インターネット上サイトのまま
tabを押して了解で Enter

2017gitlab2

次にメール名だけど、ローカルのみの予定なので
今回はそのまま tab を押して 了解で
Enter

2017gitlab3

次に Gitlab リポジトリを追加するので

1
curl -sS https://packages.gitlab.com/install/repositories/gitlab/gitlab-ce/script.deb.sh | sudo bash

次に

1
sudo apt-get install gitlab-ce

で Gitlab インストール

インストールされると

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gitlab: Thank you for installing GitLab!
gitlab: To configure and start GitLab, RUN THE FOLLOWING COMMAND:
 
sudo gitlab-ctl reconfigure
 
gitlab: GitLab should be reachable at http://snowpool-Prime-Series
gitlab: Otherwise configure GitLab for your system by editing /etc/gitlab/gitlab.rb file
gitlab: And running reconfigure again.
gitlab:
gitlab: For a comprehensive list of configuration options please see the Omnibus GitLab readme
gitlab: https://gitlab.com/gitlab-org/omnibus-gitlab/blob/master/README.md
gitlab:
It looks like GitLab has not been configured yet; skipping the upgrade script.
W: Duplicate sources.list entry http://download.opensuse.org/repositories/isv:/ownCloud:/community/xUbuntu_14.04/  Packages (/var/lib/apt/lists/download.opensuse.org_repositories_isv:_ownCloud:_community_xUbuntu%5f14.04_Packages)

と表示される

Gitlab の初期設定と開始には

1
sudo gitlab-ctl reconfigure

を実行

これで
http://snowpool-prime-series:8080/
だとアクセスできず、
http://localhost:8080
ではレイアウトが崩れる

2017gitlab4

このため

1
sudo vim /etc/gitlab/gitlab.rb

で設定ファイルを開き

１３行目の

を

1
external_url 'http://１９２．１６８．１．２０６：８０００'

というように変更し

1
sudo gitlab-ctl reconfigure

を実行し設定を反映

これで再度アクセスすると無事にCSSが反映されていた
2017gitlab5