文字をなめらかにした - hitode909の日記RetinaディスプレイのMacBook Proほしいけどお金がなさすぎて買えないからこのブログをRetinaディスプレイ化することにして，ブログ全体を小刻みに横に揺らして，文字の残像が見えるから解像度が高く見えるということにした．文字がなめらかになったと思う． はてなブログを小刻みに揺らす.js — Gist 追記 iPhoneとかで見るとたぶん揺れてないと思う．下にPC版っていうリンクがあるからそこから見れると思う． 追記 そろそろいいかと思って，この記事だけなめらかにすることにした．
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
モトローラ社製。HTML5を使ったWebアプリケーションを作るなら·Montage MOONGIFT
Montageはモトローラ社製のHTML5 Webアプリケーションフレームワークです。 Webサイトに比べるとWebアプリケーションで求められる素養は多少異なります。アプリケーションゆえに予め決められたコンポーネントを組み合わせて作る方が一般的です。そこで紹介したいのはMontage、モトローラ社製のHTML5 Webアプリケーションフレームワークです。 デモのKitchen Sinkです。 ボタンです。デザインはすっきりとして見やすいです。 こちらは時刻を表示するデモ。 クリックで削除するタグのデモ。 Todoアプリのデモ。 Fiddleを使って試す事もできます。 画像からカラーピッカーするデモ。 計算機のデモ。 Montageには多数のコンポーネントが用意され、それらを埋め込む形で配置してけば画面が出来上がります。カレンダーやレンジ入力、トグルボタンなど様々な入力コンポーネントが用意さ
画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Media Queriesの場合、不要なCSSもロードしますが、sizeit.jsはブレークポイントに応じたCSSファイルのみを読み込むのでうまく使えば軽量化が可能です。 さて、サンプルですが、JQMを利用し、ブレークポイントを以下のように設定しました。 幅が600px以下ならJQ
bl6.jp
買いもの 2025.10.3 アニバーサリーブレンド 気づけばもう10月に突入してしまった。でもあいかわらず昨日は暑くて散歩中は半そでになる場面もあり「いったいこの夏はいつ終わるんだ」とひとり嘆き悲しんだ。樹木の上では小鳥たちがチュンチュンと鳴き、ときおり遠くの電柱に止まっているカラスの声が虚空に響きわたる。いつもどおり暑くて平板な夏の朝。いや、暦上はもう秋か。そのような秋らしからぬ気候ではあるけれど、こと食に関してはだいぶ秋を満… 買いもの 2025.09.29 MOLDEXのカモフラ耳栓。ノイキャンヘッドホンと組み合わせて騒音対策する 誰しも一度は騒音に悩まされることがあると思うけど、ご多分にもれず僕もここ1カ月そのようなストレスにさらされ続けてきた。さすがに何時間もだとか睡眠中だとかそこまで…
スペースを有効に、jQueryでスクロールすれば現れるコンテンツ
このブログのように2カラムのレイアウトでメインコンテンツが長いと、スクロールしたときにサイドのスペースがなくなってしまいもったいないですよね。 サイドのコンテンツが終わった時点で固定されたコンテンツが現れたら無駄なくスペースを使えるのではないでしょうか。 ということで、サイドのコンテンツが終わったら固定されたコンテンツが現れるようにする方法を紹介します。 説明が下手で、イメージしにくい方もおられると思いますので、サンプルを用意しました。 イメージできましたでしょうか？ HTML 現れるボックスに何を表示するかによって中身も違ってくるので、とりあえず外枠だけ載せておきます。 <div id="fixed-box"> この中に表示したいコンテンツの内容を記述します。 </div> 挿入場所はサイドのコンテンツと同じ場所にします。 私は、はてブやツイートのボタン、ページ上部までスクロールするボタ
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
[JS]スマートフォンのタッチイベントを取得する各スクリプトのまとめ（仕様比較）
タッチイベントを取得する各スクリプトの対応イベント、スタンドアローンなのかjQueryが必要なのか、ファイルの容量など、仕様の比較をまじえて紹介します。 QUOjs イベント タッチ、タップ、ダブルタップ、ホールド、フィンガー、スワイプ、スワイプアップ、スワイプライト、スワイプダウン、スワイプレフト、ドラッグ 補足 jQueryとのコンフリクトを避けるため、「$$」を使用。 対応予定（2フィンガータップ、ロウテイト、ピンチアウト、ピンチ） 仕様 スタンドアローン ファイルサイズ Minified: 13KB Hammer.js イベント タップ、ダブルタップ、ホールド、ドラッグ、ピンチ 補足 タッチジェスチャだけにフォーカスしたスクリプト。 仕様 スタンドアローン jQueryのプラグインも有り ファイルサイズ Minified: 2KB [ad#ad-2] jGestures イベント
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」:phpspot開発日誌
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
Swiffy | Google Developers
As part of our transition of display ads to HTML5, the Swiffy Flash conversion tool is no longer available. We will continue to serve the Swiffy runtimes, so any files you have already converted will continue to play. Today more consumers are using the web in HTML5 compatible environments than Flash-compatible environments. In order to reach as large an audience as possible, we encourage everyone
HTML5のcanvasをもっと簡単に操作できる「KineticJS」:phpspot開発日誌
KineticJS - HTML5 Canvas JavaScript Library Framework HTML5のcanvasをもっと簡単に操作できる「KineticJS」 サンプルコード付きでサンプルが紹介されており、インタラクティブなコンテンツをHTML5で作る際に便利に使えそうです マウス位置に応じてフロアが強調表示されるようなデモ その他いろいろなデモがソースコード付きで公開されています。 その他ゲーム等も公開されています。 今後もこうしたライブラリが出てきそうですね 関連エントリ フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」
pico-player.js / pico-player.coffee
JavaScriptで音を出すための簡単なライブラリです。 Chrome, Firefox, Operaで使えます。 コード https://gist.github.com/1342081 ブログ記事 JavaScriptでリアルタイムに音を出すときに簡単便利なやつつくった - つまみ食う Usage var player = pico.gerplayer(options); /* options = { samplerate: 44100, channel: 1, }; */ player.play(generator); player.stop(); Generator ジェネレータは実際に音のシグナルを出力するためのオブジェクト player.play(generator) を実行すると、generator.next が定期的に呼ばれる generator.next は play
正しいJavaScriptの変数名の話をしよう
「var π = Math.PI; が文法的に正しいJavaScriptだと知っていますか？」という書き出しで始まるJavaScriptの変数名についてのエントリが話題になっていました。エントリーを書いたのはベルギーのフリーランスWEB開発者のMathias Bynensさんです。彼はUnicodeのどんなグリフが識別子として利用できるのかECMAScriptの仕様を見てみることにしたそうです。 ECMAScript 5.1によれば: 識別子は予約語ではない識別できる名前 となっており、直接記号やグリフについての制約には言及していません。元記事ではさらに予約語や識別子に使用できる文字の例外などについて解説した後に、下記のようなコードが有効なJavaScriptの変数名であるとして紹介しています。 // How convenient! var π = Math.PI; // Sometime
プログラマー初心者の学習イベント「ドットインストールリアル」記念すべき第1回行ってきた - カイ士伝
初心者のためのプログラム学習サービス「ドットインストール」の記念すべき第1回イベント「ドットインストールリアル#0000」参加してきました。というか直前まで必死にドットインストールしてたのもこのためだったりするのですが。 【勉強会イベント】 ドットインストールリアル#0000へのお誘い（＆おまけ） #dotinstall | IDEA*IDEA http://www.ideaxidea.com/archives/2012/02/dotinstall_real_000.html 実はこの日、おいしいビールを飲んだくれる「ビアフルナイト」というイベントも開催されており、先にそっち申し込んで当選までしていたのですが、「これからの未来にプログラミングきちんと習得しとかねば……」と断腸の思いでキャンセル。基本的に先に入れたアポを優先するタイプなのですが、プログラミング覚えたい覚えたいと言いつつ中々前
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodePen - Front End Developer Playground & Code Editor in the Browser
JS Bin
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
502 Bad Gateway nginx openresty 133.242.243.6