![スクリーンショット_2019-02-21_2](https://assets.st-note.com/production/uploads/images/10099111/rectangle_large_type_2_22926f84858e0fbba2075833fcbe72b6.png?width=1200)
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を組み合わせて動かす
書いたよ!↓
この記事が気に入ったらサポートをしてみませんか?