読者です 読者をやめる 読者になる 読者になる

ComponentOne Information

ComponentOne Studio/Wijmo/Xuniの最新情報を公開中

Xamarin.Formsでカスタムフォントを利用したアイコンを表示する

Xuni

アイコンとは視覚的に操作が直感的にわかりやすいように、小さく図案化したものです。 各種アプリケーションで利用されているのでいまさら説明するまでもありません。

最近では「保存」を意味するアイコンが、本当にその形で良いのか?という疑問もありますが、 可能な限り多くの人に、わかりやすい形でデファクトスタンダードの方式で一般的なものが使われています。

アイコンを表示するためには、アイコン用の画像ファイルを利用するのが一般的でしたが、昨今ではアイコンを文字として定義し、その文字に対応したフォントでそれぞれのアイコンを示すこともあり、 フォントによるWebページやアプリ制作の現場で利用されています。

有名なのはFontAwesomeです。

Ver.4.7.0(2017年2月現在)では、675個のアイコンがフォントとして提供されています。
一般的なアイコンだけにとどまらず、著名企業やサービスのブランドロゴも含まれます。

これらはXamarinで開発するアプリでも利用可能です。
この記事では、このフォント「FontAwesome」をXamarin.Fomrsアプリで利用する手順を解説します。 Xuni(ズーニー)のコンポーネントであるFlexChartで表示したグラフのX軸ラベルに、おなじみのブランドアイコンを表示します。

フォントの配布
今回はアプリの配布は行いませんが、FontAwesomeはオープンフォントライセンスなのでアプリにフォントを添付できます。
“FontAwesome” is lisenced under the SIL Open Font License 1.1
SIL Open Font License


サンプルプロジェクトの作成

Xamarin.Formsを利用し、C#でAndroid、iOSのサンプルアプリを作成します。
Xuniでチャートを表示するアプリです。手順は以下になります。

  1. Xamarin.Formsのプロジェクトを作成
  2. Xuniを利用する設定
  3. フォントファイルをプロジェクトに組み込む
  4. 表示用データを作成するクラスを作成
  5. 表示する画面の設定

1と2の説明は省略します。すでにXuniの利用準備が整っているプロジェクトを公開していますので、これを改造して利用します。プロジェクトは以下からダウンロード可能です。

フォントをプロジェクトに組み込む

FontAwesomeは前述のWebサイトで公開されていますので、ダウンロードして利用できます。 ダウンロードしたファイルFontAwesome.otfは、Android/iOSそれぞれのプロジェクトに保存してください。

それぞれの保存先は以下です。 また、各ファイルのプロパティも設定します。通常はファイルを追加した時点でこの設定になっています。

プロジェクト ファイル保存先 プロパティ設定
Android Assets/Fonts ビルドアクション:AndroidAsset
出力ディレクトリにコピー:コピーしない
iOS Resources/Fonts ビルドアクション:BundleResource
出力ディレクトリにコピー:コピーしない

iOSプロジェクトの設定

次に各プロジェクトからフォントを利用する設定です。
iOSでは、前述の場所にフォントファイルを格納し、フォントの利用をinfo.plistに記載するだけです。

info.plistの指定

今回はVisual Studio for Macを利用します。

f:id:ComponentOne_JP:20170221155823p:plain

  1. Visual Studio for Mac でinfo.plistを開いて[ソース]のタブを選択
  2. 「新しいエントリの追加」をクリックして、ドロップダウンからFonts provided by applicationを選択
  3. 文字列にフォントファイルを保存したResources以下のパスFonts/FontAwesome.otfを記述

f:id:ComponentOne_JP:20170221155719p:plain

Xamarin Studioでも同じ作業が可能ですがVisual Studioの場合はIDE画面での設定ができません。XMLファイルとして直接編集して以下の内容を追記してください。

<plist version="1.0">
  <dict>
       : 省略 
    <key>UIAppFonts</key>
    <array>
        <string>Fonts/FontAwesome.otf</string>
    </array>
</dict>
</plist>

Androidプロジェクトの設定

Androidは特に指定する必要はありません。
しかし、そのため設定したフォントをコードで指定しても、追加したフォントの場合は適用してもらえず表示されません。
プラットフォーム固有の機能を追加して、Androidアプリにフォントの設定を追加をする必要があります。

Webサイトのナレッジベース
iOSアプリの入力領域を角丸の枠線で囲む方法 (Xamarin.Forms)
で利用したEffects機能で、Androidアプリのみに適用する設定を追加します。

Effectsの作成
  1. Androidプロジェクトに、新たにFontEffect.csクラスファイルを追加します。
  2. 作成したEffectを参照するためのassembuly属性を以下のように記述します。
[assembly: ResolutionGroupName("Effects")]
[assembly: ExportEffect(typeof(FontEffect), "FontEffect")]

3.PlatformsEffect クラスを継承し、OnAttachedメソッドをオーバーライドします。
4.FlexChaertコントロールに対して、指定したフォントからTypeFaceを作成して設定します。

上記を記述したC#のコードです。

using System;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xuni_QuickStart.Droid;
using Com.GrapeCity.Xuni.FlexChart;

[assembly: ResolutionGroupName("Effects")]
[assembly: ExportEffect(typeof(FontEffect), "FontEffect")]
namespace Xuni_QuickStart.Droid
{
 public class FontEffect : PlatformEffect
 {
    protected override void OnAttached()
    {
        // FlexChart に特化した設定
        if (Control.GetType().Equals(typeof(Com.GrapeCity.Xuni.FlexChart.FlexChart)))
        {
            // フォント格納場所のパス
            var fontPath = "Fonts/FontAwesome.otf";
            // FlexChartにキャスト
            var flexChart = (FlexChart)Control;
            // Assetsに設置したフォントファイルからTypeFaceを作成して設定
            flexChart.AxisX.LabelFontTypeface = Typeface.CreateFromAsset(Forms.Context.Assets, fontPath);        }
    }
    protected override void OnDetached()
    {
        //処理は省略
    }
 }
}

フォントの指定

フォントは共有ライブラリ(PCL)で設定します。
今回フォントを指定する対象はチャートのX軸に表示されるラベルです。
ラベルに冒頭のようなブランドロゴを設定します。

サンプルデータの作成

チャートを表示するためのサンプルデータを作成します。
ここでは、一つの要素に対して乱数で発生させた数値を組み合わせて一つのデータにしています。 データを生成するコードは以下です。 文字コードで指定している部分は、FontAwesomeのコードです。
FontAwesomeの一覧表から、各ロゴに対応する文字コードを選択しました。 現状は文字コードで記述していますが、表示時はこれが各種ロゴとしてチャートに表示されます。

// データソースを作成するクラス FlexChartのBindingContextに設定
public class FontAwesomeData
{
    private List<dataModel> appData;
    // データリストを取得するプロパティ
    public List<dataModel> Data
    {   get { return appData; }     }

    public FontAwesomeData()
    {
        Random rnd = new Random();
        appData = new List<dataModel>();
        // ブランドロゴ表示用のコード
        var LogoNames = "\uf179, \uf17b, \uf17a, \uf113, \uf293, \uf099, \uf230, \uf270, \uf1a0, \uf167".Split(',');
        for (int i = 0; i < LogoNames.Length; i++)
        {
            // ロゴと乱数で発生させた数値をデータとしてリストに格納
            var dm = new dataModel();
            dm.Logo = LogoNames[i].ToString();
            dm.NumData = rnd.Next(60, 100);
            appData.Add(dm);
        }
    }
}
// データモデル
public class dataModel
{
    public string Logo { get; set; }  // ロゴ
    public int NumData{ get; set; }  // サンプルデータの数値
}

FlexChartの設定

チャートを表示するための設定を行います。
画面用のXAMLには、チャートを表示するためのchartStacklayoutに入れています。
また、データを表示するための系列(Series)を定義し、データソースのNumDataBindingしています

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="Xuni_QuickStart.Xuni_QuickStartPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Xuni_QuickStart"
             xmlns:xuni="clr-namespace:Xuni.Forms.FlexChart;assembly=Xuni.Forms.FlexChart">

    <StackLayout VerticalOptions="FillAndExpand" 
                 Orientation="Vertical" 
                 Padding="0,20,0,20">
        <xuni:FlexChart x:Name="chart"
                        BindingX="Logo"
                        ItemsSource="{Binding Data}"
                        VerticalOptions="FillAndExpand">
            <xuni:FlexChart.Series>
                <xuni:ChartSeries 
                        x:Name ="S1"
                        Binding="NumData" 
                        Color  ="#b50f52"/>
            </xuni:FlexChart.Series>
        </xuni:FlexChart>
    </StackLayout>
</ContentPage>

コードビハインドでFlexChartの設定を行います。

  1. データソースをBindingContextに設定
  2. チャートの種類を曲線面チャート(SprineArea)に設定
  3. チャートのX軸の設定 ここでAndroid、iOSのプラットフォームを判断して、設定を変えます。
    Androidの場合: こちらで作成したEffectを適用
    iOSの場合:X軸のラベル用フォントをLabelFontFamilyプロパティに指定
  4. Y軸の設定 最大値、最小値そして目盛りの幅の単位を指定
public partial class Xuni_QuickStartPage : ContentPage
{
    public Xuni_QuickStartPage()
    {
        InitializeComponent();
        // データソースをFlexChartにバインディング
        chart.BindingContext = new FontAwesomeData();
        // チャート種類を曲線面チャートに設定
        chart.ChartType = Xuni.Forms.FlexChart.ChartType.SplineArea;
        // チャートのX軸の設定
        chart.AxisX.LabelFontSize = 30;

        // プラットフォームを判定して処理を分割
        if (Device.OS == TargetPlatform.Android)
        {
            // Androidプロジェクトに作成したEffectsを適用
            // X軸のラベルにフォントが適用される
            chart.Effects.Add(Effect.Resolve("Effects.FontEffect"));
        }
        else if(Device.OS == TargetPlatform.iOS)
        {
            // iOSの場合はResourceに追加したフォントを
            // infpo.plist に追加指定すると利用可能になり適用される
            chart.AxisX.LabelFontFamily = "FontAwesome";
        }

        // チャートのY軸の設定
        chart.AxisY.MajorUnit = 10;
        chart.AxisY.Min = 50;
        chart.AxisY.Max = 100;
    }
}

ブランドロゴを表示

実行した結果が以下の画像です。データの名称部分、つまりX軸のラベルに設定された文字コードが、フォントを利用した表示になり、ブランドロゴになりました。

f:id:ComponentOne_JP:20170221155454p:plain

今回利用したすべてのブランドアイコンはそれぞれの所有者の商標です。  
また、アイコンはすべてそのブランドを意味していますが、チャート上のデータはランダムな数値を利用しており、
アイコンおよび各ブランドとの関連はありません。  

まとめ

このように、カスタムフォントを組み込むことで、アプリ画面のデザインが変わるだけでなく、ユーザー操作を促すことができます。FontAwesomeで提供されるアイコンを駆使してインタラクションの優れたアプリ開発が実現できます。

なお、フォントの埋め込みには各フォントで決められています。フォントの配布が許可されているフォントであれば、今回の例のようにアプリに埋め込んで利用できます。それぞれの利用条件を確認してご利用ください。


参考情報

Xamarin Formsでアイコンフォントを表示する - yamamoWorks

jamesmontemagno/XamDroid.RobotoText: Roboto text everywhere!

Angular & Wijmoクイックスタート - データ連結

Wijmo

この記事では、前回の記事で作成したAngularアプリケーションを元にして、WijmoのInputNumber(数値入力)コンポーネントでデータ連結を設定する方法を紹介します。

Wijmoコンポーネントは、Angularのデータ連結をサポートします。Angularには、3種類のデータ連結方法が存在します。

  1. プロパティ連結:一方向のデータ連結とも呼ばれます。親コンポーネント(この記事ではメインページ)で設定した値が子コンポーネント(この記事ではInputNumberコンポーネント)に渡されます。
  2. 双方向のデータ連結:親コンポーネントで設定した値が子コンポーネントに渡され、同時に、子コンポーネントで設定した値が親コンポーネントに渡され、親子のコンポーネントの値が同期されます。
  3. イベント連結:子コンポーネントで特定の操作を行ったときにイベント処理を実行します。

f:id:ComponentOne_JP:20170214103608p:plain

続きを読む

ナレッジベース更新情報(2017/2/13~2/17)

C1Studio Xuni

以下の16文書を追加・更新しました。

ComponentOne製品のナレッジベースは随時更新中です。
≫ ナレッジベースはこちら

 

データ視覚化ダイエット!-5kgも夢じゃない?!

PowerNews 462号の「ダイエット」に関するアンケート結果では『必要無い』と回答された方は比較的少なく、やはり皆様日頃から気にかけておられるようですね。

しかし、いざダイエットを始めても、いつも途中で挫折してしまう…という方も多いのではないでしょうか。

f:id:ComponentOne_JP:20170214175031p:plain

モチベーションを維持する為のコツとしては、定期的にご褒美の日を設けるとか、友達を誘って一緒に励ましあいながら頑張るとか色々考えられますが、スマホやパソコンで管理アプリを利用するというのも良い方法かもしれません。

f:id:ComponentOne_JP:20170214175301p:plain

このような管理アプリでは、体重や体脂肪の推移を折れ線にして目標値をマーカー表示するものや、カロリーの摂取量に対する消費量を積み重ねた棒で色分け表示するものなど、結果をグラフで表すケースが多く見られます。
数値の変化がグラフ化されていると、目標に対する達成率や時系列での推移が一目で直観的に分かり、とても便利ですね。

普段それほど意識していないかもしれませんが、私たちが毎日見ている新聞記事やテレビ番組、またスマホで何気なくアクセスするサイトにおいても、情報を分かりやすく伝達するための手法として、グラフ・チャートが活用されています。これらのおかげで、私たちはその情報が意図する内容を、短時間で視覚的に理解することができるわけです。

f:id:ComponentOne_JP:20170214175602p:plain

このようなグラフ・チャートを使用したいわゆる「データ視覚化」という概念は、情報伝達の手法として欠かせないものであり、それはアプリケーション開発においても非常に重要なポイントです。

「FlexChart」は、そのようなニーズにお応えできる、強力なデータ視覚化機能を備えたSVGベースのチャートコンポーネントです。
チャート種には、Microsoft Excel 2016でサポートされ話題の「ウォーターフォール」「サンバースト」まで幅広く対応しています。グラフを使用したデータ視覚化の要件がある場合には、ぜひ導入をご検討ください。

「FlexChart」は「ComponentOne Studio」「Wijmo(ウィジモ)」「Xuni(ズーニー)」に収録されています。

≫≫ サンバースト、ウォーターフォールってどんなグラフ?WPFまたはWebのサンプルでご確認ください↓↓

hatena.c1.grapecity.com

この記事はグレープシティが発行するメールマガジン「PowerNews」の第464号(2017/2/9発行)に掲載された記事を、加筆修正して転載したものです。  
≫グレープシティの最新情報を発信!メールマガジン「PowerNews」
製品の最新情報、プログラミングに役立つコラムのほか、プレゼント企画やセミナーのご案内など、日々の開発業務に役立つ情報を、毎月2回・第2、4木曜日にお送りしています。 
PowerNews - メールマガジン | GrapeCity Developer Tools 

Angular & Wijmoクイックスタート - アプリケーションの作成

Wijmo

Angularでは、フレームワークの機能拡張だけでなく、開発効率の向上にも非常に力が入れられています。Angular CLIというコマンドラインツールを使用することで、非常に簡単にAngularアプリケーションを作成することが可能です。

また、WijmoはAngularをサポートしており、Angularの標準的な方法で、グリッド/入力/チャートなどのエンタープライズ向けの高度なUIコンポーネントを利用することができます。

この記事では、Angular CLIとWijmoを使用して、グリッドでデータ管理を行うAngularアプリケーションを作成する方法を紹介します。Angular開発する際のサンプルやチュートリアルとしてご活用ください。

この記事では、次のバージョンのライブラリを使用して動作確認を行っています。

  • Angular 2.4.0
  • Angular CLI 1.0.0-beta.31

f:id:ComponentOne_JP:20170214103608p:plain

続きを読む

ナレッジベース更新情報(2017/2/6~2/10)

C1Studio Xuni

以下の7文書を追加・更新しました。

ComponentOne製品のナレッジベースは随時更新中です。
≫ ナレッジベースはこちら

 

Developers Summit 2017 (デブサミ2017)にブース出展します!

C1Studio Wijmo Xuni お知らせ

f:id:ComponentOne_JP:20170213095635j:plain

2003年より開催しているITエンジニアの祭典Developers Summit(通称:デブサミ)が今年も開かれます。

デブサミ2017のテーマは“エンジニアとして生きる、技術の先にある現実に踏み出す”。
今テクノロジーの世界では、IoT、人工知能、VRなど発展が目覚ましい領域を中心に、無数の技術とビジネスが現れては消えています。その中で、新たな時代のリーダーを担うエンジニアにとって必要なものは何なのでしょうか?
この命題を一人ひとりが考えるためのヒントをデブサミに見つけにきてください。

グレープシティは今年もデブサミに協賛し、製品紹介ブースを出展します。
ブースではComponentOne Studio、Wijmo、Xuni、SPREAD、ActiveReportsの新バージョンを中心に、数々の開発支援ツールを紹介させていただきます。ぜひブースにお立ち寄りいただき、デモマシンで新機能をお試しください。
今年も皆さまとお会いできることを楽しみにしています!

◆開催概要◆

日 時 2017年2月16日(木)10:00~18:45 (受付開始:9:30~)
2017年2月17日(金)10:00~18:25 (受付開始:9:30~)
会 場 目黒雅叙園
主 催 株式会社 翔泳社
費 用 無料(事前登録制)
Web 公式イベントページはこちら

 

ComponentOne