遊んで CSS Grid Layoutを覚える / Grid Garden をやってみた

f:id:yoshitaku_jp:20191009145113p:plain

CSS Grid Layoutが学べるGrid Garden をやってみた。以前、「遊んでCSS Flexboxを覚える / Flexbox Froggy をやってみた」を紹介したが、同じ作者が作ったものになる。今回はGrid Gardenの紹介とそこから学んだことを紹介する。

cssgridgarden.com

Grid Gardenとは?

Grid Gardenはブラウザ上でCSS Grid Layoutが学べる学習サイトである。ブラウザの左半分にCSSのコードが、そして右半分にイラストがあり、CSSのコードを書いていくことでイラストを変化させクリアを目指すものになっている。

f:id:yoshitaku_jp:20191009144458p:plain
Grid Gardenの画面

f:id:yoshitaku_jp:20191009144533p:plain
人参には水を置き、雑草には毒を置く

Flexbox Froggyと同様にサイトにアクセスするとすぐに学習することができる。登録をする必要がないのが嬉しい。問題数は28問あり、30分かからず一周できた。どうしてもわからないものがあれば、答えを公開してくれている人がいるので参考にするといいかと。自分も後半の2,3問は解けず勉強させてもらった。

github.com

学んだこと

display: grid

Grid Gardenを遊んでいるときには触る部分ではないのだが、解説をしておく。display: gridを指定することで、指定された要素がCSS Grid Layoutのコンテナとして機能する。まずさいしょにこの記述をしなければならない。Grid Gardenの中ではグレーで記述されていて見にくいが、畑全体を囲っているものである。

grid-template-columns,grid-template-rows

grid-template-columnsgrid-template-rowsの要素をいじるのは後半にあるのだが、説明としては先におこなったほうが良いと思うので説明する。Grid Layoutとして機能することを指定された要素を、どう分けるかを指定する部分である。前半ではgrid-template-columns: 20% 20% 20% 20% 20%; grid-template-rows: 20% 20% 20% 20% 20%;となっており全体を5×5のマス分割して表現されている。後半では、人参や毒を動かすだけではなく5×5のマスを変化させてクリアを目指していく。グリッドの線自体を変化させれば様々な形に適応できると思った。

f:id:yoshitaku_jp:20191009144624p:plain
%を使い畑を分ける

%以外にもpxやemでも分けることができる。これらは混ぜて使ってもよい。さらに、分数を意味するfractionalを略したfrという単位がCSSグリッドには存在する。1つのfrには損z内しているスペースの1つが割り当てられる。grid-template-columns:1fr 4fr;だとすると、1/5と4/5のスペースに分割される。

また、grid-template-にはrepeat関数があり、grid-template-columns: 20% 20% 20% 20% 20%;grid-template-columns: repeat(5,20%)と書ける。この場合は、20%の幅で5つに分割するという意味である。実務の段階でここまで分割したいケースが有るかどうかはわからないが、分割したいものが増えそうだったらrepeat関数を使うほうが良さそう。

いくつかの項目をまとめると、同じ意味でも様々な書き方ができる。

  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  • grid-template-columns: repeat(5,20%)

grid-column,grid-row

grid-columngrid-rowを使えば、grid-template-columnsgrid-template-rowsで分けた部分に対象の物を置くことができる。Grid Gardenでは、分けられた畑に水と毒を置くことで使った。

たとえば、grid-column: 2 / 4; と書けば、2番目の縦のグリッドラインに始まり、4番目のグリッドラインで終わるようなグリッドアイテムを設定できます。

f:id:yoshitaku_jp:20191009144655p:plain

grid-area

grid-columngrid-rowで縦と横のラインを細かく制御できるが、grid-areaを使うと縦と横を一回で指定することができる。キャプチャの画面ではgrid-area : 1/2/4/6;と指定し、grid-area : 横の上段 / 縦の左 / 横の下段 / 縦の右; を指定している。

f:id:yoshitaku_jp:20191009144800p:plain

おわり

  • Grid Gardenを紹介した!
  • 難易度と問題数がちょうどよく、初級者に良さそう
  • Flexbox Froggyと合わせてCSSマスターの一歩目にしたい!

参考情報

遊んでCSS Flexboxを覚える / Flexbox Froggy をやってみたはこちら。

yoshitaku-jp.hatenablog.com

flexboxfroggy.com

初心者からちゃんとしたプロになる Webデザイン基礎入門 を読んだ

プログラミングやWebに興味を持ち始めてから自分の中で長年の悩みだったWebデザインを改善したかったので本書を手にとった。自分の今までの悩みとしては、検索しても複数サイトで書き方が違ったり、新しい情報なのか古い情報なのか判断ができないことが合った。この本は現時点でのWeb制作に関わる知識がまとまっており、自分と同じような知識が点在していて線になっていない人は読む価値があると思う。

books.mdn.co.jp

目次

  1. Lesson1 Webサイトの成り立ち
  2. Lesson2 Webサイトの枠組みを知る
  3. Lesson3 Webデザインに必要な素材
  4. Lesson4 HTMLをマスターする
  5. Lesson5 CSSをマスターする
  6. Lesson6 シングルページのサイトを作る
  7. Lesson7 レスポンシブ対応サイトを作る
  8. Lesson8 Webサイトを公開してみよう
  9. Lesson9 SNS連携とWebサイトの運用

Webサイト制作のワークフローを知ろう

Webサイトの制作には「戦略フェーズ」「設計フェーズ」「制作フェーズ」「保守・運用フェーズ」の4フェーズがある。言葉は違うが、お客様が何をしたいのか調査したり、実際に要件を定義したり、実際に手を動かして制作したりとSIerなどと大きく変わらないことがわかった。オモシロイと思ったのが設計フェーズでの情報設計で、ワイヤーフレームというWebサイトの設計図を書く段階だった。ユーザがどのような順序でWebサイトを閲覧するのか考えながら落とし込む作業を手書きでやるのだが、当たり前にはなってきているがwebサイトは動的でリッチになってきているので最近はプロトタイピングツールを使うことが多くなってきているようだ。ワイヤーフレームのサイトと呼んでいいかわからないが、自分が以前使った事があるものは「Figma」で個人的には使いやすかった。代表的なものは「Cacoo」「Wireframe.cc」のようで自分は知らなかった。

cacoo.com

wireframe.cc

www.figma.com

また、ワイヤーフレームの参考になるサイトの「Wireframe Showcase」が例として上がっていて、デザインのプロトタイピングとしては「Prott」も紹介されていた。

www.wireframeshowcase.com

prottapp.com

bodyタグの構造

bodyタグの中については「ブロックレベル」と「インラインレベル」があることは知っていた。しかしHTML5においては「コンテンツモデル」という考え方に変わったようで、ブロックレベルとインラインに限らずタグの性質に応じて「入れ子にできるものと・できないもの」に区別される。 コンテンツモデルは7つのカテゴリに分かれており次のものが存在している。

sectionとdivとspan

sectionは文章のまとまりで表現されるためのもので、例えばこのブログ記事でいうと#####で段落を一つ下げて文章のまとまりを表現するときに使うのがベストであると理解した。

divの役割としては「情報整理、レイアウトのブロック分け」と書かれており、文章に意味付けをするものではない。本に書かれていたがsectionタグやheaderタグが生まれるまえはすべてdivタグを使ってレイアウトをしていたようで、自分にとってはこのあたりが正しく整理されず個人開発で上手く扱えなかったのだと感じた。 spanの役割としては「部分的にCSSを当てたい箇所を囲む」と書かれておりdivタグとの使い方がはっきりと理解できた。spanはインライン要素の性質があるため文章の中で使われる。

冒頭に書いた「検索しても複数サイトで書き方が違ったり、新しい情報なのか古い情報なのか判断ができないことが合った」は、自分としてはsectionとdivとspanが当てはまり、体系的に知識が整理されてよかった。divタグとspanタグのどちらにも言えることだが多用するとそこらじゅうに記述されることになり、文章全体が見えにくくなるため注意が必要だと書かれていた。

CSS

divでレイアウトのブロック分けをおこなうが、分けられたブロックは何もしなければ縦に積み上がっていくことになる。横に並べたり、一部を固定化したり、要素を重ねることでリッチな表現となっていく。CSS3以前では横に並べる場合floatを使っていたが、CSS3以降はdisplay:inline-blockが簡単かつ便利のようだ。

flexboxを使えば1行書くだけで要素を横並びにでき非常に便利。flexboxについては以前勉強のサイトを紹介したこともあるので貼っておく。また更に最新の方法はCSS Gridと呼ばれる方法があり、簡単にグリッドレイアウトが可能である。CSS Gridについては名前は聞いたことがあったレベルなので、今回知ることができてよかった。

yoshitaku-jp.hatenablog.com

おわり

  • 初学者にとっては現時点でのWebデザインの知識が体系的にまとまっていて読む価値あり!
  • 図や写真がふんだんに使われていてわかりやすい
  • シングルページとレスポンシブ対応サイトを作る章もあるので手を動かしながら学べた

books.mdn.co.jp

じぶん Release Notes 0.29.5

f:id:yoshitaku_jp:20191001120757p:plain

9月1日〜30日のあいだの出来事がリリースされました。

技術・開発関連

技術面での取り組みは以下の通りです。

  • MySQLの移行検証
  • DWHの性能検証

出張での打ち合わせとプレゼン準備が多かったのでもう少し技術的な取り組みを増やしたいです。

イベント

参加したイベントは以下の通りです。

  • 新日本プロレスを見に行きました
  • 澤井酒造に酒蔵見学に行きました
  • 自作キーボードを作りました

夏休みの期間に、やりたかったことをまとめてすすめました。

読んだ

  • マイクロソフト伝説マネジャーの 世界№1プレゼン術
  • Webデザイン基礎入門
  • 数学文章作法 基礎編

買ったもの

主要な買い物は下記の通りです。

  • パスポート
  • 自作キーボード

ブログ

リリースノートを除き、次のエントリを書きました。

PV数

9月は2614でした

f:id:yoshitaku_jp:20191001120738p:plain

データ指向アプリケーションデザイン の第I部を読んだ

「データ指向アプリケーションデザイン」 の第I部を読み終えた。 この部はタイトルにもあるように、データを扱うためのシステムについて全般的に述べられている。

第I部データシステムの基礎

  • 1章 信頼性、スケーラビリティ、メンテナンス性に優れたアプリケーション
    • 1.1 データシステムに関する考察
    • 1.2 信頼性
      • 1.2.1 ハードウェアの障害
      • 1.2.2 ソフトウェアのエラー
      • 1.2.3 ヒューマンエラー
      • 1.2.4 信頼性の重要度
    • 1.3 スケーラビリティ
      • 1.3.1 負荷の表現
      • 1.3.2 パフォーマンスの表現
      • 1.3.3 負荷への対処のアプローチ
    • 1.4 メンテナンス性
      • 1.4.1 運用性:運用担当者への配慮
      • 1.4.2 単純さ:複雑さの管理
      • 1.4.3 進化性:変更への配慮
    • まとめ 
  • 2章 データモデルとクエリ言語
    • 2.1 リレーショナルモデルとドキュメントモデル
      • 2.1.1 NoSQLの誕生
      • 2.1.2 オブジェクトとリレーショナルのミスマッチ
      • 2.1.3 多対一と多対多の関係
      • 2.1.4 ドキュメントデータベースは歴史を繰り返すのか?
      • 2.1.5 今日のリレーショナルデータベースとドキュメントデータベース
    • 2.2 データのためのクエリ言語
      • 2.2.1 Web上での宣言的クエリ
      • 2.2.2 MapReduceでのクエリ
    • 2.3 グラフ型のデータモデル
      • 2.3.1 プロパティグラフ
      • 2.3.2 Cypherクエリ言語
      • 2.3.3 SQLでのグラフクエリ
      • 2.3.4 トリプルストアとSPARQL
      • 2.3.5 礎となったもの:Datalog
    • まとめ 
  • 3章 ストレージと抽出
    • 3.1 データベースを駆動するデータ構造
      • 3.1.1 ハッシュインデックス
      • 3.1.2 SSTableとLSMツリー
      • 3.1.3 Bツリー
      • 3.1.4 BツリーとLSMツリーの比較
      • 3.1.5 その他のインデックス構造
    • 3.2 トランザクション処理か、分析処理か?
    • 3.3 列指向ストレージ
      • 3.3.1 列の圧縮
      • 3.3.2 列ストレージにおけるソート順序
      • 3.3.3 列指向ストレージへの書き込み
      • 3.3.4 集計:データキューブとマテリアライズドビュー
    • まとめ 
  • 4章 エンコーディングと進化
    • 4.1 データエンコードのフォーマット
      • 4.1.1 言語固有のフォーマット
      • 4.1.2 JSONXML、様々なバイナリフォーマット
      • 4.1.3 ThriftとProtocol Buffers
      • 4.1.4 Avro
      • 4.1.5 スキーマのメリット
    • 4.2 データフローの形態
      • 4.2.1 データベース経由でのデータフロー
      • 4.2.2 サービス経由でのデータフロー:RESTとRPC
      • 4.2.3 メッセージパッシングによるデータフロー
    • まとめ 

非機能要件

信頼性、スケーラビリティ、メンテナンス性といった「非機能要件」についてまとめられた章だった。個人が使うような小規模なプロジェクトであれば、非機能要件については深く考える必要はないかもしれないが、今日のデータ社会においてはとても大切なことだと書かれている。自分もユーザに対してクラウドの導入提案や、導入後の運用相談を受ける場に立ち会うことが多く納得しながら読み進めることができた。

非機能要件についてはマイクロソフトのドキュメントがよくまとまっているのでリンクを貼っておく。

docs.microsoft.com

データモデルとクエリモデルの種類

リレーショナルデータベースとNoSQLのデータモデルについて書かれている章だった。筆者としてはNoSQLのグラフ型データモデルを一般的と書いていたが個人的にはイメージがつかなかった。FacebookのようなSNS系のサービスや道路や鉄道の路線を示すのに使われることが多いようだ。また、知人に質問したところ、システムのネットワークの設定を表す際に使われるケースもあるようだ。グラフデータベースとしてはNeo4jがある

neo4j.com

クエリに関してもまとめられていた章だった。しかしクエリと言われるとSQLしかイメージできなかったためCSSが「Webにおける宣言的クエリ」と紹介されていたのは新鮮だった。

データベースの内部

データベースの内部について書かれている章だった。 一番最初に書かれていたが、世界で最も単純なデータベースが印象的だった。これはgetとsetの2つのBash関数で実装されたものだった。自分もリッチなデータベースを使うほどではないが、データをスタックとして保存したいときがあり似たような実装をしたことを思い出した。

OLTP(オンライン・トランザクション・プロセッシング)とOLAP(オンライン・アナリティク・プロセッシング)についてもまとめられていた。

業務ではBIツールなど分析に関係するものが中心なのでOLAPは親しみがあったが、文章にも「データウェアハウスやそれに分類する分析システムは、エンドユーザではなく主にビジネスアナリストが使用するものなので、それほど知られてはいません。」と書いてありあらためて自分がニッチな業務に携わっているんだなと自覚できた。

普段触らないOLTP側の話では、「log-structured」と「インプレース」の考え方があることを学べた。

まとめ

  • データ指向アプリケーションデザイン の第I部を読んだ
  • 第I部データシステムの基礎と題されている通り、分野的に広く書かれていた
  • 自分が知っていることと知らないことの再確認が出来た

参考文献

データ指向アプリケーションデザイン ―信頼性、拡張性、保守性の高い分散システム設計の原理

データ指向アプリケーションデザイン ―信頼性、拡張性、保守性の高い分散システム設計の原理

学び効率が最大化するインプット大全 を読んだ!

「学び効率が最大化するインプット大全」 を読んだ。昨年発売された 「学びを結果に変えるアウトプット大全」 のインプット版となっている。読むこと、聞くこと、見ることに関する効率のいいインプットの仕方や現代に即したインターネットを使ったインプットの方法などが書いてある。一回読んで終わりの本ではなく、成長が伸びていないときに何度も読み直すような本であると感じた。また、様々なTipxが書いてあるが一度に全部やるのも難しいので、コツコツ取り入れていくと良さそう。

学び効率が最大化するインプット大全

学び効率が最大化するインプット大全

学びを結果に変えるアウトプット大全 (Sanctuary books)

学びを結果に変えるアウトプット大全 (Sanctuary books)

目次

  1. インプットの基本法則―RULES
  2. 科学的に記憶に残る本の読み方―READ
  3. 学びの理解が深まる話の聞き方―LISTEN
  4. すべてを自己成長に変えるものの見方―WATCH
  5. 最短で最大効率のインターネット活用術―INTERNET
  6. あらゆる能力を引き出す最強の学び方―LEARN
  7. インプット力を飛躍させる方法“応用編”―ADVANCED

インプットの基本法則―RULES

「インプット」と「目標設定」は必ずペアで行ってください と書いてあった。核心を突かれたように「そうだよなぁ」と落ち込んでしまった。自分のアウトプットは面白そうなことに飛びついてそれをさらっと書く傾向にある。これは本で指摘のあるような、インプットとそれに対する目標設定が出来ていないからだと自覚できた。

6月までの部署では自分の興味あるところをつまみ食いしていた。これはWeb系に興味があった時期でもあり、Vue.jsやFirebaseなどの新しく出てきたサービスを触っていた。7月に部署が変わったこともあり、Azureを触ることになった。広く見ればクラウドであり、インフラ環境を整えるためのサーバやネットワークの知識が足りていないことが自覚できている。また、PaaS知らないものが多いので覚えていかなければならないと考えている。

科学的に記憶に残る本の読み方―READ

情報の偏りをなくす「3点読み」 が感銘を受けた。本を読むことは時間もかかればお金もかかるので1冊でもとを取ろうとしがちだと思う。メリットを述べている本、デメリットを述べている本、中立の立場で書かれている本の3冊を読むことがバランスをとったインプットができると書いてあった。忙しい人はメリットデメリットの2点だけでもやってみたほうが良さそう!自分はWebで情報を検索する際にGoogleのトップに出てくる10ページをすべて開くようにしている。本に書いてあったのと同じようにバランスよくインプットができると思ってやっていたし、やたらめったら読むのではなく表示された10ページは必ず読もうと決心できるのでおすすめ!

学びの理解が深まる話の聞き方―LISTEN

この本は研究結果も広く載っている。この章では、 「「勉強をするときに音楽をかけると、著しく効率が下がる」 と書いてあった。やはり人間はマルチタスクが出来ないようで、「勉強する」ことと「音楽を聞くこと」は交互に処理をしています。その結果、頭の中ですごい負荷化がかかり勉強の効率が落ちるそうです。勉強の前にテンポの速い曲を聞くと効率は上がるそうです。自分はプロレスが好きなのですが入場曲のように聞いて勉強の開始タイミングまでに聞こうと思う。

勉強のときに音に関して言えば、勉強中は無音やカフェぐらいの雑音が良いそうです。自分は作業中に最近買ったSONY ワイヤレスノイズキャンセリングイヤホン WF-1000XM3を使っている。移動のときでも雑音を切ってくれるので非常におすすめ。

すべてを自己成長に変えるものの見方―WATCH

観察力の見方を鍛える方法ということで、 「アウトプットを前提にする」 ということが書いてあった。なんとなくの流し見をすると自分自身がインプットしている情報しか目に入らなくなるので、アウトプットの形にするためには何が足りていないかを目を凝らして読むといいことを感じた。何事も自分の現状との比較から自分の知らない世界を広げていき、成長の伸びしろとなっていくように感じる。

最短で最大効率のインターネット活用術―INTERNET

インターネットで情報を効率よく取るということは書いるが、スマホの利用を1日1時間にするということも書いていた。朝起きてから寝るまで常にともにするようになったスマホだが、使いすぎもよくない。これを読んだときに業務中もちょこちょこいじったりしている自分を思い出した。今後を考えて、スマホの制限や通知のカスタマイズ、さらにはデジタル断捨離を行うことも検討する。

おわり

アウトプット大全に続き、インプット大全も読了した。むやみやたらに手を付けてインプットしていることを反省したが、インプットした内容は10年後に活きてくると書いてもあった。ポジティブに捉えれば意欲が落ちているわけではないので、冷静に分析し正しいベクトルにインプットを向けていきたい。

  • インプットを効率よくおこなうためのTipsが多く学べた
  • この本を読むだけでなく、自分の学びや生活に取り入れていきたい
  • まずはできることからコツコツと…

学び効率が最大化するインプット大全

学び効率が最大化するインプット大全

学びを結果に変えるアウトプット大全 (Sanctuary books)

学びを結果に変えるアウトプット大全 (Sanctuary books)

RaspbianにDockerをインストール

RaspbianではDockerをインストールする際は手順が少し違うのでメモをしておく。 注意が必要だが、Raspberry piUbuntuなどをインストールしている場合は正規の手順でインストールが可能である。

Rasbianではテスト開発環境用のシェルスクリプトをダウンロードし、それを実行することでDockerをインストールすることができる。 少し使ってみた感想だがMacWindowsで使っているものとコマンドでは大差はなさそうであった。 しかし、公式サイトでは「Raspbianは通常のインストールが出来ないこと」を念押しのように記述されているので、細かい挙動は少し違うのかもしれない。 実稼働でも適さないことが書いてあるので、本番環境では使わないほうが良い。

下記のURLにアクセスすると、実行するシェルスクリプトを確認することができる。2019/09/15現在の物を文末に貼り付けておく。

https://get.docker.com

update & upgrade

sudo apt-get update && sudo apt-get upgrade

Docker

シェルスクリプトをダウンロードし実行するだけである。 コマンドの結果にも出てくるが、ルートユーザ以外で実行する場合はDockerグループに該当のユーザを登録する。

curl -sSL https://get.docker.com | sh

sudo usermod -aG docker pi

ソースコード

【完成】自作キーボード「GINGHAM」を作った!

【2019/09/15追記】 完成しました!!!

1週間後に再び遊舎工房さんへ行き完成させました!

原因は色の似ているパーツを間違えてはんだ付けしていました。 そのパーツたちを入れ替えたら無事に機能しました!

親身に原因分析を手伝ってくださったスタッフさんに感謝しています! ありがとうございました!

【2019/09/15追記】

エンジニアの中で流行っている自作キーボードに興味を持ったので、夏休みの期間を使って挑戦してみた!

Twitterで雑に呟いたら友人のごまなつさんが反応してくださって実現にこぎつけました。 ごまなつさんありがとうございます!

今回作ろうと思ったものは「GINGHAM」です。 遊舎工房さんではいろんな完成品キーボードが展示されていて、その中から選びました。

github.com

選んだ理由は以下のとおりです。

  • 初めて作るのでセパレートタイプが怖かった
  • 60%ほどのシンプルなものがよかった

開封レビューではありませんが、写真を撮っておいたので載っけていきます。

f:id:yoshitaku_jp:20190908161820j:plain
ギンガムチェックの可愛い箱です

f:id:yoshitaku_jp:20190908161825j:plain
基盤以外のアイテム

中には付属品たちが

ダイオードやスイッチなどをはんだ付けしていきました

キースイッチをはめたところです

キーキャップをつけたところです。

まとめ

自作したキーボードは最終的にファームウェアを書き込んで完了となるようです。しかし、そのファームウェア書き込みする前段階でセッティング用PCがキーボードを認識してくれず完成できませんでした。

遊舎工房のスタッフさんが閉店ギリギリまで手伝ってくださったのですが、沼にハマってしまったようで未完のまま帰宅しました。 ソフトウェアもバグの原因を探るのは難しいですが、ハードウェアも難しかったです。何より画面に情報が出ないとなると探り用がありませんでした。

ここまで来たら完成させたいので、またタイミングを見て遊舎工房さんへ行き作り上げようと思います。

じぶん Release Notes 0.29.4

f:id:yoshitaku_jp:20190901155555p:plain 8月1日〜31日のあいだの出来事がリリースされました。

技術・開発関連

技術面での取り組みは以下の通りです。

  • RaspberryPiにKubernetesを導入する
  • Raspberry Pi zero WHにk3sを導入する
  • Vision AI Developer Kitを使って、Azure IoT Edgeにふれた

イベント

参加したイベントは以下の通りです。

読んだ

買ったもの

主要な買い物は下記の通りです。

  • Ricoh GR Ⅲ
    • いろんな思い出を写真に残したくなったから購入
  • WF-1000XM3

ブログ

リリースノートを除き、次のエントリを書きました。

技術記事を書かない週があったので、ストック+1

PV数

8月は3309でした

f:id:yoshitaku_jp:20190901153030p:plain

仕事

  • ハンズオンセミナーの進行役をやりました
  • 提案活動に関わる作業をこなしました
    • 事前準備をおこないお客様の前で自信を持って話せるようにしたい

良かったこと・反省点

  • 自分の知らない技術に触れられて楽しい
  • 自分が学んだことをうまくまとめ、伝えられなくて悲しい
  • 自分の理解が追いつかないことがあり悔しい
  • 書評記事がうまくかけなくて悔しい
  • OJTの振り返りをしたがコーチングがうまくいかなかった

  • 月末に一気に書くと思い出せないので、毎日or毎週追記していこうと思う。

ネクストリリース

  • 次回のリリースは2019/10/01です

HTTPとの対比から学ぶMQTT

Maker Faire TokyoでMQTTを使ったものを展示したが、自分もMaker Faire Tokyoで展示物を作成する前はMQTTについて知らなかった。知り合いのエンジニアに聞いてみても知らない人が多く、基本的なことが中心だが自分なりにまとめてみた。

MQTTとは

簡単な概要であるが、MQTTはMessage Queuing Telemetry Transportと呼ばれる1990年代にIBMが開発したプロトコルである。 通信のプロトコルとしては普段我々がWebで使っているHTTPがメジャーであるが、MQTTはIoTデバイスを中心に広く利用されている。

特徴

特徴は次の3つになる。

  • 非同期通信
  • 1対多、多対多
  • 軽い

非同期通信

MQTTは非同期通信となっている。 HTTPは同期通信であり、この点でまず異なっている。 同期通信は、クライアントが問い合わせ先のサーバへリクエストを発行し、それに対するレスポンスを待つ通信である。 このHTTPのリクエスト/レスポンスの動作が、日頃から使っているWebブラウザは対応できるがIoTデバイスには対応することが難しいのである。 理由は2つあり、我々が普段使っている環境のようにネットワークが安定しているとは限らないこととIoTデバイスが使う通信の帯域幅に制限があるからである。 非同期通信であれば、送る側と受け取り側が相手の反応を待っている必要がないため、IoTにおいては広くMQTTが採用されている。MQTTにおいて非同期通信を実現するために働いているのが「パブリッシャー」「サブスクライバー」「ブローカー」である。

パブリッシャー / サブスクライバー / ブローカー

通信における登場人物は、送る側の「パブリッシャー」、受け取り側の「サブスクライバー」、パブリッシャーとサブスクライバーの仲介をする「ブローカー」である。

f:id:yoshitaku_jp:20190827192450p:plain

通信の流れは、最初にセンサーデータなどを送る側のパブリッシャーが仲介役のブローカーに対してデータを送る。次に受け取る側のサブスクライバーは仲介役のブローカーに対してセンサーデータが届いているか確認しにいく。センサーデータがあれば、その情報を受け取るという流れである。

ここではクライアントとサーバが直接やり取りをしているHTTPとは違い、パブリッシャーとサブスクライバーがブローカーを介している部分が重要である。

1対多、多対多

MQTTは1対多、多対多の通信をおこなえるプロトコルである。 HTTPは1対1の通信をおこなうプロトコルであり、この点で異なっている。 非同期通信の項でも書いたが、クライアントが問い合わせ先のサーバからのレスポンスを待ちデータを受け取る通信であるため、1対1となる。 IoTデバイスは大量のデバイスに対して通信をおこなう場合があり、1対1のHTTPは適しているとは言えない。 そこで仲介役のブローカーにパブリッシャーとサブスクライバーがアクセスしていることを利用し、ブローカー内でメッセージの格納先を決めて1対多、多対多を実現している。 このメッセージの格納先のことをトピックと呼ぶ。

トピック

MQTTは「トピック」でブローカー内でのメッセージの格納先を決めている。 トピックは/(スラッシュ)で階層化をおこない、特定のメッセージだけを操作するように指定できる柔軟性を備えている。

f:id:yoshitaku_jp:20190827192522p:plain

階層化なので、抽象的な粒度から具体的にする。 簡単ではあるが例をあげておく。

/OS
/OS/Ubuntu
/OS/Ubuntu/18.04.3
/OS/Ubuntu/16.04.6
/OS/CentOS
/OS/CentOS/6
/OS/CentOS/7
/IoT
/IoT/RaspberryPi
/IoT/RaspberryPi/3ModelB+
/IoT/RaspberryPi/Zero
/IoT/Arduino
/IoT/Arduino/Nano
/IoT/Arduino/Yun

また、1対多、多対多と書いたがメッセージを置くトピックにはワイルドカードが使える。 /IoT/*とすれば、/IoT/RaspberryPi/IoT/Arduino配下のすべてのものにメッセージを送信でき、/IoT/RaspberryPi/*とすれば、/IoT/RaspberryPi/3ModelB+/IoT/RaspberryPi/Zeroに送信できる。

軽い

MQTTのデータ通信量が軽いことについて説明しようとしたが、自分がやりたかった調査を非常にわかりやすくかつ具体的な数字で解説されているページを見つけたのでリンクを貼らせてもらう。

www.ydc.co.jp

また、消費電力とデータサイズの軽さについて調べている記事もあったのでリンクを張っておく。

qiita.com

まとめ

MQTTについてまとめた。 比較対象にHTTPを使ったことでHTTPについても学ぶことができたし、自分の中で適切な棲み分けが意識できるようになった。 MQTTについて学んだことの整理と、知らない人に対してどう説明したら良いか考えるきっかけになった。

参考

https://kfep.jp/solution/iot-mqtt/mqtt

https://www.ibm.com/developerworks/jp/iot/library/iot-mqtt-why-good-for-iot/index.html

https://qiita.com/darai0512/items/37158f56e9a6b4ce83ed

http://tech-blog.rakus.co.jp/entry/20180912/mqtt/iot/beginner

https://gist.github.com/voluntas/e0a90f3e22316144ed3a

https://blogs.akamai.com/jp/2019/06/iot---iot-egge-connect--.html

https://amg-solution.jp/blog/15787

https://monoist.atmarkit.co.jp/mn/articles/1606/01/news017.html

Raspberry Pi zero WH でk3sはどこまで動くか

Raspberry PiKubernetesを導入し動作確認をしている。 なかなか時間がかかることもあり、その間にRaspberry Pi Zero WHにk3sがどこまで動くか実験してみた。 Raspberry Pi Zero WHに馴染みがない人もいると思うので、OSとスイッチサイエンスさんが載せているスペックを引用させていただく。

  • os
    • Debian Stretch with Raspberry Pi Desktop
    • Version
      • April 2019
    • Release date
      • 2019-04-11
    • Kernel version
      • 4.9
仕様

メモリ: 512 MB RAM
USB 2.0 ポート: microB(OTG接続)
映像出力: miniHDMI(ひとまわり小さいHDMI!!)
ストレージ: microSDメモリーカードスロット(SDIO対応)
低レベル周辺機器: 27 × GPIO、UART、I2C、SPIと二つのチップセレクト、+3.3 V、+5 V、GND
カメラコネクタ: Raspberry Pi Zero用カメラケーブルコネクタ(Raspberry Pi 3とはサイズが異なります)
電源ソース: 5 V / USB Micro-Bコネクタ または GPIOコネクタ
無線通信機能
802.11 b/g/n wireless LAN
Bluetooth 4.1
Bluetooth Low Energy (BLE)

https://www.switch-science.com/catalog/3646/

インストール

rancherのGitHub上にインストール方法が書いてあるので、そのとおり実行する。

https://github.com/rancher/k3s

まずは curl -sfL https://get.k3s.io | sh -

実行

sudo k3s server &

実行してみたが起動しなかった。 Kubernetesより軽いと言われるk3sだが 、流石にZero WHでは難しいようだ。 一回目の調査としてはここまでとするが、解決策が見つかりそうであれば調べて追記していく。 もう少し先までできるのではないかと思っていたので非常に残念だった。

エラーコード