JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita

2024/02/21 264 users Qiita script src height width

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.... 続きを読む

Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo | コリス

2019/11/15 153 users コリス エフェクト スクロール スクリプト Apple

/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this ... 続きを読む

昨今のJavaScriptをレビューしたら全くわからなかった話 - aoma blog

2019/09/13 633 users 昨今 aoma blog JavaScript class

はじめに 最近JavaScriptのプルリクが来たので「よーしやったるでー」って感じでレビューしたんですが、まったく理解できずレビューになりませんでした。 その時疑問に思ったことをメモします。。 誰かの助けになれば幸いです。。 これはもう引退やな。。 classの中で function って書くの省略してるの？ class TestClas... 続きを読む

最近覚えたシェルスクリプトの小ネタ - カメニッキ

2016/06/28 274 users シェルスクリプト カメニッキ xargs XXXX find

2016 - 06 - 28 最近覚えたシェルスクリプトの小ネタ シェルスクリプト 神から教えていただいた。忘れないように書いとく xargsでfunctionを叩く 下の例だと find xxxx | xargs cp xxxx ってかけば良さそうでイマイチだけど、もっと複雑な処理やらせたいときに。 前はこう書いてた #!/bin/bash for x in ` find /var/www -n... 続きを読む

【新機能】AWS LambdaにSlack連携のBluePrintが登場。ChatOpsがより手軽に ｜ Developers.IO

2016/01/17 182 users Blueprint ChatOps Lambda Slack

こんにちは、せーのです。今日は普段Slackをお使いの皆様にオススメの新機能をご紹介します。今日ご紹介する機能を使うとSlackを使ってAWSを操作する、所謂「ChatOps」が手軽にできるようになります。 LambdaからSlackへ LambdaのFunctionを選ぶとまず「BluePrint」と呼ばれるナビゲートが出てきます。これはその名の通りLambdaを使って何を書きたいのか、という青... 続きを読む

AngularJS - HTML5/JSでインスタントサーチ（入力中に検索結果表示） - Qiita

2015/07/12 104 users Qiita AngularJS lists スクリプト 文字列

3. JS: インスタントサーチのスクリプト この節がいちばんの肝です。 まず、lists = document.querySelectorAll('.line-shell-main-users-li');で検索対象を取得します 次に、for文内でinnnerTextでタグ内の文字列を取得します 最後に、.hiddenクラスをトグルします searchUsersList = function(ev... 続きを読む

Amazon API Gateway – API作成から動作確認までやってみる ｜ Developers.IO

2015/07/10 104 users gateway API Developers.IO 動作確認

Amazon API Gateway – API作成から動作確認までやってみる Amazon API GatewayでAPIを公開する 先日開催された「AWS Summit 2015 New York」にて、「Amazon API Gateway」が発表されました。 このサービスを利用すると、Amazon lambda functionやインターネットで公開されているアプリケーションを利用して R... 続きを読む

Lumen - PHP Micro-Framework By Laravel

2015/04/14 101 users Lumen expect PHP GET $app

Lumen - The Stunningly Fast PHP Micro-Framework By LaravelLumen. The stunningly fast micro-framework by Laravel. <?php /** * Reimagine what you expect... */ $app->get('/', function() { return view('lu... 続きを読む

JSファイル全体を括るfunctionについての話。（JavaScriptおれおれAdvent Calendar 2014 – 01日目） | Ginpen.com

2014/12/01 240 users Ginpen.com グローバルスコープ スコープ 変数 関数

これですね。これ何か呼び方あるの？ なにこれ グローバル変数にならないようにする仕組み。 スコープ問題 JavaScriptではスコープ（変数の有効範囲）は関数単位（function(){～}）になるのが基本。 そして一番外側、どの関数の中でもないものは「グローバルスコープ」に所属する「グローバル変数」となり、どこからでも利用できる変数になる。そうなるとどこかで変数の名前がかぶった際、勝手に値が変... 続きを読む

TypeScriptで書くAngularJS @ GDG神戸2014.8.23

2014/08/24 106 users AngularJS TypeScript

TypeScriptで書くAngularJS @ GDG神戸2014.8.23 Presentation Transcript Database RESTfulAPI Controller HTML JSON http://www.typescriptlang.org/ Class.prototype.method = function(){…
 class Greeter { private g... 続きを読む

アロー関数が実装された - JS.next

2014/07/23 373 users JS.next 無名関数 実装 アロー関数 ES6

2014-07-23 アロー関数が実装された ★★★ ES6 新仕様実装 V8 概要 ES6を象徴する機能である、アロー関数構文の実装がついにV8で始まった。 無名関数を短く書ける　　　[3.28.31] アロー関数は無名関数の省略記法である。 今までこう書いていたのが、 var fn = function (a, b) { } こうスッキリ書ける。 var fn = (a, b) => { } ... 続きを読む

Node.jsの人はちゃんとsleepしてください - Qiita

2014/05/28 112 users Qiita sleep node.js github.com

Node.jsでがんばりすぎると別のプロセスに迷惑だから長いことかかる処理は sleep() みたいなのを挟みながらやりたいなー。 と思ってググった結果がこうですよ。 https://github.com/ErikDubbelboer/node-sleep binding = { sleep: function(s) { var e = new Date().getTime() + (s * 10... 続きを読む

OECD調べの「日本人の労働労働生産性は低い」についてちょっと調べてみた | Hacks for Creative Life!

2014/05/22 214 users Hacks for Creative Life var

!function(d,i){if(!d.getElementById(i)){var j=d.createElement(物事というのは都合の良いように解釈される物だし、データの一部を切り取って「ドヤ！」と持論の裏付けだとアピールしたすること自体は一種のプレゼンテーションだから悪いとは思わない。 その中でもよく恣意的に使われるデータの一つが『OECD2013年調査では「日本人の労働労働生産性は加... 続きを読む

Vimでとても簡単かつ直感的にCSVを編集する方法 - Qiita

2014/05/21 230 users Qiita vim CSV vimrc GridView

Vimでとても簡単かつ直感的にCSVを編集する方法は以下の通り。 1. 以下のVimプラグインをインストールする。 https://github.com/rbtnn/rabbit-ui.vim 2. .vimrcに以下のコードを貼付ける。 function! s:edit_csv(path) call writefile(map(rabbit_ui#gridview(map(readfile(a:... 続きを読む

ボーイフレンドを直す方法　あるいは賢いjQuery.Deferredの使い方 - mizchi's blog

2013/12/17 200 users ボーイフレンド src 帯域 mizchi's blog 回線

2013-12-17 ボーイフレンドを直す方法　あるいは賢いjQuery.Deferredの使い方 問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferr... 続きを読む

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由: 小粋空間

2013/06/11 270 users 小粋空間 ソーシャルボタン Twitter share 理由

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="t... 続きを読む

Feedly／Pocket／Evernoteを用いたRSSの運用フロー（後編）ー RSSからのインプット情報をシェア・アーカイブする | Hacks for Creative Life!

2013/05/02 119 users Evernote Googl Feedly var 後継

!function(d,i){if(!d.getElementById(i)){var j=d.createElement(先日書いた「Feedly／Pocket／Evernoteを用いたRSSの運用フロー（前編）ー GoogleReaderの後継はFeedlyに決めた！ 」の後編です。まだお読みで無い方はこちらを先に読んで頂いた方がより分かりやすいかと思います。 前編ではFeedlyをGoogl... 続きを読む

JavaScriptの似非オーバーロードが気に入らない - yaakaito.org

2013/04/11 162 users yaakaito.org JavaScript きょ コード

こんにちは！うきょーです。 なんかJavaScriptで似非オーバーロードとか省略可能引数使う人結構いますよね。かっこいいですか、そうですか。 僕これ嫌いなんで、書いておこうと思います。 実際によくあるコード こういうコードがよくありますかね、BackboneとかでもEvents.offとかがこうなってます。 1 2 3 4 5 6 7 8 function(a) { if (a) { // aを... 続きを読む

nextTick、setTimeout(fn, 0)の代わり - 素人がプログラミングを勉強していたブログ

2013/04/05 132 users setTimeout 関数 プログラミング else if

2013-04-05 nextTick、setTimeout(fn, 0)の代わり setTimeout(fn, 0)より高速な関数は最近はこんな感じのを使うといいと思う。 var nextTick; if (typeof setImmediate === 'function') { nextTick = setImmediate; } else if (typeof process === 'o... 続きを読む

プライベートメソッドのユニットテストは書かないもの？ - QA@IT

2013/03/13 559 users プライベートメソッド クロージャ foo ユニットテスト 関数

JavaScript を書いています（ブラウザがターゲットです）。手動テストが面倒になって、 Jasmine を使ってテストを書きはじめています。 オブジェクトに含まれる関数（プロパティ）の数が増えてきたので、外から呼ばれることがないものはプライベートメソッドのように扱おうと、クロージャを使って、以下のように書きました。 var Foo = function(foo) { this.foo = f... 続きを読む

jQuery の .on() と .off() を理解する - tacamy memo

2013/03/03 568 users jQuery foo OFF click 記述方法

2013-03-03 jQuery の .on() と .off() を理解する 初心者向けの本とかだと、イベントは jQuery オブジェクトの後に直接指定する、 $('.foo').click(function(){...}); のような記述方法で説明されている場合が多いですが、少し複雑なことをしようとすると、それだと困ることが出てきます。そんなときに便利なのが .on() を使ったイベント設... 続きを読む

ちょっと高度にJavaScript／クロージャでイベントハンドラを作る ｜ クラスメソッド開発ブログ

2012/10/18 113 users クロージャ イベントハンドラ jQuery Label 変数

前回の解説では、クロージャの「変数が保持される」「変数が隠蔽される」という特徴を使って、アクセサメソッドを作りました。 今回は、「呼ぶたびにクロージャが生まれる」特徴を使ってみます。 繰り返し処理内でイベントハンドラを作る まずは、何の工夫もなくやってみます。今回はjQueryも使います。 $(function() { var data = [ {label:'リンク１', value:1}, {... 続きを読む

ちょっと高度にJavaScript／クロージャの基礎 ｜ クラスメソッド開発ブログ

2012/10/04 291 users クロージャ スコープ 変数 別物 関数

JavaScriptのクロージャを一言で言うと、「自身が定義されたスコープで変数を解決する関数」となります。 少し複雑ですが、マスターすれば何かと便利な概念なので、解説したいと思います。 ちなみに、JavaScript未経験なFlex開発者にオススメしたいClosure ToolsのClosure Toolsとは別物です。まぎらわしくてすみません。 例 var f = function() { v... 続きを読む

JavaScriptでdocument.cookieへのアクセスを禁止する - 金利0無利息キャッシング – キャッシングできます - subtech

2012/07/09 246 users subtech document cookie false

JavaScriptからdocument.cookieへのアクセスを禁止するという手法が知られていて Object.defineProperty(document, 'cookie', { get: function(){return false}, set: function(){return false}, configurable:false }); XSS界で有名なMarioさんのスライド... 続きを読む

JSX の進化速度が半端ない - 予定は未定Blog版

2012/06/11 123 users jsx String int カンマ区切り エントリ

気に入らない所を直して pull request 投げたら、取り入れられたので、8 日前に書いたエントリが過去のものとなっちゃいました。関数型以前の JSX では、関数型は function(: int): string のように書く必要がありました。これはこれでそのまま使えるのですが、新たに (int) -> string という形式にも対応しました。ちなみに、複数引数はカンマ区切りで (int... 続きを読む