ファイルサイズを考慮した Canvas の保存 : document
12月18 ファイルサイズを考慮した Canvas の保存 こんにちは、18 日以降の Graphical Web Advent Calendar が空いているので、場をつなぐ意味も込めて簡単な記事を投稿させていただきます。 先日の記事では PNG の仕様について書きましたが、その知識をさっそく生かす事ができます。 また、この記事では HTMLCanvasElement を省略して Canvas と表記させていただきます。 Canvas#toDataURL() さて、一般的に Canvas の描画状況を保存しようと思うと、Canvas#toDataURL メソッドを使用すると思います。 ですが、このメソッドで保存された画像がどのようになっているかご存知の方はあまりいないと思います。 まずは、以下のコードで簡単な Canvas 描画を行ってみます。 function draw1(target
テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」:phpspot開発日誌
jQRangeSlider: jQuery plugin for range sliders 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」。 範囲をドラッグ＆ドロップで狭めたり、範囲の幅はそのままにドラッグ＆ドロップで移動して値を調整できるUIが作れます 日付の範囲や、20〜50といった数値の範囲を入力してもらうよりも持って手軽に入れてもらえるUIを提供できますね。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグイン「alertifyjs」 アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 リアルなWindows風ツ
並んだ要素の高さを揃えるCSS。というか、table。（CSS おれおれ Advent Calendar 2012 – 17日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 17日目 例えば商品一覧。float:leftを駆使したりdisplay:inline-blockしたりと苦労が多いですが、表tableを使えたら楽チンですね。 使えたら楽だなーでもHTMLの意味を考えるとアレだよなーってな場合、HTMLのマークアップは適宜行いつつ、CSSでそれを表として扱わせる、という事ができます。 利用可能な環境 モダンブラウザーでは大丈夫。IEは8からサポートしています。 CSS的には2.1からあります。CSS 3でも記載はありますが、現時点では詳細はまだない (forthcoming) ようです。 HTMLのtable HTMLで表tableを書くとこんな感じですね。
iPhoneでlabel要素を動作させる方法
iPhoneでlabel要素を動作させる方法 iPhoneではlabl要素を設定しても、labelがクリックされた際に対応するチェックボックやラジオボタンが選択状態になりません。 <input type="radio" name="radio" id="radio1"><label for="radio1">ラジオ1</lable> <input type="radio" name="radio" id="radio2"><label for="radio2">ラジオ2</lable> <input type="radio" name="radio" id="radio3"><label for="radio3">ラジオ3</lable> <input type="radio" name="radio" id="radio4"><label for="radio4">ラジオ4</lable
Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネント
HTML5 開発者向け！「ブラウザ仕様確認ツール」をリリースしました。 - NTTドコモ開発者情報Blog
本日2回目のブログ更新となります！ 本日1回目のブログでもお伝えしていていましたが いよいよ開発者の皆様に向けた新規企画の発表です！ （タイトルでバレバレですが^^;） 本日、HTML5 開発者に向けた （スマートフォン）搭載ブラウザの仕様を確認するツール ※PCブラウザでも確認できます。 ブラウザ仕様確認ツールをリリースしました！！ URLはこちらです！↓ http://spec.nttdocomo.co.jp/spbss/ 上記のURLにブラウザでアクセスすると W3Cのカテゴリに基づいたHTML5の仕様を 搭載ブラウザで利用できるか判定をして OK or NGで結果を返します！ TOP画面はこんな感じで UAの情報を確認できるようにしています！ 今回は、判定項目数を約2600個用意しました！ あれこれ精査していくうちに開発者の皆様により多くの項目を見
Chrome DevTools.next
1. Chrome DevTools.next 2012/12/21 Cyber Agent Toru Yoshikawa ( @yoshikawa_̲t ) 2. Who? 吉川 徹 / Toru Yoshikawa @yoshikawa_̲t C.A.Mobile Web先端技術フェロー Google API Expert ( Chrome ) コミュニティ活動 html5j.org/HTML5とか勉強会スタッフ ⽇日本jQuery Mobileユーザー会 管理理⼈人 Sublime Text 2 Japan Users Group 管理理⼈人 allWebクリエイター塾/jQuery Mobile担当講師 Blog: http://d.hatena.ne.jp/pikotea/ 3. 著書 「HTML5ガイドブック 増補改訂版」（
Git ブランチから自動的に Jenkins ジョブを作る - kotas.tech
Jenkins の Git プラグインは標準で複数ブランチのビルドに対応してるんですが、1つのジョブで全部のブランチをビルドするので [成功 (master)] → [失敗 (branchA)] → [成功 (master)] → [失敗 (branchA)]みたいな感じでブランチごとの成功/失敗がわかりづらく、IRC に通知出してると FAILED! → Yippie! → FAILED! → Yippie! …とうるさい感じで残念です。 というわけで軽くググったところ、引っかかった↓を導入します。 Jenkins "Build Per Branch" by entagen インストール まずはドキュメントに書かれている通り、Jenkins にプラグインをいくつかインストール。 Git Plugin - Jenkins - Jenkins Wiki Gradle Plugin - Jen
Jenkinsで外部パラメータで与えたブランチを対象にビルドできるようにしておくと凄惨性あがって墓ドル - ( ꒪⌓꒪) ゆるよろ日記
テストが終わるまでの時間で書いてみる。 Jenkinsでジョブを実行させるときに、外部パラメータで任意のブランチを対象にビルドできると墓ドル。 例えば、自分のローカルブランチをマージするまえに、テストが通るか確認したい場合とか。 そんなのローカルでテストすりゃーいいじゃんって言われるかもしれないが、 テスト全部通すのに時間が掛かるようになってると、とりあえずCIに実行を投げておいてあとで確認するほうがずっと効率がいい。 F.Y.I: Building github branches with Jenkins ジョブの設定 「ビルドのパラメータ化」にチェックをつけて、以下のようにbranchって名前のパラメータを設定しておく。 「ソースコード管理システム」で「Branches to build」のところに、設定したパラメータである"$branch"を入れておく。 ジョブの設定は以上。上記の方
Sassでlinear-gradient()のmixinをつくる その2 - fragmentary
誰がうれしいのかわからない、CSS Preprocessor Advent Calendar 2012の記事の第2弾です。 今回は -webkit-gradient() への変換について書こうと思ったのですが、ひとつ忘れてたことがあったので、それについて書きます。 Part 4 ― type_of() で処理を振り分け 前回は「方向なし」「キーワード」「角度」別に3つのmixinを定義しました。分けるとそれぞれ何をやってるかがわかりやすいのですが、やはり使うことを考えると一つにまとめたいもの。そこで、ひとつのmixin内で処理を振り分けることにします。 やり方ですが、Sassの type_of() 関数を使います。mixinの引数を第一引数と可変長引数のふたつにわけ、第一引数の型を判定します。 @mixin lg-compound($first, $rest...) { $prefixes
compassのベンダープリフィックス制御 « NAVER Engineers' Blog
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリ
Responsive Column Layouts - Web Designer Wall
Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I’m going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at Themify. It doesn’t require any first or last class and the number of columns can be adjusted base o
使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」:phpspot開発日誌
使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 2012年12月20日- Useless CSS3 Generator 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 Uselessということで使えない、ということらしいんですが、実際はなかなか使えそうなジェネレーター。 border-radius, box-shadow, text-shadow, opacity, rgba, transform 等のCSSプロパティをパラメータをいじることでカスタマイズし、その場でコードをコピペしてすぐに使えるというもの。 よくあるジェネ−レータなわけですが、パララックスなUIになっていたり、パラメータ調節後、アニメーションする所がユニークです。 １個でかなりの種類のCSS3エフェクトをジェネレートできるのでお手軽で便利かも。
【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 - 納豆には卵を入れる派です。
どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法
CSS3 Checkbox Styles
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
意外に知らないお金借りるならとお金借りる審査通らない理由の秘密を、１つだけ教えます。
わかった！お金借りるならでお金借りる審査通らない理由… わけもなく嫌な気持ちになってしまう人が存在します。 出来が寄ってきたらムカムカして、お金借りる審査通らない理由なので、マトモに対応すらできず、お金借りる審査通らない理由に冷たい対応をしてしまいます。お金借りるならに冷静になり、悔やむものの、以降だったら、嫌だということで頭がいっぱいになってしまいます。 少額融資の多様さからいえば、好きになれない人がいるのも当たり前なのでしょう。 お金借りるならを好きになるのは無理難題といっても過言ではなく、急変をなくしてしまえないので、困っています。 お金借りる審査通らない理由に考えるのであれば、客観的にはそんなに悪い人でもありませんから、お金借りる審査通らない理由に限り、私はおかしいと思います。たまたまテレビ中継などを目にすると、入出金可能への参加を目指す人があまりにも多くてちょっと呆れてしまいそう
Android Tips #27 PhotoSphere Viewer を作ってみる | DevelopersIO
あとは onStart() のタイミングで PanoramaClient#connect() で GooglePlayServices に接続、 ConnectionCallbacks#onConnected() のときに PanoramaClient#loadPanoramaInfo() を呼びます。loadPanoramaInfo() に渡す第一引数は OnPanoramaInfoLoadedListener で、画像の読み込みが完了したときに呼ばれるコールバックです。渡される ConnectionResult の isSuccess() で成功したか失敗したか判別できます。成功した場合は、渡される Intent を使って startActivity() します。また第二引数には Uri を渡します。ここではリソース内の raw フォルダ内の画像を参照しています。JPEG画像が読み込め
Android Tips #28 Android 1.6 から Fragment を使う | DevelopersIO
はじめに Fragment は Android 3.0 (APIレベル11) から導入されたコンポーネントです。Fragment は Support Package でサポートされているので Android 1.6 (APIレベル4) から使用することができます。ということで今回は Android 1.6 〜 2.3 くらいまでをターゲットに開発してきた方々を対象に、 Fragment についての概要、そして Support Package を使って Fragment を使うにはどうすればよいか解説したいと思います！ Fragment とは？ Activity を機能・振る舞いごとに分割できる！ Fragment は Activity を 機能・振る舞いごとに分割するための UI モジュールです。Fragment を用いることで Activity の UI を簡単に分割して構成することがで
Webカメラから超絶カッコいいプロフィール写真を撮れるWebサービス作った - 海峡
Webカメラでめっちゃカッコいいプロフィール画像を簡単に撮れて便利.JS インターネットの皆さん、こんばんは。国民的スポーツの一つであるアニメGIFに関する記事です。 今回、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発したのでご紹介させて頂きます。 SNSや履歴書などに貼るプロフィール写真を撮ったら思ったよりもカッコよくなくてつらい気分になったことはありませんか？ 「動いてるときはもっとカッコよく見えてるはずなのに……」静止画になると急に生命力が失われた感じに見えてしまいます。とてもつらい思いになりますね。 そこで、簡単にもっとかっこいいプロフィール写真を撮りたいと思い、Webカメラから超絶クールなプロフィール画像を撮れるWebサービスを開発しました。 言い換えれば、Webカメラから撮った映像からアニメGIFを作れるWebサービスです。 サービス名は「Webカメ
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
jqueryrotate – 画像を回転させられるjQueryプラグイン – creamu
jqueryrotateは、画像を回転させられるjQueryプラグインです。 ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。 jqueryrotate
File API で作成した blob をダウンロードする
この記事は “HTML5 Advent Calendar 2012” の16日目の記事です。他の記事もぜひご覧ください。 HTML5 では BlobBuilder オブジェクトを作成して、ファイルをメモリ上に読み込んだり、あるいはユーザーの入力やサーバーから取得したデータを元にしてメモリ上にファイルの内容を作成することが可能です。また作成した Blob は XML HTTP Request (XHR) の FormData としてサーバーにアップロードすることも可能です。 ではメモリ上の Blob をローカルに保存したい場合、どうすればよいでしょうか。Web ページのスクリプトから直接ローカルのファイル システムを操作する File System API (File API: Directories and System と File API: Writer) の標準化について議論が進めら
Geb で JavaScript のテストをしてみた #gadvent2012 | Java開発のんびり日記
こんにちは、@hideoku です。G* Advent Calendar 2012 の18日目を担当します。 よろしくお願いします。 きのう17日目は @nagai_masato さんの「Multiple Dispatch in Modern JVM Languages」でした。 あす19日目は @nightmare_tim さんです。お楽しみに。 前置き Groovy を知ったのが、今年の5月でまだ半年くらいしか Groovy 歴がないヒヨッ子です。 Groovy → Spock → Gradle → Geb → Grails という感じで勉強しています。 「G* Advent Calendar 2012」の執筆者さん達は普段ブログなどを参考にさせてもらっている方々ばかりなので、若干ビビっていますがよろしくお願いします。 今回はブラウザテストのフレームワークである、Geb を取り
jQueryオブジェクトとは?
jQueryオブジェクトとは? このエントリーは軽めのjQuery Advent Calendar 2012の20日目のエントリーです。 よくjQueryの解説などを見ていると「jQueryオブジェクト」という単語が出てきますね。今回はjQueryオブジェクトとは何者かを解説をします。読み終える頃には少しだけJavaScriptに詳しくなれるよ。（若干長いです。） そもそもオブジェクトとは? さて、「jQueryオブジェクト」を解説する前にJavaScriptのオブジェクトについて解説します。JavaScriptのオブジェクトは非常に複雑なのですが、基本だけでもわかるとJavaScriptやjQueryの学習効率が全然かわってきます。 まず、ざっくりと解説するとオブジェクトとは「プロパティ」と「メソッド」を持つ構造体のことです。 プロパティとは? ではプロパティとはなんでしょうか?プロパテ
フッターに記載するコピーライトの年表記を自動更新する方法
今回はとっても小ネタです。 たいがい、どこのサイトでもフッターに入れているコピーライト表記ってありますよね。 形式としては© 開始年-現在年 Name All rights Reserved.というのが多いかなと思います。この現在年を自動で更新する方法を紹介します。 Photo:Large copyright sign made of jigsaw puzzle pieces By Horia Varlan 本来的なコピーライト表記 いろいろなサイトを見ていると、上述した表記例が多く見られますが、実のところコピーライト表記は以下の記述で十分だったりします。 © 開始年 Name 現在年とかAll rights Reserved.とかは、正直必要ない文言なんですね。 それどころか、現在カンボジア以外の国はベルヌ条約を締結して、無方式主義が採用されているので、カンボジアでの著作権保護対策さえ考
面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」:phpspot開発日誌
Textualizer | K. Risk - JavaScript Refined 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストが歯抜けの状態から、アニメーションしながらテキストが埋められたり、既存アルファベットから別の文字列に変化させたりと、面白いテキストアニメーションが実現可能。 実際にデモを見ていただくのが一番分かりやすいです。 スピード等もオプションで指定可能。 $(element).textualizer( param ); で簡単に実現 テキストアニメーションならFlash、というような時代もありましたが、JavaScriptの方がお手軽でいいな、という時代になった気がします。 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 テキストを部分的にカッコよくアニメーショ
Masato Kinugawa Security Blog: エンコーディングの切り替えによるSelf-XSSを考える
Shift_JISにすると、UTF-8でひらがなの「く」を構成する「0xE3818F」の先頭2バイトが、まず「縺(0xE381)」という文字と解釈され、残った「0x8F」が、後続の、二重引用符のエスケープシーケンスである「\(0x5C)」と１つの文字、「十(0x8F5C)」を作ってしまうのです。これにより、エスケープシーケンスがなくなった二重引用符は、そこで文字列リテラルを閉じることになります。こうして、その後ろに書かれたアラートが動いてしまうという訳です。 つまりこれは、攻撃者に誘導され、ユーザー自身が文字エンコーディングを切り替えた場合、本来XSSがないページでもXSSが起こせる場合があるということです。 IE以外のブラウザは、親フレームのエンコーディングを変更した場合、クロスドメインでも子フレームのエンコーディングまで変更するので、こんな誘導の仕方もできます。 http://l0.c
クールなalertダイアログを実現できる「Apprise v2」:phpspot開発日誌
Apprise v2. The, new and improved, attractive alert alternative for jQuery ThrivingKings | web development, code snippets, and general nonsense クールなalertダイアログを実現できる「Apprise v2」。 alertダイアログの代替は数あれど、デザインが洗練されているものは数少ないですね。 そんなデザインの洗練された数少ないalertダイアログ実装jQueryプラグインです。 alert以外にも、prompt 等にも対応。 アニメーションや微妙なグラデーションが、なかなかセンスがいいです。 デモのアニメーション速度が若干遅く感じたものの、カスタマイズは可能。 関連エントリ カスタマイズ可能で動きがよいalertダイアログ実装jQueryプラグ
【jQuery】jQueryでパラパラアニメを実現するプラグイン | バシャログ。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
CSSアニメーションの初歩をおさらい
最近はアニメーションをFlashではなく、CSSやJavaScriptで実装されているサイトをよく見るようになりました。 今回は復習も兼ねて、CSSで動きを付けられるanimationとtransitionのおさらいをしてみたいと思います。 ベンダープレフィックスをつけないと動かないブラウザもありますが、省略します。 animationとtransitionの違い どう違うのかなと思って調べたのですが、いまいちわからなかったので、違いを並べてみました。 animation ループ可能 keyframesで細かい設定が可能 ウインドウ読み込んで即実行が可能 transition ループがない 自然に最初の状態に戻る hoverなどのキッカケを与えてあげないと動かない JS使えば違うかもしれないですが、一応こんな印象です。違ったらすみません。 それぞれを翻訳すると、animationはそのまま
日常生活でよく耳にする『音』をMP3で無料ダウンロードできるサイト「Sound Gator」 : 二十歳街道まっしぐら
Sound Gatorはさまざまな音を無料でダウンロードできるサイトです。 たとえば、レストランのがやがやした音や、小銭をジャラジャラしたときの音、金属音などたくさん揃っています。 さらにそれらをMP3形式でダウンロードすることができますよ。 普段何気なく聴いている音をMP3でほしいときに便利です。 以下に使ってみた様子を載せておきます。 まず「Sound Gator」にアクセスしましょう。 登録は必要ではありませんが、登録しないとMP3ダウンロードはできません。 カテゴリごとにわかれているので、探すのも便利です。 その場で音を試聴できますよ。 埋め込み用のコードもあります。 ログインすればMP3形式でダウンロードできますよ。 普段よく耳にするありきたりな音ですが、 いざ音声ファイルでほしいと思ったときは探すのに苦労しそうですね。 このサイトを覚えておくと便利かと思います。
Facebookアプリを、HTML5でどうしてサクサクにできたのか。Sencha Touch開発チームが用いた3つのテクニック
Sencha Touchの開発チームがHTML5で高速に動作するFacebookアプリを開発したことを紹介した1つ前の記事 「Facebookのモバイルアプリが失敗した理由はHTML5のせいじゃない。HTML5でサクサク動くFacebookアプリを作って見せたSencha Touch開発チーム」は、非常に多くの読者に注目されました。 この記事で紹介したSencha Touch開発チームのブログ「The Making of Fastbook: An HTML5 Love Story」の後半では、どのようなテクニックを用いて高速なHTML5アプリケーションを実現したのかも紹介されています。 この記事では、その3つのテクニックについてポイントを紹介したいと思います。タイムラインやニュースフィードのようなユーザーインターフェイスを備えたモバイルアプリケーションは、これから広く開発されていくことにな
D3をはじめよう
データ可視化のために作成されたJavaScriptベースのツールキット、「D3.js」の概説書です。D3の基礎となる、データセットの文脈によってコンテンツの要素を取扱う方法を学びます。ニューヨーク都市交通公社（MTA）の公開している実データに基づいて、HTML、Canvas、SVGを使った、豊富でグラフィカルなビジュアライゼーションの方法を知ることができるでしょう。なお本書はEbookのみの販売となります。 まえがき 1章 はじめに D3 基本設定 ニューヨーク都市交通公社のデータセット 2章 Enterセレクション シンプルな地下鉄路線状況表示盤を作成する プラザの1日平均交通量のグラフを作成する 3章 スケールと座標軸と折れ線グラフ バスの故障、衝突や人身事故 回転式ゲートの交通量をグラフ化する 4章 インタラクションとトランザクション 地下鉄の定時運行率の評価UIその1――インタラク
.gitignoreを作ってくれるgiboが便利すぎる - hnwの日記
gitignore-boilerplates（長いので以後giboと呼びます）という便利なツールを紹介します。これは.gitignoreのひな形を作ってくれるものです。 https://github.com/simonwhitaker/gitignore-boilerplates もう少し詳しく説明すると、giboは様々なOS・エディタ・言語・フレームワークなどに特化したファイルの情報を利用して、複数環境を考慮した.gitignoreを作ってくれます。 .gitignoreに入れたいファイルは環境ごとに変わってくるわけですが、各人がcommitしたくないファイルの存在に気づくたびにチマチマ.gitignoreに追記していくのって本当に無駄だと思うんですよね。giboはそれを自動化してくれるというわけです。 例えば、WindowsとMacOSXの2環境、Emacsとvimの2エディタを使う人
スワイプ操作に対応したイメージスライダーを実装するスクリプト・Swiper - かちびと.net
タッチデバイスのスワイプ操作に 対応したイメージスライダーの ご紹介。ありそうであまり見かけ ないので一応備忘録・・・イメー ジスライダーと書きましたが、 基本何でもいけるみたいです。 スワイプ操作に対応したスライダーです。 実機でも確認したところ、問題なく動作しました。動作も軽量でなかなかいい感じです。 スライダーの中にスライダーをネストする事も出来ます。縦やグループごとにスライドさせる、など色々と応用が利きます。 時間が無いので使い方は割愛。元サイトに詳しく書かれているので問題ないかと思います。以下よりどうぞ。 Swiper
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.itのヘッダの一番上をFlexboxで - jsdo.it - Share JavaScript, HTML5 and CSS
display: boxまわりのテスト - jsdo.it - Share JavaScript, HTML5 and CSS
Loading...
SCSS Android ICS color function - jsdo.it - Share JavaScript, HTML5 and CSS
Loading...
世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌
GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar
ogaoga.org
d3.js API Advent Calendar 2012 - Adventar
JavaScript ゲームのための単純な 2D 物理エンジンを作成する
http://atnd.org/events/34644
スタートアップ向け！1人日でできるサービスの高速化方法と成果
IBM Developer