グーグルは、JavaScriptでMVCアーキテクチャのアプリケーション開発をする際に便利な機能を備えたライブラリ「AngularJS 1.0」のリリースをブログで発表しました。 MVCアーキテクチャとは、ソフトウェアがデータモデル(Model)の部分とユーザーインターフェイスの部分(View)、そしてビューとモデルのあいだで制御する部分(Controller)に分離された構造のことを指します。 これらが分離されているとプログラムの見通しがよくなり変更にも対応しやすく、テストも容易になるため、何種類ものユーザーインターフェイスと複雑なロジックなどから構成される大規模なアプリケーションではMVCアーキテクチャの採用が望ましいものと考えられています。 しかしWebアプリケーションをMVCアーキテクチャで実現しようとすると、ビューの役割を果たすHTMLのコードの中に、どうしても複雑なJavaSc
とりあえず疲れた。リポジトリもめちゃくちゃだし。暴飲暴食もした。 timbre - JavaScript Library for Objective Sound Programming http://mohayonao.github.com/timbre/ 新しいデモもつくった http://mohayonao.github.com/timbre/examples/004_timbresynth.html ライブラリにはUIついていないけど、デモのときは分かりやすいのでわざわざ書いた。バッハとJavaScriptは相性が良いとおもう。JSだけに。 そういえば、前につくった これ もバッハだった。 関連エントリ サウンドプログラミング用のJavaScriptライブラリをつくっている
Meteorとは? Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境(MacOS Xを含む)でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています(公式サイトには、「1日か2日でプロトタイプを、2~3週間で製品レベルのアプリを構築できるようにする」とあります)。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
● ブラウザのリフレッシュレート ブラウザのリフレッシュレート というのは誰がどのタイミングで決定するのか? 誰が決定するか ディスプレイ(モニター)のハードウェアが決定します。ブラウザではありません。 ディスプレイのリフレッシュレート ↓ (OSが検出) ↓ (ブラウザが取得) requestAnimationFrame のタイミング 一般的なリフレッシュレート 60Hz: 一般的なディスプレイ (約16.67ms/フレーム) 120Hz/144Hz: ゲーミングモニター (約8.33ms, 6.94ms/フレーム) 240Hz: ハイエンドゲーミングモニター (約4.17ms/フレーム) ブラウザによる違い 基本的に違いはありません。すべてのモダンブラウザ(Chrome, Firefox, Safari, Edge)は同じ仕様に従い、ディスプレイのリフレッシュレートに同期します。 実際
概要 ▶ 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって本ページはプロモーションが含まれている場合があります 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は
HTMLとJSだけで何か作ることが多くて,開発環境をどう作るかとか,ノウハウみたいなのがたまってきたと思う. ローカルのHTMLファイルをブラウザで開くと,いろんな制約がある.たとえば,ファイルAPIを使えないとか,YouTubeのプレイヤー貼り付けできないとか,/js/みたいに絶対パスで指定することもできない.ページ1枚なら他のページにリンクとかいらないけど,ウェブサイトを作ってるときとかは,/help/でヘルプページを表示するとか書いたときに,ローカルのファイルを見てリンクが切れてるということになる.開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い. サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う.HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う. 開発中は,nginxでフ
そろそろ4月も近いということもあって、新たにWeb業界やSIer業界に入るぞという方がプログラミングの勉強をし始めているころでしょうか。最近は、エンタープライズでもWebクライアントが主流になりつつあるのでJavaScriptの習得は避けては通れない道だと思います。また、Node.js等サーバーサイドのJavaScriptも出てきたこともあって、非常に有用な言語になりつつあります。 そんなJavaScriptを学び始めている人の中でも、ある程度プログラミングをやったことがある人がJavaScriptの綺麗な書き方を学ぶのに絶対理解しておいた方が良い300行程度のソースコードがあります。 それは、JavaScript: The Good Partsに載っているJSONパーサのコードです。 JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス 作者:
最速な JavaScript のリファレンスマニュアルサイトをつくった http://jsref.64p.org/ JavaScript のリファレンスマニュアルといえば MDN(Mozilla Developers Network) が有名ですが、MDN の資料は探索がめんどくさいし、表示が遅いということで使い勝手がわるいという問題がありました。 そこで、jQuery のリファレンスマニュアルサイトとして有名な jqapi.com とおなじよような使い勝手のサイトがあったらいいのになーとおもいました。 なので、つくりました。 サイト自体はすべて static なデータで構成されているので、github からデータを取得すれば、イントラや自分のマシン内で閲覧することも可能となっています。 なお IE での動作確認はしていないので、うまくうごかない場合は pull-req してください。 I
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit(JIT)です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
IEでも滑らかで快適に動作するスライダーを簡単に実装できるjQueryのプラグインを紹介します。 実装にかかる時間は2分くらいでしょうか。 Flow Slider [ad#ad-2] Flow Sliderの特徴 Flow Sliderのデモ Flow Sliderの実装 Flow Sliderの特徴 滑らかなアニメーションで動作します。 実装は簡単で少しのコピペでok。 ベースとなるスタイルシートは用意済み。 クロスブラウザ対応。 対応ブラウザ Firefox Safari Chrome IE Opera9 Flow Sliderのデモ デモではサイトのトップにあるベーシックなスライダーと、本棚に並べたようなスライダーがあります。 スライダーの操作はマウスホバーで、左右の端ほど素早くスライドします。 Flow Slider: Example グリーンのボタン「Buy Book」をクリック
2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 FlexSlider シンプルながら高性能でセマンティックなマークアップのスライダー。 Slidorion 画像スライダーとアコーデ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る/進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
Moment.js - A lightweight javascript date library JavaScriptでの日付の処理が超便利になる「Moment.js」 以下にできることをまとめてみます 文字列からパースして日付オブジェクトを生成 UNIXのタイムスタンプから日付オブジェクトを生成 「Dec 25, 1995」みたいな文字列から日付オブジェクトを生成 日付オブジェクトに時間を簡単に を加算・減算 指定日時からの経過時間を取得 オブジェクトをベースにフォーマットして出力する moment(date).format("dddd, MMMM Do YYYY, h:mm:ss a"); phpにもdateという関数やstrtotimeという関数があったりしますが、そういう便利機能をJSでも使うことが出来るようなものです。 日付をヘビーに使うようなプロダクトで使えそうですね。 サイ
みなさん お久しぶりですヽ(´ー`)ノ夏休みの宿題終わりました? 毎日が夏休みの最終日みたいな生活してるあまちゃんです! さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何? WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです! 実はブラウザっていうのは、エンジン部分と見た目の部分(タブとかボタンとかね)に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー`) ブラウザのサーバーってどういうこと? 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの? 実は、今までは JavaS
サーバサイドJavaScriptにはNode.js以前にもいくつかの実装がある。ちょっと前に注目されかけたものだと、現在はAppcelerater社に買収されたAptana社が出していたJaxerなどがあるが、きちんと調べるとRingoJsやnarwhalやv8cgiなど選択肢の一つとして数えられるサーバサイドJavaScript実装がいくつかある。ただ、これらはNode.jsのように注目を浴びているわけではない。 Node.jsとこれらの既存のサーバサイドJavaScriptの違いは、他のサーバサイドJSの動作モデルが既存のサーバサイドのものと変わらないのに対して、Node.jsの場合はそうではないから。具体的には、HTTPコネクションのハンドリング戦略が違っていて、既存の動作モデルが1コネクションに対して1プロセス/スレッド消費するのに対して、Node.jsの場合は非同期I/Oを用いて
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く