フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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

僕は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 – 一覧

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+まで対応しています。

Left align
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
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を使って豊富なカードベースのレイアウトをデザイン 🙇

[紹介元] jQueryタグが付けられた新着投稿 – Qiita まるごとSemantic UIでWebサービスを作った話

コメント

記事に戻る

コメントを残す