View Transitions API とは 異なるDOM状態間のアニメーション遷移を簡単に実現できるAPI これまでネイティブアプリでしか実装できなかったページをまたがるズムーズなアニメーション遷移も可能になる Chrome、Edgeはバージョン111以降でサポートされているが…
ウェブ・インクルーシブデザイン Webのアクセシビリティとインクルージョンを実現するための実践ガイド作者:Regine Gilbertマイナビ出版Amazon 目次・概要 第1章 アクセシビリティを考慮したデザイン 第2章 アクセシビリティ、コンテンツ、HTML、JavaScript…
縁の下のUIデザイン──小さな工夫で大きな効果をもたらす実践TIPS&テクニック (WEB+DB PRESS plus)作者:池田 拓司技術評論社Amazon 目次・概要 第1章:色,文字,動きによる見せ方の工夫 赤の使い方──色が与える直感的な印象を活かす 上手に配色するためのコ…
MLB の Stats API を使用 GAS で予定取得し変換、Googleカレンダーに登録 特定チーム(今回はエンゼルス)の予定を取得 時刻は日本時間に タイトルのチーム名は3文字の省略形(LAA など)に // GoogleカレンダーIDをセット const CALENDAR_ID = '[GOOGLE_CAL…
What does this code do? を見て、日本語で同じようなもの作れそうなのでやってみる。 コード入力/送信ボタン押下でOpenAI APIにリクエストを送りコードの説明を得る。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotaki…
ReactとOpenAI API(DALL-E API)を使って画像生成アプリを作ってみる。 キーワードを入力/画像生成ボタン押下でAPIにリクエストを送り画像を取得する。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotaki/chatgpt-dall-…
ReactとOpenAI APIを使ってチャットボットを作ってみる。 ChatGPTのWebブラウザ版と同じく、メッセージ入力/送信ボタン押下でOpenAI APIにリクエストを送り回答を得る。フロントのみなのでセッション保持などはなし。 GitHub: https://github.com/yuheijotak…
Slackメッセージ内のボタンクリックをトリガーとしてダイアログを表示させる場合。 ダイアログ内でユーザーのインプットが必要なときは dialog.open が必要。 Interacting with users through dialogs | Slack シンプルに OK , Cancel などの2択のボタンをダ…
以前の WordPress + Nuxt.js(Netlify) から Newt + Next.js(Vercel)の構成に変更しました。 GitHub: https://github.com/yuheijotaki/works-next Vercel: https://works.yuheijotaki.com/ 絞り込み機能のところで、 useState() を使って状態管理してみま…
ページ遷移時にローカルフォントのチラつきが気になったので対策。 結果改善されたようなのでメモ。 コード @next/font モジュールをインストール $ npm install @next/font ローカルフォントを定義。 フォントのデータは pages/fonts/** に配置する。 displ…
GAS → API Gatewayのリクエストのみ(レスポンスなし)でJSONファイルをS3へアップロードする。 主な手順 S3バケットを作成 権限作成 該当バケットへの s3:PutObject ポリシー作成 ロールにポリシーをつけて作成 Lambda 実行ロールに先程作成したロールを付…
Block Kit を使ってGAS → Slackにメッセージを送り、Slackで押下したボタンの値を受け取る。 ※ WebhookではなくSlack APIを使用する場合。 attachments でもリッチなメッセージは送れるが、SlackはBlock Kit Builderなどを利用した blocks 押しらしい。 メッ…
フロントをNext.js(TypeScript)、ヘッドレスCMSをNewtでサイトを作ってみて、勘所とまでいくか分からないですがつまづいたところ中心のメモです。 型 型の作成 型の作成はNewtのJSONプレビューから quicktype 使ったら早かった。 ここで生成したコードを t…
Newtをもう少し触る機会があったので、管理画面のフィールド作成や編集画面をWordPressと比べてみました。 フィールド作成 WordPress(ACF) Newt 編集画面 WordPress(ACF) Newt 所感 WordPressは元々ブログCMSのため、日付やカテゴリーが標準で用意されて…
Google Cloud(GC)の資格を昨年末に取得したので振り返りたいと思います。 取得日 資格名 2022/11/24 Cloud Digital Leader(CDL) 2022/12/13 Associate Cloud Engineer(ACE) 2022/12/26 Professional Cloud Architect(PCA) 受験理由・モチベーション …
前回の記事 にて、Next.jsのHello WorldからVercelへのデプロイまでを行いました。 今回はヘッドレスCMSを用いて登録したコンテンツの表示までを行ってみます。 構成 フロントエンド:Next.js ヘッドレスCMS:Newt ホスティング:Vercel Newt は昨年にローン…
ザ・ダークパターン ユーザーの心や行動をあざむくデザイン作者:仲野 佑希翔泳社Amazon 目次・概要 Chapter1 ダークパターンとは何か 1.1 消費者を惑わせるWeb サイト設計 1.2 ダークパターンとは何か、その定義 1.3 ダークパターンの世界的調査 1.4 ダーク…
すこし前に話題になったAmplify Studioを触ってみました。 ReactもFigmaも詳しくないのですが、今っぽいサービスなのと実際にどのくらい使えそうかを確認する目的です。 主に3つツールがそれぞれの役割で登場することになります。 Amplify Studio(AWSコンソ…
Container Queriesとは MDNによると、「コンテナのサイズを見て、コンテナ内のスペースに応じてレイアウトを調整できる」とあります。 この「コンテナ」とは、基本的にスタイル指定を行うコンポーネントの親要素になります。 例えば、サイドバーとメインエリ…
:modal 擬似クラスとは MDNでは、下記のように説明されています。 JavaScriptの showModal() によって表示される dialog 要素 JavaScriptの requestFullscreen() によって表示されるフルスクリーン要素 先日リリースされたChrome 105、Edge 105でSafari、Fir…
React のフレームワーク Next.js の Hello World から Vercel へのデプロイまでを試してみます。 基本的には 公式のチュートリアル を参考にしています。 やってみた 環境作成 create-next-app コマンドでプロジェクト作成します。 $ npx create-next-app@la…
コンポーネントの基本 — Vue.js より これはなにか Webアプリケーション開発において、コンポーネント指向で開発を行うことがあります。 「コンポーネント指向で開発」とは、例えばこのインターフェース上のパーツ要素(=コンポーネント)は汎用的に使用する…
Nuxt.jsのComposition API、useStatic() メソッドを使用して、API通信しない静的ファイルを書き出しできるかを試してみました。 経緯 開発案件でマークアップを担当する際に、開発リポジトリとは別にデザインチーム用のGitを作成するケースは多いです。 静的…
「うちのデザインレビューは“ここ”を見る【デザナレVol.11】」 を視聴したのでメモと感想を残しておきます。 目次・概要 ポートフォリオを介したマッチングプラットフォーム ViViViT を提供している 株式会社ビビビット さん主催の勉強会。 今回は3名の方が…
サイバーエージェントさんのオンラインイベント【CADC2022】内の 「事業とカルチャーを進化させる、Amebaのブランド戦略とデザインシステム」 を視聴したのでメモと感想を残しておきます。 目次・概要 CHAPTER1 広がるデザインの役割 CHAPTER2 Amebaでのケー…
はじめてのUXリサーチ ユーザーとともに価値あるサービスを作り続けるために作者:松薗 美帆,草野 孔希翔泳社Amazon 目次・概要 Chapter1 UXリサーチの捉え方 Chapter2 UXリサーチの始め方 Chapter3 UXリサーチの組み立て方 Chapter4 UXリサーチの手法を知る …
UXデザインの法則 ―最高のプロダクトとサービスを支える心理学作者:Jon YablonskiオライリージャパンAmazon 目次・概要 CHAPTER1 ヤコブの法則 CHAPTER2 フィッツの法則 CHAPTER3 ヒックの法則 CHAPTER4 ミラーの法則 CHAPTER5 ポステルの法則 CHAPTER6 ピー…
対象読者 クラウドプラクティショナーを取得済みで、次は各アソシエイト資格にチャレンジしようとしている方 開発、インフラ構築以外の業務を普段行っている方 背景 業務で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点 ※システム不具合…
結果 ブログ 目標:月 8 回(週2回)更新 結果:月 10 回 更新 読書 目標:月 1 冊 結果:月 3 冊 反省点など 満遍なくインプットできました。 来月に向けて AWS資格と並行しつつフロントエンド領域もとなると難しいですがなんとかやっていきたいです。