ウェブエンジニア珍道中

日々の技術的に関する経験を書いていきます、脱線もします。

RailsでSlimを使った時に起こる「開発環境だけ見た目が崩れる問題」の解消

問題について

https://github.com/slim-template/slim-railsを使って開発をしていると、特定の条件で開発環境下(development)でのみ見た目が崩れる減少が起きていました。

長らく原因がわからず解消できませんでしたが、先日ようやく何とかできたので紹介します。

発生条件

CSSで以下の設定が入っているDOM要素で起こりました。

white-space: pre-wrap;

これは「スペースは詰めずにそのまま表示してね」というもので、意図して入力された空白をそのまま表示するために入れていました。

このCSSの設定を入れると開発環境でのみ見た目が崩れてました。

対策

config/environments/development.rbにこの設定を書き換えると直ります。

Slim::Engine.set_options pretty: false

原因

slim-railsがdevelopment環境下ではHTMLの見やすさのためか、不要なスペース(タブ)を入れていたのが原因です。

CSSの設定によってはそのまま表示してしまうため、見た目が崩れてしまいます。

またその処理がなくてもブラウザのデベロッパーツールで見ると整形してくれているので、いらないケースが多いです。

なので上記の設定を書き加えて無効化してやるわけですね。

本番環境では大丈夫ですが、開発時に見た目が崩れてチェックができなかったりしたので何とかできて良かったです。

builderscon tokyo 2017行ってきた -2日目-

www.te-nu.com

の続きです。2日目行ってきましたのでレポート。

朝イチの1発目のセッションは思いっきり寝坊したので2つ目から見ました。慌てて特急に乗ったら日吉駅通りすぎるし。くそう。

見に行ったセッション(午前)

小さく育てて始めるコンパイラ

builderscon.io

既存言語のサブセットとして最低限の実装をしてからいわゆる「俺言語」に育てていく流れについての話でした。

言語とかコンパイラは作ったことがありませんでしたが、動く最低限のものを早く確実に作るというところなどweb屋さんとして共感するところは多々ありました。

あと考えて見れば当たり前ですががっつりテストは書くものでした。Ruby言語のテストってどう書いてるんだろ…C言語でやってるのかな。

奥深くの話は経験不足でわからないところも多かったです、型推論アルゴリズムとかさっぱりでした。でも面白そう。

ランチ

2日目のお弁当です。美味しかった(今回は同期も一緒だったので写真は一つです)

f:id:te-nu:20170805182755j:plain

サイボウズ株式会社とSupership株式会社の方たちのセッションを聞きながらいただきました。

見に行ったセッション(午後)

polyglot になろう !!

builderscon.io

polyglotは複数言語を扱える人のことで、そのメリットや具体例についての話でした。

大きなメリットは「かっこいい」ことと「他言語の考え方を導入できる」ということでした。(例:Objective-Cの命名規則はキッチリしていて良いので多言語に持ち込む)単に他言語を勉強すると元から触っている言語の理解も深まるそうです。確かにC言語のポインタ触ってたからPerlのリファレンスはまだ抵抗感なく触れたなーと思い出しました。

今やっている分野とは全く別の分野へ手を出すと良いそうで、自分の場合はWebなので組み込み系を作ってみると良いのかなーと思いました。コストはやる気くらいらしいです(笑)

WEB+DB PRESS 100号記念 特別企画

builderscon.io

WEB+DB PRESSが2017年8月でVol.100になる事を記念し1号から振り返って話をしていくものでした。Vol.1は2000年でRebuldの宮川さんの記事がVol.2で登場していたのに驚きました。

Javaの時代だったり、フィーチャーフォンの時代だったりと歴史を感じる内容でした。ちなみに毎年4月に出る新卒歓迎号は売上が上がるそうです。Rails 3の特集がVol.58で、自分が読み出したのがVol.75とかなので新参者感を感じますねw

汎用CMSから新規開発の自社サービスへ移行した事例のご紹介

builderscon.io

WordPress→Railsに移行した話で、主にデータ移行の話でした。汎用CMSには汎用であるがためにデータ構造にアンチパターンがあったり、テーブル名も抽象的な名前だったりするのでデータ移行は大変そうでした。移行後もアンチパターンを踏み抜いたりしてパフォーマンスに影響が出た事例や、KVSを使っての改善事例などを話されていました。

全体的な感想

開発したくなりました(笑)毎回カンファレンスに行く度に刺激とモチベアップになりますね。内容は幅広くてテーマ通り知らなかったを聞きまくったなーといった感じです。

コンパイラ作ろうがサービス移行しようがウェブ作ろうがテストコードの話題は出ていて、「書くのが当たり前っしょ」くらいのノリだったのでテストコードの重要性を今一度再確認しました。今やってるサービス書いていかんとなーと…。

いつかああいう舞台に立ちたいものです。その日を夢見て日々素振りですね。

あとコーヒーが美味しかったです。

ベストトーク章は1日目に見た「RDBアンチパターン リファクタリング」でした。おめでとうございます。生で見れてよかった。

寝坊したり時間が被って見損ねたものとかはまた動画も出るらしいので楽しみに待ちたいと思います。

とりあえず開発をしたくなったので、PCにElectron入れてみました(笑)何か作ってみます。

関係者の方々2日間お疲れ様でした。楽しかったです。

builderscon tokyo 2017行ってきた -1日目-

buildersconとは

buildersconは「知らなかった、を聞く」をテーマとした技術を愛する全てのギーク達のお祭りです。buildersconではトークに関して技術的な制約はありません、特定のプログラミング言語や技術スタックによるくくりも設けません。 必要なのは技術者達に刺激を与えワクワクさせてくれるアイデアのみです。 あなたが実装したクレイジーなハックを見せて下さい。あなたの好きな言語のディープな知識をシェアしてください。あなたの直面した様々な問題と、それをどう解決したかを教えてください。未来技術のような未知の領域について教えてください。 (builderscon - Discover Something Newより引用)

8/3~8/5で行われます(8/3は前夜祭)。今回は8/4と8/5の2日間に参加なのでレポート書いてみます。今回は1日目。

場所

慶應義塾大学の日吉キャンパスで行われました。駅前すぐなので方向音痴の僕でも迷いませんでした。 f:id:te-nu:20170804151539p:plain

見に行ったセッション(午前)

初めてのMySQLチューニング -データベースは怖くない!

builderscon.io

デフォルトの設定で運用していたので一週間に一度は死んでいたMySQLを適切な設定で快適に動かした話でした。その話を通じてmy.cnfの設定やレプリケーションの話をわかりやすく話されていました。

最近MySQLのアップデート作業をしてレプリケーションの設定をしたので結構共感もしつついい話を聞けました。

ランチ

ランチセッションということで、株式会社VOYAGE GROUPとMomentum株式会社の方々の話を聞きながらランチを食べました。ランチに頂いたお弁当がすげーおいしかったです。出ていたのはこの2種類です。(もう1種は一緒に来ていた同期に撮らせてもらいました)

f:id:te-nu:20170804210551j:plain f:id:te-nu:20170804210541j:plain

見に行ったセッション(午後)

真のコンポーネント粒度を求めて

builderscon.io HTML/CSSの設計に関する話でした。

どの設計にすれば運用がしやすいかという話を色々な設計手法の話を交えて話されていました。中でもECSSの考え方がインパクトがあって、「抽象化して使いまわすから影響が出てきて消せなくなったりするんだ、コピペして使いまわすな(意訳)」といった考え方で、逆に新しいなーと思いました。サイトはこちら。

ecss.io

speakerdeck.com

複雑なJavaScriptアプリケーションに立ち向かうためのアーキテクチャ

builderscon.io

Javascriptの設計の話でした。肥大化するフロントエンド周りをどう設計していくかを息子さんの写真を交えてのセッションでした。

「あれ、DDDとかの話だっけ」と思ってしまうくらいにガッチリとしたアーキテクチャの仕組みの話で、現状jQueryくらいしかガッツリ触ってない自分は早くVue.jsとかをもっと本格的に触ってアーキテクチャを勉強しないとと思いました。

MVとかMVVMとかPDSとか。アーキテクチャに関してはサーバサイドと通ずるものも感じたので、全くの無関係という訳ではなさそうです(そりゃそうか)。

RDBアンチパターン リファクタリング

builderscon.io

RDBのリファクタリングの話でした。

RDBのリファクタリングはサービスの停止が伴ったりと大掛かりになりがちで、かつ長いスパンでやっていくものだと言うことだそうです。

リファクタリングに対するアプローチを技術・政治・精神面から色々と話されていて、DBのリファクタリングにおいてはモニタリングとテストが重要でDBに対してもシナリオテスト等をガッツリ組んでいくものなんだなーという知見を得ました。

アンチパターンの"memo1, memo2"というカラムは悲しい…。

speakerdeck.com

LT

12~3人が5分ずつ話していくLTも見ました。5分経つとドラが鳴らされ打ち切りです(今回ドラを忘れたらしいので口で「ジャ〜ン」と言ってた)。だいたい濃いLTばっかりでした。 QRコードを分割する話とか、パーサを作って自分だけのWiki記法を作る話とか…。ほとんどの方が実演を交えても5分きっかりで終わるので時間調整がすげーと思いました。

1日目はこんな感じです。また明日2日目に行くのでレビュー書きたいと思います。では。

2日目に続く

www.te-nu.com

tmuxのバージョンを見るコマンドが他と違う感があったのでメモ

tmux -V

これで見ることができました。

一般的には-v--versionですが、tmuxに関しては-Vのようです。
あんまり見ない。

ちなみに-vは「詳細なログを出す」オプションらしいです。 tmux-client-PID.logtmux-server-PID.logがカレントディレクトリに作られ、細かいログが残されていくので注意しましょう。

詳しいオプションはこちらを参考にどうぞ(英語だけど)

tmux(1) - Linux manual page

-2とかは付けておいたほうがいいですね。

はてなブログに固定ページがあったので試してみた

固定ページとは?

固定ページを作成できるようにしました(はてなブログPro) - はてなブログ開発ブログ

はてなブログでは、有料プラン「はてなブログPro」利用者向けに、独立した固定ページを作成できる機能を追加しました。投稿した順に時系列で扱われる通常の記事とは別に、ある固定のURLのみで表示される特別なページを作成できます。 「お問い合わせ」や「自己紹介」「注意事項」「リンク集」といった静的なコンテンツを用意したいときに便利です。どうぞご利用ください。

(上記ブログから引用)

時系列に並ぶ記事とは外れた固定のページが作れるようになりました。他の記事を更新するたびに流れて欲しくない記事を作る際には便利そうです。

作ってみた

せっかくなのでWebエンジニアとしてどういったスキルを持っているか、軽い自己紹介も合わせて書いてみました

www.te-nu.com

一応PCで見るところのプロフィール欄にもリンクを貼っているので、「ああ、こういう人がブログ書いているんだな」と思って貰えれば良いなと思ってます。

プラスで自分ができることや勉強したことを残すことで見える化し、モチベーションアップも狙ってます。ブログやりだした理由とも合っていい感じです。

ということで、はてなブログProの会員の方はぜひ使ってみてください、おすすめです(回し者みたいになってしまった)

(使い方は管理画面に固定ページメニューがあるので記事を作ってURLをどこかしらに貼り付けるだけで簡単だったので割愛します。(・_・;))

Rubyのcoerceメソッドについて

Rubyの勉強していたらNumeric#coerceメソッドというものを見つけたのでメモ

機能

全ての数値オブジェクトに対して使えるメソッドで、引数で与えられた数を自分と同じクラスにして自分とセットで配列で返すものだそうです。

hoge = 1.6
hoge.coerce(5)
=> [5.0, 1.6]

呼び出し元の1.6に引数で与えられた5が変換され、IntegerからFloatになりました。

逆もできるかなーと。

hoge = 2
hoge.coerce(1.6)
=> [1.6, 2.0]

なぜかFloatになってしまった。

なんでやねんと思い、ソースを見たらまさかのC言語が出てきました。大分根っこまできたなあ。

static VALUE
num_coerce(VALUE x, VALUE y)
{
    if (CLASS_OF(x) == CLASS_OF(y))
        return rb_assoc_new(y, x);
    x = rb_Float(x);
    y = rb_Float(y);
    return rb_assoc_new(y, x);
}

ぱっと見た感じどちらもFloat型に変換しているっぽいです(rb_Floatあたり)。 仕様っぽいので、結構各クラスで変換後のクラスは別途定義しているようですね。 まとめてみよう

↓呼び出し元 →引数 Integer Float Rational Complex
Integer Integer Float Float Error
Float Float Float Float Error
Rational Rational Float Rational Complex
Complex Complex Complex Complex Complex

使い道

正直浮かばない

ansibleに*.retryファイルを作らせない方法

ansibleの実行に失敗する度に生成されるファイルで、失敗したホストが一覧で入っています。

.gitignoreで無視したりしても良いのですが、管理するサーバが少なかったりするとメリットも少なく邪魔なので作らせないようにしました。

といってもansible.cfgに一行書くだけでOKです。

retry_files_enabled = False

これでチマチマとrmコマンドを打たなくて済みますね。