Help us understand the problem. What is going on with this article?

ハロー!! Office UI Fabric

More than 3 years have passed since last update.

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした