tag:crieit.net,2005:https://crieit.net/tags/heatmap-calender/feed Crieitでタグ「heatmap-calender」に投稿された最近の記事 2020-02-24T15:30:09+09:00 https://crieit.net/tags/heatmap-calender/feed tag:crieit.net,2005:PublicArticle/15732 2020-02-24T15:30:09+09:00 2020-02-24T15:30:09+09:00 https://crieit.net/posts/iPhone-Web <p><a href="https://crieit.now.sh/upload_images/d4096aa352d4455039031a400bacdf075e536ce444545.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/d4096aa352d4455039031a400bacdf075e536ce444545.png?mw=700" alt="rectangle_large_type_2_47e47e82499be268d30e2d4624842eec.png" /></a></p> <p>先日React + Firebaseで簡単なWebアプリを開発していたのだが、なぜかiPhoneのみでバグがでてしまうという苦しい状態が続いていた。遊びがてらでHeadmap Calendarを追加したのだが、Headmap Calenderがうまく動かないという状態であったのです</p> <p><a target="_blank" rel="nofollow noopener" href="https://alis-programming-event.firebaseapp.com/">https://alis-programming-event.firebaseapp.com/</a></p> <h2 id="開発環境"><a href="#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83">開発環境</a></h2> <p>開発ではGoogle Chromeで動作確認を行いDeployを行っていたのだがDeployしてiPhoneで確認してみたらちゃんとうごいていない。</p> <p>iPhoneでSafariではなくChromeを使って動作確認してみても同様にうごかない。Safari依存ではなくiOS依存？結構困ってしまった。</p> <p>AndroidやPCでみるとなんにも問題がないのです。結構こまってしまいました。だいたいiPhoneのSafariにはConsoleはないのだからデバックの手法がかぎられてしまう。</p> <p>なんとかならないかいろいろやってみたらバグがPCで再現できました。</p> <p>その方法は...</p> <h2 id="MACのSafariの開発モードを使用する"><a href="#MAC%E3%81%AESafari%E3%81%AE%E9%96%8B%E7%99%BA%E3%83%A2%E3%83%BC%E3%83%89%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B">MACのSafariの開発モードを使用する</a></h2> <p>MACのSafariのSafari -> 環境設定 ->詳細で「メニューバーに”開発”を表示する」の最下部にあるチェックボックスをオンにすると開発モードが使えるようになります。</p> <p><a href="https://crieit.now.sh/upload_images/59cf55d83b679f6a9c4c38aa7d123e0a5e536b6777c62.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/59cf55d83b679f6a9c4c38aa7d123e0a5e536b6777c62.png?mw=700" alt="スクリーンショット 2020-02-23 14.49.31.png" /></a></p> <p>これで開発がバーに表示されます</p> <p><a href="https://crieit.now.sh/upload_images/71b9e88b0e6ca5b22a6d47f8df7bddb65e536b833137b.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/71b9e88b0e6ca5b22a6d47f8df7bddb65e536b833137b.png?mw=700" alt="スクリーンショット 2020-02-23 14.52.55.png" /></a></p> <p>Webインスペクターを表示を選択するとGoogle Chromeで用意されているのと類似の開発者用の機能が開きます。最初はもしかしたら下部にでてくるかもしれませんが、表示の仕方のボタン[][]みたいなのをおせば右に移動できるばすです</p> <p><a href="https://crieit.now.sh/upload_images/ccf9cd1e69618738ca7acbfe245b252a5e536b9e3f650.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ccf9cd1e69618738ca7acbfe245b252a5e536b9e3f650.png?mw=700" alt="スクリーンショット 2020-02-23 14.53.37.png" /></a></p> <h2 id="これで問題を追求するツールを得ることができました"><a href="#%E3%81%93%E3%82%8C%E3%81%A7%E5%95%8F%E9%A1%8C%E3%82%92%E8%BF%BD%E6%B1%82%E3%81%99%E3%82%8B%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E5%BE%97%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F">これで問題を追求するツールを得ることができました</a></h2> <p>直面したバグは、少し寝かして本日解決に至りました。<strong>iPhoneでの日付の扱い方に起因するバグのようでした</strong>。iPhoneにバグがあるというわけではなく、データの扱い方の違いなのかもしれませんが、やるせなかったです。</p> <p>ちなみにレスポンシブモードというものがあり、開発のメニューから選択するとデザインのチェックがとても効率的に行えます。Xcodeのシュミレータみたいで便利ですね。</p> <p><a href="https://crieit.now.sh/upload_images/1d5e72557795dd1baf8bf379d46637a35e536c164c0f8.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/1d5e72557795dd1baf8bf379d46637a35e536c164c0f8.png?mw=700" alt="スクリーンショット 2020-02-23 15.05.36.png" /></a></p> <h2 id="まとめ"><a href="#%E3%81%BE%E3%81%A8%E3%82%81">まとめ</a></h2> <p>iPhoneだけでうまくいかない。そういうときはSafaliの開発モードを活用しましょう。機種依存はWebアプリでも起こりうるようです。フロントエンドも奥が深いですね。</p> はるか先生🍊クリプト界隈に漂う癒し