LoginSignup
2

More than 5 years have passed since last update.

ハロー!! Office UI Fabric

Last updated at Posted at 2015-12-01

ハロー!! 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>

実行結果は以下のようになります。

officeui001.png

というわけで、思ったよりも簡単にOfficeUIを試してみることができました。

まとめ

オープンソースとして公開されているOffice UI Fabricでごく簡単なサンプルを作ってみました。
明日以降の記事では、OfficeUIの各コンポーネント(ボタン、テキストボックス等々)の使い方やハマり所を解説していければと思います。

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
2