Apple Watch（watchOS 5）向けのレスポンシブ対応についてのまとめ
現在ベータ版が公開されているwatchOS 5 から、メールとメッセージ・アプリでHTMLメールやリンク先のページがWebKitで表示されるようになるそうです（Safariは搭載されない）。ついに！ウェブコンテンツをApple Watchで見られるようになるんですね。 HTMLメールが見られたら便利だと思うことがしばしばあるのでwatchOS 5の公開が楽しみです。画面は小さいですけど、HTMLメールやウェブサイトの内容をサクッとチェックできたら便利だと思うんですよね。 ということで、そろそろHTMLメールやウェブサイトのApple Watch向けレスポンシブ対応を考えておいても良さそうですね。 以下は「Designing Web Content for watchOS 」というWWDC 2018の公式ビデオの内容を基にまとめたものです。実際の環境で確認したものではないので、watchOS
iframeの高さをJavaScriptで自動的に調整する方法
実装方法の説明 ここではiframeを読み込むページを親フレーム、読み込まれるほうを子フレームと呼びみます。下図のようにJavaScriptのwindow.postMessage()メソッドを使って子フレームから親フレームにコンテンツの高さを送信します。 親フレームで高さを受け取ってJavaScriptでiframeの高さを調整します。 シンプルですね。 実は、長年この解決策が見つけられずに困っていたんですが、意外にもシンプルに解決できて驚きました。しかし、こういう解決策ってふとしたときに見つかるもんですね。 ソースコードの説明とデモ まずは簡単なデモをご覧ください。 デモでは以下を実装しています。 子フレームでコンテンツの高さを取得 子フレームからpostMessage()でコンテンツの高さを親フレームに送信 親フレームでaddEventListner()を使ってメッセージを受け取る i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
