オジサン、M2 MacBook Air買うかどうか思い悩む
オジサンは今でもM1 MacBook Airを絶賛愛用中だが、先日のWWDCにて発表されたM2 MacBook Airのデザインにはかなり惹かれている。
オジサンの愛したウェッジシェイプのフォルムで無くなってしまったのは非常に残念であるが、あのフォルムは古臭いという意見もネットでチラホラ見かけたので、世の中の流れはそういう物なのであろう。 新デザインは現行Mac Book Proをそのまま薄くしたような、iPad Proをも彷彿とさせる薄型筐体で排熱的に少し不安に感じるが、非常に現代的になったと思う。 ディスプレイの明るさもProと比べて遜色無くなりM2になってグラフィックも強化されているので写真や動画の編集も期待できるというものである。 あとは今回のアップデートでメモリが24GB積めるようになったのは嬉しい限りである。56,000円のアップデート費用の価値があるかどうかは微妙ではあるが選択肢が増えるのは喜ばしいかぎりである。
さて。
オジサン的に購買意欲を刺激されたのかと言えば、刺激されてしまった。 購入するのであれば、上位モデルの512GBモデルをベースに24GBに増設したカスタマイズモデルになるであろう。 カラーであるが、スターライトが非常に気になっている。 予約開始もまだアナウンスされておらず、日々カスタマイズしたモデルをバッグに追加したり、削除したりヤキモキした日々を過ごしている笑笑
ここで問題が。
M2 MacBook Airを購入する場合、オジサンには先妻のM1 MacBook Airが鎮座しており、購入した場合修羅場は不可避である💦 冗談はさておき、2台のMacBook Airをどうやって棲み分けすれば良いのかという新たな悩みを抱えてしまった。
M2 MacBook Airを買うべきか買わざるべきか…
以上
オジサン、iPhone13 Pro Maxの購入をきっかけに写真の楽しさを思い出す
前回の記事に引き続き、iPhone13 Pro Maxに関連する記事を書かせていただく。 元々コンテンツ消費や調べ物をするのに目に優しい大画面のiPhoneを求め、iPhone13 Pro Maxを購入した訳だが、カメラの性能が想定以上に高性能だったこともあり、今年に入って写真熱が再発した。
望遠/広角/超広角のレンズ、それぞれがF1.8/1.5という明るさ、さらには光学式と電子式の手ぶれ補正を備え、その辺のミラーレスやアクションカムに負けず劣らずのカメラを備えたiPhoneが写真撮影が楽しくない訳がないのである。
コロナ禍による長きに渡る外出自粛も緩和されたのも手伝って、オジサンは昔に少しかじっていた写真撮影にハマっていったのである。
そんな訳でオジサン的にiPhone13 Proをカメラ的な視点で見た場合のお気に入りポイントを述べていきたい。
iPhoneこそ究極のスナップシューター
カメラにコンデジと呼ばれるジャンルがある。 有名なものでは、リコーGRIII、Sony RX100シリーズ等。 これらは街撮りのスナップ撮影を好む人たちに愛されている。 理由は、ポケットに入るサイズ、スイッチをONにしてからシャッターを押すまでのレスポンス、そして小型ながらにして高画質。
そう。
iPhoneはそれらを全て満たしているのである。
iPhoneはポケットから取り出し、ロック画面のカメラアイコンを長押しすればカメラが起動する。 スマホゆえ、光学的にカメラと比べると不利かもしれないが、AppleはそのハンデをAIを用いたソフトウェア技術で乗り越えているのである。 なので雑に取り出し、シャッターを押してもそこそこの写真が撮れてしまうのである。
カメラを使い慣れている人間からするとマニュアルで補正できる幅が狭い事に不満を感じるかもしれないが、ソフトウェアにサポートしてもらう分、人間はその瞬間を切り取ることに集中できるのである。
iPhoneを究極のスナップシューターと呼んでもなんら過言ではないのである。
★余談だが、ライバルとも言えるSony Xperiaにはカメラアプリにマニュアル設定のモードがある。流石αシリーズを製造しているメーカーである。 ちょっと羨ましい笑笑
iPhoneがあれば撮影からRAW現像、SNSへのアップロードがワンストップで可能
オジサンは今年になってはるか昔にアカウント登録だけして塩漬けにしていたインスタグラムを本腰を入れて使い出した。 やはり写真というものは人に見てもらってこそのものである。 同好の士を見つけることも可能である。
オジサンはiPhoneでの写真撮影は基本RAW撮影である。そしてRAWで撮影した写真がRAW現像の際、自分好みの色味や世界観を表現する、カラーグレーディングすることができる。
オジサンの場合、純正の写真アプリをメインで使用している。
写真アプリで露出やコントラストを調整、フィルターで色付けしたりして楽しんでいるのである。
さらにモバイル版Lightroomで色味を追い込むことも可能
オジサンはAdobe Creative Cloudを契約しているのでLightroomも使用できる。
iOS版も用意されており、iPhone上で編集した写真をさらに自宅でMacで開く、なんて事も可能である。
そして編集が終わったらiPhoneのカメラロールに書き出し、インスタのアプリでひたすら投稿するのである。 以下がiPhoneで撮影、色味を心の思うままに編集した写真である。
そんなこんなでiPhoneをきっかけにオジサンの写真ライフは再び動き始めたのである。
だがしかし。
物欲の権化とも言えるオジサンがiPhoneだけで満足できるはずもなく。
以上
オジサン、でかい iPhoneが欲しくなりiPhone13 Pro Maxにチェンジする
今更ながらのご報告だが、オジサンは今年初めにiPhone 13Pro Maxに機種変していた。
それまではiPhone 12 Proを使っていたのであまり機種変する意味なんてないんじゃないのか？と疑問に思われる方もいるかもしれない。
だがしかし。
iPhone 12 Proを使っている時オジサンはいつも考えていた。
もっと大きな画面のiPhoneが使いたいと。
早い話、老眼気味で6.1インチの画面でも見づらくなったのである笑
老いには勝てない💦
それに気がついたのは皮肉にもPixel6をうっかり購入してしばらく使い込んだ時であった。
多少重かろうが画面がでかいのは正義であると。
そしてやはりというか、オジサンにはAndroidはあまり性に合わなかったのである。
オジサンが使いたいのはでかいスマホでは無く、あくまででかいiPhoneだったのだと。
皮肉にもAndroidを使うことで気がつかされたのである。
決してPixel 6は悪いスマホではなかった。
大きな画面、よく練られたAndroid OSのUI、1インチセンサー搭載による撮影した写真や動画の画質。
話は横に外れてしまうが、コスパ良くカメラ性能や高いユーザー体験できるスマホをお探しであればPixel6はおすすめである。
閑話休題。
さて、かれこれオジサンがiPhone 13 Pro Maxを使い出してから数ヶ月になるがお気に入りポイントをいくつか揚げてみたい。
１．大きな画面
実はiPhone 12 Proの小さい(?)画面をカバーする目論みでiPad Mini6を購入していたのではあるが、iPadの場合、ウェブサイトによってはPCサイトをそのまま縮小して表示する事があり、非常に見づらく感じるケースがあった。
レスポンシブで作成されているにしても大概タブレットの表示はPCのサブセット的に扱われがちである。
スマホ表示であれば非常に見やすくなるのではあるが。。。
そこへ行くとiPhone 13 Pro Maxは6.7インチの大画面ながらスマホ表示でwebサイトが表示されるので非常に見やすいのである。
アプリに関しても同様でやはり大画面で使うアプリはボタン類もタップしやすく非常に快適であった。
大画面は正義である笑笑
2．カメラ
これは期待していなかったので全くの想定外ではあるが、カメラ性能が格段に良くなっていた。
具体的にはiPhone 12 Proに比べると画質が向上していた。
ミラーレスカメラに例えるとレンズを交換したかのような解像感の向上が体感できたのである。明らかに透明感と立体感が増しているのだ。
フィルターを一枚剥がした感じとでも言うべきか。
ソフトウェア的なものなのかハードウェア的なものなのかは分からないがとにかく画質が明らかに良くなったのである。
これは思わぬ拾い物であった。
3．ProMotionテクノロジーによるヌルヌルな画面
オジサンはiPad Proを所有しており、ProMotionテクノロジーは体験済みである。
無くても支障はないが、一度体験してしまうと元には戻れない。
とにかく縦スクロールが億劫にならないのである。
スクロールするだけで楽しい笑笑
14では全てのモデルに搭載して欲しいものである。
と、ここまでがお気に入りポイントなのであるが唯一不満点がある。
Lightningである。
Lightningは未だUSB2の規格であり、転送速度が遅い。
実はiPhone13 Proは高級シネマカメラでのみ撮影可能なApple Proresという高画質・高ビットレートな動画形式で撮影可能なのだが、これを編集するにはiPhoneから取り出さねばならない。
この時にボトルネックになるのがLightningなのである。
数分の動画でも数GBのサイズになるデータをiPhoneから取り出すのにUSB２の規格で取り出すのは何とも億劫な話である。
次期iPhoneではこの辺をぜひ改善して欲しいものである。
以上
オジサン、Apple Studio Displayが欲しくなった５つの理由を述べる
久しぶりの記事である。
年末から書こう書こうと思っているうちに年が明けてしまい、気がついたら春になっていた笑笑
まさに光陰矢のごとし、であった。
さて、記事タイトル通り、オジサンは先日発表されたApple Studio Displayが大変気になって仕方ないのである。
発表直後は、
「Appleがまぁまぁ手の届く価格で純正ディスプレイだしたんだねー。Mac Studioとセットで買えってことかねー。オジサンにはどこか別の世界の話だよ」
くらい、斜に構えて発表やらSNSの反響を見守っていたのだが、
「A15チップ積んでるらしい」
「メモリとストレージも積んでいる」
「単体でSiri動くらしい」
ん？
何やら気になるではないか。
相変わらず別売のディスプレイスタンドは44,000円とApple価格だが笑笑
そんな気持ちがモヤモヤ湧き上がってくる中、あちこちでレビューが上がってくる。
「Windowsもフル機能は使えないが動作するらしい」
ん？マジか！
現在リモートワークでWindowsと兼用でDellの4Kモニタを使っているがこれと入れ替えてもいけるのではないか？
オジサンの悪い病気が再発したのである。
以上を踏まえ、オジサンがApple Studio Displayを購入する言い訳をいくつか考えて見た。
5Kモニターが欲しい
オジサンは今まで最高で4Kまでしか使ったことがない。27インチ4Kで大抵は事足りるのだが、PhotoshopやらIllustratorやらvscodeやらブラウザやらを開くとやや手狭になるのである。もう少しだけ横幅が広がると大助かりである。
ちなみに以前34インチのワイドモニタ使っていたが解像度によりDPIが低い関係で文字が読みにくく目が疲れるようになってしまったので手放してしまった。
4kモニタをフルHD程度に圧縮表示するとWindowsでもMac並みとは行かないまでも見やすくなるのである。
カラーが10ビット表示
世の中の大概のモニタが８ビット表示ある。よって表示されるカラーも限られている。
オジサンは最近写真撮影の趣味を始めた関係で色を再現性が高いモニタを欲し始めている。
EIZOのカラーエッジシリーズが有名なディスプレイであるがデザイン的にイマイチなところがある。プロ用ゆえの質実剛健さを優先し、デザインは二の次なのであろう。
Apple Studio Displayがデザインだけでなく、プロのクリエイターも満足させるスペックなのである。
Macとの親和性
これが純正ディスプレイの強みであるが、ケーブル一本でマックと接続すれば、輝度調整、スピーカーの音量等全てMacからコントロールできるのである。
そして何より注目すべきはカメラである。
オジサンのMacBook Airのカメラは720Pのお世辞にも高解像度とは言えないカメラである。
ところがApple Studio Displayに接続すること12MPの高解像度なWebカメラを使うことができるようになるのである。
Siriが動作するスマートディスプレイ
これがオジサンの１番の注目ポイントである。
A15チップを搭載し、メモリとストレージを備えている。ほとんどiPadである笑笑
使い方次第ではHome Pod的な使い方もできるのではないだろうか。
※どこぞのYouTuberがSiriを起動してリマインダーを登録するまでを行なっていたのでそこそこ使えそう。
Windowsも使用可能
自宅の仕事では基本Windowsで作業している。仮にApple Studio Displayを買ったとしてWindowsが動かなければwindowsに別途ディスプレイが必要となる。
だがしかし。
Apple Studio Displayにwindowsを繋いでも動作する報告をエンガジェの記事で見つけてしまった。
これでMacだろうがWindowsだろうがApple Studio Displayがあれば問題なしなのである。
オジサン、新たな沼の幕開けであった。
以上
オジサン、CSSで要素を横並びにする方法について色々と考察する
HTMLコーダー諸兄は要素の横並びをCSSでスタイリングする場合、どうされているだろうか。 フロート？フレックスボックス？グリッド？ 今年でIE11のサポートが終了し、よりモダンなCSSで案件対応ができるようになった2022年、改めて要素を横並びにする方法について考察してみたい。
ちなみにオジサンがHTMLコーダード新人の頃はtableタグを使う方法が主流であった。SEO対策でサマリー属性にキーワード仕込んだり、余白調整で透明gif画像を使ったりしていたのである。メルマガ等では最近まで使われていたようだ。閑話休題。
さて、以下のデザインカンプを見ていただきたい。
デザインカンプと呼べるかどうかは別として、このような３カラムのコンポーネントがあったとする。あなたならどのような方法を使うであろうか。
因みに技術選定をする場合、まずは自分の参画しているプロジェクトの仕様書またはコーディングガイドラインの対応OSやブラウザを確認し、どの手法で対応するか検討するのがセオリーである。
Webメディア等で良い方法が紹介されていたとしてもそれを鵜呑みにしてコピペするのは悪手である。
さて、オジサンがデザインカンプを確認し、パッと思いつくのは以下の方法である。
１）inline-blockを使用
２）floatを使用
３）flexboxを使用
４）Gridを使用
貴方が参画しているプロジェクトでIE11対応が含まれてるなら、「４）Gridを使用」は外すべきだろう。
IEでGridを使用する場合、ベンダープレフィックスを付与する必要があったり、行を指定する「grid-rows」が必要だったり一手間がかかる。 素直にflexboxでのレイアウトをお勧めする。
さらに古いブラウザやOS（例えばAndroid４！）の対応が含まれているのであればfloatもしくはinlile-blockを使ったレイアウトをお勧めする。 Android４のChromeならまだしも、標準ブラウザでflexboxを使うには色々と制約が大きく、工数に見合った結果を得るのは難しい。
貴方の参画しているプロジェクトが全て最新ブラウザ、最新OSで表示すればOKということであれば、ぜひGridを使ったレイアウトにチャレンジしてもらいたい。
前置きが長くなってしまったが、カンプのデザインを再現するにあたり、それぞれの手法について解説していこうと思う。
inline-blockを使う
一番簡単な方法としてはdisplay: inline-blockを使う方法である。インライン要素とブロック要素の性質を併せ持つインラインブロック要素はインライン要素と同じく内包する要素の幅と高さを初期値に持ち、ブロック要素と同じようにマージンを指定することが可能なディスプレイ属性である。
一行のみの簡易的なレイアウトであればこの方法が最も手軽である。パンくずリスト等で使われているのをよく見かける。
実装時の注意点としては並べる要素のHTMLタグをソース上で改行しないことである。改行してしまうと謎の余白ができてしまい、マージンで余白を完全にコントロールできない。ソースの可読性を考慮し、開業したい場合はタグ間にコメントを入れ、コメント内で改行することで余白の発生を防ぐことができる。
See the Pen Column Block -inline-block by Hiroyuki Ogino (@og_og) on CodePen.
floatを使う
フロートによるレイアウトはClearfixという画期的な発明をしてくれたおかげで爆発的に普及した。 flexboxの実装が各ブラウザで均一になるつい最近まで使われていた。
フロートレイアウトはある要素に対して後続の要素を右あるいは左にを回り込ませるようにして横並びにするテクニックである。
だが、最後尾の要素のフロートを解除しない場合親要素の高さが保てなくなったり、横並びにしたくない次の要素にも影響してしまう為、最後尾の要素直後にフロートを解除する必要がある。
当初はbrタグ等にクラス指定してフロート解除を行っていたが、ある時Clearfixと呼ばれる、CSSの擬似要素上でフロート解除する手法が発明され、ソース上でフロート解除用に無駄なタグを書く必要が無くなり、たちまちデファクトスタンダードになった。
因みに簡易的に親要素にoverflow: hiddenを指定する方法も存在するが、思わぬ表示崩れを引き起こす原因になりうるのでお勧めしない。
See the Pen Column Block float by Hiroyuki Ogino (@og_og) on CodePen.
flexboxを使う
flexboxは現在最もポピュラーな方法と言える。float時代よりもより直感的にコードを書けるようになり、さらに要素の均等並べや、反転も可能になった。
要素の幅のコントロールもwidthプロパティではなく、flexプロパティを使うこと自動計算してくれるようになり、実装がかなり楽になったのである。
また、gapプロパティを指定することで上下左右の余白のコントールが格段に楽になった。ただしこのgapプロパティは最新のOSやブラウザのみの限定的な対応になるので参画しているプロジェクトの対応ブラウザに古いブラウザが含まれている場合は要注意である。
See the Pen Column Block by Hiroyuki Ogino (@og_og) on CodePen.
gridを使う
Gridは最もモダンなレイアウト手法である。flexboxよリ更に直感的なスタイリングが可能である。
Gridの最も特徴的な事は親要素にて振る舞いを指定すれば横ならびにする要素にスタイリングが一切不要なことだ。これらをうまく使うことでレスポンシブ指定の際にメディアクエリで可変する指定を親要素のみに記述すれば良いので非常にメンテナブルでもある。
指定する単位もpxや%以外に、frという単位が使える。これは上記flexと同様直感的な割合で指定でき、例えば均等3カラムであれば、親要素のスタイルに、grid-template-columns: 1fr 1fr 1frと指定することでレイアウトすることが可能なのである。
Gridの便利な部分はこれだけではない。要素の順番や振る舞いを自在にコントロールも可能である。従来は複雑なネストでしか表現できなかったコーディングが親要素の指定のみで可能になるのである。
これだけで1本記事が書けてしまうくらい長くなってしまうので別途記事にまとめるつもりである。
See the Pen Column Block -Grid by Hiroyuki Ogino (@og_og) on CodePen.
まとめ
オジサンの参画しているプロジェクトでIE11サポート廃止が決定し、CSSのガイドラインを見直す機会があり改めて使われているプロパティの棚卸しをする段階で調べた内容を元にオジサンの備忘録として今回記事としてまとめてみた次第。
今回の記事がHTMLコーダーを目指して勉強している諸兄の参考になれば幸いである。
以上
オジサン、年の瀬にAppleからの荷物確認を装ったフィッシング詐欺に見事釣られる笑
以前にも数回この手のメッセージがSMSに飛んでくることはあった。
通常AppleはこんなメッセージをわざわざSMSにとばしてこないのは解っている。出荷連絡にしてもApple IDに登録されたメールアドレス宛にを連絡がくるのみである。ログイン時の認証にしても2 ファクタ認証で行われるので、SMSのようなセキュリティガバガバの方法で連絡してくるわけがないのである。
こんな馬鹿馬鹿しい方法に引っ掛かる人がいるものか、ご苦労様と笑って削除したものである。
だがしかし。
年末進行で心身ともに疲労困憊だったせいでメンタルが弱っていたせいなのか、魔がさしてしまったのか、うっかりメッセージのリンクを踏んでしまったばかりか、 あろうことにApple IDまで入力してしまったのである💦
はい。ここに馬鹿が一人いました笑笑
なんとかApple IDとパスワードを変更し現在は様子見中であるが、自戒と警告の意味であえて今回の恥を記録として記事に残そうと思った次第である。
引っかかってしまった原因(言い訳)
年がら年中通販で買い物しているとこういった荷物確認を装った詐欺メールは結構飛んできており、いつもなら黙って削除して完了なのだが、この時ばかりは丁度Apple Storeから荷物が届く日程と重なってしまっていたし、Amazonでプライム以外で買い物するとしょぼい配送業者の場合SMSで不在連絡をしてくることがある、などと諸条件が重なり、うっかりAppleからの連絡だとその時の精神状態では思い込んでしまったのである。正に魔がさした瞬間であった。
ちなみにAppleからの荷物はいつもヤマト運輸であり、オジサンはヤマト運輸のアカウントを友達登録しているので配送前にLINEで確認メッセージが飛んでくる。
あとはフィッシング詐欺の餌に見事釣られてしまい、SMSのリンクを開いてリンク先のAppleっぽいのだがどこかおかしなサイトに飛ばされ、お宅のApple IDは問題があるから入力してね、とメッセージが出てIDをまんまと入力させられてしまったのである。
不幸中の幸いは、パスワードを失念してしまい、パスワードの再設定を促すリンクをタップした際に動作しない、ダミーリンクであったためそこで気がつくことができた。
以上、今回の経緯をまとめるとざっとこんな感じである。
Apple IDやパスワードを変更する方法について
さて、ここからが問題である。 恐らく流出してしまったであろう、オジサンのApple IDをどうにかせねばならない。 今回以下のような対応を行った。
まずはApple IDを変更せねばならない。 以下のページに記載されている方法に従い変更手続きを行った。
またID変更に合わせてパスワードの変更も行った。
オジサンはMacやらIPadやら、iPhoneやら複数の端末を所持していたのでこれらの変更を行うのに小一時間かかってしまった💦
まとめ
このようにしょうもないSMSをうっかり信じてリンクを踏んでしまったおかげで本来なら不要な作業を強いられてしまったのであった。 今回の件を今後の教訓として肝に銘じることにする。
年末年始という季節柄、この手の詐欺メールがやたらくるのが常であるが充分に気をつけていきたいものである。
ちなみにAmazonを装った詐欺メールも飛んできた。
そんなドタバタの中、前にブログネタにしようと思ってネタ購入したものの、数ヶ月待ちの状態ですっかり購入したことすら忘れていたAppleからのブツが届いたのである。
皆様、くれぐれもこの手の詐欺メールにはお気をつけ下さいませ。
以上
キーボードに関して特殊な性癖をもつオジサンがSurface Pro7用にMicrosoftデザイナーコンパクトキーボードを購入する
オジサンは普段の業務ではリモートワークで使用する会社支給のWindows PCをSurface Pro7を使ってリモートして使用している。
そのSurface Pro7なのだが、キーボードとして購入したタイプカバーキーボードの使い心地がオジサンには全く合わず、正直ストレスになっていた。
オジサンは撫でるようにタイピングしたいのだが、タイプカバーキーボードはキータッチはかなり硬めで押し初めに力を入れないとかなりの確率でミスタイプしてしまう。
やはりオジサンはMacbook Airのキーボードが最高に好みであり、それ以外は基本受け付けないのである笑笑
また、キー配列に関してもこだわりが強く基本的にタイプカバーキーボードと同じ配列で無いとイライラする。Windowsの場合はCtrlキーの隣にFnキーが無いとダメ、みたいな感じである。
オジサンは理想の仕事用キーボードを追い求め、色々なキーボードを試した。
エレコムのメンブレンタイプの安物からRazerのゲーミングメカニカルキーボード、HHKBも試したがやはり決めてになるのはキー配列であった。
特にHHKBや小型特殊配列キーボードにみられる、Fnキーと組み合わせて十字キーを使うタイプ等は最悪であった。
またオジサンのキーボード沼たらしめているものは「テンキーレスかつノートPC、特にSurfaceシリーズと同等の配列とサイズ感」というかなり特殊な要求が原因なのは明らかであった。
だがしかし。
そんなワガママなオジサンが散々沼を這いまわってついに理想とも言えるキーボードを探し当てたのである。
今回紹介するMicrosoft製デザイナーコンパクトキーボードである。
色はグレイシアという白のようなライトグレーのような不思議な色合いのカラーを選択してみた。
先代のデザイナーキーボードに比べると全体的に角が丸くなり、やわらかい印象である。手に持った時に感触も悪くない。
やけに薄く、バッテリー駆動と思いきや、なんとボタン電池である。どのくらい持つのだろうか。
説明書によれば電源スイッチの横にスマホのSIMピンを挿すような穴があり、ここを挿すとカバーが開いて電池交換できるようである。
キー配列は最近のSurfaceに倣って、スペースキーの左右の[A][あ]それぞれのキーでIMEのONOFFができるようになっている。
右Altキーの隣には絵文字パレットを起動するキーがあり、この辺も今風な感じである。
肝心な打鍵間であるが、強すぎず弱すぎず絶妙な感じである。
Surfaceのタイプカバーキーボードは強く押し込まないと誤タイプしやすかったのでこれは中々良いのである。
これでストレスだったタイプカバーキーボードのストレスから解放され、HTMLコーディングも捗るというものである。
以上
