## はじめに
サイトの監視アラート通知をメールで受け取ると埋もれがちなので、普段使っているチャットツールで受け取りたいということがあります。

今回は、[さくらクラウドのシンプル監視](https://cloud.sakura.ad.jp/products/simple-monitor/)のアラート通知をGoogle Chatで受け取る方法を紹介します。

シンプル監視はSlackのみを公式にサポートしています。弊社ではGoogle Chatをメインで利用しているため、SendGridとGoogle Apps Scriptを活用し、Google Chatにアラート通知を送信する仕組みを構築しました。この方法であれば、追加費用をかけずに、柔軟なカスタマイズが可能です。

以下、具体的な設定方法を解説します。

## 概要 
![Overview](https://cont.sterfield.co.jp/uploads/overview_f0a47bc2aa.png) 

図のとおりシンプル監視からのメール通知をSendGridで受信して、そこからGoogle App Sriptを経由してGoogle Chatに書き込む仕組みです。

### ポイント
- シンプル監視のWebhook通知は、ZapierやIFTTT経由でGoogle Chatに通知できますが、2024年12月現在は有料プランが必要なため、今回は無料のメール通知を利用します。
- SendGridのInbound Email Parse Webhook自体は無料で利用可能ですが、SendGrid自体のアカウント開設には審査が必要となっています。また、Inbound Email Parse Webhookを利用するためには、SendGrid上でドメイン認証を行ったドメインのメールアドレスのみ設定可能です。詳細は[SendGridのヘルプ](https://sendgrid.kke.co.jp/docs/User_Manual_JP/Settings/parse.html)を参照してください。
- Google Chatで外部からWebhookを受け取る機能は無料版では使えません。有料のGoogle Workspaceを契約している必要があります。

## Google ChatのWebhook設定
スペースの設定画面でアプリと統合メニューを開いた画面で下の方にあるWebhookを追加からWebhookを追加してリンクをコピーしておきます。

![Google Chat](https://cont.sterfield.co.jp/uploads/google_chat_29b557565c.png) 

## Google App Scriptの設定
コピーしたリンクを使って下記のスクリプトを作成して外部から起動できるようにデプロイしてください。シンプル監視から送られるメールのエンコードはISO-2022-JP(いわゆるJISコード)のため、文字コード変換が必要です。

```js
function doPost(e) {
  const { text } = e.parameter;

  // Google ChatのWebhook URL (事前にコピーしたURLを貼り付ける)
  const webhookurl = 'https://chat.googleapis.com/v1/spaces/**********/messages?key=**********';

  // JISコードで送信されてくるメールデータを、Google Chatで扱えるUTF-8に変換します。
  const data = {
    'text': Utilities.newBlob(text).getDataAsString("JIS")
  };

  const options = {
    'method': 'post',
    'headers': {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload': JSON.stringify(data)
  };
  UrlFetchApp.fetch(webhookurl, options);
}
```

デプロイが完了したらウェブアプリのURLをコピーしおきます。

![deploy](https://cont.sterfield.co.jp/uploads/deploy_d3a68796ab.png) 

## SendGridの設定
SendGridにログインして、Setting > Inbound Parseを開いてAdd & Hostボタンを押して、下記の設定値を入力してWebhook設定を追加します。

Receiving Domain:

シンプル監視からのメール通知を受け取るためのメールのドメイン

Destination URL:

前項でコピーしておいたウェブアプリのURL

![sendgrid](https://cont.sterfield.co.jp/uploads/sendgrid_1a2731c45b.png) 

## シンプル監視の設定
さくらのクラウドの設定画面でオプション > メールアドレスを開いて、前項で設定したドメインのメールアドレスでアラートの通知を受け取るように設定します。

![simple](https://cont.sterfield.co.jp/uploads/simple_b79b0c893e.png) 

アラートの通知設定はデフォルトのまま（通知方法：メール、メールタイプ：テキスト）にしておきます。

## アラート通知の例
シンプル監視でアラートが発生した際にGoogle Chatに下記の通知が表示されたら設定成功です。

![example](https://cont.sterfield.co.jp/uploads/example_fe539f6c67.png) 

## まとめ
以前はIFTTTの有料プランを利用して通知の自動化を行っていましたが、今回構築した新しい仕組みによって、運用コストの削減が実現できました。

今後は、Google App Scriptのコードをカスタマイズしてサイトごとに通知先スペースをわけて複数サイトのアラート通知をうまく受け取れる仕組みの構築を進めてもっと活用していこうと思います。皆様も是非参考にしてみてください。

## 参考リンク
- [お知らせをWebhookでGoogle Chatに通知してみよう &ndash; Shopらんサポートサイト](https://shoprun.support-dreamarts.com/hc/ja/articles/17847405156377-%E3%81%8A%E7%9F%A5%E3%82%89%E3%81%9B%E3%82%92Webhook%E3%81%A7Google-Chat%E3%81%AB%E9%80%9A%E7%9F%A5%E3%81%97%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86)
- [ISO-2022-JP（7bit JIS）のeml形式データをApps Scriptで解読する #JavaScript - Qiita](https://qiita.com/takatama/items/696557f4eb51d4e50b8f)

3-4-2line-rgb-blackback-solidcolor.png

さくらのシンプル監視のアラートをGoogle Chatで受け取る方法

## はじめに
UXデザインを改善しようとする際、どこから手をつければ良いか迷うことがあります。UXデザインを向上させるためには、アフォーダンス(Affordances)、シグニファイア(Signifiers)、フィードバック(Feedback)の3つの要素に分けて改善方法を検討すると、わかりやすくなります。これら3つの要素に分けて考えることで、UX改善に効果的にアプローチできることを学びましたので、それぞれの段階についてまとめてみました。

### アフォーダンス(Affordances)とは
デザイン用語としてのアフォーダンスとは、人と物との関係のことです。Webデザインの例では、クリックやスクロール、スワイプなどの操作が挙げられます。
元々の心理学の用語では、動物と物の間に存在する行為の関係性を表す言葉で、行為の選択肢の一つという意味合いが強いですが、デザインの領域では、**要素に対する行為**（**操作**）という意味で使われることが多いようです。
アフォーダンスを適切にデザインすることで、ユーザーの利用可能性を広げるだけでなく、間違った操作を予防する効果も期待できます。

### シグニファイア(Signifires)とは
シグニファイアとは、人と物との関係をユーザーに伝達するもので、わかりやすく言い換えると、**行為(操作)へ誘導するためのヒント**のことです。Webデザインの例では、クリックすることで意図した画面へ移動できるようにナビゲーションを工夫することや、スワイプが可能であることをわかりやすくすることが挙げられます。
シグニファイアを適切にデザインすることで、ユーザーが目的を達成するまでストレスなく到達できます。

### フィードバック(Feedback)とは
フィードバックとは、操作やアクションの後に即時の手応えや反応のことです。Webデザインの例では、クリックしたときのボタンの色の変化や、コンテンツの読み込み中や処理中のプログレスバーの表示などが挙げられます。
フィードバックを適切にデザインすることで、ユーザーに正しい操作をしていることを確信させ、安心して操作することをサポートできます。

## アフォーダンスを改善する方法
アフォーダンスには明示的なものと暗黙的なものがあり、特にWebデザイン領域では暗黙的なアフォーダンスが多く使われる傾向があります。例えば、画像をクリックすると拡大して表示されたり、左にスライドさせると削除される、一覧の一番上でさらに下にスクロール操作をすると最新情報に更新されるといった操作は、明確にUIとして示されず、ユーザーの経験によって成り立っています。

暗黙的なアフォーダンスはユーザーの直感に頼るため、学習コストが低い一方で、新しいユーザーには理解しづらい場合があります。逆に、明示的なアフォーダンスは誰にでも理解しやすいですが、デザインが煩雑になる可能性があります。したがって、広く一般化されたアフォーダンスではない限り、積極的に隠さない明示的なアフォーダンスを選択することが最善と言えます。

アフォーダンスを改善するためには、以下の点に注意することが重要です。
- **意図せず隠すアフォーダンスを避ける**: ユーザーが直感的に理解できるように、明示的なアフォーダンスを優先する。
- **デザインシステムの活用**: 既存のデザインシステムを利用するだけでなく、オリジナルのデザインシステムを構築する場合も、一般的なUIコンポーネントやパターンを参考にする。これにより、一貫性のあるデザインを実現しやすくなります。
- **多様な視点からの参考**: [マテリアルデザイン](https://m3.material.io/)や[Appleのデザインシステム](https://developer.apple.com/jp/design/)に加え、[Bootstrap](https://getbootstrap.jp/)や[Ant Design](https://ant.design/)などの他のデザインフレームワークも参考にする。これらのフレームワークから得られるベストプラクティスを取り入れることで、オリジナルのデザインシステムを強化できます。
- **ユーザーテストの実施**: オリジナルのデザインシステムを構築する際には、ユーザーテストを実施してフィードバックを収集し、アフォーダンスの改善に役立てる。

これらの方法を取り入れることで、アフォーダンスの質を向上させ、ユーザーが直感的に操作を理解できます。

## シグニファイアを改善する方法
シグニファイアは、ユーザーに対して行為(操作)を誘導するためのヒントを提供します。例えば、ハンバーガーメニューのアイコンがナビゲーションを開くためのボタンを意味していたり、虫眼鏡のアイコンがキーワード検索を開始するためのボタンを意味しているなど、アイコン自体がシグニファイアの役割を果たしている場面をよく見かけます。

シグニファイアを改善するためには、以下の点に注意することが重要です：
- **複数の手段を組み合わせる**: 一つの記号に頼らず、テキスト、コントラスト、色、シンボル、テクスチャなどを適切に組み合わせることで、ユーザーに対するヒントを強化します。
- **文化的背景を考慮する**: アイコンやシンボルが異なる文化や世代に対してどのように解釈されるかを考慮し、普遍的に理解されるデザインを目指します。例えば、フロッピーディスクを知らない世代には保存の意味が伝わりにくい、郵便マークも各国でシンボルが異なることがあるなどを考慮する必要があります。
- **補足情報を提供する**: アイコンだけでなく、テキストやツールチップを併用して意味を明確にすることで、ユーザーが直感的に操作を理解できるようにします。
- **一貫性を保つ**: 同じ意味を持つシグニファイアを一貫して使用することで、ユーザーの混乱を防ぎます。

これらの方法を取り入れることで、シグニファイアの効果を最大化し、ユーザーが直感的に操作を理解できます。

## フィードバックを改善する方法
Webにおいてフィードバックは、色の変化、画面の遷移、プログレスバー、メッセージの表示などで表現されます。適切なフィードバックは、ユーザーが操作の結果を理解しやすくし、次のアクションを促す役割を果たします。

例えば、ボタンをクリックした後に何も変化がないと、ユーザーはクリックできなかったと判断して操作を中断してしまいます。また、入力フィールドで間違った入力をしても何も変化がなければ、ユーザーは次のアクションを起こしづらくなります。

フィードバックを改善するためには、以下の点に注意することが重要です。
- **即時性**: ユーザーのアクションに対して即時にフィードバックを提供する。例えば、ボタンをクリックした際に色が変わる、プログレスバーが表示されるなど。
- **視覚的な変化**: 色の変化やアニメーションを利用して、ユーザーに操作が成功したことを視覚的に伝える。CSSの`:active`や`:focus`擬似クラスを利用すると簡単に実装できます。
- **明確なメッセージ**: エラーメッセージや成功メッセージを表示して、ユーザーが次に何をすべきかを明確に伝える。
- **ユーザーストーリーに沿った設計**: ユーザーの行動パターンを理解し、それに合わせたフィードバックを設計する。例えば、フォームの入力エラーをリアルタイムで表示するなど。

これらの方法を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

## まとめ
UXデザインを向上させるためには、アフォーダンス、シグニファイア、フィードバックの3つの要素を適切にデザインすることが重要です。

- アフォーダンスは、ユーザーが直感的に操作を理解できるようにするための要素です。明示的なアフォーダンスを優先し、意図せず隠すアフォーダンスを避けることが重要です。既存のデザインシステムを活用するだけでなく、オリジナルのデザインシステムを構築する際には、一般的なUIコンポーネントやパターンを参考にし、ユーザーテストを実施してフィードバックを収集することが効果的です。
- シグニファイアは、ユーザーに対して行為を誘導するためのヒントを提供します。複数の手段を組み合わせ、文化的背景を考慮し、補足情報を提供することで、ユーザーが直感的に操作を理解できるようにします。また、一貫性を保つことで、ユーザーの混乱を防ぎます。
- フィードバックは、ユーザーの操作に対する即時の反応を提供し、次のアクションを促す役割を果たします。即時性、視覚的な変化、明確なメッセージ、ユーザーストーリーに沿った設計を取り入れることで、フィードバックの質を向上させ、ユーザーが安心して操作できます。

これらの要素を総合的に改善することで、ユーザーエクスペリエンスを向上させ、ユーザーが直感的に操作を理解し、ストレスなく目的を達成できます。

UXを改善したいけど、どこから直していけば良いか迷った場合は、ぜひ参考にしてみてください。

## 参考にさせていただいたサイト

- [3 Key Elements for Great UX Design: Affordances, Signifiers, and Feedback](https://careerfoundry.com/en/blog/ux-design/affordances-signifiers-feedback/)


image1.webp

UXに大事なアフォーダンス(Affordances)・シグニファイア(Signifires)・フィードバック(Feedback) とそれぞれの改善について

デザインワークに使うツールといえば、Adobe社のPhotoshopやIllustratorが最も有名です。デザイナーの求人情報を見ると、募集要項に「PhotoshopやIllustratorの使用スキル」が必須の条件として記載されており、クリエイティブワークを行う上で必要不可欠なツールと言えます。

しかし近年、Webデザイナーの求人欄には「Figmaの開発経験者歓迎」など、Figmaを推奨する記述を見かけるようになり、業界の必須ツールも変わりつつあることが感じられます。Figmaと同様の機能や役割を持つツールとしてAdobeのXDもありましたが、2023年に単体での販売が終了したため、Figmaの存在感がますます強まっています。
  
## Figmaとは
  
FigmaはUIやUXデザインに適したプロトタイプデザインツールです。WebサイトやWebアプリを作成する際、ボタンを押したときの画面遷移やメニューの開閉など、複雑な動きが求められます。また、切り替え時のフェードインやアニメーションなども演出としてよく使用されます。

通常、こういったアクションを表現するにはプログラムを組む必要がありますが、Figmaではグラフィック作成の段階からこれらの動きを再現できます。さらに、データを共有する機能があるため、関係者と完成イメージを共有しやすいのも利点です。

Figmaはブラウザ上で動作するため、アプリのインストールが不要で、インターネットに接続されたパソコンさえあれば使用できます。このため、環境に依存せずデザイン作業を進められるというメリットもあります。

## 実際にFigmaを使ってみた感想


私は長年Webデザイナーとして、主にIllustratorでデザインし、写真や画像の加工はPhotoshopで行ってきました。Figmaには業務で触れたことがある程度だったため、今回はその違いを確認するために実際にFigmaを使用してみました。

全体的な使用感としては、ツールの配置が異なるため少し戸惑う部分もありましたが、Illustratorに近い印象でした。Illustratorが使える人であれば、比較的簡単に慣れるでしょう。しかし、いくつかIllustratorと明確に異なる点がありましたので、挙げていきます。

### デフォルトで紙媒体を作成する機能が無い

FigmaはWebサイトやアプリなどのデジタルメディアのコンテンツをデザインするためのツールであるため、印刷物を作る機能がありません。そのため、紙媒体のデザインをする場合、フレーム（アートボード）のサイズを紙の規格のサイズで指定する、余白設定やトンボ（裁断時の目印）の設定をデザイナーが意図的に追加する手間が生じます。

ただし、プラグインを利用することで、紙媒体の設定も可能なようです。しかし、色指定に関しては、CMYKモードをIllustratorほど詳細には設定できません。そのため高品質が求められる場合はIllustratorのほうが適しています。Figmaはインターネット接続が可能であればどのパソコンでも編集が可能なため、頻繁にテキストを編集し、そこまで高品質が要求されない場合の物はFigmaの方が便利です。

### パスファインダー機能について

パスファインダーとは、複数の図形を組み合わせたり、重なり部分を切り抜いたりする機能で、デザイン作成によく使用されます。
結論から言うと、収納されている場所が違うだけでIllustratorと、ほぼ同じことができます。

 ![](https://cont.sterfield.co.jp/uploads/img_A_1_1378b85707.png) 

しかし、Illustratoreのパスファインダーにある「分割」に相当する機能がありません。

 ![](https://cont.sterfield.co.jp/uploads/img_A_2_45184b55ef.png) 

そのため、図形を複数のオブジェクトとして使いたい場合は、コピーを用意してそれぞれ切り抜きの設定を変えて作成する必要があり、少し手間がかかります。


### ペンツールでのパス描画

IllustratorやFigmaは基本的にベジェ曲線を制御して図形を描きます。そこでペンツールを使って図形を描くことを試してみました。 今回はフリー素材のサクランボのイラストを下絵にしてペンツールで描いてみました。

先ずはillutratorで描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_1_0c343f8462.png) 

ペンツールで先ずは始点となる頂点を選択しクリックし、ドラックをすると線が曲線になります。そして次の頂点を選択して下絵の輪郭をなぞります。
このようにして3つの図形を描きます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_2_873e4b36c9.png) 

茎の部分は緑色を指定して、実の部分にグラデーションを指定して色付けすます。最後に白い光沢描いて仕上げます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_3_bf1463921d.png) 

同様の作業をFigmaでも試してみました。

ペンツールが収納されている位置は違いますが、Illustratorで行う作業と同じで特に違和感なく作業ができます。しかし、2つ目のオブジェクトを描いた時点でIllustratorとの違いに気が付きました。

 ![](https://cont.sterfield.co.jp/uploads/img_B_4_3ad2f76b6c.png) 

普通に描いていたのですが、この時点で2つのパスで1つのオブジェクトになる扱いでIllsutratorで言うところの複合パスになっていました。そのためこの状態でグラデーションを設定すると、オブジェクト全体にグラデーションが描画されてしまいます。

 ![](https://cont.sterfield.co.jp/uploads/img_B_5_c1a0890346.png) 


どうやら、ペンツールを使用する場合、 ペンツールアイコンの上に表示される×のアイコンをクリックしない限り、描いた物は1つのオブジェクトとして扱われるようです。

 ![](https://cont.sterfield.co.jp/uploads/img_B_6_bf0edd4ef9.png) 


また、一度描いた図形を編集したい場合、Illsutratorなら頂点を選択すれば編集できましたが、Figmaの場合、描いたオブジェクトを選択してエンターキーを押して 編集モードにしてから編集するようです。
 ![](https://cont.sterfield.co.jp/uploads/img_B_7_ce745450f3.png) 


これらのことを知らないと、意図しない複合パスができてしまったり、編集したくてもできないという事態になりかねません。  
  
また、Illustratorと違い、1つの頂点を起点にして複数の線を描いて枝分かれすることもできます。これを利用して矢印の形も描くことができます。
 ![](https://cont.sterfield.co.jp/uploads/img_B_8_3e8d5b59cc.png) 




### テキストの変形について

 ![](https://cont.sterfield.co.jp/uploads/img_C_1_8219f2283f.png) 

デザインをしていく上で、時にはテキストを変形してグラフィカルに見せることもあります。
このようなときはIllustratorの場合、先ずは普通にテキストを入力しは標準に備わっているワープツールを使うケースが多いです。

今回はワープツールの円弧を使って下方向に湾曲するテキストのサンプルを作ってみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_2_08a797d87f.png) 

これと同じことがFigmaでできるか試してみました。

先ずはIllustratorと同じようにテキストを入力します。このときに気が付いたのですが、Figmaはパソコンにインストールされているフォントではなく、
googleフォントなど、オンライン環境で使用できるフォントデータを読み込んでいるようです。このような点もIllustratorとの違いを実感しました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_3_e396dbcb00.png) 

ただ、ワープツールに相当する物はFigmaの標準の機能ではないようです。調べてみるとプラグインで提供されており、プラグインで変形できるみたいなので実際に使ってみました。

今回は「Warp IT」というプラグインを使用してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_4_cf64d3c0cd.png) 


テキストを選択してプラグインを起動すると図のように編集画面が出ますこの画面で頂点を編集して、「APPLY RESULTS」ボタンを押すと編集した通りに形ができます。

 ![](https://cont.sterfield.co.jp/uploads/img_C_5_1a01f2c368.png) 

編集の仕方はIllustratorと違いますが、それでも問題なく加工ができそうです。しかし、作成してから気が付きましたが、作成した物はテキストデータ
ではなく、パスデータに変わっていました。

 ![](https://cont.sterfield.co.jp/uploads/img_C_6_d708119777.png) 

この点、Illustratorはテキストデータの形を保持しているので別の文字に変える編集も可能です。なので、更新の可能性が高い物はIllustratorで作成した方がよいと思います。

 ![](https://cont.sterfield.co.jp/uploads/img_C_7_ec1e911ba1.png) 


## まとめ

Figmaを使用してみて、Illustratorでできることは概ねFigmaでも可能だと感じました。また、Figmaはインターネット環境があればどのパソコンでも使える手軽さがあり、導入コストが低いのも魅力です。  
  
ただし、IllustratorにはIllustratorの利点もあり、どちらか一方に代替されるのではなく、用途によって棲み分けられていく印象でした。  
  
今後のWeb業界でのツールの主な使い分けとしては、  
  
画面デザインはFigma  
写真加工はPhotoshop  
ロゴなど精密なデザインはIllustrator  
  
といった形になるのではないでしょうか。時代の変化に応じて、新しいツールも柔軟に取り入れていきます。


25307319_m.jpg

Figmaが注目される理由とは？WEBデザイナーが使ってみた感想

## はじめに

Gulpは、フロントエンド開発の作業を効率化するための自動化ツールです。ファイルを一つひとつ手作業で処理する代わりに、Gulpを使えば、様々なタスクを自動で実行できるため、時間を大幅に節約できます。さらに、CSSを効率よく管理するためにSassという拡張機能を導入することで、コードの見やすさが向上し、メンテナンスもしやすくなります。

この記事では、Gulpの基本的な導入方法から、Sassを使った開発の進め方までを解説します。

## 1. Gulpとは？

Gulpは、開発作業を自動化するための「タスクランナー」です。
手動で行うと時間がかかる以下のような処理を、簡単なコマンドで自動実行できるのが特徴です。

* Sass/LESSファイルのCSSへの自動変換
* JavaScriptやCSSの圧縮・結合
* ファイルの変更監視
* ローカルサーバーの起動やブラウザの自動リロード
* 画像の最適化 など
  
Gulpを使えば、作業の効率が上がり、開発時間を短縮できます。

## 2. 環境準備
### 2.1 事前準備

まず、Gulpを使用するために、Node.js をインストールします。

* Node.js（[公式サイト](https://nodejs.org/en)からインストール）
  
インストール後、以下のコマンドでバージョンが確認できます。

```
node -v
```

![](https://cont.sterfield.co.jp/uploads/img01_6befb058cd.png) 
  

### 2.2 プロジェクトの初期化

プロジェクトのディレクトリで以下のコマンドを実行し、package.json を自動生成します。
```
npm init -y
```
これで、プロジェクトディレクトリに package.json が作成されます。

 ![](https://cont.sterfield.co.jp/uploads/img02_a439d94563.png) 

## 3. Gulpのインストール
プロジェクトのローカルにGulpをインストールします。
```
npm install gulp --save-dev
```
これで　node_modules フォルダと package-lock.json が作成され、package.json の "devDependencies" に Gulp が追加されます。

 ![](https://cont.sterfield.co.jp/uploads/img03_420bdf6b5b.png) 

## 4. Gulpfileの作成
次に、プロジェクトのルートディレクトリに gulpfile.js を作成し、基本的なタスクを設定します。
```
const gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!');
});
```

## 5. Sassの導入
以下のコマンドで、Sassをコンパイルするための gulp-sass と sass をインストールします。
```
npm install --save-dev gulp-sass sass
```

## 6. Sassコンパイルタスクの設定
以下のコードを gulpfile.js に追加し、SassファイルをCSSに変換するタスクを追加します。
```
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('dev_src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', gulp.series('sass'));
```

## 7. ディレクトリ構造（例）
```
my-project/
│
├── dev_src/                 ← ソースファイルを格納するフォルダ
│   ├── files/               ← 静的ファイルやアセットを格納
│   │   └── assets/          ← 画像やフォントなどのリソース
│   │       └── images/      ← 画像ファイル
│   ├── pug/                 ← Pugテンプレートファイルを格納
│   │   └── index.pug        ← メインのPugファイル
│   └── scss/                ← Sassファイルを格納
│       └── style.scss       ← メインのSassファイル
├── gulpfile.js              ← Gulpのタスク設定ファイル
├── package.json             ← プロジェクトの設定情報
└── package-lock.json        ← インストールしたパッケージの依存関係
```

## 8. Sassファイルの作成
dev_src/scss/style.scss に以下のコードを追加します:
```
$primary-color: #333;

body {
  color: $primary-color;
}
```

## 9. 動作確認
以下のコマンドを実行して、Gulpを起動します。
```
 npx gulp
```

## 10.　CSS 内容の確認

Gulpを実行した後、dist/フォルダにはコンパイルされたHTMLやCSSファイルが生成されます。具体的には、以下のようなファイルが出力されます。
```
my-project/
│
├── dist/               ← コンパイルされたHTMLやCSSが出力される
│   ├── index.html      ← Pugから生成されたHTMLファイル
│   └── style.css       ← Sassから生成されたCSSファイル
├── dev_src/
│   ├── files/
│   │   └── assets/
│   │       └── images/
│   ├── pug/
│   │   └── index.pug
│   └── scss/
│       └── style.scss
├── gulpfile.js
├── package.json
└── package-lock.json
```
特に、dist/style.cssの中身が以下のようになっていれば、Sassから正常にコンパイルされていることが確認できます。
```
body {
  color: #333;
}
```

## 11. まとめ

これで、Gulpを使ったプロジェクトのセットアップとSassファイルのコンパイルの手順が完了しました。Gulpを使うことで、Sassのコンパイルやファイルの変更を自動で監視できるようになり、開発の効率が上がります。

**他にもできること**

Gulpを使用すると、以下のような他のタスクも簡単に自動化できます。

* JavaScriptの圧縮と結合

  gulp-uglify や gulp-concat を使って、JavaScriptファイルを圧縮し、一つにまとめることで、読み込み時間を短縮できます。

* CSSの圧縮

  gulp-clean-css を利用して、生成されたCSSファイルを圧縮し、ファイルサイズを小さくできます。

* 画像の最適化

  gulp-imagemin を使用して、画像ファイルのサイズを削減し、ページの読み込み速度を向上させることが可能です。

これらの機能を活用することで、さらに開発がスムーズになります。Gulpには他にも多くの便利な機能がありますので、自分のプロジェクトに合ったタスクを見つけて、効率的なフロントエンド開発を進めてみてください。

## 参考
* https://ics.media/entry/3290/
* https://stand-4u.com/css/sass/setup_gulpsass.html

Gulpを使ったプロジェクトの基本設定とSass導入手順

ノーコードでAIアプリを開発することができる「Dify」というサービスを用いて簡単なチャットボットを自作してみたので、その紹介をしたいと思います。

こんな人向け
- ノーコードツールに興味がある人
- ノーコードツールで業務改善や新規事業を行いたい企画・マーケティング職、営業職の人
- アプリ制作に興味がある人
- 生成AIの活用に興味がある人

## Difyとは
Dify（読み方：ディーファイ）とは、生成AIを用いたアプリをフローベースで開発することができる環境で、フリープランを用いることで無料でアプリを作ることができます。 
また、チャットボットに関していえば数カ所設定するだけですぐ作成することができるため、非エンジニアの方でもお気軽に作成することができるのが特徴です。 
外部ファイルを読み込ませることができるので。ローカル(社内)のファイルを読み込ませることができるのが利点です。

## 作成の手順
0. 各種アカウントの作成（Googleアカウント、Difyアカウント）
1. Gemini APIとの連携（今回は、「Gemini 1.5 Flash」を利用）
2. ナレッジの作成（PDF、CSVのアップロード）
3. チャットbotの作成
4. Chatflowで質問を振り分ける

具体的な手順は、[参考動画](https://www.youtube.com/live/1psidvPxQqM?t=700s)を見ていただければ、迷わず進めることができます

## 成果物の共有
### チャットのワークフロー
どんな処理を行いたいかを視覚的にカスタマイズできる
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_04_16_747d107750.png) 
### チャットボットアプリでのやりとり
ちゃんと会話できてる！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_16_56_b5208c7558.png) 
### サイトでの活用
DIfy管理画面内で、サイトに反映するためのJavaScriptのコードが用意されている
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_20_34_abfe1a3b02.png)
そのコードを反映させたいサイト/ページに追記するだけで、作成したチャットが利用できる ！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_27_26_84769fe1c7.png) 

### チャットのログ
どんなことを聞かれているのか確認できる！！今後の返答の質UPに活用できる！！
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_12_02_35_8939f51787.png) 

### 利用できる他のツール
Googleなどの検索エンジンや、WikiPediaやYahooFinanceなど多岐にわたるツールが利用できるので、作りたいアプリに応じてこれらのツールを活用するのが良いと思います。
 ![](https://cont.sterfield.co.jp/uploads/2024_10_11_11_38_10_67ecf51844.png) 

### おまけ(チャットボットと大喜利をしてみた結果)
 ![](https://cont.sterfield.co.jp/uploads/unnamed_f238feeaf4.png) 

## まとめ
今回のチャットボットを利用するにあたり、生成AIにはGeminiを利用しましたが、ChatGPTなど他のAIに置き換えることもできます。お好みのAIを利用してもらえたらいいかなと思います。 
既存の生成AI+独自のルールで、独自のアプリが簡単にできるので、すごく便利だと思いました。 
1時間足らずで、それっぽいチャットボットができたので、他にも良さそうなアイデアがあれば、Difyを活用してみてください。

logo_Dify.png

Difyを用いたチャットボットを作成してみた

## はじめに
[Cloudflare Workers](https://www.cloudflare.com/ja-jp/)の実践的なサンプルコードを事例を交えて紹介します。

すでにCloudflareを利用していてCloudflare Workersのことは知っているが、使い所が分からず手が出せてない方の参考となれば幸いです。

以下で紹介するコードはWebフレームワークの [Hono](https://hono.dev/) を使って実装しています。Cloudflare Workersにいち早く対応し、シンプルかつ型システムを活用した堅牢なコードが書けるのでおすすめです。

## サンプル1: オブジェクトストレージにデプロイしたHTMLにBASIC認証をかける

問題：
AWSやGoogle Cloudのようなクラウド事業者が提供しているオブジェクトストレージでWebサイトを構築しているが、そのサイトにBASIC認証をかけたい。

解決方法：WebサイトのネームサーバーをCloudflareに移行した上で、下記のWorkersを作成します。Workersの[ルート設定](https://developers.cloudflare.com/workers/configuration/routing/#matching-behavior)を行い、Workers→オブジェクトストレージの流れでリクエストが処理されるように設定します。

```
import { Hono } from "hono";
import { basicAuth } from "hono/basic-auth";

const app = new Hono<{ Bindings: CloudflareBindings }>();

app.all("*", basicAuth({ username: "username", password: "password" }), (c) => {
 return fetch(c.req.url);
});

export default app;
```

## サンプル2: ルールにそってURLを書き換えてリダイレクトする
問題：複数のサブドメインにわかれているシステムを運用しているが、外部のシステムと連携するにあたって、連携先のドメインが1つしか登録できない。

解決方法：下記のWorkersを作成して[カスタムドメイン設定](https://developers.cloudflare.com/workers/configuration/routing/custom-domains/)を行い、そのドメインを外部連携先として利用します。このサンプルコードでは、URLを加工してリダイレクトしていますが、マッピング表をコード上に持つようにしたり、外部に保存したマッピングを参照してリダイレクトすることも可能です。

```
import { Hono } from 'hono';

const app = new Hono();
const domain = "example.com";

app.get('/:subdomain/', (c) => {
	const { subdomain } = c.req.param();
	const url = `https://${subdomain}.${domain}/`;
	return c.redirect(url);
});

export default app;
```

使用例：
```
https://redirect.example.com/aaa/ => https://aaa.example.com/
https://redirect.example.com/bbb/ => https://bbb.example.com/
```

## サンプル3: APIとして使える簡易的なKVS
問題：一時的なデータの保存場所としてMemcachedやRedisのようなKVSが必要になったが、サーバーを立ち上げたりクラウド上のサービスを使うとなると費用がかかるので、お金がかからない方法で検証までは行いたい。

解決方法：Cloudflare Workersに付随するサービスであるCloudflare Workers KV(以下KV)を使ってデータの保存と読み取りを行うWorkersを作成します。事前にKVの[名前空間の作成](https://developers.cloudflare.com/queues/tutorials/web-crawler-with-browser-rendering#2-create-kv-namespace)を行います。その後、下記のコードのWorkersを作成してデプロイします。

```
import { Hono } from "hono";

export interface Bindings {
 kvs: KVNamespace;
}

const app = new Hono<{ Bindings: Bindings }>();

app.post("/set/:key", async (c) => {
 const key = c.req.param("key");
 const obj = await c.req.json();

 await c.env.kvs.put(key, JSON.stringify(obj));

 return c.json({});
});

app.get("/get/:key", async (c) => {
 const key = c.req.param("key");
 return c.json(JSON.parse((await c.env.kvs.get(key)) || "{}"));
});

export default app;
```

使用例：
```
$ curl -X POST -H "Content-Type: application/json" -d '{"Name":"aaaa", "Age":"100"}' https://kvs-sample.****.workers.dev/set/123
{}

$ curl https://kvs-sample.****.workers.dev/get/123
{"Name":"aaaa","Age":"100"}
```

## まとめ
今回紹介したサンプルはすべて無料プランのCloudflareアカウントでも利用可能です。是非気軽に試してみてください。

## 参考リンク
- [Cloudflare Workersで手っ取り早くBasic認証を設定する](https://qiita.com/AnaKutsu/items/1c8bd0eb938edd3c0e0a)

CF_logo_stacked_blktype.jpg

Cloudflare Workersの実践的サンプルの紹介

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

## はじめに

Google Cloud 上でバッチ処理を行う際に、[Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)を使用したので紹介します。
本記事では、他サービスとの比較と[Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)の使い方について説明します。

## Google Cloud でバッチ処理できるサービス

Cloud Run jobs を使用するにあたって、他のサービスについても調べたのでそれぞれの特徴をまとめました。

### [Cloud Functions](https://cloud.google.com/functions)

様々なイベントをトリガーにできるので、特定のイベントが発生したときに動かしたいバッチ処理の場合は Cloud Functions を使うと良さそうです。
例えば [Cloud Storage](https://cloud.google.com/storage) に画像がアップロードされた際に、自動的にサムネイルを作成したり、画像にフィルターをかけたりする処理が簡単に作れます。
しかし、最大実行時間に制限(60 分)があるため長時間の処理には適さない場合があります。

### [Batch](https://cloud.google.com/batch)

大規模なバッチ処理ワークロードを効率的に実行するためのフルマネージドなサービスです。
高性能コンピューティング（HPC）、機械学習、データ処理など、さまざまな種類のバッチジョブをスケーラブルかつ柔軟に実行できます。
また、最大実行時間に制限が無いので長時間の処理に適しています。
しかし、Cloud Functions や Cloud Run jobs よりも設定が複雑になってしまうので採用しませんでした。

### [Cloud Run jobs](https://cloud.google.com/run/docs/create-jobs)

Cloud Run の一機能で、バッチ処理や非同期タスクの実行に特化したサービスです。
最大実行時間に制限がありますが、24 時間実行できるのでほとんどのバッチ処理は問題ないでしょう。

## Cloud Run jobs の基本要素

### Cloud Run jobs のリソース構造

Cloud Run jobs は以下のようなリソースで構成されています。 
 ![リソース構造](https://cont.sterfield.co.jp/uploads/resource_a778e2a692.jpg) 

### ジョブ (Job)

実行したいタスクの全体像を定義するルートリソースです。

ジョブでは以下の項目を設定できます。

- コンテナイメージ
- タスク数
- 並列実行数
- リソース(各タスクに割り当てる CPU やメモリなどのリソース量)
- 環境変数
- サービスアカウント

### タスク (Task)

ジョブによって定義されたタスクのインスタンスです。
タスクはジョブに設定された数だけ実行されます。コンテナインスタンスを 1:1 で用意し、コンテナインスタンスごとの進捗を管理します。タスクがエラーで終了した場合は、タスク単位で再実行もできます。

### 実行 (Execution)

タスクの実行履歴です。
ジョブの設定に応じてタスクを実行し、全てのタスクが完了するまでの状態を管理します。1 度作成した実行は、何度でも再実行が可能です。

## Cloud Run jobs の作成・実行方法

### サンプルアプリケーションの用意

以下のコードを適当なフォルダに作成します

環境変数に`SLEEP_MS`を設定すると、設定した時間だけスリープするようになり、時間のかかる処理を再現できます。
`FAIL_RATE`を設定すると、指定した確率でジョブがエラーになり、エラー時の挙動を確認できます。

main.js

```js
// Retrieve Job-defined env vars
const { CLOUD_RUN_TASK_INDEX = 0, CLOUD_RUN_TASK_ATTEMPT = 0 } = process.env;
// Retrieve User-defined env vars
const { SLEEP_MS, FAIL_RATE } = process.env;

// Define main script
const main = async () => {
 console.log(
 `Starting Task #${CLOUD_RUN_TASK_INDEX}, Attempt #${CLOUD_RUN_TASK_ATTEMPT}...`
 );
 // Simulate work
 if (SLEEP_MS) {
 await sleep(SLEEP_MS);
 }
 // Simulate errors
 if (FAIL_RATE) {
 try {
 randomFailure(FAIL_RATE);
 } catch (err) {
 err.message = `Task #${CLOUD_RUN_TASK_INDEX}, Attempt #${CLOUD_RUN_TASK_ATTEMPT} failed.\n\n${err.message}`;
 throw err;
 }
 }
 console.log(`Completed Task #${CLOUD_RUN_TASK_INDEX}.`);
};

// Wait for a specific amount of time
const sleep = (ms) => {
 return new Promise((resolve) => setTimeout(resolve, ms));
};

// Throw an error based on fail rate
const randomFailure = (rate) => {
 rate = parseFloat(rate);
 if (!rate || rate < 0 || rate > 1) {
 console.warn(
 `Invalid FAIL_RATE env var value: ${rate}. Must be a float between 0 and 1 inclusive.`
 );
 return;
 }

 const randomFailure = Math.random();
 if (randomFailure < rate) {
 throw new Error("Task failed.");
 }
};

// Start script
main().catch((err) => {
 console.error(err);
 process.exit(1); // Retry Job Task by exiting the process
});
```

package.json

```json
{
 "main": "main.js",
 "scripts": {
 "start": "node main.js"
 },
 "engines": {
 "node": ">=20.0.0"
 }
}
```

Dockerfile

```Dockerfile
FROM node:20
WORKDIR /app
COPY . .
RUN npm install
CMD [ "npm", "start" ]
```

### コンテナをプッシュ

次のコマンドで [Artifact Registry](https://cloud.google.com/artifact-registry) にコンテナをプッシュします。`${REGION}`と`${PROJECT_ID}`は各自で置き換えてください。

```
gcloud builds submit --tag ${REGION}-docker.pkg.dev/${PROJECT_ID}/gcr.io/job-sample
```

### ジョブを作成

今回は、以下の Cloud Run のコンソールから作成します。 
https://console.cloud.google.com/run/jobs

「ジョブの作成」をクリックします。 
 ![ジョブの作成ボタン](https://cont.sterfield.co.jp/uploads/job_create_1_691d934c36.png) 

「コンテナ イメージの URL」に先ほど作成したコンテナを選択します。
イメージ名が自動的に設定されます。
リージョンやタスク数はお好みで設定して下さい。 
 ![ジョブの詳細](https://cont.sterfield.co.jp/uploads/job_create_2_c2c65e6a14.png) 

### ジョブの実行

「実行」をクリックし、ジョブを開始します。 
 ![実行ボタン](https://cont.sterfield.co.jp/uploads/job_create_3_3049895faf.png)

しばらく経つと、全てのタスクが完了し、実行が完了します。実行の詳細を開くとタスクが完了していることが確認でき、各タスクのログ等が確認できます。 
 ![タスク](https://cont.sterfield.co.jp/uploads/job_create_4_6281075873.png) 

### 作成した Job を定期実行する方法

「トリガー」タブを選択し、「スケジューラ トリガーを追加」をクリックします。 
 ![トリガー追加ボタン](https://cont.sterfield.co.jp/uploads/scheduler_1_1e1f8511c4.png) 

頻度を unix-cron 形式で選択します。
今回は 5 分ごと(`*/5****`)に実行してみます。 
 ![トリガー詳細](https://cont.sterfield.co.jp/uploads/scheduler_2_f70181ea5b.png) 

指定した通り、5 分ごとにジョブが実行されました。 
 ![ジョブ一覧](https://cont.sterfield.co.jp/uploads/scheduler_3_69acf4aa19.png) 

## まとめ

今回は Cloud Run jobs について説明しましたが、各サービスのメリット・デメリットを比較し、要件に合った最適なサービスを選択することが重要です。
今後、他サービスにも触れる機会がありましたら紹介したいです。

## 参考

- https://speakerdeck.com/satohjohn/gcptenohatutichu-li-hatanwokao-etemiru
- https://zenn.dev/google_cloud_jp/articles/cloudrun-jobs-basic
- https://cloud.google.com/run/docs/quickstarts/jobs/build-create-nodejs

cloud-run.png

Cloud Run jobs を利用したバッチ処理

## はじめに

2023 年 10 月ごろに、[Recoil と Jotai に関する記事](https://sterfield.co.jp/blog/which-recoil-or-jotai/)を投稿しましたが、2023 年 3 月以降、Recoil の更新が進められていない状況で、React 19 以降では正常に動作しない見込みとなってきました[<a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">参考</a>]。 
そのため、これまで Recoil を使ってきた React のプロジェクトにおいて、別の状態管理ライブラリへの移行が必要となり、対応を進めています。 
その選択肢の一つとして、Redux への移行を行ったので、そのときの方法を Recoil と Redux のコードを比べながら、通常の状態と、API との通信を伴う非同期の状態の移行に分けて、ご紹介します。 
ここでご紹介する方法は、Redux は、Redux Toolkit と React Redux の利用を前提にしています。

## インストール

Recoil から Redux へ移行する場合、Redux Toolkit と React Redux を使うことで、Recoil のときと同じようなコードの書き方で、スムーズに移行できるので、そちらをインストールします。

```bash
npm i @reduxjs/toolkit react-redux
```

## ファイルの準備

以下はファイル構成の例です。

```
redux
├ hooks/ // React用のHooksを格納する
│ ├ normalExample.ts
│ ├ familyExample.ts
│ ┗ asyncExample.ts
├ slices/ // ReduxのSliceを格納する
│ ├ normalExampleSlice.ts
│ ├ familyExampleSlice.ts
│ ┗ asyncExampleSlice.ts
┗ store.ts // Reduxのstore
```

## 通常の状態

### Recoil

```typescript
import {
 atom,
 useRecoilValue,
 useResetRecoilState,
 useSetRecoilState,
} from "recoil";

// Recoilのatomを設定
export const normalExampleState = atom<string>({
 key: "normalExample",
 default: "",
});

// get state
export const useNormalExampleValue = () => useRecoilValue(normalExampleState);

// set state
export const useSetNormalExampleState = (key) =>
 useSetRecoilState(loadingState);

// reset state
export const useResetNormalExampleState = () =>
 useResetRecoilState(normalExampleState);
```

上記のような状態を Recoil で設定していた場合、Redux Toolkit と React Redux を使って以下のように置き換えることができます。 
ご覧いただくとわかりますが、reducer による action の設定や Root の store.ts への設定のところが Recoil にはない記述ですが、それ以外は似たコードで構成できることがわかります。

### Redux

redux/slices/normalExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

const initialState = "";

// ReduxのSliceを設定
export const normalExampleSlice = createSlice({
 name: "normalExample",
 initialState,
 reducers: {
 // set
 setNormalExample: (state, action: PayloadAction<string>) => {
 state.normalExample = action.payload;
 },
 // reset
 resetNormalExample: (state) => {
 state.normalExample = "";
 },
 },
});

export const { setNormalExample, resetNormalExample } =
 normalExampleSlice.actions;

export default normalExampleSlice.reducer;
```

redux/store.ts

```typescript
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useSelector } from "react-redux";
import normalExample from "./slices/normalExampleSlice";

// 用意したSliceをstoreに登録する
export const store = configureStore({
 reducer: {
 normalExample,
 },
});

export type AppStore = typeof store;

export type RootState = ReturnType<AppStore["getState"]>;

export type AppDispatch = AppStore["dispatch"];

// useSelectorでは型が引き継がれないので、TypeScriptでは型を引き継げるuseAppSelectorを用意する
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

React 用の Hooks は、以下のように React Redux の useDispatch と useSelector（TypeScript の場合は store.ts で定義した useAppSelector）を利用して以下のように構成できます。

redux/hooks/normalExampleSlice.ts

```typescript
import { useDispatch } from "react-redux";
import { useCallback } from "react";
import {
 setNormalExample,
 resetNormalExample,
} from "@/redux/slices/normalExampleSlice";
import { useAppSelector, type RootState } from "../store";

// get state
export const useNormalExampleValue = () =>
 useAppSelector((state: RootState) => state.normalExample);

// set state
export const useSetNormalExampleState = () => {
 const dispatch = useDispatch();
 return (value: string) => {
 dispatch(setNormalExample(value));
 };
};

// reset state
export const useResetNormalExampleState = () => {
 const dispatch = useDispatch();
 return () => {
 dispatch(resetNormalExample(value));
 };
};
```

## AtomFamily からの移行

Recoil では、atomFamily という、同じ型の状態をキーごとに再利用するための便利な機能が用意されていますが、Redux Toolkit の Slice でも、以下のように構成することで、似た機能を実装できます。

### Recoil

```
import { atomFamily } from "recoil";

import {
 atom,
 useRecoilValue,
 useResetRecoilState,
 useSetRecoilState,
} from "recoil";

// RecoilのatomFamilyを設定

export const familyExampleState = atomFamily<string, string>({
 key: "familyExample",
 default: null
});

// get state
export const useNormalExampleValue = (key: string) => useRecoilValue(familyExampleState(key));

// set state
export const useSetNormalExampleState = (key: string) =>
 useSetRecoilState(familyExampleState(key));

// reset state
export const useResetNormalExampleState = (key: string) =>
 useResetRecoilState(familyExampleState(key));
```

### Redux

redux/slices/familyExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

export interface FamilyExampleState {
 [key: string]: string | null;
}

const initialState: FamilyExampleState = {
 default: null,
};

const familyExampleSlice = createSlice({
 name: "familyExample",
 initialState,
 reducers: {
 // set
 setFamilyExample(
 state,
 action: PayloadAction<{ key: string; value: string }>
 ) {
 state[action.payload.key] = action.payload.value;
 },
 // reset
 resetFamilyExample(state, action: PayloadAction<string>) {
 state[action.payload] = null;
 },
 },
});

export const { setFamilyExample, resetFamilyExample } =
 familyExampleSlice.actions;

export default familyExampleSlice.reducer;
```

redux/hooks/familyExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import {
 setFamilyExample,
 resetFamilyExample,
} from "../slices/familyExampleSlice";

export const useFamilyExampleValue = (key: string) =>
 useAppSelector((state: RootState) => state.familyExample[key], shallowEqual);

export const useSetFamilyExampleState = (key: string) => {
 const dispatch = useDispatch();
 return (value: string) => {
 dispatch(setFamilyExample({ key, value }));
 };
};

export const useResetFamilyExampleState = (key: string) => {
 const dispatch = useDispatch();
 return () => {
 dispatch(resetFamilyExample(key));
 };
};
```

## API 通信を伴う非同期の状態

API からのデータ取得など、非同期を伴う場合、Redux への移行には少しなれがひつようかもしれません。
以下のような Recoil では selector で API からのデータ取得を伴う状態を構成していた場合を移行する場合の例です。

### Recoil

```typescript
import {
 atom,
 selector,
 useSetRecoilState,
 useRecoilValue,
 useRecoilRefresher_UNSTABLE,
} from "recoil";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery } from "@/api/query/exampleQuery";

export const asyncExampleState = selector({
 key: "asyncExample",
 get: async () => {
 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 fetchPolicy: "no-cache",
 });
 if (errors) {
 throw errors;
 }
 return data.example;
 },
});

// get state
export const useAsyncExampleValue = () => useRecoilValue(asyncExampleState);

// reset state
export const useResetAsyncExampleState = () =>
 useRecoilRefresher_UNSTABLE(asyncExampleState);
```

### Redux

Redux Toolkit で非同期を伴う Slice を作成する場合、createAsyncThunk と createSlice の extraReducers で構成します。

redux/slices/asyncExampleSlice.ts

```typescript
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import type { ApolloError } from "@apollo/client";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";
import type { RootState } from "../store";

// API用の状態の型を定義
const initialState: {
 data: Example[];
 status: "idle" | "loading" | "succeeded" | "failed";
 error: ApolloError;
} = {
 data: [],
 status: "idle",
 error: null,
};

// 非同期用のreducerを設定
export const fetchAsyncExample = createAsyncThunk<
 Example[],
 void,
 { state: RootState }
>("asyncExample/fetchAsyncExample", async (_, { rejectWithValue }) => {
 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 fetchPolicy: "no-cache",
 });

 if (error) {
 return rejectWithValue(error);
 }

 return data.example;
});

// SliceにextraReducersを使って非同期用のreducerを紐づける
export const asyncExampleSlice = createSlice({
 name: "asyncExample",
 initialState,
 reducers: {},
 extraReducers: (builder) => {
 builder
 .addCase(fetchAsyncExample.pending, (state) => {
 state.status = "loading";
 })
 .addCase(fetchAsyncExample.fulfilled, (state, action) => {
 state.status = "succeeded";
 state.data = action.payload;
 })
 .addCase(fetchAsyncExample.rejected, (state, action) => {
 state.status = "failed";
 state.error = action.payload as any;
 });
 },
});

export default asyncExampleSlice.reducer;
```

redux/hooks/asyncExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import { fetchAsyncExample } from "../slices/asyncExampleSlice";

// get state
export const useAsyncExampleValue = () => {
 const dispatch: AppDispatch = useDispatch();
 const { data, status } = useAppSelector(
 (state: RootState) => state.example,
 shallowEqual
 );

 // 状態が"idle"の時はfetchを実行する
 useEffect(() => {
 if (status === "idle") {
 dispatch(fetchAsyncExample());
 }
 }, [status, dispatch]);

 return data;
};

// reset state
export const useResetNormalExampleState = () => {
 const dispatch = useDispatch();
 return () => {
 dispatch(fetchAsyncExample());
 };
};
```

## 移行途中で Recoil と依存する状態を連携させる場合

移行途中で共存させなければならない場合、以下のように Recoil に依存する状態を Redux と連携できます。
ただし、Recoil 同士の状態と違い、Redux の状態の変化を Recoil は自動で検知してくれないので、Redux の状態を変更するときに、Recoil で Reset や Refresh を実行する必要があることの注意が必要です。

```typescript
import { selector } from "recoil";
import { store } from "@/redux/store";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";

export const exampleState = selector({
 key: "exampleState",
 get: async ({ get }) => {
 const keyword = store.getState().keyword;

 const { data, errors } = await apolloClient.query({
 query: exampleQuery,
 variables: {
 keyword,
 },
 fetchPolicy: "no-cache",
 errorPolicy: "all",
 });
 if (errors) {
 throw errors;
 }
 return data.example;
 },
 cachePolicy_UNSTABLE: {
 eviction: "most-recent",
 },
});
```

## まとめ

Recoil の atom や selector の書き方と Redux Toolkit の createSlice の書き方が似ていることもあり、意外とコードの移行の親和性が高いと感じました。 
ただ、非同期関係では Redux において createAsyncThunk を利用するなど、Recoil にはない独特の記述も必要で、慣れが必要な部分も実感しました。

## 参考リンク

- Recoil の更新状況: <a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>
- Recoil の更新状況: <a href="https://recoiljs.org/blog" target="_blank">Blog | Recoil</a>
- Redux Toolkit の使い方 (はじめ方): <a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank">Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (TypeScript): <a href="https://redux-toolkit.js.org/tutorials/typescript" target="_blank">TypeScript Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (非同期の状態): <a href="https://redux-toolkit.js.org/api/createAsyncThunk" target="_blank">createAsyncThunk | Redux Toolkit</a>

20240719_recoil-to-redux.png

Recoil から Redux へ移行するときにやったこと

# はじめに
近年、チームワークや情報共有の重要性が高まる中で、さまざまなツールやサービスが活用されています。その中でも、GoogleスプレッドシートとGoogle Chatは、多くの企業や組織で利用されている定番ツールです。
この記事では、Google Apps Scriptを使用して、Google スプレッドシートで特定の操作が行われた際にGoogle Chatへ自動で通知を送る方法について、その**手順**と**応用例**を紹介します。

### 手順概要
1. Google Chat Webhook URLの取得
2. Google Apps Scriptの作成
3. Google Apps Scriptのトリガー設定
4. Google Chatへの通知送信の確認

#### 1. Google Chat Webhook URLの取得
最初に、Google Chatに通知を送信するためのWebhook URLを取得します。

1. Google Chatを開き、通知を送りたいチャットルームを選択します。
2. チャットルーム名をクリックし、「アプリと統合」を選択します。
3. 「+Webhookを追加」をクリックし、名前を入力して「保存」をクリックします。
4. 表示されたWebhook URLをコピーします。このURLは後でスクリプト(手順2)に使用します。

 ![](https://cont.sterfield.co.jp/uploads/webhook_f7e4ed54ef.png) 

**補足**

・Webhook URLは、Chatルームごとに個別に発行されます。

・複数のWebhook URLを作成し、異なるChatルームへ通知することも可能です。


#### 2. Google Apps Scriptの作成
次に、Google スプレッドシートに関連付けるGoogle Apps Scriptを作成します。

1. 対象のGoogle スプレッドシートを用意して開きます。
2. メニューバーから「拡張機能」をクリックし、「Apps Script」を選択します。
3. スクリプトエディタが開きます。新しいプロジェクトが作成され、デフォルトのコードエディタが表示されます。
4. 以下のコードをエディタに貼り付け、Webhook URLを先ほどコピーしたURLに置き換えます。

 ![](https://cont.sterfield.co.jp/uploads/script_4be5865e34.png) 

```
function sendToGoogleChat(message) {
  var url = "YOUR_WEBHOOK_URL";  // ここをWebhook URLに置き換えます

  var payload = JSON.stringify({ "text": message });
  
  var options = {
    "method": "POST",
    "contentType": "application/json",
    "payload": payload
  };

  UrlFetchApp.fetch(url, options);
}

function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
このスクリプトは、スプレッドシートのセルが編集された際に、その情報をGoogle Chatに送信します。

**ポイント**

・YOUR_WEBHOOK_URL を、1で取得したWebhook URLに置き換えてください。

・必要に応じて、messageの内容を編集してください。


#### 3. Google Apps Scriptのトリガー設定
1. スクリプトを保存し、トリガーを設定してスクリプトが自動的に実行されるようにします。
2. スクリプトエディタの時計アイコン（「トリガー」）をクリックします。
3. 「トリガーを追加」をクリックし、「notifyOnEdit」を選択します。
4. イベントの種類を「スプレッドシートから」に設定し、「編集時」を選択します。
5. 保存してトリガーを有効にします。(認証ダイアログが出てくる場合は、認証を行います。)

 ![](https://cont.sterfield.co.jp/uploads/trigger_7bf337dbff.png) 

#### 4. Google Chatへの通知送信の確認
設定が完了したら、実際にGoogle スプレッドシートでセルを編集してみてください。編集が行われると、指定したチャットルームに通知が送信されるはずです。

 ![](https://cont.sterfield.co.jp/uploads/spreadsheet_ba705a00a8.png) 

 ![](https://cont.sterfield.co.jp/uploads/chat_05129bfbf6.png) 


### 応用例
#### 応用例1: 特定のシートやセル範囲でのみ通知を送る
特定のシートやセル範囲に変更があった場合のみ通知を送るようにスクリプトをカスタマイズできます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  
  // シート名が「Sheet1」でない場合は通知を送らない
  if (sheet.getName() != "Sheet1") {
    return;
  }

  var range = e.range;
  var editedValue = range.getValue();
  var message = "Cell " + range.getA1Notation() + " was edited. New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、「Sheet1」でのみ変更があった場合に通知が送られます。


#### 応用例2: 通知内容の詳細化
通知内容を詳細にカスタマイズすることも可能です。例えば、変更があったセルの前の値と新しい値の両方を通知に含めることができます。

```
function notifyOnEdit(e) {
  var sheet = e.source.getActiveSheet();
  var range = e.range;
  var oldValue = e.oldValue;  // 前の値
  var editedValue = range.getValue();  // 新しい値
  var message = "Cell " + range.getA1Notation() + " was edited. Old value: " + oldValue + ", New value: " + editedValue;
  
  sendToGoogleChat(message);
}
```
これにより、編集前と編集後の値を通知に含めることができます。


# まとめ
Google Apps ScriptとWebhookを使って、スプレッドシートの操作をGoogle Chatへ自動通知する方法をご紹介しました。これにより、チームメンバーは**リアルタイムで情報共有**でき、**タスク管理**や作業のトラッキングが**効率化**されます。ぜひ、活用してチームワークを強化してください。

eyecatch.png

Googleスプレッドシートでの操作をGoogleChatに通知する方法

## はじめに

Looker Studio は、様々なデータソースからデータを収集し、使いやすいダッシュボードを作成できるツールです。今回は、Looker Studio で Jest で出力されたテストカバレッジを可視化する方法を紹介します。本記事は、 Jest を用いてテストコードを作成し、カバレッジレポートの生成経験をお持ちの方向けです。

## Jest のカバレッジレポートを CSV 形式に変換する

jest コマンドを使用して、テストを実行しカバレッジレポートを生成します。

```
$ npx jest --coverage --coverageReporters=json-summary --collectCoverageFrom="src/**/*.js"
 PASS  src/sum.test.js
  ✓ adds 1 + 2 to equal 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.653 s
Ran all test suites.

$ npx -y jest-coverage-to-csv coverage/coverage-summary.json
Conversion to CSV success!
```

- jest コマンドに `--collectCoverageFrom="src/**/*.js"` オプションをつけてテストコードが存在しないソースコードもカバレッジに含まれるようにします。このようにすることでソースコード全体のカバレッジが確認できるようになります
- BigQueryに取り込むためにCSV形式のデータが必要です。 jest のカバレッジレポートの出力形式はいくつかありますが、CSV形式はサポートされていません。そのため、jest コマンドに `--coverageReporters=json-summary` をつけて一旦json形式で出力後、 [jest-coverage-to-csv](https://www.npmjs.com/package/jest-coverage-to-csv) を使ってCSV形式に変換します

生成された coverage/coverage-summary.csv ファイルは、後で使用するために保存しておきます。

今回は日毎のカバレッジの推移を確認したいので下記の内容の2日分のファイルを日付付きのファイル名にリネームして保存したとして進めます。

```
coverage/coverage-summary_2024-06-12.csv
coverage/coverage-summary_2024-06-13.csv
```

### 6/12時点のテストカバレッジ
```
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |      50 |      100 |      50 |      50 |                   
 sub.js   |       0 |      100 |       0 |       0 | 2-4               
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.362 s, estimated 1 s
```

### 6/13時点のテストカバレッジ
```
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |                   
 sub.js   |     100 |      100 |     100 |     100 |                   
 sum.js   |     100 |      100 |     100 |     100 |                   
----------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.633 s, estimated 1 s
```

## CSVファイルをBigQueryに取り込む

gcloud CLI に含まれている BigQuery 用のコマンドラインツールである bq コマンドを使用して、先ほど保存した CSV ファイルを BigQuery のテーブルとして取り込みます。

```
$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-12 ./coverage/coverage-summary_2024-06-12.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_rc3c57bf6bd57867_000001900f7f57cc_1 ... (0s) Current status: DONE   

$ bq load --source_format CSV --skip_leading_rows 1 --replace=true coverage_sample.report_2024-06-13 ./coverage/coverage-summary_2024-06-13.csv filename:STRING,statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING
Upload complete.
Waiting on bqjob_r7ca5c1fd8e62ebaf_000001900f7f98e3_1 ... (0s) Current status: DONE
```

- あらかじめ gcloud コマンドで BigQuery にデータを書き込める権限があるアカウントでログインしている必要があります
- 取り込み先のデータセット、今回の例では `coverage_sample.report_2024-06-12` の.より前の部分は、あらかじめ作成しておく必要があります
- CSVのヘッダーのカラム名にスペースが含まれているため、スキーマの自動認識機能は使用せず、bq コマンドのオプションとして指定します(`statements_ratio:FLOAT,statements_detail:STRING,branches_ratio:FLOAT,branches_detail:STRING,functions_ratio:FLOAT,functions_detail:STRING,lines_ratio:FLOAT,lines_detail:STRING`)

処理が完了してDONEと表示されたら、BigQuery コンソールでテーブルが確認できます。

## BigQuery コンソール上でワイルドカードテーブルを使った View を作成する
BigQuery のコンソールにアクセスすると先程取り込んだ2つのテーブルにテストカバレッジ情報が取り込まれていることが確認できます。

![2つのテーブルの内容](https://cont.sterfield.co.jp/uploads/bigquery_query_5816821a21.png)

下記の SQL をコンソール上で実行して2つのテーブルをまとめた View を作成します。

```
CREATE VIEW
  `coverage_sample.view_report` AS (
  SELECT
    _TABLE_SUFFIX AS date,
    *
  FROM
    `coverage_sample.report_*`)
```

- From 句に*を指定するワイルドカードテーブル機能を使うことで複数のテーブルを1つの View にまとめられます
- このままだとどの日付のデータなのかが区別つかなくなるので、_TABLE_SUFFIX 疑似列を使ったカラムを追加します。_TABLE_SUFFIX にはワイルドカードにマッチした文字列、ここでは`2024-06-12`と`2024-06-13`が入ります。このように設定しておくことで後日、`2024-06-14`のデータが追加されても自動で View に追記することができます

![Viewの内容](https://cont.sterfield.co.jp/uploads/bigquery_view_19da905daa.png) 

## Looker Studio でグラフや表を作成する

https://lookerstudio.google.com/reporting
にアクセスして新しいレポートを作成します。

データに接続タブで BigQuery を選択して先程のデータセットの View を選択します。

![データの追加](https://cont.sterfield.co.jp/uploads/looker_studio_add_data_d89a3303a4.png) 

空のダッシュボードが作成されるので、右側のグラフ→設定タブで

```
ディメンション：date
指標：statements_ratio
並べ替え：dateで昇順
フィルター：All Files
```

と選択すると、日毎のステートメントカバレッジの%の表が作成されます。
次に表をコピーしてグラフを作成します。選択した状態で右側のグラフのプルダウンで表やグラフの種類の変更ができます。今回は折れ線グラフを選択してみます。

下記のような表とグラフでテストカバレッジの日毎の推移を確認できるダッシュボードが作成できました。

![ダッシュボード](https://cont.sterfield.co.jp/uploads/dashbord_20d6eb363f.png) 

## まとめ

Jest のカバレッジレポートを集計可能な形式に変換するところが苦労しましたが、 BigQuery に取り込むことができれば表やグラフで可視化することが簡単にできることがわかりました。

今回の記事では説明できませんでしたが、カバレッジレポートを取得して BigQuery に取り込むところまでを GitHub Actions で実行するようにすれば、自動で新しい日毎のデータが取り込めるようになります。常に最新のカバレッジを確認できる状態を維持することで、チームメンバーのテストコードを書く意識が高まると思います。

みなさまのプロジェクトでも是非活用してみてください。

## 参考リンク

- https://tech.tabechoku.com/?page=1657164600
- https://www.npmjs.com/package/jest-coverage-to-csv
- https://cloud.google.com/bigquery/docs/querying-wildcard-tables?hl=ja
- https://cloud.google.com/bigquery/docs/bi-engine-looker-studio?hl=ja


Looker-Studio-Logo-1-894x400.webp

Looker Studioでテストカバレッジを可視化する

「WEBデザイントレンド　2024」　このようなキーワードで検索をすると、「2024年のWEBデザイントレンド●●選」  
などのよう記事が多く見受けられまます。これらの記事でトレンドであるテーマと実際のWEBサイトが紹介されています。  

また、記事をいくつか読んでいると、多くの記事で取り上げられるテーマがあることに気が付きます。私の主観になりますが、その観点から気になったWEBサイトをピックアップし、それぞれのトレンドについて考察してみました。  

## WEBクセシビリティ  

簡単にWEBアクセシビリティとは障害者差別解消法の一環として求められる対応で、障害の有無に関わらず全ての人が利用しやすい環境を目指すことが求められます。市役所などの公的機関については既に施行されていましたが、2024年4月よりその対象が拡大され、民間の事業者も対応が努力義務が求められるようになりました。  
  
我々WEB業界も例外ではなく、今後は「使いやすさ」と「美しさ」を追求したデザインが求められます。具体的に配慮すべき点についてはデジタル庁などでも紹介されていますのでご参照ください。  
  
デジタル庁　WEBアクセシビリティ導入ガイドブック  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1
  
  

### 味の素株式会社  

 ![](https://cont.sterfield.co.jp/uploads/240531_img01_863d672458.png) 
https://www.ajinomoto.co.jp/  
  
キーカーラの赤をメインに白とのコントラストが効いた見やすいデザインです。記事のリンクなども大きめに作られており、分かりやすく使いやすい構成となっています。  
  
また、WEBアクセシビリティの観点から配慮すべきこととして指摘されている事について、「音声の自動再生をさせない」、「自動でコンテンツの切り替えを行わない」などが配慮が必要とされています。  
この点、動画やスライダーには分かりやすいミュートボタンや停止ボタンも設置されており、このような点もWEBアクセシビリティへの対応が伺えます。
  
  
### ANAホールディングス株式会社
 ![](https://cont.sterfield.co.jp/uploads/240531_img02_d93892d3e3.png) 
https://www.ana.co.jp/ja/jp/  
  
こちらも白とのコントラストが効いた見やすいデザインとなっております。また膨大なリンクもメニューアイコン内にまとめられており、整理された構造となっております。  
  
こちらでWEBアクセシビリティに配慮していると感じるところはボタンのテキストが「検索する」「●●を探す」など、動作を指す言葉を含めてボタンにしている点です。これは、視覚障害がある方はテキストの読み上げ機能を使ってWEBサイトを利用することから、必要な配慮が必要な点として上げられています。  
  
## Y2Kスタイル（デザイン）

Y2Kとはファッション業界から生まれた言葉で、 Year 2Kilo（1000）つまり、2000年のことを指します。90年代後半から2000年代初頭の流行の要素を取り入れた新たなレトロスタイルです。  
特長としては、明るく派手なネオンカラーや、メタリックカラーを多用としたデザインが多く見受けられます。また、当時はデジタルアートが広がり始めた頃でしたが今よりもマシン性能が劣るため、デジタルアート全般が粗目のドット絵で表現されてしまいます。しかしそれが現代の若者には新鮮に映るようで、このようなデジタルアートも特長の一つとされています。  
  
こういった要素を取り入れたWEBデザインもトレンドとなっているようです。  
  
### 株式会社スーパースーパー
 ![](https://cont.sterfield.co.jp/uploads/240531_img03_6295a51d89.png) 
https://supersuper.jp/  
  
アクセスすると大胆なアニメーションがあり、すぐに引き込まれます。  
カーソルに丸いアイコンが付いてきたり、しかもマウスを動かすと楕円形に変化したりなど細部もこだわっています。2000年代というと技術力の高さを競うように動的な仕掛け多く入れる風潮がありましたが、それを現代の環境で実践しているような印象を受けました。  
  
全体的にごちゃごちゃした印象ですが、マウスオーバーのアクションを大きくするなどの工夫があり使いやすさの対策もしっかりしています。
  
## Y3Kスタイル（SFデザイン）  

こちらは3000年という意味で、Y2Kを経て生まれたスタイルです。Y2Kはレトロなイメージに対して、Y3Kは未来志向です。つまり、サイバーやSFを彷彿とするデザインを指します。
WEBデザインで言えばメタバースやAIなどの影響を受けた近未来的なデザイン特長としては、3Dアニメーションを取り入れたデザインが多いです。  
  
技術力の高さという意味でY2Kと通じる点もありますが、Y2Kはどちらかというと、エネルギッシュな力強い印象を受けますが、Y3Kはスッキリしたスタイリッシュな印象を受けます。  
  
### SYNCRELY STUDIO  
 ![](https://cont.sterfield.co.jp/uploads/240531_img04_1256aaeb62.png) 
https://www.syncrely.com/   
  
メタリックな3Dアニメーションが印象的で引き込まれます。これだけで革新的なことをしているWEBサイトのように見えますが、よく見てみるとスクロールで反応して文字が出るなど定番の動きしかしていません。重要なグラフィック要素を効果的に見せていることがよくわかります。
  
## モバイル特化型サイト  

統一された名称が無かったので、このような見出しでまとめましたが、スマホサイトの構造をそのままパソコンで使用するデザインも増えてきました。具体的にはパソコンで見たときは、メインコンテンツを画面中央に配置し、パソコンならではの大きな画面は主に装飾に使う構造で制作しています。近年ではスマホでホームページを見る機会の方が圧倒的に多く特に、BtoCのサービスではトレンドの一つとなっています。
  
### サントリー ほろよい  

 ![](https://cont.sterfield.co.jp/uploads/240531_img05_1258add9ee.png) 
https://www.suntory.co.jp/rtd/horoyoi/  
  
メインコンテンツは完全にスマホサイトと同じ構成で作りパソコンでは大きな余白はパッケージを描きブランドイメージをより印象つけています。制作面を考慮すると、工数を減らし効率化できそうです。
  
### ネオ居酒屋  
 ![](https://cont.sterfield.co.jp/uploads/240531_img06_e7061dbf7d.png) 
https://www.dot-st.com/nikoand/cp/neoizakaya
  
こちらも同じくメインコンテンツは完全にスマホサイトと同じ構成です。パソコンでは大きな余白にボタンを設置することでアクセシビリティを高めています。
  
## Bento UI  

グリッド状にコンテンツをレイアウトし、情報を分かりやすく整理したデザインです。まるでお弁当箱におかずを詰めるように見えることから名づけられました。この構造のメリットはパソコンの大画面でも見やすく、スマホで見る場合はカラム落ちさせるだけで対応できるのでパソコンでもスマホでも無理なく表現できます。
  
### ニコアンド（niko and…）  
 ![](https://cont.sterfield.co.jp/uploads/240531_img07_1589d693e4.png) 
https://www.nikoand.jp/
  
ポップな見た目と多い情報量、そして、アニメーションと多くの要素があるのに、ごちゃごちゃした印象もなくむしろスッキリした印象です。UIの特性をうまくいかした好例なのでしょう。  
  
### アーク ペーパードライバースクール
 ![](https://cont.sterfield.co.jp/uploads/240531_img08_3ed94d60ec.png) 
https://arc-pds.com/
  
こちらもUIの特性を上手く活用し情報をスッキリ見せることに成功しています。Bento UIはパソコン、スマホもどちらにも適した構造と言えそうです。
  
## まとめ
今回WEBデザインのトレンドを調査していい刺激になりました。普段の業務では技術の向上に目が行きがちですが、こうしてトレンドを調査するといいアイディアが浮かびます。
これからも技術向上と並行して、新しいデザインを取り入れることでより魅力的で使いやすいWEBサイトを提供できるよう努めていきます。


#### 参考記事
  
ミニナレ WEB制作会社シスコム：  
https://www.gohp.jp/blog/design/3952/  
  
株式会社ルート・シー:  
https://www.root-sea.co.jp/blog/knowhow/trend-design2024-1/  
  
WEBブランディングの株式会社フィールビー:  
https://feelbee.jp/news/news_branding/3664  


28964162_m.jpg

WEBデザインのトレンド調査

2024年5月時点の情報を取り扱っています。

# CMSの頂点に立つWordPress
CMSとはコンテンツマネジメントサービスの略で、ブログなどのコンテンツを管理するためのサービスです。 
そのCMSの中で、世界で最も利用されているのがWordPressです。 
2023年時点の(全ウェブサイトにおける)シェアは、42.7%です。 
2011:13.1%、2012:15.8%、2013:17.4%、2014:21.0%、2015:23.3%、2016:25.6%、2017:27.3% 
2018:29.2%、2019:32.7%、2020:35.4%、2021:39.5%、2022:43.2%、2023:42.7% 
 ![](https://cont.sterfield.co.jp/uploads/330338879_8afec5da_55d1_4635_a223_7a3d36feee6a_26b1038700.png) 
 
[引用元](https://kinsta.com/jp/wordpress-market-share/)
 

## シェアNo.1だから狙われやすい
悪いハッカー目線で見ると、脆弱性1つを見つけたら、そこを同じように他のサイトにも同じ手法で攻撃できます。 
横展開が楽ですよね。ハッキング、ダメ、ゼッタイ。 
また、WordPressはオープンソースで汎用性が高く、且つプラグインで拡張性も高い反面、攻撃者が脆弱性を見つけ出して狙いやすいという面があります。
そのため、WordPressを用いたサイトが狙われやすいのです。 

## 例1.アップデートを行わないプラグインはマジやばい(SQLインジェクション)
2022年にはプラグイン「OneTone」の脆弱性を突かれたSQLインジェクションによるデータベースへの攻撃がありました。 
これにより、リダイレクトで他のサイトへ飛ばすコードを埋め込まれるという被害を受けたサイトが大量に発生しました。 
更に厄介なことにこのプラグインは開発者がアップデートを行わず、脆弱性に対抗する手段がなくなってしまったため、もともとOneToneを使用していたWordPressサイトの管理者は他のプラグインへの変更をせざるを得ない状況になってしまいました。 
[引用元](https://wp-doctor.jp/blog/2020/04/24/%E3%83%86%E3%83%BC%E3%83%9Eonetone%E3%81%AB%E8%AA%8D%E8%A8%BC%E4%B8%8D%E8%A6%81%E3%81%A7%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92%E6%9B%B8%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%8B/) 
便利だからこのプラグイン使っちゃおというのは良いですが、そのプラグインの脆弱性について調べてみてください。 
また、定期的に更新をチェックした方が良いです。 

## 例2.使わないファイルは無効にしないとマジやばい(xmlrpc.php攻撃)
xml-rpcは、遠隔でWordPressと通信をするための仕様の一つで、WordPressのモバイル用アプリ・Wordからの投稿・ピンバックやトラックバックの利用で使われています。 
これらの機能を利用している人には必要かもしれませんが、それ以上にセキュリティの穴になってしまうことのほうが重大だと思いますので、できるだけXML-RPCは無効化したほうがいいでしょう。 
### なぜXML-RPCを無効化したほうがいいのか
1. ピンバックを利用したDDoS攻撃
ピンバックとは、自分のサイトのURLが他のWordPressサイト上でリンクが貼られたことを自動的に通知してくれる機能ですが、それを悪用してDDos攻撃を仕掛ける事例がありました。 
なお、DDoS攻撃される側ではなく、DDoS攻撃に意図せず加担しているサイトとして、いわゆる踏み台として利用されてしまいます。 
※DDos攻撃とは、複数のコンピュータからひとつのサーバやサイトへ一斉にデータを大量送信することでアクセスダウンさせる攻撃のことです。 

2. XML-RPCを利用したブルートフォースアタック
XML-RPCに対して適当なログイン情報（ユーザー名・パスワード）を投げ続けて、ログインできる情報を不正に入手しようとする事例がありました。 
その後、悪意のあるファイルを設置したり、本来の管理者がログインできないようにしたりする攻撃が多いです。 

具体的なXML-RPCの無効化については、[別のサイトで記述があったので、こちら](https://wordpressdeec.jp/howto/howto-040/)を参照ください。 
近年では、xml-rpcを使わず、同等のことができる「REST API」を用いていることが増えています。 

## まとめ
手軽さやドキュメントの多様性など便利な面の多いWordPressには、セキュリティの脆弱性がまだまだあるということを知ってもらえたら嬉しいです。 
その脆弱性を知ることで対策ができます。(知らないとできません。知らないではすみません。) 
ものによっては、WordPress側で事前に対策しておけよとか、思う部分もあるかと思いますが、一つ一つ丁寧に設定して安心のサイト作りを心がけていけたらいいなと思います。 
日々アップデートを頑張っていきましょう！

wordpress-581849_1280.jpg

知らないとマジやばいセキュリティ【WordPress編】

## はじめに

この記事では、SassのMixinを使って、CSSのプロパティに値を適切な単位で自動的に適用する方法を説明します。SassはCSSの拡張言語であり、Mixinは再利用可能なスタイルのブロックを定義する機能です。Mixinを使用すると、同じスタイルを複数の場所で使い回すことができます。

具体的には、ビューポートの幅に応じて値を調整するためのVW単位や、親要素やコンテキストの幅に応じて値を計算するためのパーセンテージ単位を自動的に適用します。これにより、レスポンシブデザインを実現し、異なるデバイスや画面サイズに対応したスタイルを簡単に作成できます。

SassのMixinを使用して、VW単位やパーセンテージ単位を自動的に計算する方法を詳しく解説します。この方法を理解し、実際のプロジェクトで活用することで、効率的で柔軟なスタイルシートの作成が可能になります。

以下の項目を含めて、SassのMixinの活用方法を説明します。

1. Sassとは何か？
2. Mixinとは何か？
3. 単位の値を自動的に計算する方法

## 1. Sassとは何か？

Sass（Syntactically Awesome Stylesheets）は、CSSの記述をより効率的にするための拡張言語です。基本的には、普通のCSSと同じようにスタイルを記述しますが、いくつかの追加機能を提供しています。例えば、変数やネスト、Mixinなどの機能があります。これらの機能を使うことで、スタイルシートの記述が簡潔になり、保守性が向上します。つまり、SassはCSSの書き方をより便利にするためのツールです。

## 2. Mixinとは何か？

Mixin（ミキシン）は、Sassで再利用可能なスタイルの塊を定義する方法です。基本的には、CSSのスタイルルールをまとめたコードブロックです。これを定義しておくと、同じスタイルを複数の場所で使い回すことができます。Mixinは、プロパティと値の組み合わせをパラメータとして受け取り、それをCSSに変換します。つまり、同じスタイルを何度も書く必要がなくなり、コードの再利用性と保守性を高めることができます。

## 3. 単位の値を自動的に計算する方法

単位の値の自動計算とは、SassのMixinを使って、指定された値に適切な単位を自動的に付与することです。例えば、ビューポートの幅に対して相対的な値であるVW（viewport width）単位や、親要素やコンテキストに対する割合で指定するパーセンテージ単位などがあります。これらの単位を自動的に計算してCSSに適用することで、レスポンシブデザインや柔軟なスタイル設計を実現できます。

単位の値を自動的に計算する方法を使うと、以下のような利点があります。

**1. 画面サイズに合わせて自動調整:** 画面の大きさに応じて、文字や要素の大きさを自動的に調整できます。

**2. 手間を省く:** 値を手動で調整する必要がなくなり、開発時間を短縮できます。

**3. 一貫性を保つ:** 同じ値が異なる場所で常に同じように表示され、一貫性のあるデザインを保つことができます。

**4. レスポンシブデザイン:** 異なるデバイスや画面サイズに対応しやすくなり、ユーザーに最適な表示を提供できます。

### 3.1. VW単位の自動計算

VW単位の自動計算は、ビューポート（ウェブページを表示する画面領域）の幅に対する割合で値を指定する方法です。これは、画面の幅に応じて要素のサイズやフォントサイズを自動的に調整することを意味します。Sassのmixinを使えば、このVW単位を活用した自動計算を簡単に実現できます。つまり、画面の大きさに合わせて要素の大きさや文字サイズが自動的に変化するように設定できるということです。

**_get_vw**という関数と**fz-vw**というMixinが用意されています。これらの機能を使うことで、vwを簡単に設定できます。

**コード例(SCSS)**

```
//pxをvwに変換するfunction
@function _get_vw($size, $viewport: 640) {
 $rate: calc(100 / $viewport);
 @return $rate * $size * 1vw;
}

//フォント用のMixin
@mixin fz-vw($font_size: 10, $viewsize: 640) {
 font-size: $font_size * 1px;
 font-size: _get_vw($font_size, $viewsize);
}

width: _get_vw(117,640);
padding: _get_vw(15,640) 0;
@include fz-vw(29,640);

```

**実行結果(CSS)**

```
width: 18.28125vw;
padding: 2.34375vw 0;
font-size: 4.53125vw;

```

上記のにコードの詳細な説明を示します。

#### 関数 _get_vw ####

**引数:** 
```$size```: 変換対象のピクセル値 
```$viewport```: 参照するビューポート幅（デフォルト: 640px）

**戻り値:** 
ピクセル値をvwに変換した値

**Mixin fz-vw**

**引数:** 
```$font_size```: 設定するフォントサイズ（ピクセル値） 
```$viewsize```: 参照するビューポート幅（デフォルト: 640px） 
```width: _get_vw(117,640);```:要素の幅を117pxをvwに変換した値に設定します。 
```padding: _get_vw(15,640) 0;```:要素のパディングを左右に15pxをvwに変換した値、上下に0を設定します。 
```@include fz-vw(29,640);```:要素のフォントサイズを29pxをvwに変換した値に設定します。

**戻り値:** 
ビューポート幅に応じて要素のサイズやフォントサイズが自動的に調整されます。


### 3.2. パーセンテージ値の自動計算

パーセンテージ値は、親要素やコンテキストの幅に対する割合で値を指定するための単位です。SassのMixinを使って、特定のピクセル値を親要素やコンテキストの幅に基づいて自動的にパーセンテージ値に変換する方法を説明します。

**コード例(SCSS)**

```
//pxを%に変換するfunction
@function sw($size, $basewidth: 1180) {
 $rate: calc(100 / $basewidth);
 @return $rate * $size * 1%;
}

padding-top: sw(20,640);
width: sw(47,560);
```

**実行結果(CSS)**

```
padding-top: 3.125%;
width: 8.4%;
```

上記のにコードの詳細な説明を示します。

#### 関数 sw ####

**引数:** 
```$size```: 変換したいピクセル値 
```$basewidth```: 基準となるウィンドウ幅（デフォルトは1180px）

**処理:** 
```$rate = calc(100 / $basewidth);```
ウィンドウ幅に対する1pxあたりの割合を計算します。 
```@return $rate * $size * 1%;```:ピクセル値を割合に変換し、% を付加します。

**戻り値:** 
ピクセル値をウィンドウ幅に対する割合に変換した値（%）

**補足** 
```$basewidth``` は、関数内でデフォルト値として1180pxが設定されていますが、必要に応じて変更できます。vw単位以外にも、em単位やrem単位など、様々な単位を使ってレスポンシブデザインを実現できます。
今回の例では、ウィンドウ幅に対する割合を計算するために calc() 関数を使用していますが、Sassのバージョンによっては div() 関数でも同様の処理を行うことができます。


## まとめ

今回紹介した方法を使えば、簡単にレスポンシブなWebデザインを作成できます。ビューポートの幅に対する割合で値を指定するVW単位や、親要素やコンテキストの幅に対する割合で値を指定するパーセンテージ単位を活用することで、画面サイズに応じて自動的にスタイルを調整できます。実際にプロジェクトに適用してみて、どのように効果が現れるか試してみてください。


## 参考

https://qiita.com/katsunory/items/3bede89cee8e2ded8426

SassのMixinを使って、単位、幅の値を自動的に計算

2024年4月1日より、障害者差別解消法の改正内容が適用され、障害がある方への「合理的配慮」が義務付けられました。これまでは、国や地方公共団体などに義務付けられていましたが、その適用範囲が拡張され、民間事業者に対しても適用されます。  
  
合理的配慮とは、例えば、  
  
・車いすの利用者が移動しやすいように手伝う。スロープを設置する。  
・窓口で、手話や筆談で意思の疎通をする。  
  
などが該当します。  
  
社会生活の中にある障壁を取り除き、全ての人が利用しやすいバリアフリーな環境を実現するため、負担が重すぎない範囲で対応することが努力義務となりました。これは接客業を行う事業者に限定された話ではありません。スターフィールドのようにWeb制作を行う事業者も対応が必要となります。  
  
Webサイト制作においては、「Webアクセシビリティを確保した開発」が求められます。  
  
##bアクセシビリティとは
  
Webアクセシビリティとは、すべての人がWebサイトにアクセスしやすく不自由なく使える状態を指します。そしてなるべく向上させていくことを理想としています。  
  
一般的に、Webアクセシビリティが確保できているとは、以下の状態を指します。  
  
・視覚障害あっても情報が伝わり、操作もできること。  
・キーボードだけで操作できること。  
・一部の色が区別できなくても得られる情報に欠損が無い事。  
・音声コンテンツや動画コンテンツを設置したさい、音声が聞こえなくても情報が分かること。  
  
もはやインターネットは情報インフラとして社会に欠かせない物となり、あらゆる方が使用します。もちろん五体満足の健常者だけでなく、高齢者や、視覚障害や聴覚障害などの障害者なども利用します。  
特に障害者に関しては、症状や程度は人それぞれです。そういった個々の状況に応じた対応が求められます。障害者に限定しなくても怪我や病気で一時的ハンデを負う人、加齢により視力の衰えが有る方も利用しやすい環境整備が必要です。  
  
こういったすべての人々がWebサイトを不自由なく利用できるようにすることが、ウェブアクセシビリティの要件です。なので、どんな事情がある方でも利用しやすい環境を提供することが、企業の社会的な責任として求められます。

また、この対応をすることは障害者のために負担を強いられる作業ではなく、使いやすい便利なWebサイトを開発することでもあり健常者にとっても有益なことです。
  

 ![](https://cont.sterfield.co.jp/uploads/photo1_76ee39cc16.jpg) 



## 実践プロセス
  
実際にどういう点に気を付けてコンテンツ制作をするべきか、政府広報オンラインや、デジタル庁のWebアクセシビリティ導入ガイドブックなどでも案内されていますので、紹介します。  
  
### 音声を自動再生させない
  
音声を自動再生することや強制的に再生させることは避けるべきです。もし、自動再生するのなら3秒以内に収め、3秒以上続く場合は利用者が止められるようにする必要があります。  
また、音声の流れるページや動画広告などで自動再生する場合は、一時停止またはミュートボタンを設置するべきです。  
  
### ポップアップなどモーダルウィンドーには終了ボタンをつける
  
Webサイトはマウス操作が難しい場合はキーボードだけで利用する方もいます。その際、モーダルウィンドーを開いた際、モーダルウィンドウを閉じるボタンがないとキーボードの操作だけではモーダルウィンドウからの離脱ができません。  

### 1秒に3回以上光が点滅するコンテンツは作らない
  
高速で光の点滅を繰り返すコンテンツは光感受性発作などを発生する恐れがあります。時には重大な健康被害が出ることもあります。  
アニメーションを制作するならその危険性も十分知っておくべきです。

### 自動でコンテンツを切り替えない
  
情報を受け取れる速度は人によって異なります。また、画面上に動き続けるコンテンツがあると、他の箇所の操作や閲覧を妨げられる利用者もいます。そのため、スライドショーなど、自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する必要があります。

### ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する

画像を使用する際はalt属性を設置して代替テキストの設置が必要です。代替テキスト」は画像で提供される情報に対して「同等の役割を果たすテキスト」のことで、画像の変わりにこのテキストが表示されても違和感がないことが望まれます。  
  
具体的には、以下になります。  
  
・画像がリンクの場合、代替テキストはリンク先を示す内容であるべき。  
・グラフや図表はその要約を記述するべき。但し、隣接するテキストに要約があるのなら、何のグラフや図表を示すだけでよい。  
・文字や（ロゴマークや見出しなど）を表現している場合、同じ文字を記述するべき  
・装飾など意味がない画像については空のaltを設置するべき  
  
また、文字数については制限がありませんが、スクリーンリーダなどで音声出力されることを考慮すると80字ほどを目安にするべきです。
  
### キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする

マウス操作が難しい人はキーボードの操作に頼らず負えません。  
そのため、フォーカスインジケーター（選択中の要素に枠線）をつけるなどキーボード操作前提の作り方をするべきです。

### 色の違いだけで情報を伝えるのやめる
  
色覚に異常があり、正常に色が見えない人がいます。他えば赤色が分からない人が下記図を見ると全てが黒一色に見えてしまいます。


 ![](https://cont.sterfield.co.jp/uploads/sample1_f3f00e436c.png) 

  
このようなデザインでは必須項目が分かりません。  
  
### テキストはスクリーンリーダで音声として出力されることを意識する
  
視覚障害がある方、テストはスクリーンリーダなどを使ってテキストを音声として出力します。  
  
下記図の「日時」と「場所」の表記について、左側の方では、「日　時」「場　所」とスペースが空いています。スペースは全角のスペースを入力して作りました。  
  
 ![](https://cont.sterfield.co.jp/uploads/sample2_dfae820b43.png) 
  

この場合、スクリーンリーダで読んでみると、「ひ　とき」「ば　ところ」と呼んでしまいいます。  
  
もし、このようにスペースを空けるデザインをするなら、CSSを用いて広げないとスクリーンリーダが正しく読み取れません。
  
### リンク先を明確にする
  
リンクでどこか他のページへ移動する際どんなページへ移動するか明確にするべきです。例えば、以下のようなコンテンツの場合、左側のリンクは「詳しくはこちら」とだけ書いてあり、このボタン単体では移動先がどのようなコンテンツか分かりません。  
  

 ![](https://cont.sterfield.co.jp/uploads/sample3a_e9c460827b.png) 

  
視覚情報を使える人なら、テキストに付随したものと判断できるでしょうが、音声情報だけであったり、点字ディスプレイではその前後関係の把握が分かりにくい可能性があるのでリンクだけでどこに移動するか明確にした方がいいです。  
  
  
など、多くの事例があります。  
  
また、肝心なことはプロジェクトを進めるに辺り、一人担当者を決めて対応するのではなく、プロジェクトに関わる全員が対応策を検討し、メンバー全員でどんな対策を検討するべきか検討することが重要です。基本的には、JIS X 8341-3:2016などのガイドラインを参考にして開発を行い、チェックツールで確認しながら、向上させていくのが一般的ですが、結局のところ、最適解は人間が判断して決めなくてはいけないからです。  
  
例えば、画像には代替えテキストを設置するべき点を例にすると、ガイドラインでも示しているし、もし抜けがあったらチェックツールで指摘してくれます。なので、設置漏れは防げますが、どんな代替えテキストが適切かはコンテンツによって異なります。  
仮に犬と猫が映っている写真があったとします。これに入れる代替テキストは「犬の写真」或いは「猫の写真」とした方がいいのか、「動物の写真」とした方がいいのか、これはコンテンツ次第です。この判断は人間にしかできません。  
  
## まとめ
  
今回ガイドラインを見て指摘している点は、普段の業務で「既にやっている」あるいは、「できればやった方がいい」と言われている物が多かったのですが、強く意識していない点でもありました。  
しかし、より良い物を作る上ではしっかり意識しなくてはいけないなと思いました。今後はガイドラインを参考にしてより良いサービスを提供できるようにつ努めていきます。
  
#### 参考記事
  
政府広報オンライン：  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1
  
  
デジタル庁　Webアクセシビリティ導入ガイドブック  
https://www.gov-online.go.jp/useful/article/202310/2.html#c1


240419_mv.jpg

Webアクセシビリティの義務化について調べてみました

## はじめに

Prisma でデータベーススキーマを書く際に、[ZenStack](https://zenstack.dev/) というフレームワークが便利だったので紹介します。
ZenStack にはさまざまな機能がありますが、今回はデータベーススキーマの定義について重点的に説明します。

## ZenStack とは

ZenStack は、Node.js と TypeScript 向けのフルスタック開発フレームワークです。データベーススキーマを定義するだけで、フロントエンドとバックエンドの実装を自動的に生成できます。
ZenStack は、Prisma ORM をベースとして構築されているので、Prisma のすべての機能を利用できます。

## ZenStack を使用したデータベーススキーマの書き方

ZenStack では、[ZModel](https://zenstack.dev/docs/reference/zmodel-language) というデータモデリング言語でデータベーススキーマを作成します。
[Prisma Schema](https://www.prisma.io/docs/orm/prisma-schema) をベースとしているので、基本的な文法は Prisma Schema と同じように書くことができます。

また、VSCode 向けに[ZenStack の拡張機能](https://marketplace.visualstudio.com/items?itemName=ZenStack.ZenStack)が用意されています。
エラーチェックやコード補完をしてくれるので、ZModel でデータベーススキーマを書く際はインストールしておくと便利です。

## ZModel を Prisma Schema に変換する方法

ZModel で定義したデータベーススキーマを Prisma で使用するには、以下のコマンドで ZModel → Prisma Schema に変換する必要があります。

```
npx zenstack generate
```

変換元と変換先のファイルパスを指定したい場合は package.json に以下の設定を記述します。

```
  "zenstack": {
    "schema": "[変換元のZModelファイル(デフォルト：./schema.zmodel)]"
    "prisma": "[変換先のSchemaファイル(デフォルト：./prisma/schema.prisma)]",
  },
```

## ZModel の便利機能

Zmodel で利用できる便利な機能をいくつか紹介します。

### abstract

ベースとなる抽象化 model を作成し、各項目を継承できます。
登録日時などのように、各テーブルに共通なフィールドがある場合に使うと便利です。

```
generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url = env("DATABASE_URL")
}

abstract model Base {
  id Int @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model User extends Base {
  email String @unique
  name String
  posts Post[]
}

model Post extends Base {
  title     String
  content   String?
  published Boolean @default(false)
  author    User? @relation(fields:  [authorId], references: [id])
  authorId  Int?
}
```

上記 ZModel を変換すると、以下のような Prisma Schema が生成されます。

```
datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
}

generator client {
    provider = "prisma-client-js"
}

model User {
    id Int @id() @default(autoincrement())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt()
    email String @unique()
    name String
    posts Post[]
}

model Post {
    id Int @id() @default(autoincrement())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt()
    title String
    content String?
    published Boolean @default(false)
    author User? @relation(fields: [authorId], references: [id])
    authorId Int?
}
```

### ファイル分割

1 ファイルで全てのスキーマを定義すると、スキーマが増えてくるにつれて管理が大変になると思います。
そこで、ZModel ファイルを分割してスキーマ定義する方法を紹介します。

今回の例では ZModel ファイルを以下のように分割してみます。

- base.zmodel: generator や datasource を記述するファイル
- user.zmodel: user のスキーマ
- post.zmodel: post のスキーマ

base.zmodel

```
// importに分割したZmodelファイルをすべて記載します
import "user"
import "post"

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url = env("DATABASE_URL")
}
```

user.zmodel

```
model User {
  id Int @id() @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt()
  email String @unique()
  name String
  posts Post[]
}
```

post.zmodel

```
model Post {
  id Int @id() @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt()
  title String
  content String?
  published Boolean @default(false)
  author User? @relation(fields: [authorId], references: [id])
  authorId Int?
}
```

変換元のファイルを「base.zmodel」に指定して変換すると、以下のような Prisma Schema が生成されます。

```
datasource db {
    provider = "postgresql"
    url = env("DATABASE_URL")
}

generator client {
    provider = "prisma-client-js"
}

model User {
    id Int @id() @default(autoincrement())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt()
    email String @unique()
    name String
    posts Post[]
}

model Post {
    id Int @id() @default(autoincrement())
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt()
    title String
    content String?
    published Boolean @default(false)
    author User? @relation(fields: [authorId], references: [id])
    authorId Int?
}
```

### 属性

ZModel でのみ使用できる属性を一部紹介します。
詳しい内容は[公式リファレンス](https://zenstack.dev/docs/reference/zmodel-language#attribute)をご確認ください。

#### @password

データベースにハッシュ化した文字列を登録/更新します。
内部的には[bcryptjs](https://github.com/dcodeIO/bcrypt.js#readme)ライブラリを使用してハッシュ化しているようです。

以下のように引数が定義されていて、saltLength からハッシュのコストを設定したり、salt の設定も可能です。

```
@password(saltLength: Int?, salt: String?)
```

#### @omit

この属性を指定したフィールドはデータ呼び出し時に値が取得されなくなります。
上記の@password と組み合わせて使用すると便利です。

## まとめ

最近リリースされたばかりのフレームワークだからなのか、情報量が少なく調べるのに苦労しました。
今回は ZModel を重点的に紹介しましたが、他にも魅力的な機能がたくさんあるライブラリなので、次の機会に紹介したいと思います！

## 参考

- https://ZenStack.dev/
- https://www.ey-office.com/blog_archive/2023/09/20/i-learned-a-little-more-about-zenstack-zmodel-is-useful/
- https://www.Prisma.io/docs/orm/Prisma-schema/data-model/models
- https://zenn.dev/smish0000/articles/f1a6f463417b65


logo.png

ZenStack を使用してデータベーススキーマを作成する

## はじめに

Google Cloud の [Cloud Run](https://cloud.google.com/run?hl=ja) を使ってインターネット上に公開せず内部からのアクセスのみを受け付けるサービスを構築する場合、いくつかの方法がありますが認証オプションを「認証が必要」にしてデプロイする方法がもっとも簡単です。

 ![cloud-run-deploy](https://cont.sterfield.co.jp/uploads/cloud_run_deploy_0b4c2235ac.png) 


この方法でデプロイした Cloud Run サービスの URL にブラウザでアクセスするとリクエストに認証情報が含まれてないため

```
Error: Forbidden
Your client does not have permission to get URL / from this server.
```

というエラーが表示されます。このエラーを回避して、アクセスする方法のうち代表的な3パターンを紹介します。

## 前提

Node.js で書かれたアプリケーションがデプロイされた次の 2 つの Cloud Run サービスがデプロイされている環境があるとします。

- 「Front」はインターネット上から直接アクセスされることを想定しているため、認証オプション「未認証のアクセスを許可」を設定してデプロイされている
- 「Internal」は「Front」から内部でアクセスされるもので外部からのアクセスを拒否したいため、認証オプション「認証が必要」を設定してデプロイされている

![cloud-run-diagram](https://cont.sterfield.co.jp/uploads/cloud_run_diagram_a0a3472409.png) 

## ① 他の Cloud Run サービスからアクセスする方法

「Front」 → 「Internal」

同じプロジェクトでデプロイされた Cloud Run 同士でアクセスする場合、[Google Auth Library](https://github.com/googleapis/google-auth-library-nodejs)を使うことで認証に必要なトークンを含んだ HTTP ヘッダーが取得できます。

「Front」の Cloud Run サービスをデプロイしたサービスアカウントに`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されている場合、下記のようなコードでアクセスが可能になります。

```
import { GoogleAuth } from "google-auth-library";

・・・

const auth = new GoogleAuth();
const client = await auth.getIdTokenClient(`${「Internal」のURL}`);
const headers = await client.getRequestHeaders();

// headersの中に Authorization: Bearer ${トークン} が設定されている
await fetch(`${「Internal」のURL}`, { headers });
```

## ②Cloud Run 以外のサービスからアクセスする方法

Cloud Scheduler → 「Internal」

[Cloud Scheduler](https://cloud.google.com/scheduler?hl=ja)から「Internal」にアクセスする場合は、HTTP ターゲットを作成する際、Auth ヘッダーを「OIDC トークンを追加」に設定してサービスアカウントに`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されているものを設定すると、自動でトークンを付与した HTTP アクセスを行ってくれます。

 ![cloud-scheduler](https://cont.sterfield.co.jp/uploads/cloud_scheduler_74457eda15.png) 

[Cloud Pub/Sub](https://cloud.google.com/pubsub?hl=ja)などでも同じように OIDC 認証を設定することでアクセス可能になります。

## ③ ローカルからアクセスする方法

開発者のローカル PC のコンソール → 「Internal」

gcloud CLI を使うことで開発用の汎用 ID トークンを生成することができます。`Cloud Run 起動元` (`roles/run.invoker`) ロールが付与されているユーザーでログインして、[`gcloud auth print-identity-token`](https://cloud.google.com/sdk/gcloud/reference/auth/print-identity-token)を実行するとログインユーザーのトークンが取得できます。

curl コマンドと組み合わせて下記の様に実行することでアクセスが成功します。

```
curl -H "Authorization: Bearer $(gcloud auth print-identity-token)" ${「Internal」のURL}
```

## まとめ

今回紹介した内容はすべて Google Cloud の公式ドキュメントに記載されているものですが、複数のページにまたがって解説されており、個人的に探すのが大変だったのでブログにまとめました。同じような苦労をされている方のお役に立てれば幸いです。

## 参考リンク

- https://cloud.google.com/run/docs/tutorials/secure-services?hl=ja
- https://zenn.dev/steelydylan/scraps/60f3536dd0c9b4
- https://cloud.google.com/scheduler/docs/http-target-auth?hl=ja
- https://cloud.google.com/run/docs/authenticating/developers?hl=ja#curl

cloud_run.png

認証が必要な Cloud Run サービスにアクセスする方法まとめ

## はじめに
フロントエンドにおいても、製品の品質を向上させ、維持していく上で、テストは必須と言えるほど重要になってきています(参考: <a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">Frontend Developer Roadmap</a>)。 
テストの状態を計測するよく使われる指標の一つとして、テストのカバレッジ率があります。 
フロントエンドのテストは、主に単体テスト、統合テスト（コンポーネントテスト）、E2Eテストに分けられます。 
Cypressでは基本的にこれらすべてを一元的に実装できるため、テストを書く上で便利です。 
ただ、CypressはJestやJestベースのPlarywrightと違って、標準ではカバレッジレポートを出力できません。 
特にNext.jsでは<a href="https://docs.cypress.io/guides/tooling/code-coverage" target="_blank" rel="noopener noreferrer">公式で紹介されている方法</a>そのままでは計測できなかったので、 
Next.jsとCypressを使ったサイトでテストカバレッジ率を計測する方法について、 
実際に検証しながら整理してみました。

※この記事では、Cypressの導入部分は省略します

## 全体の流れ
1. 計測のためのプラグインを追加する
1. package.json レポートのオプションを追加
1. Cypress の config に計測のための設定をを追加
1. Cypress の 共通設定部分にプラグインの読み込みを追加
1. Next.js の config にプラグインの記述を追加
2. テストを実行し、レポートを表示する

## 計測のためのプラグインを追加する
Cypressでカバレッジ率のタスクを実行するための **@cypress/code-coverage** と Next.jsでレポートを作成するための **swc-plugin-coverage-instrument** をインストールします。
```bash
npm i -D @cypress/code-coverage swc-plugin-coverage-instrument
```

## package.json レポートのオプションを追加
レポートに含めたいファイルや、含めたくないファイルがある場合、以下のように"nyc"の項目を追加して、オプションを指定します。

###### package.json
```diff
{
 "name": "example",
 ︙
 },
+ "nyc": {
+ "extension": [".ts", ".tsx"],
+ "include": ["pages/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],
+ "exclude": ["node_modules/**", "mock-data/**", "cypress/**", "**/*.cy.ts"],
+ "excludeNodeModules": true,
+ "excludeAfterRemap": true
+ }
}
```

## Cypress の config に計測のための設定を追加
cypress.config.ts へ以下のように、コードカバレッジを計測するための設定を追加します。

###### cypress.config.ts
```diff
import { defineConfig } from "cypress";
+ import codeCoverageTask from "@cypress/code-coverage/task";

export default defineConfig({
 env: {
 enableMock: true,
+ codeCoverageTasksRegistered: true
 },
 e2e: {
+ setupNodeEvents(on, config) {
+ codeCoverageTask(on, config);
+ return config;
+ },
 baseUrl: "http://localhost:3000"
 },
 component: {
 devServer: {
 framework: "next",
 bundler: "webpack"
 },
 defaultCommandTimeout: 6000,
+ setupNodeEvents(on, config) {
+ codeCoverageTask(on, config);
+ return config;
+ }
 }
});
```

## Cypress の 共通設定部分にプラグインの読み込みを追加
cypress/support/component.ts や cypress/support/e2e.ts に、 
プラグイン読み込みのコードを追加します。
###### cypress/support/component.ts | cypress/support/e2e.ts
```diff
+ import "@cypress/code-coverage/support";
```

## Next.js の config にプラグインの記述を追加
next.config.js のビルド設定部分にも、プラグインの記述を追加します。

###### next.config.js
```diff
const withImages = require("next-images");

module.exports = withImages({
 trailingSlash: true,
+ experimental: {
+ swcPlugins: [
+ ["swc-plugin-coverage-instrument", {
+ compact: false
+ }]
+ ],
+ },
});
```

## テストを実行して、レポートを表示する
これで、準備ができましたので、実際にテストを実行してレポートを表示してみます。

### テストを実行
テストの script は package.json で以下のように設定しているとします。
```diff
{
 ︙
 "scripts": {
 ︙
+ "cypress": "cypress open",
+ "cypress:e2e": "cypress run --e2e",
+ "cypress:component": "cypress run --component"
 ︙
 },
 ︙
}
```

コンポーネントテストを実行してみます。
```
npm run cypress:component
```
テストが終了すると、以下のディレクトリにファイルが生成されます。 
- coverage
- .nyc_output

coverage/lcov-report/index.html を表示すると、 
以下のようなレポートを確認できます。 
 
 ![](https://cont.sterfield.co.jp/uploads/report_gui_883931f06d.png) 

また、以下のようにコマンドを打つことで、概要を表示できます。
```bash
npx nyc report --reporter=text-summary 
```
 
 ![](https://cont.sterfield.co.jp/uploads/report_cl_7970bcc25b.png) 
状態、分岐、関数、行数など、色々な方向で評価してくれます。

## まとめ
Next.jsでは、バンドラーがSWCなため、公式ドキュメントに従って設定すると実行が難しいことがわかりました。 
ただ、調査を進めることで、レポートの取得が可能であることがわかりました。 
今後はこれを活用し、Next.jsとCypressを組み合わせて効果的なテスト運用を構築していく予定です。 
この組み合わせにおいては、準備が整えば手軽にテストレポートを取得でき、より効率的かつ信頼性の高い開発プロセスを構築できると考えています。 
今回の課題を克服することで、将来的なプロジェクトでの利用をスムーズに進めることが期待できます。 
Next.js ✖️ Cypressの組み合わせを最大限に活かし、テストの品質向上に貢献していきます。

## 参考リンク

- [Frontend Developer Roadmap](https://roadmap.sh/frontend)
- [Code Coverage | Cypress Documentation](https://docs.cypress.io/guides/tooling/code-coverage)
- [swc-plugin-coverage-instrument](https://github.com/kwonoj/swc-plugin-coverage-instrument?tab=readme-ov-file)

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - カテゴリー: 開発ナレッジ

2024/12/20

2024/12/06

2024/11/20

2024/10/25

2024/10/11

2024/09/13

2024/08/30

2024/08/02

2024/07/19

2024/06/27

2024/06/13

2024/05/31

2024/05/17

2024/05/02

2024/04/19

2024/04/05

2024/03/15

2024/03/01