読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

ESLintを設定する

概要 以前はJSLint, JSHintなどが使われていましたが、最近はplugableなESLintがコードの検証に使われる様になってきました。 今回はその設定方法を簡単に説明します。 環境 Node.js 6.6.0 ESLint 3.5.0 インストールと設定 npmでインストールします。 $ npm…

RequireJS(その2)

RequireJS(その1)で使い方を学びましたが、これだとjQuery, UnserscoreJSは使えません。 「jQueryやUnderscoreJSだけ使えないってどういうこと!?」とずっと悩んでいたのですが、実はconfigで設定しないとこの2つは使えないタイプなのです。 まずは使い…

RequireJS(その1)

RequireJSはjsファイル同士の依存関係を崩さないよう非同期で読み込みつつ、多重読み込みなども防止してくれるライブラリです。 あと何より嬉しいのが「依存関係を明示出来る点」です。普通のHTMLだと、どのモジュール(.js)がどれに依存してるか不明なので…

Backbone.js で MVC

Backbone.jsを用いてクライアントサイドMVCを実現する簡単なサンプルを紹介します。 JavaScript徹底攻略 (WEB+DB PRESS plus)(2013/01/26)沖林 正紀、吾郷 協 他商品詳細を見る という書籍を参考にしています。前半は説明、後半はサンプルソースを用いて確認…

JavaScript の this

JavaScriptのthisは軽く見てるとあとで非常に困るのでちゃんと勉強してみました。 とりあえず4通りあります。 ①コンストラクタ内のthis ②メソッドで使うthis ③関数呼び出しで使うthis ④apply、callのthis この内②、③が非常にこんがらがります。逆にこれさえ…

ブロックレベル要素にリンクをつける

HTML5からはdiv要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいようになりました。 それによって、より使いやすいWebページが作成できるようになります。 イメージとしてはこんなサイトです。ここは今回使用するJavaScriptで実装をしていま…

JavaScriptで擬似ローディング

jQueryをいれて動的なWebコンテンツにしたはいいけど、データ増えてローディング処理の見た目が悪い。 そう思い何かいいローディング方法がないかと探したらありました。 Flashのローディングみたいな動作をJavaScriptで実装します。 図のように、ページ読み…

画像を3D回転で表示させる

画像を3D回転させられるjQueryプラグイン「Professor Cloud」の使用方法です。 まずは公式ページで体験してみてください。 Cloud Carousel - Professor Cloud

画像の拡大縮小ボタン

PHPの方は表示する際にリサイズして~という流れでした。 JavaScriptはブラウザ側の操作を受け付けてくれるので、ユーザが自分で拡大、縮小したいボタンも用意できます。 何度も繰り返すと計算の過程でアスペクト比が狂うこともありますが、そこまで繰り返し…

キーボード入力によってイベントを起こさせる方法

簡単に実装できるJavaScriptが既にあるので、そちらを元に書いていきます。 このサイトです。ページの最後の方にshortcut.jsがあります。 http://www.openjs.com/scripts/events/keyboard_shortcuts/ ダウンロードしたらindexページのどこかに置きます。ここ…