はてなブックマーク

書籍「プロセス・オブ・UI/UX［UXデザイン編］ 実践形式で学ぶリサーチからユーザー調査・企画・要件定義・改善まで」の中から、実践で役立つ考え方と設計方法など大きく3つの項目について厳選してまとめます。 現代において、UI/UXデザインは製品やサービスの成功に必要不可欠な要素となっています。 しかし、書籍やインターネットで知識を得ても、それを実際のプロジェクトで活用することに苦労する人は多いのが現状です。抽象的なUXの理論を、どのように実務の具体的なアクションに繋げれば良いかという課題があるのです。 本書『プロセス・オブ・UI/UX［UXデザイン編］』は、株式会社エクストーン代表の桂 信氏が、20年にわたる現場経験から執筆した、UI/UXデザインの理論とノウハウを実践形式で学べる書籍です。 本書は「UXデザイン編」と「UIデザイン編」の全2巻構成であり、UXデザイン編では、リサーチから要

書籍「プロセス・オブ・UI/UX［UIデザイン編］ 実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで」の中から、実践で役立つ考え方と設計方法など5つの項目について厳選してまとめます。 現代において、UI/UXデザインは製品やサービスの成功に必要不可欠な要素となっています。 しかし、書籍やインターネットで知識を得ても、それをプロジェクトで実践し活用する際に苦労するケースが多く見られます。 本書『プロセス・オブ・UI/UX［UIデザイン編］』は、株式会社エクストーン代表の桂 信氏が、20年にわたる現場経験から執筆した、UI/UXデザインの理論とノウハウを実践形式で学べる書籍です。 本書は「UXデザイン編」と「UIデザイン編」の全2巻構成であり、UIデザイン編では、UXデザイン編で定義された要件をもとに、ワイヤーフレーム作成からビジュアルデザイン、開発連携に至る具体的なUI化の

「テキスト変換ツールテキスト変換ツール（大/小 全/半 かな/カナ）アプリ」は、 テキスト変換に特化した便利ツールアプリです。 iOS（iPhone / iPad）に対応しています。 デザインは最新のLiquid Glass（ガラスのような透明感のあるUI）を採用しています。 よく使われる、大文字/小文字変換、全角/半角変換、ひらがな/カタカナ変換に対応しています。 〜テキストでニーズの高い文字列変換ツールアプリ〜 ※オフラインで使えます。 SafariやChromeなどブラウザでコピーしたテキストを、このアプリでペーストするだけで簡単に変換が可能です。 ニーズの高い以下の変換に対応しています。 ■大文字↔小文字変換 ■全角↔半角変換 ■ひらがな↔カタカナ変換 全角しか受け付けないWebのフォーム、半角しか受け付けないWebのフォームってありますよね。 Webページを切り替えてテキスト変換

このモードは、音楽制作の知識がなくても簡単に楽曲を作成できる方法です。 手順： ログイン後、画面左のメニューから「Create」を選択 「Description your song」の入力欄に、作りたい曲のイメージを記入（最大200文字） 「Create」ボタンをクリック プロンプト例： 英語の例： "a happy J-pop love song with female vocals, bright melody, and upbeat tempo" 日本語の例： "明るくポップな恋愛ソング、女性ボーカル、キャッチーなメロディ" ポイント： 英語でプロンプトを書く方が安定した結果が得られやすい ジャンル、雰囲気、テンポ、楽器などを具体的に指定 生成時間は通常4分未満で、2つのバージョンが生成される より細かい設定で、プロ級の楽曲制作が可能なモードです。 設定項目： 歌詞（Lyrics）

GitHub Copilot Agent、Gemini CLI、Claude Code のAIコード生成ツール比較 - Flutter開発での実践検証 2025年6月に相次いでリリースされたAIコード生成ツール「GitHub Copilot Agent」「Gemini CLI」「Claude Code」を、Android StudioでFlutter開発において実際に比較検証。同一のプロンプトでRiverpod+Hooks+Freezedを使用したテキストエディタページの自動生成を実施し、各ツールのコード生成プロセスと品質を詳細に分析。 GitHub Copilot Proプランのcoding agent機能、Googleの無料Gemini CLI、Claude Proプランで利用可能なClaude Codeそれぞれの特徴と生成結果を比較。リッチテキスト表示、ランダムスタイル変更、クリップ

AIコーディングアシスタント徹底比較：GitHub Copilot Agent・Gemini Agent Mode・Gemini CLI・Claude Code完全ガイド 2025年6月、AIエージェント技術による自動コード生成ツールが相次いでリリースされました。Github Copilot Agent / Gemini Agent Mode / Gemini CLI / Claude Codeはすべて、「AI Agent」であり、コーディングに特化した「AI Code Assistant」サービス・ツールです。 Gemini CLIとClaude Codeは、CLIベースのエージェント、Github Copilot AgentとGemini Agent Modeは、AI Code Editorsと、インターフェースの違いがある表現だということです。GitHub Copilot Agent

2025年6月25日、GoogleからオープンソースのAIエージェント「Gemini CLI」が発表・公開されたばかりですが、2025年6月26日 Geminiエージェントモードが追加されたプレビュー版「Anndroid Studio」がリリースされました。 現時点ではベースになっているのはGemini CLIと同じくGemini 2.5 Proとなっており、Googleアカウントがあれば無料で使うことができます。 具体的にはCanary版「Android Studio Narwhal Feature Drop」に「Gemini」のエージェントモード（Agent Mode）が追加されました。 「Android Studio Narwhal Feature Drop」のダウンロードはこちらから可能です。 「Gemini in Android Studio」のエージェントモードは、AIとのチャ

2025年5月にClaude Codeが一般提供開始、6月にはGoogleからオープンソースのAIエージェント「Gemini CLI」が公開され、AIによるコード生成が大きく進化しました。本記事では、Android StudioでのFlutter開発において、両ツールの生成コードとプロセスを徹底比較しています。 検証環境はMac（macOS Sequoia）、Android Studio（Meerkat 2024.3.2）で、Riverpod+Hooks+Freezedを使用した開発中のFlutterプロジェクトで実施。共通のプロンプトとして、テキスト入力・リッチテキスト表示・スタイルランダム変更・コピー機能・トースト表示を含むtext_edit_page.dartの作成を指示しました。 Gemini CLIは実行前にタスクを整理し、既存コードの構成を分析。fluttertoastの代わり

Flutter開発の効率を劇的に向上させるAIツール「Gemini CLI」をAndroid Studioで活用する方法を実践的に解説。MacでのGemini CLIのインストールから、実際にFlutterアプリのコード自動生成までの全工程を詳しく紹介します。 今回のデモでは「入力したテキストをリッチテキストで表示」をAIが実装。わずか一つのプロンプトで、Gemini CLIはRiverpod + Hooks + Freezedを適切に組み合わせた本格的なコードを生成。状態管理からアニメーション制御まで、プロダクションレベルの品質で実装されています。 環境構築はHomebrewとNode.jsのインストールから始まり、npm経由でGemini CLIを導入。Android Studioとの連携も簡単で、Googleの認証するだけで利用開始できます。 生成されたコードは4つのDartファイル

WWDC25でAppleが発表したモバイルアプリ開発の大幅アップデート Apple は WWDC25 で、iOS 26 と macOS Tahoe 26 に搭載される革新的な「Liquid Glass」デザインシステムを発表。ガラスの光学特性と流動性を組み合わせた新しい UI は、SwiftUI の .glassEffect() モディファイアで簡単に実装可能。 Xcode 26 には ChatGPT を含む大規模言語モデル（LLM）が統合され、AI によるコード生成、デバッグ、ドキュメント作成支援が実現。Swift 6.2 では @MainActor がデフォルト化され、並行処理の実装が大幅に簡素化。 SwiftUI の新機能として WebView、ToolbarSpacer、検索バーの自動配置、AttributedString 対応の TextEditor を追加。パフォーマンス最適化

Android Studio でも Claude Code プラグインをインストールして Flutterのコードを書かせてみた Flutter開発において、Claude Codeを使ってAIにコード生成を任せることで、開発効率を大幅に向上させたいと思いました。 なお、Claude Codeは2025年5月22日に一般提供が開始され、2025年6月4日にProプランとMaxプランの両方でClaude Codeにアクセスできるようになりました。 今回は一からプロジェクトを作成するのではなく、開発中のプロジェクトのひとつの画面を依頼してみようと思います。 その上で、まずは通常Flutterの開発に使用しているIDEの Android Studio 上で Claude Code を使えるようにしたいと思います。 とはいえ、Claude Code はコンソールベースのため、あまりIDEにUIが追加さ

良いコード/悪いコードで学ぶ設計入門 保守しやすい成長し続けるコードの書き方。 ITエンジニア本大賞2023で大賞を受賞し絶賛されている改訂新版。 AIが生成したコードやそれらをつなぎ合わせたプログラムなどが増加するこれから本格的に規模の大きいプログラムを書くことになる中級者を目指す人向けの理解しておくべきことが紹介されています。 悪しきコードがもたらす弊害。 読み解くのに時間がかかり、バグを埋め込みやすく、さらに悪い構造を誘発するものです。技術駆動命名や連番命名といった意味不明な命名。名前重要。 条件分岐の入れ子構造によるネストの嵐、重複コード、修正漏れ、可読性低下、未初期化、不正値の混入などバグを生み出し、開発生産性を低下させる悪魔退治をすべし。 深いネストと文の重複の解消する方法に早期return、ガード節。 switch文の重複を防ぐため、interfaceの活用。switch-c

Githubへのプッシュ実績のあるプロジェクトにおいて、突然プッシュができなくなってしまった。直前の変更が関係ある？ 開発しはじめたばかりのプロジェクトにおいて、githubにソースをpushすると、突然「HTTP 400」エラーが発生しました。 手元でのコミットは問題ありませんでしたので、プッシュ時に問題があるようです。 使用しているgithubのレポジトリへのプッシュは初回というわけではなく、何度か実績があったので、今回特別な問題があると推測されます。 エラーログは以下のとおりです。 git --no-optional-locks -c color.branch=false -c color.diff=false -c color.status=false -c diff.mnemonicprefix=false -c core.quotepath=false -c credentia

「複数行になる長文テキストを入れたUILabelやUITextViewを、適当な時間をかけて上から下方向へ自動的にスクロールするようにしたい」 スクロール方向は、映画のエンディングのスタッフロールのようなイメージです。 完成イメージは以下のとおりです。 画面上部には固定されたヘッダー部分がある前提で、その下から画面最下部までテキストがスクロールする領域となっています。 まず、UIScrollViewとUILabel/UITextViewの配置関係性だけであれば、StoryboardのConstraintsの設定だけでも可能ですが、自動スクロール自体や、スクロールスピードを考えると、ある程度プログラムを書く必要は出てきます。 Storyboardでの構造は以下のようなイメージです。 上記のようなStoryboardの例において、下3分の2くらいの領域にUIScrollViewを置いています。

iOS11で登場したばかりの新機能ARKitを使って、新たなサービスや現行のサービスの付加価値となるようなビジネスアイデアが出てきそうで楽しみだ。 2017年に発売されたiPhoneXと、同タイミングで公開されたiOS11のARKitにより、AR技術がより進化し、より身近なものとなりました。 ここでは具体的なアイデアとして、美術館や博物館などの施設で活用できそうな音声ガイダンスアプリを作ってみました。 サイト閲覧や画像、動画、音声の視聴はもちろん、位置情報やテキスト読み上げ（テキストtoスピーチ）、ARのためのカメラといったスマホが持つ機能を最大限に活用することを考えたモックアプリです。 美術館、博物館以外にも展示物に関する解説をするなど決まったテキストや音声を扱うようなサービスにはうまく当てはまるのではないでしょうか。 具体的には、箱根にある「箱根ガラスの森美術館」のサイトを例に、音声ガ

Flutter開発においてAndroidのビルド時の「Your project’s Gradle version is incompatible with the Java version that Flutter is using for Gradle」エラーの解決方法 iOSは問題ないがAndroidだけビルドエラー。実績のあるプロジェクトにおいて、AndroidStudioのバージョン「Koala」から最新の「Ladybug」にアップデートしたことで発生。 Flutterが使用しているGradleのバージョンとJavaバージョンの互換性が取れてないのが問題。 FAILURE: Build failed with an exception. * What went wrong: Could not open cp_settings generic class cache for set

毎回忘れがちなiOSとAndroidのストアURLを知る方法まとめ SNSやLP（ランディングページ）、関連WebサイトなどでアプリのリリースをPRのため、AppStoreとGooglePlayストアそれぞれのダウンロードページへのリンクを貼ることがある。Flutter開発でiOS/Android同時リリースの機会では同時に調べる必要がある。 iOSは、AppStoreConnectのアプリ情報の「Apple ID」 Androidは、プロジェクト作成時に設定した「Bundle ID」が対応。android/app/main/AndroidManifest.xml のandroid:nameプロパティか、android/app/build.gradle のapplicationIdに記載されている。 https://itunes.apple.com/jp/app/id[アプリのAppleI

最初に違和感を感じたのが、以下のスクリーンショットにある「級」という字です。 初級、中級、上級という単語で使用していますが、よく見ると「級」の糸へんの下の縦棒部分が、点になっていることがわかります。 習字で行書体を書くときのような形です。 iOSではこのような表示にはならず、問題なく縦棒になっています。 現在、Androidのシステムフォントは、Googleによって開発された「Roboto」か「Noto Sans CJK」です。 Flutterに限らず、Androidアプリの開発においてフォントファミリーを指定しなかった場合は、Androidの端末によってどちらかのフォントがデフォルトフォントとして適用されます。 なお、手元にあるAndroid端末は「Google Pixel 6a」です。 どうやらデフォルトフォントは「Noto Sans CJK」になっているようです。 さて、ではどうして

Cloud Storage for Firebaseの無料プランを利用しているユーザーは2025年10月以降使えなくなってしまう。既存アプリにおいて、無料で使っているFirebase Cloud Storageが、Blazeへのプランアップグレードを忘れると使えなくなってしまう。 「2025年10月1日より、デフォルト バケットと他のすべての Cloud Storage リソースへのアクセスを維持するには、Firebase プロジェクトが従量課金制の Blaze の料金プランに登録されている必要があります。*.appspot.com のデフォルト バケットは、Blaze の料金プランでも、現在の無料使用量を維持します。」 アップグレードしなかった場合、PROJECT_ID.appspot.com デフォルトバケットへの読み取り/書き込みアクセス権が失われるだけでなく、Firebaseコンソ