RailsのフロントをOnsenUIでWebComponent化、ネイティブアプリっぽくサクサク動かす:開発作業ログ

以下の状況・条件でやってみました。とっても悩んだ。

・メインはmobile
・slim/scssでのデザインはもうできててRailsアプリに乗せた
・非フロントエンジニア
・タブ切り替えとか画面遷移をアプリっぽくぬるぬる動かしたい
・単一ファイルコンポーネントにはしない
・vue、react使わない
・jQueryもできるだけ使いたくない
・今webアプリだけどもしかしたら今後ネイティブアプリも出すかも

monacaユーザーにはお馴染みOnsenUI、コンポーネント系ちょっと弱いとか言われてるけど、色んなフレームワーク利用OK & 素のjavascriptでも使える汎用性の高さでこちらを採用。

やること

・OnsenUIのインストール　←ここと
・OnsenUIのcssカスタマイズ　←ここをやります
・ons-navigator/splitter/tabbarを組み合わせて動かす

まずは、OnsenUIが使えるように。

とりあえずheadにどーん

 link href="https://unpkg.com/onsenui/css/onsenui.css" rel="stylesheet"
 link href="https://unpkg.com/onsenui/css/onsen-css-components.min.css" rel="stylesheet"
 script src="https://unpkg.com/onsenui/js/onsenui.min.js"

でも良いけど、せっかくなのでnpm installしたのを使おう

terminalで

npm install onsenui --save

config/initializers/assets.rb に下記が入っているのを確認

Rails.application.config.assets.paths << Rails.root.join('node_modules')

/node_modules 以下のパスをjsとcssで呼び出してあげる

// = require onsenui

@import "onsenui/build/css/onsen-css-components.min.css";
@import "onsenui/css/onsenui.min.css";

OnsenUIのcssをカスタマイズする

「元のcssが邪魔だ〜！」という時用にカスタマイズ方法を。

terminal

cd node_modules/onsenui/css-components-src

依存するパッケージをインストール（よく分からないけど公式に書いてあるからやる、良い子はちゃんと調べてね）

yarn install --pure-lockfile

プレビューアーを起動

yarn run serve

で、

Access URLs:
Local: http://localhost:4321/
External: http://192.168.1.3:4321/
Built CSS Files:
./build/dark-onsen-css-components.css
./build/old-onsen-css-components.css
./build/onsen-css-components.css

こんな感じの表示が出るので、アクセス（LocalでもExternalでも）

この状態でcss編集→保存で自動ビルドしてくれる。プレビューも上記で確認できる。

terminalを見れば

Built CSS Files:
./build/dark-onsen-css-components.css
./build/old-onsen-css-components.css
./build/onsen-css-components.css

こんな感じで、ちゃんとビルドできていることが確認できるはず。

編集するのは、/node_modules/onsenui/css-components-src/src の中。（主にいじるのはその中でも /components）

よくありそうなやつ

フォントが・・・
/components/util.css のfont-familyの記載を削除、もしくはここで指定

なんか背景に色ついてる・・など
/theme.css に色指定あり

NEXT STEP

・ons-navigator/splitter/tabbarを組み合わせて動かす

書いたよ！↓