ubuntu Archives - ページ 2 / 2 - プログラムを楽しもう

Ubuntuの環境で、Bootstrapをインストールしてみます

cd
mkdir bootstrap
cd bootstrap
wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
unzip bootstrap-3.3.6-dist.zip
mv bootstrap-3.3.6-dist/* ./
cd
mkdir bootstrap
cd bootstrap
wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
unzip bootstrap-3.3.6-dist.zip
mv bootstrap-3.3.6-dist/* ./
cat <<EOF > header.txt
<html>
 <head>
  <meta charset="utf-8"></meta>
  <link href="css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
EOF

cat <<EOF > body.txt
  <div class="row">
   <div class="col-sm-3" style="background: red;">Sidebar</div>
   <div class="col-sm-1" style="background: gray;">Sidebar</div>
   <div class="col-sm-8" style="background: green;">Sidebar
    <div class="row">
     <div class="col-sm-2" style="background: yellow;">Sidebar</div>
     <div class="col-sm-3" style="background: violet;">Sidebar</div>
     <div class="col-sm-3" style="background: blue;">Sidebar</div>
    </div>
   </div>
  </div>
EOF

cat <<EOF > footer.txt
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="js/bootstrap.min.js" type="text/javascript"></script>
 </body>
</html>
EOF

cat header.txt  > index.html
cat body.txt   >> index.html
cat footer.txt >> index.html
firefox         ./index.html &
gedit           ./index.html

mkdir bootstrap

cd bootstrap

wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip

unzip bootstrap-3.3.6-dist.zip

mv bootstrap-3.3.6-dist/* ./

mkdir bootstrap

cd bootstrap

wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip

unzip bootstrap-3.3.6-dist.zip

mv bootstrap-3.3.6-dist/* ./

cat <<EOF > header.txt

<html>

<head>

</head>

<body>

EOF

cat <<EOF > body.txt

<div class="col-sm-3" style="background: red;">Sidebar</div>

<div class="col-sm-1" style="background: gray;">Sidebar</div>

<div class="col-sm-8" style="background: green;">Sidebar

<div class="col-sm-2" style="background: yellow;">Sidebar</div>

<div class="col-sm-3" style="background: violet;">Sidebar</div>

<div class="col-sm-3" style="background: blue;">Sidebar</div>

</div>

EOF

cat <<EOF > footer.txt

</body>

</html>

EOF

cat header.txt > index.html

cat body.txt >> index.html

cat footer.txt >> index.html

firefox ./index.html &

gedit ./index.html

■pills
ナビゲーション（錠剤：pills）

下記のような、を表示してみます。

１，を実施の後に、行って下さい。
http://getbootstrap.com/components/#nav-pills

cat <<EOF      > body.txt
  <ul class="nav nav-pills">
   <li role="presentation" class="active"><a href="#">Home</a></li>
   <li role="presentation"><a href="#">Profile</a></li>
   <li role="presentation"><a href="#">Messages</a></li>
  </ul>
EOF

cat header.txt  > pills.html
cat body.txt   >> pills.html
cat footer.txt >> pills.html
firefox         ./pills.html &
gedit           ./pills.html

cat <<EOF > body.txt

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

</ul>

EOF

cat header.txt > pills.html

cat body.txt >> pills.html

cat footer.txt >> pills.html

firefox ./pills.html &

gedit ./pills.html

■tabs（タブ）
http://getbootstrap.com/components/#nav-tabs

cat <<EOF      > body.txt
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
EOF

cat header.txt  > tabs.html
cat body.txt   >> tabs.html
cat footer.txt >> tabs.html
firefox         ./tabs.html &
gedit           ./tabs.html

cat <<EOF > body.txt

<li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

</ul>

EOF

cat header.txt > tabs.html

cat body.txt >> tabs.html

cat footer.txt >> tabs.html

firefox ./tabs.html &

gedit ./tabs.html

■Breadcrumbs（パンくず）
http://getbootstrap.com/components/#breadcrumbs

cat <<EOF      > body.txt
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
EOF

cat header.txt  > Breadcrumbs.html
cat body.txt   >> Breadcrumbs.html
cat footer.txt >> Breadcrumbs.html
firefox         ./Breadcrumbs.html &
gedit           ./Breadcrumbs.html

cat <<EOF > body.txt

<li><a href="#">Library</a></li>

</ol>

EOF

cat header.txt > Breadcrumbs.html

cat body.txt >> Breadcrumbs.html

cat footer.txt >> Breadcrumbs.html

firefox ./Breadcrumbs.html &

gedit ./Breadcrumbs.html

■pagination（ページ付け）
http://getbootstrap.com/components/#pagination-default

cat <<EOF      > body.txt
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
EOF

cat header.txt  > pagination.html
cat body.txt   >> pagination.html
cat footer.txt >> pagination.html
firefox         ./pagination.html &
gedit           ./pagination.html

cat <<EOF > body.txt

<nav>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

EOF

cat header.txt > pagination.html

cat body.txt >> pagination.html

cat footer.txt >> pagination.html

firefox ./pagination.html &

gedit ./pagination.html

■Pager（ページャ）
http://getbootstrap.com/components/#default-example

cat <<EOF      > body.txt
<nav>
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>
EOF

cat header.txt  > pager.html
cat body.txt   >> pager.html
cat footer.txt >> pager.html
firefox         ./pager.html &
gedit           ./pager.html

cat <<EOF > body.txt

<nav>

<li><a href="#">Previous</a></li>

</ul>

</nav>

EOF

cat header.txt > pager.html

cat body.txt >> pager.html

cat footer.txt >> pager.html

firefox ./pager.html &

gedit ./pager.html

■Aligned links（並べたリンク）
http://getbootstrap.com/components/#aligned-links

cat <<EOF      > body.txt
<nav>
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
  </ul>
</nav>
EOF

cat header.txt  > links.html
cat body.txt   >> links.html
cat footer.txt >> links.html
firefox         ./links.html &
gedit           ./links.html

cat <<EOF > body.txt

<nav>

<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>

<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>

</ul>

</nav>

EOF

cat header.txt > links.html

cat body.txt >> links.html

cat footer.txt >> links.html

firefox ./links.html &

gedit ./links.html

■Available variations（各種のラベル）
http://getbootstrap.com/components/#available-variations

cat <<EOF      > body.txt
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
EOF
cat header.txt  > available.html
cat body.txt   >> available.html
cat footer.txt >> available.html
firefox         ./available.html &
gedit           ./available.html

cat <<EOF > body.txt

<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>

<span class="label label-success">Success</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

EOF

cat header.txt > available.html

cat body.txt >> available.html

cat footer.txt >> available.html

firefox ./available.html &

gedit ./available.html

■Badges（バッジ、印）
http://getbootstrap.com/components/#badges

cat <<EOF      > body.txt
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>
EOF

cat header.txt  > badges.html
cat body.txt   >> badges.html
cat footer.txt >> badges.html
firefox         ./badges.html &
gedit           ./badges.html

cat <<EOF > body.txt

<a href="#">Inbox <span class="badge">42</span></a>

Messages <span class="badge">4</span>

</button>

EOF

cat header.txt > badges.html

cat body.txt >> badges.html

cat footer.txt >> badges.html

firefox ./badges.html &

gedit ./badges.html

前々回

apache+passenger+sinatraにて、
環境を構築しましたが、

コンテンツの置き場所が
/root/
で、権限がo+x
のままだと、プログラムの作成、編集が、面倒です。

また、
/root/の権限がそのままというのも、
少々不安な感じがします。

このため、コンテンツの置き場所を

/home/(user)/sina

に変更するしてみましょう

ユーザ権限にて

cd
pwd
・結果表示
/home/(user)

cd
mkdir sina
cd sina
echo "#coding: utf-8"    >app.rb
echo "require 'sinatra'" >>app.rb
echo "get '/' do"        >>app.rb
echo "'Hello World'"     >>app.rb
echo "end"               >>app.rb
echo "require File.expand_path(File.dirname(__FILE__)) + '/app'"  >config.ru
echo "run Sinatra::Application"                                   >>config.ru
mkdir public
mkdir tmp
touch tmp/always_restart.txt

/etc/httpd/conf/httpd.confを変更

su
権限にて
ファイル
/etc/httpd/conf/httpd.conf

DocumentRoot /root/sina/public
の部分を
DocumentRoot /home/(user)/sina/public
に変更

vi /etc/httpd/conf/httpd.conf

/etc/rc.d/init.d/httpd restart
curl 'http://localhost/'

しかし、エラーになる
エラーの内容を確認
apacheのエラーログの場所を探す

find / -name error_log
・結果表示
/var/log/httpd/error_log

エラーの内容を確認する

cat /var/log/httpd/error_log

・内容表示
：
Could not find rake-11.2.2 in any of the sources (Bundler::GemNotFound)
：

/home/(user)/ap/public
にも、Bundlerなどが必要・・・・・
．Bundler（隠しファイル）
なども、必要なので
一括複写する

cp -R /root/sina /home/(user)/sina

はじめから、こうすればよかった。。。

apacheの再起動

/etc/rc.d/init.d/httpd restart

確認

curl 'http://localhost/'

うまくいった。

suで、複写したので、
home側での権限などが心配なので、
ユーザ権限にもどって、作りなおしてみる

$cd
$cp -R /home/(user)/sina /home/(user)/sinatra

/etc/httpd/conf/httpd.conf
の
DocumentRoot /home/(user)/sina/public
を
DocumentRoot /home/(user)/sinatra/public
に変更し、apache再起動
/etc/rc.d/init.d/httpd restart
表示確認
curl ‘http://localhost/’

うまくいった。

プログラムを楽しもう

実際にプログラムを作り、スキルを磨いていきましょう。

カテゴリー別アーカイブ: ubuntu

UbuntuでBootstrapを試してみる

passenger+sinatraで、Documenの置き場所をhomeに変える

ubuntuでファイラの操作

ubuntu xamppのコントロールパネルの起動