
軽量なのに強力!jQueryそっくりなJavaScriptライブラリ「Umbrella」とは?
Umbrellaの導入方法
Umbrellaを導入するのは簡単です。
JSdelivr CDNを使うか、JavaScriptファイルをダウンロードしてHTMLに設置すれば完了です。
<script src="umbrella.min.js"></script>
あとはjQeuryと同じようにJavaScriptエリアにコードを書くか、外部ファイルを読み込めばOKです。
Umbrellaの使用例
イベント
イベントを操作するのも簡単です。
以下の例は、ボタンをクリックするごとに「Hello World」を表示するためのコードです。
u("button").on('click', function(){
alert("Hello world");
});
自動的に新規窓を立ち上げるリンクにする
「each()」関数を使って全てのノードに「target="blank"」を付加してみましょう。
u('a').each(function(node, i){
u(node).attr({ target: '_blank' });
});
Ajaxを使う
jQueryに比べてUmbrellaを使った方がずっと簡単にAjaxを利用することができます。
u('form').ajax(function(err, data){
if (!err) alert('Done! Thanks, ' + data.name);
});
ある要素までスクロールする
さまざまなホームページで見られるように、ある特定のclassをつけてそこまでスクロールできるようにコードを書くこともできます。
u('a.team').on('click', function(e){
e.preventDefault();
u('section.team').scroll();
});
10秒ごとに自動保存する
「10秒ごとに自動保存」という一見複雑そうな機能も、Umbrellaでは下記のように非常にシンプルなコードで実装することができます。
// Ajax経由でフォームを送信する
u('form.edit').ajax();
// 10秒ごとに送信する
setInterval(function(){
u('form.edit').trigger('submit');
}, 10000);
まとめ
jQueryと非常に類似性が高いだけでなく、AjaxなどはUmbrellaを使えばjQuery以上にシンプルに書くことができます。
また、とても軽量で学習コストも低く、すぐに導入することができます。
利用に関しての文法ルールや注意事項はDocumentationに記載されています。
ぜひ一度Umbrellaを使ってみてください。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。""にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
おすすめ記事
おすすめエントリー
カテゴリから記事をさがす
Web マーケティング
- SEO(検索エンジン最適化)
- SNSマーケティング
- アプリマーケティング
- Web広告
- グロースハック
- ABテスト・EFO・CRO
- LP制作・LPO
- CMS・Webサイト制作
- 記事制作・ライティング
- コンテンツマーケティング
- メール配信・メールマーケティング
- マーケティングオートメーション(MA)
- リードジェネレーション(見込み顧客獲得)
- カスタマーサポート・カスタマーサクセス
- アクセス解析・広告効果測定
- データ分析
- リサーチ・市場調査
- 口コミ分析・ソーシャルリスニング
- O2O(Online to Offline)
- EC・通販・ネットショップ
- 多言語・翻訳
- 動画・映像制作
- AR・VR制作
- 統計データ
- マーケティングお役立ちレポート
- 連載
- チャットボット
- Web会議
- 動画マーケティング