Delphi / C++Builder Starter Edition が無償でご利用いただけるようになって、１年が経ちました。そこで無償提供開始1周年を記念して、2017年9月22日(金)に「Delphi / C++Builder Starter チュートリアルシリーズ スペシャル」というWebセミナーを開催いたしました。
今回のWebセミナーは放送時間１時間を3つのセッションに区切って放送いたしましたが、ライブセミナーということでオンタイムにご視聴頂けなかった方もいらっしゃると思います。
そこでこの記事では、2限目の20分間でお送りした「作成したアプリケーションが動かない！？その解決法を学ぶ」の一部を抜粋してご紹介いたします。他の記事へのリンクは、本記事の最後のほうに掲載しております。
Table of Contents
セミナー動画をオンデマンドで公開中
セミナーのビデオを公開しています。下記URLより視聴申し込みを行うと無料でご覧いただけます。
http://forms.embarcadero.com/starter-tutorial-webinar-special
2限目:「操作性や見た目を変える技法を学ぶ」
2限目のQ&Aの内容は下記の通りです。
- Windows10にフィットする画面にするには？
- Windowsタブレット向けにアプリを作ろうと思うのですけど、注意点はあります
か？ - アプリの外観を変更するには、どのような方法がありますか？
[Q] Windows10にフィットする画面にするには？
まずはWindows10の画面とはどんなものかご覧いただきましょう
このWindows10のUIから見て取れるポイントは
- シンプルで2次元的
- タッチ操作も考慮に入れられたUIづくりがされている
- 横長ディスプレイに合わせて両サイド端を有効利用している
といったところがわかりますね。
そこで、「Windows10にフィットする画面にするには」Windows10の特徴にあったUIパーツを利用しよう！
- フラットデザインのUIパーツを使用して「見た目」から入ってみましょう。VCL使用時はコンポーネントとしてWindows10カテゴリがあり、フラットUIが準備されています。
- タッチ操作も視野に入れたアプリ作りをしましょう。TToggleSwitchなどを使っ
てタップでスイッチを切り替えるようなコンポーネントを使うとよりタップ操作が
しやすくなります。 - 横長を意識したサイドを有効利用したアプリづくりをしましょう。例えば
TSpilitViewを使うことでサイドからパネルを引き出すUIが実装でき、設定ボタン
などの実装に活用できます！
[Q] Windowsタブレット向けにアプリを作ろうと思うのですけど、注意点はありますか？
タブレット向けにアプリを初めて作る場合に意識することは大別すると以下の２つです。
- タッチパネルは指で触れるデバイスであること
- 画面全体を１つのアプリが占有する前提で考えること
もしもタブレットを屋外の作業現場で使う場合はタブレットを片手で持ちつつ、もう片手で操作することになりますが、キーボードとマウス操作が前提のデスクトップ向けアプリをタッチパネルだけで操作する場合に使い勝手が落ちることは想像に固くないと思います。
ですので、タブレット向けアプリでは、指だけで誤操作なく操作できるようにコントロールの大きさや配置に注意し、また多くの機能を１画面に詰め込みすぎないように注意すると、使い勝手が損なわれずに済みます。
例えばこれはデスクトップアプリでありがちな、グリッドを使った例です。このようなインタフェースはキーボード+マウスでは遜色なく使えますが、指で操作するには少々窮屈ですね。
これに対して、機能を絞り込んでシンプルなUIにすると、マウスでも指でも操作しやすいインタフェースになります。
このインタフェースの一覧表示を組み合わせたい場合は、画面の右または左にリスト表示を加えればよいでしょう。
あるいは、タブレットをいっそのことスマートフォンの大きいやつ、くらいのイメージで作り込んでみるのも一つの方法です。というのも、タブレットとスマートフォンは実際に使用するときに視野内を占める実質的な面積に大差がないからです。
次の写真は、iPhone7 Plusを30cmの距離から、iPad 9.7inchを50cmの距離から撮影したものを並べたものです。スマートフォンを目の前で使う距離、タブレットをゆったりした姿勢で使う場合の距離は概ねコレくらいの範囲に収まります。
iPadのほうが横幅が広い分だけゆったりしていますが、アプリのアイコンの大きさや画面の縦幅はiPhoneとiPadで同等です。つまりスマートフォンとタブレットの視野内での有効面積は案外大差が無いのです。
そうすると、タブレットをノートパソコン的に使いたい場合と、大きいスマートフォン（シニア向けスマートフォン？）的に使いたい場合の２種類のニーズが出てきます。ターゲットのユーザー層や使われ方によっては、スマートフォン向けを意識したインタフェースにしたほうが使いやすくなる場合もあります。
[Q] アプリの外観を変更するには、どのような方法がありますか？
Delphi/C++Builerで作成したアプリは、スタイル、という機能を用いることで外観をスキンのように変えることができます。このときにアプリのフォーム上でのコンポーネントの配置を変えることなく、見た目や色だけを変更できます。
この画像はWebセミナー中に紹介したスライドですが、スタイルを切り替えた例を紹介しています。このようにコンポーネントの配置は同じでもスタイルの違いによって印象がずいぶん変わります。
このスタイル機能の利用方法は VCL(Windows専用フレームワーク) と FireMonkey（クロスプラットフォーム開発向けフレームワーク）で以下のように異なります。
- VCL ではアプリケーションのビルド設定にてスタイルを設定できます。この設定はアプリを実行する際に適用されますので、フォームのデザイン時には選択したスタイルが適用された状態を確認できないことにご注意ください。
- FireMonkey では、「StyleBook コンポーネント」にてスタイルの切替の機能を提供しています。こちらは「StyleBookコンポーネントの配置」「StyleBookへのカスタムスタイルの設定 or 読み込み」「Form のプロパティで使用する StyleBook の選択」という３つの作業で設定できます。VCL とは違い、適用したスタイルは、フォームのデザイン時点でご確認頂くことができます。
1限目、3限目の記事のご紹介
本記事は全3限構成の2限目の記事です。他の記事については以下のリンクからお読み頂けます。
- 1限目： データ入力、保存、出力を学ぶ
- 3限目： 作成したアプリケーションが動かない!? その解決法を学ぶ
Starter エディションから上位エディションへのアップグレードキャンペーン実施中です。
Delphi発売22周年を記念して、上位エディションへのアップグレードをおよそ20% OFFの特別価格で提供中です。
お申込みは2017年9月27日(水曜日)まで、Eショップ限定です。最終日の終了時刻はショップによって異なりますので、各ショップのご案内をご確認ください。
詳細につきましては下記のURLでご案内しています。
https://www.embarcadero.com/jp/radoffer
Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Free Delphi Community Edition Free C++Builder Community Edition
