teratailに質問しても回答が得られないまたは問題が解決されない質問を例に、Onsen UIの動きを理解するにはどうすればよいか、解説したいと思います。


onsen UI 余白の消し方がわかりません。

Chrome DevToolsを使えば、余白の原因がわかります。
Onsen UIは、ons-○○○○を解析して必要なタグを埋め込みます。
以下のコードをブラウザで表示すると、
[html]


[/html]
クラスlefttoolbar__leftを持つdivが追加されています。


[html]



X

あああああああああああああああああああああああああああああああああああああああああああああああ




[/html]
クラスtoolbar__leftwidth: 27%;が影響しているので、display: none;にすれば余白が消えます。
[css]
#first-page .toolbar__left {
display: none;
}
[/css]

onsenuiを利用してサイドバーを設置しましたが、iframeでMapを表示させるとサイドバーが閉じない

見たことがあるコードの書き方だなぁと思ったら、私のブログ記事を参考にいろいろと改造して行き詰まったようです。
問題がある箇所のみピックアップします。
[javascript]
var content = document.getElementById(‘content’);
var menu = document.getElementById(‘menu’);
var iframe = document.getElementById(“ifr”);
// パラメータ指定
var p = “?output=embed”
+ “&ll=” + param[name].center.lat.toString() + “,” + param[name].center.lng.toString()
+ “&z=” + param.zoom.toString()
+ “&hl=” + param.lang;
iframe.setAttribute(“src”, url + p);
//alert(url + p);

content.load(page)
.then(menu.close.bind(menu));
[/javascript]
iframeの属性srcを大阪に変更しました。そのあとにcontent.load()を実行しました。
変更したiframemap1.htmlmap2.htmlのどちらでしょうか?
content.load()を実行すると、どのようなことが起こりますか?

答えは、map1.htmliframeの属性srcを大阪に変更し、content.load()を実行してmap2.htmlに切り替えているので、表示されないということです。
先にcontent.load()を実行し、map2.htmlが表示されたら、iframeの属性srcを大阪に変更するように処理をすれば解決します。

ページの初期動作を処理する場合は、過去の記事を参考にしてください。

Onsen UI で ons-splitter と ons-navigator を併用したい


これも似たような内容で、ons-splitter-contentpageを指定すると、どのようなことが起こりますか?ということです。
[html]



[/html]
これもChrome DevToolsを使えば、ons-splitter-contentpageA.htmlに切り替わり、ons-navigatorが消えてしまうことがわかります。
[html]




Page A

This is the page A.

Push page



[/html]
この場合、ons-splitter-contentpageを指定しないことで、ons-navigatorがpageA.htmlを表示することにより、ページ遷移が可能となります。
[html]



[/html]

○demyではありませんが、HTMLやCSS、JavaScriptの知識があれば、Onsen UIを利用したアプリを簡単に開発することができます。
しかし、ons-○○○○を表示するとどうなるか、属性、プロパティを指定するとどうなるか、メソッドを実行するとどうなるか、一つ一つ理解する必要があります。

初心者や経験の少ない方には少しハードルが高いかもしれませんが、コピー&ペーストで動いたからOKではなく、まずはChrome DevToolsを使って、どのように表示されるか、メソッドを実行するとどのような動きとなるか、確認しながら進めると、今後さまざまな問題が発生しても自力で解決できるようになるのではないでしょうか。

※2019/12/09、teratail回答済み。

Nintendo Switch Lite グレー

新品価格
¥21,900から
(2019/12/6 16:00時点)

Recommended Posts