Kuchitama Tech Note

はてな記法がいつまでたっても覚えられないので、はてなダイアリーからマークダウンが使えるこっちに引っ越してきました。

フロント苦手な私にはFrascoが最高のツールだった件

先日のRuby関西で紹介されてた Frascoというツールがとても良さげに感じたので、帰って早速使ってみました。

Frascoとは

Quick starter project for Jekyll including full setup for gulp, Sass, Autoprefixer, Bourbon/Neat/Bitters, Webpack, Imagemin, Browsersync, etc.

だそうです。 要は、JekyllでWebサイトつくるときに、便利なツール類まとめておいたから、さくっと始められるよ。ってことです。

DojoCon JapanのサイトもFrasco使ってるそうです。

Frascoの使い方

とりあえず、 jekyllnpm のインストールは必要です。それぞれ、自分のマシンにインストールしておいてください

それさえあれば、あとはFrasco公式ページに乗っている通り、 Frascoをcloneして、 npm install, npm start すればすぐに利用できます

$ git clone [https://github.com/ixkaito/frasco.git:embed]
$ cd frasco
$ npm install
$ npm start

Frascoのいいところ

  • さくっとブラウザで確認できる
  • デフォルトでイケてるCSSフレームワークが導入されてる

さくっとプラウザで確認できる

npm start するだけで、Jekyllがビルドされてブラウザで確認できます。 sassなどの変更も見てくれるので、かなり快適にページ制作ができます。 とても便利で感動しました。

デフォルトでイケてるCSSフレームワークが導入されてる

これは、 Burbonと Burbon Neat がイケてるってことなんですけど、使いやすくて良いです。

sassファイルの変更も検知して、リロードしてくれるので、コーディング -> 確認の流れがスムーズで快適でした。

Frascoのイマイチなポイント

Frascoを軽く触ってみて、改善したいなと思ったポイントを挙げます。 対応できそうなものは、週末にでもPR投げると思います。

  • Jekyllのバージョンが開発環境に依存
  • プロジェクトのGit管理しづらい

Jekyllのバージョンが開発環境に依存

Frascoでは、gulp を通してjekyllのコマンドやその他のタスクを実行しています。 そのために、ローカルマシンの Jekyll に依存するのは、仕方ないのですが、プロジェクト内に Gemfile などが用意されているわけではないので、Jekyllのバージョンなどの管理は完全にユーザ依存になっています。 複数人でサイトを管理するときに、(CIサービスなど使わなければ)各自のマシンのJekyllバージョンに依存することになります。

これは、ユーザ側で好きに Gemfile を用意すればいいだけのことではあるんですが、Frasco側で推奨Jekyllバージョンみたいなのを用意してもいいんじゃないかと思いました。

プロジェクトのGit管理がしづらい

Frascoはサクッと開発できて便利なんですが、今のところFrasco本体のGitリポジトリを clone してその中で、開発を行います。 そのため、制作しているサイトを自分でGit管理するために色々と作業が必要でした。

  1. .gitディレクトリを削除
  2. git init を実行
  3. リモートリポジトリを用意して、 git remote add する
  4. git commit, git push を実行

あとは、必要に応じて READMEやpackage.json を書き換えます。 READMEは全部書き換えるだけでいいですが、package.jsonは内容を見て、部分的に書き換える必要があります。 大体、package.json 内の次の項目を書き換えるといいでしょう。

  • name
  • version
  • description
  • repository
  • keywords
  • author
  • bugs
  • homepage
  • license

これは、Frascoをcloneして使うのではなく、 yo などで、プロジェクトの雛型を吐き出すようにすればいいんじゃないかと思います。 私自身はyoでテンプレートを作ったことはないのですが、少し勉強してできればPR投げたいなと思っています。

Frascoで作ってるもの

なにがタイムリーだったかって、ちょうどいい加減去年の大都会で宣言した A Tour of Go のScala版作るの真面目に取り組もうとしてたからです。

Jekyll使って作ろうというのは、なんとなく考えてたんですが、フロント開発が苦手で着手が先延ばしに鳴ってましたが、Frascoあれば雛型が出来上がってるので、重い腰がすっと上がりました。 これから、マジメに作ります。

Ruby関西勉強会で登壇してきました #rubykansai

先日開催された第73回 Ruby関西に参加してきました。

Ruby系の勉強会に登壇するのは初めてだったので、アウェー感を感じつつも、楽しい1日を過ごしました。 まぁ、着ていった服のせいでアウェー感がましてた気もします

発表内容

発表資料はこちら。

Scalaプログラマの私がRubyRuby on Railsを触った時に感じた違和感などを紹介しています。

自分の発表以外は、ゆったりと話を聞いてました。

今回は発表本数が多くて、楽しめました。

RedDotRubyConf

シンガポールで開催された RedDotRubyConf の模様を紹介して頂きました。 RedDotとはシンガポールの愛称だそうです。 世界地図上で見た時にシンガポールが国土が小さくて、点(Dot)の様に見えることと、国旗の色からつけられたそうです。

以下、気になった点のメモ

  • シンガポールはみんな英語と中国語が話せる
  • 発表内容は日本のRubyKaigiに比べてゆるめで、コワイ感ない
  • 料理美味しい
  • 教育水準高い

SciRubyプロジェクトの紹介

Rubyをデータ解析に活用できる様にするSciRubyプロジェクトの紹介。

気の長い話に聞こえましたが、そもそもPythonもRが出てきてから、後追いで現在のデータ解析に強い言語としての地位を築いたそうです。 負けるなRuby!!

Jekyll Starter Project: Frasco

Jekyll を 便利に使うために Frascoというツールを作られたそうです。 めっちゃ便利そう! Jekyllを始めるためにあった方がいいものが、全て最初に用意されているので、さくっとページ制作を開始できそうです。 これは、ぜひ触ってみたいです

登壇中に、発表者の @ixkaito さん作 Worker の GithubStarが300突破してました。おめでとうございます!!:embed]

RubyからC#を扱う

誰得なんだ、とか思いつつ聞いてました(すいません) 内容は、タイトルの通りのことを実現するための、ライブラリを開発されたそうです。

個人的には、内容そのものよりも、マイクロソフトが最近取り組んでいるオープン化が、実際身の回りにまで影響を及ぼしたことが感慨深かったです。 てらだよしおさんの話や、色々なイベントレポートで、マイクロソフトオープンソースに舵を切っていることは知っていましたが、地方の全くMS関係ない勉強会にその取り組みに絡んだ内容が出てきたのは、成果の現れと言えるんじゃないでしょうか

わたしが Rails Girl になるまで

cherry.rb オーガナイザーの との さんの発表。 今年の初め頃に cherry.rbには何度か参加してたんですが、今こんなことになっているとは

gemの話

gemについてのちょっとしたノウハウとか、おすすめgemとかでした

冒頭で、Gem作ったある人がどれくらいいるかアンケートしてました。

公開したことのある人もアンケートしたら良かったんじゃないかな?

2対のMVC (Double MVC)

GUI(React/Flux) と Web(Rails)でそれぞれにMVCを持ち、サービス開発するハンズオン

サービス全体を通してアーキテクチャの設計をする人には、非常に参考になると思います

資料がすごく長いけど、少しずつ進めていけばちゃんと理解できるはず

Ruby 初級者向けレッスン - Array と Hash

Ruby関西お馴染みの初心者向けレッスン なんですけど、たまたま座った席がcherry.rb勢が固まってて、レッスンせずに雑談してました(すいません)

最後に出てきたジョーク回答面白かったです

感想

ホントは懇親会行きたかったんですが、夏風邪のため体調優先で帰りました。 もっとRuby界隈の人とも交流していきたいので、また次回も参加したいと思います。

Cherry.rbでRails5やってみた

最近、仕事でRailsを触らずを得ない感じになってきたので、本格的にRailsの勉強をはじめました。

そしたら、ちょうどRailsもくもく会があったので、参加してきました。

cherryrb.doorkeeper.jp

やったこと

このもくもく会では、毎回題材が決まってるっぽいです。

今回の題材は、Rails APIを試すでした。

で、僕もこれやるつもりだったんですが、 Railsは5年以上触ってないって 主催者の一人の tono さんに話したら、 「こっちのチュートリアルがいいよ」と教えてもらえたので、 チャットアプリを作りました。

qiita.com

やってみた雑感

とりあえず2時間もあれば、ある程度動くものができる、しかもリアルタイムに更新されるから気分がいい 課題でした。

ただ、前提として Rails5に組み込まれた ActionCable / WebSocket を体感するためのサンプルなので、これでRailsの知識や力が身につくかというと、 まったくそんなことは無い です。

このサンプルは次にマッチする人には良さそうですが、僕にはマッチしませんでした。

  • Railsをこれまで触っていて、WebSocketについて知りたい人
  • Webアプリ開発初心者で、とりあえず動くものを作ったというモチベーションが欲しい人

このどちらかに当てはまる人にはいいんじゃないでしょうか?

つまったこと

基本的に、記事の通りに書いて動かしていけば、問題なく動きました。

唯一、Google先生に頼ったのは、次の問題。

stackoverflow.com

どうも、uglifier が JSを圧縮するために、 node を使ってるらしい

qiita.com

その時に思わずつぶやいたのがこれ

あとは、動かすぶんには問題なかったけど、とりあえず動かしただけで調べないといけないことがあるのでメモ

Redisの役割

Redisは概要ぐらいは知ってるものの、今回の実装の中でいつの間に使ったのかわかりませんでした。

あまりにもよしなにしてくれるので、役割が見えませんでした。

ActionCableが使ってるのか、 ActiveRecord が使ってるのかだと思うんですが、適当なときにちゃんと調べようと思います。

もくもく会の感想

会場が会社から近いし、ほどよくゆるい雰囲気なので、次回も参加しようと思います。

ある程度、Web開発の知識がある人向けに、Railsの勉強するお題があればだれか教えてくだしあ

パーフェクトRuby (PERFECT SERIES 6)

パーフェクトRuby (PERFECT SERIES 6)

パーフェクト Ruby on Rails

パーフェクト Ruby on Rails

slick3 で sql in を書く

最近仕事でSlick3を使ってますが、 SELECT * FROM hoge WHERE hoge.id IN (1, 2, 3) 的な書き方が最初わからなかったのでメモ。

SQLパターン

SQLではどうやらListを扱ってないらしい。 というのを、 id:tarao さんのこの記事で知りました。

d.hatena.ne.jp

へぇ、そうだったのか。 taraoさんには、Scala関西Summitで発表していただいたし、 bullet-scala 面白そうなので、今のプレジェクトに突っ込むかもしれないと思いつつ、勉強させて頂いてますが、 IN のことは知りませんでした。

github.com

liftedな書き方パターン

Scalaらしいモナモナした(?)書き方でやるとき。 今のプロジェクトではこっちでやってます。

こういうやつ↓

db.run {
  hoges.filter(id = 1).result
}

これで、SQLIN を使うには、2通りあるらしい。

一つは、SQLのサブクエリを評価するとき。これには in を使う

db.run {
  hoges.filter(id.in(fugas.map(_.hogeId))).result
}

もうひとつ、 Scalaのコレクションを利用するとき。これには、 inSet という関数が用意されてる。

val hogeIds = List(1,2,3)
db.run {
  hoges.filter(id.inSet(hogeIds)).result
}

これ、公式ドキュメントに普通に載ってるんですが、Querysのページばっかり読んでて、見つけるまで時間がかかってしまいました。

http://slick.typesafe.com/doc/3.0.3/sql-to-slick.html

ScalaプログラマがA Tour of Goをやった

最近、転職した先で、やたらとGo言語を推してくる同僚がいるので、Scalaのポジションを守るためにも、一度Goを触ってみようと思ったので、その際のあれこれを書いきます。

やったこと

A Tour of Goを一通りやってみた。

A Tour of Goはポイントを抑えながらいろいろコードを試せるので、本当に最高ですね。 こういう、砂場環境はものごとの習得に大事!!

Scalaにもこういうの欲しい感があります。

やってみた雑感

  • Webサービスに採用したいとは思わない(機能がシンプルなマイクロサービスなら可)
  • サーバ内で動かすツール書くには良さそう
  • インフラ寄りなことやるには良さそう
  • ベターC とか Refine C という印象

気に入ったところ

  • 静的型かつ、変数定義時に型宣言を省ける
  • セミコロン(;)レス
  • ループの構文が for のみ(whileとかない)

引っかかるところ

  • 配列の宣言がなんかダサい。(超主観です) []int{...} がなじまない。先頭に[] をつけるのはどういう意味があるんだろうか?
  • 継承の仕組みはなく、多態性を実現するために同じ処理を何度も書くことになりそう
  • 十分にポインタはラップされているが、それでもポインタを意識から外せない
  • mutable
  • 配列/sliceもmutable

配列(array)とスライス(slice)

http://dibtp.hateblo.jp/entry/2014/07/06/190804

// 配列
p := [6]int{2, 3, 5, 7, 11, 13}
q := [...]int{2, 3, 5, 7, 11, 13}

// スライス
r := []int{2, 3, 5, 7, 11, 13}

比較

p := []int{1, 2}
q := []int{1, 2}

fmt.Println("p == nil", p == nil) //=> p == nil false
fmt.Println("p == q", p == q)  //=>(Error) invalid operation: p == q (slice can only be compared to nil)

forループ

ループはforのみ。 rangeで、indexと値を順に取り出せる(http://go-tour-jp.appspot.com/#34)

if

式ではない。ので、値を返せない(´・ω・`

switch

式ではない。 ので、こういうの↓書けない(´・ω・`

s := switch {
        case t.Hour() < 12:
            "Good morning!"
        case t.Hour() < 17:
            "Good afternoon."
        default:
            "Good evening."
    }

オブジェクト指向的な書き方

struct型にメソッドが適宜できる。(A Tour of Go #50)

構文として、struct型定義のスコープの外側でメソッドを定義するので、あまり好みではない。 コーディング規約として、struct型とメソッドは同じファイル内で定義するなどの、ルールで縛る必要がある。 メソッドを定義できるのはパッケージ内に限られて入るけど、それでも範囲が大きいように思う。

interface

明示的に継承などを宣言する必要がない。 ダックタイプ的な感じ。(というか、ダックタイプ?)

変数の型をinterfaceで指定すれば、適合するメソッドを持った値しか代入できなくなる。

// 鳥インタフェース
type Bird interface {
    Sing() // 鳥は鳴く
}

// 鶏 構造体
type Rooster struct {
    sound string
}

func (r *Rooster) Sing() {
    fmt.Println(r.sound) // 鶏も鳴く
}


func main() {
    var b Bird
    b = &Rooster{"cock-a-doodle-doo"} // 鶏の鳴き声は、 "cock-a-doodle-doo"
    b.Sing() // あ、鳴いた => cock-a-doodle-doo
}

Goroutine

すごくシンプルに並行プログラミングできる。 とりあえず、チャネルの動きだけ把握すれば良さそう。

あ”あ”あ”、画像に埋め込んだ文字がTypoしてる!そんなときはImageMagickだ!!

最近、仕事の傍らScala関西Summitの準備を進めてます。

summit.scala-kansai.org

で、ひとつのテンプレで大量の画像を作成する必要があるタスクがあって、その作業を行っていました。

作ったのは↓のような画像です。*1

f:id:kuchitama:20150718160719j:plain

このアイコンだけを差し替えたような画像を量産していたのですが、 お気づきでしょうか?

イベントのスタッフは stuff ではなく staff なんです。

時既におそく、Typoに気づいたのはすべての画像を書きだした後…

しかも、個々の編集過程が残っているわけではなくて、手元にあるのは大本のテンプレートと作成のための素材、そして大量のTypo画像…

テンプレートを直して一つ一つ画像を直そうかとも思いましたが、さすがにそれはやってられない!

ということで、コマンドラインからImageMagickを使って、まとめて画像を修正することにしました。

手順

まずは、↓のようにテンプレートのTypoを直して、差分が発生する箇所を抜き取って透過した overlayer.png を作成します。(※: 真ん中の矩形部分が切り抜かれています)

f:id:kuchitama:20150718164424p:plain

この画像が用意できたら、ImageMagickconvert コマンドを使って上書きしてやります。

$ convert typo.png fixed.png -composite ./fixed_typo.png

これで、下記のように修正された画像が出力されます!*2

f:id:kuchitama:20150718165249p:plain

このままだと、何度もコマンドを叩かないと行けないので、 xargs を使って対象の画像をまとめて出力するようにします。

xargs-I オプションを使って、任意の位置に引数を設定することができます。

というわけで、実行するコマンドはこちら

$ find -E *.png | xargs -IFILENAME convert FILENAME fixed.png ./fixed_FILENAME

これでまとめて、大量の画像に埋め込まれたTypoを修正することが出来ました。

こんな、地味にStaffが頑張ってるScala関西Summitをよろしくお願いします。

ImageMagick逆引きコマンドリファレンス

ImageMagick逆引きコマンドリファレンス

*1:実際の画像は少し違います。この画像はブログ用に作成しました

*2:イコン画像が切れているのはブログ用に適当に画像を用意したためで、イベントで使う画像はちゃんと合成されてます

Scala WebSocketでwss接続

前に作ったJankenSocketのClientでwss接続を利用するようにしました。

Scala + JettyでWebSocket Clientを実装しました - Kuchitama Tech Note

jetty websocket wss とかでググると、だいたい opensslとかkeytoolとか使って自前証明書を使う方法ばかりでるんですが、ちゃんとした証明書を使ったサーバだと別に証明書作る必要はないみたいです。

というわけで、コミットはこちら

SSLContextFactory を作ってそのまま WebSocketClientコンストラクタに渡せば大丈夫です。

ところで、まともな SSL証明書を使えるherokuは本当に便利です。