Acenumber Technical Issues – IT database for myself

YouTubeに代表されるiFrame埋め込みのレスポンシブ対応2024年版

標題について結論から言えば、比較的新しいCSSプロパティの「aspect-ratio」を使うものです。以下、従来多く採用されていた手法から此処に至る状況などを記します。2024年版とは口幅ったいですが、環境の変化などから生じた比較的新しい手法を、備忘録的に書き残した時期が今年2024年ということでご容赦願いたく思います。

レスポンシブとは？

レスポンシブWebデザイン〜マルチデバイス時代のコンセプトとテクニック

表示される縦横の寸法が定まっていれば、本来此の記事に記す如き厄介な手法を使う必要もありません。では、YouTubeなどをホームページに埋め込む際に、何故、標題に記す処のレスポンシブ対応などが必要になるのでしょうか。

近年のホームページに於いてはネットの雄Googleの後押しも有ってか、「レスポンシブ」なる手法が採用されるケースが多く見られます。「レスポンシブ」とは一々「レスポンシブWEBデザイン」と言うのが面倒で、最初の部分を取って称するもので、英語の「responsive」が反応する、とか、敏感な、とか言う意味の形容詞で有る如く、反応するWEBデザインです。では、何に反応するかと言えばブラウザの幅に反応するのであって、幅に応じて姿形を変えるデザインを意味しています。斯く言う本サイトもレスポンシブを採用しています。

以前、ホームページはパソコンで見るものと相場が決まっていた時期には此の様な面倒な処置も必要有りませんでしたが、世の中にスマホが普及するに連れ、一般にスマホでもホームページが多く閲覧される様になり、状況の移り変わる過渡期、端境期に於いてはWordPressにもPCとスマホで表示のテーマを分けるプラグインなども有りました。詰まり現在のホームページでは基本横長画面のPC用と縦長画面のスマホ用に最適化した、最低二つの表示様式を用意しなければならなくなりました。

WordPressテーマTwenty Twenty-Threeの子テーマでテンプレートを判別する

運営しているブログに仍っては、カテゴリー毎にデザインを変えるなど屡々発生する要請です。WordPressには当該ページのカテゴリーを判別する組み込み関数が用意されています。一つは当該ページが、カテゴリーページか否かを返す「is_category()」、もう一つは当該ページが任意カテゴリーか否かを返す“in_category()”で、共にBool関数で引数の真偽を判定して“true”若しくは“false”を返す条件判定関数です。此れに仍ってカテゴリーページの場合であれば条件を調整しながら、任意のコードや任意のスタイルシートを任意のカテゴリーに限定して追加出来ます。

上は投稿ページでの機能になりますが、同様にWordPressでは固定ページ毎にテンプレートを指定出来ます。固定ページでは固定ページ同士の親子関係も指定可能ですから、任意のページの下層に置かれた固定ページの全てに同じデザインを当て嵌めたい要請も屡々です。テンプレート自体は固定ページの投稿画面で指定可能ですが、此の時同じデザインを適用したい固定ページに同じテンプレートを指定すれば良いでしょう。此れを判定する機能を持つ組み込み関数が“is_page_template()”でした。

is_page_template()

組み込み関数“is_page_template()”はソースの“/wp-includes/post-template.php”を見れば、WordPressのバージョンが2.5.0からのもので、現行バージョンが6.3であれば可成り古い部類に属するのではないでしょうか。此れを引数を持たせずに用いればテンプレートが利用されているページが如何か、即ち固定ページの投稿画面でテンプレートを指定したが如何かの真偽が判定されますが、引数を持たせれば其れに該当するテンプレートであるか如何かの真偽が返り、従って特定のテンプレートが使用されているか如何かの判定に使えると言う按配の組み込み関数です。

引数には使われているか如何かを調べたいテンプレートに関する文字列を持たせるのでしたが、利用した向きには少しく奇異に感じた経験があれば同意せざるを得ません。構文を端的に言えば、以下の如く文字列として“パス”を与えるのです。

WordPressテーマTwenty Twenty-Threeの子テーマにグローバルカスタムメニューを追加する

近年のブログやネットショップなどに於けるシステムの傾向にwebサイトを構築する際のブロック・エディター化が有ります。ブロック単位でのレイアウト変更がweb上の管理画面にて容易に行えるシステムで、ネットショップでは勃興著しい「Shopify」が代表として挙げられるでしょう。世界で最も利用されるブログシステムのWordPressも此の傾向に無縁ではいられません。2018年師走に鳴り物入りで登場した「Gutenberg
グーテンベルグ」に先鞭を告げ、先のデフォルト・テーマ「Twenty Twenty-Two」にて端的に導入されたWordPressのブロック・エディター化_[※1]は最新のデフォルト・テーマ「Twenty Twenty-Three」で更に顕著なものとなりました。

詳解WordPress

此の傾向に於いてはITに其れ程馴染みの無い向きには便宜が図られるも、所与のデザインでは満足されない場合に此のカスタマイズを依頼されるIT屋に取っては、勿論、「Gutenberg
グーテンベルグ」から既に五年を閲しようと言うものの、未だ先のテーマで明確な潮流となってからよりは長い時間を経ぬ上での状況も有って、なかなかの難物となる様で、近しい時期に引き継いだWordPressサイトの構築がブロック化を忌避するように全くデフォルト・テーマから切り離して昔ながらの手法で独自テーマを以て成されているなど見るに付け感じられる所ですが、流石に其の旧態依然さに驚かされも呆れさせられもし、此の如くブロック・エディター化を執拗に避けるのも限界があるでしょう、以て反面教師とし、他山の石としたく思い、少しく「Twenty Twenty-Three」に取り組み標題の知見をシェアするものです。

Twenty Twenty-Threeに見られる著しい変化

最新のWordPressデフォルト・テーマのフォルダ内を見て先ず驚かされるのは、カスタマイズする際にはお馴染みの「functions.php」ファイルが見当たらないことです。此れについては情報が錯綜してもおり、バージョンに仍っては付与されるケースも見られる様ですが、2023年5月現在には見当たりません。

MacBook Pro 2016のTime Machineに於けるSSDとHDDの比較

昨日迄はいつも通り使えていたのに今日突然使用不能となる、 IT機器に於いては珍しいことでは無く、故障は通常こんな形で現れる様であるのは肌で感じてます。それはちょうど一月（ひとつき）前の2022年11月15日の火曜日のことでした。 MacBook Pro 2016専用のTime Machineとして利用していたHDDのエレコムSGD-NZ030UBK（SEAGATEドライブ）が、其の日に限っては通電してもウンともスンとも言わずパワーオンの証のLEDも点灯しません。ちょうど其の日の午後一番で出掛ける際に自動車に不具合が発生し遂には買い替えの憂き目に遭うのですが、疲れ果て帰った同じ日の夜にまさか重ねて此の如き困った不都合が発生しようとは、自動車の方は一般耐久消費財の例に漏れず、車屋さんからの助言も有り、前兆も有り、多少の覚悟はしていましたが、Time Machineは突然死にて、兎に角其の日はとんだ厄日ではありました。

MacBook Pro 2016のTime Machine顛末

本ブログの2016年11月20日の記事_[※1] 2016年11月26日の記事_[※2] に記した通り2016年の年末に入手してから今年2022年年末には既に丸々6年を経るもののバッテリーの交換_[※3] 以外には別段不具合も無いMacBook Pro 2016は、此のブログ記事を書く際にも使うなど今以て活躍中ですが、本体より遅れて2018年初夏に導入したTime Machine_[※4] が先に音を上げてしまいました。外に持ち出すのが本分のMacBookながらもTime MachineはHDDでしたので自宅に据え置いての利用でしたから特に外傷も有りません。最近のHDDは保ちも良く、ドライブ自体の異常の際には時に聞かれる異音の発生も有りませんでしたから、ドライブの不調にあらぬ電源部分の不具合が怪しく思えます。中を覗いてみれば基板上のコンデンサに焼き切れていたりするものの有るかも知れませんが、ジャンク系ユーチューバーならぬ身には、知識も道具も時間も宛ても無く、開いて修理と言う算段にも運び難くあります。孰れかの機会に外箱を開いて中身の無事の可能性もあるドライブを何某かへの転用など目論見ながら、一方Time Machine機に於いては此の機会を以ての買い替えを期したのでした。

在りし日のエレコムHDD（2018年4月18日撮影）

電源を繋いでももうLEDは光らない（2022年12月2日撮影）

SpriteKitに於いてセーフエリアを見掛け上viewDidLoad内で取得する裏技

iPhone Xが発売_[※1]されると共に導入されたノッチは、当初はiPhone Xのみへの対応を考えれば済んだのでしたが、徐々に追加されるノッチ付き端末は、極薄ベゼルが齎らす角丸表示と併せ、iPhoneアプリ作成に於いても充分に考慮せざるを得なくなりました。此れに対応する手法をApple社が開発環境に於いて用意したものがセーフエリアなる概念です。セーフエリアの中にアプリの必要事項を表示させれば、ノッチと角丸の欠け分に掛からずして、アプリ内容が不可視となってユーザーに不便を掛けないようにと配慮された手法です。

2021 Apple iMac（M1、24インチ）グリーン

セーフエリアの取得

当初はセーフエリア外の余白を零と考えた四角表示領域の従来iPhoneと、iPhone Xのセーフエリア一種類だけと考えれば、iPhone Xか否かで分岐処理をすれば済み、セーフエリアも定数で済んだものが、年毎に追加されるノッチ端末毎にサイズが異なれば、セーフエリア外の余白の値は増えるばかりにて、当然ながら端末毎、其々のセーフエリア数値に対応する必要が出来したのです。此方もApple社が対応するにセーフエリア値取得用に用意したプロパティが「safeAreaInsets」にて以下の如く記述すれば端末から上下左右の余白を取得出来ると言うものでした。

self.view.safeAreaInsets.top
self.view.safeAreaInsets.right
self.view.safeAreaInsets.bottom
self.view.safeAreaInsets.left

Apple社の開発者用サイトには「Instance Property」としての当該案内ページ「safeAreaInsets」が用意されています。当該プロパティを用いれば得られた余白の値の余裕分、端末のエッジから離してアプリの内容を表示すれば宜しくなります。また、時計やWi-Fiやバッテリー状況を示すアイコンの乗るステータスバーは、従来のものは従来通り、ノッチ端末に於いてはノッチの左右にiPhoneが自動で良しなに配置してくれます。

ゲーム画面に於けるセーフエリア

WordPressでTwenty Twenty-Twoを親テーマにした時に独自ブロックパターンを子テーマに追加する

WordPressがバージョン5にメジャーアップデートした時、ブロックエディタ「Gutenberg
（グーテンベルグ）」には驚かされた向きも多いのではないかと拝察するのは一時、手掛ける案件は殆どが従来の環境に寄せるプラグイン「Classic
（クラシック）Editor
（エディター）」を要請に受けてインストールしたからです。「Gutenberg
（グーテンベルグ）」は2018年師走に鳴り物入りで登場したものの従来との異質性から些か嫌われた面も有りましたが、数年を経て徐々に使われ始めている印象が有り、今後の普及は確実なものとなった様に感じられます。本記事も勿論エディターには「Gutenberg
（グーテンベルグ）」を利用しています。

The Gutenberg Revolution

しかしメジャーバージョン5の目玉かと思われて来た「Gutenberg
（グーテンベルグ）」も序章に過ぎませんでした。WordPress運営のメジャーバージョンアップデートの本来の目的は更に先に有りました。バージョン5.9で導入されたフルサイト編集機能と其れを活かすべく登場したテーマ「Twenty Twenty-Two」を以て明らかとなったのです。

Twenty Twenty-Two

新たに登場したテーマ「Twenty Twenty-Two」のWordPress公式の説明には「数十種類のブロックパターンを搭載し、数クリックでプロがデザインしたさまざまなレイアウトを利用できます。」なる文言が含まれるに従来からの飛躍が詰め込まれています。バージョン5.9で導入されたフルサイト編集機能との合わせ技にてエディター「Gutenberg
（グーテンベルグ）」と同様にブロックエディターはサイト全体に拡張され、サイト全体のブロック編集が可能になったのでした。

サイト全体にブロックエディターが拡張されたのは管理画面に明瞭に可視化されています。下の図に於いて左が一つ前のデフォルトテーマ「Twenty Twenty-One」で右がテーマ「Twenty Twenty-Two」の管理画面になりますが、メニューの「外観」が明らかに異なり、「Twenty Twenty-Two」には僅か二つ「テーマ」と「エディター（ベータ）」しか項目が設けられて居らず従来からの異質性を見て取れます。

アップル社にMacBook Pro 2016のバッテリー交換を依頼する

いつもの様にファミレスに出掛けオーダーの後、徐
（おもむろ）に開いたMacBook Pro 2016年モデルでしたが、いつもの様には画面が点灯しません。黒い画面の儘静かに佇んでいる様子に、遂に来たか、とTouch IDやエンターキーを連打したり、ディスプレイを閉じたり開いたりして見れば、矢張り思った通りのサインが点滅しました。例の狭い幅の赤の指標を伴う電池の意匠のバッテリー切れの徴（しるし）のアイコンです。自宅で充電満タンにして来たにも関わらずの事態です。予ねて予想していたバッテリーの寿命の時がやって来たのでした。

バッテリー切れのサインを表示するMacBook Pro 2016（2022年1月22日撮影）

バッテリー交換の目安としての充放電回数

予ねて予想、と言うのもMacBook Pro 2016のメニューバーのバッテリーをクリックすると何時の頃からか「修理サービス推奨」と表示がされていたからです。一年に近くなるかも知れません。しかし其の儘にしておいたのは手元に欠かせない端末であるのも一つですがアップルの公式サポートページ_[※1] にバッテリーの交換目安としての充放電回数がMacBook Pro 2016については、 1,000回とされているからです。

購入開梱時のMacBook Pro 2016（2016年11月19日撮影）

MacBook Pro 2016のバッテリー情報の「修理サービス推奨」表示

バッテリー交換をApple社に依頼するのは初めてではありません。本ブログの2018年7月31日の記事_[※2] に記した通りMacBook Air 2013年モデルも同じく充放電回数の目安は1,000回とされていた処、其の上限を超える1,093回で初めてApple社に依頼しました。処が、今回MacBook Pro 2016では此の問題が発生した時点で523回としか充放電回数が示されていないのです。「修理サービス推奨」と表示され始めた頃には此れより少ない数値であったのは勿論で、3時間ほどは電源に接続することなく使用が可能でしたので、凡そ修理依頼を思い切る気持ちは生じなかったからです。其の意味では予想はしつつも同時に突然の感も交錯して、想定内と戸惑いの綯い交ぜな些か言い難い心持ちを抱かされたのでした。

因みに本記事執筆時点でのMacBook Air 2013の充放電回数を見れば486回で500に迫る回数ながら「修理サービス推奨」などの表示は出ていません。バッテリーの容量など仕様や端末の使用頻度なども異なりますので単純に比較は出来ませんが、Proモデルとして廉くは無い価格のMacBook Pro 2016のバッテリーの交換時期の早さは如何にも腑に落ちません。更には去年2021年初頭に入手したMacBook Air M1 2020年モデル[※3]に至っては現在充放電回数は3桁にも届かない64回で、決して使用頻度が低いのではなく、発売当初から評判を取っている通り何しろバッテリーの保ちが良く、日に数時間持ち出すだけでは毎日の充電の必要が無い余恵（よけい）です。勿論Apple社謹製の新CPUが齎す効果であるのは言う迄もなく絶大で、従来市場独占の結果、用いざるを得なかったx86系CPUの製造元のインテル社には現在世間を賑わすエネルギー問題に関して敢えて猛省を促したくもなる出来の良さです。何しろ発売当初からキーボードからタッチバーから何かと物議を醸したMacBook Pro 2016年モデルですから、CPU含め電源管理辺りにも何某か問題が内在しているのではないかと疑義の生じるのも正直否めません。但し2016年モデルとして其の年に購入してから5年と数箇月の期間を経ていますから経年劣化の影響も有るのは承知しており、個体に仍っては破棄の憂き目を見るものもある時期であれば著しく信頼を損ねる程でもありません。

多少釈然としない部分は残しながらも、先ずはバッテリー交換依頼としては経験済みの事態ではありますし、Apple社の対応は前回_[※2] では二日しか掛からず驚かされもした迅速さでしたので、其の日のうちにアップル社へのバッテリー交換の依頼を決めたのでした。

Apple社サポートへの連絡方法と前回との相違点

MacBook Air2013のmacOSをMojaveからCatalinaを素っ飛ばしてBig Surにアップグレードしてみた

長らく手元のノートPCであるMacBook Air 2013のOSをアップデートしない儘で来ました。前回のメジャーアップデートでmacOS High Sierra（ハイ・シエラ）からmacOS Mojave（モハベ） 10.14（18A391）としたのが2018年10月24日、macOS Mojave 10.14.6（18G84）としたのが2019年8月1日ですから、2021年10月現在2年以上もの間、等閑（なおざり）にしていた勘定になります。其の間にも追加アップデート10.14.6（18G87）が2019年8月19日、追加アップデート10.14.6（18G95）が2019年9月6日とメジャーアップデートならぬMojaveの追加アップデートを重ねたのでしたが、時は2019年10月8日より既にバージョンナンバー10.15のmacOS Catalina（カタリナ）への時代へと移って行きました。

macOSアップグレードを阻んでいた事情

システム環境設定からアップデート通知を、もうずっと、端末を広げる度に目にしながらも、最新OSへの入れ替えを忌避していたかと言えば然に非ず、出来得るものなら最新OSの享受を欲していたにも拘らず、そうは問屋が卸さない事情がありました。ストレージの容量不足です。手元のMacBook Air 2013の内蔵SSDの容量は128GB、2013年師走の購入当時は勿論、最後のメジャーアップデート迄にも不足はなかったものの、2019年10月のmacOS Catalinaへのアップデートの際には容量不足の警告と言う引導を渡されていたのでした。

MacBook Air 2013に表示される macOS Big Surのデスクトップ画面

手元の端末のMacBook Air 2013に、正確を期して記せば、11-inch, Mid 2013とされる様に画面サイズは11の2013年中旬発売のモデルで、CPUは1.3GHzのIntel Core i5、メモリは1600MHzのDDR3、4GBを搭載しており、此のストレージ、内蔵SSD容量が128GBであるのでした。此の端末にはiPhoneとの連携を含めて充分満足していましたので、2016年10月にMacBook Pro 2016年モデル、2020年12月にMacBook Air M1を購入してからも最前線で現役として活躍させていました。そして今尚現役として健在であるからこそ最新OSへのアップグレードを望むのでしたが、ストレージ不足に阻まれていると言う状態であったのです。

MacBook Air 2013のOS遍歴

MacBook Air 2013の当初のOSはバージョン10.9のOS X Mavericksマーベリックスでした。翌年2014年11月にはバージョン10.10のOS X Yosemite（ヨセミテ）、其の翌年2015年9月にはバージョン10.11のOS X El Capitan（エル・キャピタン）、其の翌年2016年10月にはバージョン10.12のmacOS Sierra（シエラ）、其の翌年2017年9月にはバージョン10.13のmacOS High Sierra、そして2018年10月にバージョン10.14のmacOS Mojaveと、OSのアップグレードを代々重ねて来ましたが、Mojaveにて最新OSへの更新は停滞していたのでした。此の状況から今回、本記事ではバージョン11となるmacOS Big Sur（ビッグ・サー）へのアップグレードを目論見、実行に移した様子を出来得れば活写したく思うものです。

Google Chromeの検索ページのみライトモードにする

頃日気付けば、少々遅きに失しているのかも知れませんが、少し前迄は此の様な仕様ではなかった気がしています。 MacでブラウザにGoogle Chromeを用いた時、検索結果の背景が真っ黒となり、其の上に文字が青色という実に醜い仕様になってしまっているのです。

Macの設定確認

此れがダークモードであるのは凡そ察しが付きますので、先ずはMacの設定を、以下の如くメニューを辿り確認します。

システム環境設定 » 一般 » 外観モード » ダーク

すると案の定、 Macの設定はダークモードになっており、此の設定が検索結果画面に影響を及ぼしているであろうのは見当が付きますが、しかしつい此間迄は其の様な色合いにはなく、であれば、其の異様さと使い難さに間違いなく大きな違和感を抱いていた筈です。

MacBook Air M1 2020のTime Machine導入記

Apple社が自社製PC Mac の心臓部をIntel社から調達していたものを、iPhone由来の独自プロセッサー M1 に切り替えると2020年6月の開発者会議で発表し、実際年末に発売した３機種の内の１機種が、今回主役の MacBook Air にて、其の筋のネットメディアや、ガジェット好きユーチューバー及び新し物好き抔が、発表と同時に入手して発信する情報を見るに、其の手に有り勝ちな、提灯や的外れ、曖昧さを差し引いても、どうにも此れはゲームチェンジャーであるとしか思えず、師走に発注して年を跨いで落掌したのが2021年1月24日、以来、メイン機として使用していたMacBook Pro 2016から徐々に妥当な業務から移行させ、今は其の使用頻度が半々となる中、Apple社の発表、前評判からそう遠くない実感の得られ、頗る満足の行く使い心地を満喫しています。

MacBook Air M1 2020

如何なる満足を得られたるかと問われれば、先ず挙げられるのはバッテリーの持ちの良さです。Intel Macと同時利用ですので其の差は歴然で、やはり中央プロセッサーの寄与するところが大きいのでしょう。最早、社会全体のエネルギー消費に思いを致すくらいで、CPUの寡占は忌むべき事態であるとの感慨さえ抱かせられるほどです。加えて内製プロセッサーであれば基本ソフトウェアとの整合性も取るべく設計され、基本ソフトウェアからも歩み寄れば、それも省電力に与って力のあるのは疑うべくもありません。少し早く、去年2020年末に入手したiPhone 12 Pro Maxのバッテリーの持ちの良さと合わせて、毎晩充電すると言う馬鹿らしくも煩わしいルーチンワークから免れられたのが、先ず挙げられるご利益の一つでしょう。

Apple MacBook Air Apple M1 Chip (13インチPro, 8GB RAM, 512GB SSD) - スペースグレイ

次に挙げられるのが、処理速度です。事前情報を齎らしてくれて有難いとは言え、情報鮮度が求められるガジェット系ユーチューバーの情報は些か出鱈目な部分も目立ちますし、処理能力を言うに動画編集ばかりなのも困りものではあります。知りたいのは Macならでは、Xcodeの性能で、当然先ずインストールしたのもXcodeです。さて、其れに抱いた印象ですが、顕著に速度差の現れるのはiOSシミュレーターです。本ブログにある通り、手元ではゲーム開発が主たりますので、特にアクションゲームで反応が鈍ければ開発速度も比例して鈍まるのが道理、コンパイルも其の速さを体感出来、其の上 Mac内で動くiPhoneが実機に遜色ないと迄は言いませんが、問題無いレベルに収まるのは嬉しくも、本来此れこそあるべき状況なのだとは思います。此れには矢張り中央プロセッサーが内製で、此れも内製のiPhoneのAシリーズと連携が密接に取れているのが大きく寄与していると考えるのが自然でしょう。また、手元の環境では其れ程大きなプログラムは扱わないためiOSシミュレーター程顕著ではありませんが、コンパイルの速度も体感的に向上しているのは、前述通りはっきりと感じられます。処理速度は全面的に向上しているとは言え、特に此の開発環境の面の発展が著しいのは、Apple社の発表のみからでも容易に予想可能で、思っていた通りに的中、我が意を得たりとほくそ笑んだところでもあります。

2021 Apple 12.9インチiPad Pro (Wi-Fi, 128GB) - スペースグレイ

以上、バッテリーの持ちの良さ、特に Mac特有の開発環境の処理速度の向上、の2点がMacBook Air M1 2020の得られた特筆すべき恩恵です。2021年4月21日のAppleイベント「Spring Loaded」で発表され予約受付の開始された新型iMacと新型iPad ProもM1プロセッサーを心臓部に擁すれば、此の点に於いては期待に違わぬ性能を発揮すると思われ、其の如き世評の浸透も有ってか受付状況も上々で半導体不足も有るにしろ、既に数ヶ月待ちの様相を呈していると漏れ聞きます。