狛ログ

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 の概要

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

, ,

2023年2月27日月曜日

2023年オフィス狛の年賀状の制作秘話。


出遅れたオフィス狛 デザイン部のSatoです💦
毎年恒例(?)の年賀状の記事を出さないまま2月になってしまいました!
言い訳になってしまいますが、オフィス狛社員全員私含め2023年1月から2月にかけ色々とてんてこまいでした😭💦
遅れてしまいましたが、2023年もどうぞよろしくお願いいたします!

2月も終わりそうですが、デザイン部の年明け初めての記事ですので去年同様、今年の年賀状のおはなしをしようと思います。
↓去年の年賀状の記事はこちら


2023年の年賀状はこちら!

例年通り弊社サイトやSNSなどのアイコンなどで登場しているこまちゃんとここまちゃんのイラストです。
2023年の干支は卯(うさぎ)!ウサギといえば月でお餅つきをしているウサギ!
……ということでこまちゃんにはウサギさんとお餅つきにチャレンジしてもらいました!
小柄なここまちゃんに餅つきはちょっと危険かな?杵で潰れちゃいそう?と思ったので、添えるだけになりました。



そして、今年の年賀状のラフです。

個人的には②の鏡餅とウサギ耳こまちゃん&ここまちゃんが結構気に入っています。
ここまちゃんの( ´ ω ` )←顔が良いと思ったのですが、ウサギ分がたりなかったのかもですね。
③は宇宙猫のパロディです。背景はフリー素材の宇宙の写真です


そして、①を清書したものが今年の年賀状はになります

ラフの時点で丸い窓状にイラストを切り抜きすることは決めていたのですが、実際に切り抜きしてみると寂しく感じたので、どうにか装飾がつけられないかな?と考えてみて、お正月飾りとしてポピュラーな「しめ飾り」を入れてみました。
実は私、このお正月飾りが「しめ飾り」という名前だということを、今回年賀状イラストを描く際に初めて知りました!


もっと「少しでも重心がずれたらこまちゃんが転びそう!」と見る人もハラハラするような躍動感のあるイラストにしたかったのですが、イメージよりも50%躍動感オフされたようなイラストになってしまいました💦
今後は動きのある絵を練習せねばと思いました!

そのためには遠近含めたパース、構図練り、デッサン…etc色々練習が必要そうです!