狛ログ

2023年7月25日火曜日

iPhone(iOS16以降の端末)のブラウザでのinput[type="time"]のレイアウトをCSSで修正する。

 


こんにちは、オフィス狛 デザイン部のSatoです。



先日、モバイルで利用するWebシステムのHTMLを作成した際に、時間を入力する必要があるフォームが必要になりました。
そこで、input[type="time"]を使いました。

HTMLの作成後に、「iPhone端末で表示すると、時間入力欄(input[type="time"])の入力後の文字が上揃えになっているので、他のに入力欄と同じ縦中央揃えに修正してほしい」という報告をいただきました。
指摘いただいた箇所を私の方でもiPhone端末で確認すると、時間入力欄(input[type="time"])だけで入力後の文字の行揃えも中央揃えになっていて、他の入力欄に合わせる為に文字揃えも修正が必要になってきました。


そこで時間を入力するinputにclassをつけ、そのclassで余白をつけ行揃えを左に修正しました。
実機で修正ができていることを確認!これで解決!のはずが、
「iOS16以降の端末のブラウザでは不具合が修正されていません!」という報告をいただきとても困りました😢

私が修正確認に利用した端末のOSバージョンはiOS15でしたので、どうやらiOS16以降iPhone端末のブラウザではinputにclassをつけるだけでは修正が良い感じに反映されていないようです😢💦
非常にジミ〜な不具合ですが、解決に時間が掛かった為解決法を共有いたします。



修正には、「::-webkit-date-and-time-value」という疑似要素を使います。
これをinput[type="time"]につけてあげると、iOSで修正適用されなかった修正がうまく適用されます。
今回の場合は、下記のような記載になります👇

input[type="time"]::-webkit-date-and-time-value {
    padding-top: 10px;
    text-align: left !important;
}

「::-webkit-date-and-time-value」の擬似要素を利用する方法は、input[type="date"]にCSSが上手く反映されない場合でも使えるようです。
参考:https://developer.apple.com/forums/thread/691305
iOSのSafariだけ日付の入力欄のデザインが他のinputや他ブラウザと違って困った際は、是非お試しください!



デモを用意しましたので、良ければこちらもiOS16以降のiPhone端末で表示して確認してみてください👇

See the Pen iOS端末でのtype="time"の文字のレイアウトを他のinputと同じにする by sato (@officekoma_sato) on CodePen.

※端末固有の不具合のため、デベロッパーツールなどの開発ツールのモバイルモードで表示した場合は差異がわからないかと思います。
iOS16以降のiPhone端末のブラウザでお試しください!

【Laravel】GA4を使用して、Google Analyticsの値を取得する方法。


オフィス狛 技術部の mmm(むー)です。

突然ですが、Google Analytics を使用していますか?
弊社では、Laravel のプロジェクトにて、Google Analytics で取得した値を集計する処理があります。先日、Google Analytics の古いバージョンであるUA(Universal Analytics)から、GA4(Google Analytics 4)へ移行しましたので、その時の備忘録を残しておこうと思います。

※UA(Universal Analytics)は2023年7月1日にサービスが終了しました。
(参考:ユニバーサル アナリティクスについて

前提条件

Google Analytics 4 の設定が完了していること。

■ Laravel バージョン
$ php artisan -V
Laravel Framework 8.27.0

■ Comporser バージョン
$ composer --version 
Composer version 2.4.1 2022-08-20 11:44:50

google/analytics-data のインストール

google/analytics-data をインストールします。
composer require google/analytics-data

Google Analytics API を実行するためのコードを記載します。
use Google\Analytics\Data\V1beta\BetaAnalyticsDataClient;
use Google\Analytics\Data\V1beta\DateRange;
use Google\Analytics\Data\V1beta\Dimension;
use Google\Analytics\Data\V1beta\Metric;
use Google\Analytics\Data\V1beta\OrderBy;
use Google\Analytics\Data\V1beta\OrderBy\MetricOrderBy;


// GAコンソール画面にてサービスアカウントの認証情報を確認し、取得してください。
// ファイル名と格納場所は一例となりますので、ご自身の環境に合わせて値を修正してください。
$jsonPath = storage_path('app/analytics/service-account-credentials.json');

// 認証用のライブラリで getenv が使用されているため、putenv の使用が必須のようです。
putenv("GOOGLE_APPLICATION_CREDENTIALS=".$jsonPath);

// GAのコンソール画面にてプロパティIDの値を確認し、ご自身の環境に合わせて値を修正してください。
$propertyId = 12345;

$client = new BetaAnalyticsDataClient();

// Google Analytics API を実行します。(GA4)
$response = $client->runReport([
    'property' => "properties/{$propertyId}",
    // 取得期間
    'dateRanges' => [
            new DateRange([
                'start_date' => '2023-07-01',
                'end_date' => '2023-07-02',
            ])
    ],
    // ディメンション
    'dimensions' => [new Dimension(['name' => 'pagePath'])],
    // 指標
    'metrics' => [new Metric(['name' => 'screenPageViews'])],
    // ソート
    'orderBys' => [
        new OrderBy([
            'metric' => new MetricOrderBy(
                [
                    'metric_name' => 'screenPageViews'
                ]
            ),
            'desc' => true
        ])
    ],
]);

// 取得した値を処理します。例となりますので、具体的な処理については省略します。
foreach ($response->getRows() as $row) {
    // ディメンションの値
    foreach ($row->getDimensionValues() as $v) {
        $pagePath = $v->getValue();
    }

    // 指標の値
    foreach ($row->getMetricValues() as $v) {
        $screenPageViews = $v->getValue();
    }
}

■補足(コードについて)
service-account-credentials.json には以下のような値の設定が必要となります。ご自身の環境に合わせて値を設定してください。
// app/analytics/service-account-credentials.json
{
  "type": "service_account",
  "project_id": "testapi",
  "private_key_id": "...",
  "private_key": "...",
  "client_email": "...",
  "client_id": "1234",
  "auth_uri": "...",
  "token_uri": "...",
  "auth_provider_x509_cert_url": "...",
  "client_x509_cert_url": "..."
}

ディメンションと指標は、公式ページを参考にご自身が必要なものを設定してください。上記の例では、各ページごとのビューを取得しています。
(参考:API のディメンションと指標

■補足(エラーが発生した場合)
この修正をおこなっている時に遭遇したエラーについて、記載します。

1. Google Analytics Data API が無効になっているエラー
下記エラーが表示されている場合、Google Analytics Data API を使用したことがなく、無効になっていることが原因ですので、メッセージに記載されている URL にアクセスして API を有効にしてください。 (「..12345..」の部分は本来プロジェクトのIDとなります)
Google Analytics Data API has not been used in project ..12345.. before or it is disabled.
Enable it by visiting https://console.developers.google.com/apis/api/analyticsdata.googleapis.com/overview?project=..12345.. then retry.
If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.

2. bcmath がインストールされていないエラー
下記エラーが表示されている場合、bcmath が入っていないことが原因ですので、サーバーにてインストールを行なってください。(Apache を使用している場合、リロードも行なってください。)
Call to undefined function Google\Protobuf\Internal\bccomp()

■参考サイト
Google Analytics Data for PHP
google-cloud-php
Analytics Data API の概要

以上となります。
参考にして頂ければ幸いです。

, ,