2022-12-23

【css】clip-pathと仲良くなりたいwebデザイナーの話

こんにちは、ゆるふわwebデザイナーのなかむらです。弊社ではデザイナーがコーディングまで行うことがあるのですが、フロントエンドエンジニアさんのような知識があるわけでもないゆるふわデザイナー2人がclip-pathツールを使おうとしてドツボにハマった経験を活かし、表層だけを撫でるclip-pathの記事を執筆いたします。

clip-pathとは
メリット
落とし穴
- Safariと死ぬほど仲が悪い
落とし穴にはまらない使い方とポイント
- パターン1：clip-pathに直接数値を書いて切り抜く
- パターン2：svgで書いたパスをclip-pathに読み込んで切り抜く
  - パスのsvgの作り方
    - XDでのやり方
    - Illustratorでのやり方
まとめ

clip-pathとは

clip-path は CSS のプロパティで、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。

clip-path - CSS: カスケーディングスタイルシート | MDN

つまり、四角い画像をcssを使ってコード上で任意の形に切り抜ける、という便利なプロパティです。

メリット

ここで「画像の切り抜きなら先に切り抜いた画像を使えばいいんじゃ？」と思われるかもしれませんが、コード面でもユーザビリティ面でも色々とメリットがあります。

『clip-path』の使い方や活用シーンを解説【CSS】 | あびふり

中でも個人的には以下の３つが大きいと思っています。

画像の差し替えが簡単
PCとSPで画像を分ける必要がない（作業者の手間が減るし、サイトも軽くなってユーザーも見やすい）
後からでも簡単に形を変えることが可能

落とし穴

Safariと死ぬほど仲が悪い

めっちゃ便利な機能のはずなのに、とにかくSafariとの相性が悪い。

safariとSVgの相性最悪と思ってたけどやっぱりそうなんや。。。

しかも原因〈clipPath〉らしい。 https://t.co/vi6AVblcsw
— Yuki-Kanayama / spicato inc. (@spicato_kana) 2022年9月3日

要素の背景をクリップする方法

初めて clip-path を使ったので、残しておきます。Safariでは -webkit- をつけないといけない時があるみたいです。

How to use clip-path https://t.co/UfcnwxYR0o via @CodePen #webデザイン
— Pocoon (@ponpon1586) 2022年3月3日

↑こう言ってらっしゃるが、公開しているものはSafariでも問題なく表示されている。簡単な形なら許されるのかな…

この前clip-path使ったらSafariのバグがひどくて修正が大変だった https://t.co/ssPJgQIoYQ
— たふみ (@CreatorQsF) 2020年3月23日

みんな嘆いてる

落とし穴にはまらない使い方とポイント

clip-pathの２種類の使い方と、それぞれで落とし穴にはまらないためのポイントをご紹介します。

パターン1：clip-pathに直接数値を書いて切り抜く

比較的簡単な形（以下のジェネレーターで作成可能な形）ならこの方法が無難

ジェネレーター：Clippy — CSS clip-path maker

記述はこんな感じ

.hoge-bg{
       background: url(/img/bg-mv.png) ; //四角い画像
       background-size: 100px;
       background-position: center;
       clip-path: inset(8% 6.5% round 50vw 50vw 0 0); //切り抜く形
       -webkit-clip-path: inset(8% 6.5% round 50vw 50vw 0 0); //Safari用　絶対書く！！
       -moz-clip-path: inset(8% 6.5% round 50vw 50vw 0 0);
       width: 100%;
       height: 100%;
}

🌟ポイント

ベンダープレフィックス絶ッッッ対書く（6、7行目）

軽くググったところ、ベンダープレフィックス使えや、という情報が目に入ったので試したらできた。やったぜ。
— 渡部崇 (@watabe_tk4) 2021年2月12日

また、パターン１でなら表示できた、という報告も…。

svgの要素内でclip-path指定せずにcssでclip-path指定したらsafariでも無事表示できた。

safari君ほんま、、、
— じょう🐈コーダー (@like_33_cat) 2022年6月30日

パターン2：svgで書いたパスをclip-pathに読み込んで切り抜く

ふにゃふにゃしてたりパターン１のジェネレータで作れないような複雑な形の場合の方法

例：橋本環奈オフィシャルファンクラブ「橋本純情内科」

ざっくり言うと、

切り抜きたい形のsvgのパスを配置し、そのsvgを画像の方で読み込んで適用させて切り抜く

記述はこんな感じ

<div class="mv">
        <svg xmlns="http://www.w3.org/2000/svg" style="height: 0; width: 0;"> //切り抜きたい形のsvg
              <clipPath id="任意のID" clipPathUnits="objectBoundingBox">
                    <path d="M195 0.000610352C87.2582 0.270325 0 87.695 0 195.5V772H391V259V195.5V0H195.5H195V0.000610352Z" transform="translate(0.3 0.6) scale(0.003333, 0.00125)"></path>
              </clipPath>
        </svg>
        <svg class="例えばのクラス名" viewBox="0 0 500 800"> //画像を配置するためのsvg
              <image clip-path="url(#3行目で設定した任意のID)" width="100%" height="100%" preserveAspectRatio="xMidYMin slice" xlink:href="img/img-mv01.png" style="-ms-filter: blur(1.5px);
          filter: blur(1.5px);"></image>
        </svg>
</div>
    
<style>　//必要に応じて適宜スタイル当てる
        .mv {                
                .例えばのクラス名 {
                    height: 210vw;
                }
            }
</style>

🌟ポイント①

clipPathにclipPathUnits="objectBoundingBox"をつける

pathのサイズを0-1に正規化する

1.はそのままなのですが、2.のpathのサイズを正規化するというのが重要です。clipPathUnits="objectBoundingBox"をつけると、pathがviewBoxの範囲ではなく、0-1の範囲で描画されるようになります。

pathの項目一つ一つの数値をviewBoxの数値で割ることでも可能ではありますが、手っ取り早くtransformでscaleを指定しましょう。

scaleで指定する数値は、以下の計算で求めることができます。 1 / viewBoxの数値

transformでtranslate等が指定されていれば、その数値もviewBoxの数値で割る必要があります。

上記のコードの場合は、scaleに指定する数値は、

scale=1÷103.758=0.009637scale=1÷103.758=0.009637

transformの数値は、

transform=−13÷103.758=−0.125281transform=−13÷103.758=−0.125281

です。

切り抜く要素のサイズに合わせてSVGでclip-pathする - Qiita

上記のコードで言うと以下の部分です

4行目scale(0.003333, 0.00125)

7行目viewBox="0 0 500 800"

🌟ポイント②

8行目width="100%" height="100%"がないとsafariのみで画像自体が表示されなくなるので必須です

パスのsvgの作り方

切り抜きたい形はIllustratorやXDなどで作成したパスオブジェクトを使用することができます。

XDでのやり方

切り取りたいオブジェクトを右クリックして「svgコードのコピー」を選ぶ
コピーしてペーストすると必要な情報が得られる

Illustratorでのやり方

「別名で保存」でsvg保存する
SVGオプションの中の「SVGコード」を選択する
必要なソースコードを抜き取る

参考：IllustratorからhtmlにSVGアイコンを表示するまでの流れ - Qiita

まとめ

手計算が必要だったり、ちょっとSafariと相性の悪いclip-pathですが、使えるとコーディングの幅がグッと広がるclip-pathですのでお役に立てたら幸いです！

2022-12-20

AWSの費用予測を少しだけ解決した話

こんにちは。株式会社TRYTで開発業務丁稚奉公修行中のhollyroyal-teaと申します。紅茶好きのような名前ですが、紅茶よりコーヒーを愛する人です。

本日はクリスマス恒例のアドベントカレンダー用に記事を書き起こしてみました。

そんなクリスマスのお題ですが・・・

2022-12-19

【小ネタ】HSTS設定の削除

http

httpでアクセスしたのにhttpsへ強制的に接続されてしまうのは、HSTSが原因かもしれません。

HSTSとは

HSTSとは、WebサーバがHTTPヘッダの中で指定する項目の一つで、Webブラウザに対して以降は常にHTTPSによる通信を行うよう指示するもの。RFC 6797として標準化されている。

HSTSとは - 意味をわかりやすく - IT用語辞典 e-Words

なるほど…一生接続できないとということですね。
いや接続したいんだ！諦めない！という方は、以下の方法でHSTS設定の削除ができますのでぜひお試しください。

HSTS設定の削除方法（Chrome）

アドレスバーから「chrome://net-internals/#hsts」にアクセスする
Query HSTS/PKP domainにある「Domain:」のところにアクセスしたいドメインを入力してQueryボタンを押す（対象のドメインがHSTS設定になっているか確認できます）
（登録されていれば）Delete domain security policiesにある「Domain:」にHSTS設定を削除したいドメインを入力してDeleteボタンを押す
削除されているか再確認する（2と同じ手順です）
※もしまだ表示される場合はキャッシュかもしれません。キャッシュをクリア後にもう一度再確認をしてみてください

いつものことですが、こちらのブログより丁寧かつわかりやすく書かれている記事がありましたので、上記試してもうまくいかなかった場合や、他ブラウザでの解消方法についてはこちらをご覧ください。

laboradian.com

2022-12-09

S3のディレクトリ構造についての気づき

はじめまして、TRYT開発課エンジニアの安原です。

少し前にWEBページのホスティングの設定をするにあたって、少し躓いた点と気づきがありましたので、記事に残しておこうかなと思います。

やりたかったこと

静的なWEBページのホスティング

ホスティングの方法として、今回はCloudFrontを経由してS3にアップロードしてある静的ページ（HTML、CSS）にアクセスできるようAWS上で設定を行いました。

CloudFront側の設定では特定のURLパスにアクセスしてきた場合に、S3の資材を参照するようにしたかったため、大凡の設定は以下となります。

CloudFront
- オリジン：S3バケット
- ビヘイビア：lp/dr/*
S3
- lp/dr/index.html(etc..)
- WEBホスティング用の設定

設定後、試しにhttps://{ドメイン}/lp/drのURLアクセスしてみると空のファイルがダウンロードされてしまい、何故このような現象が起きるのか原因がわかりませんでした。

原因

調べてみると、コンソール上でS3にフォルダ(構造：lp/dr/)を作成し、その中に静的WEBページの資材をアップロードしたことが起因して発生した事象であることわかりました。

S3のマネジメントコンソール上の「フォルダの作成」から新規フォルダを作成するとS3内部では「新規フォルダ名/ 」というkeyの（空の）オブジェクトが1つ作られ、そのファイルをダウンロードしていたようです。

キー（フルパス名）	バリュー（ファイルの内容）
lp/dr/	(空)
lp/dr/index.html	index.htmlファイルの中身

解決策としてはディレクトリ構成を維持した状態でファイルをS3にアップロードすることで、空のオブジェクトは作られず、lp/dr/index.htmlファイルを無事に読み取ることができました。

気づき

原因の調査をしていく中で、S3の中身はKey-Value ストア型で「ディレクトリ」という概念自体が存在しない事について知りました。 S3の管理コンソール上でフォルダのように振る舞って見えるのは、list-objectなどの特定のアクションなどによってフォルダ内の直下要素をリストアップすることができ、これらの仕組みを利用して、概念が存在しない「フォルダ」のような振る舞いをしているとのことでした。

参考

2022-12-08

【小ネタ】実機で開発ツール使う

front-end

実機はiPhoneを指しています
ブラウザはsafariです
Macユーザー向けのお話になります

実機あるある

さっそくですが、こんなことありません？

iPhoneのsafariでサイト見たらレイアウトが想定していたものと違っていた
PCのエミュレートでは起きていないので原因が調べられない

一体何がどうなっているんだ…起きていることの詳細知りたい…
そんな時は、safariの開発ツールを使うと便利です。

safariの開発ツールの使い方

実機でも開発ツール使えるんです！本当にありがたい。
使い方はこんな感じです。

MacとiPhoneをケーブルで繋いでください
Macでsafariを開いて「開発」をクリック。さっき繋いだiPhoneのデバイス名が表示されカーソル合わせたらiPhoneのsafariで閲覧しているURLが表示されます。
開発ツールでみたいURLを選択してください。するとこんな感じで開発ツールが出てきますので、調べたいところを選んで何が起きているか調査できます。

このブログよりもはるかに丁寧かつ分かりやすく書かれている記事ありましたので、ちょっと何言ってるか分からないとか、上記試したけどできなかった方はこちらをご覧ください。 kakke.site

2022-12-07

Real Favicon Generatorを使ってファビコンを設定した時にハマったこと

front-end

ファビコンって

守備範囲広くて面倒ですよね。もはや当たり前ですが、ずーっと前はfavicon.icoを準備するだけでよかったのが、スマホの「ホーム画面に追加」に対応とか、Winの「ピン留め」に対応とかいろいろとしなきゃならないことが多いです。なので大きい画像を準備するだけでサクッとマルチデバイス対応してくれるReal Favicon Generatorを使って生成・設定しました。

指南してくれるサイトに沿って記述してアップ。順調にことは運び、あれよあれよとレビューも終わってステージング環境に反映され、便利ツールを作ってくださった方に一礼してタスク完了。全然面倒じゃない。本当に助かります。

一つ目にハマったこと

本番環境に反映されたのでふと見るとコンソールエラーが出てました。ファビコンで…。ヒィ？え？なんで？

コンソールエラーの原因はsite.webmanifestでした。上記ツールで生成した時に出力されるファイルの一つで、Chromeだとエラーが出ます。

ウェブアプリマニフェストは、ウェブアプリケーションについて、ウェブアプリをダウンロードしたり、ユーザーにネイティブアプリと同じように見せる（例えば、端末のホーム画面にインストールされ、ユーザーに素早いアクセスと豊かな操作性を提供するなどの）ために必要なの情報を JSON テキストファイルで提供します。 PWA のマニフェストには、その名前、作者、アイコン、バージョン、説明、および (他のものの中で特に) 必要なすべてのリソースのリストが含まれています。

https://developer.mozilla.org/ja/docs/Web/Manifest

解消するにはsite.webmanifestをリネームするとありましたので、その通りにリネームしました。

ここはsite.webmanifestの代わりにmanifest.jsonとしてもOKみたいなので、リネームしておきます。

https://zenn.dev/toshihide2000/articles/a41031f1003cf2

慌てて修正して、ローカルで確認。無事解消されてたので、するりとレビューしてもらってステージング環境に反映。

二つ目にハマったこと

やれやれと思ったのも束の間、またしてもコンソールエラー。もちろんファビコンで…。いや、もういいよ

今度はCROSで怒られました。原因は先ほどリネームしたファイルを読み込んでいるAndroid用のlinkタグでした。

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても use-credentials の値を使用する必要があります。

<link rel="manifest" href="/manifest.json" crossorigin="use-credentials">

ローカルでは確認できないので…は言い訳ですね。はい、確認不足です。

結局ヒューマンエラー

一つ目も二つ目も結局は実装者である私の確認漏れが原因でした。

サーバーに上がった時点で確認していれば無駄にバグを発生させることもなかったのに。そしてヒヤリとすることもなかったのに。

上記ジェネレーターを使ってファビコンを生成・設定される方は、ぜひこの2つも確認して実装されることをお勧めします。

参考

2022-10-13

MySQLでユーザーにTRUNCATE権限を付与する方法

MySQL

こんにちは、TRYT開発課の成阪です。

アプリケーションから利用するDBユーザーの権限追加作業をやった際のメモです。

方法

MySQLでは TRUNCATE 単体では権限が用意されておらず、DROP権限と相乗りの形で用意されているので、GRANT DROPを対象のユーザーに付与すればOKです。

GRANT DROP ON `hogedb`.`fuga_table` TO 'tryt-app-user'@'%';

DROP 権限は TRUNCATE TABLE のためにも必要です。 MySQL :: MySQL 5.6 リファレンスマニュアル :: 6.2.1 MySQL で提供される権限

補足

PostgreSQLでは TRUNCATE単体の権限が用意されているため以下の構文で付与できます。

GRANT TRUNCATE ON `hogedb`.`fuga_table` TO 'tryt-app-user'@'%';

「mysql grant truncate」で検索していてもPostgreSQLのページが引っかかったりするので注意です。