質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

Q&A

解決済

2回答

3246閲覧

ons-lazy-repeatのheightを意識しないバージョンを使用したい

lion_

総合スコア34

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Monaca

「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

0グッド

1クリップ

投稿2017/03/24 15:47

###前提・実現したいこと

掲題の件ですが、現在monacaクラウドIDEで開発中です。
先日onsenui2.2がリリースされ、ons-lazy-repeatのheightを意識しなくてもよくなったようなので、こちらに乗り換えたいと思っております。

JS/CSSコンポーネントには現状
「Onsen UI (Monaca Version) バージョン:2.0.5」
が設定されている状態です。

JS/CSSコンポーネントよりonsenui2.2を追加しました。
これによりIDE上にはonsenui.js、その他関連するjsやcssが2種類ずつ存在しますが、
これはmonaca上ではどのように解釈されているのでしょうか?
掲題の件を実現するにはmonaca versionは削除しなければならないのでしょうか?

以上、まだ開発を始めたばかりで内情を分かっておらず質問内容が簡易で申し訳ありませんがよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

追加でお伺いしたいのですが、掲題の件を実現するためにはどう設定するのがよいのでしょうか?

現状は
「Onsen UI (Monaca Version) 2.0.5」がコンポーネント登録されているのでons-lazy-repeatは古い状態という認識です。
このようにonsenuiのversionにズレがある(onsenui2.2を導入する)場合、どう環境を構築することが推奨されているのでしょうか?
「Onsen UI (Monaca Version) 2.0.5」のonsenui.jsなど数点のファイルの置き換えなどで実現可能なのでしょうか?

Onsen UI をバージョンアップする場合は基本的に全てのファイルの置き換えが必要です。

まずJS/CSSコンポーネント画面にて、「Onsen UI (Monaca Version) 2.0.5」の行の**「設定」**ボタンをクリックし、「Onsen UI (Monaca Version) 2.0.5」の中からどのファイルがアプリに読み込まれているか確認してください。

イメージ説明

イメージ説明

例えば上記のように、「Onsen UI (Monaca Version) 2.0.5」から onsenui.js, onsenui.css, onsen-css-components.css が読み込まれていた場合、「onsenui 2.2.0」を導入するには、以下のように「onsenui 2.2.0」から同じファイル(onsenui.js, onsenui.css, onsen-css-components.css)を読み込む必要があります。

イメージ説明
イメージ説明
イメージ説明

この時点では「Onsen UI (Monaca Version) 2.0.5」の onsenui.js, onsenui.css, onsen-css-components.css と「onsenui 2.2.0」の onsenui.js, onsenui.css, onsen-css-components.css の両方がアプリに読み込まれてしまうため、最後に「Onsen UI (Monaca Version) 2.0.5」を削除します。

イメージ説明
イメージ説明

これで「onsenui 2.2.0」の導入は完了です。


■ AngularJS 1 用 Onsen UI 拡張(angular-onsenui)をお使いになる場合

もし「Onsen UI (Monaca Version) 2.0.5」から angular.min.jsangular-onsenui.js を読み込んでいた場合は、「onsenui 2.2.0」には angular-onsenui.js は含まれていますが angular.min.jsは含まれていませんので、別途「angularjs 1.6.3」(現時点での最新版)を追加してください。
イメージ説明

投稿2017/03/25 04:54

編集2017/03/25 04:54
asial-matagawa

総合スコア164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lion_

2017/03/25 08:25

大変理解が進みました。 無事「Onsen UI (Monaca Version) 2.0.5」から「onsenui 2.2.0」に移行し、移行前と動作まですべて同様の状態にもっていけました。 丁寧なご回答まことにありがとうございました!
guest

0

ベストアンサー

Monaca / Onsen UI 開発チームの @n_matagawa です。

JS/CSSコンポーネントよりonsenui2.2を追加しました。
これによりIDE上にはonsenui.js、その他関連するjsやcssが2種類ずつ存在しますが、
これはmonaca上ではどのように解釈されているのでしょうか?

Monaca では、JS/CSS コンポーネントとして追加したコンポーネントは全てアプリに読み込まれます。

関連するjsやcssが2種類ずつ存在しているという状況の場合、
Onsen UI (Monaca Version) 2.0.5onsenui 2.2.0 の両方がアプリに読み込まれるため、
Onsen UI の重複により誤動作が発生します。

onsenui 2.2.0 を使用するには、
Onsen UI (Monaca Version) 2.0.5 を削除する必要があります。


onsenui と Onsen UI (Monaca Version) の違いは以下の通りです。

  • Onsen UI (Monaca Version) は onsenui と異なり、Monaca に必要な最低限のファイルのみを含む
  • Onsen UI (Monaca Version) は onsenui と異なり、AngularJS 1 が同梱されている

どちらも onsenui.jsonsen-css-components.css の内容は同じですので、お好きな方をご利用ください。


■参考リンク

onsenui の実体の場所:
http://npmjs.com/package/onsenui

Onsen UI (Monaca Version) の実体の場所:
https://github.com/monaca/monaca-component-onsenui

投稿2017/03/24 18:34

asial-matagawa

総合スコア164

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lion_

2017/03/25 00:59

詳しい説明をありがとうございました!大変助かりました!
lion_

2017/03/25 01:27 編集

追加でお伺いしたいのですが、掲題の件を実現するためにはどう設定するのがよいのでしょうか? 現状は 「Onsen UI (Monaca Version) 2.0.5」がコンポーネント登録されているのでons-lazy-repeatは古い状態という認識です。 このようにonsenuiのversionにズレがある(onsenui2.2を導入する)場合、どう環境を構築することが推奨されているのでしょうか? 「Onsen UI (Monaca Version) 2.0.5」のonsenui.jsなど数点のファイルの置き換えなどで実現可能なのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問