よしたく blog

ほぼ週刊で記事を書いています

RaspberryPiとM5StackをMQTTでつなぐ

RaspberryPiをMQTTブローカーにして、M5Stackから送られるメッセージを受信する。

RaspberryPiの設定

まずはMQTTブローカーをインストールする。 MQTTブローカーのオープンソースである、「mosquitto」を使う。

sudo apt-get install mosquitto

MQTTブローカーの起動や停止はserviceから実行できる。

service mosquitto start
service mosquitto stop

今回、RaspberryPiではMQTTブローカーとしての役割とM5Stackからのメッセージ受信もおこなうのでmosquitto-clientsをインストールする。mosquitto-clientsをインストールすることで、メッセージの送信と受信ができる。MTQQブローカーとしての役割だけだったらインストールする必要はない!

sudo apt-get install mosquitto-clients

M5Stackへソースを書き込む

今回はこちらのサイトのソースを編集して使わせてもらった。 Arduino IDEからM5Stackへ書き込む。

#include <WiFi.h>
#include <PubSubClient.h>
#include <M5Stack.h>
 
// Wi-FiのSSID
char *ssid = "YOUR-SSID";
// Wi-Fiのパスワード
char *password = "YOUR-PASSWORD";
// MQTTの接続先のIP
const char *endpoint = "YOUR-MQTT-IP";
// MQTTのポート
const int port = 1883;
// デバイスID
char *deviceID = "M5Stack";  // デバイスIDは機器ごとにユニークにします
// メッセージを知らせるトピック
char *pubTopic = "/pub/M5Stack";
// メッセージを待つトピック
char *subTopic = "/sub/M5Stack";
 
////////////////////////////////////////////////////////////////////////////////
   
WiFiClient httpsClient;
PubSubClient mqttClient(httpsClient);
   
void setup() {
    Serial.begin(115200);
     
    // Initialize the M5Stack object
    M5.begin();
 
    // START
    M5.Lcd.fillScreen(BLACK);
    M5.Lcd.setCursor(10, 10);
    M5.Lcd.setTextColor(WHITE);
    M5.Lcd.setTextSize(3);
    M5.Lcd.printf("START");
     
    // Start WiFi
    Serial.println("Connecting to ");
    Serial.print(ssid);
    WiFi.begin(ssid, password);
   
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
 
    // WiFi Connected
    Serial.println("\nWiFi Connected.");
    M5.Lcd.setCursor(10, 40);
    M5.Lcd.setTextColor(WHITE);
    M5.Lcd.setTextSize(3);
    M5.Lcd.printf("WiFi Connected.");
     
    mqttClient.setServer(endpoint, port);
   
    connectMQTT();
}
   
void connectMQTT() {
    while (!mqttClient.connected()) {
        if (mqttClient.connect(deviceID)) {
            Serial.println("Connected.");
            int qos = 0;
            mqttClient.subscribe(subTopic, qos);
            Serial.println("Subscribed.");
        } else {
            Serial.print("Failed. Error state=");
            Serial.print(mqttClient.state());
            // Wait 5 seconds before retrying
            delay(5000);
        }
    }
}
   
long messageSentAt = 0;
int count = 0;
char pubMessage[128];
int led,red,green,blue;

  
void mqttLoop() {
    if (!mqttClient.connected()) {
        connectMQTT();
    }
    mqttClient.loop();
}
 
void loop() {
 
  // 常にチェックして切断されたら復帰できるように
  mqttLoop();
 
  // 5秒ごとにメッセージを飛ばす
  long now = millis();
  if (now - messageSentAt > 5000) {
      messageSentAt = now;
      sprintf(pubMessage, "{\"count\": %d}", count++);
      Serial.print("Publishing message to topic ");
      Serial.println(pubTopic);
      Serial.println(pubMessage);
      mqttClient.publish(pubTopic, pubMessage);
      Serial.println("Published.");
  }
}

実行

M5Stack

M5Stackへ無事に書き込みが完了し起動をすると、M5StackはMQTTブローカーへ向けてメッセージを送信し続ける。 5秒ごとに数字が1上がり、その値をメッセージとして/pub/M5Stackへ送信している。

/pub/M5Stackはメッセージがおいてある場所を指しており、「トピック」と呼ばれる。 送信者は指定したトピックにメッセージを送信する。 トピックはディレクトリのように「/(スラッシュ)」で区切って利用する。

/pub/M5Stack
/pub/RaspberryPi
/pub/Arduino
/pub/IoT

/message/room1
/message/room2
/message/room3

RaspberryPi

RaspberryPiはmosquitto_subコマンドを実行し、MQTTブローカーへ問い合わせる。 - 実行

mosquitto_sub -d -t /pub/M5Stack
  • 結果
{"count": 1}
{"count": 2}
{"count": 3}
{"count": 4}
...
{"count": n}

textlintでブログの文章を整える

f:id:yoshitaku_jp:20190620121524p:plain

今までこのブログの文章は、はてなブログ上のエディタで書いていた。 最近はnoteでも文章を書くことがあり、複数アプリで置き場所が1つにならないのが煩わしくなり文章の管理をGitHub上に持ってきた。 普段使っているVS Codeで文章が書けることになったので、このタイミングで「textlint」を導入した。 文章上のルールや専門用語のチェックをおこない正しい文章を書いていきたい。

textlintの準備

npmを使い「textlint」をインストールする。

npm install --save-dev textlint

1から文章のルールを作成することもできるが、今回はすでにルールプリセットを公開してくださっている方のものを利用させてもらう。 https://github.com/textlint-ja/textlint-rule-preset-ja-technical-writing

npm install --save-dev textlint-rule-preset-ja-technical-writing

また、技術用語のチェック用辞書もインストールする。こちらはルールプリセットを公開してくださっている方が作っているもので、WEB+DB PRESS用語統一ルールをベースにされている。

npm install --save-dev textlint-rule-spellcheck-tech-word

設定ファイルの準備

ここまで次のもののインストールが完了したら、設定ファイルを作成する。

  • textlint
  • textlint-rule-preset-ja-technical-writing
  • textlint-rule-spellcheck-tech-word

「textlint」をおこないたいフォルダーでtextlint initを実行し.textlintrcを生成する。 自分はarticlesフォルダをルートとし、配下にhatenablogフォルダ・noteフォルダを作成している。 今回はarticleフォルダでtextlint initを実行した。

- article
  - .textlintrc ←ココに作られる
  - hatenablog
    - *.md
  - note
    - *.md

.textlintrc の中に次の記述をする。設定したルールが適応される。今回は事前にインストールしたものを設定した。

{
  "rules": {
    "preset-ja-technical-writing": true,
    "spellcheck-tech-word": true,
  }
}

これで 「textlint」 自体の設定は完了した。コマンドライン./node_modules/.bin/textlint ./*"を実行すると 「textlint」 された結果がコンソールに表示される。

vscode-textlintをインストールする

自分はVS Codeを利用しているので、VS Code拡張機能を利用する。 拡張機能から vscode-textlint」 を検索しインストールする。 特に難しい部分ではないので割愛する。

画面上での動き

VS Codeを起動する際に注意するところがあるので先に載せておく。 vscode-textlint」 を利用する場合、.textlintrcが存在するフォルダをVS Codeで開かないといけない。 今回の説明では、articleフォルダに配置したのでarticleフォルダを開く。

- article
  - .textlintrc ←ココに作られる
  - hatenablog
    - *.md
  - note
    - *.md

下記の例だと、workspace配下でVS Codeを開くと.textlintrcがないため、vscode-textlint」 が正しく動作しない。

- workspace
  - hoge
  - fuga
  - article
    - .textlintrc
    - hatenablog
      - *.md
    - note
      - *.md

使えるようになると、次のように警告を出してくれる。

f:id:yoshitaku_jp:20190620120940p:plain

これは正式な表現がJavaScript」なのに対して、Javascript」になっていると警告されている。

【Vue.js】クライアントサイドで環境変数を使う

vue-cli3になったことによって、環境変数を扱うことが非常に簡単になった。その中でもクライアントサイドで利用することができるようになったことが非常にありがたい機能だと思った。

4種類のファイル名

プロジェクトのルートに環境変数を記述したファイルを配置し環境変数を利用できる。ここではsrc配下ではないので注意が必要。

認識できるファイル名には4種類ある。

  • .env
  • .env.local
  • .env.[mode]
  • .env.[mode].local

.envは、すべてのタイミングで読み込まれる。

.env.localは、すべてのタイミングで読み込まれるが、gitの管理下からは外れる。

.env.[mode]は、development test productionなどのモードの中から指定されたモードのときだけ読み込まれる

.env.[mode].localは、development test productionなどのモードの中から指定されたモードのときだけ読み込まれるが、gitの管理下からは外れる。

f:id:yoshitaku_jp:20190615233411p:plain
プロジェクト作成直後。自動でGitの管理下からは外れている。

クライアントサイドで環境変数を使う

他の言語同様ファイルの中でキー・バリューを設定する。このときに接頭辞としてVUE_APP_を付与することで、クライアントサイドでも環境変数を使うことができる。VUE_APP_を付与しないとundefinedとなる

VUE_APP_TITLE=env
TITLE=title
console.log(process.env.VUE_APP_TITLE) // env
console.log(process.env.TITLE) // undefined

Vuetify.jsのインストール方法

Vue.jsのUIフレームワーク「Vuetify.js」 がある。Webアプリを作っているときに、CSSがうまく表現できなかったのでUIフレームワークとして導入してみた。その導入する際に、0からインストールする方法と現在走っているプロジェクトに導入する方法で異なる点があったのでまとめる。

インストール

まずはnpm install vuetify --saveyarn add vuetifyを実行し 「Vuetify.js」 をインストールする。ここから新規プロジェクトに導入する場合と、既存のプロジェクトに適応する場合で少し異なるので注意が必要。自分が既存のプロジェクトに適応されるときにミスをしたので同じミスをしてほしくない思いから既存プロジェクトに適応する方法を先に書く。

既存プロジェクトに適応させる

「Vuetify.js」 のインストールが終わったら、index.jsmain.jsに次の記述しをする。Vue.useメソッドで 「Vuetify.js」プラグインとして利用する宣言をする。

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

「Vuetify.js」CSSファイルを読み込ませるためにindex.jsmain.jsへ次の記述をする。

import 'vuetify/dist/vuetify.min.css'

最後にindex.htmlに次のフォントを読み込ませて終了。

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

新規プロジェクトで導入する

vue create pg-vuetifyを実行し、Vueの環境を作成する。今回は導入することを優先するので、デフォルトで進める。作成した環境に移動しvue add vuetifyを実行し、 「Vuetify.js」 を導入する。 「Vuetify.js」 を導入する際もデフォルトの設定で実施する。無事に環境が作成されると次のファイルが作成・更新される。

.gitignore
README.md
babel.config.js
package.json
public/favicon.ico
public/index.html
src/App.vue
src/assets/logo.png
src/assets/logo.svg
src/components/HelloWorld.vue
src/main.js
src/plugins/vuetify.js
yarn.lock

今回の記事の中で、既存プロジェクトに導入する手順を最初に書いたのはファイルが更新されてしまうのが理由であった。gitでバージョン管理をしていればファイルが更新されてもあまり心配はないかもしれないが、バージョン管理をしていないときは注意が必要。

まとめ

  • 「Vuetify.js」 のインストール手順を試した
  • 既存のプロジェクトに導入するときは、ファイルが上書きされないように注意が必要

じぶん Release Notes 0.29.1

f:id:yoshitaku_jp:20190601202426j:plain

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

自分リリースノートとは、こちらの記事を参照してください。 blog.a-know.me

初回なのでフォーマットは全てお借りしているものです。

技術・開発関連

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

イベント

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

  • お世話になった会社の先輩の送別会に参加しました。
  • Write-Blog-Every-Weekのメンバーの送別会の幹事をしました。

読んだ

  • Webを支える技術
    • HTTPの章

買ったもの

主要な買い物は下記の通りです。 - 無印良品のベッド

ブログ

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

PV数

5月は4327でした

f:id:yoshitaku_jp:20190601184540p:plain

仕事

  • 部署異動の話し合いをし、7月から所属部署が変わることになりました。

5月に直接お会いした方には感謝の言葉を述べさせていただきましたが、悩み・相談に乗ってくださった方ありがとうございました。

KPT

K

  • ベッドを買って快適になった
  • 断捨離をして荷物が減った
  • 部署の飲み会に初めて参加した
  • 岩手と宮城へ行った
  • サイトの改善をして褒められた

P

  • コミュニケーションを積極的に取れなかった
  • 太った
  • 本を読む時間が取れなかった

T

  • ソファを買う
  • 関わる機会が少なかった人とコミュニケーションを取る
  • 頭の中だけで完結せず話し合う
  • 運動の頻度を週2に増やす
  • 積極的にフィードバックをもらいに行く
  • 次回のリリースは2019/07/01です

Go言語のstrings.Replaceを使って、改行コードを含む環境変数を置換する

f:id:yoshitaku_jp:20190529181651j:plain

GoとNetlifyを使って簡易的なAPIサーバを構築した。 処理の中でGoogleスプレッドシートにアクセスする必要があり、認証情報をNetlifyの環境変数に設定した。しかし、環境変数から改行コードを含む値を取得する時にハマった。一般的な、どの環境でも起こりうるので気をつける。

今回はGo言語で実装していたこともあり、strings.Replaceを使って解決した。

環境

go1.12.5

ソース

package main

import (
    "fmt"
    "os"
    "strings"

)

func main() {

    fmt.Println(os.Getenv("HOGE"))
    fmt.Println("----------------")
    fmt.Println(strings.Replace(os.Getenv("HOGE"), "\\n", "\n", -1))

}

出力結果

set HOGE="Hello\nWorld" && go run main.go

"Hello\nWorld"
----------------
"Hello
World"

まとめ

  • Netlifyの環境変数に認証情報を設定した。
  • 改行コードが値に含まれていたためハマってしまいました。
  • ReplaceAll という関数もあり、これは必要な引数が違う

参考

blog.konboi.com

qiita.com

Gopherくん

github.com

Go言語のgofeedを使ってRSSをパースする

f:id:yoshitaku_jp:20190527152510p:plain

目次

きっかけ

Write-Blog-Every-Weekのメンバーのブログ情報をとってくるときに、GAS上でRSSをパースしていました。しかし、今後複数人でメンテナンスをする可能性ができたため、GAS上から移動させることとなりました。JS繋がりでnode.jsへ移行することも考えましたが自分の中でnode.jsへの理解が追いつかず、せっかくなので新しい言語のGo言語へ移行することにしました。

gofeedを使う

タイトルにもある通りgofeedを使いました。「go feed」で調べたときに、広そうな検索ワードであったにもかかわらず上位に出てきたためです。

github.com

環境

go version go1.12.5 darwin/amd64

インストール

go get github.com/mmcdole/gofeed

ソース

今回のソースコードは、自分のはてなブログに対して実行しています。様々なURLに変更して試してみてください。

package main

import (
    "fmt"

    "github.com/mmcdole/gofeed"
)

func main() {

    url := "https://yoshitaku-jp.hatenablog.com/rss"

    fp := gofeed.NewParser()
    feed, _ := fp.ParseURL(url)

    items := feed.Items

    for _,item := range items{
        fmt.Println(item.Title)
        fmt.Println(item.Link)
    }    
}

出力結果

Wrappalyzerを使ってサイトで使われている技術を見てみよう
https://yoshitaku-jp.hatenablog.com/entry/2019/05/19/070000
基本は大切 / Vue.js チュートリアルのToDoリスト作成から学んだこと
https://yoshitaku-jp.hatenablog.com/entry/2019/05/06/190000
前向きになろう / 理論と事例でわかる自己肯定感を読んだ
https://yoshitaku-jp.hatenablog.com/entry/2019/05/05/233000
わかりやすい説明を / 技術をつたえるテクニック ~分かりやすい書き方・話し方~ を読んだ
(中略)

まとめ

RSSを取得してパースする処理が簡単にかけました。GASでは自分でパースしていたので全員分のブログ情報を取得できていませんでしたが、ライブラリを使ったことにより無事全員のブログを表示することができました。非常に嬉しいです。

write-blog-every-week.netlify.com

おしまい

Wrappalyzerを使ってサイトで使われている技術を見てみよう

自分が作ったプロダクトや関わったプロジェクトでどのような技術が使われているか知らない人はいないとおもいます。ですが、他人や他社がどんな技術をサイトに採用しているか気になったとしても、知ることは難しいはずです。そんな時に使えるのがWappalyzerです。

www.wappalyzer.com

友人にWappalyzerを教えてもらって、自社のサイトにどんな技術が使われているのか見たりして楽しみました。

使い方

Wappalyzerはサイトでどのような技術が使われているか確認することができます。 使い方は次の2つです。
1. Wappalyzerにアクセスし、知りたいサイトのURLを入力する
2. ブラウザの拡張機能を導入し、知りたいサイトにアクセスする

使ってみよう

実際にTwitterのサイトで使って確認してみました。Twitterでは次のものを使っているようです。

  • Analytics : Google Analytics
  • JavaScript Framework : React
  • Web Framework : express
  • Miscellaneous : webpack
  • Web Server : Express
  • Programming Language

情報が多く表示されるサイトもあれば、表示されないサイトもあります。 自身が所属している企業や、自身が気になっている企業の情報を調べて見ると面白いのではないかと思います。

f:id:yoshitaku_jp:20190514165743p:plain

他の使い方

分野ごとで採用されているプロダクトの割合や、各技術を採用しているWebサイトの一覧が見れます。

Web Servers

これはWebサーバーの割合です。Apache、Nginxが上位でIIS、OpenGSEと続いています。

www.wappalyzer.com

React

Reactを使っているWebサイトの一覧です。

www.wappalyzer.com

Vue.js

Vue.jsを使っているWebサイトの一覧です。

www.wappalyzer.com

まとめ

今回はサイトで使われている技術を見ることの出来るWappalyzerを紹介しました。 サイトによっては使っているバージョンまで確認することができるので、転職活動を考えている人にとっては企業研究に使えたりするのではないでしょうか?

基本は大切 / Vue.js チュートリアルのToDoリスト作成から学んだこと

今回はVue.js チュートリアルをおこなっていて、改めて自分が理解できていないことをまとめました。実際におこなったチュートリアルは「基礎から学ぶ Vue.js」の付録についていたものです。

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

cr-vue.mio3io.com

ローカルストレージ API の使用

ユーザのブラウザに情報を保存する方法です。自分は勉強を始めたとき、Vue.jsとFirebaseを使って実装をはじめてしまったために通らない道でした。どの環境でもある機能ですし、簡単なプロトタイプを作るときは積極的に使っていこうと思いました。 まずはローカルで使えるデータベースのように捉えればよく、データの追加・データの取得、データの削除ができることがわかりました。

  • データの追加
    • localStorage.setItem(keyName, keyValue)
      • keyValueには文字列しか保存できない
  • データの取得
    • localStorage.getItem(keyName)
  • データの削除
    • localStorage.removeItem(keyName)

データ追加の「keyValueには文字列しか保存できない」に対する対策は、JSON.stringify(obj)を使いJSON 文字列に変換して使うようにすると良いということがわかりました。

ref 属性

ref属性をつけると、DOMに直接アクセスすることができることがわかりました。 過去に何度も様々なところでthis.$refs.hogeって書いてありましたが、ちゃんと調べずに使っていました。

公式ガイドにも次のURLで記述がありました。

https://jp.vuejs.org/v2/guide/components-edge-cases.html#子コンポーネントインスタンスと子要素へのアクセス

次の記事は、Reactではありますがidを使うよりrefを使ったほうが便利なようです。

Reactではidよりrefを使ったほうがいい - Qiita

watch オプションの「ウォッチャ」機能

多くの場合では算出プロパティの方が適切ではありますが、カスタムウォッチャが必要な時もあるでしょう。データの変更に対して反応する、より汎用的な watch オプションを Vue が提供しているのはそのためです。データが変わるのに応じて非同期やコストの高い処理を実行したいときに最も便利です。

算出プロパティのcomputedと似ている機能かつ、computedを使用されるケースが多く、出会いませんでした。非同期などの重い処理をwatchに任せるのが望まれるようで、computedはgetter・setterのようなときにつかうのがよいことがわかりました。引数に変更前の値と変更後の値が設定されるのも特徴でした。

まとめ

どれも基本的な機能ではありましたが、調べてブログにまとめてみました。 もともとはVue.jsとTypeScriptでToDoリストを作って素振りをしてみようと思って始めたのですが、うまくいかずに一度Vue.jsでtodoリストを作るところに戻ってきました。思い返せば、Vue.jsでもToDoリストを作ったことがなかったので心を新たに実施してみましたが非常に学びが多いものでした。

プログラミング問わず、自分が作りたいものを動くように作れるだけでもちろんよいと思います。しかし、ある程度先に進んだときに基本的なところに立ち戻って見ると新しい発見があるんじゃないかと思います。自分の中に「型」をしっかり作ってから「型破り」なことをしていきたいです。

前向きになろう / 理論と事例でわかる自己肯定感を読んだ

技術書典6にて頒布されました。理論と事例でわかる自己肯定感を読みました。

booth.pm

心の中でいろいろ整理が付き、前向きになれた気がするので紹介しておきます。

次の項目に当てはまっている人は読んでみることをオススメします。太字になっているものが個人的には刺さりました。
・どうせうまくいかないと思って挑戦できない
・ 興味がある募集やお誘いを自身がなくって受けられない
・ 自分のことが好きだと思えない
・ありのままの自分を周囲に見せると落胆されたり嫌われるのではないかと思う
・周りの人に受け入れられていると感じられない

・趣味は中のいい友達に合わせる
・自分らしくないと思うことが多い
・周囲に嫉妬したり、否定的になったり、見下したりしていまう
・頑張り続けていないと安心できない
・自分の判断に自身が持てずに、受け身になったり、発言するのが怖い
・褒められても受け入れられない
・気分が落ち込んでしまう
・ストレスに振り回されてしまう

自己肯定感とは

自己肯定感とは、心理学の分野では「自分自身を自ら価値あるものとして感じる」ことだそうです。
自己肯定感には二つの気持ちがあります。 ・ 自分に対して「とても良い」と思う気持ち
・ 自分に対して「これで良い」と思う気持ち

「とても良い」気持ちは他者と比べて感じる優越感であり、「これで良い」気持ちは自分の基準で自分を受け入れて好感を抱く気持ちのようです。 この2つはどちらも大切であり、分けて考えなければいけないところがポイントのようです。 本書では、「とても良い」と「これで良い」がどうやって湧いてくるのかと、気持ちが向上することでの影響について述べられています。

自分はどうか

いくつか当てはまってはいるのですが、周囲の目や評価を気にしすぎてしまうのが自分の中で割合が大きいと思いました。本書によれば「とても良い」気持ちも、「これでよい」気持ちも低いようです。いち早く不安な状態を解消するために短期間での改善が見込める「よても良い」気持ちを改善することからからやってみようと思います。 アプリを作ってみたり、資格をとることが考えられるでしょうか。 今思い返してみれば、Vue.jsでサイトを作り上げて誰かに評価してもらえたことが嬉しかったりしたので、小さなことですが完成さて色んな人に見せて歩くのがいいかもしれません。

感想

技術書典で頒布されたこともあり、心理学の内容ですがIT技術者向けの例が多く取り入れられていて読みやすかったです。式で表すと、「とても良い」気持ち=結果*重要度 と独自に噛み砕いて説明してくれているのも良いところだと思いました。