ハロー!! Office UI Fabric
今年の9月頃にMicrosoftがOffice UI FabricというUIフレームワークをオープンソースで公開しました(ライセンスはMIT License)。今年公開されたOSSプロダクトなので、ここは思い切ってAdvent Calendarの形でOffice UI Fabricがどんなものであるか見てゆこうと思います。
Office UI Fabric(以下"OfficeUI"と表記)のソースコードはGitHubで公開されています。
また、開発者向けのサイトも公開されています。
それから手前味噌で恐縮ですが、OfficeUIの簡単な使用レポートをQiitaで公開しています。
今日は第1日目ということもあり、Hello,World的な簡単なアプリ(というかWebサイト)をOfficeUIで作成するサンプルを紹介してみます。
Office UI Fabric？
OfficeUIといっても今ひとつピンと来ない人もいるかと思います。OfficeUIはBootstrapと同じ立ち位置のWeb UIフレームワークです(まさにキャラ(用途)がかぶっているとも言える……)。
個人的な感想では、Bootstrapはファンシーな印象をうけるUIで、OfficeUIはそれよりも少しカッキリした(まさにオフィスアプリ的な)印象を受けます。
Office UI Fabricの配布物
http://dev.office.com/fabric/getting-startedにOfficeUI配布物の取得手順が解説されています。CDN経由で必要なファイルが読み込めるようなので、今回はこれを利用してみましょう。
Hello,World的なサンプル
簡単なHello,World的サンプルを作成してみました。ボタンを押すとalert()でダイアログを表示するというものです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ハロー!! Office UI Fabric</title>
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body>
<!-- ボタンを表示する -->
<div class="ms-Grid-col ms-u-sm6 ms-u-md8 ms-u-lg12">
<button class="ms-Button ms-Button--primary" onclick="alert('ハロー!! Office UI Fabric')">
<span class="ms-Button-label" id="mylabel">ハロー!! Office Ui Fabric</span>
</button>
</div>
</body>
</html>
実行結果は以下のようになります。
というわけで、思ったよりも簡単にOfficeUIを試してみることができました。
まとめ
オープンソースとして公開されているOffice UI Fabricでごく簡単なサンプルを作ってみました。
明日以降の記事では、OfficeUIの各コンポーネント(ボタン、テキストボックス等々)の使い方やハマり所を解説していければと思います。