クロスプラットフォームライブラリとAPI
Qt Creator IDEと生産性向上ツール
UI compositionのためのUIデザインツール
Qtプロジェクト向け
モバイルアプリのデジタル広告
受託開発、トレーニング、サポート等
組み込み向けユーセージ分析
Qtは、UIデザインやソフトウェア開発から品質保証、展開に至るまで、製品開発ライフサイクル全体で生産性を向上させます。あなたのニーズに最も適したソリューションを見つけてください。
最新のリソースを入手し、今後のイベントを確認しましょう。
理想的な学習リソースを見つけたり、コミュニティと交流したりして、Qtのスキルを向上させましょう。
初心者であろうとベテランのQtプロであろうと、成功するために必要なサポートと助けがすべて揃っています。
3月 29, 2024 by Qt Group 日本オフィス | Comments
Coffee Machine は人気のあるサンプルで、固定サイズのコンテンツとして組み込みデバイス向けに作成されました。
この記事ではCoffee Machineサンプルを刷新するために何が行われたのか、また Android、iOS、その他 Qt がサポートするプラットフォーム上の様々なデバイスでシームレスに動作するためにどのような改善が行われたのかを紹介します。
モバイルデバイスをターゲットにしたアプリケーションでは、さまざまな画面サイズに動的に対応することが重要です。
再設計されたCoffee Machineの例では、まずルートオブジェクトのwidthとheightプロパティを設定することで、どのようなサイズのディスプレイに対してもスケーラビリティを確保します。
ApplicationWindow の設置:
ApplicationWindow {
visible: true
width: Screen.desktopAvailableWidth
height: Screen.desktopAvailableHeight
...
}
これにより、タスクバーやシステムメニューなどのウィンドウマネージャーが使用する領域を除いて、ApplicationWindowがターゲットデバイスのディスプレイ全体を埋めるように設定されます。 そのため、オブジェクトツリーの下位にあるページコンポーネントは、親コンポーネントである ApplicationWindow のサイズを気にすることなく、親コンポーネントの領域を完全に埋めるようになります。
ここでの文脈におけるレスポンシブとは、主にモバイル端末の向き (縦向き/横向き) と、それに伴うサンプルUIの見た目の変化のことを指します。新しいデザインは、ステートマシンを使ってこのレスポンシブを実現しています。ステートマシンは、ApplicationWindowの幅が高さより大きいか、その逆かをチェックし、それに応じてUIコンポーネントを変更します。
今回の例における最新UIデザインは、Qtデザインチームによるものです。 彼らは新しいUI要素と、ポートレートモードとランドスケープモード向けの別々のデザインを作成しました。
これらの作業はすべて Figma を使用して行われ、Figma ではレイアウト、スタイル、および色のコードが自動生成されます。開発者がそこからさまざまな値を抽出し利用しています。
残念ながら、今回のケースでは Figma で生成されたレイアウトとコンポーネントのコードは、アプリケーションのスケーラビリティを考慮しておらず、Figma から Qt アプリケーションへのコードのコピーはあまり役立ちませんでした。
しかし、 Figma 内でのデザイナーと開発者の共同作業において大いに恩恵はありました。 Figma デザインから、Coffee Machine 例のソースコードへ、デザイン全体の見た目、ページレイアウト、画像、色、および一般的なコンポーネントのサイズなのど値を参照することができました。 また、Figma が提供するコメント機能を使用して、同じプラットフォーム上で考えやアイデアを共有することができました。
旧バージョンのコーヒーマシンの例のUI、起動時:
旧バージョンではスケーリングの処理はなかった。
新バージョンでは、縦向きと横向きの両方に対応した専用レイアウトデザインを採用。新バージョンのデザイン
こうした変化は、例えばコーヒー選びのページなど、後半になるほど顕著になる:
ここでは、縦向きと横向きで異なる構成を見て取れます。
「 Squish 」を使用し、Coffee Machine の品質保証のために、自動化テストたテストを行いました。たびたびのリリースにおいて、Coffee Machine 例のすべての UI 要素が正しく表示されるかどうか、さまざまなモバイル デバイスのディスプレイ サイズで要素のはみ出がないかなどの意図した通りに動作するかを確認しています。
「 Squish for Qt 」を使用すれば、Android 以外のプラットフォーム (iOS や組み込み Linux など) でも同じテストを実行できます。
商用ライセンスのトライアルやオープンソースを利用したい方は、ぜひQtの無料トライアルを開始してみてください!また、Qtについてご質問あり場合は、お気軽にお問い合わせください。
Download the latest release here: www.qt.io/download.
Qt 6.8 release focuses on technology trends like spatial computing & XR, complex data visualization in 2D & 3D, and ARM-based development for desktop.
Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.
10 23, 2024
本稿は「Ensuring Product Longevity With Qt Long-Term Support」の抄訳です。..
10 11, 2024
本稿は「Qt for Python release: 6.8 is out now!」の抄訳です。 Qt for Python..
Qt Group includes The Qt Company Oy and its global subsidiaries and affiliates.