[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
Handlebars.jsを使ったファイル生成Gruntタスク
主にHTMLの生成を行うGruntタスクの話。色々なテンプレート・システムの利用を考えたんだけど、Handlebars.jsにした。よく使うからというのもあるし、いざとなったらデータの再構成を待たずにその場しのぎでテンプレートにロジックを混ぜてお茶を濁せるのが好き。その場しのぎ、お茶を濁す、良い言葉だ。 このGruntタスクは指定されたHandlebars.jsテンプレート(例えばfoo.hbs)をレンダリングするだけのもの。レンダリングに使うデータは、基本のメタデータ(metadata.jsonの内容)とテンプレート・ファイルごとに指定できるメタデータ(foo.jsonの内容)をGruntに含まれるLo-Dashのextend()を使ってマージしたものを使う。Gistのサンプルにあるように基本のメタデータにないものを自由に追加できるし、基本のメタデータを上書きすることも出来る。 コアのg
grunt-pluginの作り方と解剖 - Qiita
先日、はじめてgrunt-pluginを公開してみました。 そこでいくつか、「!?」となる箇所があったので、grunt-pluginをつくるときの注意まとめしてみます。 ある程度gruntを使っていて、Gruntfileもしこしこ書いたことある方向けです。 grunt-pluginとは? そもそもgrunt-pluginとは何なんでしょうか。 最低限必要なのは、 gruntにtaskを追加するスクリプト 、ってとこだと思います。 例えば、こんなものでも、grunt-pluginと言えば言えそう。 var grunt = require('grunt'); grunt.registerTask('sample', 'sample task', function () { console.log('this is sample task!'); }); このgrunt.registerTask
JavaScriptエディタを比較してみた « きんくまデザイン
2012/7/14 追記 ログを見ていると、結構前からこの記事を検索経由で来られる方が多いです。 この記事が書かれたのは今から3年ほど前なので、残念ながら情報が古いです。 なので、2012年7月現在で自分の知ってるものをメモしておきます。 良さそうなのがあったら、それぞれ調べてみてください。 ・WebStorm JavaScriptに特化しているぶん高機能。がっつり開発用。有料。 ・Aptana Studio 高機能。HTML, CSS, JavaScript, PHP, Rubyをサポート。がっつり開発用。無料。 ・Sublime Text 軽い。言語いろいろ対応。有料。 以下mac用 ・Coda デザイナさんに人気。マークアップ寄りな印象。有料。 ・textmate 硬派なプログラマさんに人気。サーバーサイド寄りな印象。 マルチバイト対応のtextmate2もあり。有料。 自分はSub
jQueryでスクロールバーのデザインを変更する | WEBZARU
新着情報一覧などのように全て見せる必要がない(スクロールして閲覧可能)場合に、そのコンテンツだけスクロールさせて見せることがよくあります。 CSSで高さを固定してやることによりそれ以上の高さが必要な場合には、自動的にスクロールバーが表示されるのですが、何よりも見た目がダサいです。そんな時、jScrollPaneを使うとスクロールバーのデザインを変更することができます。 jQueryのプラグインであるjScrollPaneの使い方をご紹介。 jScrollPaneとは スクロールバーのデザインを変更するためのjQueryのプラグインです。本体のJavaScriptとCSSの他にjquery.mousewheel.jsも併用し動作します。 現時点で最新版の「v2.0.0beta11」を例としています。ダウンロードは、本家サイトから行ってください。 jScrollPaneの使い方 <!DOCTY
JavaScript で画像処理！ canvas を使ってみよう - WebOS Goodies
前述のとおり canvas 要素は Web ページ内に空の画像領域を確保します。感覚としては画像ファイルを指定しない img 要素のようなもので、Web ページ上での扱いもほぼ同じです。画像がないので src 属性がなく、代わりに width, height 属性で描画領域のサイズを明示しなければなりません。また、JavaScript で描画対象の canvas を特定するための id 要素を指定するのが普通です。例えば、150x150 ピクセルの描画領域を確保するには、以下のように記述します。 <canvas id="example_canvas" width="150" height="150"></canvas> 閉じタグを忘れると以降の内容が表示されなくなるので注意してください。詳細は後述しますが、canvas 要素内のテキストはブラウザが canvas をサポートしていないときの
JavaScriptで簡単な円グラフを作成するサンプル
<html> <head> <script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript" src="betsuyakuchart.js"></script> <script type="text/javascript"> window.onload = function() { var bChart = new BetsuyakuChart("my-canvas", {"fillStyle": "#ff8800"}); bChart.add("データ1", 120); bChart.add("データ2", 20); bChart.add("データ3", 10); bChart.add("データ4", 50); bChart.stroke(); } </script> </h
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
iPhone OS 3.0 のブラウザから使えるようになったGPS現在位置情報をTwitterに投稿するJavaScript
Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する | クレコ では、Androidのブラウザで現在位置情報取得してTwitterにポストするというJavaScriptを作りました。 今回は、それのiPhone版です。要 iPhone OS 3.0以上なので、まだアップデートされてない方は本日のアップデートを楽しみに待ちましょう。 iPhone OS 3.0 のブラウザ Mobile Safari でGPS現在位置情報が取得できるようになった Mobile Safari の W3C Geolocation API 対応 ついに iPhone Safari ブラウザから位置情報を取得できるようになります – Cirius Lab. ブログ から知ったのですが、iPhone OS 3.0 に標準搭載さ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本全国花粉飛散マップ Pollen Map in Japan - ICS