ryhmrt’s blog

意識低い系プログラマの雑記

Rakudoインストール時の "Could not find symbol '&bool'" エラー

手元のRakudoを最新にしようとしたら、 make install 時に

Could not find symbol '&bool'

とかいうエラーが出ました。

リポジトリが壊れているのかと思って数日放置してからビルドしてみましたが、状況が変わらないのでGoogle先生に聞いてみると、

install ディレクトリを削除してからビルドすればOK

とかいうやりとりが IRC の perl6 チャンネルで何度もやりとりされているのを見つけました。

確かに INSTALL.txt にも、ビルドに詰まったら install ディレクトリの削除を試して、それでも駄目だったらリポジトリをクローンし直せって書いてありました。

react-router の examples をざっと読んでみた

Redux と共に redux-simple-router を使おうと思っているので、react-router をおさらいするためにサンプルコードをざっと読んでみました。

以下、読んだときのメモ。

Active Links

<Link>activeStyle アトリビュートでリンクがアクティブなときのスタイルを定義できる。

Animations

URL遷移をする際に componentWillReceiveProps が呼び出されて遷移先のパスが取得できるということは理解した。

あと ...props は使いどころによっては便利だと思いました。

Auth Flow

<Route>onEnter にコールバックを渡しておくと、そのパスが有効になった際にそいつが呼ばれるようだ。 サンプルではそのコールバック内で未ログイン時にログインコンポーネントを描画するURLに遷移させている。

Auth With Shared Root

<Router>routes に設定するオブジェクト内で、 <Route> に対応する部分に component で直接描画対象のコンポーネントを指定するのではなく getComponent で描画対象のコンポーネントをコールバック経由で指定する方法を示している。

Breadcrumbs

this.props.routes で現在有効なrouteまでの経路が配列として取れるので、それを元にパンくずを表示できるってことらしい。

Dynamic Segments

<Route path="user/:userID"> のように設定したパラメータは this.props.params としてアクセスできる。

<Recirect>fromto でも利用できる。

Huge Apps (Partial App Loading)

<Route>childRoutescomponent と同様に getChildRoutes でコールバック関数での設定にできる。

サンプルは require.ensure を通じてオンデマンドでコンポーネントを読み込むように構成されている。

Master Detail

このサンプルで何を伝えたいのかイマイチよくわからないが、Flux臭を感じるのでそこら辺だろうか。

history.pushState を使ってるけど、これは v1.1.0 で router.push に置き換わるはず。

Passing Props to Children

React.cloneElement でレンダリング対象の this.props.children にアトリビュートを設定しているのがミソでしょうか。

Pinterest-style UI (location.state)

<Link>state アトリビュートでオブジェクトを渡すと、遷移時の componentWillReceivePropsnextProps.location.state としてアクセスできるということのようだ。

Nested Animations

これもサンプルで示したいことが何なのかイマイチわからない。

アニメーションの実装に必要なコード自体はAnimationsよりすっきりしていて、むしろあっちの方が要らない子なのかも。

Query Params

URLのクエリパラメータは <Link to="/user/bob" query={{ showAge: true }}> のように渡して this.props.location.query で参照できる。

Shared Root

path を指定しないコンポーネントをroutesのツリーに組み込んで、いくつかのパスの共通の親コンポーネントとして構成することができる。

Sidebar

<Route>components はkey-value形式で複数設定することができる。この形式で設定した場合は、描画コンポーネントは this.propschildren ではなく、 components に指定したキーで取得する。

Transitions

Lifecycle mixin の routerWillLeave でURL遷移の確認ダイアログを実装しているけれど、v1.1.0でmixinは無くなるとかいう話が...

Redux始めました

しばらく前からReact.jsは使っていたのですが、この度本格的なSPAアーキテクチャのアプリを作るに当たって、rebuildでちらっと耳にしたReduxを使ってみることにしました。

Fluxのコンセプトを継承しつつも各クラスの役割分担がちょっと違うので、個人的なメモをここに書きためておきます。

Flux

Fluxのアーキテクチャは以下のようなものだと理解しています

  • ユーザの操作によってActionCreaterを実行する
  • ActionCreaterは必要に応じてサーバにリクエストを送ったりして、Actionオブジェクトを作りDispatherに渡す
  • Dispacherは全てのStoreにActionを通知する
  • Storeは関心のあるActionであればデータの更新処理などを行ってから関連するViewに更新イベントを通知する
  • Viewは更新イベントを受けとるとStoreから最新のデータを取得して、自身のstateを変更して再描画を行う

Redux

で、これがReduxになるとこう

  • ユーザの操作によって処理を実行するためのコールバックメソッドを呼び出す
  • コールバックメソッド内でActionCreaterを呼び出し、その結果のActionを引数にStoreのdispatchを呼び出す
  • StoreからReducerにActionが渡され、Reducerは関心のあるActionであればそれに応じた新しいstateを返却する
  • stateを元に新しいpropsがViewに伝播されて再描画が行われる

違い

違いとしてはこんなところでしょうか

  • Fluxでは複数のStoreが独自にデータを保持するが、Reduxでは単一のStoreがReact.jsのstateで全てのデータを保持する
  • FluxではViewからActionCreaterを呼び出しているけれど、ReduxではActionCreaterを実行してdispatchを呼び出すコールバックメソッドをprops経由で受けとって実行する
  • FluxではStoreが自身のデータを変更するメソッドを持つが、ReduxではActionと現在のstateを受けとって新しいstateを返すReducerがそれの代わりとなる
  • Fluxでは描画を行うコンポーネントがStoreから直接データを取得しているが、Reduxではデータは全て親からprops経由でもたらされる

所感

ReduxはFluxのコンセプトをより洗練された形で実装できる印象です。

オリジナルのFluxも実際に使ったことはないので実感を伴った感想はありませんが、描画コンポーネントがpropsを元に描画するシンプルな実装になるのは歓迎できますし、データが独自のStoreで個別に管理されるのではなく global state で管理されるというのも納得できる気がします。

参考

VirtualBox の Guest Addition を入れ直す

事の始まり - 共有フォルダのマウントエラー

Vagrantで構成している仮想マシンを再起動したら下記のようなエラーが出て、共有フォルダがマウントされないようになってしまった。

    default: /vagrant => /Users/ryhmrt/Projects/hoge
Failed to mount folders in Linux guest. This is usually because
the "vboxsf" file system is not available. Please verify that
the guest additions are properly installed in the guest and
can work properly. The command attempted was:

mount -t vboxsf -o uid=`id -u vagrant`,gid=`getent group vagrant | cut -d: -f3`,dmode=777,fmode=666 vagrant /vagrant
mount -t vboxsf -o uid=`id -u vagrant`,gid=`id -g vagrant`,dmode=777,fmode=666 vagrant /vagrant

The error output from the last command was:

/sbin/mount.vboxsf: mounting failed with the error: No such device

/Users/ryhmrt/Projects/hoge% vagrant ssh

ググってみると、Guest Addition を入れ直せということらしい。

Guest Addition の iso ファイルを取得

http://download.virtualbox.org/virtualbox/ から辿って最新版の iso ファイルをダウンロード。

ホストの方でダウンロードしてしまったので、scpでゲストに転送するという2度手間をしてしまったが、ゲスト側でcurlでも使ってダウンロードすれば良かった。

Guest Addition インストール

vagrant ssh でゲストに入り

必要なパッケージをインストールをしておく

$ sudo yum install gcc kernel-devel

isoをマウントして

$ sudo mkdir -p /mnt/disk/
$ sudo mount -o loop VBoxGuestAdditions_5.0.8.iso /mnt/disk/

インストーラーを実行する

$ sudo /mnt/disk/VBoxLinuxAdditions.run

こんなエラーが出るけれども、Xは使わないのでそのまま無視

Building the OpenGL support module [失敗]
(Look at /var/log/vboxadd-install.log to find out what went wrong. The module is not built but the others are.)

ホスト側に戻って、 vagrant reload して共有フォルダがきちんとマウントされることを確認

Makati Shangri-La - Lobby Lounge

最近全くアウトプットが無かったので、無理にでも何かアウトプットをして習慣づけをしようかと思いました。とりあえず近所のレストランやら何やらを貼り付けてみます。

Makati Shangri-La はマカティで2番目か3番目くらいに番付けされるホテルだと思います。入り口を入って正面奥にあるラウンジはビジネス/プライベートの打ち合わせにうってつけです。

アフタヌーンティーセットと共にオーケストラの生演奏を間近に聴いていると優雅な気分に浸れます。たまに音がずれているような気もしますが。

www.shangri-la.com

写真

f:id:ryhmrt:20151107174219j:plain

予算

お茶やコーヒーは一杯200ペソ程、午後3時〜6時までは2人分のアフタヌーンティーセットが730ペソで提供されています。

ちょっとオシャレな喫茶店とそう変わらない値段で、天井の高い広々とした場所で生演奏と共にお茶ができるのでお得感があります。

参照: Menu | Lobby Lounge | Makati Shangri-La Manila Makati

場所

雑記

席数はそんなに多くありませんが、行って座れなかった記憶はありません。きれいなおねーさん方が席を探してくれますので、ふらっと入って声を掛けて席に案内してもらいましょう。

オフィシャルサイトを見るとドレスコードに Smart casual と書いてありますが、かなりカジュアルな格好でも小綺麗になっていれば浮かないはずです。

アフタヌーンティーセットはボリュームが多めに感じました。昼をしっかり食べた後だと完食できないかもしれません。

livedoor to はてな

少し前までlivedoorのブログを使っていたのですが、管理画面がなんかイケてないような気がしたのと、同じサービスばかり使っていて飽きたので、はてなに移行してみました。

こんな時に独自ドメインで運用していると、何の気兼ねもなく移れて気持ちが良いです。 個別記事へのリンクが途絶えたりなんて小さいことは気にしてはいけないのです。

ざっと触ってみた感じ、livedoorブログよりも使いやすい感じがします。 料金はlivedoorの倍以上ですが、おおむね満足です。

Gitで差分ファイルをZipに固める

いろいろなオトナの事情でお客さんのリポジトリに直接アクセスできなかったりすると、差分ファイルを作ってZipに固めて渡すとかいうことがあります、というか現在進行形でやっています。

Gitの --name-only オプションで差分ファイルの一覧を取って、Zipの -@ オプションでアーカイブするファイルを指定するのが便利だったのでメモを残しておきます。

次に差分を出すときのために差分出したらタグを打ちましょう。

$ git diff Release20150729 --name-only | zip diff.zip -@