jQuery easySelect
A plugin to present multiple select elements in easier way. Download .zip Download .tar.gz View on GitHub Demo Download manually or install via Bower: bower install easyselect Add jQuery (requires jQuery 1.4.2 or later) and plugin assets into the <head> element: <link href="jquery.easyselect.min.css" rel="stylesheet"> <script src="jquery-1.10.2.min.js" type="text/javascript"></script> <script src=
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」:phpspot開発日誌
selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」 2015年02月03日- jQuery easySelect selectの複数選択のUIをサジェスト方式に変えるjQueryプラグイン「easySelect」。 selectタグにmultiple属性を追加すると複数選択が可能ですが、これを複数選択形式をUIを変えて入力補完のような形にするプラグインです。 selectのmultipleはCtrlキーを押しながらクリックするなどというUIとなるため、あまり採用はされませんが、ケースによってはこういう入力のUIも使いやすい場合がありそうです 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flex
[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
Riot.js 2.0 を触ってみた — まだReactで消耗しているの? - Qiita
楽すぎてどうしよう。が最初の感触。まだ3時間しか触ってないけど、もうこれでいいや感が半端ない、深夜2時です。 Angularなのか、Reactなのか、2015年が明けても毎週のように新しいJSフレームワークが出る中で、もう正直どうでもよくなってませんか? でも、これは触って楽しいはず。 Riotって何? Riotは、公式ページに A REACT- LIKE, 2.5KB USER INTERFACE LIBRARY とあるように、Reactを意識して作られた超軽量のUIライブラリで、ビュー部分(コンポーネント)に特化しているのが特長です。Vue.jsとかとも同類です。Riot 1.0も「超軽量」という点で、一時注目を集めました。 そのRiotが、2.0で趣向を変えてJSX的なプリコンパイルの仕組みを取り入れて、ReactとPolymerのいいとこ取りのような感じになっています。ただし、次の
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
ES6時代のJavaScript - クックパッド開発者ブログ
こんにちは会員事業部の丸山@h13i32maruです。 最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。このES6は現在策定中で、執筆時点ではDraft Rev31が公開されています。 JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。 現在のモダンなWebブラウザはECMAScript 5.1th EditionをもとにしたJavaScript実行エンジンを搭載しています。 そして次のバージョンであるECMAScript 6th Editionが現在策定中で、略称としてES6という名前がよく使われます。 今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよ
Libreboard – シンプルで簡単に使えるカンバン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最も簡単なタスク管理としてカンバン方式はお勧めです。カラムはステータスを表します。未作業、作業中、完了、バックログなどそれぞれのステータスによってタスクの場所が変えるだけでとてもシンプルです。 今回はそんなカンバンリストを提供するLibreboardを紹介します。すぐに使い始められますのでぜひ試してみてください。 Libreboardの使い方 Libreboardは特にタスク管理として充実した機能があるわけではありません。しかしやるべきタスクや積み残しを管理するのに十分な機能と言えるでしょう。早くはじめて生産性を向上したい、そんな時にぴったりなタスク管理です。 Libreboardはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Lib
React Nativeがスマホアプリのフロント開発を変えるのか - ワザノバ | wazanova
Reactは当初、「Huge step backwards（これではメンテできなくて、かえって大きく後退してしまっている。）」「Rethink established best practives（皆が積み上げてきたベストプラクティスを変えようとしている。）」と揶揄されたりもしましたが、最近は他のJavaScriptフレームワークにもその思想の一部が反映されるようになって、メインストリームに近づきつつあるようです。 さて今回Facebookが、React Nativeを発表 & オープンソースとして公開して話題になっていますが、Tom Occhinoは React.js Conf 2015のキーノートスピーチで、「一度書けば、どのプラットフォームでもうまく動作する。」ではなく、「一度覚えれば、どのプラットフォーム向けにも書けるようになる。」ものであることを強調しています。 同社の開発メンバ
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
ThreePiece.js
概要 ThreePiece.jsは、WebGLの3DCGをシンプルな記法で生成できるようにしたThree.jsのラッパーライブラリです。 わずかな記述で3Dオブジェクトが表示できるように、各オブジェクトには省略可能なデフォルト値が設定されています。 そのため、色、サイズ、位置などほとんどのパラメータを省略することが可能となっており、省略した場合は画面上の見やすい位置に見やすい色で表示されます。設定が難しいライトやカメラの記述も省略することで適切な初期値が設定されます。 https://github.com/aike/ThreePiece.js ボックスの表示 var t1 = new ThreePiece('example1', 300, 200); t1.eval({obj:"box"}); 位置、サイズ、角度の指定 var t2 = new ThreePiece('example2',
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
配列の内容を順番に処理するには？（$.each）
$.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery／someメソッドを、jQueryの$.eachで代替する方法も説明する。 ← 前回 連載 INDEX 次回 → 配列の内容を順に処理するのは、$.eachメソッドの役割です。標準のJavaScriptにも同等のメソッドとしてforEachがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.eachメソッドを利用するのが無難でしょう。 $.eachメソッドの基本 まずは、基本的な例を見ていきます。以下は、オブジェクト配列（メンバーリスト）を読み取り、<ul>／<li>リストとして出力する例です。ただし、age（年齢）プロ
JavaScriptの正規表現メモ - 幸せになり隊
正規表現って難しいですよね。 よく使う正規表現をメモしておきます。 // アルファベットのみ var alphabet = /^[a-zA-Z_]+$/; // アルファベットと数字のみ var alphabetNumber = /^[a-zA-Z0-9_]+$/; // メールアドレス var email = /^(\w+)([\-+.][\w]+)*@(\w[\-\w]*\.){1,5}([A-Za-z]){2,6}$/; // URL var url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@&#;`~=%!]*)(\.\w{2,})?)*\/?)/i; // 半角記号 "@".match(/[\!-\/\:-\@\[-\`\{-\~]/); /
Violet.jsをアップデートしている - あんパン
FirefoxOS向けTwitterAPIライブラリを作った - あんパン 一年前に作ったFirefox OSでTwitter APIを叩くライブラリ、全くメンテをしていなかったのだけど先日のFirefox OSハンズオンで使ってくださっているかたがいらっしゃるとのことで、一念発起して大改造している。 GitHub - masawada/violet: A Twitter Library for Firefox OS masterブランチは以前のままで、developブランチが大改造後のブツ見ればわかると思うけどresetとかいうふざけたcommitがあってほぼ丸々書き換えている。今回からmin.jsを作るのにgulpを使うようにした。 gist7b89907c900e5e87994f テストコードとかほぼなくてバギーだしまだまだ大きく変更していくつもりだけど、だいたいこういう感じだったら
JavaScriptクライアントフレームワーク「Aurelia」が登場 | OSDN Magazine
1月26日、ECMAScript（ES）6および7で実装された新しいJavaScriptクライアントフレームワーク「Aurelia」が発表された。AngularJSの元開発者が開発したもので、早期プレビュー版が公開されている。 AureliaはAngularJSの開発に関わっていたRob Eisenberg氏が中心となって開発した、WebプログラミングにフォーカスしたJavaScriptフレームワーク。Webアプリケーション構築や個々のライブラリを利用してのWebサイト構築、Node.jsとともにサーバー側でライブラリを利用する、カスタムフレームワークの作成、といった用途に利用できるという。 ECMAScript 6（ES6）とECMAScript 7（ES7）で実装されており、モジュラー構造を特徴とする。外部ライブラリとしてレガシー環境をモダンなブラウザと同等にするための「polyfil
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
JavaScript ベストプラクティス Part 1 | POSTD
ThinkfulはWeb/スマートフォンアプリの技術などを学ぶことができるオンラインスクール。プロフェッショナルな開発者がメンターとして1対1で伴走するため、他の同様サービスよりも続けることができる。 Javascript ベストプラクティス パート1 2つのパートに分けてお届けする「ベストプラクティス」のパート1では、MozillaのWebエバンジェリストであるChristian Heilmannが提供する人気のスライドショーから内容を抜粋しています。JavaScriptにはひどく扱いにくい特徴がいくつかありますが、それはこれまで以上にソフトウェア開発において重要になっています。この「ベストプラクティス」ではより読みやすく、効率の良いコードを書く手助けとなるサンプルコードやその使用例を紹介していきます。 もしWeb開発についてもっと学びたいと思うのであれば、私たちが提供しているフロントエ
Wallaby - Immediate JavaScript test feedback in your IDE as-you-type
Wallaby.js runs your JavaScript and TypeScript tests immediately as you type, displaying results next to your code. Instant Actionable Feedback Time Travel Debugger Practical Test Insights Test execution results, including code coverage, are displayed and updated in realtime right where you need to see them — in your code editor, next to the line of code that you're editing. Say goodbye to context
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://r4g.org/post-211/
Vivaldi Browser | Powerful, Personal and Private web browser
