お名前ドットコムで1円キャンペーン中

たまたま、ドメイン検索したら1円だったので、 勢いでWebサービス作った のですが
どうやら お名前.com が現在18周年キャンペーン中でして
期限が11/17(金)の17時までのようです。
   
ということでなんとなく1個余分に購入しました。
(実際にはうっかりtypoしていたため2つ購入)
 
近々必要な人はお早目に。

Bulmaのカスタマイズ方法 with Rails Webpacker

昨日作った Twitter Video Downloader で利用したBulmaについてです。
 
Bulma: a modern CSS framework based on Flexbox いいですよね。
bootstrapにしろCSSのFrameworkはゴリゴリCSS書くのがつらいエンジニアとしては、とても有り難いです。  

Customize方法

デフォルトの色を変えたりする方法がしばし分からずに、小一時間ぐらい悩みました。

通常はyarn add bulma した後に app/javascript/stylesheets/application.scss などでimportすれば使えます。

@import '~bulma/bulma';

カスタマイズするには、 Customize Bulma | Bulma: a modern CSS framework based on Flexbox
の通りにsassの読み込み順を意識しないといけませんでした。

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
$link: $grey;
$link-visited: $grey;
$link-hover: $grey;
$link-active: $grey;
$primary: #f78b4c;
@import '~bulma/bulma';

ついでに

どうやらsassにnextcssが混ざっているらしく、build時にwarningが出ます。

(Emitted value instead of an instance of Error) postcss-custom-properties

githubのissueではwarningだから気にすんなとか、
postcss-cssnext でpostcss-custom-propertiesをfalseにできるとか、
~bulma/sass/grid/_all を読ませなければokとか、
warning出ないようにsassの一部を削除したやつをforkしたから使えとか
色々あるようです。
 
個人的には、postcss-cssnext で false にしたかったのですが、webpacker周りがよく分からんかったので
stackoverflowに上げておきました。詳しい方がいらっしゃいましたら教えてください。
ruby on rails - (Emitted value instead of an instance of Error) postcss-custom-properties in bulma css - Stack Overflow

参考:

See Also

Twitterの動画をダウンロードするWebサービスを作った - rochefort's blog

Twitterの動画をダウンロードするWebサービスを作った

最近サッカーが好きでTwitterのTimelineに流れる動画をダウンロードしたくて、
色々調べているうちに勢い余ってWebサービス化してしまいました。
 
今、workドメインが1円なんですよねー。

twitter-video-downloader
f:id:rochefort:20171112052124p:plain

  • rails 5.1.4
  • bulma 0.6.1 (css framework)

を用いて作りました。個人的には背景が毎回おしゃれな画像で変わるのが気に入っています。 flexbox使って見たくてbulma選択したのですが、最終的には12columnsで作ってしまいました。
 
Rails関連としては一応webpackerを使ってみました。gemで入るjs/cssrails-ujs, turbolinks)はsprockets、 それ以外はwebpackで管理しています。この辺りは不慣れなせいか、戸惑いがありました。
あと真新しいところだと、virtus でform objectを利用してみました。
これは便利でいいなという印象です。i18n(ja.yml)の食わせ方が独特でしたが。
 
その他、はまりどころもあったので追々記事にするかもしれません。