View Transitions API で画面遷移アニメーション

View Transitions API とは 異なるDOM状態間のアニメーション遷移を簡単に実現できるAPI これまでネイティブアプリでしか実装できなかったページをまたがるズムーズなアニメーション遷移も可能になる Chrome、Edgeはバージョン111以降でサポートされているが…

【読書メモ】ウェブ・インクルーシブデザイン ─ Webのアクセシビリティとインクルージョンを実現するための実践ガイド

ウェブ・インクルーシブデザイン Webのアクセシビリティとインクルージョンを実現するための実践ガイド作者:Regine Gilbertマイナビ出版Amazon 目次・概要 第1章 アクセシビリティを考慮したデザイン 第2章 アクセシビリティ、コンテンツ、HTML、JavaScript…

【読書メモ】縁の下のUIデザイン ─ 小さな工夫で大きな効果をもたらす実践TIPS&テクニック

縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS&テクニック (WEB+DB PRESS plus)作者:池田 拓司技術評論社Amazon 目次・概要 第1章:色,文字,動きによる見せ方の工夫 赤の使い方──色が与える直感的な印象を活かす 上手に配色するためのコ…

GASでMLB試合予定を日本時間でGoogleカレンダーに登録する

MLB の Stats API を使用 GAS で予定取得し変換、Googleカレンダーに登録 特定チーム(今回はエンゼルス)の予定を取得 時刻は日本時間に タイトルのチーム名は3文字の省略形(LAA など)に // GoogleカレンダーIDをセット const CALENDAR_ID = '[GOOGLE_CAL…

React / OpenAI API でコードを説明してもらう

What does this code do? を見て、日本語で同じようなもの作れそうなのでやってみる。 コード入力/送信ボタン押下でOpenAI APIにリクエストを送りコードの説明を得る。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotaki…

React / DALL-E API で画像生成

ReactとOpenAI API(DALL-E API)を使って画像生成アプリを作ってみる。 キーワードを入力/画像生成ボタン押下でAPIにリクエストを送り画像を取得する。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotaki/chatgpt-dall-…

React / OpenAI API でチャットボット作成

ReactとOpenAI APIを使ってチャットボットを作ってみる。 ChatGPTのWebブラウザ版と同じく、メッセージ入力/送信ボタン押下でOpenAI APIにリクエストを送り回答を得る。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotak…

Slack APIの確認ダイアログ

Slackメッセージ内のボタンクリックをトリガーとしてダイアログを表示させる場合。 ダイアログ内でユーザーのインプットが必要なときは dialog.open が必要。 Interacting with users through dialogs | Slack シンプルに OK , Cancel などの2択のボタンをダ…

Newt + Next.js + Vercel でポートフォリオサイトを作る

以前の WordPress + Nuxt.js(Netlify) から Newt + Next.js(Vercel)の構成に変更しました。 GitHub: https://github.com/yuheijotaki/works-next Vercel: https://works.yuheijotaki.com/ 絞り込み機能のところで、 useState() を使って状態管理してみま…

@next/font でローカルフォントを扱う

ページ遷移時にローカルフォントのチラつきが気になったので対策。 結果改善されたようなのでメモ。 コード @next/font モジュールをインストール $ npm install @next/font ローカルフォントを定義。 フォントのデータは pages/fonts/** に配置する。 displ…

GASからAWS API Gateway(Lambda)へリクエスト送信、ファイルをS3へアップ

GAS → API Gatewayのリクエストのみ(レスポンスなし)でJSONファイルをS3へアップロードする。 主な手順 S3バケットを作成 権限作成 該当バケットへの s3:PutObject ポリシー作成 ロールにポリシーをつけて作成 Lambda 実行ロールに先程作成したロールを付…

GASからSlack AppのBlock Kitでメッセージを送る & ボタンの値を受け取る

Block Kit を使ってGAS → Slackにメッセージを送り、Slackで押下したボタンの値を受け取る。 ※ WebhookではなくSlack APIを使用する場合。 attachments でもリッチなメッセージは送れるが、SlackはBlock Kit Builderなどを利用した blocks 押しらしい。 メッ…

Next.js マークアップ観点の勘所

フロントをNext.js(TypeScript)、ヘッドレスCMSをNewtでサイトを作ってみて、勘所とまでいくか分からないですがつまづいたところ中心のメモです。 型 型の作成 型の作成はNewtのJSONプレビューから quicktype 使ったら早かった。 ここで生成したコードを t…

WordPress(ACF)とNewtの管理画面の違い

Newtをもう少し触る機会があったので、管理画面のフィールド作成や編集画面をWordPressと比べてみました。 フィールド作成 WordPress(ACF) Newt 編集画面 WordPress(ACF) Newt 所感 WordPressは元々ブログCMSのため、日付やカテゴリーが標準で用意されて…

Google Cloud 認定資格 受験記(CDL/ACE/PCA)

Google Cloud(GC)の資格を昨年末に取得したので振り返りたいと思います。 取得日 資格名 2022/11/24 Cloud Digital Leader(CDL) 2022/12/13 Associate Cloud Engineer(ACE) 2022/12/26 Professional Cloud Architect(PCA) 受験理由・モチベーション …

Newtで登録したコンテンツをNext.jsで表示する

前回の記事 にて、Next.jsのHello WorldからVercelへのデプロイまでを行いました。 今回はヘッドレスCMSを用いて登録したコンテンツの表示までを行ってみます。 構成 フロントエンド:Next.js ヘッドレスCMS:Newt ホスティング:Vercel Newt は昨年にローン…

【読書メモ】ザ・ダークパターン ユーザーの心や行動をあざむくデザイン

ザ・ダークパターン ユーザーの心や行動をあざむくデザイン作者:仲野 佑希翔泳社Amazon 目次・概要 Chapter1 ダークパターンとは何か 1.1 消費者を惑わせるWeb サイト設計 1.2 ダークパターンとは何か、その定義 1.3 ダークパターンの世界的調査 1.4 ダーク…

AWS Amplify Studio を触ってみた

すこし前に話題になったAmplify Studioを触ってみました。 ReactもFigmaも詳しくないのですが、今っぽいサービスなのと実際にどのくらい使えそうかを確認する目的です。 主に3つツールがそれぞれの役割で登場することになります。 Amplify Studio(AWSコンソ…

CSS Container Queries を理解する

Container Queriesとは MDNによると、「コンテナのサイズを見て、コンテナ内のスペースに応じてレイアウトを調整できる」とあります。 この「コンテナ」とは、基本的にスタイル指定を行うコンポーネントの親要素になります。 例えば、サイドバーとメインエリ…

:modal 擬似クラスを試してみた

:modal 擬似クラスとは MDNでは、下記のように説明されています。 JavaScriptの showModal() によって表示される dialog 要素 JavaScriptの requestFullscreen() によって表示されるフルスクリーン要素 先日リリースされたChrome 105、Edge 105でSafari、Fir…

Next.js の Hello World から Vercel へのデプロイまで

React のフレームワーク Next.js の Hello World から Vercel へのデプロイまでを試してみます。 基本的には 公式のチュートリアル を参考にしています。 やってみた 環境作成 create-next-app コマンドでプロジェクト作成します。 $ npx create-next-app@la…

コンポーネント設計との上手な付き合い方

UI

コンポーネントの基本 — Vue.js より これはなにか Webアプリケーション開発において、コンポーネント指向で開発を行うことがあります。 「コンポーネント指向で開発」とは、例えばこのインターフェース上のパーツ要素(=コンポーネント)は汎用的に使用する…

Nuxt.jsでAPI通信なしの静的ファイルを書き出す

Nuxt.jsのComposition API、useStatic() メソッドを使用して、API通信しない静的ファイルを書き出しできるかを試してみました。 経緯 開発案件でマークアップを担当する際に、開発リポジトリとは別にデザインチーム用のGitを作成するケースは多いです。 静的…

【イベント】うちのデザインレビューは“ここ”を見る

「うちのデザインレビューは“ここ”を見る【デザナレVol.11】」 を視聴したのでメモと感想を残しておきます。 目次・概要 ポートフォリオを介したマッチングプラットフォーム ViViViT を提供している 株式会社ビビビット さん主催の勉強会。 今回は3名の方が…

【イベント】事業とカルチャーを進化させる、Amebaのブランド戦略とデザインシステム

サイバーエージェントさんのオンラインイベント【CADC2022】内の 「事業とカルチャーを進化させる、Amebaのブランド戦略とデザインシステム」 を視聴したのでメモと感想を残しておきます。 目次・概要 CHAPTER1 広がるデザインの役割 CHAPTER2 Amebaでのケー…

【読書メモ】はじめてのUXリサーチ ―ユーザーとともに価値あるサービスを作り続けるために

はじめてのUXリサーチ ユーザーとともに価値あるサービスを作り続けるために作者:松薗 美帆,草野 孔希翔泳社Amazon 目次・概要 Chapter1 UXリサーチの捉え方 Chapter2 UXリサーチの始め方 Chapter3 UXリサーチの組み立て方 Chapter4 UXリサーチの手法を知る …

【読書メモ】UXデザインの法則 ―最高のプロダクトとサービスを支える心理学

UXデザインの法則 ―最高のプロダクトとサービスを支える心理学作者:Jon YablonskiオライリージャパンAmazon 目次・概要 CHAPTER1 ヤコブの法則 CHAPTER2 フィッツの法則 CHAPTER3 ヒックの法則 CHAPTER4 ミラーの法則 CHAPTER5 ポステルの法則 CHAPTER6 ピー…

AWS認定試験 プラクティショナーから始めた人のためのアソシエイト資格取得

AWS

対象読者 クラウドプラクティショナーを取得済みで、次は各アソシエイト資格にチャレンジしようとしている方 開発、インフラ構築以外の業務を普段行っている方 背景 業務でAWSに触れる機会が少なめな人観点での記事は少なく感じましたので、かなり主観が入…

AWS DevOps エンジニア プロフェッショナル 受験記

AWS

これまで・今回の結果 2019/6/8 CLF 合格 830点 2019/7/6 SAA 不合格 630点 2020/1/4 SAA 合格 771点 2020/2/9 DVA 合格 845点 2020/2/14 SOA 合格 801点 2020/7/24 SAP 不合格 730点 2020/8/8 SAP 不合格 723点 2020/8/23 SAP 不合格 730点 ※システム不具合…

2021年3月 振り返り

結果 ブログ 目標:月 8 回(週2回)更新 結果:月 10 回 更新 読書 目標:月 1 冊 結果:月 3 冊 反省点など 満遍なくインプットできました。 来月に向けて AWS資格と並行しつつフロントエンド領域もとなると難しいですがなんとかやっていきたいです。