2023-01-01から1年間の記事一覧

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 ダーク…