Qtで手軽にいろんなアイコンを使おう！QtAwesomeの紹介

19438 ワード
Qt FontAwesome Qt テキストリンク

この記事の対象の方

Qt Widgetをちょっと触ったことの有る方
Qt Widgetアプリケーションの見た目をちょっとリッチにしたい方

この記事でわかること

Font Awesome/QtAwesome とは
QtAwesomeの使い方

アイコン、使ってますか？

Webページなどでは、よく見出しやボタンにアイコンが付与されています。

アイコンの効果には、対象の内容を理解する助けになっていたり、
目的のものを見つけ出しやすくなったり、がありますね。

以下を見比べてみてください。

アイコンなし アイコンあり
- 天気予報 天気予報
- スポーツ スポーツ
- 芸能ニュース 芸能ニュース

アイコンの効果は一目瞭然ですね。

Font Awesome

Webにおいては、よく使われているのがこれ。

Font Awesome サイト

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
Font Awesomeを使えば、かんたんに拡大縮小可能なアイコンを表示できます。
サイズや色、ドロップシャドウなどのカスタマイズも、CSSによって行えます。

これは、各種アイコン（合計数百種！）をUnicodeにわりあて、
フォントデータにアイコンを埋め込んであります。
ベクターデータのフォントなので、拡大縮小も自由自在です。

サイトより必要なCSSなどをダウンロードし下記のように書くだけで、

test.html
<html>
<head>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>
<body>
  <p><i class="fa fa-github" aria-hidden="true"></i>fa-github</p>
</body>
</html>

下記のようにアイコンが表示されます。

Qt Awesomeについて

さて、ここからが本題です。
ライブラリ「QtAwesome」は、Qtアプリケーションでも、このFont Awesomeのすばらしいアイコンの数々をかんたんに使うことが可能にします。安心のMITライセンス。Font Awesomeのアップデートに細やかに追従してくれているので、安心して使えますね！
QtAwesome git repository

では、サンプルコードを交えて具体的な使い方を見ていきましょう。

ダウンロード・インストール

GitHubからgitでcloneしてくるか、ブラウザ上でzipなどでダウンロードします。
ライブラリ本体であるQtAwesomeディレクトリを、組み込み対象のプロジェクトファイルのあるディレクトリにコピーします。

今回は、QtAwesomeSampleというプロジェクトに組み込んでいきましょう。
上記のように配置したら、QtAwesomeSample.proに以下を追加します。

QtAwesomeSapmle.pro
...(省略)
SOURCES += main.cpp\
        MainWindow.cpp
HEADERS  += MainWindow.h
FORMS    += MainWindow.ui

# Qt Awesomeプロジェクトを組み込み 
include(QtAwesome/QtAwesome.pri)

以上でプロジェクトへの組込は完了です！

使い方

では、MainWindow.uiで作成した画面の各ボタンにアイコンを付けていってみましょう。

まず、QtAwesomeをインクルードします。

MainWindow.cpp
#include "QtAwesome.h"

つぎに、QtAwesomeインスタンスを生成し、initFontAwesomeを使用前に1回だけ呼び出します。今回は簡単にするためにMainWindowの中でやっちゃっていますが、本来ならこれらはアプリケーション共通の部分で行いましょう。

MainWindow.cpp
  // Qt Awesomeの設定
  QtAwesome *awesome = new QtAwesome(this);
  awesome->initFontAwesome();

さて、いよいよアイコンの設定です。
生成したawesomeインスタンスのiconメソッドに、faネームスペースで定義された定数を渡して生成したアイコンを、QPushButton::setIconによりボタンへ設定します。
faネームスペースに存在する定数と対応するアイコンは、こちらで探すことができます。

MainWindow.cpp
  // 設定ボタンのアイコン
  ui->pushButton->setIcon(awesome->icon(fa::cog)); // 歯車
  // ログ確認ボタンのアイコン
  ui->pushButton_2->setIcon(awesome->icon(fa::question)); // はてな
  // 問い合わせボタンのアイコン
  ui->pushButton_3->setIcon(awesome->icon(fa::envelopeo)); // メール

ビルドして実行すると……

殺風景だったボタンがちょっとかわいくなりましたね。
また、各ボタンの用途もわかりやすくなりました！

カスタマイズする

さきほどのコードを少し触って、「問い合わせ」のアイコンを赤色にしてみます。
QVariantMapに追加したいオプションのキーワードと値をセットし、QtAwesome::iconの第2引数として渡しましょう。

MainWindow.cpp
  // オプション追加
  QVariantMap options;
  options.insert( "color" , QColor(255,0,0) ); // 赤色にしてみる

// ui->pushButton_3->setIcon(awesome->icon(fa::envelopeo)); // メール
   ui->pushButton_3->setIcon(awesome->icon(fa::envelopeo, options)); // メール


赤色になりましたね。

iconメソッドで指定しなかったたオプションは、デフォルト値が使用されます。
デフォルト値は、次のようにFontAwesome.cppで設定されているほか、

FontAwesome.cpp
setDefaultOption( "color", QColor(50,50,50) );
setDefaultOption( "color-disabled", QColor(70,70,70,60));
setDefaultOption( "color-active", QColor(10,10,10));
setDefaultOption( "color-selected", QColor(10,10,10));

setDefaultOption( "text", QString() );      // internal option
setDefaultOption( "text-disabled", QString() );
setDefaultOption( "text-active", QString() );
setDefaultOption( "text-selected", QString() );

setDefaultOption( "scale-factor", 0.9 );

インスタンス生成後、独自に設定することもできます。

MainWindow.cpp
  // Qt Awesomeの設定
  QtAwesome *awesome = new QtAwesome(this);
  awesome->initFontAwesome();
  awesome->setDefaultOption( "scale-factor", 0.6 ); // ちょっと小さめ


何も指定しなくても、アイコンが全体的に小さめに表示されるようになりました！

MainWindow.cpp の全体は以下においておきます

MainWindow.cpp
#include "MainWindow.h"
#include "ui_MainWindow.h"
#include "QtAwesome.h"

MainWindow::MainWindow(QWidget *parent) :
  QMainWindow(parent),
  ui(new Ui::MainWindow)
{
  ui->setupUi(this);

  // Qt Awesomeの設定
  QtAwesome *awesome = new QtAwesome(this);
  awesome->initFontAwesome();
  awesome->setDefaultOption( "scale-factor", 0.6 ); // ちょっと小さめ

  // 設定ボタンのアイコン
  ui->pushButton->setIcon(awesome->icon(fa::cog)); // 歯車
  // ログ確認ボタンのアイコン
  ui->pushButton_2->setIcon(awesome->icon(fa::question)); // はてな

  // オプション追加
  QVariantMap options;
  options.insert( "color" , QColor(255,0,0) ); // 赤色にしてみる

  // 問い合わせボタンのアイコン
  ui->pushButton_3->setIcon(awesome->icon(fa::envelopeo, options)); // メール
}

MainWindow::~MainWindow()
{
  delete ui;
}

おわりに

QtAwesomeを使えば、だれでも手軽にアプリケーションをはなやかにすることができます。
もちろん、ボタンだけでなく、QMenu、QActionのアイコンとして使うこともできますし、QLabelなどに表示させることもできます。
ちょっと操作がわかりにくいかな？というときの解決策のひとつとして、使ってみてください！

Advent Calendarについて

この記事は、Qt Advent Calendar2016 23日目の記事でした。
枠をあけてくださった @task_jp さん、ありがとうございます！

昨日は、 @IoriAYANE さんの Qtからお手軽にZIPファイルを扱えるQuaZIPの紹介 でした！
伊織さんのブログにはQML関連の情報で非常にお世話になっているので、バトンをつなげて光栄です。笑
QMakeの文法も、QuaZIPの使い方についてもとっても参考になりました。QMAKEについての日本語の情報って確かに少ないので、敷居が上がっているところがありますよね。
非常に便利なので、触自動生成される部分以外でQMAKEを触ったことの無い方にも使っていってほしいですね！

さて、明日はクリスマスイブですね。
AkiEgaさんの「windows 10 64bitのQt 5.7 上でOpenCV 3.1を動かしてみた件」です！
Advent Calendarも残り2日。最後まで楽しみに読ませて頂きます！