framework ver2.1

初期フレームの生成まで

/*jslint nomen: true*/
( function() {"use strict";
      var pages = [];
      /*
       * あらかじめセットしておくCSSファイルのclass名
       */
      var CSSCLASSNAME = "EFOLABclass";
      var NEWCONTENT = {
         "/" : {

         }
      };

      /**
       * コンテナを生成するクラス
       * document.headの時点で動作
       */
      var Container = function() {
         this._outerContainer = null;
         this._topContainer = null;
         this._contentsContainer = null;
         this._mainContainer = null;
         this._subContainer = null;

         this._menuAnchor = null;

         this.initialize();
      };
      Container.prototype = {
         initialize : function() {
            this.createContainers();
            this.setIdToContainers();
            this.appendContainers();
            this.createAndAppendMenuAssy();
            this.setStyle();
            this.setEventListener();
         },
         createContainers : function() {
            this._outerContainer = document.createElement('div');
            this._topContainer = document.createElement('div');
            this._contentsContainer = document.createElement('div');
            this._mainContainer = document.createElement('div');
            this._subContainer = document.createElement('div');
         },
         setIdToContainers : function() {
            //set id
            this._outerContainer.id = "outerContainer";
            this._topContainer.id = "topContainer";
            this._contentsContainer.id = "contentsContainer";
            this._mainContainer.id = "mainContainer";
            this._subContainer.id = "subContainer";
         },
         appendContainers : function() {
            //構成
            this._outerContainer.appendChild(this._topContainer);
            this._outerContainer.appendChild(this._contentsContainer);
            this._contentsContainer.appendChild(this._subContainer);
            this._contentsContainer.appendChild(this._mainContainer);
         },
         createAndAppendMenuAssy : function() {
            //menuAnchorの要素生成
            var menuAssy = document.createElement('div');
            var span = document.createElement('span');
            span.innerHTML = "≡";

            this._menuAnchor = document.createElement('a');
            this._menuAnchor.innerHTML = "MENU";

            //append
            this._menuAnchor.appendChild(span);
            menuAssy.appendChild(this._menuAnchor);
            this._topContainer.appendChild(menuAssy);
         },
         setStyle : function() {
            //動的スタイルのセット
            //メインコンテンツ要素の高さの合計をセット
            var contents_height = this._mainContainer.clientHeight > this._subContainer.clientHeight ? this._mainContainer.clientHeight : this._subContainer.clientHeight;
            //高さ指定と同時にleft:0pxも指定していることに注意！
            this._mainContainer.setAttribute('style', 'height:' + contents_height + 'px;left:0px;');
         },

         getouterContainer : function() {
            return this._outerContainer;
         },
         setEventListener : function() {
            //menuアンカーにクリックイベントをセット
            this._menuAnchor.addEventListener('click', this, false);
            //mainContainerにクリックイベントをセット
            this._mainContainer.addEventListener('click', this, false);
         },
         handleEvent : function(evt) {
            if (evt.target === this._menuAnchor || evt.target === this._mainContainer) {
               if (this._mainContainer.style.left === '0px') {
                  this._mainContainer.setAttribute('style', 'left:80%;');

               } else {
                  this._mainContainer.setAttribute('style', 'left:0px;');
               }
            }
         }
      };
      var Page = function() {
         /*
          * 各ページの既存documentを保管しておくオブジェクト
          */
         this._doc = {};

      };
      Page.prototype = {
         isFirstAccess : function() {
            var bool = false;
            if (pages.length === 1) {
               bool = true;
            }
            return bool;
         },
         isSmartPhone : function() {
            if (navigator.userAgent.indexOf('iPhone') !== -1) {
               return true;
            }
            if (navigator.userAgent.indexOf('Android') !== -1) {
               return true;
            }
            return false;
         },
         isOperamini : function() {
            if ( typeof operamini !== 'undefined') {
               if (operamini) {
                  return true;
               }
            }
            return false;
         },
         setViewport : function() {
            var viewport = document.createElement('meta');
            viewport.setAttribute('name', 'viewport');
            viewport.setAttribute('content', 'width=device-width,user-scalable=no');
            document.head.appendChild(viewport);
         },
         clearMyCss : function() {
            var sheets = document.getElementsByTagName('link');
            for (var i = 0; i < sheets.length; i++) {
               var sheet = sheets[i];
               //（注：document.styleSheetsで取得すると、要素へのmediaqueryのセットができない：読み取り専用のエラーになる）
               if (sheet.rel === "stylesheet" && sheet.className ===CSSCLASSNAME) {
                  sheet.media = "(max-width:1px)";
                  //念のために1px指定してからremove
                  document.head.removeChild(sheet);
               }
            }
         },
         setBodyVisible : function() {
            document.body.setAttribute('style', 'display:block !important;');
            //cssで!important指定しているので変更時も!important必要
         },
         setDocument:function(doc){
            this._doc = doc;
         }
      };

      var Main = function() {
         console.log('Main start');       //FIXME
         this.page = null;
         this.container = null;
         this._clientWidth = 0;
         this._devicePixelRatio = 0;
         /*
          * コンストラクタを実行します。
          * 実行部はここに記述しています。
          */
         this.initialize();
      };
      Main.prototype = {
         /*
          * コンストラクタ
          */
         initialize : function() {
            //------------------------------------------------------------------------------------------------
            /*
             * 実行部
             */
            this.page = new Page();
            pages.push(this.page);
            try {

               //スマートかどうかの初期チェックを実行します。
               var resultboolean = this.initialCheck();

               //FIXME:パソコンからのテストを行うためにコメントアウト
               /*
               if (resultboolean === false) {//andorid , iPhone でないとき
               this.page.clearMyCss();
               this.end();
               //プログラム終了
               return;
               }
               */
               //viewportをheadに追記します。
               this.page.setViewport();
               //初回アクセスかページ遷移かを判定します。
               if (this.page.isFirstAccess() === true) {
                  this.createNewPage();
               } else {

               }
            } catch(e) {
               alert(e);
            }

         },
         initialCheck : function() {
            var check1 = this.page.isSmartPhone();
            var check2 = this.page.isOperamini();

            if (check1 !== true || check2 === true) {
               return false;
            }
            return true;
         },
         end : function() {
            Main = null;
            Page = null;
            Container = null;
            alert('プログラムを終了しました。');
         },
         /*
          * Main.handleEvent
          */
         handleEvent : function(evt) {

            if (evt.type === 'DOMContentLoaded') {
               console.log('DOMContentLoaded イベント発生');
               /*
                * 画像の無用な読み込み停止するためwindow.stop()
                */
               console.log('window.stop()');    //FIXME
               this.windowStop();
               /*
                * 新しいコンテナを取得します。
                * this.containerインスタンスは
                * 前のステップ[createNewPage()]で生成してあります。
                */

               var newContainer = this.container.getouterContainer();
               document.body.innerHTML = "";
               document.body.appendChild(newContainer);
               /*
               * コンテナにコンテンツを配置していきます。
               */

               /*
                * 最後にページを表示させるためにbody.style=display:block指定します。
                */
               this.page.setBodyVisible();

            }
         },
         /*
          * 初回アクセス時に実行します。
          */
         createNewPage : function() {
            /*
             * DOMContantLoadedの前にコンテナを生成しておきます。
             */
            this.container = new Container();
            document.addEventListener('DOMContentLoaded', this, false);
         },
         windowStop : function() {
            window.stop();
         }
      };
      
      /*
       * document のreadystatechangeイベントの発生タイミングを調べるテスト
       */
      var documentReadystateCallback = function(evt){
         console.log(document.readyState);
      };

      document.addEventListener('readystatechange',documentReadystateCallback,false);
      
      //--------------------------------------------------------------------------------------------
      /*
       * bootstrup
       */
      new Main();
   }());

//(c) Copyright 2014 鴨頭 剛. All Rights Reserved. 

bodyNone.css

body {
   display: none !important;
   background-color: #ffffff;
   margin: 0px;
}

newContainer.css

#topContainer {
   position:relative;
   width: 100%;
   height: 50px;
   border-bottom: solid 1px gray;
}

#topContainer a {
   position: absolute;
   left: 10px;
   top: 6px;
   z-index: 3;
   border: solid 1px gray;
   border-radius: 4px;
   padding: 8px;
}

#contentsContainer{
   position:relative;
   overflow:hidden;
   width:100%;
   min-height:300px;
   
}

#mainContainer,#subContainer {
   min-height:300px;
   position:absolute;
   width:100%;
}
#mainContainer{
   background:#efefef;
   z-index:10;
   /*android標準ブラウザは-webkit-必要*/
   -webkit-transition-duration: .5s;
   -webkit-transition-property: left;
   -webkit-transition-timing-function: ease-out;
   transition-duration: .5s;
   transition-property: left;
   transition-timing-function: ease-out;
   
   display:table-cell;
}
#subContainer {

   font-size: 9px;
}