レスポンシブに画像の表示“場所”を切り替える·Focal Point MOONGIFT
Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。 レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。 デスクトップの場合。 幅を少し小さくした場合。特に変わっていないと思います。 さらに縮めました。一部が切り抜かれたのが分かるでしょうか。 さらに小さく。顔の部分を中心にしています。 こちらもデモ。Aチームです。 幅を狭めると一気に拡大写真のように。 さらに狭めると人がちゃんと収まっている状態まで縮まりました。 こちらは右側のいすに注目。 ほら、なくなったのが分かるでしょうか。 こちらの写真も… 上下が特に大きく変わっています。 こちらの場合はどうでしょう。 右上は固定で左側のコンテンツが大きく削られています。 これは…ミサイル？ 上下左右と
50 Tricks for Faster Web Applications
Sustainable Security Requirements with the ASVS Josh Grossman provides a brief overview of what the ASVS is, but takes a closer look at balancing trade-offs and prioritizing different security requirements. Josh shares how to make the process repeatable and how to implement it as part of your own organization's requirements process.
ブログにどうぞ。WebページにGitHubリポジトリを埋め込む·Repo.js MOONGIFT
Repo.jsはGitHubリポジトリをWebページ内に埋め込めるようにするJavaScriptライブラリです。 GitHubの新しく想像した価値の一つがソースコードは魅力的なコンテンツになるということです。Gistもそうですがソースコードをブログの中に埋め込んでいる人が多数います。そこでさらに一歩勧めてリポジトリ自体を埋め込んでしまえるのがRepo.jsです。 ユーザとリポジトリの名前を指定すると、その下にファイルが一覧されます。 もちろんハイライト付きのソースコードビューワーもあります。階層もたどれます。 長いコンテンツの場合は自動的に縦に伸びます。 Repo.jsはユーザ名とリポジトリ名を指定して取り込みます。つまりオープンなリポジトリであれば誰のものでも埋め込みができます。さらにmasterだけでなくブランチを埋め込むこともできるので、後はその解説をつけてブログの記事に仕上げること
[JS]シンプルなものから高性能なものまで簡単に通知パネルを実装できるスクリプト -Backbone.Notifier
通知パネルをページ上部からアニメーションで表示したり、中央にモーダルダイアログ風に表示したり、は当たり前。 デザインを半透明や3Dにしたり、パネルの連動やユーザーのアクションでイベントの設定もできる高機能な通知パネルを実装するjQueryのプラグインを紹介します。 Backbone.Notifier -GitHub [ad#ad-2] Backbone.Notifierの特徴 Backbone.Notifierのデモ Backbone.Notifierの使い方 Backbone.Notifierの特徴 ページの上部や中央に通知パネルをアニメーションで表示します。 スタイルは通知、エラー、警告、成功など、さまざまなものが揃っています。 スタイルはCSSベースでカスタマイズできます。 通知パネルの表示・非表示のタイミングを調整できます。 通知パネルを連携させることもできます。 Backbone
第2回 完全版：ブラウザとデバッグ環境 | gihyo.jp
こんにちは、太田です。前回はクロスブラウザの入口として、各ブラウザの特徴をまとめつつ、実際にクロスブラウザなコードを紹介しました。今回はクロスブラウザ対策における基本である、各ブラウザ環境の構築について解説したいと思います。 前回紹介した通りブラウザにはたくさんの種類・バージョンがあります。それぞれが動作する環境を用意するだけでも、一苦労ではすみません。なるべく少ないマシンで、各バージョンをインストールして、さらにデバッグするための環境作りについて紹介します。なお、Safari以外はWindows環境を想定しています。さらに、特に断りがない限りはWindows XP SP3をベースに解説させていただきます。ご了承ください。 各ブラウザのデバッグ環境は近年目覚しいほどの進化を遂げています。統合デバッグ環境の草分けであるFirebugを筆頭に、Safari/Chrome（WebKit）のWeb
[JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate
エレメントをウェーブ状のアニメーションでフェードイン・フェードアウトさせるjQueryのプラグインを紹介します。 スクリプトは1.7kで超軽量です。 WaveAnimate jQuery Plugin デモ [ad#ad-2] WaveAnimateのデモ デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。 エレメント（右端の赤）を除外し、アコーディオンのようなアニメーションを適用することもできます。 赤いエレメントを除外したデモ WaveAnimateの実装 デモを例に、実装方法を紹介します。 HTML デモではdiv要素で実装したボックスを配置しているだけです。 <div id="demo1"> <div id="el1a" class="fademe"> </div> <div id="el2a" class="fademe"
画像無しでアーガイルやタータンチェックなどのパターンを生成する -Patternizer
[ad#ad-2] 生成したパターンの利用方法 ページに利用する際は、下記のように記述します。 外部ファイル 「patternizer.js」を外部ファイルとして指定します。 <script type="text/javascript" src="patternizer.js"></script> HTML ページ内に空のcanvas要素を配置します。 <canvas id="bgCanvas"></canvas> <div class="wrapper"> <div class="content-wrapper"> <!-- Content here --> </div> </div> CSS 背景を固定表示にするために「position: fixed;」を指定し、コンテンツは「position: absolute;」と「left: 0px;right: 0px;」を指定します。 #bg
githubのURLをうまく扱うオシャレなアレ = pjax @ val it: α → α = fun
githubでは、たとえばファイルリストからファイルをクリックすると、なめらかに横にスライドしてファイルリストのビューからファイルの中身のビューに遷移するような、今時のwebappとしては当たり前のようなオシャレなことをしているのだが、よく見るとURL自体も書き換わっていて、ファイルリストのURLからファイルを示すURLに変わっている。これはいいな、と思っていたのだが、こういうことをpjaxと言うのだと教えてもらった。 よくあるのはURLのfragment (#のあとの部分)を書き換えておく方法。ここはwindow.location.hashでJavaScriptから参照できるから、ページがロードされたらそこを読み取って描画を変える。難点はJavaScriptが動かないとダメだということで、そういうブラウザやwget/curlのようなツールとの相性が悪い。というよりそれ以上に深刻なのは、ソ
テキストサイトに。JavaScript製のテキスト差分表示·jsdiff MOONGIFT
jsdiffはJavaScript製の文字、単語、行単位の差分チェックツール。 jsdiffはnode.js/JavaScript製のオープンソース・ソフトウェア。Webサイトは様々な種類が存在するが、最も多いのはテキスト系サイトではないかと思う。フォーラム、Wiki、ブログ、Q&Aなどテキストは日々どんどん追加されていく。 比較 そんな中、みんなで一つのコンテンツを作り上げていく中で欲しくなるのがテキストの更新前と後を比較するための差分ツールではないかと思う。Webブラウザ上で手軽に使えるjsdiffを使ってみよう。 jsdiffはテキスト差分表示ライブラリで、複数の差分表示に対応しているのが特徴だ。一つは文字単位の比較で、もう一つが単語単位、そして最後に行単位の比較となっている。通常のDiffと違ってブロック単位で調整が入ることなく、表示されているそのままの行を比較する仕組みになってい
第12回 Echo Web FrameworkのクライアントサイドAPIによるWebアプリケーションの作成 | gihyo.jp
JavaScriptによるWebアプリケーションの作成 前回は、軽量Webアプリケーションフレームワークのひとつである「Echo Web Framework」（以下、Echo）について、サーバサイドのJava用APIを利用してWebアプリケーションを作成する方法を解説しました。EchoのサーバサイドAPIを利用した場合、HTMLを一切記述することなく、JavaプログラムだけでWebサイトのUIが構築できます。 その一方で、EchoにはJavaScriptによるクライアントサイド用のAPIも用意されています。これを利用した場合、今度はサーバ側のプログラムを一切記述することなく、JavaScriptと最小限のHTMLだけでUIが構築できます。サーバサイド／クライアントサイドで、それぞれ個別に、同等のUIを実現するAPIを備えているというのがEchoの特徴なのです。今回はクライアントサイドのJ
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
楽譜をWeb上に表示するJavaScriptライブラリ·Audiofile.cc MOONGIFT
Audiofile.ccはHTMLタグを楽譜化して表示するJavaScriptライブラリ。 Audiofile.ccはHTML5/JavaScript製のオープンソース・ソフトウェア。Webベースのアプリケーションが増えるに従って、表現したい内容も増えている。テキスト、画像、動画、音楽以外にも様々なデータを表示したいと思っているはずだ。 表示例 HTML4以前ではFlashが活躍した。だが時代はHTML5に移り変わろうとしている。今はCanvasタグで様々なコンテンツを表示する。Audiofile.ccはその一つ、楽譜を表示するソフトウェアだ。 楽譜についてはMMLと呼ばれるマークアップ言語があるが、Audiofile.ccではそれは用いていない。あくまでも独自の記法に則って記述する必要がある。具体的にはdivタグに対してdata-note/data-pitch/data-octaveとい
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
「Web AI」ライブラリの使い方と内部仕様 － Web上のデータからJavaScriptだけで人工無脳を作成
はじめに いつもは「創活ノート」でマンガを描いている柳井です。その裏ではゴリゴリとコードを書いています。そんな私のマイブームはJavaScript。今年は「マンガで分かるJavaScript プログラミング講座」を描いてネット上で公開したこともあり、JavaScriptづいています。 こういったマイブームの流れに乗り、少し前にJavaScriptの新しいライブラリ「Web AI」を開発してリリースしました。Web上の情報を利用して、JavaScriptで人工無脳的なプログラムを書くためのライブラリです。データベースを持つことなく、ユーザーの入力に対してネット上の情報を収集して、インテリジェンスな振る舞いをするための各種命令が収録されています。 以下のサイトで、「Web AI」ライブラリのダウンロードや、サンプルの確認、リファレンスや全ソースコードの閲覧が行えます。 「Web AI」ダウンロ
WebSocketで目指せ“リアルタイムWeb”！第1回 node.jsの衝撃とWebSocketが拓く未来 - ＠IT
ご挨拶 こんにちは、ロンドンのNew Bambooという会社でWebエンジニアとして働いている@makoto_inoueです。ここのところ、PusherというWebSocketのクラウドサービスの開発に関わっています。今回から3回に渡ってWebSocketに関する短期連載を担当させていただきます。 私を含めたNew Bambooの面々（我々は自分たちのことをBambinoと呼んでいます）がWebSocketになぜ興味を持ったかということからはじまり、実際にクラウドサービスを始めるまでにいたったストーリーをお話ししたいと思います。そのストーリーを通じて、WebSocketが切り開く「リアルタイムWeb」な世界への可能性や技術的課題を皆さんと共有できればと思っています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
