React.js : 話題のReact.jsを触ってみる。Connpass APIで検索アプリ作成

巷で話題のReact.jsですが、ちょこちょこ勉強しながらコンポーネントを作成してアプリを作ってみました。

Connpassの検索アプリ

イベント管理Webサービス「Connpass」の検索アプリを作ります。ちょっとアプリとは違いますが、コメント欄のサンプルを掲載している下記を参考に開発しました。

ConnpassはHTTP GETでJsonが取得できるWeb APIが公開されていますので、それをJSONPで叩いて取得することにしました。

制作したものがこちらになります。

検索してヒットした案件が最大30件表示されるシンプルな検索アプリです。

React.jsを使ってみた所感

React.jsは、VirtualDOMによる最小限の更新など様々な特徴が挙げられていますが、個人的にまず感じたのは「本当にコンポーネント作るだけだな」ということです。下記のcreateClassが大きなウェイトを占めています。

React.jsはFluxなどのアーキテクチャも背景にありますが、あくまでViewのコンポーネント化を行うフレームワークでしかありません。stateによって状態を持つこともできますが、なるべくそれをせずにイミュータブルな見た目の構造と振る舞いをパッケージ化したコンポーネント一か所にまとめ、それを組み合わせることでView全体を構築していくようなスタイルになります。

意味付けや構造を担うHTMLと振る舞いに関わるJSをひとつにまとめて利用できることで、Viewコードの見通しがよくなったり、再利用性が高まったりするのではないかと思われます。なので、大きなアプリケーションに向いていると言われているようです。

var Hello = React.createClass({
  render() {
    return (
      <div><span>hello</span></div>
    )
  }
});

実際に使うときは、まずViewをどのようなコンポーネントで構成するのかという分割と、それぞれのコンポーネントが担う責務設計が必要そうです。なので、思いつきで書き足していくようなプロトタイピングすたいるだと少し使いにくいかもしれないと感じました。

Raspberry PI 2 : GPIO事始めーシャットダウン/リブートボタンを作ってみる

Raspberry Piの設定ができたので、早速GPIOをいじってみようと思います。

実用的に、シャットダウンやリブートをすることが多いので、専用のボタンを設置しようと思います。シャットダウン例は豊富にあるので、それを参考に1回押すとリブート、2秒間押し続けるとシャットダウンするボタンをつくろうと思います。

GPIO押下でシャットダウンするpythonスクリプトについては、下記を参考にさせていただきました。

スイッチの配線

まず、Raspberry Pi 2 Model BのGPIOですが、下記の用になっています。

http://www.element14.com/community/servlet/JiveServlet/previewBody/73950-102-4-309126/GPIO_Pi2.png (参考:Raspberry Pi 2 Model B GPIO 40 Pin Block Pinout | element14

今回は、同様にPIN#6(GND)とPIN#16(GPIO23)をスイッチで直結し、Lowに落とすだけの単純な回路を組みました。 ボタンを押すと、GPIO23がLowに落ちます。

f:id:tomoyukim:20150527115609j:plain

python スクリプトの作成

今回、長押しと単押しの区別などをするために、GPIO.wait_for_edge()の利用をやめて、GPIO.input()を利用したPollingに組み替えました。

スクリプトは下記になります。

#!/usr/bin/env python2.7
import RPi.GPIO as GPIO
import os
import time

GPIO.setmode(GPIO.BCM)
GPIO.setup(23, GPIO.IN, pull_up_down=GPIO.PUD_UP)

cnt = 0
while cnt < 200:
    if GPIO.input(23) == GPIO.LOW:
        cnt += 1
    else:
        if cnt > 0:
            print "power button will reboot the system..."
            GPIO.cleanup()
            os.system("/sbin/reboot")
            break
        cnt = 0
    time.sleep(0.01) # by 10 ms
else:
    print "power button will shutdown the system..."
    GPIO.cleanup()
    os.system("/sbin/shutdown -h now")

GPIO.HIGHの間はループが回り続ける用になっています。whileの時間を変えることで長押しの時間を変えることができます。 単押しのリブートまでの反応を良くするために、ループのスリープを10msにしています。(10ms単位のループなので、2秒だと200ループ)

一度でもボタンを押すと、2秒以下ならリブート、2秒以上ならシャットダウンという挙動になっています。

ちなみに、python用のGPIOモジュールについては、下記にドキュメントがあります。

raspberry-gpio-python / Wiki / Inputs

起動時に実行できるようにする

こちらは参考サイトそのままの方法でサービス化しました。

### BEGIN INIT INFO
# Provides: power-button
# Required-Start:
# Required-Stop:
# Default-Start: 1 2 3 4 5 6
# Default-Stop: 0
# Short-Description: Power Button
# Description: Power Button
### END INIT INFO
#! /bin/sh
# /etc/init.d/power-button
PIDFILE=/var/run/power-btn.pid
case "$1" in
     start)
        if [ -f $PIDFILE ]; then
           echo $PIDFILE exists.
           exit 1
        fi
        start-stop-daemon -S -x /usr/local/sbin/power-btn.py -b -m -p $PIDFILE
        ;;
     stop)
        if [ ! -f $PIDFILE ]; then
           echo $PIDFILE not found.
           exit 1
        fi
        start-stop-daemon -K -p $PIDFILE
        rm $PIDFILE
        ;;
     *)
        echo "Usage: /etc/init.d/power-button {start|stop}"
        exit 1
        ;;
esac
exit 0

これを、/etc/init.d/power-buttonに配置して、下記を実行すればOKです。(元記事どおりWarning出ますが大丈夫でした。)

$ sudo update-rc.d power-button defaults

これで、気軽にパワーシーケンスに入ることができるようになりました。 スイッチ付きのACなどに接続しておけば、快適なRaspberryの電源ライフが送れること間違いなしです。

Raspberry PI 2 : SDカードのパーティション拡張設定とEmacsビルド

Raspberry PiはOSをインストールすると、そのSDカードの容量によらずパーティションサイズが3GB になってしまうようで、Emacsビルドなど作業領域を確保をするためには、パーティション拡張が必要です。

というか何かしようと思ったらほぼ必須な気がするので、初期設定の一環ですね。HDMIでモニタ出している人はGUIでできるのかもしれないです。

sshからパーティションの拡張を行うには、下記を参考にさせていただきました。

サイズ拡張

ほとんど参考サイトそのままでできます。

  • df -h/dev/mmcblk0p1を確認する(デバイス名はp1手前まで)
  • fdiskでパーティションを作り直す
  • resize2fsでサイズ変更

自分のメモとして書いておくと、

まず、100%近くまで使われているディスク状況を確認して、mmcblk0があることを確認。

$ df -h
Filesystem     Size Used Avail Use% Mounted on
rootfs
...
/dev/mmcblk0p1  xxx  xxx   xxx xxx% xxxxxxxx

続いてfdisk

$ sudo fdisk /dev/mmcblk0

で、以下fdisk操作:

そして、一旦再起動して

$ sudo resize2fs /dev/mmcblk0p2

これで、完了。df -hなどで既存のパーティションが拡張されているか確認します。 非常にわかりやすい記事で助かりました。

Emacsビルド

Raspberryはやはりというかなんというか、Emacsは入っていません。pythonでもNode.jsでもコード書くのにEmacsは書かせません。入れます。

こちらの記事を参考にしました。

RaspberryPi - Raspberry PiでEmacs 24.5とCaskを使う - Qiita

GNUからEmacsの最新コードをとってきてビルドすればOKです。(僕はCaskは使っていません) 端末利用なので、--without-x付きでビルドするのがポイントです。

$ sudo apt-get install build-essential automake texinfo libncurses5-dev
$ wget http://ftp.gnu.org/pub/gnu/emacs/emacs-24.5.tar.xz
$ tar -Jxvf emacs-24.5.tar.xz
$ cd emacs-24.5
$ ./configure --without-x
$ make
$ sudo make install

作業領域を確保していないと、ビルドに失敗するので、上述のパーティション操作を行ってからビルドをすれば問題ないです。

ちなみに、emacsclientをX Systemでないところで使うには、まず下記を使ってEmacsの退避と復帰を覚えます。

  • Ctrl + Z : 一旦退避
  • fg : プロセス復帰

Serverさえ起動していれば、emacsclientで既に起動しているEmacsでファイルを開けます。毎回Emacsを起動していると、人によっては時間かかるので端末上でもemacsclientがオススメです。