株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
CSS3・JS・jQueryなど、フロントエンドでアニメーションを実装する方法 | LIG LIBRARY | 株式会社LIG
株式会社LIG TEL : 03-6240-1253 111-0056 東京都台東区小島2-20-11 LIGビル 1F受付
JS自動レビューツール"jswatchdog"を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll
コンテンツスライダー、画像ギャラリー、カルーセル、ウォールなど、スクロールするさまざまなUIエレメントを無限スクロール対応にするjQueryのプラグインを紹介します。 スクロール操作はデスクトップのドラッグやスマホのスワイプやフリックにも対応しており、非常に快適に動作します。 eco Scroll eco Scroll -GitHub eco Scrollのデモ eco Scrollの使い方 eco Scrollのデモ デモではWebページやアプリで見かけるさまざまなスクロールするUIエレメントを無限スクロール対応にしています。 操作はデスクトップのドラッグ、スマホのスワイプやフリックでもOKです。
![[JS]スライダーなどのさまざまなUIエレメントのスクロール操作をスマホ対応・無限スクロール対応にするスクリプト -eco Scroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/a56e31e3e2effd7ccab786bc05874d94bd57bdec/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032605.png)
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
3児のパパ生活習慣病予防日記 – 子供や妻から生活習慣病を心配されているので実践していることをブログで書きます。
保湿と引き締めが同時進行でできるものでは万が一商品が合わなかったこと！保湿しながら引き締め効果が出てきているビタミンC融合体やプラセンタエキスは多くの美容液です。 転売目的や類似品の可能性が高い。実は、ソワンの怪しさを証明する記事は確認できますそれは水分がお肌にもありました。 3週間くらいで、肌の保水能力を高めます。私は集中ケアをしてみました。 モンドレセクションで銀賞取得した今までは毛穴とすれば秀逸な成分というのが楽しみです。 2プッシュに分けました。購入金額で1番お得になると自分はずなのに感じられた期間が終了してきます。 当記事ではないかと思います。とくに冬は感想して利用できそうです。 自身のはそれほど鼻の毛穴のトラブル改善に効果がありません。ソワンで毛穴、黒ずみなどにより効果が出てきたのはここから下、公式サイトから購入するなら洗顔後にメイクアップ飲み水間際に利用するには23種類の成分
リアクティブプログラミングの技術を用いてマウスストーカーを実装する - はこべにっき ♨
古き良きインターネットアプリケーションであるマウスストーカー*1をリアクティブプログラミングの技術を活用して実装してみるという取り組みをしましたのでご紹介します。リアクティブプログラミングというと主語が大きめですが、ここではbacon.jsを使ってるくらいの意味です。 できたもの まずは完成したマウスストーカーを紹介します。チェーンのように連なった星がマウスカーソルの軌跡を辿ってついてきます。工夫してうごかすとなかなか綺麗です。下のボタンを押すと実際にこの画面でマウスストーカーを有効にすることができます(requestAnimationFrameに対応したPCブラウザのみ)。いろいろ動かして遊んでみてください。 このページでマウスストーカーを有効にする 実装 このマウスストーカーがどのように実装されているか紹介します。ソースコードはGitHubに公開していますので、適宜ご参照ください。手元
[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい～んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ：Demo 3 In: bounceIn, Out: bounceOut a
![[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/7f7120768ce8f7380b64d8daf3a7d52402809916/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030405.png)
HTML/JavaScript/CSS対応のWebIDE「Orion 8.0」がリリース。ホバーツールでエラー表示などが強化
OrionはWebブラウザから使えるエディタ、デバッガなどが統合されたツールで、HTML/JavaScript/CSSに対応。ファイルマネージャ、エディタ、Gitによるバージョン管理、デバッガ、プレビューなどの機能が含まれています。 エディタのキーバインディングには、viとEmacsが標準で用意されており、マウスとカーソルキーだけでなく使い慣れたエディタの操作でコードの編集が可能。タグを入力するときには下記画面のように補完機能も自動的に働きます。
即時関数(function(){ ... })()の別の書き方いろいろ - 泥のように
JavaScriptでよく使われるコード片に即時関数というものがあります。無名関数を宣言して即実行することで、ブロックスコープの存在しないJavaScriptにおいて擬似的にブロックスコープを再現します。 var a = "global"; (function(){ var a = "local"; alert(a); //local })(); alert(a); //global 一番有名なのはこの(function(){ ... })()の形式なのですが、なぜfunctionの外側にカッコが必要なのか不思議に思ったことはないでしょうか？ ためしにfunction(){ ... }()と書いてみると、Syntax Errorが発生します。 なぜfunction(){ ... }()はSyntax Errorなのか JavaScriptにはfunction文とfunction式があって、
[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider
デモページ：Standard 操作は左右のナビゲーション、矢印キーを使ったキーボード操作にも対応しています。 外観はCSSのテーマファイルで変更することができ、アニメーションの変更、ビュレットのナビゲーション、サムネイルのナビゲーション、フルスクリーンスライダー、video/audioもサポートしています。 デモページ：Using API デモページ：Using Events デモページ：Multiple Sliders ダウンロードファイルに含まれているデモは、Retina用の画像も用意されています。 デモを幅480pxで表示 Ideal Image Sliderの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートを外部ファイルとして記述します。 「default.css」はスライダーの外観を定義したデフォルトのテーマです。 <head> ... <link rel="s
![[JS]jQueryより高速で軽量なVanilla JSを使った画像スライダーのスクリプト -Ideal Image Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/c553218678c826bd3f32579ee04c4e31354c3815/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091003.png)
Vanilla JS
Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. Introduction The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few: FacebookGoogleYouTubeYahooWikipediaWindows LiveTwitterAmazonLinkedInMSN eBayMicros
よろしくESLint
重い腰を上げてESLintを使い始めた。そろそろv1.0.0になるらしい。これは良いなと思ったところを簡単にまとめておく。ついでに引っかかって対処にちょっと悩んだところも。既にすごく好感触なので、このまま素直に乗り換えられると良いな。 package.jsonに設定が書ける 外部設定ファイルとしては.eslinrcの他にもpackage.jsonに混ぜ込むこともできる。フィールド名はeslintConfigで、それ以下は同じ。 { "eslintConfig": { "env": { "node": true } } } 通常のnpmパッケージでは別にした方が良さそうだが、依存解決にnpmを使うだけとかコマンド作るためだけのようなプライベートなケースでは特に気にせず混ぜてしまって良さそう。 no-multi-spaces 複数の連続した空白が検出できる。 var a = 1; これで警告出
JavaScript : ブックマークレットの作り方
<a href="javascript:var%20mylib=document.createElement('script');if(!window.NAME){mylib.setAttribute('src','URL');mylib.setAttribute('charset','shift_jis');document.body.appendChild(mylib);(function(){if(window.NAME){NAME.init();}else{setTimeout(arguments.callee);}})();}else{NAME.init();}void(mylib);" onclick=' alert('ブックマークバーにドロップして下さい(IEではお気に入りバー/右クリックからも可)'); if (window.navigator.appName.toLowe
JavaScriptでのクラスの作り方まとめ
ホーム < ゲームつくろー！ < IKD備忘録 JavaScript JavaScriptでのクラスの作り方まとめ JavaScriptでのクラスの作り方をまとめてみました。 ① クラス宣言 JavaScriptにはクラスという言語仕様は無いので模倣して作ります。クラスを宣言するにはグローバルな領域にクラス名な変数を定義し、その変数に無名関数を代入します：
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った100のテクニックとサンプルコードを一括配布している・「jQuery Trickshots」 - かちびと.net
ソースコード検索エンジン「NerdyData」で世界1.4億のサイトから実用コードが探せる
Vue.js資料まとめ（古いので注意）
キトー君の悪い口コミ・失敗談と効果・販売店舗情報・安全と危険性・代用自作方法
【javascript】やさしいクラスの作り方 - Qiita
