技術書典に向けてMacにmd2reviewとreviewをインストールしようと思った話

インストールできたのかな・・・？

セットアップで泣きそうになった

何かのご縁で技術書典（いつも書展って変換されてイライラする）に出す同人誌の一部を書くことになり、とりあえずセットアップしようと思ったんです。

ちなみに、私の環境は以下の通り。

MacBook Air (13-inch, Mid 2013)

macOS Sierra 10.12.6

まずはgemとかの更新をした（必要だった？）

とりあえず、Markdown→Re:VIEW形式の変換を行ってくれるmd2reviewと、Re:VIEWからTEXとかもろもろに変換してくれるreviewを入れてみようと思ったわけです。どっちもRuby系のツールだけど、うちのMacってgem入ってたかなーと思い、gem -vしてみたら・・・

$ gem -v
2.0.14.1

ほう、入ってる。なんだ、ﾔﾙｼﾞｬﾝ。

ここで、変なクセを発揮してしまい、何を思ったかgemの更新をしてみたんだ。

$ sudo gem update --system
Updating rubygems-update
Fetching: rubygems-update-2.7.6.gem (100%)
Successfully installed rubygems-update-2.7.6
Parsing documentation for rubygems-update-2.7.6
Installing ri documentation for rubygems-update-2.7.6
Installing darkfish documentation for rubygems-update-2.7.6
Installing RubyGems 2.7.6
YAML safe loading is not available. Please upgrade psych to a version that supports safe loading (>= 2.0).
ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted - /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/gem

え・・・

なんだかYAMLとかなんとかで怒られてる・・・

$ gem -v
YAML safe loading is not available. Please upgrade psych to a version that supports safe loading (>= 2.0).
2.7.6

でもgem -vすると、2.7.6が入ってる。

でも、なんだか相変わらず怒られてる・・・。どうやら、psychをアップデートすれば直るのかな、と思いおもむろにアップデートしてみたんだ。

$ sudo gem update psych
YAML safe loading is not available. Please upgrade psych to a version that supports safe loading (>= 2.0).
Updating installed gems
Updating psych
Fetching: psych-3.0.2.gem (100%)
ERROR:  Error installing psych:
    There are no versions of psych (= 3.0.2) compatible with your Ruby & RubyGems
    psych requires Ruby version >= 2.2.2. The current ruby version is 2.0.0.
Gems updated: psych

また怒られた。軽いDVだ。

rubyが古い。そうか。めんどくさいやつか。

$ sudo gem install psych
YAML safe loading is not available. Please upgrade psych to a version that supports safe loading (>= 2.0).
ERROR:  Error installing psych:
    The last version of psych (>= 0) to support your Ruby & RubyGems was 2.2.4. Try installing it with `gem install psych -v 2.2.4`
    psych requires Ruby version >= 2.2.2. The current ruby version is 2.0.0.

ちなみに、何を血迷ったのかsudo gem install psychしたら、

Try installing it with gem install psych -v 2.2.4

と言われたので、そのとおりにやってみました。

$ sudo gem install psych -v 2.2.4
YAML safe loading is not available. Please upgrade psych to a version that supports safe loading (>= 2.0).
Fetching: psych-2.2.4.gem (100%)
Building native extensions. This could take a while...
Successfully installed psych-2.2.4
Parsing documentation for psych-2.2.4
unable to convert "\xCA" from ASCII-8BIT to UTF-8 for /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-16/2.0.0/psych-2.2.4/psych.bundle, skipping
unable to convert "\xCA" from ASCII-8BIT to UTF-8 for lib/psych.bundle, skipping
Installing ri documentation for psych-2.2.4
1 gem installed

ほうほう。なんだかいい感じ。

$ gem -v
2.7.6

くじけずにgem -vしたら、ヴァージョンは変わってないものの、怒られなくなった。急に優しくなる感じも、まさにDV常習犯だ。

$ ruby -v
ruby 2.0.0p648 (2015-12-16 revision 53162) [universal.x86_64-darwin16]

ちなみに、ruby -vはこの通り。2.0.0でございます。ダメだったらrbenvとかでうまいことヴァージョンを切り替えますが、めんどくさいので2.0.0で進めます。

ようやくreviewとmd2reviewのインストール、だったんだけど

もう怒られたくない、その一心。

とりあえず機嫌のいいうちにreviewをインストールしようと思ったんだ。

$ sudo gem install review
Password:
Fetching: image_size-1.5.0.gem (100%)
Successfully installed image_size-1.5.0
Fetching: rouge-3.1.1.gem (100%)
ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted - /usr/bin/rougify

また怒られた。DVだよこれは。しかもさっきもこの怒られ方をしたようなきがする。

qiita.com

ぐぐってみると、El Capitanから入ったSystem Integrity Protection（rootless）が原因のようで・・・。インストール先を変えることで回避できるらしい。

$ sudo gem install -n /usr/local/bin review
Successfully installed rouge-3.1.1
Fetching: rubyzip-1.2.1.gem (100%)
Successfully installed rubyzip-1.2.1
Fetching: review-2.4.0.gem (100%)
Successfully installed review-2.4.0
Parsing documentation for rouge-3.1.1
Installing ri documentation for rouge-3.1.1
Parsing documentation for rubyzip-1.2.1
Installing ri documentation for rubyzip-1.2.1
Parsing documentation for review-2.4.0
Installing ri documentation for review-2.4.0
3 gems installed

うちの子にも使ってみたら、たしかにインストールできたっぽい。

$ sudo gem install -n /usr/local/bin md2review
Fetching: redcarpet-3.4.0.gem (100%)
Building native extensions. This could take a while...
Successfully installed redcarpet-3.4.0
Fetching: md2review-1.12.0.gem (100%)
Successfully installed md2review-1.12.0
Parsing documentation for redcarpet-3.4.0
unable to convert "\xCA" from ASCII-8BIT to UTF-8 for /Library/Ruby/Gems/2.0.0/extensions/universal-darwin-16/2.0.0/redcarpet-3.4.0/redcarpet.bundle, skipping
unable to convert "\xCA" from ASCII-8BIT to UTF-8 for lib/redcarpet.bundle, skipping
Installing ri documentation for redcarpet-3.4.0
Parsing documentation for md2review-1.12.0
Installing ri documentation for md2review-1.12.0
2 gems installed

ついでにmd2reviewもこの作戦で行くと怒られることはなかった。

$ gem list review

*** LOCAL GEMS ***

md2review (1.12.0)
review (2.4.0)

うんうん、なんかインストールできてるっぽい。できてるっぽいぞ・・・！

・・・やっぱりYOSEMITEのままにしておけば良かったな（ﾎﾞｿｯ

Waveshare 2.13inch e-Paper HAT (B)を買って3色電子ペーパーを楽しむ（値札を作ってみた編）

これが本来の使い方・・・？

毎度毎度のWaveshare電子ペーパーです

前回まで。

relativelayout.hatenablog.com

relativelayout.hatenablog.com

WaveshareのRaspberry Pi向けの電子ペーパーハットです。3色表示可能で、この大きさ。もともとは、スーパーとかで使われるプライスタグ向けの電子ペーパーと思われます。沢山製造されたからこそ、安価な値段で買えるようになってるんですかね。

で、あれば、Python + PILで値札を作るスクリプトをつくって、本来の使い方をしてみよう！というお話です。

スクリプトはこちら

PythonのPILをは本当に神ですね。なんでもできます。

github.com

今回の気づきは以下の通り。

• フォントはM+ FONTSを使わせていただきました。再配布可能な美しいフォントで、これをPILで呼び出して文字を描画しました。もちろん日本語に対応してます。
• ちょっとだけ文字を太くしたかったので、描画を横方向に1pxずらして2回描画してます。無理矢理です。
• 赤をより赤く表示するために、赤く表示するエリアを黒で塗りつぶしています。赤く塗りつぶすと、ドットが所々に表示されてしまうため。

表示させるよー

まずはオシャンな英語から。

一応、こんな感じで4つのエリアの文字を変えられます。

もちろん日本語も表示できます。

いろいろ売りたくなりますよね。

もう、値段じゃなくてもいいわけです。

や、山崎まさよし！

するのねー。

Waveshare 2.13inch e-Paper HAT (B)を買って3色電子ペーパーを楽しむ（画像表示編）

赤が表示できるなら、京急を表示するしかない。

前回は環境構築をしました

relativelayout.hatenablog.com

とりあえず、何かを表示したいのですが、今回の電子ペーパーは赤・黒・白が表示できるので、京急（というか任意の画像）を表示させてみます。

サンプルコードを眺める

本家サンプルコードはこちら。

File:2.13inch-e-paper-hat-b-code.7z - Waveshare Wiki

• ディスプレイのサイズは212x104だけど、ソフト的には横104・縦212の縦長のディスプレイとして扱う
• 黒く表示するところと、赤く表示するところを別々の画像として準備する必要がある
• 画像さえ準備できてしまえば、後はライブラリがよしなに表示してくれる

ほうほう、なかなか特殊な感じ。とりあえず、以前作ったPaPiRus向けに作ったスクリプト同様、PIL（Pillow）で画像を作ってしまえば良さそう。というわけで、スクリプトをつくってみました。

スクリプトがこちら

勢いで作った。

github.com

PILを使って、画像の赤い部分だけ抽出、その部分とそれ以外の部分をそれぞれ別の画像に保存して、Waveshareのライブラリに食わせています。赤い部分の判定条件は、京急がいい感じに表示されるようにチューニングしています。

サンプルはこちら。

元画像	スクリプト適用後

赤以外はモノクロになるため、なんとも不思議な感じです。

Waveshare 2.13inch e-Paper HAT (B)を買って3色電子ペーパーを楽しむ（環境構築編）

時代は三色。

Waveshare 2.13inch e-Paper HAT (B)

https://www.waveshare.com/product/modules/oleds-lcds/e-paper/2.13inch-e-paper-hat-b.htm

Raspberry Pi Zero/Zero Wにピッタリサイズの電子ペーパーハット。しかも、白・黒・赤の三色が表示できるというすごいやつ。PIMORONI印のやつも売ってましたが、今回はWaveshareのやつを買いました。バジェット都合です。

何はともあれ環境構築

電子ペーパー側はピンソケットが実装済みなので、Pi Zero/Zero W側でピンヘッダがついていれば、特に何も気にせず刺すだけ。ジャンパワイヤは使いませんでした。

必要なライブラリ等は、一部を除いてWaveshareのWikiの通りにインストールしていくだけ。

2.13inch e-Paper HAT (B) - Waveshare Wiki

Wiring Piのインストール

もともとRPiに入ってそうなので、不要かもしれないけど一応。 Wikiの通りやると上手くいかなかったので、Wiring Piのページからコードを引っ張ってきます。

git clone git://git.drogon.net/wiringPi
cd wiringPi/
./build

これでOK。

 gpio -v
 gpio readall

gpioコマンドが通れば多分大丈夫。

bcm2835

これはWikiの通り。

wget https://www.waveshare.com/w/upload/1/10/Bcm2835-1.39.tar.gz
tar xfz Bcm2835-1.39.tar.gz
cd bcm2835-1.39/
./configure 
make
sudo make check
sudo make install

Pythonのライブラリ諸々

お決まりのsudo apt-get updateをしてから、

sudo apt install python-rpi.gpio
sudo apt install python-smbus
sudo apt install python-serial
sudo apt install python-spidev
sudo apt install python-imaging

すでにup-to-dateのものも多かったけど、念のため。

I2Cとシリアルを有効に

sudo raspi-configで有効にします。そのあとに、sudo nano /etc/modulesで、ファイルに以下を追記。

i2c-bcm2708

i2c-dev

i2c-devはすでに書かれていたので、追記しませんでした。

これで完了

サンプルコードはwget https://www.waveshare.com/w/upload/3/3f/2.13inch-e-paper-hat-b-code.7zで落とせます。 python raspberrypi/python/main.pyを実行すると、電子ペーパーの表示がデモモードになります。

Waveshare 2.13inch e-Paper HAT (B)のサンプルコード

A post shared by pokio (@pokiiiiio) on Feb 17, 2018 at 6:38am PST

表示の切り替えにかなり時間がかかるのは仕様でしょうか・・・？

電車遅延ガジェット作成ハンズオンの第2弾を開催しました

ﾀﾞｧ。

IoT初心者向けNefry BTハンズオン / 電車遅延を通知してみよう vol2 #nefry

開発ボード「Nefry BT」を使ったハンズオン会を開催しました。

dotstudio.connpass.com

4ヶ月ぶり2回目の開催です。前回と全く同じだったのは悔しかったので、ちょっと変えてる部分があります。一方で、今回のハンズオン会で見つけた課題もあったのでメモしておこうと思います。

ちなみに前回はこちら。

relativelayout.hatenablog.com

改善点

Groveコネクター

せっかくGroveコネクターを搭載しているNefry BTなので、ブザーをつけて鳴らしてみました。 山手線の発車メロディーを鳴らしてみたんですが、ややウケでした。

コードはこちらにあります。

github.com

スケッチのアップロード機能・ウェブコンソール機能

Nefry BTの良さ味である機能を、ハンズオン会の資料に盛り込みました。

スケッチアップロード機能は、Arduino IDEなどで、コンパイル済みのバイナリファイルを出力して、それをNefry BT上で動いているWebページでアップロードするだけで、そのプログラムが書き込める機能。

ウェブコンソール機能は、同じくNefry BT上で動くWebページ上でArduino IDEのシリアルモニタのようにログの確認と簡単な知りたる通信が可能。

どちらにも共通するのは、Nefry BTを直接PCにUSB接続しなくてもいいという点。物理的にNefry BTとUSB接続できないケースや、Nefry BTがPCで認識できないときなどでも、それなりに開発ができてしまう、素晴らしい機能です。

課題

USBメモリがさせないPC

参加者にはラップトップを持参していただき、ハンズオンを開催しています。そして、当日使うサンプルコードをUSBメモリに入れて参加者をコードをシェアしているのですが、今回は業務用PCを持参している方がいらっしゃいまして、セキュリティの問題でUSBメモリを刺せないという問題が。

事前にgithubでコードを公開していたので、そのリポジトリを教えてcloneしてもらってなんとかコードをシェアできましたが、色々と気づきが多かったです。

FTDIドライバーを入れたくない話

Nefry BTですが、USBシリアル変換にFTDIのチップを使っているので、FTDIのドライバーをインストールしていないと、PCでボードを正常に認識できないケースがあります。ただ、FTDIのドライバーのページが、パット見怪しいんですよね。よくわからないドライバーを入れるのに抵抗があって、ちょっと入れたくないっていうこともありますよね。

Nefry BTは先に述べた通り、直接Nefry BTをUSB接続しなくても、プログラムを焼いたり、シリアルモニタのようなものを使うことができるので、それで対応できなくはないですが。やっぱりUSB接続で通信できたほうが便利ですよね・・・。

PCのスペックが低いとコンパイルに時間がかかる問題

そうなんですよね。手持ちの非力PC（ASUS TRANSBOOK）もなかなかコンパイルできないことがあります。予め参加条件としてPCのスペック等を明記していませんでしたが、今後は何らかの記載をしなければいけないかもしれません。

というわけで

気づきが多かったハンズオン会でした。

事前の情報出しと、トラブルシューティング対応に改善の余地がありそうです。

Bootstrapでそれっぽいサイトをチョッパヤで作ってみた

それっぽさ。

Bootstrapとは

いい感じのCSSとJSが用意されたコンポーネントライブラリ。味気ない素のエレメントを、ちょっとしたコーディングで今風な感じに仕上げてくれます。

getbootstrap.com

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

使い方は簡単で、HTMLに以下を追加。

（HEAD内に）
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

（BODY内に）
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

あとは要素のクラス名をいじるだけでいい感じの雰囲気になります。今回は以下のサイトを参考にしながら、サイトのアップデートを行ってみました。

https://hackerthemes.com/bootstrap-cheatsheet/

実際に使ってみた

以前作ったGitHub Pagesをすべて更新してみました。

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

pokiiio.github.io

実際のイメージがこんな感じ。

フォントだけでなく、NavBarもそれっぽく。

ダイアログもそれっぽく。

モバイルもそれっぽく。

チョッパヤでいい感じに！

micro:bitをWeb Bluetooth APIで通信するときにハマったポイント

たくさんハマりました。

メモメモ

micro:bitを買ってから色々といじってましたが、色んな所でハマったのでメモしておきます。

BBC micro:bit バルク商品 正規品

JavaScript Block EditorでBluetoothのブロックが見つからない

デフォルトで非表示という罠。

relativelayout.hatenablog.com

Web Bluetooth APIが使えるOS/ブラウザの組み合わせが意外と少ない

Chrome on Macは優秀。Safariが対応してなくてビビる。

github.com

BLEデバイスのスキャン

Web Bluetooth

ページ上でユーザーアクションをトリガーに、ブラウザのBLEデバイスリスト画面をnavigator.bluetooth.requestDevice()で表示させることで、特定のBLEデバイスと接続し通信するわけですが。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

結論から言うと、こんな感じで書くとうまく動作しました。ここで、LED_SERVICEというのは、サービスのUUIDで、

// micro:bit LEDサービス
const LED_SERVICE = "e95dd91d-251d-470a-a062-fa1922dfa9a8";

こんな感じです。

例えば、servicesを指定しないと、

SecurityError: Origin is not allowed to access any service. Tip: Add the service UUID to 'optionalServices' in requestDevice() options. https://goo.gl/HxfxSQ

セキュリティ観点でブラウザに怒られてしまい、機器リストには表示されるものの、いざ接続してRead/Writeしようとすると失敗してしまいます。

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] }
    ]
  })

じゃあservicesだけならいいのかと思うと、そういうわけでなく、これだとデバイスをうまく見つけられません。

  navigator.bluetooth.requestDevice({
    services: [LED_SERVICE]
  })

むしゃくしゃしてこういう書き方をしてしまうと、

TypeError: Failed to execute 'requestDevice' on 'Bluetooth': Either 'filters' should be present or 'acceptAllDevices' should be true, but not both.

と言われてしまいます。acceptAllDevicesをtrueにしてもいいですが、そうすると関係ないBLEデバイスも機器リストに表示されてしまい、見づらくなってしまいます。servicesでサービスを指定しつつ、名前のprefixでフィルターするには、

  navigator.bluetooth.requestDevice({
    filters: [
      { services: [LED_SERVICE] },
      { namePrefix: "BBC micro:bit" }
    ]
  })

やっぱりこういう書き方がジャスティスっぽいです。filtersで条件をつなげていくといい感じにANDでフィルターしてくれます。

サービス、キャラクタリスティックのUUIDや仕様がわからない

ここの情報を信じて実装しました。

Bluetooth Developer Studio - Profile Report

ちなみに、先程のLEDサービスのUUIDは、プロファイルの仕様書上はE95DD91D251D470AA062FA1922DFA9A8と書かれていますが、このままJavaScriptのコードに書いてしまうとエラーになってしまいました。ちゃんとハイフンを入れてあげて、e95dd91d-251d-470a-a062-fa1922dfa9a8みたいな感じで書いてあげなければ行けません。キャラクタリスティックのUUIDも同様です。

一部未実装？だったり、セキュリティ的にアクセスできないキャラクタリスティックがある

先程のプロファイルの仕様書では、Device Informationというサービスがあり、

• Model Number String
• Serial Number String
• Hardware Revision String
• Firmware Revision String
• Manufacturer Name String

という5つのキャラクタリスティックがあるようですが、実際にアクセスしてみると、Serial Number Stringは

SecurityError: getCharacteristic(s) called with blocklisted UUID. https://goo.gl/4NeimX

セキュリティ的にアクセスが封じられているようです。また、Hardware Revision StringとManufacturer Name Stringは、そもそもキャラクタリスティックが見つかりませんでした。