はてなブックマーク

SpectrumはWebページにカラーピッカーを導入できるjQueryプラグイン(MIT)で、下記のような特長があります。 設定やCSSで外観を好きにカスタマイズすることができる (下記) HTML5の <input type="color"> がサポートされていないブラウザでも使用できる (公式ではIE 6+, Chrome 4+, Firefox 3.6+, Safari 4+, Opera 11.1+, iOS のサポートを謳っています) 標準状態 不透明度、パレット、コード入力などすべてのオプションを使用して日本語化した場合 パレットのみにした場合 ※カラーピッカーのライブラリはだいたい「グラデーションの中をクリックして色を選ぶ」という形式のものが多いですが、特に業務で使うシステム(管理画面など)においては使う人がそんなに多彩な色を選びたいと思うことは少ないですし、逆に「選んだ色を

「ページのこの部分を流れる文字にしたいです」と言われてしまった <marquee>は使いたくない… ときのための、CSSアニメーションを使ったスタイル指定のサンプルです。 ※「【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。 - ONZE」さんのコードをもとに可変幅にして依存する前提を極力少なくしたものになります。例示用としてベンダープレフィックス(-webkit-等)も外しています。 /** マーキーさせたい部分 */ .marquee { overflow: hidden; /* スクロールバーが出ないように */ position: relative; /* マーキーの内容部分の位置の基準になるように */ } /* マーキーの内容部分の高さ確保 */ .marquee::after { content: ""; white-space: nowrap; di

Aさん「AjaxでCSVファイルを読み込んで動かすJavaScriptのプログラムを作りました」 Bさん「HTMLファイルをPC上で直接開いても動作しますか？」 上記のような場合、ブラウザのセキュリティ制約によりファイルの読み込みがブロックされてしまい、うまく動かすことができません。 この文書では、上記のような場合にどういう方法を用いればセキュリティ制約を回避できるかの例を紹介します。 ※基本的な対象ブラウザはIE11と2016/12時点のFirefox, Chrome, Edgeです。最後の方の方法は前提条件を満たさない方法になってしまっていますが、参考として記載しています。 読み込む外部ファイルをHTMLと同フォルダか同フォルダの下層に配置(Firefox) + Ajaxに Microsoft.XMLHTTP を使用する (IE) Firefoxでは、外部ファイルをHTMLと同フォルダ

Adminerは、PHPで作られているデータベース管理ツールです。(Apache License or GPL 2) phpMyAdminのようにWeb上でMySQLなど※のデータベースを操作できる (一通りのことはできる) MySQL以外で使用したことはないですが、公式では下記の対応を謳っています。 MySQL, PostgreSQL, SQLite, MS SQL, Oracle, Firebird, SimpleDB, Elasticsearch, MongoDB 1ファイルで作成されているため設置が簡単 という特長があり、「DBの接続情報は教えてもらったけどphpMyAdminなどの管理ツールの情報はなかった」「管理ツールの情報を教えてもらったけど管理ツールが独自のものなどですごく使いづらかった」のようなときに便利です。(他人のサーバのトラブルサポートを急にしないといけなくなった場

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? WordPressのセキュリティ用プラグインのSiteGuard WP Pluginは 「ログインを何度も失敗するユーザーに対してロックを掛ける」など主にログイン画面の機能強化用の複数の対策ができる (複数のプラグインを導入・運用する手間が下がる) WordPressで特に狙われやすいXML-RPCの無効化機能も持っている ひらがなの画像認証機能を持つため日本語を理解していない攻撃者に対して比較的有利 WAFを提供しているJP-Secureが提供している 法人かつ主事業とマッチしているため品質がある程度見込め、メンテナンスが中長期続く(

TinyMCEには画像挿入ボタン( image )が用意されていますが、標準の状態だとURLを入力する機能しかなく画像をアップロードして挿入するようなことができません。ファイルのアップロードと選択機能の仕組みを別途用意して、TinyMCEの file_browser_callback という設定を経由することでファイル選択(挿入)の機能を実現することができます。 画像のアップロードや選択機能を自力で、かつ使ってもらう人に使いやすいように作成するのは少し手間がかかるので、今回はelFinderを活用して画像アップロード機能を追加する方法を説明します。(内部的な仕組みは <iframe> なので、ひと通り仕組みが把握できれば自作や他の製品と連携するための参考になると思います) 1. TinyMCEとelFinderを設置する まず、TinyMCEとelFinderを設置して使用できる状態にして

PDF.jsはJavaScriptで作られたPDFビューアです。(厳密にはPDF読み込みを行うパーサ、描画を行うレンダラ、画面UIのビューアがセットになっているもので、ライセンスはApache License 2.0です) Mozilla Foundationが開発していてFirefoxのPDFビューアとして採用されているため品質が高い JavaScriptでPDFを読み込んでCanvasで描画しているためiPhoneやAndroidなどスマートフォンでも表示できる ビューアがHTMLファイルのため<iframe>でPDFを埋め込み表示できる のような特長があり、PDFを直接表示できない環境での代替として使用することがよくあります。 この文書では、PDF.jsの基本的な設置方法を説明します。 1. 配布サイトからファイルをダウンロードする まず https://mozilla.github

TinyMCEは、ブログやWordのような形で文章を見たまま編集(WYSIWYG。What you see is what you get)できるエディタのライブラリです。 (JavaScriptで作られていて、ライセンスはLGPLです) プラグインなどによる機能が豊富 WordPressなどに採用されていて品質が高い ツールバーの追加、ボタン位置の入替や削除、独自ボタンの追加などカスタマイズが柔軟にできる などの特長があります。 この文書では、TinyMCEの基本的な設置方法を説明します。 ※ この文書は独自で開発しているWebシステムやツールにTinyMCEを組み込むことを想定したもので、WordPressなどに組み込まれているTinyMCEのカスタマイズ資料ではありません。 1. 配布サイトからファイルをダウンロードする まず https://www.tinymce.com/down

DataTablesはHTMLの<table>をデータグリッドにするためのライブラリで、 下記のような特長があります。 素の<table>に下記の機能を手っ取り早く追加することができる 件数制限機能 ページング機能 (10件ずつ表示してページ切り替えするなど) ソート機能 (列の見出しをクリックして並び替え) フィルタ機能 (全データのキーワード検索) スクロール機能 (表が大きい場合にスクロールバーを追加する) サーバからのデータ(JSON)読み込みと表示ができる 外観がまとも (下記のようにBootstrapの外観に合わせることも可) ※ 編集機能もありますが有償です。 ライセンスはMITで、使用するにはjQueryが必要です。 この文書では、DataTablesの基本的な使い方を説明します。 (列や行の移動、列固定、無限スクロールなどの拡張機能がいろいろありますが、この文書では説明し

elFinderはサーバ上のフォルダやファイルを簡単に操作するためのファイルマネージャ用のライブラリです(JavaScript+PHPで作られていて、ライセンスは修正BSDです)。 WindowsのエクスプローラやMacのFinderのような操作感 ドラッグ & ドロップでファイルの追加(アップロード)ができる フォルダをドロップするとフォルダごと一式アップロードできる サーバ上のテキストファイルの簡易編集ができる ファイルやフォルダをZIPで圧縮してダウンロードできたりサーバ上で解凍できる 他のファイルマネージャのライブラリに比べて外観がまとも のような特長があります。(DropboxやGoogle Driveなどとの連携、TinyMCEやCKEditorとの連携もできるそうですが、今のところ必要になったことが無いので使ったことはありません…　→ [2016/06/10] TinyMCE