お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
投稿日:
開発::Webジャンル::調査Webサービス

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

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

Twitter

ログイン画面

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

tw1.jpg

ミュート設定

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

tw3.jpg

投稿画面

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

tw4.jpg

YouTube

コメント画面

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

yt1.jpg
yt2.jpg

通報モーダル

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

yt3.jpg
yt4.jpg

GitHub

Issueのコメント画面

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

gh3.jpg
gh4.jpg

一休

検索モーダル

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

ikyu1.jpg
ikyu2.jpg

じゃらん

検索画面

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

jara1.jpg
jara2.jpg

Amazon.co.jp

レビュー画面

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

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

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

あとがき

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

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

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

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

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

サービス名 保持期間 セッションキー
GitHub 15日 user_session
Cookpad 30日 access_token_global_v2
pixiv 30日 PHPSESSID
fantia 31日 _session_id
last.fm 1年 sessionid

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

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

投稿日:
Webサービス::その他ジャンル::アニメ

某所でポリコレ関係の話を見ていて知ったのだが、ネトフリのアニメ作品には独自の年齢制限がついている。例えば地上波放映されていたり、映画館で全年齢指定になっている作品でも、ネトフリでは年齢指定があるケースがある。以下はその一例だ。

恐らくこれは欧米から見た年齢制限なのかもしれないが、言わんとしていることはわからないでもない。これらの作品が全年齢向けかと言われれば、個人的にも疑問符が付くからだ。鬼滅の刃や、推しの子は殺人・流血シーンがあるし、天気の子もセクシャリティな表現がある。正直天気の子は表現が過激すぎるので18+でもいいと思う。鬼滅も子供に大人気の国民的アニメみたいな顔をしているが、どう考えても猟奇的すぎる。映画の無限列車編はPG12なので多少の配慮があるが、正直R15相当だと思っている。

最近のアニメは大人向けの作品が多く、アニメだからという理由で子供に見せてもいいみたいな風潮も感じるし、消費者や制作側が自制できていない状態な気もするので、配信側で年齢制限を付けることは割と適切だと思う。すずめの戸締りや、こち亀は全年齢でもいいと思うがだらしない表現があるのでよくないのかもしれない。逆にネトフリに年齢制限がない作品があるのかはやや疑問だが、特に調べる気はない。

Node.jsのスクリプトを適当に書き次のようなWorkflowsを記述することで実行できる。勿論Dockerイメージを作ってそこから立ち上げることもできるので好みの問題。直に呼べる分、取り回しは楽だと思う

name: hoge
description: hoge
inputs:
  GITHUB_TOKEN:
    description: 'Workflowsを実行するリポジトリのGITHUB_TOKEN'
    required: true
on:
  workflow_call:
runs:
  using: node20
  main: dist/index.js

inputs:outputs:を記述すれば入出力の引数も定義できる。

inputs.GITHUB_TOKENについて

これを書いておくとoctokitを使ってGitHubのAPIを叩けるようになる。普通は何かAPIを叩くはずなので書いておいた方が良い。

以下は一例。

const github = require('@actions/github');
const core = require('@actions/core');

async function run() {
    const token = core.getInput('GITHUB_TOKEN');
    const octokit = github.getOctokit(token);

    const { data: pullRequest } = await octokit.rest.pulls.get({
        owner: 'octokit',
        repo: 'rest.js',
        pull_number: 123,
        mediaType: {
          format: 'diff'
        }
    });

    console.log(pullRequest);
}

参考

2022/03/02の公式ニュースによると以下の通りあり、転送容量の上限が撤廃されていた。これまでアクセス増に伴う転送制限に過敏になっていたが、もうそこは考えなくてもいいようだ。これでこそ大容量ストレージが生かせるというものだ。

さくらのレンタルサーバを2022年2月15日以前にご契約されたお客さま※、さくらのレンタルサーバ リセール向けサービスおよびさくらのマネージドサーバをご契約のお客さまを対象に、転送量の無制限化を実施いたします。これにより、さくらのレンタルサーバ / マネージドサーバをご利用いただいている全てのお客さまの転送量が無制限となります。

因みに昔はファイルストレージ的な使い方をして詰まらせてしまい、コンテンツブーストで回避していたことが何度かあった。