お知らせ
現在サイトのリニューアル作業中のため、表示が崩れているページが存在することがあります。
2025/02/27 00:20
スマホでWebを見てるときにキーボードがUIにかぶって操作しづらくなることがあるので、いくつかのサイトでどうなっているか調べてみた。
去年の9月にAndroid Edgeで調べた内容なので、今とは事情が異なるケースもある。Android Chromeでは起きなかったケースもあったので、Edge特有の挙動と思われる。
ログイン画面
キーボードが入力欄やログインボタンにかぶる。
ミュート設定
入力欄が上にあるためかぶらない。
投稿画面
入力欄が上にあるためかぶらない。
YouTube
コメント画面
キーボードがボタンにかぶる。
通報モーダル
キーボードがボタンにかぶる。
GitHub
Issueのコメント画面
入力欄が丸ごとキーボードにかぶる。
一休
検索モーダル
宿泊予算の入力が丸っとかぶる。
じゃらん
検索画面
キーボードと被らないようにするためか入力UIをモーダルにして画面トップに出すように工夫されている。これなら大抵の端末やブラウザで対応できそうなので、よくできていると思う。
Amazon.co.jp
レビュー画面
入力状態になると若干のラグの後に画面下に余白ができ、入力状態が外れると同様のラグの後、画面下の余白が消えるという挙動をする。
割と凝ったJSで何かしらの計算を行い、かなり頑張って調整しているようだった。タイムラグがあるのはイベント発火もあるだろうが、キーボードの検出や画面サイズに応じた余白計算に時間がかかっているのもあるのだろう。
ここまで凝った実装をしているのは他のサイトでは見られず、Amazon.co.jp特有に見えた。なお、Amazon.comのほうは見ていない。
あとがき
この調査時点では、じゃらんとAmazon.co.jpを除き入力欄を画面の上部に配置するなどレイアウトで調整しているサイトが比較的多く、どうしてもボタンなどが隠れる傾向があるように思った。
じゃらんは強制的に画面上部に入力欄を出すようにし、Amazon.co.jpは気合でキーボードが隠れないように調整していて、腐心の跡が見られた。
なお、今回動画を作成するにあたり一部をぼかす必要があったため、やり方を調べ実践したのでAviUtlで動画の一部にモザイクをかけ、動かす方法という記事を作成し、その過程を残している。
本動画の作成過程では上手くモザイクをかけられなかったが、上記の記事を作っているときに上手く行くようになったので、本記事の動画はモザイクではなく、ぼかしとなっている。
2025/02/26 23:44
AviUtlを使って動画の一部にモザイクをかける方法。勿論シーンに応じてモザイクは動かす。
確認環境
| Env | Ver |
|---|---|
| AviUtl | 1.10 |
| 拡張編集(exedit) | 0.92 |
やり方
- AviUtlで動画を開く
- 設定→拡張編集の設定
- 適当なレイヤーを右クリックしてフィルタオブジェクトの追加→部分フィルタ
- 出てきたウィンドウ右上の[+]をクリック
- モザイクを選択
- モザイクにチェックを入れ、モザイクのサイズを適当に調整
- サイズと縦横比をいい感じに調整し、モザイクをドラッグして位置を調整
- 部分フィルタウィンドウでYボタンを押し、直線移動を選択
- フレームを進め、モザイクを動かしたくなった場所でPキーを押す
- モザイクを適当にドラッグする
- モザイクを動かしたいフレーム単位で同じ作業をひたすら繰り返す
補足説明
Pキーを押すことで中間点を作成でき、ここを区切りにしてオブジェクトを移動できるようになる。区切りはレイヤーに表示されているオブジェクトのバーの上に表示されているのでそこでわかる。
複数のモザイクをかける場合は別のレイヤーに同様の手順で部分フィルタオブジェクトを設置すればよい。中間点の作成や移動操作などは対象のオブジェクトを選択していないと機能しないので注意が必要。
あとがき
モーショントラッキング系のプラグインを使うと多少楽ができるが、今回は敢えてマニュアルで作業してみた。
謝辞
今回動画にモザイクをかける方法について調べた際に、以下のサイトを参考にさせて頂いた。
2025/02/25 21:43
意外とわかりやすいサイトが少なかったので収穫はあまりないがこんな感じ。消したらログアウトされるCookieとして調べた。
| サービス名 | 保持期間 | セッションキー |
|---|---|---|
| GitHub | 15日 | user_session |
| Cookpad | 30日 | access_token_global_v2 |
| pixiv | 30日 | PHPSESSID |
| fantia | 31日 | _session_id |
| ドリパス | 2ヶ月 | remember_user_token |
| last.fm | 1年 | sessionid |
Amazon.co.jpやヨドバシもしばらくアクセスしていないとログアウト食らった記憶があるので、何かしらのリミットはついてそうだが、さっと調べる程度の範疇ではわからなかった。
しかしGitHubはやたらログアウト食らうとと思ったらたった15日とは…。
ドリパスはDPSSIDがなければremember_user_tokenからセッションを生成し、DPSSIDとremember_user_tokenの両方がなければログアウト状態になるようだった。DPSSIDはExpiresがSessionとなっていたため、remember_user_tokenを削除してもブラウザを落とすまではログインを継続できる。
2025/02/17 01:13
世の中の人が鍵束をどのように運用しているのか全く知らないが。個人的な運用方法を書いていく。大まかにはカラビナがあると便利ということ。
運用の目的
鍵の運用について考える人は多分多くないと思うので、何故運用を意識するようになったからかの理由から書いてゆく。
鍵の紛失防止
元々私は鍵をポケットやカバンの中に入れて持ち歩いており、落としたり、置き忘れたりして紛失することが多かった。これを防止する目的で鍵の運用方式を考え始めた。
特に過去に石屋川から西三荘に勤務していた時に勤務先に鍵を置き忘れたことがあり、どうしようもなく家の近くのラブホテルに泊まったことは忘れられない思い出だ。
自転車の破損防止
私は自転車によく乗るためキーホルダーに家の鍵や自転車の鍵などをぶら下げていたのだが、この状態だと走行中にフレームに鍵がぶつかりフレームが傷つく問題があった。これは自転車は鍵を挿したまま走るため、鍵束にぶら下がっているものが走行時の揺れでフレームに当たり、フレームに傷が入るという寸法だ。
ただ傷つくだけならいいのだが、ここから塗装が剥げてきて腐食してくるので具合がよくなかった。
図にするとこんな感じで、こういう感じで走行中フレームにガシガシ当たるのだ。
鍵の曲がりの防止
前項と繋がるのだが、走行時に鍵が曲がることがあった。恐らくこれは走行中に鍵束の鍵がスポークに吸い込まれて、その時の衝撃で曲がったのだと思う。幸い鍵が回せないほどではなかったが、過去に賃貸の鍵交換に至ったこともあり、その時に対策しようと思った内容だ。
鍵束の鍵がスポークに吸い込まれるイメージはこんな感じ。
運用方式
ということがあり、鍵の運用をちゃんとすることにした。といってもこれらの事があったことから、いきなり決めたわけではなく、逐次運用を変えていって落ち着いてきたので記事にすることにした。
まず基本の運用としては以下の写真の通り。
これは鍵束に鍵を集めた上で、自転車の鍵はカラビナで外せるようにし、遊びのカラビナを一つ持たせておくことで鍵束をカバンにぶら下げて置けるようにしている。
これにより、自転車に乗っているときは自転車の鍵だけを自転車側に置いておき、鍵束そのものはカバンに付けておくことができるので自転車の破損防止や鍵の曲がりの防止に役立っている。
また、カバンにぶら下げているため、これが切れない限りなくす心配もない。ぶら下げているとじゃらじゃら五月蝿いのもあり、紛失にも比較的気づきやすい。
しかもこれだけではなく、副次的な効能もある。
私は過去にレンタサイクルの鍵を紛失したことがあるのだが、このようにカラビナがあれば借り物の鍵を付けておくことができるので紛失しづらくなる。
このことはがんばっていきまっしょいの聖地巡礼でも非常に重宝し、次の写真のように大量の鍵をぶら下げることができた。
このように一時的に借りている鍵の整理にも非常に便利だ。
あとがき
しかし世の中の人は家のカギと自転車のカギをどう管理してるのだろう。車だとじゃらじゃらぶら下げてるが自転車ではやらないだろうし、分離してると無くしやすいだろうから謎だ。
2025/02/17 00:27
経緯
私は現在リモートワークをしており、Webカメラをよく使う。しかしWebカメラの運用に難があった。
机を壁に貼り付けて使っており、机からモニタまでの距離が近いため、以下の写真のように壁にカメラを固定していたのだが、湿度の変化でテープや裏に貼ってある粘着剤が緩んでずり落ちてくることがよくあったのだ。
ずり落ちてきた時のはこんな感じ。
使おうとしたときにずり落ちてきているとカメラの焦点が定まらず、あまり使い物にならない。片手で抑えてみたり、何とか押し付けて張り付けて使ったりするのだが、割と限界があった。
因みに上の写真ではWebカメラの足に当たる部分の裏側に3Mのコマンドタブをつけて壁に貼り付けたうえで、マスキングテープを貼り付け、更に垂れ下がり防止用に上部側からもマスキングテープを伸ばしている。
全てのマスキングテープは剝離による脱落防止を目的に互い違いの二重に貼り付けていたのだが、脱落防止までは上手くいったものの剥離は上手くいかなかった。
そこでカメラがズレたり落ちたりしないようにする方法を新たに設計し、試してみることにした。
制作過程
思い立てば吉日ということで早速作ることにした。
このWebカメラはノートPCなどの画面に足を引っかけてぶら下げる作りであるため、足が引っかかる何かがあればいいと考え、紐のようなものを壁に固定し、その紐に引っ掛ければいいのではないかと考えた。
そこでユザワヤに行き、太めのナイロンベルトを手に入れてきた。中身を出してから撮ったのでイマイチな写真だ…。
そしてこれをホチキスで壁に止める。片側を止めたら一回Webカメラを通し、遊びを作った状態でもう片方も止めることで、ピッタリ合うようにした。
作ったもの
いい感じにWebカメラをはめ込める装置ができた。これであればテープではないので剥がれたり、ズレたりすることは減るのではなかろうか？
もちろん、布がヘタってきたり、ホチキスの針が抜けるケースはなくはないと思うが、頻度としてはこれまでよりウンと減るはずだ。
賃貸なのに壁に傷が入ってしまったが、ホチキスの針穴なので深く気にしないことにした。
今回ホチキスで止めることを思うかんだのは壁美人の存在によるところが大きい。壁美人を使ったことはないのだが、以前壁面収納を探していた時に見つけたのが記憶にあり、そこの発想から今回の器具の作成に至った感じだ。器具というのも大げさな内容だが…ｗ
あとがき
思い立ったら吉日と書いてある割に写真に写りこんでいるタペストリーが変わっているが、実は思い立ってからベルトを買いに行くまでに二日、ベルトを買って制作に着手するまでに四日掛かっているので、言うほどちゃちゃっと作ったわけではない。
どうも最近フットワークが重いので何とかしていきたいところだ。