Lycolog

10分程度で作れるお手軽レシピ

材料

上の写真では野菜にアイスプラント、葉玉ねぎ、ブラウンマッシュルームを使用している。

調理方法

1. 豚バラを一口サイズに切る
2. 野菜も一口サイズに切る
3. フライパンに適当に油をひく
   
4. 豚バラ肉をフライパンに敷く
   
5. ビーフンをフライパンに敷く
   
6. 更にその上に野菜を乗せる
7. 水を入れ中火にかけ、フライパンに蓋をして蒸し焼きにする。
   もやしなど水分量の多い野菜がある場合は水を減らしたほうが良い。水気が多すぎると麺が伸びる
8. 2分したらビーフンを裏返す
9. 1分したらフライパンの蓋を外し、ビーフンをほぐし、水で戻っていない場所をなくす
10. 水が残っていたら強火で飛ばす

最近思っているNext.jsを使った画面設計に関する考えを箇条書きで雑に殴り書きしていく。この記事は考えの垂れ流しなので深い説明はしない。AppRouterではなく、PageRouterの考え。

• TypeScriptで実装し、型が騙せるような実装は極力避け、コードによる戻り値の型指定は不具合の原因になることがあるため、可能な限り型推論に任せる
• SOLIDな設計を意識することで疎結合でテストしやすい設計になる
• Clean Archtectureを意識することでSOLIDのSを意識しやすくなる
  • 画面として考える場合、実装レイヤーとしてはAPIを呼ぶ以外何もしないAdapter、ビジネスロジックやイベントハンドリングの実処理などを行うController、画面要素を配置しただけのView、画面状態を保持するState、それらをつなぎ合わせるUsecaseが、Usecaseを置くだけのPage（Next.jsのpageコンポーネントに埋め込むコンポーネント）、SSGやSSRをする場合のServer Side Controllerがあるとよいと考えている。大まかには下図のような感じで考えていて、過去の実務でもこれに相当するものを作ったことがある。
    
  • ただこれはModelに相当するものがなく、ビジネスロジックの共通化に課題が出てくるのと、ControllerがFatになりすぎると考えており、そこが課題になると考えている。
• テストが容易なコードは必然的に疎結合になる
• 疎結合にする場合、命名を抽象的にしておくと処理の入れ替えが容易になる（命名が具象、つまり実装の詳細に依存しないため）
• 疎結合にするとパーツが増えるので認知負荷が上がる
• 疎結合でかつ、命名が抽象化されている場合、仕様を知らない人にとっては実際の処理内容を推測しづらくなる
  • つまりこれは属人性が増えると考える
• 例外についてはErrorクラスを継承し、カスタム例外を作成して、用途に応じたハンドリングができるようにする
  • 原則として処理を止める場合にのみ用いるべきで、続行する場合には使わない
  • 例外は原則としてスローして、カスタムエラーは特定の階層でフィルタしてハンドリング、全てすり抜けてきたものはルート処理でキャッチしてハンドリングすることで、取りこぼしをゼロにする。例外の握り潰しは原則行わない
    • 基本的にすべてロギングする
  • 処理を継続するものについては例外とせず、ワーニング用の処理フローを作成し、それに則って行う（例えば入力バリデーションはワーニング）

スマホでWebを見てるときにキーボードがUIにかぶって操作しづらくなることがあるので、いくつかのサイトでどうなっているか調べてみた。

去年の9月にAndroid Edgeで調べた内容なので、今とは事情が異なるケースもある。Android Chromeでは起きなかったケースもあったので、Edge特有の挙動と思われる。

• Twitter
  • ログイン画面
  • ミュート設定
  • 投稿画面
• YouTube
  • コメント画面
  • 通報モーダル
• GitHub
  • Issueのコメント画面
• 一休
  • 検索モーダル
• じゃらん
  • 検索画面
• Amazon.co.jp
  • レビュー画面
• あとがき

Twitter

ログイン画面

キーボードが入力欄やログインボタンにかぶる。

ミュート設定

入力欄が上にあるためかぶらない。

投稿画面

入力欄が上にあるためかぶらない。

YouTube

コメント画面

キーボードがボタンにかぶる。

通報モーダル

キーボードがボタンにかぶる。

GitHub

Issueのコメント画面

入力欄が丸ごとキーボードにかぶる。

一休

検索モーダル

宿泊予算の入力が丸っとかぶる。

じゃらん

検索画面

キーボードと被らないようにするためか入力UIをモーダルにして画面トップに出すように工夫されている。これなら大抵の端末やブラウザで対応できそうなので、よくできていると思う。

Amazon.co.jp

レビュー画面

入力状態になると若干のラグの後に画面下に余白ができ、入力状態が外れると同様のラグの後、画面下の余白が消えるという挙動をする。

割と凝ったJSで何かしらの計算を行い、かなり頑張って調整しているようだった。タイムラグがあるのはイベント発火もあるだろうが、キーボードの検出や画面サイズに応じた余白計算に時間がかかっているのもあるのだろう。

ここまで凝った実装をしているのは他のサイトでは見られず、Amazon.co.jp特有に見えた。なお、Amazon.comのほうは見ていない。

あとがき

この調査時点では、じゃらんとAmazon.co.jpを除き入力欄を画面の上部に配置するなどレイアウトで調整しているサイトが比較的多く、どうしてもボタンなどが隠れる傾向があるように思った。

じゃらんは強制的に画面上部に入力欄を出すようにし、Amazon.co.jpは気合でキーボードが隠れないように調整していて、腐心の跡が見られた。

なお、今回動画を作成するにあたり一部をぼかす必要があったため、やり方を調べ実践したのでAviUtlで動画の一部にモザイクをかけ、動かす方法という記事を作成し、その過程を残している。

本動画の作成過程では上手くモザイクをかけられなかったが、上記の記事を作っているときに上手く行くようになったので、本記事の動画はモザイクではなく、ぼかしとなっている。

AviUtlを使って動画の一部にモザイクをかける方法。勿論シーンに応じてモザイクは動かす。

確認環境

やり方

1. AviUtlで動画を開く
2. 設定→拡張編集の設定
3. 適当なレイヤーを右クリックしてフィルタオブジェクトの追加→部分フィルタ
   
4. 出てきたウィンドウ右上の[+]をクリック
   
5. モザイクを選択
   
6. モザイクにチェックを入れ、モザイクのサイズを適当に調整
   
7. サイズと縦横比をいい感じに調整し、モザイクをドラッグして位置を調整
   
8. 部分フィルタウィンドウでYボタンを押し、直線移動を選択
   
9. フレームを進め、モザイクを動かしたくなった場所でPキーを押す
   
10. モザイクを適当にドラッグする
    
11. モザイクを動かしたいフレーム単位で同じ作業をひたすら繰り返す
    

補足説明

Pキーを押すことで中間点を作成でき、ここを区切りにしてオブジェクトを移動できるようになる。区切りはレイヤーに表示されているオブジェクトのバーの上に表示されているのでそこでわかる。

複数のモザイクをかける場合は別のレイヤーに同様の手順で部分フィルタオブジェクトを設置すればよい。中間点の作成や移動操作などは対象のオブジェクトを選択していないと機能しないので注意が必要。

あとがき

モーショントラッキング系のプラグインを使うと多少楽ができるが、今回は敢えてマニュアルで作業してみた。

謝辞

今回動画にモザイクをかける方法について調べた際に、以下のサイトを参考にさせて頂いた。

• 【AviUtl】モザイクで顔を隠す方法【部分フィルタ】 | AviUtlの易しい使い方
• 【AviUtl】中間点とは？簡単な使い方と各画面の見方 | AviUtlの易しい使い方

意外とわかりやすいサイトが少なかったので収穫はあまりないがこんな感じ。消したらログアウトされるCookieとして調べた。

Amazon.co.jpやヨドバシもしばらくアクセスしていないとログアウト食らった記憶があるので、何かしらのリミットはついてそうだが、さっと調べる程度の範疇ではわからなかった。

しかしGitHubはやたらログアウト食らうとと思ったらたった15日とは…。

ドリパスはDPSSIDがなければremember_user_tokenからセッションを生成し、DPSSIDとremember_user_tokenの両方がなければログアウト状態になるようだった。DPSSIDはExpiresがSessionとなっていたため、remember_user_tokenを削除してもブラウザを落とすまではログインを継続できる。