みかづきブログ・カスタム

基本的にはちょちょいのほいです。

iOS

iOS15のmobile SafariでDOMをDrag and Dropできるようにする 👆

ことの発端 blog.kimizuka.orgかつて、Drag and Drop APIを試したことがありましたが、最近になってiPadで動作していないことに気がつきました。(iOS 15.6にて確認) iOS 15.6で動作しなかったDEMO(Drag and Drop API) caniuse.comCan I use では、iOS15…

ExpoでiPad非対応のアプリを書き出す 📱

Xcodeのデバイス設定 iPad非対応のiOSアプリを書き出したい時、Xcodeのアプリの設定から General > Deployment Info > Device を iPhone(iPhone、iPad、Universalから選択)にすればOKだと思っていたのですが、ひさしぶりにXcodeを開いてみると、若干勝手が…

React Nativeで実装したiOSアプリでデータを永続化する(UserDefaults編) 📱

ことの発端 ざっくりとした使い方 インポート 値の取得 値の保存 実装例 注意事項 追記 ことの発端 かつて、SwiftでiOSアプリを制作していた際、簡単なデータを永続化するときは UserDefaults を使っていました。developer.apple.comいまはExpoでiOSアプリを…

Cloud Firestoreに保存された値が変更された際にExpoで作ったアプリに通知を送信する 📛

Cloud Firestore トリガー を使って、ドキュメントに変更があった際にプッシュ通知を送ってみました。firebase.google.com 前提 Cloud Firestoreにデバイストークンを保存する(tokensコレクションにデバイスIDをドキュメントIDにして保存する) Cloud Fires…

Xcodeインストール済みのMacでExpoアプリをiOSシミュレーターでプレビューできない場合に確認すべきこと(✔ Xcode needs to be installed (don't worry, you won't have to use it), would you like to continue to the App Store?)📱

ことの発端 expo startで起動したExpoアプリは、ターミナルでiを押下することでiOSシミュレーターでプレビューすることができます。 MacにXcodeとCommand Line Toolsがインストールされていることが条件となるのですが、両方インストールしても、 ✔ Xcode ne…

Expoでつくったアプリにサーバからプッシュ通知を送ってバッジをつける 📛

前回つくった、Expoアプリにプッシュ通知を送るローカルサーバ。blog.kimizuka.orgすんなりうまくいったので、これをそのままHerokuやら、Lambdaやら、Cloud Functionsやらにデプロイすれば、問題なくプッシュ通知を遅れると思い込んでいましたが、冷静に考…

Expoでつくったアプリにローカルサーバからプッシュ通知を送ってバッジをつける(Expoの導入・プッシュ通知を受信するアプリの作成・プッシュ通知を送信するローカルサーバの作成) 📛

結論 ことの発端 Expoの調査 Expoの導入 ❶ アカウントの作成 ❷ アプリの準備 ❸ expo-cliの導入 ❹ expo-cliにログイン プッシュ通知を受信するアプリの作成 ❶ プロジェクトの作成 ❷ expo-notificationsの導入 ❸ app.jsonを編集 ❹ コードを書く App.tsx プッシ…

iOS15.3.1に搭載されている文字列でJavaScriptのスプレッド構文に耐えうるものを抽出する 😀

iOS15.3.1に収録された全絵文字をJavaScriptの配列に収納しようしたのですが、一部スプレッド構文での分割がうまくいかない絵文字がありました。例えば、‍️という絵文字。 [...'‍️']; // => ['', '‍', '', '️']と言う感じで、 と に分かれてしまいます。そ…

iOS15のmobile Safariに搭載されたWeb Share APIを試す 📱

developer.mozilla.org developer.mozilla.org以前からAndroidのChromeには搭載されていたものの、iOSのSafariには搭載されてなかったWeb Share APIですが、iOS15にてついに有効になったとのことなので、早速実装してみました。一番ハマったところは、naviga…

iOS15のmobile Safariに搭載されたPull to Refresh(引っ張って更新)を強引に無効にする 📱

iOS

❶ 画面全体をoverflow-y: scrollの要素で囲う ❷ overflow-y: scrollの要素をちょっとスクロールさせておく ❸ overflow-y: scrollの要素のスクロール位置を監視してscrollTopが0にならないようにするの3点を実装することで、Pull to Refreshを強引に無効にす…

iOS15のmobile Safari、MacのSafari 15からmetaタグでテーマカラーが指定できるようになった模様 📱

今朝、iOSを15にアップグレードしつつ、Mac版のSafariも最新にしてみたところ、どちらもサイトによってメニューバーやナビゲーションバーの色が変わるようになってました。Safari15から、theme-colorを評価するようになったようです。developer.mozilla.org…

iOS13以降、DeviceMotionEventにアクセスするためにはパーミッション取得が必要 📱

実装のたびに調べている気がするので、まとめておきます。iOS12.2からブラウザから加速度センサの値にアクセスするには、ユーザーからパーミッションを取ることが必須になりました。iOS12.2では設定アプリからパーミッションを取る形式だったのですが、iOS13…

iOS14からhref属性にbase64を指定しても画像が開けなくなった模様 📱

base64 👈 こちら、hrefにbase64を設定したaタグです。 <a href="data:image/png;base64,..." target="_blank">base64</a> このリンクをタップした時の挙動が、iOS13 → 画像が開く iOS14 → ブランクのページが開くとなっていることに気づきました。気づいた理由としては、前回の記事の続きで、iOS13でのダウンロード属性…

iOS13からdownload属性の挙動が変わった模様 📱

先日、10文字ホラージェネレーター たるものを制作させていただきました。10.ujiqn.com「ユーザーが入力した文字をCanvasにレンダリングして画像として書き出す」という非常にシンプルな仕様のサイトです。 生成した画像をローカルにダウンロードしてもらう…

iOSでページをスクロールしている最中にscrollToを使ってページのスクロール位置を変更すると次のtouchmoveの発生で元の位置に戻る 👆

github.comこちらのissue に対応するために調査しました。 こんなことは普通はしないと思うのですが、iOSにてページスクロール中にscrollToを使うと、 ❶ ユーザーがページのスクロールを開始する ❷ widow.scrollToでスクロール位置を変更する ❸ (指定箇所ま…

iOS12以前のmobile Safariではwindow、document、bodyにclickイベントを設定しても発火しない 🖱

mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…

iOSでvideoタグのposter属性を省略するとサムネイルが表示されない 🎥

iOS

<video src="movie.mp4" controls playsinline></video> という感じで、poster属性を省略するとiOSでサムネイルが表示されないことに気づきました。 PC版のChrome、Safari、Firefox、Android版のChromeでは1フレーム目がサムネイルとして表示されます。 動画はYouTubeにホスティングしてつかっていたので、全然気…

iOSでdownload属性を試して動画のダウンロードを試みる 📱

DEMO develop.kimizuka.org iOS14.0.1の端末でSafariに表示された動画をダウンロードして写真アプリに表示するべく、色々調査してみました。 結論としては無理でした。 href属性 <a href="動画ファイルのパス" /> href属性が動画ファイルに設定してあるリンクを長押しし、「リンク先ファイル</a>…

iOSシミュレータのSafariでウェブサイト全体のスクリーンショットを撮影する 📸

iOS13のSafariでは簡単にページ全体のスクリーンショットをPDF化することができますが、iOSシミュレータからでも同様の手順でPDFを保存できます。 シミュレータにGUIとして搭載されているスクリーンショットボタンから撮影できると最高だったのですが、残念…

inputタグのinputmode属性によるキーボードの見栄えを調査する(iOS編) 🔍

はじめに 見栄え一覧 none text decimal numeric tel search email url kana kana-name katakana おわりに はじめに HTML5.2にて廃止予定なので、できることなら使いたくないことでおなじみのinputmode属性ですが、なんだかんだで便利なので使いたくなるケー…

iPhone2台の着信音でマッシュアップを試みる 📲📲

iOS

2台のiPhoneが着信時に同時に鳴り始める現象を有効活用できないかと考えた結果、片方の着信音に「Berryz工房」の「Because happiness」、もう片方の着信音に「℃-ute」の「幸せの途中」を設定してみた。着信があると、同時に再生されて、ばっちり1曲に聴こえ…

iOSシミュレータ(Version 11.5) + Safari でWebインスペクタをつかったデバッグがうまくいかない(macOS 10.15.5)📱

iOS

結論 あらすじ 疑ったこと ❶ Mac側のSafariの設定 ❷ iOSシミュレータ側のSafariの設定 結論 Safari Technology Preview を使うことで解決しました! あらすじ iOSシミュレータとMac版SafariのWebインスペクタでウェブサイトのデバッグを試みた Developメニュ…