aozi’s blog

あおじが適当に書くブログです

<!doctype html><!doctype html><html lang="ja"><head>  <link rel="stylesheet" type="text/css" href="css/1.css">  <link rel="stylesheet" type="text/css" href="css/menu.css">  <link rel="stylesheet" type="text/css" href="css/popup.css">  <meta charset="UTF-8">  <title>花屋</title></head><body>  <input type="checkbox" class="check" id="checked">  <label class="menu-btn" for="checked">      <span class="bar top"></span>      <span class="bar middle"></span>      <span class="bar bottom"></span>      <span class="menu-btn__text">MENU</span>  </label>  <label class="close-menu" for="checked"></label>  <nav class="drawer-menu">      <ul>          <li><a href="#">商品リスト</a></li>          <li><a href="#">会員メニュー</a></li>          <li><a href="#">連絡</a></li>          <li><a href="#">ログイン</a></li>      </ul>  </nav>
<!-- メインコンテンツ --><div class="contents">

    <!-- ここはコンテンツ -->    <header id="header">
</header>
    <center id="main"><h1 class="title"><h1>    <br><br><br><br><br>B</h1></center>    <center id="side"><br><br><br><br><br><br><br><br><br>B</center>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <center>

  <div class="box_1">    <div class="mask">  <div class="caption"><label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>      </div>  </div></div>
<div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div><div class="box_1">  <div class="mask">    <div class="caption">
<label for="trigger" class="open_button"><p class="preview">It's fresh !</p></label>    </div>  </div></div>


<div class="modal_wrap"><input id="trigger" type="checkbox">    <div class="modal_overlay">        <label for="trigger" class="modal_trigger"></label>        <div class="modal_content">            <label for="trigger" class="close_button">✖️</label>            <h2>Califlower</h2>            <p>aaa</p><a href="#" class="btn-square">カートに入れる</a>
        </div>    </div></div></center>

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"></div></body></html>

--------------------1.css

.title{.title{  position: fixed;  width : calc(100% / 1) ;}#header{  width: 480px;}#main{  width:  calc(100% / 3) ;
  float: left;}#side{  width:  calc(100% * 0.6) ;
  float: right;
}.box_1 {  position: relative;   display: inline-block;      vertical-align: middle;   color: #FFF;   width : -webkit-calc(100% / 3) ;   width : calc(100% / 4) ;   margin: calc(100% / 60);   height:160px;   background-color: red;     text-align: center;}.box_1 .caption { font-size: 130%; color: #fff; padding-top: calc(100% / 4); padding-left: 100px;}.box_1 .mask {  width : 100%; height: 100%; position: absolute; top: -100%; /* 枠の上に置いて表示させない */ left: 0;  -webkit-transform: scale(0); /* 大きさを0にして表示しない */transform: scale(0); background-color: rgba(0,0,0,0.4); -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}.box_1:hover .mask {  -webkit-transform: scale(1); /* 大きさを1にして表示する */transform: scale(1); top: 0; /* 下に降りてくるように見せる */}

.btn-square {  display: inline-block;  padding: 0.5em 1em;  text-decoration: none;  background: #668ad8;/*ボタン色*/  color: #FFF;  border-bottom: solid 4px #627295;  border-radius: 3px;}.btn-square:active {  /*ボタンを押したとき*/  -webkit-transform: translateY(4px);  transform: translateY(4px);/*下に動く*/  border-bottom: none;/*線を消す*/}

 

----------------------popup.css

.modal_wrap input {
display: none;
}

.modal_overlay {
display: flex;

justify-content: center;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.5s, transform 0s 0.5s;
transform: scale(0);
}

.modal_trigger {
position: absolute;
width: 100%;
height: 100%;
}

.modal_content {
align-self: center;
width: 60%;
max-width: 800px;
padding: 30px 30px 15px;
box-sizing: border-box;
background: #fff;

line-height: 1.4em;
transform: scale(1.2);
transition: 0.5s;
}

.close_button {
position: absolute;
top: 14px;
right: 16px;
font-size: 24px;
cursor: pointer;
}

.modal_wrap input:checked ~ .modal_overlay {
opacity: 1;
transform: scale(1);
transition: opacity 0.5s;
}

.modal_wrap input:checked ~ .modal_overlay .modal_content {
transform: scale(1);
}

.open_button {

}

 

--------------------------menu.css

/* common *//* common */body {    margin: 0;    padding: 0;}
ul {  margin: 0;  padding: 0; list-style: none;}
/* contents */.contents {    display: table;    width: 100%;    height: 100vh;    padding: 0;    margin: 0;    /*background: #f6bc60;*/    box-shadow: 0 0 50px 0 rgba(0,0,0,.8);    -webkit-transition-property: all;    transition-property: all;    -webkit-transition-delay: .3s;    transition-delay: .3s;    -webkit-transition-duration: .5s;    transition-duration: .5s;}
.contents__inner {    display: table-cell;    vertical-align: middle;    text-align: center;}
.contents__inner h1 {    margin: 0;    padding: 0;    color: #fff;    font-size: 40px;    font-family: Futura, "Century Gothic", "helvetica neue", arial, sans-serif !important;    font-style: italic;}
.contents__inner p {    margin-top: 20px;    color: #fff;    font-size: 20px;}
.contents__inner p span {    border-bottom: 1px solid #fff;}
/* drawer menu */.drawer-menu {    box-sizing: border-box;    position: fixed;    top: 0;    right: 0;    width: 300px;    height: 100%;    padding: 120px 0;    background: #222;    -webkit-transition-property: all;    transition-property: all;    -webkit-transition-duration: .5s;    transition-duration: .5s;    -webkit-transition-delay: 0s;    transition-delay: 0s;    -webkit-transform-origin: right center;    -ms-transform-origin: right center;    transform-origin: right center;    -webkit-transform: perspective(500px) rotateY(-90deg);    transform: perspective(500px) rotateY(-90deg);    opacity: 0;}
.drawer-menu li {    text-align: center;}
.drawer-menu li a {    display: block;    height: 50px;    line-height: 50px;    font-size: 14px;    color: #fff;    -webkit-transition: all .8s;    transition: all .8s;}
.drawer-menu li a:hover {    color: #1a1e24;    background: #fff;}
/* checkbox */.check {    display: none;}
/* menu button - label tag */.menu-btn {    position: fixed;    display: block;    top: 40px;    right: 40px;    display: block;    width: 40px;    height: 40px;    font-size: 10px;    text-align: center;    cursor: pointer;    z-index: 3;}
.bar {    position: absolute;    top: 0;    left: 0;    display: block;    width: 40px;    height: 1px;    background: #666666;    -webkit-transition: all .5s;    transition: all .5s;    -webkit-transform-origin: left top;    -ms-transform-origin: left top;    transform-origin: left top;}
.bar.middle {    top: 15px;    opacity: 1;}
.bar.bottom {    top: 30px;    -webkit-transform-origin: left bottom;    -ms-transform-origin: left bottom;    transform-origin: left bottom;}
.menu-btn__text {    position: absolute;    bottom: -15px;    left: 0;    right: 0;    margin: auto;    color: #fff;    -webkit-transition: all .5s;    transition: all .5s;    display: block;    visibility: visible;    opacity: 1;}
.menu-btn:hover .bar {    background: #999;}
.menu-btn:hover .menu-btn__text {    color: #999;}
.close-menu {    position: fixed;    top: 0;    right: 300px;    width: 100%;    height: 100vh;    background: rgba(0,0,0,0);    cursor: url(http://theorthodoxworks.com/demo/images/cross.svg),auto;    -webkit-transition-property: all;    transition-property: all;    -webkit-transition-duration: .3s;    transition-duration: .3s;    -webkit-transition-delay: 0s;    transition-delay: 0s;    visibility: hidden;    opacity: 0;}
/* checked */.check:checked ~ .drawer-menu {    -webkit-transition-delay: .3s;    transition-delay: .3s;    -webkit-transform: none;    -ms-transform: none;    transform: none;    opacity: 1;    z-index: 2;}
.check:checked ~ .contents {    -webkit-transition-delay: 0s;    transition-delay: 0s;    -webkit-transform: translateX(-300px);    -ms-transform: translateX(-300px);    transform: translateX(-300px);}
.check:checked ~ .menu-btn .menu-btn__text {    visibility: hidden;    opacity: 0;}
.check:checked ~ .menu-btn .bar.top {    width: 56px;    -webkit-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);}
.check:checked ~ .menu-btn .bar.middle {    opacity: 0;}
.check:checked ~ .menu-btn .bar.bottom {    width: 56px;    top: 40px;    -webkit-transform: rotate(-45deg);    -ms-transform: rotate(-45deg);    transform: rotate(-45deg);}
.check:checked ~ .close-menu {    -webkit-transition-duration: 1s;    transition-duration: 1s;    -webkit-transition-delay: .3s;    transition-delay: .3s;    background: rgba(0,0,0,.5);    visibility: visible;    opacity: 1;    z-index: 3;}

各OSでROSを

ROS

ロボ何とかの略称

まあ、KinectやMyoとか、Arduinoで自作ロボットを作るときの

自作するとめんどいプログラムのこみこみセットですね

プログラミングできない人には関係ないかも

------------------------------------------------------------------------------------- 

インストール手順

以下はインストール手順

コマンドが使える人はどうぞ

ついでに

sudo rosdep init

rosdep update

が起動しない場合は

source /opt/ros/インストールしたバージョン(kineticなど)/setup.bash

を~/.bashrcに書き込んで、terminalを再起動するとよい

------------------------------------------------------------------------------------- 

1.Ubuntu系(公式サポートが欲しい人向け)

公式ウィキ(検索したら出てくると思う)に書かれていることをやるだけ

http://wiki.ros.org/ja/kinetic/Installation/Ubuntu

以上

------------------------------------------------------------------------------------- 

2.RedHad系(将来企業でサーバー触りたい人向け)

ネットではccacheなんかがないとダメみたいなことが書いてあるが、

そんなことはない

ただ時間がかかるだけだ(あくまでccacheはキャッシュ(cache)を作るだけ)

http://wiki.ros.org/Installation/Source

Installing bootstrap dependencies

ここのFedoraのコマンドを実行し

 

Instalationの

Desktop-fullのコマンドを実行

ただし、エラーが出たら、

Desktop install や ROS-Commでいけるかも

ついでにFullはものすごく容量が多いので注意

(どのLinuxでもインストールに大体3~10時間ぐらい)

ROS-Commだと最小構成なので、使いたいのが決まっている人はそっちで

Resolving Dependenciesのコマンドを入力をしたらインストールは完了なはず

あとはwikiを読もう

 ------------------------------------------------------------------------------------

3.Arch系(自分でビルドしたい人向け)

あまりお勧めしない

まあ自分はArchに入れてるが

 

最初にyaourt(ヨーグルト)をインストールする

まあ,入ってるかもしれんが、

sudo pacman -S --noconfirm yaourt

でインストール

このまま(root(#)の場合は、一般ユーザ($)にした後)

yaourt -S --noconfirm ros-kinetic-desktop-full

でインストールできるが、お勧めしない

ものすごい時間がかかる

ついでにyaourtはダウンロードとビルドとインストールをまとめてやってくれる

 

以下はお勧め設定

やらなくてもよい

yaourtが重いなどの人も設定してみるとよい

 

/etc/makepkg.configを開き

CFLAGS=”-march

みたいな文字列とその下に

CXXFLAGS="-march

があるのを確認

ここで新しいターミナルを開き、

gcc -c -Q -march=native -help=target | grep march

を入力

出てきた文字(多分右側)をコピーし

-march= の後の文字を消してそこに入力

-march=xxx(ここに入力、=との間にスペースは入れてはだめ)   -mtune=

となる

-mtune=にも同じ文字を入れる

例えば、-march=corei7  -mtune=corei7

CFLAGS とCXXFLAGS両方設定

 

MAKEFLAG="-j2"

コメントアウトしj2の2の部分を自分のPCのコア数の2倍にする

 

PKGEXT=

があると思うが、これは圧縮設定である

公開しないのであれは、軽い圧縮を設定する

自分はtarまでにして、圧縮しないようにしている(高速化のため)

詳しくはググって

 

つぎはpacmanの設定である

aria2をインストールし、

/etc/pacman.confを開き

XferCommand = /usr/bin/aria2c --allow-overwrite=true --continue=true --file-allocation=none --log-level=error --max-tries=2 --max-connection-per-server=10 --max-file-not-found=5 --min-split-size=5M --no-conf --remote-time=true --summary-interval=60 --timeout=5 --dir=/ --out %o %u

を改行なしで入力

 

次にyaourtの設定

/etc/yaourtrcの 

TMPDIR=”/tmp”

を好きな場所に変えて#がある場合は消す

していないとメインメモリが15GBほど消費される(ないとエラーが出る)

以上の設定をして、再起動する(この設定をするとちょっと遅くなる)

 

これである程度は早くなるだろう

環境によっては数時間で終わる

 

yaourtはインストールの時だけにrootパスワードを入力しなければならない

ROSはパッケージが多いので、放置できない

yとnを永遠(と感じるほど)入力し続けないといけない

それをなくす方法は

/etc/sudoers

Defaults timestamp_timeout=-1

を追加して、再起動する

------------------------------------------------------------------------------------- 

これで完了

最後に、

source /opt/ros/インストールしたバージョン(kineticなど)/setup.bash

sudo rosdep init

rosdep update

roscore

を順番に実行してなんか反応したら終了である

Manjato のBluetoothのお話

 記念すべき最初の記事はマニアックOS、ArchLinux

の中でも、こみこみセットなManjaro(のさらにマニアックなi3)のお話です

使ったことがある人ならわかると思うが、

Manjaroのi3デスクトップ環境の初期状態では

Bluetoothのソフトウェア、Bluemanが起動しないようになっている

この状態でほかのBlueberryなどのソフトをインストールすると、

インターネットが認識されないなどバグっちゃうんですね

ステータスバーがきちんと表示されないのでやればわかるかと

解決策としては、nanoやvi,vim

~/.i3/config

の中にある

# exec --no-startup-id blueman

コメントアウトすれば起動するはずだが

うちの環境では起動しない

なんでだろうね

 

 

ついでに、ソフトをスタートアップさせたい場合、

~/.i3/configの中に

exec ソフトの名前

で起動する

fcitxなどのソフトを起動させたいあなたには有効かもしれない

(fcitxは動きました)