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

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

More than 1 year has passed since last update.

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

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

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

Semantic UI - TOP

Semantic UI - 準備

Semantic UI - TOP
スクリーンショット 2018-08-09 9.32.52.png

【モジュールのダウンロード】
『Simpler Setup』からダウンロードすることができます。
Semantic UI - モジュールダウンロード
スクリーンショット 2018-08-09 9.32.41.png

ダウンロードが完了したら、以下のCSS・JSファイルを読み込みます。
スクリーンショット 2018-08-09 9.36.19.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

Semantic UI - 触る

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

index.html
<div class="ui コンポーネントの名称"></div>

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

Semantic UI - Button

See the Pen Semantic-UI - button by YutaFujiwara (@fujiyamayuta) on CodePen.

Semantic UI - Card

See the Pen Semantic-UI - Card by YutaFujiwara (@fujiyamayuta) on CodePen.

Semantic UI - Label

See the Pen Semantic-UI - Label by YutaFujiwara (@fujiyamayuta) on CodePen.

Semantic UI - Header

See the Pen Semantic-UI - Header by YutaFujiwara (@fujiyamayuta) on CodePen.

Semantic UI - Grid

See the Pen Semantic-UI - Grid by YutaFujiwara (@fujiyamayuta) on CodePen.

Semantic UI - Loader

See the Pen Semantic-UI - Loader by YutaFujiwara (@fujiyamayuta) on CodePen.

紹介したのは一部になっており、他にも豊富なデザインが用意されているので、試してみてください↓↓

Semantic UI - 一覧

https://semantic-ui.com/kitchen-sink.html

jQueryだけ?

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

Vue
Semantic UI Vue

React
Semantic UI React

Riot
Semantic UI Riot

対応ブラウザ

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/

サービスの概要

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

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

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

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

【ランディングページ】
スクリーンショット 2018-08-09 8.32.57.png

【ビンゴマシン】
スクリーンショット 2018-08-09 8.33.30.png

【ビンゴカード】
iphoneserosegold_portrait_black.png

使い方

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

【ビンゴの演出】
ezgif-3-5fc79a7151.gif

システム構成

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

20180804_web用.png

なぜ作ったのか?

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

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

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

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

img.png

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

Semantic UI入門 よく使うコンポーネント
- @shalman 🙇

Semantic UIを使って豊富なカードベースのレイアウトをデザイン 🙇

Yuta_Fujiwara
SoftwareEngineer / Runner / OH MY GOD, LLC / CEO / 個人開発やフリーランスエンジニアをしています。Webのフロントエンドが得意です。夢はストックオプションでビルを建てること
http://yutafujiwara.hatenablog.com/
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
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