月 の 上

桜2017

ことしも桜の時期ですね v(^-^)v

蹴上

このあとユーフォ2期見たらOPに蹴上インクライン出てきて興奮した。

穴場

写真は暗いけど、綺麗だし静かでよい所だった。
穴場なので場所は内緒です。

上賀茂神社の西

中学生がブラバンやってて和む。 鴨川、本当に金管楽器の練習してる学生がおり、これまでそういった人々とは無縁な子供時代を送ってきた僕は「これが川か……」と感激する。

デルタ

ジョギング中に撮ったやつ。 この時、調子に乗って斜面に乗り出してたらiPhone落として液晶割れた……。

岡崎

通勤路

みなさん京都に引っ越しましょう

シェーダーからGIFアニメを生成するツール作った

f:id:amagitakayosi:20170509074747g:plain

github.com

シェーダーは、本来は3Dプログラムで物体に影をつけたり、視覚的なエフェクトを与えるための仕組みだ。
しかし、シェーダーだけで複雑なグラフィックを表現する事もでき、GLSL SandboxShadertoyには大量の作品が投稿されている。

今回は、フラグメントシェーダーのファイルからGIFアニメを生成するツールを作成した。
これを使うと、冒頭のGIF動画のようなものが作ることができる。
また、npmパッケージになっているので、フロントエンド開発のフローに沿ってシェーダーのサムネイルを作成できる。

実装はgistに転がってたスクリプトを参考にしている。

offscreen rendering with three.js and headless-gl, in coffee-script · GitHub

使い方

npm install -g glsl2img すると、 glsl2png コマンドと glsl2gif コマンドがインストールされる。

glsl2png

フラグメントシェーダのファイルを読みこんで、PNG画像を生成する。

$ glsl2png foo.frag             # out.pngを出力
$ glsl2png foo.frag -o foo.png  # foo.pngを出力
$ glsl2png foo.frag -s 640x360  # 画像サイズを指定

出力結果はこんな感じ。

https://cloud.githubusercontent.com/assets/1403842/25777407/30317b7c-3317-11e7-8dd1-b293f6a6091f.png

uniform変数は、デフォルトで time, resolution を受け取れる。
time-t オプションで指定できる。
それ以外のuniform変数を指定する場合は、 -u オプションでThree.jsのuniformの形式のJSONを受け取れる。

# どっちも同じ結果になる
$ glsl2png foo.frag -t 10
$ glsl2png foo.frag -u '{"time": { "type": "f", "value": 10.0 } }'

glsl2gif

フラグメントシェーダのファイルを読みこんで、GIFアニメを生成する。
デフォルトでは、15fps / 長さ1秒のアニメを作成する。
fpsと長さは -r -l オプションで指定できる。

$ glsl2gif foo.frag             # out.gifを出力
$ glsl2gif foo.frag -o foo.gif  # foo.gifを出力
$ glsl2gif foo.frag -s 640x360  # 画像サイズを指定
$ glsl2gif foo.frag -r 30       # 30fps
$ glsl2gif foo.frag -l 10       # 10秒

結果はこんな感じ

f:id:amagitakayosi:20170509075058g:plain

この記事の冒頭のGIFは、このシェーダーに -r 30 -l 2 を指定して作った。

shader sample · GitHub

expo.ioを使ってリアルタイムにReact Nativeアプリを開発する

f:id:amagitakayosi:20170417212408j:plain

1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。
何がどう便利かっていうと、

  • ケーブルなしで、実機の動作確認ができる
  • もちろんコード変更も即座に反映される
  • 開発版アプリの配布がワンタッチでできる
  • 便利なReactコンポーネントもついてくる

youtu.be

expo.io とは

React Nativeでのアプリ開発を支援するサービスです。
公式サイトはこちら。めっちゃ素朴……

expo.io

expoは create-react-native-app XDE expo client といったツールを公開しています。

  • create-react-native-app: アプリの雛形を作るCLIツール
  • XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる
  • expo client: 開発中のアプリを実機にインストールするためのクライアント

今回はこれらを使ってReact Nativアプリケーションを開発する方法を紹介します。

事前準備

インストールするものは多いけど、設定はほぼ不要です!

開発フロー

基本的な開発の流れはこんな感じ。

  1. create-react-native-app でアプリの雛形を作成
  2. npm start して、実機で確認しつつ開発
  3. リリースビルドを作ってストアに公開

create-react-native-app

create-react-app みたいなやつです。
基本的な操作は create-react-app と同じ。
facebook公式みたいな名前なのはちょっと邪悪な感じする……;;)

$ create-react-native-app my-app とすると、 my-app ディレクトリにアプリの雛形が作成されます。
雛形はかなりシンプルになっており、 .xcodeproj ファイルすら存在しません。
expoでは、アプリケーションの配布・ビルドを独自のしくみで行なうため、これだけで充分なようです。

f:id:amagitakayosi:20170417222536p:plain

実機で確認しつつ開発

npm start すると、react-nativeのパッケージャーにより、JSのビルドが始まります。
同時に、ターミナルに巨大なQRコードが出現します。かっこいい。

f:id:amagitakayosi:20170417223418p:plain

手元のデバイスにインストールした expo client でこのQRコードを読み取ると、開発中のアプリケーションがexpo clientにインストールされます。
これによって、ケーブルなしでも実機で動作確認しつつ開発を進めることができます。

ReactでふつうにWeb開発してるような気分。

開発中のアプリを配布

XDE上にある「Publish」ボタンを押すと、開発中のアプリを配布するためのリンクが生成されます。
これにより、アプリを社内リリースしたり、友達にだけリリースしたりといったことができます。

f:id:amagitakayosi:20170417224311p:plain

ほぼ雛形の状態でPublishを押したのがこちら。
インストールにはexpo clientが必要です。

my-app — Expo

リリースビルド

Building Standalone Apps | Expo v15.0.0 documentation

expo clientなしで、普通にApp Storeから配布するためには、exp というツールでビルドする必要があります。
今回はリリースまでやってないけど、iOS版のリリースビルドを作成する手順はこんな感じみたいです。

  1. $ npm i -g exp && exp login
  2. exp.json を作成
  3. exp start
  4. 別のターミナルで exp build:ios を実行

便利コンポーネントがついてくる

create-react-native-app で作ったアプリには、最初から expo がインストールされている。
わかりやすいところだと、画像を選択するImagePickerや、地図を表示する MapViewOpenGLの描画を行なうGLViewなどがある。

感想

前回React Native入門した時は全然ビルドできなくてハマってたんだけど、今回はexpoのおかげでめっちゃ気軽に開発を開始できた。
FAQにも「いまのところ有料にする予定はない」って書いてあるし、良いんじゃないですかね。

ハーフマラソンに出場してきた

f:id:amagitakayosi:20170417173353p:plain

3月末、大阪で開催されたハーフマラソンに出場した。
ついでにスーパー銭湯でのんびりしたり、鶴橋で焼肉を食べたりした。

マラソン

淀川沿いを往復するやつ。

第7回 淀川国際ハーフマラソン|サンスポマラソン

去年なんとなくジョギングしてた時22キロくらい走ってたりしたので、まあ行けるでしょ、というノリでエントリーした。
しかし、マラソン大会の経験は当然無いし、子供の頃から体力ゼロで通してきたので、結構不安になって朝のジョギングの頻度を上げたりしていた。
目標は低く、「完走できればOK」とした。

天気予報によると当日は午後から雨だったので、前日にはスポーツショップや100均に買い出しに行った。
ウエストバッグは持っていたものの、重さや収納を考えて、こちらの商品を購入した。

FlipBelt(フリップベルト) スポーツウエストポーチ FBB ブラック M

FlipBelt(フリップベルト) スポーツウエストポーチ FBB ブラック M

当日午前中は良い感じに涼しい天気だった。
ファミリーコース?みたいなのもあり、家族連れがおおい。
主催の人が歌ってたり、NMB?かなんかの曲にあわせて準備体操が始まったり、平和な感じ。

これ司会してるのラジオDJかなんかかと思ったけど、どうやら有森裕子本人らしかった。異常にテンション高い。
有森さん、スタート地点でも「いってらっしゃーい頑張って〜!フォォォおお!!」みたいな感じで、やっぱアスリートってエネルギーすごいんだなって思った。

序盤は「エッこんなゆっくり走っててもみんなスイスイ追い抜けちゃうの?」って思うくらい楽々で、道路脇の芝生の部分を走ってたりしたんだけど、これが裏目に出たのか、半分すぎた辺りから追い抜かれることが多くなった。
追い抜かれると焦ってしまって余計しんどくなるので、後半は目をつぶって走ったりしてた。

給水所では、水のほかにも一口大にカットされたアンパンやクリームパンが配られていた。
意外と制限時間までは全然余裕だったので、ちょっと立ち止まって味わって食べた。

最後のほうは足が半分麻痺してたけど、どうにか完走出来てよかった。
順位を見ると半分より下なのでやっぱり悔しい気はする。

こちらは当日のようすです。
走りながら撮るのも楽しい。

スーパー銭湯

マラソンのあとは、会場から電車で30分ほどのスーパー銭湯へ向かった。
街なかにあり、程よい広さでいろんな種類のお湯に浸かれて便利。

www.nobuta123.co.jp

日曜の夕方だが、部活帰りの少年たちが非常に多かった。
高校生や大学生のバイトが大量に働いていたのもあり、自分が大人サイドの人間って感じがしてしまう。

銭湯なのに美容室やレストランが併設されていたり、建物内の施設では自販機含め全て独自システムで決済したりと、一つの国家のような様相を呈していた。

鶴橋で焼肉

たっぷり筋肉を痛めつけたという名目で焼肉へ。
以前から鶴橋に行きたかったんだよ

www.yakinikusora.jp

鶴橋は焼肉屋さんだらけだが、今回は一番有名っぽいとこにした。
ホルモン5種盛りがお得で旨い。

ごちそうさまでした。

Scala入門としてCLIツールを作り、Scala.js, React, ScalaCSSでサイトを作った

fand.github.io

今年2月からScalaのチームに異動し、Scala入門している。

2月中はゆっくりコップ本を読んでいたのだけど、やっぱり手を動かさないと自信が付かないので、何かツールを作る事にした。
ついでにGitHub PagesもScala.jsやScalaCSSで実装してみた。

つくったツール

github.com

!!! 実用性は度外視しています !!!

レポジトリをまるごとコピーしてくれるやつ。
ブランチを移動する度にコンパイルで時間かかるのを回避するため、ブランチ毎にコピーしたらいいのでは、という発想(上手く行ってるかはわからない……)。
手で cp -r するのが一番はやいし、ツールを作るにしても普段だったらJSで書くとこだけど、今回はせっかくなのでScalaCLIツールを作ってみた。

使い方

brewでインストール可能。

$ brew tap fand/clonepool
$ brew tap fand/clonepool

clonepool -h でかっこいいヘルプが出る。

f:id:amagitakayosi:20170407162300p:plain

仕組み

内部では motemen/ghqpeco/peco を利用している。
$ clonepool rails/rails my-branch と入力すると以下の処理が走る。

  • $ ghq get rails/rails により、 $(ghq root)/github.com/rails/rails にレポジトリがクローンされる
  • ~/.clonepool/github.com/rails/rails/my-branch にコピーを作成
  • my-branch ブランチにチェックアウト

引数なしで $ clonepool とすると ~/.clonepool 以下のディレクトリを一覧できる。
cd $(clonepool | peco) とすると絞り込みつつ移動できて便利。

f:id:amagitakayosi:20170407162312g:plain

実装について

ほとんど scala.sys.process.Process を利用してシェルコマンドを実行しているだけ。
Gitレポジトリの操作ということで、最初はJGitを利用していたんだけど、シェルコマンドを利用したほうが楽なことがわかったのでやめてしまった。

Processの実行は scala.util.control.Exception.allCatch でラップしている。
allCatch {} は、ブロックを評価した結果をSomeで返し、例外が出たらNoneを返してくれる。

seratch.hatenablog.jp

個人的には、CLIツールを実装するときは気軽に死にたい。
JSだと、大部分ををPromiseベースで実装して、一番外側で全部catchするというのをよくやっている。
今回は getOrThrow という関数を作って、気軽に死ねるようにした。

https://github.com/fand/clonepool/blob/master/src/main/scala/example/Util.scala#L9

CLIツールを作るためのライブラリは SCOPTCLIST などがあるが、あんまり好みじゃなかったので今回は利用していない。
かっこいいヘルプは ansi-interpolater を利用して実装した。

homebrewでインストールできるように

Scalaのライブラリは、maven centralに登録したり、オレオレmavenレポジトリを作って公開するらしいけど、CLIツールを配布できるか良くわからなかった。
conscript を使えば簡単に配布できるらしいけど、利用者もconscriptをインストールする必要があってなんか面倒。
sbtはhomebrewで配布されているので、今回はsbtを真似てみることにした。

今回つくったformulaはこんな感じ。

https://github.com/fand/homebrew-clonepool/blob/master/clonepool.rb

sbtのformulaと大体同じ。
jarファイルをlibexecに配置し、bin/clonepoolに java -jar clonepool.jar するシェルスクリプトを置いている。

jarファイルはsbt-assemblyというsbtプラグインを利用している。
$ sbt assembly を実行すると勝手にjarが出来て便利。

github.com

GitHub Pagesについて

http://fand.github.io/clonepool

今回の目的はScala入門、ということでGitHub PagesもScala.js + ScalaCSS + Reactで構成した。
Octocatをクリック(またはタップ)すると回転します。

f:id:amagitakayosi:20170407162432g:plain

Scala.js

www.scala-js.org

AltJSの一種。Scalaで書かれたコードをJSに変換する。
一昔前に「機能もヤバいしファイルサイズもデカ過ぎてヤバい」って話題になってたけど、今では大分マシになってる。
今回のコードはgzip圧縮済みで122 KBだ。

sbt fastOptJS または sbt fullOptJSコンパイルする。
~fastOptJS とするとファイル変更をwatchしてくれる。
fullOptJS を実行すると70秒かかる……。

この前Webpack用のローダーが公開されたりしてたけど、今回はsbtで開発した。

https://github.com/mrdziuban/scalajs-loader

Scala.js自体の内容に関しては特に言うことなくて、ふつうにScalaって感じ。
ただ、あるクラスの子オブジェクト一覧を取得したくて scala.reflect.runtime を使おうとしたけど、なんか上手くいかなかったな、そういえば。

scalajs-react

Scalaは現代的な言語なのでReactも書けます

github.com

Scala.jsからReactを利用するためのライブラリ。 JSXの代わりに、 <.div() とか ^.src := "hoge" みたいな感じでDOMを記述する。

import japgolly.scalajs.react.vdom.html_<^._

<.ol(
  ^.id     := "my-list",
  ^.lang   := "en",
  ^.margin := 8.px,
  <.li("Item 1"),
  <.li("Item 2"))

(ドキュメントより抜粋)

記法自体は慣れたらそんなに難しくない。
しかし、コンポーネント自体とは別にBackendというクラスを書く必要があったり、独自の概念がたくさんあって大変。
何より実装がほとんど読めないのがしんどい……。

ScalaCSS

CSSScalaで書ける時代……!

github.com

scalajs-reactと同じ作者が開発している。
Super type-safe CSS とのこと。???????
例えば、widthなどのピクセルを指定する場所に無効な文字列を書くと、型が合わないといって怒ってくれる。

ScalaCSSはStandalone APIとInline APIの2種類のAPIを持つ。
単なるAltCSSとして使う時は Standalone APIを、CSS in JSを行なうときはInline APIを利用する。
今回は、コンポーネント毎のスタイルはInline APIで生成し、ページ全体で共通のスタイルはStandalone APIを利用して記述した。

この辺はtakezoeさんの記事で解説されてる。

takezoe.hatenablog.com

CSS in JSライブラリとしては、生成されるクラス名が .MyComponent--button のように予想しやすいクラス名になってしまうのが難点。 (多くのCSS in JSライブラリでは、クラス名をランダムな文字列にすることで、意図しないクラス名の衝突を回避している)

他にも、コンパイル時間が長かったり、対応していないCSSプロパティが多いので、得られる恩恵も割に合わない気がする……。 が、これも慣れてしまえば、書くの自体はそんなに難しくない。

最終的なコンポーネントの定義は以下のようになった。

package io.github.fand.clonepool.docs.components
import japgolly.scalajs.react._, vdom.html_<^._
import scalacss.Defaults._
import scalacss.ScalaCssReact._

object Link {
  val component = ScalaComponent.builder[Tuple2[String, String]]("Link")
    .render_P(t =>
      <.a(
        LinkStyle.link,
        ^.href := t._2,
        t._1
      )
    )
    .build
}

object LinkStyle extends StyleSheet.Inline {
  import dsl._
  val link = style(
    color(c"#EFF"),
    pointerEvents := "auto"
  )
}

その他

Sketchでロゴをつくったり、 http://realfavicongenerator.net/favicon生成したりした

今回学んだこと

  • Scala
    • allCatchで雑にエラーを扱う方法
    • Scala.js
    • Scala.js + React
    • ScalaCSS
  • homebrewのformulaを書く方法

今度はGolang + GopherJS入門しようかな〜〜

ハンズオンを円滑に進めるテク

新人教育の時期ですね。
みなさん研修資料の準備は大丈夫ですか?

僕はこの前Reactのハンズオンをやったんだけど、そこで心がけた事や学んだ事を共有します。
ハンズオンの内容については既に記事を書いたけど、細かい所を書ききれなかった。
amagitakayosi.hatenablog.com

新人研修やインターンでも使えるテクでなので、ご参考に。

やったこと

最初に完成形を提示する

ハンズオンで作るアプリについて、動画で説明した。
最終的な目標がわかると、今やっている作業の意味がわかりやすくなる。

いくつかのステップに分けて説明する

今回のハンズオンでは、8つのステップにわけて実装を進めた。
ステップ毎にテーマを与える事ができるし、ハンズオン自体の進捗もわかりやすくなる。

ステップ毎に足並みを揃える

ハンズオンでは、一度置いていかれると追いつくのが難しい。
参加者の進捗は頻繁に確認すること。

挙手を多用する

「出来ましたか?」って聞いても、答えてくれる人は少ないので、「出来たひと〜?」って挙手してもらうとよい。
(今回は挙手してもらいすぎたかも……)

お手本ブランチを用意する

ちょっと変則的なんだけど、今回はお手本ブランチを用意して、困ったときに参照できるようにした。
このブランチはステップ毎にgitのタグを打ってある。
ちょっと遅れたとしても、 git checkout step-2 等とすれば追いつけるようになっている。

スクリーンショットを多用する

わかりやすさは 画像/動画 >>> 文字 >>>>>>>> 口頭での説明 だと考えてる。
複雑な所では、keynoteやSkitchの機能で注釈を入れると良い。

動画のつくりかた
動画つくるの、実はそんなに面倒ではない。
Macの場合の手順は次のとおり。

スライドの冒頭で、教科書や資料へのリンクを表示する

資料は事前に共有されたい!
作業のペースは人によって違うので、手元で資料を見れるとグッと進めやすくなります。

会場のWiFi情報なども載せておくとラッキー。

前日にTwitterで事前準備をお願いする

git clonenpm install といった、時間のかかる作業は事前にお願いしておくと良い。

学んだこと

参加者同士の協力をお願いする

開始時に「参加者の皆さん同士で助け合ってくださいね!(^~^)」とか言っておくと良い。
Reactハンズオンでは、何も言わずとも良い感じに助け合ってくれて、とても助かった。

来場者の前提知識をハッキリさせる

gitを知らない人がgit checkoutできなくて困ってた。
必要な知識をリストアップして、事前に共有しておくと良い。
発表資料には、前提知識のない人のために適切な教材へのリンクなどを貼っておくとよい。
(当日解説してもいいが、往々にして時間が足りなくなる)

以上です

明日はエイプリルフールですね。皆様のご入社をお待ちしております。

asyncを書くのも面倒なのでasync-nodeを作った

https://cloud.githubusercontent.com/assets/1403842/24457202/7dca1bce-14d0-11e7-9df7-d1a674b46198.png

ちょっとスクレイピングする機会があり、Nightmareでスクリプトを書いたんだけど、Promiseをベタベタ書いたりする必要があって面倒だった。 Node.js v7.6.0からはasync/awaitが使えるようになったけど、スクリプト全体をasync functionで囲んだり .catch() する必要があったりして、ノイズが多い。

というわけで、トップレベルにいきなり await を書いても実行できる async-node というコマンドを作った。

github.com

インストール

npm i -g @fand/async-node

使用例1) GIPHYから画像をダウンロード

giphy_opt

Nightmareで画像を検索し、kevva/downloadで手元にダウンロードするスクリプト

ソース: https://github.com/fand/async-node/tree/master/examples/image-downloader

使用例2) MongoDBのデータを取得/挿入

$ async-node mongo.js -s '{"name":"foo"}'  # 挿入
$ async-node mongo.js -g '{"name":"foo"}'  # 取得

ソース: https://github.com/fand/async-node/tree/master/examples/mongo

どうぞご利用ください🔪🔪🔪