サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
wiz-code.digick.jp
jQueryとMosaicIn.jsを読み込む jQuery MosaicIn.jsはこちらからダウンロードできます。 ⇒画像にモザイクインさせるjQueryプラグイン MosaicIn.js ver 0.5(11KB) <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="/js/jquery.mosaic-in.js"></script> モザイクインさせる画像を配置する <img class="mosaic-in" src="/images/stone1.jpg"> <img class="mosaic-in" src="/images/stone2.jpg"> <img class="mosaic-in" src="/images/stone3.jpg"> プラグインの実行
ステートマシンについて詳しく知りたい方はステートマシンの仕組みのおさらいも参考にしてください。 より多機能なJavaScript ステートマシン・ライブラリ Async-FSMのソースコードをGitHubで公開しました。 Async-FSM – Finite StateMachine JavaScript Library ステートマシンまたは(有限)状態機械は、UMLといったモデリングで利用される特殊な図や表です。 プログラミング自体が、上から下へ行単位でコードを書いていく作業であるのに対して、モデリングは図や表を駆使してアプリケーションやソフトの機能や振る舞いの全容を記すものです。自分のように個人で小規模のプログラミングをするときには、さほど重要ではないモデリングですが、少し規模が大きくしっかりしたものを作ろうとすると、コードを書くよりもまずはノートに図や表を書き起こすところから始まるの
今回はAjaxストリーミングの実装を具体的に見ていこうと思います。ストリーミングの方法はブラウザによって違いがあり、それがかなり厄介でした。特にInternet Explorerは、バージョン8でようやくストリーミングが可能になったばかりで、それより前のバージョン(6、7)ではひとつのHTTPコネクションで複数のレスポンスを得るといったことができず、ロングポーリング(Comet)といった手法で代替するしかありません。IEを除くと、FirefoxやChromeの最新バージョンは問題ありません。ただし、これらもバージョンが古いと正常に動作しないかもしれません。このようにAjaxストリーミングのクロスブラウザ化はかなり困難さを伴うものであるようです。 まず、ひとつの簡単なサンプルを作ることにしました。サーバーサイド(PHP5)でデータを小出しにするコードを書いて、それをクライアントサイドのAja
JavaScriptを書くとき、サーバーとのデータ交換などをするのにJSON形式がよく使われます。JSONはJavaScriptの構文を使用したデータ構造のことで、オブジェクト、配列、文字列、数値、null、ブール値などのデータを扱います。ただし、関数型データは扱えません。 このアドベンチャーゲーム用のエディタではデータのインポート/エクスポートにJSONを利用しています。 JSON形式ではデータ値はオブジェクトと配列のいずれかに格納され、場合によって深い構造を持つことがあります。 //オブジェクトは連想配列と同じで、キーと値のセットで表される { hensachi: '50' } //配列はインデックス番号と値で表される [ 'hensachi', '50' ] オブジェクトと配列の違いは、配列だとfor文などで処理する要素の順番がインデックス番号通りに保証されているのに対し、オブジェク
以前公開したjQueryとSoundManager 2の簡易BGMプレイヤーをマイナーチェンジすることにしました。前のバージョンで明らかにこれは・・・というダメな部分を修正しつつ、 ボリューム調整など新たな機能を盛り込んで作り直しています。 前回からの変更点1:SoundManager 2を通常ロードにする これまでSM2のロードをJavaScriptで動的に行っていたものの、これは時に起動失敗を招く無意味な処置であったことが判明。今回はHTMLのheadタグ内に始めから書く方法に変えています。 変更点2:jQuery Context Menuの代わりにJeegooContextを使用 右クリック時にメニューが表示されるように、前バージョンではjQuery Context Menuというプラグインを使っていましたが、 今回は同じ機能を持つJeegooContextというプラグインに変更しま
Text on YouTube - YouTube動画上にテキストを表示するjQueryプラグイン Text on YouTubeは、字幕inやニコニコ動画のようにYouTubeの動画上にテキストを表示させるjQueryプラグインです。 現在ベータ版を公開しています。 YouTubeの字幕機能と違うのは、テキスト表示部分をJavaScriptで制御していることと、 YouTubeにアップロードされている動画なら誰のでも利用できるところです(動画自体を加工するわけではないからです)。 また、テキストの表示にjQueryのEffectsクラスを使用しているので、単純なshow/hideメソッドから、 animateメソッドまで幅広くエフェクトを利用できます。 ただし専用エディタがないので、字幕表示のためにはJavaScriptやJSON文法の理解がある程度必要になります。一方で、簡単なコードを
私はどちらかというとPrototype.jsライブラリをよく使ってきたのですが、最近はjQuery寄りになっていて、プラグインをいくつか作る機会が出てきました。今回は自分が参考にしたサイトなどを頼りにjQueryプラグイン作成方法をまとめてみたいと思います。 参考サイト: jQuery を扱う: 第 3 回 中級レベルの jQuery: 独自のプラグインを作成する 内容はややデベロッパー向けですが、以下のWeb技術を扱った一連のドキュメント群も非常にためになります。 技術文書一覧 プラグイン作成のマナー 別に強制力があるわけではないですが、jQueryサイドで最低限守ってほしいという規則を載せておきます。 1、ファイル名はjquery.「あなたのプラグイン名」.jsとする。 例: jquery.clickablecanvas.js 2、メソッドはjQuery.fnオブジェクトにアタッチし、
ClickableCanvasの概要 jQuery ClickableCanvasは、HTML5のグラフィック機能であるCanvasで描かれた図形に、一部のマウスイベントをバインドするjQueryのプラグインです。 図形にマウスを合わせたり、図形をクリックしたタイミングでDOMイベントのようにコールバック関数を呼び出すことができます。 Internet Explorerはバージョン8までCanvas要素に対応していないものの、FlashCanvasやExplorerCanvas、 uuCanvas.jsをページ内で呼び出すことで同等の機能を持たせることができます。 jQuery Clickable Canvas バージョン2を公開しています。詳しくはこちらのデモページへ! 10/11/18 Canvas機能をInternet Explorerで実現するライブラリFlashCanvasに対応
以前JavaScriptでツールチップの導入がはやった時期がありました(いきなり過去形ですが)。マウスをリンクや画像の上などに乗せると出てくる小さなポップアップのようなあれです。 手軽にユーザビリティを向上させられるツールチップの需要は案外高く、その上簡単なスクリプトで作れることから、いろんなタイプのツールチップが数年前から公開されています。 今回はデザイン的になかなかクールなclueTipというツールチップを見つけたので、紹介してみます。 また、これはjQueryのプラグインなので使用するページでjQueryライブラリを読み込んでおく必要があります。ただ、同時にjQuery UIの膨大なテーマを利用することを考えており、 何がデザイン的にふさわしい組み合わせかサンプルを踏まえながら見ていく予定です。 ここにカーソルを合わせてみてください。 長いので目次付き 導入に必要なもの (1)jQu
前回はUizeのクラスHover Faderで、メニューやサムネイル表示の機能を 試してみました。しかし、サムネイルについてはあのままではクリックしても何も変わりません。そこで多く出回っているJavaScriptライブラリを 利用して画像ギャラリーとして完成させることにしました。 サムネイルをクリックすると画像が拡大します ThickBoxのセッティング 実はUizeにもUize.Widget.ThumbZoomという画像をスムーズに拡大するクラスがあります。 しかし、ちょっとマウスを動かすだけで拡大画像が消えてしまう他、Chromeでの動作が不安定で使い勝手がよくなかったのでやめました。 画像ギャラリーのライブラリはたくさんあり、代表格はPrototype.js系のLightboxやjQueryのThickBoxなど。 ここでは導入の手軽さを考えてThickBoxを使うことにします。 j
jQueryプレイヤーの新バージョンを公開しました。JeeGooContextプラグインを使用し、いくつか機能が追加されています。 以前Prototype.jsとSoundManager2で作成したミュージックプレーヤーを、jQueryのプラグインに置き換えてリメイクしました。 サンプルはこちら SoundManager2はここからダウンロードできます。 まずはセットアップ このスクリプトではjQueryとjQuery Context Menuというライブラリを利用しています。 jQueryはここから、(バージョンは最新のv1.4.1以上を利用してください) jQuery Context Menuはこのページからダウンロードできます。 jQuery Context Menuに関しては、JavaScriptファイル とCSSファイルがそれぞれ必要になります。 ファイルを用意したら、まずjQu
このページを最初にブックマークしてみませんか?
『ウィザード・コード | WIZARD-CODE』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く