まるごとSemantic UIでWebサービスを作った話

僕はWebサービスを開発するとき、UIの部分については極力CSSのフレームワークの使っています。フレームワークを用いることで、HTML・CSSの開発速度が大幅にスピードアップします。現在は数多くのフレームワークが公開されており、どれもクオリティが高く、どのフレームワークを選ぶのがベストプラクティスなのか、迷ってしまうことってありますよね。うれしい悲鳴です。

少し前まではBootstrapを愛用していましたが、**Semantic UI**に出会い、このフレームワークの虜になりました。デザインが洗練されており、種類も豊富なため表現の幅が広がります。

Semantic UIに関する記事は、あまり出回っていない...？ので、Semantic UIで作ったWebサービスを紹介しながら、簡単な使い方などを説明していきます。Semantic UIは本当にいいフレームワークなので、もっと普及してほしいなと思っています。

[**Semantic UI - TOP**](https://semantic-ui.com/)



# **Semantic UI - 準備**

[Semantic UI - TOP](https://github.com/Semantic-Org/Semantic-UI)
<img width="1280" alt="スクリーンショット 2018-08-09 9.32.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/fcc740c7-07d0-9333-a998-02a53178b035.png">

【モジュールのダウンロード】
『Simpler Setup』からダウンロードすることができます。
[Semantic UI - モジュールダウンロード](https://semantic-ui.com/introduction/getting-started.html)
<img width="921" alt="スクリーンショット 2018-08-09 9.32.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/4ff5809f-6fe1-7a6a-3f52-f3d191d49992.png">

ダウンロードが完了したら、以下のCSS・JSファイルを読み込みます。
<img width="469" alt="スクリーンショット 2018-08-09 9.36.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/a87b7464-594d-b823-094d-a85a88c2e636.png">

※ Semantic UIのコンポーネントはjQueryで実装されているので、ダウンロードしたファイルと一緒にjQueryファイルも読み込んでください。

#### **CDNもあるよ**

```index.html
<!-- semantic.css  -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css">

<!-- semantic.js  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
```

#### **Githubからもダウンロードできるよ**
[**Semantic UI - Github**](https://github.com/Semantic-Org/Semantic-UI)

# **Semantic UI - 触る**

Semantic UIにはクラス名に意味があり、原則として以下のようなクラス名を記述します。

``` index.html
<div class="ui コンポーネントの名称"></div>
```
classの**ui**がSemantic UIを表しており、この後にコンポーネントの名称を追加すれば、コンポーネントのデザイン・機能を呼び出すことが可能になります。また、semantic.jsの関数を呼び出し、アニメーションなどを追加することも可能です。

#### **Semantic UI - Button**

<p data-height="450" data-theme-id="0" data-slug-hash="MBLbje" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - button" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/MBLbje/">Semantic-UI - button</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### **Semantic UI - Card**

<p data-height="850" data-theme-id="0" data-slug-hash="bjzBKd" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - Card" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/bjzBKd/">Semantic-UI - Card</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### **Semantic UI - Label**

<p data-height="750" data-theme-id="0" data-slug-hash="OwdrEZ" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - Label" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/OwdrEZ/">Semantic-UI - Label</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### **Semantic UI - Header**
<p data-height="300" data-theme-id="0" data-slug-hash="VBgqEW" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - Header" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/VBgqEW/">Semantic-UI - Header</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### **Semantic UI - Grid**

<p data-height="550" data-theme-id="0" data-slug-hash="zLeyer" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - Grid" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/zLeyer/">Semantic-UI - Grid</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

#### **Semantic UI - Loader**

<p data-height="450" data-theme-id="0" data-slug-hash="JBxxJO" data-default-tab="html,result" data-user="fujiyamayuta" data-pen-title="Semantic-UI - Loader" class="codepen">See the Pen <a href="https://codepen.io/fujiyamayuta/pen/JBxxJO/">Semantic-UI - Loader</a> by YutaFujiwara (<a href="https://codepen.io/fujiyamayuta">@fujiyamayuta</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

紹介したのは一部になっており、他にも豊富なデザインが用意されているので、試してみてください↓↓
#### **Semantic UI - 一覧**
https://semantic-ui.com/kitchen-sink.html

### **jQueryだけ？**

　Semantic UIのコンポーネントをjQuery以外のVue、React、RiotなどのJSフレームワークで実装したい場合などがあると思います...。その場合のは、以下のパッケージが公開されています。
※ これらのパッケージはオフィシャルではないので、全てのコンポーネントが使えるわけではありません。それらを考慮してお使いください🙇

**Vue**
[Semantic UI Vue](https://semantic-ui-vue.github.io/#/)

**React**
[Semantic UI React](https://react.semantic-ui.com/)

**Riot**
[Semantic UI Riot](https://black-trooper.github.io/semantic-ui-riot-docs/)


### **対応ブラウザ**

IEもVersion11＋から対応しています。

| 対応しているブラウザ       | 
|:-----------------|
| Last 2 Versions FF, Chrome, Safari Mac| 
| **IE 11+**           | 
| Android 4.4+, Chrome for Android 44+|
| iOS Safari 7+|
| Microsoft Edge 12+|

# **Semantic UI - 作る**

準備をして、触ったら次はサービスを作ってみます！

**[THE BINGO](https://the-bingo.jp/)**
https://the-bingo.jp/

#### **サービスの概要**

**THE BINGO**というサービスを作りました。

このサービスは、会員登録・アプリのダウンロードなど不要で、簡単にビンゴ大会が開催できるWebサービスです。ビンゴマシン（親）がビンゴカード（子）のURLをLINEやFacebookやTwitterやQRコードなどで共有して、共有されたURLをクリックするだけでビンゴカードを作成して、ビンゴ大会を開催することができます。またFireabseのRealTime Databaseを使って参加人数、リーチ・ビンゴの人数をリアルタイムで共有しています。

ビンゴ・リーチの判定などは全て自動化しています。

この**THE BINGO**は、ほぼSemantic UIでデザインされており、オリジナルのCSSは、ほとんど書いていません。

【ランディングページ】
<img width="1277" alt="スクリーンショット 2018-08-09 8.32.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/7c1dccec-d494-5661-2748-cf47ccb3e4ad.png">

【ビンゴマシン】
<img width="1279" alt="スクリーンショット 2018-08-09 8.33.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/147291/5246a4ab-3b77-aac1-dccb-496acedaa52a.png">

【ビンゴカード】
![iphoneserosegold_portrait_black.png](https://qiita-image-store.s3.amazonaws.com/0/147291/84dbd981-6849-aad9-de73-f5648874d88a.png)

#### **使い方**
* 親：ビンゴマシンにアクセスする
* 親：ビンゴカードのURLをシェアする
* 子：ビンゴカードのURLに各々アクセスする
* 親：ビンゴを回す
* 子：ビンゴを待つ → 自動で更新される
* 親・子：ビンゴになる → ビンゴの演出

【ビンゴの演出】
![ezgif-3-5fc79a7151.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/c7206519-b732-8983-fb4f-d9e4f5bdd799.gif)


### **システム構成**

UI部分の実装については**Semantic UI**と**Vue.js**で実装しています。データベースについては**Firebase**のRealTime Databaseを使っています。

![20180804_web用.png](https://qiita-image-store.s3.amazonaws.com/0/147291/972f46fb-b5ea-3b9d-cf2e-ef372217ad69.png)

### **なぜ作ったのか？**

結婚式の二次会とか、会社の忘年会などでビンゴをする機会って結構ありますよね...（僕は一年に2〜3回はあります）。

ビンゴ大会の準備って、とても大変ですよね。ビンゴマシンを用意して、ビンゴカードを買いに行って...etc。当日もカード配ったり、ビンゴを回したり、出た目を確認したり、景品を渡したり、やることが沢山あって幹事はとても大変です。当日は準備が忙しくて全然話せなかったり、お酒も全然飲めなかったり...。

そんな幹事を救うためにTHE BINGOを開発しました。 

ビンゴ大会を開催するときは、ぜひ使ってみてください🙇

![img.png](https://qiita-image-store.s3.amazonaws.com/0/147291/a977f33a-5f5f-65ee-90ee-5aaf484e94ae.png)

## **参考にさせていただいた記事**

[Semantic UI入門 よく使うコンポーネント
](https://qiita.com/shalman/items/336fe312acbec98d21e3) - @shalman 🙇

[Semantic UIを使って豊富なカードベースのレイアウトをデザイン](https://www.webprofessional.jp/how-to-design-rich-card-based-layouts-with-semantic-ui/) 🙇