KDE BLOG

バイブス

「マイクロインタラクション UI/UXデザインの神が宿る細部」を読んだ

こちらの書籍を読みました。 www.oreilly.co.jp UIデザイナーである自分にとって明日から使えるTipsがたくさん詰まっておりとても読み応えのある良い本でした。 まだ全てを理解できていませんが、現時点の読んだ感想などを書き残したいと思います。 理解でき…

【Human Interface Guidelines 翻訳 vol.19】iOS - Visual Design - Typography

元ページ Typography - Visual Design - iOS - Human Interface Guidelines - Apple Developer Typography(タイポグラフィ) SF Pro and SF Compact SF Pro Rounded and SF Compact Rounded SF Mono New York Choosing Fonts to Enhance Your App(アプリを…

【Human Interface Guidelines 翻訳 vol.18】iOS - Visual Design - Terminology

元ページ Terminology - Visual Design - iOS - Human Interface Guidelines - Apple Developer Terminology(用語)

【Human Interface Guidelines 翻訳 vol.17】iOS - Visual Design - Materials

元ページ developer.apple.com Materials System-Defined Materials and Vibrancy(システム定義のマテリアルと鮮やかさ)

【Human Interface Guidelines 翻訳 vol.16】iOS - Visual Design - Launch Screen

元ページ Launch Screen - Visual Design - iOS - Human Interface Guidelines - Apple Developer Launch Screen(起動画面)

【Human Interface Guidelines 翻訳 vol.15】iOS - Visual Design - Dark Mode

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode/ Dark Mode(ダークモード) Dark Mode Colors(ダークモードでの色) Image, Icon, and Symbol Color(画像、アイコン、シンボルの色) Materials(…

【Human Interface Guidelines 翻訳 vol.14】iOS - Visual Design - Color

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/ Color(色) System Colors(システムカラー) Dynamic System Colors(ダイナミック[動的]システムカラー) Color Management(色の管理)

【Human Interface Guidelines 翻訳 vol.13】iOS - Visual Design - Branding

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/branding/ Branding(ブランディング)

【Human Interface Guidelines 翻訳 vol.12】iOS - Visual Design - Animation

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/animation/ Animation(アニメーション)

【Human Interface Guidelines 翻訳 vol.11】iOS - Visual Design - Adaptivity and Layout

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/ Adaptivity and Layout(適応性とレイアウト) Device Screen Sizes and Orientations(デバイスの画面サイズと向き) Auto Layout(自…

【Human Interface Guidelines 翻訳 vol.10】iOS - App Architecture - Settings

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/settings/ Settings(設定)

【Human Interface Guidelines 翻訳 vol.9】iOS - App Architecture - Requesting Permission

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/requesting-permission/ Requesting Permission(許可の要求)

【Human Interface Guidelines 翻訳 vol.8】iOS - App Architecture - Navigation

元ページ https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/ Navigation(ナビゲーション) Hierarchical Navigation(階層ナビゲーション) Flat Navigation(フラットナビゲーション) Content-Driven or …

【Human Interface Guidelines 翻訳 vol.7】iOS - App Architecture - Modality

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/ Modality(モーダリティ) Sheet(シート) Fullscreen(全画面表示)

【Human Interface Guidelines 翻訳 vol.6】iOS - App Architecture - Loading

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/loading/ Loading(ローディング)

【Human Interface Guidelines 翻訳 vol.5】iOS - App Architecture - Onboarding

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/onboarding/ Onboarding(オンボーディング)

【Human Interface Guidelines 翻訳 vol.4】iOS - App Architecture - Launching

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/

【Human Interface Guidelines 翻訳 vol.3】iOS - Interface Essentials

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/overview/interface-essentials/

【Human Interface Guidelines 翻訳 vol.2】iOS - Mac Catalyst

下記ページの翻訳です。 https://developer.apple.com/design/human-interface-guidelines/ios/overview/mac-catalyst/ Mac Catalyst Before You Start(始める前に) Plan Enhancements for Your Mac App(Macアプリの機能強化を計画する) Adopt macOS App…

【Origami Studio】Coming From Code の翻訳

アニメーションのプロトタイピングを作るのに最適なツールを探していて、Origami Studio を使い始めました。 最初はちょっと取っ付きにくくて「やっぱタイムライン式のほうがいいかな…」と思ったけれど、チュートリアルをやっていくうちに大体使い方を分かっ…

【Human Interface Guidelines 翻訳 vol.1】iOS - Themes

UIの勉強のため、最新版の Human Interface Guidelines を読もうと思います。 ほぼ Google 翻訳です。 なんども見返すことになると思うので記事として残しておきます。 まずは iOS から。本記事は下記ページの翻訳となります。 https://developer.apple.com/…

さくらのVPS に Let's encrypt を導入してお名前.comで取得したドメインをサブドメイン含めてSSL対応する

やりたいこと さくらのVPSでSSL対応をしたい 独自ドメインはお名前.comで取得済み 本番環境用のドメイン(example.com)、テスト環境用のサブドメイン(test.example.com)の両方をSSL対応したい 個人開発で上記を達成するためにいろいろ試行錯誤したので備…

【SVG 基礎 vol.1】SVGとは・viewPortとviewBox・基本の書き方・埋め込み方法

SVG

これまでSVGに関しては、アイコンやロゴをpngやgifなどのビットマップ画像の代わりに少し使う程度で、アニメーションに関してもCSSアニメーションやJavaScriptのDOMアニメーションで事足りていました。 しかしSVGのことをちゃんと知ってマイクロインタラクシ…

bindActionCreators を使うと何がいいのか実際コードを書いて理解する

前回の記事で触れた bindActionCreators ですが、今まで使ったことがないので簡単なカウンターアプリを作って、実際に使ってみて一体何がいいのかを確認してみました。 カウンターアプリ ver.1 コード(ファイル名押下でコード展開) redux container compon…

【React Redux】mapDispatchToProps の公式ドキュメント訳

前回の mapStateToProp に続いて mapDispatchToProps の公式ドキュメントについても google 翻訳の力を借りて目を通したので、残しておきます。 react-redux.js.org

【React Redux】mapStateToProps の公式ドキュメント訳

React-reduxの公式ドキュメントを久しぶりに見てみると、いろいろと更新されていたので、ちゃんと読みこむことをしています。 今回、connect を使って store とコンポーネントを接続する際に使用する mapStateToProps についての下記ドキュメントを google …

React Context APIを理解する

ここしばらくフロントの勉強が疎かになっており、会社での立場に危機感(?)を感じたので、現実から逃げずにちゃんと勉強していくことにしました。 今回は 下記公式ドキュメントを元に Context API について理解したいと思います。 ja.reactjs.org Context …

名前付け大全を読んだメモ

WEB+DB PRESS VOL.110 の特集「設計も、実装も、ここから始まる!名前付け大全」を読んだメモです。 第1章 「良い名前」とは何か なぜ名前付けが重要なのか 悪い名前の問題 理解が困難 勘違いが起こる 変更が難しい 読みにくい なぜ名前はあるのか 第2章 名…

【webpack速習】vol.13: Build Performance

下記ページのざっくりとした翻訳。 webpack.js.org General Stay Up to Date(最新に保つ) Loaders Bootstrap Resolving Dlls Smaller = Faster Worker Pool Persistent cache(永続キャッシュ) Development Incremental Builds Compile in Memory stats.t…

【webpack速習】vol.12: Environment Variables

下記ページをざっくりとまとめます。 webpack.js.org 概要 問題点 cross-envの使い方