つきすけ　の　コーディング記

細かいところで嫌にならないように、小さいことでも解説していくブログ。たまに関係ないことも書く。

bluetoothctlコマンド、gatt使わせて。

ある日ラズパイいじり中に起こった事実。

僕は、bluetoothctlコマンドの、gattのselect-attribute コマンドが使いたかった。

しかし、bluetoothctlコマンドを実行したところで、

select-attribute
というコマンドはありません

と出る。

そこで、 bluetoothctlコマンドにあるhelpコマンドを使う。すると使えるコマンドがずらっと出てくる。
そこに気になる文字が。

gatt、上の方にあるじゃん？
そして、

menu <submenu>

コマンドを試す。つまり、

menu gatt

すると色々出てくるのだけど、select-attribute の文字がいっしょに出てくる。

そう、僕はここで勘違いしていたことに気づく。

menu <submenu>

には移動の意味も兼ねていた。

ただの“使えるコマンド一覧を表示する”だけではなかった。

これ、調べてもなんかあんまり出てこない。
そうつまり、gatt等のコマンド(例えばselect-attribute)を使いたい場合、

menu gatt
select attribute ほげほげ

とする。

他にもサブメニューはいろいろある。なのでまず移動すること、忘れずに••••••な。

jQueryでイベントを条件で分岐させる

上手いタイトルが思いつかない。僕がやりたいのはこういうこと、

「ある場所をマウスオーバーした時色を変える、マウスアウトをしたら色を戻す。ただしクリックしてあった場合、マウスアウトは無効とし、クリック後の色を残す」

もっとも簡単な解決法は、
「CSSで:hoverすれば良いじゃん」
なのだけれど、まあ上記に関わらず使いたい時があるかもしれないので、これを機に考えていく。

※※追記※※
難しく考えるものでもなかった

jQueryを使う

むしろ他に何を使う

マウスオーバー or アウトをしたときの動き

※元のフォントカラーを黒とする

$(function(){
    $('h1').hover(function(){
        $('h1').css('color','red');
    },
    function(){
        $('h1').css('color','black');
    });
});

クリックした時の動き

$(function(){
    $('h1').click(function(){
        $('h1').css('color','blue');
    });
});

条件分岐

どうやって分岐しようか？

クリック後の色が他の色と異なる場合

これは簡単。
例えばクリック後にいろが青くなったとして、その青色はクリック時にしか現れないならば、現在の文字が青色か否かを判定すればよい。青色じゃない場合はホバーイベントを発生させる。

if($('h1').css('color') != 'blue'){
    ホバーイベントを発生させる
});

クリック時の色とその他の色が重なっている場合

もし、クリックもホバーもしていない状態が同じ青色だったとき(デフォルトのカラーがそもそも青色だったとき)、色でクリックしたかどうかを判断することはできない。
なので、普通に変数を用意する。

var flag = false;
$(function(){
        クリックイベントを発生させた時、flag = true とする。
    });
    if(!flag){
        trueじゃなければ、クリックしてなければ
        ホバーイベントを発生させる
    });
});


実行未確認の部分があるので、ご容赦ください。

JQueryをやる上で押さえる最初の概念

JQueryってわかり辛いよな。あの見た目、すきになれない。

今回の記事は概念だけ。コードは一切書いてない。

1 HTMLとCSS を理解せい

これがわからなければどうにもならない。

2 外側からHTML & CSS をいじれる。

とりあえず変化を与えると言う意味で言えば、CSS がいじれるのが最高って感じ。

3 ユーザーの行動などを検知できる

クリックしましたーとかそういうの。

4 2と3を組み合わせる

ユーザーがボタンをクリックしたので、文章を表示しよう。などと言う動きをさせることができる


基本的に 4 を使うのだということは想像に難くない......

超ざっくりCSSが読めるようになる記事

手っ取り早く、構造だけ知りましょう。
HTMLがわからない方はこちらからどうぞ。
tsukisuke.hateblo.jp

CSSとは

ウェブページに飾りを与えるもの。
HTML内に直接書いたり、別のファイルとして用意してHTML内で呼び出したりして使う。

タグとクラスとID

HTMLには、タグ、クラス、IDの概念がある。
これが理解できていない場合はHTMLの勉強に戻ろう。

飾る対象を、タグがクラスかIDで指定する。
例えば、以下のようなHTMLがあったとする。

<div class="exclass" id="exid">個々の文字の色を変える</div>

この時、CSSはこんな風に書ける。

div { 
  color: red;
 }
.exclass {
  color: red;
}
#exid {
  color: red;
}

上記からわかるように、タグの場合はそのまま、クラスの場合は ' . ' をつけて、IDの場合は ' # ' を付けて記述する。

複数個同時

タグやクラスは複数同じものが存在する。
適切に使えば、同時に複数の箇所の装飾が変えられる。

種類

たくさんありすぎるので、逐次調べるしかない。

細かい話

HTMLにブロック要素とインライン要素があるという話を前回書いた。
これをCSSからいじることができる。
そして、実はそれ以外の概念が存在し、CSS上でいじることができる。

が、複雑すぎるのでこれは自ら書く側に周るときに知れば良いだろう。
Flex とか Grid とか。。。

超ざっくりHTMLが読めるようになる記事

「１から全部書くわけじゃないけど、読めないと困る」
そんな人のために。

HTMLって何？

ウェブページを作っている言語。
○○.htmlっていう拡張子のファイルになる。

とりあえずテンプレ

以下をコピしてブラウザで開くとどうなるか。

<html>
  <body>
    あいうえお
  </body>
</html>


できた。

覚えておきたいこと

<> のことを、タグっていう。
一番外側を タグで囲って、内容は タグの中にある。

その中でも区別するために、いろいろなタグの元に文字が書かれている。
最低限覚えて欲しいタグは以下の３つ（超厳選）

<div>１ブロックを表すタグ</div>
<span>文章の一部分を表すタグ</span>
<a>リンクを表すタグ</a>

知っておかないと後悔する概念

HTMLのタグには二つの概念がある。

  • ブロック
  • インライン

ブロックタグとは、塊を表すタグのことであり、インラインとは文章中を表すタグのこと。
さっき紹介した３つのうち、

はブロック、他はインライン。
雑すぎて怒られそうだが、ものすごく簡単に違いを説明する。

ブロック：かってに段落になる。並べて書いても改行される
インライン：文章の間に挟んでも、改行されない

こんなかんじ

<html>
  <body>

    <div>ブロックです</div>
    <div>連続して書いても改行されます</div>

    <span>インラインです</span>
    <span>連続して書いても改行されません</span>

  </body>
</html>


自分で名前をつける

タグには自分で名前をつけることができる。
なにに使うか？　レイアウトを考えるときによく使う。

名前の付け方は２通り、クラス（class）とID（id）
こんな感じ。

<div class="classEx">ここに文章</div>
<div id="idEx">ここに文章</div>

二つの違いは、複数個に同じ名前を付けられるかどうか。
IDは１つしか作れず、クラスは同じ名前を複数使える。
これはきっとレイアウト（CSS）書くようになれば、２つある理由もよくわかることだろう。

それ（CSSの話）はまた今度
tsukisuke.hateblo.jp

【第四回:最終回】（配列）0からプログラムを勉強する

Start 0 Programming

※おそらくとっても大事であろう条件式の書き方をすっ飛ばしていますが、今回は概念だけ覚えていただきたかったためすっ飛ばしたままにします。


今回お勉強すること。
その名も配列。
そう、配列。
配列って何？
変数を、一括に、まとめてくれてしまうもの…

※そうそう余談だけれど、前回のループがわかれば、余裕だと思う。


配列

変数を一括でまとめてくれてしまう、と表現させていただいた。
その表現をする教本はあるだろうか？　なんとも言えない。
でも、ぜひこの概念から入って欲しいと思う。僕はね。

例題と書き方

以下のようなプログラムは、もう見慣れていただけただろうか？

a = 1
b = 3
answer = a + b
# answer には 4 が入る

ここで、ちょっと思う（必要がある）のだ。
「変数を二つ並べて書くの、面倒じゃない？」

だって考えてみてくれ。今はまだ「a, b」の二つだけれど、「a, b, c, d, e , …」と増えたらどうする？

全部人間が並べて書くのは面倒だ。面倒だと思う。面倒だと思ってください。話を続けるために。

配列というものでまとめる

配列っていうのは、“値を一直線に並べられる〜！”というもの。
よく、箱って表現される。変数が並んでるから、箱。わかる辛いなら忘れようか。

とりあえず見てみる。

hairetsu = [1, 3]

上のように書くと、hairetsuという名の変数（これ自体も数が変わるので変数）が作れた（変数名のセンスがなくてすまない）
そう、さっき a, b に入れた 1, 3 という数値を、配列という名の四角い箱（ただし横一列）に一緒に入れた。

ここまでは、ここまでは分かっていただけだだろうか。
わかっていないなら、次に進むのは危険だろう….

配列の入れ方、出し方

a, b の代わりに配列とかいうものになんかまとめてみたけど、どうやって使う？
配列は、こんなふうに書くことができる。

hairetsu[0]

上を実行すると？　出てくるのは 1 という数値。a の代わりに入れたもの。
b の方は？

hairetsu[1]

これが、b の代わりに 3 をいれた場所。

察しの良い方、まだわからない方、どちらとも、hairetsu変数の右側にくっついている、[] にご注目ください。

hairetsu = [1, 3]
hairetsu[0] # 1 と表示される（a の代わりに入れた値）
hairetsu[1] # 3と表示される（b の代わりに入れた値）

おや、どうやら hairetsu の の中身が連番になっている（0からスタートしているのは一旦忘れて）

そう、配列が便利なのは、「変数に勝手に番号を振って並べておいてくれる」ということ。
例えば、a, b, c, d, ….
って四つ変数を宣言しなければならない状況でも、配列なるものを使えば、hairetsu[] の一言で終わる。
しかも連番で管理できるのは嬉しい。ループのことを考えると、そう思うだろう？　まあ、使ってみればきっとわかる（後述）

連番が0から始まる理由

コンピュータには 0 or 1 しかないと誰しもが言っている。僕も言っている。
その後の数値は 01 を色々組み合わせて作るわけだけど、どう足掻いても 0 は 0。
なので 0 から数えるのは自然だろう。納得するしかない。

もしかして、1 から始まるプログラミング言語存在がこの世はあるのかもしれないが、考え始めたら終わらないので、出会うことは無いと思ってしまうことにする。

連番で配列の中身を取得できるということ

あなたは気がついただろうか、
これ、ループ文ととても相性がいい….
数値で条件を作り好きな回数ループする、
例えば、変数 i が 0 から 2 未満 (1 ってこと) になるまで、i を一つずつ足していく。
すると？　あら、連番が出来上がり。なので、配列の作成も取得も、一緒にできちゃうじゃーん？
分かりづらいか。

hairetsu = [1, 3]
# 配列の中身をループを使って表示する
for (変数 i が 0 から 2 “未満”になるまで、i を 1 ずつ足していく)
　　hairetsu[i]
　　# 一回目のループでは 1
　　# 二回目のループでは 3

！！注意！！
0 から 2 未満 になるまで。
細かいことを言えば、整数のみをループするので、
i は 0, 1 の二回のみ。
hairetsu[i] は、
すなわち、hairetsu[0], hairetsu[1] の二回を取得できる。

お疲れ様でした

一旦「0からプログラミングを勉強する」シリーズはここで終わりとなります。

第零回〜第四回に至るまで（なんで零から始めたのかお分かりいただけたと思うが）お付き合いいただきかたじけない。
0から5未満だ….

今後は、この基礎をいじくり回すのが基本となる。
きっとできる。この五回分さえできれば、できる….

次の記事では練習問題でもまとめてみる。
理解ができているか、詰まっているところはどこか、どうか確認にでも使って欲しい。
その記事を作るという約束は、現状ではしない....

【第三回】（ループ）0からプログラミングについて勉強する

ループ=繰り返し

繰り返しをしないプログラムなんて、プログラムじゃない。

ループが出てこないプログラムは0.01%くらいしか存在しない。

やろう、反復横跳び。

whileで書くループ

これは簡単。
とりあえず、a, b っていう変数(適当な数値)があったとする。
そしてこう書いてみる。

while(aとbが同じ数字である):
    ここに書いたプログラムを実行する

whileの中に(while文って言います)書いたプログラムを、指定した条件下の時はずっっとループするというもの、

なお、ちょっと書き間違えると永久ループして絶望します。
普通、次に紹介するやつの方が最初に学習するのだけれども、見た目に簡単なのでwhileから紹介させていただきました。

for で書くループ

for の方が while より先に紹介されることが多いのだけれど（こっちの方が使われる）
見た目に嫌なので後に回した。

forは大抵こんな感じ

for (i = 0; i < 3; i = i+1)
    ここに書いてある処理を行う

好きですか？
嫌いです。

簡単に言うと、上のやつは、
i は最初 0 で、それが 3 未満である限り、i に値を+1する。i が 3 になったらループをやめる。
（いや、簡単に言えてない。申し訳ない）

これ、なんでこんな書き方があるかと言うと、i が一緒に操作されているから、それをそのまま使える。

*

いや、まあ一旦忘れよう。
使えばこの簡単さと素晴らしさに気づける日が来る。
早ければ第四回とかで気づける。

※どの教本でも、普通ここを飛ばすことはないので、先に出てきたら頑張ろう。