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

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

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

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

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

Monaca

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

Q&A

解決済

1回答

2303閲覧

JavaScriptからOnsenUI(HTML)を操作できていますが、何故操作できているかが分かりません

akabee

総合スコア1947

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Onsen UI

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

Monaca

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

0グッド

0クリップ

投稿2016/11/25 08:32

###質問内容
monacaを用いて、OnsenUI + AngularJSでモバイルアプリの開発を行っています。
動いてはいるのですが、疑問点があり質問させて頂きます。

下記コードのJavaScriptの5行目、「splitter.left.toggle();」が正常に動いている理由が分かりません。

「splitter」は一番上のHTMLのons-splitterの名称として定義しているものですが、
通常JavaScriptからHTMLの操作をするにはDOMを使用(document.getElementByIdなど)するか、
AngularJSでも$scopeを使用する必要があると認識しています。

ですが、下記コードは特に注釈付けをすることなく、「splitter」がJavaScriptから操作できています。
これは何故でしょうか?

私が認識できていないOnsenUIやAngularJS、JavaScriptの仕様があるのでしょうか。
どなたか下記コードが正常に動く理由をご教示いただけませんでしょうか

###該当のソースコード(一部抜粋の形です)

HTML

1<ons-splitter var="splitter"> 2 <ons-splitter-side page="sidemenu.html" side="left" width="220px" collapse swipeable> 3 </ons-splitter-side> 4 <ons-splitter-content page="paylist.html"></ons-splitter-content> 5</ons-splitter>

HTML

1 <ons-page> 2 <ons-toolbar ng-controller="ToolbarController as ToolbarC"> 3 <div class="left"> 4 <ons-toolbar-button ng-click="ToolbarC.toggle()"> 5 <ons-icon icon="ion-navicon" style="font-size:32px; width:1rem;"></ons-icon> 6 </ons-toolbar-button> 7 </div> 8 <div class="center"> 9 ツールバー 10 </div> 11 <div class="right"> 12 <div class="toolbar-namebox"> 13 <br /> 14 userid<br /> 15 username 16 </div> 17 </div> 18 </ons-toolbar> 19</ons-page>

javascript

1angular.module(MyApp) 2 3.controller('ToolbarController', function() { 4 this.toggle = function() { 5 splitter.left.toggle(); 6 }; 7});

###補足情報
アプリを開発するにあたってテンプレートとしたコードがあり、
元々はsplitterの前に「$scope」があったのですが、
個人的に$scopeはあまり利用したくなく、
ためしに外してみたところ正常に動いて驚きました。
ただ、調べてもその理由が分からない、という経緯があります。

上記コードは開発中のコードから一部抜粋したものです。
過不足ないとの認識ですが、もし不足情報があれば提供いたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

angular-onsenui.jsの中身を確認すると

  • 以下のような箇所があります

これはangularjsのdirectiveという機能を使ってons-splitterタグを作っているのですが
$onsen.declareVarAttribute(attrs, splitter);という処理が名前的にあやしいです。

javascript

1 angular.module('onsen').directive('onsSplitter', ['$compile', 'Splitter', '$onsen', function ($compile, Splitter, $onsen) { 2 return { 3...4 $onsen.declareVarAttribute(attrs, splitter); 5...6 }]);

declareVarAttributeの中身を確認すると

  • 中身を確認すると、varに指定した名前をthis._defineVar(varName, object);というメソッドで処理しています。

javascript

1declareVarAttribute: function declareVarAttribute(attrs, object) { 2 if (typeof attrs.var === 'string') { 3 var varName = attrs.var; 4 this._defineVar(varName, object); 5 } 6},

_defineVarの中身を確認すると

  • setメソッドでons.componentBaseにvarの値を設定していることがわかります。

javascript

1 _defineVar: function _defineVar(name, object) { 2 var names = name.split(/\./); 3 4 function set(container, names, object) { 5 var name; 6 for (var i = 0; i < names.length - 1; i++) { 7 name = names[i]; 8 if (container[name] === undefined || container[name] === null) { 9 container[name] = {}; 10 } 11 container = container[name]; 12 } 13 container[names[names.length - 1]] = object; 14 15 if (container[names[names.length - 1]] !== object) { 16 throw new Error('Cannot set var="' + object._attrs.var + '" because it will overwrite a read-only variable.'); 17 } 18 } 19 20 if (ons.componentBase) { 21 set(ons.componentBase, names, object); 22 } 23...24 }]); 25})();

ons.componentBaseとは...

  • windowオブジェクトを設定していることがわかります。

javascript

1 function initOnsenFacade() { 2 ons._onsenService = null; 3 4 // Object to attach component variables to when using the var="..." attribute. 5 // Can be set to null to avoid polluting the global scope. 6 ons.componentBase = window;

つまりvarに入れた内容は

  • <ons-splitter var="splitter">とするということは、「window.splitter」としているということなのでグローバルに「splitter」として使用することが出来るということになります。

補足

  • windowオブジェクトを汚したくない、という場合はons.componentBaseに自分で作ったオブジェクトを指定することも出来ます。

投稿2016/11/25 16:50

pinpikokun

総合スコア376

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

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

akabee

2016/11/26 09:57

回答ありがとうございます。「var」にそんな意味が・・・。グローバルに使えるようになっているということなのですね。 それにしても、ドキュメントのこの箇所を参照しろとの回答が来るものと考えておりましたがソースコードを調べて頂いたとは恐縮です。 逆に言えばソースコードに全て書かれているということですね。これからは私自身でも調べるようにしてみます。 ご回答いただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問