2023/09/13のAppleEventで発表されたiPhone15Proの内容をさらっとおさらい

<p>こういう記事も書いてみたかったんです。さて、9/13のAppleイベントで発表されたiPhone15ですが、実際何が進化したのかふわっとしていたので、詳しく見ていきます。</p><h2 id="h29a4423bb2">ステンレスからチタンへ</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/903fa31c6bc54eb48e835d4d3f3bd119/whats-iphone15-2.png" alt="ステンレスからチタンへ" width="1128" height="533"><figcaption>iPhone15Proトップ。かっこいいね</figcaption></figure><p>iPhone15 proでは筐体の素材にチタンを採用。殆どのiPhoneで使われていたステンレス素材よりも丈夫になり、およそ約10%軽くなっています。表面のテクスチャも男心をくすぐるものに…。かっちょええ！</p><h2 id="h299e3b01be">A17 Proチップ</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/44b60e126a224028a5a28ef49e4c6767/whats-iphone15-3.jpg" alt="A17PRO" width="1260" height="680"><figcaption>毎度の事スペックが上がってるっぽいA17PRO</figcaption></figure><p>毎度の話ですが、処理速度が少しだけ上がってます。一番の見どころはレイトレーシングでしょうか。よりリアルなゲームをプレイする際は恩恵を受けるかもしれません。Gigazineの記事によると、Intel i9-13900kのシングルコアに近しいスコアであることも明らかになっています。</p><p><a href="https://gigazine.net/news/20230915-apple-a17-pro-single-core-performance/">https://gigazine.net/news/20230915-apple-a17-pro-single-core-performance/</a></p><h2 id="hb4e8a7bbc7">アクションボタン</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/20beda4071ae4014a68dd8f8be66f4db/whats-iphone15-4.png" alt="アクションボタンが登場" width="1500" height="852"><figcaption>アクションボタンが登場</figcaption></figure><p>サイレントON/OFFでおなじみのこのスイッチが、アクションボタンとなって生まれ変わりました。このボタンにはカスタマイズ機能があり、カメラを立ち上げたり、録音を始めたりなどの割り振りが行えます。とはいえ、今どの状態なのかが若干分かりにくくなりそうですね…。</p><h2 id="h86d3cf2b75">空間ビデオ撮影</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/0e794be3086c4b27ab142b241cbb793d/whats-iphone15-5.png" alt="空間ビデオ撮影" width="1232" height="659"><figcaption>VisionProへの伏線！空間ビデオ撮影</figcaption></figure><p>ここでVisionProへの導線が現れます。Liderスキャンではなく、広角とメインカメラを組み合わせて3D撮影をする機能が…。VisionPro購入予定者からすると少しだけワクワクする機能ですな。</p><h2 id="ha632959a89">120mmレンズとテトラプリズム</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/0a6ce4f094304e6ebe99e7a5e2efc66d/whats-iphone15-6.png" alt="テトラプリズム" width="1135" height="543"><figcaption>120mmでっか...。iPhone15ProMaxに凝縮</figcaption></figure><p>iPhone15 Pro Maxではテトラプリズムという技術が組み込まれています。通常、遠くの物を撮影するためには、大きな望遠レンズを使用する必要があります。この大きなレンズをiPhoneの中に凝縮した技術がテトラプリズムです。</p><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/eae6f21f92a746679552c1b111d6182a/whats-iphone15-7.png" alt="テトラプリズム説明" width="1248" height="668"><figcaption>4回屈折させてるっぽい</figcaption></figure><p>これは外からの光を4回屈折させるというもので、これによってiPhoneの厚みを抑えながら、より遠くの物を捉える事の出来る望遠レンズを実現させることが出来ます。他社Android製品ではペリスコープ型と呼ばれていますが、テトラプリズムと同様の技術です。</p><h2 id="h06cdd1b047">待ってたぞUSB-C</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/78891e1703a74c83b5e072a75d6c2f66/whats-iphone15-8.png" alt="USB-C" width="1224" height="584"><figcaption>おそいよ！ありがとう！USB-C！</figcaption></figure><p>LightningからUSB-Cへ。説明するまでもないかもしれませんが、少しだけ注意が必要。同じUSB-Cでも無印とProでは転送速度が違います。無印iPhone15は最大480Mbps。iPhone15 Pro系統は最大10Gbpsの転送速度に対応しています。要するにProの方がかなり速いってことです。</p><h2 id="ha214098e44">まとめ</h2><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/e5b31f105a61418495d1b3c3603c845e/whats-iphone15-9.png" alt="iPhone15Proまとめ" width="1267" height="704"><figcaption>買う？買わない？</figcaption></figure><p>僕はいまだに購入を迷っています。今、ストアを見てみると1か月以上先の発送となっています…。iPhone13Proで十分足りているので、今回は見送りの予感…?</p><figure><img src="https://images.microcms-assets.io/assets/470938b8c6f24527857a890bbc36ebc7/d19de9af016541688235db2c15ca4e7e/whats-iphone15-10.png" alt="" width="295" height="78"></figure><p>次は10月にiPadとm3macが登場するのでは…?と予想しておりまする。m3macでたらちょっと欲しいね。iPhone15…どうするはれぽこ！</p>

結局iPhone15は何が進化したん？

<h2 id="h1f65503fd9">機能更新</h2><h3 id="h70ac4ea260">専門用語POP</h3><p>欲しい情報をすぐに取得できるように、よく使われる単語や専門用語などをPOPで表示するようにしました。</p><p>たとえば、React初学者がuseEffectという専門用語を見た時に、黄色くマークされている部分(useEffect)をマウスオーバーするとその意味を瞬時に知ることが出来ます。</p><p>主にPCの方を対象としていますので、画面幅が500px以下の場合は表示しないように設定しています(背景色が灰色に変わります)。</p><p>また、codeブロックはこの処理を無効にしているのでhoverしても何も表示されません。</p><div data-filename="App.js"><pre><code class="language-javascript">export default function App(){
  useEffect(()=&gt;{
    window.addEventListener(&quot;load&quot;,()=&gt;{
      console.log(&quot;load!!&quot;)
    })
    console.log(&quot;effect!!&quot;)
  });
  return(&lt;&gt;&lt;/&gt;);
}</code></pre></div><p>popのマーク対象は現状jsに直書きしていますが、microCMSで記事毎に設定できるようにする予定です。</p><h3 id="ha739b3b8f6">その他</h3><p>細かいバグの修正をしました。</p>

【機能更新】専門用語の意味をすぐに表示してくれるPOPを実装しました

<p>記事が見つからなかった時にカッコよく表示したい！</p><p>と思ったはれぽこは、こんな感じのERRORポップを作ってみた。</p><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.7901%;"><iframe src="https://gyazo.com/player/dafe86cb4b2631ace93b7e3bc3369952" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="encrypted-media;"></iframe></div><h2 id="hcbc10507af">エラーを実行させる条件式</h2><p>今回は記事のソート結果が0の場合にのみポップを表示させたいので、シンプルにこのようなコードを書いてみます。</p><pre><code class="language-javascript">if (articleNoneError.current) {
  errorPop(&quot;&lt;span&gt;記事は見つかりませんでした。タグ名を確認するのだ&lt;/span&gt;&quot;);
}</code></pre><p>このサイトはnext.jsで作られており、エラーはuseStateやuseRefで管理しています。articleNoneError.currentはタグでソートして記事が存在しなかった場合にtrueかfalseが格納されるrefです。なので、記事数が0の場合はtrueとなり、記事が存在する場合はfalseになります。</p><p>このrefがtrueになった場合にのみerrorPop関数が実行されます。</p><h2 id="hd749f83a95">ポップを表示させる処理</h2><p>ここではerrorPopという名前の関数を作ります。ここで目指したいのは、エラーが表示されて数秒後に消したいのと、複数個あるエラーのうち一つが消されたら残りのエラーが上に移動するようにしたいという事です。</p><pre><code class="language-javascript">export function errorPop(errorText) {
  const errorPopWrap = document.getElementById(&quot;jsErrorPopWrap&quot;);
  const calcLength = errorPopWrap.children.length + 1;
  errorPopWrap.insertAdjacentHTML(
    &quot;beforeend&quot;,
    `
        &lt;p class=&quot;errorUnit&quot; id=&quot;error${calcLength}&quot;&gt;&lt;span style=&quot;font-weight:700;padding-bottom:4px;&quot;&gt;ERROR&lt;/span&gt;&lt;br/&gt;${errorText}&lt;/p&gt;
    `
  );
  const errorUnit = document.getElementById(`error${calcLength}`);
  setTimeout(() =&gt; {
    errorUnit.classList.add(&quot;errorPopAnim&quot;);
  }, 200);
  setTimeout(() =&gt; {
    errorUnit.classList.remove(&quot;errorPopAnim&quot;);
  }, 4500);
  setTimeout(() =&gt; {
    document.getElementById(&quot;jsErrorPopWrap&quot;).children[0].remove();
  }, 5000);
}</code></pre><h3 id="h03d6cf903c">工夫点1 エラーDOM生成時のアニメーションの挙動</h3><p>最初のsetTimeoutでerrorPopAnimというクラスを付与しています。これは、初期値right:350px（はれぽこの適当値）としていた物をerrorPopAnimクラス付与により、right:0にしているだけの処理です。</p><p>この時重要なのが、DOM生成とクラス付与を同時に処理してしまうと想像通りのアニメーションにならないという事です。ですので、200msのdelayをかけてからerrorPopAnimクラスを付与しています。</p><h3 id="hfdf87394cf">工夫点2 エラーポップにラッパーを用意する事</h3><p>これは、複数個のエラーポップのうち最も古いポップが消えた場合に、残りのポップが自動的に上に移動させるための処理です。エラーポップは<code>id=jsErrorPopWrap</code>でHTMLを記述し、この子要素に対してエラーポップを格納していきます。工夫点4で話しますが、最も古いエラーポップが消えた場合に自動的に上にシフトしてくれます。</p><h3 id="hd8f52b0d04">工夫点3 生成個数に応じてidを付与する</h3><p>idはエラーポップが今何個あるかで判定しています。例えばエラーポップ生成時に連続したid (1,2,3,...,n)を付与したい。この時ラッパーにの中に何個のエラーポップが入っているのかを確かめる必要がある。この処理は下記の様に再現できる。</p><pre><code class="language-javascript">const calcLength = errorPopWrap.children.length + 1;</code></pre><p>これを下記の様に書けば</p><pre><code class="language-javascript">errorPopWrap.insertAdjacentHTML(
  &quot;beforeend&quot;,
  `
      &lt;p class=&quot;errorUnit&quot; id=&quot;error${calcLength}&quot; style=&quot;&quot;&gt;&lt;span style=&quot;font-weight:700;padding-bottom:4px;&quot;&gt;ERROR&lt;/span&gt;&lt;br/&gt;${errorText}&lt;/p&gt;
  `
);</code></pre><p>新しく生成されたpopに対して、正しくidが付与される。</p><h3 id="h1ef1d574d1">工夫点4 エラーポップの消去</h3><p>エラーポップを消すために先ほど追加したerrorPopAnimクラスを消去する。今回は4500msのタイミングでクラスを消去し、5000msのタイミングでDOMを消去するように設定した。言い換えると、4500msで画面外に消えるアニメーションが走り、5000msのタイミングでHTMLのDOMツリーから生成したエラーポップが消去されるという事になる。</p><pre><code class="language-javascript">setTimeout(() =&gt; {
  errorUnit.classList.remove(&quot;errorPopAnim&quot;);
}, 4500);
setTimeout(() =&gt; {
  document.getElementById(&quot;jsErrorPopWrap&quot;).children[0].remove();
}, 5000);</code></pre><p>もうほぼ話し終えたが、出社の時間になってしまった。</p><p>締めの言葉はまた後程</p><p></p><p></p>

記事が見つからない時に表示する ERRORポップ を作ってみる

<h2 id="hcb9dacb773">結論</h2><p>useEffectが走る前にLoadが終わってしまうため。</p><h2 id="h5e56efe3ac">発生状況</h2><p>useEffect内で書いた loadイベントが動かない。または、最初だけ動くがリロードすると動いたり動かなかったりする。</p><p>そもそもuseEffectは描画された後に実行されるのだから、loadイベントなんか必要なくね？って思う人もいると思いますが、実は全く違います。useEffectはコンポーネントが描画されたら実行されるhooksなので、ページ全体が読み込み終わったら実行されるloadイベントとは実行条件が違うのです。</p><p>次の様にuseEffectとloadイベントを書いて実行してみましょう。複数回リロードすると、effectは常に実行されますが、loadは実行されたりされなかったりします。</p><div data-filename="App.js"><pre><code class="language-javascript">export default function App(){
  useEffect(()=&gt;{
    window.addEventListener(&quot;load&quot;,()=&gt;{
      console.log(&quot;load!!&quot;)
    })
    console.log(&quot;effect!!&quot;)
  });
  return(&lt;&gt;&lt;/&gt;);
}</code></pre></div><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 50%;"><iframe src="https://codesandbox.io/embed/cool-silence-vmwdly?file=/src/App.js" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen></iframe></div><h2 id="hd47966f145">説明</h2><p>その理由としてuseEffectが始まるタイミングですでにページ読み込みが終わっているから。</p><p>loadイベントはページ読み込み終了時に呼ばれる関数であり、すでにロードが終了していれば呼ばれることはない。</p><p>なので、実際に使用する際は別の方法で使ったほうが良い。</p><p>間違え等ありましたら、harenyon@gmail.comまでご連絡いただければ幸いです。</p>