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

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

ただいまの
回答率

90.33%

  • Monaca

    1011questions

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

  • Onsen UI

    333questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 808

lion_

score 22

前提・実現したいこと

掲題の件ですが、現在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は削除しなければならないのでしょうか?

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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.5 と onsenui 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.js や onsen-css-components.css の内容は同じですので、お好きな方をご利用ください。


■参考リンク

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/25 09:59

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

    キャンセル

  • 2017/03/25 10:19 編集

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

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

    キャンセル

+1

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

現状は
「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.jsonsenui.cssonsen-css-components.css が読み込まれていた場合、「onsenui 2.2.0」を導入するには、以下のように「onsenui 2.2.0」から同じファイル(onsenui.jsonsenui.cssonsen-css-components.css)を読み込む必要があります。

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

この時点では「Onsen UI (Monaca Version) 2.0.5」の onsenui.jsonsenui.cssonsen-css-components.css と「onsenui 2.2.0」の onsenui.jsonsenui.cssonsen-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.js と angular-onsenui.js を読み込んでいた場合は、「onsenui 2.2.0」には angular-onsenui.js は含まれていますが angular.min.jsは含まれていませんので、別途「angularjs 1.6.3」(現時点での最新版)を追加してください。
イメージ説明

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/25 17:25

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

    キャンセル

同じタグがついた質問を見る

  • Monaca

    1011questions

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

  • Onsen UI

    333questions

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