JavaScript Plugin Architecture この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていくことを目的としたものです。 次の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 この書籍のソースコードは、次のGitHubリポジトリに公開されています。 azu/JavaScript-Plugin-Architecture: JavaScriptプラグインアーキテクチャの本 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 はじめに JavaScriptの世界では1つの大きなライブラリよりも小さなライブラリを組み合わせていくようなスタイルが多く見られます。小さなものを組み合わせて作るためには、プラグインと呼ばれる拡張の仕組みが必要とな
body-scroll-lock.js「すべてのブラウザでスクロールのロックしたるで」←こいつ超有能 - Qiita
この記事に書いてあること JavaScriptプラグインのbody-scroll-lock.jsの使い方について サイトリンク GitHubリポジトリ npmサイト body-scroll-lock.jsとは？ ターゲット要素（モーダル/ライトボックス/フライアウト/ナビメニューなど）のスクロールを中断せずに、ボディスクロールを禁止にするプラグインです 対象ブラウザ iOS Mobileおよびタブレット、Android、デスクトップSafari/Chrome/Firefox どんな時に使うか？ 例えばモーダルを表示した時に、背景を固定したいといった場合に使うことができます。 モーダルの中だけスクロールを有効にして、背景固定を実現するなんてことも簡単に実装可能です。 なぜ使うの？ スクロールのロックは簡単そうに思えて、実は結構面倒くさい処理内容です。 例えば、 overflow:hidden
より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。 Bootstrap5公式Blog記事(日本語訳) Bootstrap5を正式公開しました！3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します！ 新しいロゴ 新コンポーネント：Offcanvas 新しいアコーディオン 新しくなったフォーム チェックボックスとラジオボタン フローティングラベル 新しいファイル入力 シンプルになったレイアウト RTL対応 刷新されたユーティリティ 新しいユーティリティAPI 新しいユーティリティ スペーシングユーティリティ 新しいスニペット例 グリッドとレイアウ
2019年も残すところわずかとなり、今年もWeb制作を快適にするオンラインツールがたくさん公開されました。 この記事では、今年紹介したツールのなかでも特に話題になった2019年の便利オンラインツールベスト85個をまとめてご紹介します。 実際に制作フローに取り入れて便利だったツールを選りすぐったこのコレクションには、「無料で利用できることを基本としたツール」を揃えています。これらのツールやサービスを活用して、より快適なWeb制作ライフを過ごしましょう。 2019年に登場した最新オンラインツール一覧 以下は、2019年にかけて当サイトで紹介した、ウェブ制作が捗る便利ツール一覧となります。今回未紹介のツールが中心となっているので、こちらも一度目を通しておくことをオススメします。 ウェブデザイン制作が爆速に！便利な最新オンラインツール47個まとめ ウェブデザイン制作が加速中！便利な最新オンラインツ
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました JavaScriptのプラグインシステムについて書いた小さな電子書籍であるJavaScript Plugin Architecture 2.0をリリースしました。 1.0(初版)公開時の記事は次のページから参照できます。 JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた | Web Scratch 2.0の詳しい変更点についてはリリースノートを参照してください。 Release v2.0.0 · azu/JavaScript-Plugin-Architecture 2.0リリース時にGitBookからHonKitに移行しました。 そのため、公開するURLが次の場所に変更されています。 https://a
2022年4月27日 CSS, SVG CSSでフォーム内の部品を装飾するのは、昔から難儀でした。特によく使うチェックボックスは色をつけることすら難しく、様々なCSSの小技やJavaScriptプラグインを使って実装してきました。今回はチェックマークにSVGを使い、なるべくシンプルな書き方でチェックボックスを装飾してみようと思います。 ↑私が10年以上利用している会計ソフト！ チェックボックスを装飾する手順 1. HTMLマークアップ まずはHTMLを書いていきます。label タグでチェックボックスを囲うと、for 属性や id 属性の指定をしなくても label タグ内のテキストがクリック範囲となるので便利です。テキストは span タグで囲みました。この span 部分にCSSでチェックボックスを表示させる指定をしていきます。 HTML <form> <label> <input t
2021 年振り返り
2021 の出来事を振り返ります。 学校 2021 年 4 月で B3 になるはずだったんですが、留年しました。 留年していたらしいということを夏頃に知りました。後輩が教えてくれました。僕が留年したことを教えてくれた後輩たちの顔はすごく楽しそうでした。 いつか留年するつもりではいたので特に悲しい気持ちはなかったんですが、留年したことに気づくことすらできてなかったのはちょっとおもしろいなと思いました。両親も「そりゃそうだよね」みたいな反応をしていました。 筑波大学の留年の仕組みをよく知らないので自分が B3 と名乗るべきなのか B2 と名乗るべきなのかよくわからないんですが、少なくとも卒業までの年数が1年伸びたのは確かなようです。 留年はしたものの、線形代数 A という科目を再々履修で修得することができました。すごく嬉しかったです。色々と教えてくれた同級生、後輩、知りあいのエンジニアの方々、
はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。 はじめる あなたのプロジェクトに Bootstrap を素早く追加したいですか？無料のオープンソース CDN である jsDelivr をご利用ください。パッケージマネージャを使用していたり、ソースファイルをダウンロードする必要がありますか？ダウンロードページへをご覧ください。 CSS スタイルシート <link> をコピーして、他のスタイルシートの前にある <head> に貼り付けて、CSS を読み込みます。 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384
どうも、ドミナゴ（@Dominago50）です。 Udemyで受講し始めたWordPress（ワードプレス）の基礎と応用について、の10回目となります。 私が受講しているのは、以下のコースです。 Become a WordPress Developer: Unlocking Power With Code リンクをクリックするとUdemyの該当ページにジャンプします。 また、1回目～9回目の記事は以下となります。 Udemyのレッスンを受講してWordPressの使い手になる（その1） Udemyのレッスンを受講してWordPressの使い手になる（その2） Udemyのレッスンを受講してWordPressの使い手になる（その3） Udemyのレッスンを受講してWordPressの使い手になる（その4） Udemyのレッスンを受講してWordPressの使い手になる（その5） Udemyの
Next.jsのデメリット【欠点】を理解する - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か？ 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ
【JavaScript】スクロールに合わせてふわっと表示させる方法 Part1.「AOS編」 - ABCウェブエンジニアblog
サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。 ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。 こんな感じにふわっと表示 ↑今回ご紹介するのはこの動きの実装方法です。 ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。 そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。 jQuery不要、超簡単ふわっと表示系JavaScriptプラグイン「AOS」 いくつか使用した事のあるプラグインの中で最近ちょうど使っている 「AOS (Animate On Scroll Library)」というjQuery不要のJavaScriptプラグインを解説します。
Kong のバージョン情報と Blue-Green デプロイメント - Techtouch Developers Blog
テックタッチアドベントカレンダー 6日目を担当する taisa です。 W杯日本代表惜しかったですね。自分は本田さんの解説と三笘さんのプレーが大好きになりました。 今回は、Kong バージョンや Blue-Green デプロイメントによるバージョンアップについて調べてみたのでまとめてみます。Kong についての詳細は、以前書いた記事「 OSS 版 API Gateway、Kong Gateway をつかってみる」を参照してください。 また、余談ですが先日「デジタル庁が、Kong Gateway を推奨 API ゲートウェイに認定する」といったプレスリリースが出されていました。 prtimes.jp 本記事の目的 CHANGELOG サマリ v1.0.0 v1.1.0 v1.3.0 v1.5.0 v2.0.0 v2.1.0 v2.2.0 v2.4.0 v2.8.0 v3.0.0 Blue-G
Bootstrap5設置ガイド
PST（米国太平洋時間）2021/5/5にBootstrap v5.0.0が公開されました。ここではBootstrap5の使い方をv4.xからの変更箇所も含めて日本語で解説しています。 解説はできるだけ最新版（v5.3.3）に対応するよう更新しています。 目次を見る 導入を見る ※Bootstrap4.xの解説は、Bootstrap4移行ガイドをご覧下さい。 ※Bootstrap3.xの解説は、Bootstrap3移行ガイドをご覧下さい。 Bootstrapとは？ もともとTwitter社のデザイナーや開発者が作成したBootstrapは、世界で最も人気のあるフロントエンドのフレームワークとオープンソースプロジェクトの1つとなっています。 Bootstrapは、Mark Otto（@mdo）、Jacob Thornton（@fat）の両氏によって2010年の中頃にTwitter社で作成され
この投稿では、JavaScriptで実装されたプラグインシステムにおいて脅威になりうる、プロトタイプ汚染攻撃の手法を説明します。 対策についてはまだ検証中なので説明しませんが、プラグインシステムを設計するにあたって、プロトタイプ汚染攻撃が脅威であることを一度整理しておきたかったので記事にしました。 プロトタイプ汚染攻撃とは プロトタイプ汚染攻撃(prototype pollution attack)とは、ざっくり言うと、攻撃者がJavaScriptオブジェクトのプロトタイプを書き換えることで、情報を盗んだり、オブジェクトの振る舞いを変更したりする攻撃のことです。 JavaScriptの言語的特徴を巧妙に悪用した手口 JavaScriptでは、オブジェクトを生成すると、プロトタイプオブジェクトと呼ばれる生成元のオブジェクトへの関連を持つことになります。 例えば、Fooオブジェクトを定義した場
こちら↓ JavaScript: プラグインシステムとプロトタイプ汚染攻撃 - Qiita のコメント欄で、「Node.js でサンドボックスを作るなら vm モジュールおすすめだぜ！」 と言うような主旨のコメントをしたのですが、 色々と注意が要る機能でもあるので、補足がてらにちょっとまとめてみます。 vm モジュールを利用したサンドボックス化 Node.js の vm モジュール を使うと、 新規コンテキスト下で任意のスクリプトを実行することができます。 const vm = require('vm'); // 新規コンテキストを作成 const context = vm.createContext({ // コンテキスト内のグローバル変数・関数 x: 10 }); // 作成したコンテキスト下で実行 const result = vm.runInContext("x + 2", con
初心者向けのjQuery入門講座
使い方 まず最初にチェックするコンテンツです。どのような考えをもとにプログラムを組み立てていくか、設計力を学びます。 サンプル 使い方で学んだことを生かして、簡単なサンプルの作成を学んでいきます。 プラグイン jQueryで利用できる便利なプラグインを紹介していきます。 リファレンス jQueryのリファレンスです。辞書代わりにご利用ください。 使用例 企業サイトでのjQueryの使用例を紹介していきます。 始めに jQueryはデザイナーにも利用しやすいjavaScriptプラグインです。このサイトはhtmlやcssを充分に理解しており、さらに基礎的なjavaScriptをマスターしている方を対象に記事を書いています。 現在はスマートフォン用のゲーム制作に注力しているため、本サイトの更新は休止状態（2014年3月が最終更新）です。ゲーム制作に関するブログ：スマゲー作るよ！はほぼ毎日更新し
＊ 2020年5月10日時点の情報 loading-attribute-polyfill は、最新の遅延読み込みに対応していないブラウザのためにフォールバックするためのPolyfillです。SEOフレンドリーでInternet Explorer 9まで対応しています。noscriptタグを常用しなければならないので、開発の時点で導入をしておくべきでしょう。 lazysizes は、GitHubで一番人気の遅延読み込みプラグインです。多機能で拡張機能なども豊富に用意されています。なお、標準ではgetBoundingClientRect()を利用していますが、src/lazysizes-intersection.jsを使うことでIntersection Observer APIを利用した遅延読み込みが使えます。ただし、ドキュメントに一切記述がないため、現時点では参考程度にとどめておいたほおうが
v5で変更された内容
v5.3.0 以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。 Helpers カラーリンクに再び！!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。 Utilities 新しい.d-inline-griddisplayユーティリティが追加されました。 v5.3.0-alpha2 v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。 CSS variables 重複したり、使用されていないルートCSS変数を削除しました。 Color modes ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモ
WordPressのカスタマイズにはCSSやPHP、HTML、JavaScriptを利用します。 JavaScriptが使えるとスライドショーやアニメーションなど、動的なコンテンツのカスタマイズが可能です。 今回の記事では、JavaScriptの読み込み方法やJavaScriptプラグイン、管理画面からJavaScriptファイルを編集する方法などを解説します。 JavaScriptを使いこなし、WordPressを自由にカスタマイズしましょう。 JavaScriptとは、ウェブページ上で高度な機能を実現するためのプログラミング言語です。 「好きなところにズームできる地図」「2Dや3Dのグラフィックアニメーション」「スライドショーのスクロール」「カーソルを合わせると変化するボタン」などの機能にJavaScriptが使われています。 JavaScriptはユーザーのブラウザ上で動作するため、
貴社のサイトも要注意！ jQuery脆弱性対策のポイント | デジタルマーケティングTips | 株式会社マックスマウス
Webサイト内で古いjQueryを使っている場合は、脆弱性によるサイト改竄等のおそれがあるため、最新版に置き換える改修が必要です。本記事では改修が必要な理由と実際の作業の流れを解説します。 要点 jQuery旧版はXSS脆弱性あり。最新版に換えるべし 古いjQueryの置き換えは付随する改修が多い。大仕事になる場合も 単独で対策するほか、サイトの機能改修のついでに脆弱性対策も行うという方法も吉 現代のWebサイトに必要不可欠な「jQuery」とは jQueryは、2006年に初版が発表され、現在では世界中のWebサイトで使用されているJavaScriptライブラリです。JavaScriptコードの記法・構文を簡略化することで開発効率が上がること、ブラウザ間での動作の差異や不規則さを抑えられること、jQueryに合わせて開発された各種ライブラリ(jQueryライブラリ)を動かすための基礎動作
インストール # 1. ダウンロードして使う GitHub からスクリプトをダウンロードしてスクリプトタグで読み込む <script src="/path/to/js.cookie.js"></script> # 2. CDNを使う <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script> # 3. NPMでインストール npm $ npm install js-cookie --save yarn $ yarn add js-cookie 読み込み import Cookies from 'js-cookie'; 使い方 Cookieを保存 Cookies.set('cookie_name', 'value') Cookies.set('idol', '星宮いちご'); 期限
当サイトのアイキャッチは主にAdobe Expressで作成しています。Adobe Expressならデザインパーツを並べるだけ、最速1分！ カンタン素早く作成できます♪ >>> Adobe Expressでできることをくわしく タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はCSSフレームワークはとても助かります。 Bootstrap4で特定のタブに直接リンクするhttps://getbootstrap.com/ BootstrapのTabは .nav-tabs というclassで実現します。tab用javascriptプラグインが必須です。（コンパイル済みのbootstrap.jsでOK） Bootstrapのタブドキュメントは以下のページ https://getbootstr
![特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]](https://cdn-ak-scissors.b.st-hatena.com/image/square/449c5dbd52b27062a353c9106e2708d1a93db4e4/height=288;version=1;width=512/https%3A%2F%2Ftokushiyo.net%2Fwp-content%2Fuploads%2Ftoku-direct-link-tab.png)
ナビゲーションバー
基礎知識 ナビゲーションバーを始める前に知っておきたいことをご紹介します。 レスポンシブに折りたたむために.navbarを.navbar-expand{-sm|md|-lg|-xl|-xxl}`でラッピングする必要があり、配色クラスも必要です。 ナビゲーションバーとコンテンツはデフォルトでは流動的です。コンテナを変更することで、横幅をさまざまな方法で制限することができます。 ナビゲーションバー内の間隔と配置を制御するには、spacingとflexを利用します。 デフォルトではレスポンシブになっていますが、簡単に変更することができます。レスポンシブな動作はCollapse JavaScriptプラグインに依存します。 <nav>要素を使用してアクセシビリティを確保するか、<div>のようなより汎用的な要素を使用する場合は、role="navigation"をすべてのナビゲーションバーに追加し
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
この書籍について · JavaScript Plugin Architecture
Bootstrap5がリリースされました！
2019年間ベスト！Web制作を変える便利オンラインツール厳選85個
JSのプラグインシステムについて書くJavaScript Plugin Architecture 2.0をリリースしました
CSSとSVGでチェックボックスを装飾しよう！
今週学んだこと：Udemyのレッスンを受講してWordPressの使い手になる（その10） - ドミナゴのブログ
JavaScript: プラグインシステムとプロトタイプ汚染攻撃 - Qiita
Node.js の vm モジュールでサンドボックスを作る場合の注意点 - Qiita
yall.jsを使ってIE11にも対応した画像の遅延読み込み機能を実装する
WordPressでのJavaScriptの読み込みと編集方法
JavaScript クッキー操作できるjs-cookie使ってみた - かもメモ
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]