Xamarin

icon

こんにちは。すーさんです。

今回は、クロスプラットフォーム開発環境の「Xamarin」についてです。

「Xamarin」は、Xamarin社という会社が開発して配布していましたが、2016年にマイクロソフトに買収されてVisual Studioに同梱されるようになりました。
Windowsはもちろん、Mac用のVisual Studio(Visual Studio for Mac)にも同梱されています。

◆クロスプラットフォーム開発環境
モバイルアプリを作成する時の選択肢として、通常は各プラットフォーム毎に、AndroidはAndroid StudioとJava、iOSはXcodeとObjective-C/Swiftという選択肢になると思います。
Xamarinはクロスプラットフォーム開発環境なので、C#でAndroidとiOSの両方のアプリを開発することができます。
他の多くのクロスプラットフォーム開発環境はHTML+CSS+JavaScriptというWeb技術を用いたものですが、Xamarinは各プラットフォームのAPIを100%移植しているのでネイティブアプリと同等の操作性のアプリを作成できます。

◆作成できるアプリケーション
Xamarinで作成できる主なアプリは下記になります。
・Androidアプリ
・iOSアプリ
・macOSアプリ

◆共通化できるところとできないところ
コア部分の機能は共通化できます。
カメラやGPSなど各プラットフォーム固有の機能やUI(画面)は共通化できません。

◆コードの共通化
コードの共通化には2種類あります。
・PCL(Portable Class Libraries)
PCLは共通DLLを作成する機能です。
作成したライブラリは複数のプラットフォームで使用できますが、使用できるAPIは全ての対象プラットフォームで使用できるAPIに限定されます。
・Shared Project
Shared ProjectはDLLではなく、ソースコードをそのまま共有する方法になります。
これは単なるファイル共有なので、プラットフォームに依存したコードを記載した場合、別ではビルドエラーになってしまうので注意が必要になります。

次回は画面も共通化できるXamarin.Formsについて書いてみたいと思います。

Windowsフォームにおけるフォント指定

こんにちは。
フェノメナエンターテインメント デザイン担当の山男です。

Windows 8.1から「游書体」が標準搭載されるようになり、自宅でもオフィスでもWindows 10環境の私などは、メイリオ (Meiryo UI) よりも游ゴシック (Yu Gothic UI) を見ている時間の方が多くなりました。
どちらの方が綺麗に見えるか?というのは、今もって意見が分かれるところですが、新しいOSで游ゴシックがシステムフォントに採用されている状況を考えると、否が応にもそれに合わせていかざるを得ない気はしています。

 Photoshop CC 2017のウィンドウ

[続きを読む…]

Android O Developer Preview1

フェノメナエンターテインメントの「おっちゃん」です。

android-o-logo

3月に、Android8.0 になる予定の Android O Developer Preview1が公開されましたので、早速、手持ちのNEXUS5Xにインストールしてみました。 [続きを読む…]

スマホ画面のアスペクト比

高解像度化と大型化に一段落していたスマホ画面サイズの変化が2017年から再開しそうです。
今度は縦長化が進みUIデザインに影響が発生します。
画面の縦長化は、スマホ本体のプロポーションにも変化をもたらしそうです。
何年かすると縦長感のあるスマホがスマートに感じ、現在のプロポーションはずんぐりとした印象になってしまうかもしれません。

aspects

画面の縦長化が進むと、Androidに搭載されているマルチウィンドウ機能の有効性が高まってきます。
今後は複数のアプリを同時に使用することでユーザーベネフィットにつながるケースが増えてくるのだと思います。
UI的には1ペインタイプと2ペインタイプの画面が両立する設計とデザインを行う必要が発生しそうです。

doubleos

 

CSSの擬似クラス:link, :visited, :hover, :active, :focusの使い方

フェノメナの開発担当のレミです!

今回はCSSでよく使われる擬似クラス:link, :visited, :hover, :active, :focusの使い方について解説します。

上記の擬似クラスは「states」(状態)を表現する擬似クラスになります。どういう意味かと言いますと、ユーザアクションに関連する擬似クラスだということです。

a:link {}

:link 擬似クラスはリンクのデフォルトの状態を意味しているものです。一番基本的な設定なので、他の擬似クラスよりも先に宣言することをお勧めします。

一般的に勧められてる宣言の順番がこの通りです ⇨ :link, :visited, :hover, :active, :focus。

例 : 

a:link {
   color: blue;
}

a:visited {}

:visited擬似クラスは既にクリックされている(訪問されている)リンクの状態を表現するものです。

例 : 

a:visited {
   color: orange;
}

a:hover {}

:hover擬似クラスはマウスをリンクの上に置いた時の状態を表現するものです。

リンクには限定されないが、一般的なユースケースがリンクになります。

例 : 

a:hover {
   color: red;
}

a:active {}

:active擬似クラスはリンクがアクティベート(活性化)された時の状態を表現するものです。

リンクに限定はしないが、一番主流でわかりやすいのがリンクになります。リンクの場合は、リンクを押し始める時と、離す時の間の状態になります。

a:active {
   color: purple;
}

a:focus {}

:focus擬似クラスは HTMLエレメントにフォーカスが行った時の状態を表現するものです。

フォーカスというのは、タッチデバイスでタップした時や、キーボードのtabキーで移動した時などになります。

基本的にはform関連のエレメントに使われるがリンクにも使用できます。

a:focus {
   color: yellow;
}

よく混乱してしまう擬似クラスの使い方を少し理解できたでしょうか?

では、また次回も別の擬似クラスについて解説します。

産業用機器の分野でも急速にUIが

フェノメナのマーケティング担当のとしです。

仕事柄、常に世の中の変化をウォッチすることが欠かせなく、ここ数年は東京ビッグサイトの展示会場に月に2回ほどのペースで通い続けています。
見る分野は特定せず、あらゆる分野の展示会を見ることにしています。

2,3年前に、ある変化に気づきました。
産業用機器の世界でも「UI」という言葉が通じるようになってきたことです。
それまでは説明員の方に「使いやすい操作」というテーマで話しかけても、ほとんどの方には興味がありませんでした。必ずと言っていいほど、「これは専門のオペレーターが操作するのでそんなことは考える必要はないんですよ」という言葉が返ってきていました。

[続きを読む…]

色覚対応について

こんにちは。
フェノメナエンターテインメント デザインチームのニキです。

今回は色覚対応についてです。
人は視細胞の錐体と呼ばれる部分で色を認識しています。

錐体は光の三原色である『』を認識する錐体、『』を認識する錐体、『』を認識する錐体の3種類に分かれています。
なので、色を判別する際には3種類の錐体それぞれが機能しているのですが、このどれかの錐体が欠けていたり十分に機能していないと実際の色と自分自身が見ている色に差ができてしまいます。
この状態を『色覚異常』と言います。
 
先天性の色覚異常は日本人男性で20人に1人、日本人女性で500人に1人と言われています。この割合で考えると数百人規模の学校などに必ずいるという計算になります。 [続きを読む…]

ヘッダー/フッターの位置固定について

こんにちは。すーさんです。
今回は、webページのヘッダーとフッターをCSSで位置固定する方法についてです。

ヘッダー用のCSSは下記になります。
CSS:
.headerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  top: 0;
}

・position: fixed;
  これでスクロールしても位置が固定されます。
・top: 0;
  上からの配置位置を「0」とすることで、一番上に表示されます。

フッターの場合は下記のようにします。
CSS:
.footerbar {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
}

ヘッダーと異なるのはtopプロパティではなくbottomプロパティに「0」を指定して、一番下に表示するようにしています。

コンテンツ部分には、通常時、ヘッダー/フッターにコンテンツが隠れないようにヘッダー/フッターと同じ高さの余白(padding)を上下に設定する必要があります。

また、HTML5のheader/footerタグを利用する場合も、CSSでposition/top/bottomプロパティを設定すれば大丈夫です。

Android 新機能:アプリショートカットについて

フェノメナエンターテインメントの「おっちゃん」です。

今回は、Android7.1で追加された「アプリショートカット」についてです。 まだ、Google端末以外はAndroid7.0にすらなっていない端末がほとんどですが、将来のために書こうと思います。

この機能は、ホーム画面でアプリアイコンを長押しすると、下図のようにショートカットが表示されます。

SS1
[続きを読む…]

このブログから情報発信しているUIデザイン専門家集団のホームページ :
フェノメナエンターテインメント