常連

### 現状

題名の通り、
iOS/Safariでplaceholderの文字が真ん中より上にずれてしまうバグがありました。

そこで、ネットで色々検索をし、
[ここ](http://www.al-designs.jp/wordpress/2016/03/04/iphone%E3%81%A8android%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AB%E3%82%88%E3%82%8Bplaceholder%E3%81%AE%E4%B8%8A%E4%B8%8B%E4%BD%8D%E7%BD%AE/)や[ここ](https://www.tomotanuki.com/entry/web-placeholder-position)を参考にし、なんとか以下の実装でバグは解決しました。

```
input::-webkit-input-placeholder {
    padding-top: 0.2em;
}

```

### 質問したいこと

疑問は、
どうして、 **webkit** と指定をしているのにiOS/Safariのみのバグがなおり、
Chrome（Android）ではpadding-topが上にずれるなどのバグが発生しないのでしょうか？

webkitとはSafari・Chromeのことなので、
上記のソースだと、Chromeにも反映されるはずです。
ところが、Chromeではもともとバグは起きていないこともあり、
上記の実装をする前と後で何も変わりませんでした。


バグが直ったことは嬉しいのですが、
本当にバグをあのソースで直すべきかどうかが疑問でモヤモヤしていたため質問させていただきました。
どうぞよろしくお願いいたします。

iOS/Safariでplaceholderの文字が真ん中より上にずれる件について

誰のブラウザでもフォルダを指定すれば、そのフォルダに含まれるファイルのサムネイルを表示させるアプリをブラウザで作成しています。
以下の通り、ほぼ理想通り実装できたのですが、
`pass[i] = files[i].webkitRelativePath;//here`
ここの箇所で少し問題が発生しています。
viewer.html
test/a.pdf
test/test_2/b.pdf

のような階層でフォルダを選択させる場合、

【良い例】
testを選択させるとtest/a.pdfもtest/test_2/b.pdfもviewer.htmlから見て、正しくそのまま相対パスを取得するので、<object>タグにそのパスが反映されpdfが表示されます。
【悪い例】
test_2を選択させるとviewer.htmlから見てみて、test/を飛び越えるので正しくパスが取得できず<object>タグに正しいパスを割り当てることができません。

調べると絶対パスを取得させることはJSやWebkit上は困難であり、また、ユーザーにviewer.htmlの設置場所を考えさせたり、選択するフォルダを縛ることもわかりづらいと考えております。

何か解決策はございますでしょうか？

```html
viewer.html
<!DOCTYPE html>
<html>
<head>
  <title>Viewer</title>
  <style media="screen">
    html,body{
    height:98%
  }
  .wrapper{
    height:90%
  }
    body{
      padding:0px 8px;
      font-size:11px;
    }
    .t1{text-indent: 1em;}
    .t2{text-indent: 2em;}
    .t3{text-indent: 3em;}
    .t4{text-indent: 4em;}
    .t5{text-indent: 5em;}
    .t6{text-indent: 6em;}
    .t7{text-indent: 7em;}
    .t8{text-indent: 8em;}
    .t9{text-indent: 9em;}
    .t10{text-indent:10em;}
    .t_et{text-indent:11em;}
    .upload-img-btn {
    margin-bottom: 5px;
    padding: 10px 15px;
    border-radius: 4px;
    max-width: 120px;
    text-align: center;
    display: block;
    background-color: #008e5b;
    color: #ffffff;
    /* box-shadow:  0 2px 6px rgba(146, 146, 146, 0.8); */
    cursor: pointer;
    }
    .wrapper{
      display:flex;
    }
    .list{
      overflow: scroll;
      width:40%;
      max-height:500px;
      margin-right:8px;
      padding:10px 10px 2px 10px;
    }
    .list::-webkit-scrollbar{
    display: none;
}
    .thumb{
      width:60%;
      height:100%;
    }

    .add_line.list{
       border:1px dotted #b1b1b1;
    }
    .add_line.thmb{
      border:1px solid #1b4d4a;
    }
    .click,.click_otr{
      margin-bottom:5px;
      cursor:pointer;
    }
    .click:hover{
      color:#ff3d3e;
      font-weight:bold;
    }
    .clicked{
      color:#ff3d3e;
      font-weight:bold;
    }

    .click_otr:hover{
      color:#008e5b;
      font-weight:bold;
    }
    .clicked_otr{
      color:#008e5b;
      font-weight:bold;
    }

    object{
      width:100%;
      height:100%;
    }


  </style>
</head>
<body>


<label class="upload-img-btn">
    フォルダを選択する
    <input type="file" webkitdirectory directory onChange="fileListDirectory(this.files)" style="display:none">
</label>
<div class="wrapper">
  <div class="list"></div>
  <div class="thumb"></div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
    function fileListDirectory(files) {
      $('.list').empty();$('.thumb').empty();
        var len = files.length;
        var name = new Array();
        var pass  = new Array();
        for (i=0; i<len; i++) {
            name[i] = files[i].name;
              pass[i] = files[i].webkitRelativePath;//here
        }


            for (i=0; i<len; i++) {
              var elm = "";
              if(pass[i].indexOf('.pdf')!==-1){
                var click = "click"
              }else{
                var click = "click_otr"
              }
              var count = 0;  // 文字数を格納
              var strSearch = '/';  // 探す文字
              for (var j = 0; j < pass[i].length; j++){
                if (pass[i][j] == strSearch){
                  count ++;
                }
              }

              switch (count) {
                case 1:elm +='<div id="l_'+i+'" class="t1 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 2:elm +='<div id="l_'+i+'" class="t2 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 3:elm +='<div id="l_'+i+'" class="t3 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 4:elm +='<div id="l_'+i+'" class="t4 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 5:elm +='<div id="l_'+i+'" class="t5 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 6:elm +='<div id="l_'+i+'" class="t6 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 7:elm +='<div id="l_'+i+'" class="t7 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 8:elm +='<div id="l_'+i+'" class="t8 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 9:elm +='<div id="l_'+i+'" class="t9 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                case 10:elm +='<div id="l_'+i+'" class="t10 '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';break;
                default:elm +='<div id="l_'+i+'" class="t_et '+click+'" data-pass="'+pass[i]+'">'+name[i]+'</div>';
              }
               $('.list').append($(elm));


    }
    $('.list').addClass('add_line');
    $('.thumb').addClass('add_line');
  }
  $(document).on('click','.click',function(){
    $(this).toggleClass('clicked')

    var get_pass = $(this).data("pass");
    $('.thumb').empty();
    $('.thumb').append('<object data='+get_pass+'></object>');
  })

  $(document).on('click','.click_otr',function(){
    $(this).toggleClass('clicked_otr')

    var get_pass = $(this).data("pass");
    $('.thumb').empty();
    $('.thumb').append('<object data='+get_pass+'></object>');
  })
</script>
</body>
</html>

```

webkitRelativePathを利用して相対パスをうまく取得できない

### 前提・実現したいこと

[https://codepen.io/ksyunnnn/pen/aqMKzR](https://codepen.io/ksyunnnn/pen/aqMKzR)
input[type=data]に、デフォルトで表示されるカレンダー制御の矢印アイコンを、別のアイコンに変更するための、上記URLにあるコードを動かしたいです。

### 発生している問題・エラーメッセージ

アイコンが変更されないです。

`input[type=date]::-webkit-calendar-picker-indicator:before`というセレクタが反応していなさそう

### 該当のソースコード

```html
<input type="date">
```

```css
/* スピンボタン（上下ボタン）を非表示 */
input[type=date]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* 無入力時の 年/月/日 を / / にする */
input[type=date]::-webkit-datetime-edit-year-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-month-field:not([aria-valuenow]),
input[type=date]::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
  color: transparent;
}
/* /の色を変える */
input[type=date]::-webkit-datetime-edit-text {
  color: #666;
}
/* clearボタンの非表示 */
input[type=date]::-webkit-clear-button {
  -webkit-appearance: none;
}
/* カレンダーのインジケータ（▼）を非表示 */
input[type=date]::-webkit-calendar-picker-indicator {
  color: transparent;
  position: relative;
}
/* fontAwesomeのカレンダーアイコンをインジケータにする */
input[type=date]::-webkit-calendar-picker-indicator:before {
  color: #666;
  font-family: FontAwesome;
  /*content: "\f073";*/ /* fa-calendar */
  content: "\f133"; /* fa-calendar-o */
  position: absolute;
  left: -5px; /* ここら辺はいい感じの塩梅で */
  top: -5px;  /* ここも */
}
```



### 補足情報（FW/ツールのバージョンなど）

こちらの記事を参考にしています。
[https://qiita.com/MssKnd/items/1e55264b5e3acc609e1f](https://qiita.com/MssKnd/items/1e55264b5e3acc609e1f)

よろしくお願いいたしますm(_ _)m

input[type=date]にfontAwesomeのアイコンを使いたい

WKWebViewでwebサイトを表示させているのですが、その中のリンクをアプリ内ブラウザではなくsafariで開きたいと思っています。

しかし下記コードを記述している状態なのですがアプリ内ブラウザで表示されてしまいます。

もしよろしければアドバイスいただけましたら幸いでございます。

```
class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    
    @IBOutlet weak var WV: WKWebView!
    var webView: WKWebView!
    
    // safari で開く
    @IBAction func safari(_: AnyObject) {
        let url = self.webView?.url
        UIApplication.shared.open(url!, options: [:], completionHandler: nil)
    }



override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
        // WKNavigationDelegate
        func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
            
 　　　　　　 // リンククリックでSafariに
            if navigationAction.navigationType == WKNavigationType.linkActivated {
                UIApplication.shared.open(navigationAction.request.url!)
                decisionHandler(.cancel)
            } else {
                decisionHandler(.allow)
            }
        }
        
        // WKUIDelegate
        func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
            
            // リンククリックでSafariに
            if navigationAction.navigationType == WKNavigationType.linkActivated {
                UIApplication.shared.open(navigationAction.request.url!)
            }
            if navigationAction.targetFrame == nil {
                webView.load(navigationAction.request)
            }
            
            return nil
        }

    }

}
```

WKWebViewで表示のwebサイト内リンクをsafariで開きたい

### 前提・実現したいこと

Xcodeについてです。最近iOSアプリ開発を始めようと思い、「作って学ぶiphoneアプリの教科書」の,
アップルのウェブページを表示するアプリを作りたいです。Webkit Viewを使っています。
### 発生している問題・エラーメッセージ
実行するとsimulatorは立ち上がるのですが、何も表示されず真っ白の画面です。
その後Xcodeのページが勝手に飛んで、
```
Thread 1: signal SIGABRT
```
このようなエラーがでています。何度試しても表示できません。
### 該当のソースコード

```Swift
import UIKit
import WebKit

class ViewController: UIViewController{
    @IBOutlet weak var myWebView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let appleSite = URL(string:"https://www.apple.com/jp/")!
        myWebView.load(URLRequest(url: appleSite))
    }
    override func
        didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
```

### 試したこと

エラーを検索したところ、Webkit Viewとプログラムの繋がりがうまく行ってないのかなと思い、確認してみたのですが、黄色い警告マークは出ておりませんでした。他に調べても対処法がわからず、質問させていただきました。

### 補足情報（FW/ツールのバージョンなど）
![Connections Inspector](d2fd3cc516f85fbd46183561ec9cf0fc.png)
「エラーメッセージ」
Terminating app due to uncaught exception 'NSInvalidUnarchiveOperationException', reason: 'Could not instantiate class named WKWebView because no class named WKWebView was found; the class needs to be defined in source code or linked in from a library (ensure the class is part of the correct target)'

Xcode10.2.1

XcodeでWebKit Viewを使いwebページを開くアプリを作っているのですが、真っ白になってしまいます。

react-native-webviewを使いpostMessageでWeb側からデータを渡しています。アプリはすでに公開済みです。react-native-webviewのpostMessageの仕組みが変わってしまったようで、もしお知恵があれば拝借させていただきたいと思っています。

なお、react-nativeのバージョンは57.0で、今回59.0にアップデートしようとしています。目的はAndroidの64bit対応のためです。react-native-webview"は、Adnroidx対応版の6.3.1を使っています。

現行アプリのWeb側では、以下の方法でデータを渡しています。
```ここに言語を入力
window.postMessage(message)
```

その後、WebViewのコンポーネントをupdateした事が原因かもしれませんが、ReactNativeWebViewを追加して、以下のような形でないと取得できなくなりました。

```ここに言語を入力
window.ReactNativeWebView.postMessage(message)
```

これには問題があります。既存の公開済みアプリは改修されていないため、window.postMessage(message)の形でしか受け渡しできない。つまり
改修前のアプリ＝window.postMessageでしか使えない
改修後のアプリ＝window.ReactNativeWebView.postMessageしか使えない。
両方のアプリで使えるデータ受け渡しの仕組みを実現したいと思っています。

なお、改修の範囲が大きいため、局所的な解決ができないかと検討しております。
何卒、よろしくおねがいします。

react-native-webviewにおけるpostMessageについて

### 前提・実現したいこと

私は、ホットペーパーAPIを用いて現在地から飲食店を検索するアプリを開発しています。
Mapkitを使ってピンを立て、ピンをタップするとその飲食店のホットペッパーのサイトに飛ぶといった機能が付いています。
そこで、WKWebViewを使用しているのですが、毎回、web画面を閉じると下記のエラーが発生します。
しかし、そのエラーが発生してもアプリはクラッシュせず動きます。

### 発生している問題・エラーメッセージ

```
2020-09-29 11:49:46.743944+0900 locationFood[5176:483414] [assertion] Error acquiring assertion: 
<Error Domain=RBSAssertionErrorDomain Code=3 "Target is not running or required target entitlement is missing" 
UserInfo={RBSAssertionAttribute=<RBSDomainAttribute| 
domain:"com.apple.webkit" name:"Background" sourceEnvironment:"(null)">, 
NSLocalizedFailureReason=Target is not running or required target entitlement is missing}>

2020-09-29 11:49:46.744151+0900 locationFood[5176:483414] [ProcessSuspension] 0x1370fe5c0 - ProcessAssertion: 
Failed to acquire RBS Background assertion 'WebProcess Background Assertion' for process with PID 5251, error: 
Error Domain=RBSAssertionErrorDomain Code=3 "Target is not running or required target entitlement is missing" 
UserInfo={RBSAssertionAttribute=<RBSDomainAttribute| 
domain:"com.apple.webkit" name:"Background" sourceEnvironment:"(null)">, 
NSLocalizedFailureReason=Target is not running or required target entitlement is missing}
```

### 該当のソースコード

```swift
import UIKit
import WebKit

class resultWebViewController: UIViewController {
    
    var webView = WKWebView()
    let deligate = UIApplication.shared.delegate as! AppDelegate

    override func loadView() {
        super.loadView()
        webView.frame = CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height)
        view.addSubview(webView)
        webView.allowsBackForwardNavigationGestures = true
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        if UserDefaults.standard.object(forKey: "url") != nil{
            print(UserDefaults.standard.object(forKey: "url")!)

            let urlString: String = UserDefaults.standard.object(forKey: "url") as! String
            let url = URL(string: urlString)
            let request = URLRequest(url: url!)
            webView.load(request)
        }
    }
}
```

### 試したこと

Stack OverflowやQiitaなどのサイトで解決案を探ったのですが、期待するような答えにたどり着きませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

WKWebViewを使っている時に発生するエラー

UIWebViewを用いてiOSアプリケーションの開発を行なっています。

下記端末でUIWebViewで表示している画像(.png)の表示が崩れてしまいます。
(見た感じ、render(表示)が遅れているように見えますが、画像の形が変わってしまったり、一部表示されなかったり)
* iPhone7以降 iPhone7+ iPhone8
* iOS 11.2.5

**iPhone6 iOS 11.2.5では表示が崩れることはありません。**

####試してもダメだったこと
* 単調なhtml要素にしてみる
* 適用しているcssを非適用
* jsで

####想定している問題
* 端末のメモリの問題
* WebViewの表示が追いついていない(端末に依存?)

iPhone6では問題なく、iPhone7で表示が崩れてしまう原因がわかりません。

ちょっとしたことでも良いので、
iPhone7以降だけで起きてしまう原因、
根本的な原因として考えられることを教えていただければ幸いです。