一瞬だけ表示されるメッセージ（トースト）をnotieでお手軽実装

2020年6月11日ツール関連

Webサービスでは処理が成功したタイミング、失敗したタイミングでユーザにメッセージを表示したいことは結構あります

javascriptにも標準でalert()と言うメソッドがあるんですが、あまりにダサい

そしてそっけないのです

さらにokボタンを押さないと消えません

そんな時に一瞬だけ表示されて、自動的に消えるメッセージがあれば便利です

Androidアプリ開発者にはおなじみのトーストって言うやつです

デモ

百聞は一見に如かず

どんな見た目、動作なのかはこちらのデモで確認してください

notie

そんな時に簡単に実装できるJavascriptライブラリがあります。notieです

数あるアラートサービスの中からnotieを選んだ理由は以下の通りです

  • カラフルな表示で見た目が良い
  • レスポンシブ対応済み
  • 実装が簡単

実装の仕方

1.ファイルのアップロード

githubページからZipファイルをダウンロード

緑のボタン「Clone or download」をクリックしてダウンロードを選択

解凍してdistフォルダ内にある「notie.min.css」と「notie.min.js」を自分のウェブサイトにアップロード

2.アップロードしたファイルを読みこむ

CSSファイルの読み込み

<head>
    <link rel="stylesheet" type="text/css" href="<ファイルをアップロードしたディレクトリ>/notie.min.css">
</head>

JSファイルの読み込み

<body>
    <script src="<ファイルをアップロードしたディレクトリ>/notie.min.js"></script>
</body>

3.呼び出し

notie.alert({ type: 1, text: '成功！'});

オプション

type

typeとして指定する数値を変えることで、アラートの背景色を変更できる

１→緑(success)
２→黄(warning)
３→赤(error)
４→青(info)
５→灰(neutral)

notie.alert({ type: 1, text: '成功！'});

stay

クリックしない限り閉じないようにする。デフォルトはオフ(false)

notie.alert({text: '成功！',stay: true});

time

表示時間（単位は秒）。デフォルトは３、最小は１

notie.alert({ text: '成功！',time: 5});

position

トーストメッセージを表示する位置。上(top)か下(bottom)かの２択。デフォルトは上（top）

notie.alert({ text: '成功！', position: 'bottom'});

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか？
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談（ヒアリング）するだけで3,000円分のamazonギフト券がもらえます！
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件（100万円超え）が多数あります

詳しくはこちら