Bootstrap はてなブログ 〜学んだので使ってみようと思ったがやめた〜
Bootstrapの設定をとりあえずで行って見たところ、画面が色々と崩れてしまい。。。
ビミョウだな。。。と思いました。
しかし、ここで引き下がるも癪なのでちょっと調べてみる事にします。
はてなブログの画面構成
＜前提＞
- 自分のブログページのソースを見て見た結果です。
- はてなブログ全部に通じる話かどうかはわかりません。
- 調べるポイントは記事や、ヘッダ、フッタなどの枠はどのようなCSSプロパティを使用しているか？を調べます。
→これがわかれば、CSSのプロパティを書き換える(オーバーライド)してやれば画面のデザインを簡単に変更できるからです。
ボディ<body>
<body class="page-entry enable-bottom-editarea category-Bootstrap">
上のようなCSSクラスが指定されていたので、このクラスをオーバーライドしてやれば良いと思うのですが、CSSクラスは似たようなものがたくさんあるのでなんかいじるのに抵抗があります。うーん、デザインのカスタムとかはやめようかな？
画面のヘッダ
<div id="header-container">
記事のヘッダ
<div id="globalheader-container" data-brand="hatenablog">
記事のメイン部分
<div id="container">
<div id="container-inner">
<header id="blog-title" data-brand="hatenablog">
<div id="blog-title-inner" >
<div id="blog-title-content">
<h1 id="title">
<h2 id="blog-description">
</header>
<div id="content" class="hfeed">
<div id="content-inner">
<div id="wrapper">
<div id="main">
<div id="main-inner">
<div class="entry-inner">
<header class="entry-header">
<!-- これはテーマのものと思われる -->
<div class="date entry-date first">
<h1 class="entry-title">
<div class="entry-categories categories">
<div class="entry-content">
感想
どこから、どこまでがはてなブログで使用しているCSSプロパティかわからないので、やっぱりデザインに手をつけるならば、提供されている機能内でやる方が良いと思いました。CSSに慣れ親しんでいる人ならば、問題なくできるのであろうが、自分はJava屋なので、ここら辺を触るのに抵抗があります。
つまるところ
「CSSとかデザインとかある程度慣れている人でなければ、下手に触らない方が良い」
と言う結論に至りました。
追加で見つけたページ
ちょっとずつでも、理解しようとこのページを見つけました。構造などが詳細に記載されています。
でわでわ。。。
Microbit ラズパイ Midi音源〜ラズパイからUSBでMIDI音源に接続〜
今回は、単純にラズパイからMIdi音源を鳴らす事に挑戦します。
＜前提＞
＜ 使用するUSBケーブル＞
【楽天市場】ROLAND(ローランド) UM-ONE mk2【DTM】【MIDIケーブル】：Rock oN Line 楽天市場店
ラズパイにUSBドライバーをインストール
参考にしたサイトはこちらです。
使用したコマンド
- lsusb
-
aconnect -i -l
-
aconnect -i -o
一応接続の確認ができました。「一応」と言うのは肝心のMIDIメッセージが送信できるかどうかわからないからです。
MIDI送信を試みる
参考サイトはこちらです。そして、自分が詰まったところを下に記載します。
- bluetoothctlコマンドがうまく動かない → 権限が足りなかったので実行するときに
>「sudo bluetoothctl」で実行したら解消 - iphoneと接続するときにうまくいかない(検知できない) → ラズパイで次のコマンドを叩く bluetooothctlの実行中に「trust 対象のMACアドレス」参考ページ
そして接続した状態でMIDIコントローラーがないので鳴らすことができませんでした。
後日やってみようと思います。
でわでわ。。。
■
Bootstrapテーマなるものがありました。これはJavaで画面などを作成するときにはBorderLayoutとかのクラスで指定できるのですが、これと同じ様なものでした。
見た目はこんな感じです。
TOPとLEFT, RIGHTにサイドバー、そしてフッターがあります。
処理を実装したい自分としてはこの様なレイアウトがあるととても嬉しかったります。
そんなわけで、ちょっとこれを使用して何か作って見たいと思います。
自分のブログ関連のものにしたいと思っていますが、ついでなのでAngularJSも使用してウェブアプリっぽくしたいものです。
上のHTMLコード
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <style> /* Remove the navbar's default margin-bottom and rounded borders */ .navbar { margin-bottom: 0; border-radius: 0; } /* Set height of the grid so .sidenav can be 100% (adjust as needed) */ .row.content {height: 450px} /* Set gray background color and 100% height */ .sidenav { padding-top: 20px; background-color: #f1f1f1; height: 100%; } /* Set black background color, white text and some padding */ footer { background-color: #555; color: white; padding: 15px; } /* On small screens, set height to 'auto' for sidenav and grid */ @media screen and (max-width: 767px) { .sidenav { height: auto; padding: 15px; } .row.content {height:auto;} } </style> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav> <div class="container-fluid text-center"> <div class="row content"> <div class="col-sm-2 sidenav"> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p> </div> <div class="col-sm-8 text-left"> <h1>Welcome</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <hr> <h3>Test</h3> <p>Lorem ipsum...</p> </div> <div class="col-sm-2 sidenav"> <div class="well"> <p>ADS</p> </div> <div class="well"> <p>ADS</p> </div> </div> </div> </div> <footer class="container-fluid text-center"> <p>Footer Text</p> </footer> </body> </html>
長ったらしい感じですが、各領域にそれぞれのコンポーネントを入れてやれば細かいところは気にしなくてOKなのでとても楽ができるのです。
どんなものを作ろうか？只今思案中です。
簡単ですが、ここら辺で失礼します。
でわでわ。。。
Bootstrap チュートリアル4〜W3schools: そのほかの基本〜
各コンポーネントの表示方法を「そのほか」と言う形でまとめて記載したいと思います。
Imge表示
<CSSクラスの書き方>
Rounded Corners: class="img-rounded"
Circle: class="img-circle"
Thumnail: class="img-thumbnail"
上のCSSクラスを適用させることで、 上の３種類の表現が使用できる様です。
Janbotron
上の様なCSSを適用するクラスらしいです。下の様に書く様です。
class="jumbotron"
PageHeader
h1タグみたいな感じで、下の様に表示できる様です。
class="page-header"
Basic Well
Alert
Success: class="alert alert-success"
Info : class="alert alert-info"
Warning : class="alert alert-warning"
Danger : class="alert alert-danger"
Glyphicon
まだまだある様ですが、とりあえずはこの辺でやめておきます。
しかし、最後にテーマなるものがあったのでそれを記載しておきます。
ここのページにありました。
まとめ
とりあえずは、簡単にほとんどのコンポーネントをオシャレに表示できるクラスが用意されている様なので、「ここの表示は・・・・」と悩んだら、BootstrapのCSSクラスを探してみると良いのではないでしょうか？
でわでわ。。。
Bootstrap チュートリアル3〜W3schools: テーブルの基本〜
今回はBootstrapによるテーブル表示を行います。チュートリアルにあるソースを表示してみる味気なかったのでちょっといじり下の様になりました。
ヘッダー部分にjumbotron text-centerを適用させただけです。
そして、今回のメイン部分のテーブルに関しては、ソースと表示結果より以下の様にまとまりました。
テーブルのタグにclass="table"をつける<thead>でヘッダー<tbody>で中身を作成します。作成したコードは以下の様になります。
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="jumbotron text-center"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> </div> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> </body> </html>
こんな感じです。
特に考える様なこともないかな？と思います。その代わりやり方をちゃんと覚える必要があります。いつでもこのやり方を引き出せると覚える必要もないのですが、まぁちょうど良いメモになります。
でわでわ。。。
Bootstrap チュートリアル3〜W3schools: グリッドシステム〜
今回はBootstrapでのグリッドシステムを学びます。大雑把に下の様に表示するときのやり方と言うことです。
グリッドシステム
この様な表示をするときは多くの場合データを表示することが多いと思います。
なのでこちらも何かのデータを表示したいと思うのですが。。。
その前に、仕組みの方を理解する必要がありました。
とりあえずはサンプルコードをコピーして表示して見ました。
「columns」の表示がやたらと小さいです。それもそのはず、下の様なコードで表示しているからです。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>MyFirstBootstrapPage</h1>
<p>Resizethisresponsivepagetoseetheeffect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-*-*">columns1</div>
<div class="col-*-*">columns2</div>
</div>
<div class="row">
<div class="col-*-*">columns3</div>
<div class="col-*-*">columns4</div>
<div class="col-*-*">columns5</div>
</div>
</div>
</body>
</html>
上のコードの「class="col-*-*」の部分に適当な値を入れる必要があります。
その部分に対する記載がこちらです。
xs(for phones - screens less than 768px wide)sm(for tablets - screens equal to or greater than 768px wide)md(for small laptops - screens equal to or greater than 992px wide)lg(for laptops and desktops - screens equal to or greater than 1200px wide)
そして、この部分に「col-sm-4」と記述して表示させた結果が以下になります。
チュートリアルのドキュメント(ページ)の内容と実際に動かして見た結果以下の様にまとまりました。
- div class="row"で囲っている部分が1行分のカラム(ハコ)になる
- div class="col-sm-4"とすると上の説明にある様なサイズになる実際に試してみるのが一番早いと思います
- 画面のはじまでいくと自動的に改行される(そう言うスタイル？)
と言う感じでまとまりました。
でわでわ。。。
Bootstrap チュートリアル2〜W3schools: チュートリアル１〜
W3schoolesのBootstrapチュートリアルを始めます。
1. HTML5の定義をする
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrapはレスポンシブ対応
<meta name="viewport" content="width=device-width, initial-scale=1">
3.コンテナ
ブートストラップは、サイトの内容をラップするために含む要素が必要です。
から選択するには、2つのコンテナクラスがあります。
.containerクラスは、応答性の提供、固定幅のコンテナを.container-fluidクラスが提供全幅容器をビューポートの幅全体に及びます
という様な特徴がある様です。
３番目のコンテナはちょっと注意して置く必要がありそうです。ポイントとしてはコンテナは２種類あって以下の様な違いがあるということです。
＜.container＞
＜.container-fulid＞
自分の認識としては、画面の中央に来るかこないか？の様に思えるのですが、まぁ実行結果がそうなのだからそうなのであろう。深く追求する気なし(笑)
ちなみに作成したHTMLは下の様になっています
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <div ng-app=""> <p>Name : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html>
こんな感じでチュートリアル(このページ)は終わっていたのですが、ちょいとまとめてみようと思います。
今回のまとめ
実際に作成するときにはこれらのうちどちらかで作成したいものに適応させるのが便利なやり方かもしれない。
逆に言うと「こんな感じで表示したい」となったときにはそれに対応するCSSクラス名を探さなくてはいけないのだろうか？
探すとなるとちょっと面倒な感じもするが。。。チュートリアルを進めていくと何かしらがわかるのであろうことを期待しつつ。。。
この辺でこの記事も終わりにしたいと思います。
でわでわ。。。
Bootstrap チュートリアル1〜W3schools: はじめの一歩〜
仕事でBootstrapにも触ることになったので学習します。AngularJSとセットになっていました。AngularJSの学習はこちらに記載しています。
早速始めようと思います。
Bootstrap
まずはチュートリアルサイトを参考にして進めていきます。
この参考サイトには「こんな感じですよ」というものを載せて入る様でした。
(コピペで)実装してみると以下の様に表示されました。これはレスポンシブ対応ということです。
自分の場合、CSSはあるものを適当にカスタムする様なことしかしてこなかったので「あーする」「こーする」に関しては無頓着だったのですが、そうも言ってられず。。。現在に至る次第です。
イントロダクション
上のリンク先のページはイントロダクションの位置付けであろうと思いいます。「こんな感じ」というのをバシッと見てもらう方が良いということでしょう。
ちょっといじってみる
上のリンク先にはサンプルHTMLが記載されて入るのでコピってすぐに表示できます。
上のキャプチャがそれにあたります。
そして、今回仕事で使用しているものはAngular+Bootstarpなので両方使用できるか試して見ます。興味本位でやって見ました。
上の「Hello wanwan」とある部分はAngularJSでテキストボックスに文字を入力したものです。サンプルはこちらのリンクにあります。
このサンプルを書き込んで見ました。
確かに「見た目のデザイン」をやりたがらない自分にとってはとても助かります。
コードでみためを実装できるのが一番良いのですが、それでもCSSで一からやるよりも作業がとても早くできそうです。
次回は、このチュートリアルの次ページをやります。
でわでわ。。。
Shellスクリプト 基本 〜はじめの一歩、ハローワールド〜
ラズパイの環境設定などに使用できるShellスクリプトを学習し始めます。
Shellでもやっぱり「ハローワールド」をやります。
Shellでのハローワールド
Shellでやる場合、echoコマンドを使用します。がその前に。。。自分は作業用PCとしてMacを使用していますので、実際に設定をするマシン=ラズパイにSSHでログインしてからの作業になります。
ラズパイへのSSHログインに関してはこちらの記事を参照してください。
そしてハローワールドですが、以下の様に叩きます。
>echo Hello World
この「echo」コマンドでは変数だったり文字であったり、色々と表示できます。
ちなみによく使用するのは「環境変数の中身を見たいとき」です、下の様に叩きます。
>echo $PATH
そして、これをファイルに出力したいときなどは下の様に叩きます。
>echo $PATH > text.txt
この様に叩くことで、出力結果を「text.txt」ファイルへ出力します。
ちなみにラズパイにはRaspbian(OS)をインストールしているので実行するコマンドはLinuxコマンドになります。結局はUnix系のコマンドということですかね。。。
ファイルパーミッション
コマンドを使用していてよく躓くのがこれです。「ファイルが開かない！」「参照できるはずのライブラリが動かない！」などのトラブルがあった時にはここら辺も疑ってみるのが良いと思います。
ファイルパーミッション(FIle Permission)はファイルの権限という意味です。具体的には下の様にコマンドを叩くと確認できます。
>ls -l
結局のところは「ls」コマンドにオプションの「-l」をつけたコマンドになります。
そして上の「-rw-r--r-- 1 pi pi 46245 Sep 30 2018 CmdRPG.jar」の部分に「-rw-r--r--」の部分があります、これが権限を示す部分でここのページを参考にすると以下の様になります。(とてもわかりやすいので失敬しました。)
上記から
-rw-r--r--は、
「ファイル種別」が「ファイル」であり、
「所有者」に「読み取り」と「書き込み」の権限があり、
「所有グループ」に「読み取り」の権限があり、
「その他」に「読み取り」の権限があることを示しています。
drwxr-xr-xは、
「ファイル種別」が「ディレクトリ」であり、
「所有者」に「読み取り」と「書き込み」と「実行」の権限があり、
「所有グループ」に「読み取り」と「実行」の権限があり、
「その他」に「読み取り」と「実行」の権限があることを示しています。
なるほど、そいうことか。。。
こんな感じでコマンドを実際に叩き、実行結果などを見ながら記載していきます。
でわでわ。。。
Microbit ラズパイ Midi音源〜フリーハンドで音源を鳴らす仕組み5〜
今回はマイクロビットとラズパイの接続方法に関して調べてみようと思います。
今までも記載していることですが、マイクロビット発、ラズパイ経由、Midi音源行きのデータ通信の路線を作成する必要があります。
イメージは下の様な感じです。
そして、今回の調査対象はマイクロビットとラズパイの接続方法に関して調べます。
接続方法はBluetoothで接続します。いわゆる「ペアリング」をして使用する想定です。
調査開始
早速ジャストミートするページがありました。
そして、ラズパイ側でのコマンドに関して記載しているところもありました。
さらに、WebBluetooth...つまりブラウザでBluetooth接続する方法もありました。Chromeを使用する様です。
やっぱり英語のサイトが一番わかりやすかった。。。
調査結果
結局のところマイクロビットでBluetooth用のプログラムを組む
そして、ラズパイでペアリング
＜自分やった手順＞
・PCとラズパイをSSH接続する
$ ssh pi@192.168.4.2
・bluetoothの接続できるものをスキャンする
$ sudo bluetoothctl
[bluetooth]# scan on
見つけたマイクロビットのMACアドレスでコネクト
[bluetooth]# connect 表示されたMACアドレス
コマンドの一覧などは以下のコマンドで
[bluetooth]# help
そこまで確認したらあとは、アプリケーションでメッセージの受信待機をする(サーバー)アプリケーションで何かしらの処理を行う形で受信内容の確認を行える様です。
でわでわ。。。
