0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Kony Visualizerに外部フォントを取り込む

Last updated at Posted at 2020-06-17
  1. はじめに
  2. 実装方法
    3. インポート方法
    4. フォントの適用方法
    4. エクスポート方法
  3. まとめ

#はじめに
今回は、Konyに外部からダウンロードしたフォントを利用する手順について説明します。

Konyに標準搭載されているフォントは以下のようになっていますので、
これ以外のものを利用したい場合は、以下手順に沿ってフォントのインポートを行ってください。

・Mobile、Tabletアプリの場合
スクリーンショット 2020-06-05 19.05.56.png
スクリーンショット 2020-06-05 19.39.22.png

・Webアプリの場合
スクリーンショット 2020-06-05 19.05.34.png

#実装方法
##フォントのインポート方法
まず、利用したいフォントをダウンロードしてください。
私は以下のようなページでイメージに合うフォントを選んでダウンロードしています。
参考:http://fontfree.me

今回はこちらをダウンロードしました!
スクリーンショット 2020-06-05 18.58.45.png

ここで注意点として、
Konyでサポートしているフォントの形式は、.ttfとなっており、
.otfは利用できませんので、新たにフォントをダウンロードする場合はご注意ください。

仮に既に持っているフォントがotfの場合、ttf形式に変換できるツールなどありますので、適宜活用してください。
変換ツール:https://convertio.co/ja/otf-ttf/

次に、Konyでダウンロードしたフォントを利用するためにAssetに追加します。

Konyの左メニューからAssetタブを選択し、
Fontを右クリックしてImport Fontを選択してください。
スクリーンショット 2020-06-05 17.00.21.png
スクリーンショット 2020-06-05 17.01.15.png

フォルダが開くので、先ほどダウンロードしたフォントを選択してください。

この時、ダウンロードしたファイルではなく、フォント名.ttfとなっているものを選択してください。
スクリーンショット 2020-06-05 19.00.05.png

これでKony Visualizerにダウンロードしたフォントが新たに追加されました!
  
:warning:フォントインポート時の注意点:warning:
iOSでは、fontのファイル名とPostScript名が一致しないと正常にインポートされない場合があります。
その場合は、以下の手順を実施してPostScript名を取得してください。

  1. フォントをダウンロードしたら、Finderを開き、
    ダウンロードしたフォントをダブルクリックします。
    クリックすると、ポップアップが表示されますので、右下のインストールボタンをクリックします。
スクリーンショット 2020-06-11 17.45.17.png ↓ダブルクリック スクリーンショット 2020-06-11 17.45.28.png 2. フォントをインストールすると、Macに標準搭載されている「FontBook」が開きます。 スクリーンショット 2020-06-11 17.49.55.png 4. 左上のℹ️を選択すると、フォントの詳細が表示されます。 「PostScript名」に表示されている名前がフォントのPostScriptとなりますので、 フォントのファイル名をPostScript名に変更してください。 スクリーンショット 2020-06-11 17.51.41.png 5. フォントの名前をPostScript名に変更できたら、 通常の手順通りVisualizerのAssent->Fontをクリックし、Importを行って下さい。 スクリーンショット 2020-06-11 18.05.12.png

フォントのインポートを行う際に、以下の画像のように
Visualizer側で勝手に名前を変更してくれる場合がありますが、
インポート時にエラーが発生する場合は、
PostScript名が合っていない可能性があるので、上記手順を参考にしてみてください。

スクリーンショット 2020-06-11 17.43.16.png

##フォントの適用方法
次にダウンロードしたフォントをテキストに適用していきます。

適当にLabel Widgetなどを追加して、右メニューのフォントを選択すると
ダウンロードしたフォントが一覧に出てくるようになったかと思います!
スクリーンショット 2020-06-05 19.03.58.png

文字入力してフォントを選択すると、反映されました!
スクリーンショット 2020-06-05 19.04.13.png

モバイル又はタブレットアプリで、AndroidとiOSそれぞれで表示フォントを変えたい!という場合は、
フォントの右に配置されているEditをクリックして、OSに適用するフォントを選択してください。
スクリーンショット 2020-06-05 19.43.27.png
スクリーンショット 2020-06-05 19.43.16.png
プルダウンをクリックすると、利用できるフォントが一覧表示されますので、
利用したいフォントを選択して、「Apply」をクリックしてください。

##エクスポート方法
あるプロジェクトで利用しているフォントを、別プロジェクトでも利用したい場合、
フォントをエクスポートすることができます。

File->Export->Fontsを選択し、フォルダにエクスポートします。
スクリーンショット 2020-06-05 19.50.47.png

Zip形式でエクスポートされますので、
インポートする際は、File->Import->Fontsを選択してZipのままインポートをしてください。
スクリーンショット 2020-06-05 19.53.08.png

#まとめ
今回はフォントの利用方法について記事を書きました。
アプリ開発を行う上でよく使う機能なので、是非活用してみてくださいね:hugging:

#参考
https://docs.kony.com/konylibrary/visualizer/visualizer_user_guide/content/ExportImportFonts.htm

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?