常連

注目の的

質問力

### 実現させたいこと
リストを下からトップまでスクロールしたときにons-pull-hookのちらつくバグを無効にしたい。
ons-pull-hookが反応してリスト全体がガクつきます。

### 試したこと
・オーバースクロールを無効にすれば正常に動作すると思い、monacaの設定からオーバースクロールを無効にするにチェックしてデバックビルドしたが無効になりませんでした。

・ons-page .page__contentにover-flow:hiddenにしてlistにover-flow-y:scrollを指定したら、上にスクロールするたびにpull-hookが反応してしまう。

・下記のサイトを参考にしてコードを追加しても変わらなかったです。
[リンク内容](https://github.com/OnsenUI/OnsenUI/issues/1990)

> 慣性/勢いのある状態で長いリストを作成し、スクロールを「再加速」すると問題が発生しました。スクロール中に画面に触れると、迷惑なジャンプ/ちらつきがありました。勢いが止まったかどうかを検出する簡単な方法をグーグルで検索し、「まだ勢いがある」ときに無効な属性をフックに追加し、勢いが終わったときに無効な属性を削除しました。
> 
> これにより、次のようなジッターの問題が修正されました。

            ```
var scrollElement = document.querySelector('#story .page__content');

            scrollElement.addEventListener('scroll', function(){

                if($scope.scrollTimer)
                {
                    //clearTimeout(timer);
                    $timeout.cancel($scope.scrollTimer);
                    if(!loadEl.getAttribute('disabled')) {
                        loadEl.setAttribute('disabled', true);
                    }
                }
                $scope.isScrolling = Math.floor(Date.now());
                $scope.scrollTimer = $timeout(function(){
                    $scope.isScrolling = 0;
                    if(loadEl.getAttribute('disabled')) {
                        loadEl.removeAttribute('disabled');
                    }
                }, 120);

            });

```




### 該当のソースコード
```HTML
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });

    document.addEventListener('show', function(event) {
      var page = event.target;
      var titleElement = document.querySelector('#toolbar-title');

      if (page.matches('#first-page')) {
        titleElement.innerHTML = 'My app - Page 1';
      } else if (page.matches('#second-page')) {
        titleElement.innerHTML = 'My app - Page 2';
      }
    });

    if (ons.platform.isIPhoneX()) {
      document.documentElement.setAttribute('onsflag-iphonex-portrait', '');
      document.documentElement.setAttribute('onsflag-iphonex-landscape', '');
    }

    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {
        
        var code = [];
        for(var i = 0; i < 30; i++){
          code.push("<ons-list-item>" + i + "</ons-list-item>");
        }
        document.getElementById("list01").innerHTML = code.join("");
        //プルフック
        pull_hook();
      } 
    });

    //プルフック
    function pull_hook(){
       var pullHook = document.getElementById('pull-hook');

      pullHook.addEventListener('changestate', function(event) {
        var message = '';

        switch (event.state) {
          case 'initial':
            message = 'Pull to refresh';
            break;
          case 'preaction':
            message = 'Release';
            break;
          case 'action':
            message = 'Loading...';
            break;
        }

        pullHook.innerHTML = message;
      });

      pullHook.onAction = function(done) {
        setTimeout(done, 1000);
      };
    }
  </script>
</head>
<body>
  <ons-page>
    <ons-toolbar>
      <div class="center" id="toolbar-title"></div>
    </ons-toolbar>
    <ons-tabbar position="auto">
      <ons-tab label="Tab 1" page="tab1.html" active>
      </ons-tab>
      <ons-tab label="Tab 2" page="tab2.html">
      </ons-tab>
    </ons-tabbar>
  </ons-page>

  <ons-template id="tab1.html">
    <ons-page id="first-page">
      
      <ons-pull-hook id="pull-hook" height="69px" threshold-height="200px"></ons-pull-hook>
      
      <ons-list id="list01"></ons-list>
    </ons-page>
  </ons-template>

  <ons-template id="tab2.html">
    <ons-page id="second-page">
      <p style="text-align: center;">
        This is the second page.
      </p>
    </ons-page>
  </ons-template>
</body>
<style>
  html,body {
    width: 100%;
    height: 100vh;
  }
</style>
</html>

```

ons-pull-hook：リストを下からスクロールしたときにpullhookのちらつきバグが発生する【ios】

## 事象
Monacaで作成したアプリをシミュレータービルド（iOS）して、Xcodeのシミュレーターに入れたところ、スプラッシュ画面が表示されるだけで、アプリが起動しません。
全てのアプリが、そのような状態です。
## 試した事
0. Monaca IDEで「Onsen UI V2 Vue Minimum」を選び、新規作成。
0. ビルドで「iOS」の「シミュレータービルド」を選び、ビルドされたappファイルを、シミュレーターにドラッグ&ドロップ。
0. シミュレーターで当該のアプリをクリック。
スプラッシュ画面（デフォルトの「Monaca」）が表示されたまま、フリーズしてしまいます。

「スプラッシュ画面の消去方法」は「自動的に閉じる」に設定されています。
## 環境
MacBook Air（M1チップ）
Bic Sur（Ver.11.2.3）
Xcode Ver.12.4
## お願い
アプリを更新するのに、画面キャプチャをシミュレーターを使って撮りたいので、どなたか解決策につながる情報を持っている方がいたら、ご教示願います。

Monacaでシミュレータービルド（iOS）したアプリが、Xcodeのシミュレーターで動かない

###前提・実現したいこと
MonacaでOnsenUI v2を使ったアプリを製作していて、ons-tabを用いてページの切り替えを行っているのですが、ons-tab内のページでpush-pageを用いた画面遷移を実行した場合に、tabを非表示にする方法が分かりません。
良ければアドバイスをいただけると嬉しいです。

###試したこと
[ons-tabbarリファレンス](https://ja.onsen.io/v1/reference/ons-tabbar.html)
上サイト(onsenUIのドキュメント)を見て、「hide-tabs」を用いれば消せるのではないかと思いましたが、どこに実装すれば良いのかが分かりませんでした。

###追記
index.html
```html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.min.js"></script>

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
    <link rel="stylesheet" href="css/style.css">

    <script>
        ons.ready(function() {
            console.log("Onsen UI is ready!");
        });
        
        //画面遷移の処理
        document.addEventListener('init', function(event) {
            var page = event.target;

            if (page.matches('#first-page')) {
                // tab1.html → page1.html
                page.querySelector('#push-button').onclick = function() {
                    document.querySelector('#navigator').pushPage('page1.html');
                };
            
            } else if (page.matches('#page1')) {
                // page1.html → tab1.html 
                page.querySelector('#pop-button').onclick = function() {
                    document.querySelector('#navigator').popPage();
                };
            }
        });
    </script>
</head>
<body>

<ons-tabbar var="tabbar">
    <ons-tab
        icon="map-o"
        label="tab1"
        page="navigator.html"
        active="true"></ons-tab>
    <ons-tab
        icon="folder-open"
        label="tab2" 
        page="tab2.html"></ons-tab>
    <ons-tab
        icon="search"
        label="tab3"
        page="tab3.html"></ons-tab>
</ons-tabbar>
    


<ons-template id="tab1.html">
<ons-page id="first-page">
    <p style="text-align: center;">
        This is the first page.
    </p>
    
    
    <div id="push-button">
    <p style="text-align: center;">
        <ons-button>push-button</ons-button>
    </p>
    </div>
</ons-page>
</ons-template>


<ons-template id="tab2.html">
<ons-page id="second-page">
    <p style="text-align: center;">
        This is the second page.
    </p>
</ons-page>
</ons-template>


<ons-template id="tab3.html">
<ons-page id="third-page">
    <p style="text-align: center;">
        This is the third page.
    </p>
</ons-page>
</ons-template>


<ons-template id="page1.html">
<ons-page id="page1">
    <p style="text-align: center;">
        This is the push page.
    </p>
    
    
    <div id="pop-button">
    <p style="text-align: center;">
        <ons-button>pop-button</ons-button>
    </p>
    </div>
</ons-page>
</ons-template>

</body>
</html>
```
navigator.html
```html
<ons-navigator id="navigator" page="tab1.html"></ons-navigator> 
```

ons-tabの非表示

突然の質問、失礼いたします。

現在、ブラウザ上にPDFの表示をしたく、TCPDFやmPDFと言ったブログラムを色々試しておりますが、
PDF表示になりませんため、こちらで質問させていただきました。

TCPDF、mPDF、wkhtmltopdf+snappy、は正常に動作し、PDFの作成にまで至りました。
現在試していますのが、phpwkhtmltopdfを使用したPDFの表示で、
composerを使用し、インストールを行い設定しましたが上手く動作しない状態です。

現在の環境は、
XAMPP
PHP Version 7.4.8
Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.8

---
【ディレクトリ】
```
PDF
│  index.php
│  
├─vendor
│  │  autoload.php
│  │  
│  ├─composer
│  │      autoload_classmap.php
│  │      autoload_namespaces.php
│  │      autoload_psr4.php
│  │      autoload_real.php
│  │      autoload_static.php
│  │      ClassLoader.php
│  │      installed.json
│  │      installed.php
│  │      InstalledVersions.php
│  │      LICENSE
│  │      platform_check.php
│  │      
│  └─mikehaertl
│      ├─php-shellcommand
│      │  │  CHANGELOG.md
│      │  │  composer.json
│      │  │  LICENSE
│      │  │  README.md
│      │  │  
│      │  ├─.github
│      │  │  └─workflows
│      │  │          tests.yml
│      │  │          
│      │  └─src
│      │          Command.php
│      │          
│      ├─php-tmpfile
│      │  │  composer.json
│      │  │  LICENSE
│      │  │  README.md
│      │  │  
│      │  ├─.github
│      │  │  └─workflows
│      │  │          tests.yml
│      │  │          
│      │  └─src
│      │          File.php
│      │          
│      └─phpwkhtmltopdf
│          │  CHANGELOG.md
│          │  composer.json
│          │  LICENSE
│          │  README.md
│          │  
│          ├─.github
│          │  └─workflows
│          │          tests.yml
│          │          
│          └─src
│                  Command.php
│                  Image.php
│                  Pdf.php
│                  
└─wkhtmltox
    ├─bin
    │      libwkhtmltox.a
    │      wkhtmltoimage.exe
    │      wkhtmltopdf.exe
    │      wkhtmltox.dll
    │      
    └─include
        └─wkhtmltox
                dllbegin.inc
                dllend.inc
                image.h
                pdf.h
```
---
【index.php】
```
require './vendor/autoload.php';
use mikehaertl\wkhtmlto\Pdf;

$html = <<<EOF
<!DOCTYPE html>
<html>
    <style>
    body {
        padding: 7px;
        background-color: black;
    }
    .red {
        color: red;
        font-size: 50px;
    }
    .opacity {
        opacity: 0.3;
    }
    </style>

    <body>
        <div class="red">
            <p>PDF化してください！</p>
            <p class="opacity">何でもしますから！</p>
        </div>
    </body>
</html>
EOF;

$pdf = new Pdf([
    'binary'   => './wkhtmltox/bin/wkhtmltopdf',
    'encoding' => 'utf-8',

    'margin-top'    => 0,
    'margin-right'  => 0,
    'margin-bottom' => 0,
    'margin-left'   => 0,
    'no-outline',

]);

$pdf->addPage($html);

$pdf->send();
```
参考サイト
https://qiita.com/morisuke/items/88010efca9fc03466c7f

index.phpにアクセスしても、真っ白なページが表示されるのみで、
PDFでの表示がされない状態です。

間違っている等、御座いましたらご教授いただければ幸いです。
よろしくお願いいたします。