フロント苦手な私には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使ってるそうです。
GitHub Pages で Jekyll 使ってる人には便利だと思います。ちなみに DojoCon Japan のサイトはこれを使ってます。Frasco: Jekyll Starter Project https://t.co/zXv8c0QiMG
— Kite (@ixkaito) 2016年7月18日
Frascoの使い方
とりあえず、 jekyll
と npm
のインストールは必要です。それぞれ、自分のマシンにインストールしておいてください
それさえあれば、あとはFrasco公式ページに乗っている通り、 Frascoをcloneして、 npm install
, npm start
すればすぐに利用できます
$ git clone [https://github.com/ixkaito/frasco.git:embed] $ cd frasco $ npm install $ npm start
Frascoのいいところ
さくっとプラウザで確認できる
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管理するために色々と作業が必要でした。
あとは、必要に応じて READMEやpackage.json を書き換えます。 READMEは全部書き換えるだけでいいですが、package.jsonは内容を見て、部分的に書き換える必要があります。 大体、package.json 内の次の項目を書き換えるといいでしょう。
- name
- version
- description
- repository
- keywords
- author
- bugs
- homepage
- license
これは、Frascoをcloneして使うのではなく、 yo
などで、プロジェクトの雛型を吐き出すようにすればいいんじゃないかと思います。
私自身はyo
でテンプレートを作ったことはないのですが、少し勉強してできればPR投げたいなと思っています。
Frascoで作ってるもの
Frasco個人的にタイムリー!!めっちゃいいので、帰って早速使う!!!
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
なにがタイムリーだったかって、ちょうどいい加減去年の大都会で宣言した A Tour of Go のScala版作るの真面目に取り組もうとしてたからです。
Jekyll使って作ろうというのは、なんとなく考えてたんですが、フロント開発が苦手で着手が先延ばしに鳴ってましたが、Frascoあれば雛型が出来上がってるので、重い腰がすっと上がりました。 これから、マジメに作ります。
Ruby関西勉強会で登壇してきました #rubykansai
先日開催された第73回 Ruby関西に参加してきました。
Ruby系の勉強会に登壇するのは初めてだったので、アウェー感を感じつつも、楽しい1日を過ごしました。 まぁ、着ていった服のせいでアウェー感がましてた気もします
Ruby関西73はじまったーーー。今日はScala界からの刺客(?)として、このカッコで登壇します #rubykansai pic.twitter.com/YPBl9ruKOq
— 口玉(I am Scala Ninja) (@Kuchitama) 2016年7月16日
発表内容
発表資料はこちら。
Scalaプログラマの私がRubyやRuby on Railsを触った時に感じた違和感などを紹介しています。
自分の発表以外は、ゆったりと話を聞いてました。
今回は発表本数が多くて、楽しめました。
RedDotRubyConf
シンガポールで開催された RedDotRubyConf の模様を紹介して頂きました。 RedDotとはシンガポールの愛称だそうです。 世界地図上で見た時にシンガポールが国土が小さくて、点(Dot)の様に見えることと、国旗の色からつけられたそうです。
以下、気になった点のメモ
- シンガポールはみんな英語と中国語が話せる
- 発表内容は日本のRubyKaigiに比べてゆるめで、コワイ感ない
- 料理美味しい
- 教育水準高い
SciRubyプロジェクトの紹介
Rubyをデータ解析に活用できる様にするSciRubyプロジェクトの紹介。
Rubyでデータサイエンスをする、、、ためにRubyをよくして行こうぜ。遠大な話だなー。 #rubykansai
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
ちょうどPythonの話題がTLに流れてきた https://t.co/ofcYM5KoXs
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
Rubyでjsベースの可視化ソフトとの連携やるのは難しくない。けど、可視化するデータを作るための演算や機械学習などの前段部分が充実しないと、使う旨味がない #rubykansai
— 口玉(I am Scala Ninja) (@Kuchitama) 2016年7月16日
気の長い話に聞こえましたが、そもそもPythonもRが出てきてから、後追いで現在のデータ解析に強い言語としての地位を築いたそうです。 負けるなRuby!!
Jekyll Starter Project: Frasco
Jekyll を 便利に使うために Frascoというツールを作られたそうです。 めっちゃ便利そう! Jekyllを始めるためにあった方がいいものが、全て最初に用意されているので、さくっとページ制作を開始できそうです。 これは、ぜひ触ってみたいです
一晩で作ったそう。綺麗なサイトである。frasco #rubykansaihttps://t.co/7B6pZ0TmvA
— そば (@sobameshi_m) 2016年7月16日
Webpack使ってるんだったらgulpいらないような?そんなことはないのかな?
— 口玉(I am Scala Ninja) (@Kuchitama) 2016年7月16日
#rubykansai
Burbonとneat良さげ!!試していきたい
— 口玉(I am Scala Ninja) (@Kuchitama) 2016年7月16日
Frasco個人的にタイムリー!!めっちゃいいので、帰って早速使う!!!
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
登壇中に、発表者の @ixkaito さん作 Worker の GithubStarが300突破してました。おめでとうございます!!:embed]
#Wocker のスター数が300を超えた!ありがとうございます! #rubykansai https://t.co/iFUFfouE88
— Kite (@ixkaito) 2016年7月16日
RubyからC#を扱う
誰得なんだ、とか思いつつ聞いてました(すいません) 内容は、タイトルの通りのことを実現するための、ライブラリを開発されたそうです。
個人的には、内容そのものよりも、マイクロソフトが最近取り組んでいるオープン化が、実際身の回りにまで影響を及ぼしたことが感慨深かったです。 てらだよしおさんの話や、色々なイベントレポートで、マイクロソフトがオープンソースに舵を切っていることは知っていましたが、地方の全くMS関係ない勉強会にその取り組みに絡んだ内容が出てきたのは、成果の現れと言えるんじゃないでしょうか
RoslynのおかげでRubyからC#が使える。Microsoftのオープンソース推進の影響が遂に実感できるところまでやってきた感 #rubykansai
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
わたしが Rails Girl になるまで
cherry.rb オーガナイザーの との さんの発表。 今年の初め頃に cherry.rbには何度か参加してたんですが、今こんなことになっているとは
俺が参加できなくなってからcherry.rb の女性比率が上がっただと!? #rubykansai
— 口玉(I am Scala Ninja) (@Kuchitama) 2016年7月16日
gemの話
gemについてのちょっとしたノウハウとか、おすすめgemとかでした
冒頭で、Gem作ったある人がどれくらいいるかアンケートしてました。
パーフェクトRubyにgem作る項もあったはずなので、その影響で作ったことある人多いんじゃないかな #rubykansai
— 口玉(I am Scala Ninja) (@Kuchitama) July 16, 2016
公開したことのある人もアンケートしたら良かったんじゃないかな?
2対のMVC (Double MVC)
GUI(React/Flux) と Web(Rails)でそれぞれにMVCを持ち、サービス開発するハンズオン
サービス全体を通してアーキテクチャの設計をする人には、非常に参考になると思います
資料がすごく長いけど、少しずつ進めていけばちゃんと理解できるはず
Ruby 初級者向けレッスン - Array と Hash
Ruby関西お馴染みの初心者向けレッスン なんですけど、たまたま座った席がcherry.rb勢が固まってて、レッスンせずに雑談してました(すいません)
最後に出てきたジョーク回答面白かったです
感想
ホントは懇親会行きたかったんですが、夏風邪のため体調優先で帰りました。 もっとRuby界隈の人とも交流していきたいので、また次回も参加したいと思います。
Cherry.rbでRails5やってみた
最近、仕事でRailsを触らずを得ない感じになってきたので、本格的にRailsの勉強をはじめました。
そしたら、ちょうどRailsのもくもく会があったので、参加してきました。
やったこと
このもくもく会では、毎回題材が決まってるっぽいです。
で、僕もこれやるつもりだったんですが、 Railsは5年以上触ってないって 主催者の一人の tono さんに話したら、 「こっちのチュートリアルがいいよ」と教えてもらえたので、 チャットアプリを作りました。
やってみた雑感
とりあえず2時間もあれば、ある程度動くものができる、しかもリアルタイムに更新されるから気分がいい 課題でした。
ただ、前提として Rails5に組み込まれた ActionCable / WebSocket を体感するためのサンプルなので、これでRailsの知識や力が身につくかというと、 まったくそんなことは無い です。
このサンプルは次にマッチする人には良さそうですが、僕にはマッチしませんでした。
- Railsをこれまで触っていて、WebSocketについて知りたい人
- Webアプリ開発初心者で、とりあえず動くものを作ったというモチベーションが欲しい人
このどちらかに当てはまる人にはいいんじゃないでしょうか?
つまったこと
基本的に、記事の通りに書いて動かしていけば、問題なく動きました。
唯一、Google先生に頼ったのは、次の問題。
どうも、uglifier が JSを圧縮するために、 node を使ってるらしい
その時に思わずつぶやいたのがこれ
Railsを初めようとしたら nodejsのインストールを迫られた。。。node色んな所に出しゃばり過ぎだろ… https://t.co/PYD9SIFlvr
— 口玉(I am Scala Ninja) (@Kuchitama) 2016, 2月 10
あとは、動かすぶんには問題なかったけど、とりあえず動かしただけで調べないといけないことがあるのでメモ
Redisの役割
Redisは概要ぐらいは知ってるものの、今回の実装の中でいつの間に使ったのかわかりませんでした。
あまりにもよしなにしてくれるので、役割が見えませんでした。
ActionCableが使ってるのか、 ActiveRecord が使ってるのかだと思うんですが、適当なときにちゃんと調べようと思います。
もくもく会の感想
会場が会社から近いし、ほどよくゆるい雰囲気なので、次回も参加しようと思います。
ある程度、Web開発の知識がある人向けに、Railsの勉強するお題があればだれか教えてくだしあ
- 作者: Rubyサポーターズ,すがわらまさのり,寺田玄太郎,三村益隆,近藤宇智朗,橋立友宏,関口亮一
- 出版社/メーカー: 技術評論社
- 発売日: 2013/08/10
- メディア: 大型本
- この商品を含むブログ (22件) を見る
- 作者: すがわらまさのり,前島真一,近藤宇智朗,橋立友宏
- 出版社/メーカー: 技術評論社
- 発売日: 2014/06/06
- メディア: 大型本
- この商品を含むブログ (8件) を見る
slick3 で sql in を書く
最近仕事でSlick3を使ってますが、 SELECT * FROM hoge WHERE hoge.id IN (1, 2, 3)
的な書き方が最初わからなかったのでメモ。
生SQLパターン
生SQLではどうやらListを扱ってないらしい。 というのを、 id:tarao さんのこの記事で知りました。
へぇ、そうだったのか。
taraoさんには、Scala関西Summitで発表していただいたし、 bullet-scala
面白そうなので、今のプレジェクトに突っ込むかもしれないと思いつつ、勉強させて頂いてますが、 IN
のことは知りませんでした。
liftedな書き方パターン
Scalaらしいモナモナした(?)書き方でやるとき。 今のプロジェクトではこっちでやってます。
こういうやつ↓
db.run {
hoges.filter(id = 1).result
}
これで、SQLの IN
を使うには、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のページばっかり読んでて、見つけるまで時間がかかってしまいました。
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}
比較
- http://qiita.com/taksatou@github/items/48b22d6d37e99a6c21cc
- Slice同士の比較は出来ないけど、 Sliceとnilは比較できる
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の準備を進めてます。
で、ひとつのテンプレで大量の画像を作成する必要があるタスクがあって、その作業を行っていました。
作ったのは↓のような画像です。*1
このアイコンだけを差し替えたような画像を量産していたのですが、 お気づきでしょうか?
イベントのスタッフは stuff
ではなく staff
なんです。
時既におそく、Typoに気づいたのはすべての画像を書きだした後…
しかも、個々の編集過程が残っているわけではなくて、手元にあるのは大本のテンプレートと作成のための素材、そして大量のTypo画像…
テンプレートを直して一つ一つ画像を直そうかとも思いましたが、さすがにそれはやってられない!
ということで、コマンドラインからImageMagickを使って、まとめて画像を修正することにしました。
手順
まずは、↓のようにテンプレートのTypoを直して、差分が発生する箇所を抜き取って透過した overlayer.png
を作成します。(※: 真ん中の矩形部分が切り抜かれています)
この画像が用意できたら、ImageMagickの convert
コマンドを使って上書きしてやります。
$ convert typo.png fixed.png -composite ./fixed_typo.png
これで、下記のように修正された画像が出力されます!*2
このままだと、何度もコマンドを叩かないと行けないので、 xargs
を使って対象の画像をまとめて出力するようにします。
xargs
は -I
オプションを使って、任意の位置に引数を設定することができます。
というわけで、実行するコマンドはこちら
$ find -E *.png | xargs -IFILENAME convert FILENAME fixed.png ./fixed_FILENAME
これでまとめて、大量の画像に埋め込まれたTypoを修正することが出来ました。
こんな、地味にStaffが頑張ってるScala関西Summitをよろしくお願いします。
- 作者: クーガー株式会社,石井敦
- 出版社/メーカー: インプレスジャパン
- 発売日: 2008/11/28
- メディア: 大型本
- 購入: 4人 クリック: 89回
- この商品を含むブログ (7件) を見る
Scala WebSocketでwss接続
前に作ったJankenSocketのClientでwss接続を利用するようにしました。
Scala + JettyでWebSocket Clientを実装しました - Kuchitama Tech Note
jetty websocket wss
とかでググると、だいたい opensslとかkeytoolとか使って自前証明書を使う方法ばかりでるんですが、ちゃんとした証明書を使ったサーバだと別に証明書作る必要はないみたいです。
というわけで、コミットはこちら
SSLContextFactory
を作ってそのまま WebSocketClient
のコンストラクタに渡せば大丈夫です。
ところで、まともな SSL証明書を使えるherokuは本当に便利です。