BT

alertの代替手段を提供するSweetAlert

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2014年10月28日. 推定読書時間: 3 分 |

原文(投稿日:2014/10/09)へのリンク

SweetAlertはJavaScript用の新しいモーダルダイアログライブラリだ。スタイルを重視しながらも,いかなる外部依存も持たない。開発者のTristan Edwards氏は,エラーメッセージを扱う上でWeb設計者が経験する苦労を解消するために,このライブラリを開発した。

SweetAlertは,JavaScriptの組み込みalert関数と同じように使用することができる。

sweetAlert("There's a Problem!");

実行すると,画面中央にモーダルダイアログボックスが表示される。

単純な警告メッセージに留まらず,確認ダイアログボックスや多数のカスタマイズオプションも備えている。

SweetAlertを開発した動機についてInfoQが尋ねると,Edwards氏は次のように話してくれた。

エラーメッセージはWeb設計者にとって苦痛です。開発は退屈ですし,それゆえに愛情を持ってデザインされることもありません。私自身のプロジェクトでもそれが面倒に感じて,汎用的なalert()関数を使うことに決めたのはいいのですが,後になってその酷さに辟易したことが何度もあります ... そんなこともあったので,これ以上先延ばしすることはできないと思って,最高にセクシーなエラーメッセージプラグインを作ることに決めたのです。

利用した開発者からすぐに指摘があったのは,売り文句とは裏腹にプログラムの実行を中断しないため,alert()confirm()の本当の置き換えにはならないという点だ。セマンティクス上の説明は別として,プロジェクトはwebコミュニティに強い印象を与えた。ちょうど1週間でGitHubのリポジトリには4,500以上のユーザによって星が付けられ,月間のトレンディリポジトリリストにも掲載されたのだ。

最初の公開からしばらくの間に,コミュニティによって依存性を解消するコードがチェックインされた。"最初のバージョンではjQueryを使用していたのですが,どういう訳か皆はそれがいやだったようなのです" とEdwards氏は述べている。RedHatの技術者であるConnor Hindley氏が,"hack'n' slash"と自身が呼ぶ,jQuery依存性を取り除くコミットをチェックインした

依存性を排除した結果として,ブラウザサポートの範囲は狭くなった。これについてEdwards氏は,自身の気持ちの中に"Internet Explorerというブラウザは存在しない",と述べている。そのため,IE11で動作しなくても,Microsoftブラウザのサポートは後回しになっている。

競合するライブラリのsmoke.jsでは,IE6以上をサポート対象としている。この種のライブラリは将来的には,完全なカスタマイズ機能と統合的な操作APIを備えたHTML5 ダイアログで置き換えられることになるのかも知れない。今のところ,この機能に対する広範なブラウザサポートは存在していない。

他の開発者のコメントは総じて好意的だ。Edwards氏へのツイートで,David Sivocha氏は次のように言っている。

@t4t5で素敵なalertを見付けました!とにかく素晴らしいので,すぐにでもプロジェクトに取り込みたいと思います!クールなものを提供してくれてありがとう。

Product Huntのサイトでは,Troy Osinoff氏が "とてもスイートで,デザインも抜群だ" と評している。

開発者のEdwards氏は,GitHubリポジトリへのコントリビューションを広く求めている。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

Buen trabajo by Nomasvirus Madrid

チーム nomasvirus.com/paginas-web/ から、私たちは素晴らしい仕事とはあなたがどのように偉大な貢献のために、挨拶と感謝をそれを維持することを言います。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

1 ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT