ハロー!! Office UI Fabric

今年の9月頃にMicrosoftがOffice UI FabricというUIフレームワークをオープンソースで公開しました(ライセンスはMIT License)。今年公開されたOSSプロダクトなので、ここは思い切ってAdvent Calendarの形でOffice UI Fabricがどんなものであるか見てゆこうと思います。

Office UI Fabric(以下"OfficeUI"と表記)のソースコードはGitHubで公開されています。

OfficeDev/Office-UI-Fabric

また、開発者向けのサイトも公開されています。

Office UI Fabric

それから手前味噌で恐縮ですが、OfficeUIの簡単な使用レポートをQiitaで公開しています。

MicrosoftのOffice UI Fabricを試してみる

今日は第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の各コンポーネント(ボタン、テキストボックス等々)の使い方やハマり所を解説していければと思います。