この記事はMackerel Advent Calendar 2020 2日目の記事です。 はじめに 皆さんはmackerel-plugin-jsonを使っていますか? 個人的にはかなり好きなプラグインなのですが、2017年に書かれたMackerel プラグインアドベントカレンダー以外ではあまり解説されていませんでした。 soudai.hatenablog.com この記事よりも後に追加された機能を紹介している記事も見当たらなかったので、今回はそれらに絞って紹介していきます。 前回実行したときの結果との差分を投稿する-diffオプション -diff オプションの後に正規表現を書くと、その正規表現にマッチしたメトリックに対して前回の実行時からの差分をMackerelに投稿することができます。 アプリケーション内に単調増加するカウンターとその値をJSONで返すエンドポイントを実装しておくことで
昨日、会社としてのプレスリリースも出していますが、クラウド事業者様向けの新機能である「Cloud Provider(クラウド・プロバイダー)インテグレーション」の提供を開始しました。hatenacorp.jp その「Cloud Providerインテグレーション」機能の提供の第1弾として、ビッグローブ株式会社のパブリッククラウド「BIGLOBEクラウドホスティング」との連携も合わせて発表しています。 こうした機能の開発もしていくことで、より多くのサーバー管理者の方々のお力になりたいと考えています。 それでは、今週のアップデート内容です。 CLIツール・mkr にプラグインインストーラー機能を追加しましたMackerel の CLIツールである mkr に、プラグインインストーラー機能を追加しました。 どのような機能かということを一言でいうと、「公式プラグインリポジトリ以外のプラグインを

Firefox 52では、HTTPSで暗号化されていないページでユーザー名やパスワードを入力しようとすると、警告のポップアップが表示されるように(出典:Mozilla) 米Mozilla Foundationは3月7日、Webブラウザ安定版のアップデートとなる「Firefox 52」をデスクトップ向けとAndroid向けに公開した。 Firefox 52では、HTTPSで暗号化されていないページでユーザー名やパスワードを入力しようとすると、警告のポップアップが表示されるようになった。ポップアップは「ここで入力したログイン情報は流出の可能性があります」という内容の文言に、赤い斜線が入った灰色の鍵マークを付けて注意を促す。 Firefoxは2017年1月に公開されたバージョン51から、パスワードの入力を求めながらHTTPSを使っていないWebサイトでは、アドレスバーで赤い斜線の入った灰色の鍵ア

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ(jQueryのプラグインも可)を紹介します。CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。 Tilt.jsの使い方 Tilt.jsは単体でも、jQueryのプラグインとしても動作します。 ※スクリプトがそれぞれ異なります。 vanilla-tilt.js -単体版 Tilt.js -jQueryのプラグイン版 基本書式HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
![[JS]マイクロインタラクションを簡単に!よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f725c3bf66a12921823f06acb252f0fc74725f6e0%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201701%252F2017013001.png&f=jpg&w=240)
・デジタルで絵を描いてみたい! ・でもはじめ方や上達が全然わからない! ・絵を活用した在宅ワークや副収入に興味がある! ・・・そんな想いのあなたに役立つヒントをお伝えする特別なセミナーを、6/25(金)オンラインで開催します。お申し込み受付は6/23まで! どうも、hashiken(@conteanime)です。 最近ブームなのが『wordpressのブログサイトの常時SSL化』ってやつでして・・・。いわゆるサイトのセキュリティや信頼度を上げるためのものなんですが、自分程度の素人には手が出しにくくて長らくほっといてたんですね。ただGoogleが、 『今後検索のサイト表示順位にhttps化してるかどうかを判断材料にする!』 と言ったもんだからさあ大変・・・やってないだけで順位が下げられたらたまらないですし、意地でもやるしかなくなりました。

今年1月に登場して大きな話題になったSound Canvas for iOS。往年の名機、SC-88Proそっくりのユーザーインターフェイスを持ち、SC-88ProやSC-55、SC-8820の音色マップをすべて網羅する形で誕生したこの音源は、国内はもちろん、海外でも大ヒットとなりました。そうした中、当初から「VSTやAudioUnitsに対応したプラグイン版が欲しい!」という声は多くありましたが、ついにそのプラグイン版「Sound Canvas VA」がRolandから登場することになりました。 その詳細は11月7日、8日に東京・渋谷で開催される楽器のイベント「Music Park 2015」に参考出品という形で登場して、明らかになりますが、一足早く、その情報を得ることができたので、速報版としてお伝えしましょう。 ※2021.10.25追記 2020年にRoland Content St

Wordpressといえば、有料・無料問わず、ハイクオリティなデザインや機能を備えたテンプレート(テーマ)が多数あり、利用されている方が多くなっています。 このテンプレートだけでも魅力が十分ですが、さらに今回ご紹介するプラグインを利用することで、よりホームページを魅力的に仕上げることが可能になります。Wordpressのプラグイン10選 1.WordPressSEO by Yoast https://wordpress.org/plugins/wordpress-seo/WordPressSEO by Yoastは検索エンジン最適化(SEO)に関する重要な項目を簡単に調整、設定できるプラグインです。 metaタグの設定やTitleタグなどの基本的な設定だけでなく、各ページのタグ設定や、検索エンジンに読み込まれないようにするnoindexやfollowの設定が行えるため、検索エンジン

現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めします。本コラムでは、jQueryプラグインの作り方と基本的なサンプルをお伝えします。 jQueryプラグインの例 それでは、早速jQueryプラグインの例を見てみましょう。

ファイルを圧縮するってどういうこと?サイトの読み込み速度などを意識するようになると、ファイルを圧縮したくなると思います。 圧縮というとなんだか難しそうですが、要はCSSやJavaScriptなどで、人がコードを見やすいように使用した、改行やタブ、半角スペースなどによるインデント、コメントなどを削除して少しでもファイルサイズを減らして、ブラウザの読み込み速度を向上させようとする作業のことです。 圧縮前のファイル名が「common.css」だとすると、圧縮後は「common.min.css」といった名称でファイル名を付けることが多いですね。 ファイルの圧縮ってどうやってやるの?これまでは、ファイルの圧縮を行う際はインターネット上のサービスを使用して、ブラウザ経由で圧縮することをよくやっていました。 http://ganquan.info/yui/ http://refresh-sf.com/

WATable - A swiss army jQuery table plugin 高機能&高速なテーブル実装jQueryプラグイン「WATable」 フィルタ、フォーマット、ぺージ分け、ソート等を高速にJSで機能させられるテーブルの実装が出来ます。 データを全部一括で読み込んでいるためかなり高速に動作します。 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 複数条件で結果を絞り込めるテーブルを実装できるjQueryプラグイン「Multifilter」 レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」
Panel slider example シンプルなサイドメニュー実装jQueryプラグイン「Panel slider」。 ページの左からあらわれ、コンテンツごとスライドさせるスマホアプリ風メニューが実装出来ます。 関連エントリ 開閉するサイドメニューの実装ができるjQueryプラグイン「tendina」 シンプルデザインなページサイドをメニューにできる「Simple Sidebar」
Perl Advent Calendar 24 日目の 2 記事目です(厳密) カジュアルに HTTP サーバを建てるコマンド PAD の紹介をします。 Plack::App::Directory の略です。 数年前 YAPC の LT-THON で話しただけで文字起こししていなかったネタですが、一部界隈では細々と使われているようです。 使い方 使い方は至って簡単で、インストールして起動するだけです。 $ cpanm PAD $ pad HTTP::Server::PSGI: Accepting connections at http://0:5000/ これでカレントティレクトリ以下がポート 5000 でサーブされるようになります。ポートを変えたい場合は次のように。 $ pad Static --port 8080 プラグイン プラグインを実装すれば特定のファイルに処理をかませたレスポン
表示ページの天地左右からアニメーションでスライド表示するパネルを実装するjQueryのプラグインを紹介します。 デモページ デモではボタンのクリックがトリガーになっていますが、画像やテキスト、ホバーなどに変更することも可能です。 notifyMeの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="assets/css/notifyme.css" type="text/css" /> </head> <body> ... <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/notifyme.js"></scr
![[JS]簡単な実装でパネルを天地左右からアニメーションで表示するスクリプト -notifyMe](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f976bf32a2053071e29221414b5e97a2310fd7694%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201404%252F2014103101.png&f=jpg&w=240)
ブログの記事本文を読むのにかかる目安時間を表示すると読者に親切かも。JavaScriptで作ったので、PHPを使えないサーバーを利用しているウェブサイトやブログに組み込めるよ。このjQueryプラグインを「読了予測時間」と命名。 読了予測時間のデモ画像 読了予測時間が表示されるページ 各記事ページで読了予測時間が表示される。下図で黄色の枠で囲った部分が読了予測時間。下図をタッチで別タブで拡大表示可能。 記事ページとは、はてなブログでいえばURLに/entry/が入っているページ。たとえば次のURL。 http://www.hapilaki.net/entry/jquery-plugin-dokuryo-yosoku-jikan 読了予測時間が表示されないページ 記事ページ以外の記事一覧ページやカテゴリページでは読了予測時間が表示されない。需要があるならアップデートして表示されるようにするか

グラデーションの縞々を取り除いたり、背景を削除したりする実用的なアクションをはじめ、カラーのバリエーションを生成したり、画像を幾何学模様やハーフトーンにしたり、テキストやオブジェクトを3DにするPhotoshopのアクションを紹介します。 no morebanding フラットやソリッドなスタイルがトレンドでも、まだまだグラデも健在です。そんなグラデーションが汚く見えてしまう縞々(バンディング)を取り除いて、美しく仕上げるPhotoshopのアクション。 バンディングを取り除く仕組みは、以前の解説記事(グラデーションをより美しく滑らかにするPhotoshopのアクション )をご覧ください。
初めまして!MUGENUPアルバイトの倉成です。こちらで書く初めての記事として、今回は僕が初めて作ったVimプラグインとMUGENUPエンジニアのエディタ事情について紹介しようと思います。 僕自身はMUGENUPでアルバイトを始めてから、Emacs, SublimeText,RubyMineといろいろなエディタに手を出していましたが、現在はVimに落ち着いています。 もちろん、それぞれのエディタには一長一短があり「他で出来たことがこっちでは出来ない」というようなことはよくありますよね。 後置記法を支援するプラグイン そんな中でも、RubyMineを使っていた時に便利だと思った「bodyが1行のif, unless, while, until文を後置記法に変換する*1」ことがVimではできず、軽く調べてもプラグインが見つからなかったので、自分で作ってみることにしました*2。Github:

HTML5 Experts.jpにServiceWorkerの記事を書いた。Google I/O 2014──ServiceWorkerでネイティブアプリとの差を縮めようGoogle I/Oで見たServiceWorkerのセッションを紹介したもの。セッションの内容を文字にして説明しているという雑な記事。セッションのビデオを見るよりは早いかと思うので、見てない人にはよいかと。見ている人は…なんだろ、紹介されたコードにちょっとコメント入れたので、それを…… コードで思い出した。サンプルで&が&になってしまってるんだけど、なんかWordPressのプラグインのせいなのかどうしても直せなかった。Syntax Highlighting的なプラグインもよくわからず使えず…WP力が低い。 記事を書いていていろいろ考えたことがあったので以下雑多に後記てきなものをば。 ServiceWorke
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く