Chrome・Firefox・Edgeでユーザースクリプトを動かすことができクラウドで同期もできる拡張機能「Violentmonkey」を使ってみた
各ユーザーが公開する便利な機能をブラウザに導入できる仕組みが「ユーザースクリプト」です。「Violentmonkey」はユーザースクリプトをChrome、Firefox、Edgeの各ブラウザに導入し、クラウド同期まで可能な拡張機能とのことなので、実際に使ってみました。 Violentmonkey https://violentmonkey.github.io/ まずはViolentmonkeyをブラウザにインストールするところから。公式サイトの「GET STARTED」をクリック。 遷移先の「Stable Release」に各ブラウザ向けのリンク一覧があります。今回はChrome版のViolentmonkeyを使うため、「Chrome Web Store」をクリック。 Chromeに追加をクリック。 ポップアップが表示されるので、「拡張機能を追加」をクリック。これでインストールが完了です。
Vuexライクなノンコンポーネント用ステート管理ライブラリ「Vanix」をつくってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、フロントエンドエンジニアのヒガです。 ここ最近の案件でNuxtを使っていたんですが、とっても素敵なフレームワークで恋に落ちちゃいそうでした。 でも、僕の対応する案件はそれらのフレームワークを使えないことも多く、フレームワークを使ったあとにそういった案件にとりかかると正直めんどうだなと感じることがあります。ですので、一部の機能だけでもいい感じにつかうことはできないかなと思いました。 目をつけたのはステート管理に関する機能です。NuxtでいうとVuexですね。公式サイトを引用するとこのように書いてあります。 Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。 これは予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能します。 （引用元：https://vuex.
gas-github - Google App ScriptをGitHubで管理！ MOONGIFT
Googleスプレッドシート上でもマクロに似た機能、Google App Scriptが利用できます。JavaScript（のサブセットですがネットワーク周りはむしろ使いやすい）で書けるのでとても簡単に使えます。 問題はWeb IDE上で書かないといけないことで、バージョン管理に対応していないことです。そこで使ってみたいのがgas-githubです。 gas-githubの使い方 Google Chromeの機能拡張として動きます。まずGitHubの認証情報とアクセストークンを登録します。 そうするとツールバーにリポジトリを選択するUIが追加されます。 後はコードを編集してpushしたり、逆にpullしてリポジトリと同期します。 ちゃんとコードがGitHubリポジトリに入ります。 バージョン管理できるだけで十分なのですが、GitHubへバックアップするのにもぴったりです。ローカルで編集して
fallback - JavaScript/スタイルシートを外部CDNからダイナミックに読み込み MOONGIFT
最近はCDNサービスが多数あり、JavaScriptやスタイルシートを外部サイトから読み込むのも当たり前になっています。しかし他サービスとあって、ずっと存在し続けるのかも安定性も若干の不安が残ります。 しかしだからといってローカルにファイルを用意するのも面倒です。そこで使ってみたいのがfallbackです。 fallbackの使い方 fallbackはスタイルシート、JavaScriptファイルをダイナミックにローディングしてくれるライブラリです。使い方は見ての通りで、一つのライブラリに対して複数のURLを指定できます。 // Here we actually invoke Fallback JS to retrieve the following libraries for the page. fallback.load({ // Include your stylesheets, th
Yarn - 次世代のJavaScriptライブラリ管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptのライブラリ管理としてはnpmまたはBowerがよく使われています。npmを使っていて思うのはインストールにかかる時間がとても長いということです。ライブラリをインストールするのに長時間待たされてイライラした経験がある方は多いのではないでしょうか。 そこで使ってみたいのがYarnです。npmと同等に扱え、さらに高速でセキュアなライブラリ管理システムです。 Yarnの使い方 Yarn自体はnpmなどでインストールできます。インストールしたらnpmと同じように初期化をします。 $ yarn init yarn init v0.15.1 question name (test-yarn): question version (1.0.0): question descr
Booking.js - 空いている時間を表示するスケジュール管理 MOONGIFT
忙しくなってくるとミーティングなどの時間調整もままならなくなっていきます。なんとなく避けて提示した時間が相手にとってはピンポイントだったりして、いつまでも調整がつかないなんてこともあります。 そこで自分の予定をオープンにして、空いている時間を埋めてもらうのはいかがでしょう。Booking.jsはまさにそんなUIを提供します。 Booking.jsの使い方 Booking.jsのUIです。週間表示で1時間ごとに枠が決まっています。 空いている時間を選択すると予定を差し込めるようになっています。 こんな感じで自分の情報を入れればOKです。 複数のカレンダーにも対応。ビフの予定は入れたくないですね…。 Booking.jsは国に合わせて日付などの表記を変えたり、コールバックを受け取ることもできます。上司と面談する時間を各自で決めたり、弁護士などの仕業の方にとって便利なUIかも知れません。 Boo
WordPressで特定ページにだけコードを埋め込める便利プラグインの使い方をご紹介 -CSS & JavaScript Toolbox
特定のページだけヘッダに手をいれたい、テキストや画像を加えたい、CSSやJavaScriptやPHPを適用するなど、特定の複数ページにだけコードを埋め込めるWordPressのプラグインを紹介します。 個別にCSS/JavaScriptを埋め込むことができるプラグインは他にもありますが、HTMLやPHPにも対応、そしてそれらを一元管理できるのはこれだけだと思います。 CSS & JavaScript Toolbox 以前ご紹介したCSS&JavaScript Toolboxが新しいバージョンをリリースされたので、改めて紹介します。 新しいバージョンになり、Free版とPro版の機能の差はなくなりました。 ※Pro版はサポートやフォーラムへのアクセス権がつきます。 CSS & JavaScript Toolboxの特長 CSS & JavaScript Toolboxのインストール CSS
wp_register_scriptとwp_enqueue_scriptの使い方とその違いとは
$handleは登録させるフック名で、あらかじめWordPressで登録されているフック以外の好きな名前が決めれます$srcはJavascriptのパスを書きます。$depsはどのJavascriptの後に読み込ませるか決めることができます。基本的には、読み込ませるwp_enqueue_script()の順に登録されますが、依存関係があるJavascript(JQueryプラグインなど)を登録させたい場合は、依存元のJavascriptの$handleを書いておくとそのJavascriptの後に登録されます$verは読み込ませるJavascriptのパスにパラメータを付与できます。なにも書かないとWordPressのバージョン番号がパラメータに付与され、なにかパラメータを書いておくとそのパラメータが呼び込まれます。パラメータを付与させたくない場合は、NULLを書くことでパラメータが付与され
Google タグマネージャで Web ページに読み込む JavaScript を管理してみる
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
タグマネジメントツール「Googleタグマネージャ（Tag Manager）」についての紹介 | アユダンテ株式会社
現地時間の2012年10月1日、日本時間では10月2日にGoogleから新たなWebサイト向けツール「Google Tag ManagerTM」が公開されました。 これはGoogleアナリティクスTMやコンバージョンタグなどといった「HTMLに差し込んで使用するコード」をHTMLから外部化して、一元管理するためのいわゆるタグマネジメントツールです。 今までのGoogleのツールと比較すると少々使い方などが特殊で、人によっては分かりづらく感じる方もいらっしゃるかと思いますのでざっくりとした紹介をしてみようと思います。 「HTMLに埋め込むコード」を一元管理するためのツール 具体的には、外部ツールが生成したコードをまとめる 実際に使ってみよう 使用準備（初期設定） Google Tag Managerコードの埋め込み 既存HTMLから埋め込んでいる他ツールのコードを切り出し 「タグ」と「ルール
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
MTQに「MTの管理画面上でCSSファイルやJSファイルの編集を行い、任意の場所に保存する方法はないでしょうか」というような質問がありましたので、こちらで情報展開します。 MTQ - フォルダにHTML以外のファイルを保存できるか？ このエントリーは以前書いた「インデックステンプレートにパスを設定する」のMovable Type 5版＋αになります。 １．インデックステンプレートで管理する Movable TypeでCSSファイルやJavaScriptファイルなどのテキストファイルを管理するには、インデックステンプレートを利用する方法があります。 CSSファイルやJavaScriptファイルにテンプレートタグを使えるという利点の他、テンプレートタグを使わないファイルでもFTPを行う必要がなく、管理画面上で編集・保存が行えるというメリットがあります。 ２．出力ファイル名にパスを設定して任意の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
