概要 MJL (MITSUE-LINKS JavaScript Library)は、ミツエーリンクスで標準利用されるJavaScriptライブラリです。 MJLは弊社内における業務効率を改善するために、統一された設計思想、利便性の向上を念頭においた上で設計・開発されました。 MJLは他のJavaScriptライブラリ群とは異なる設計思想により、独特の特徴を持ちながらも他のライブラリと補完しあえるものを目指しました。 MJLはコピーレフトライセンスであるGNU GPLに基づく自由ソフトウェア(フリーソフトウェア)です。弊社は GNU GPLに則り、本ページにてMJLの全ソースコードを公開します。 ライセンス MJLはGNU GPL Version 3(参考邦訳)のもとに提供されます。 詳細はMJL本体ファイル内のライセンス告知をご覧ください。 ダウンロード MJL本体(圧縮版) mjl.js
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー&ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
ブロックレベル要素の高さを揃えるheightLine.js[to-R]を見て不満に思ったのは、高さを揃える要素を取得するために固定のclass名を使っていることでした。これだと既存のHTML文書に適用するためには、script要素を加えるだけでなく、それ用のclass名も書き加えなければなりません。どうせJavaScriptを使うのであれば、既存のHTMLの構造を生かしつつスクリプト側で目的の要素を取得できたほうがいいのではと思いました。 というわけでまたも自分なりに書き換えてみるシリーズなのですが、今回は要素取得の柔軟さに着目してjQueryを使ってみることにしました。 できたものは以下です。 jquery.flatheights.js 動作サンプル jQueryの$関数ではCSSセレクタの書式で要素を取得できるので、例えば「"box1"というclass名を持つ要素」を集めるのであれば
Webは略語じゃないのに「WEB」って書く人が多いのが気になって仕方ない今日この頃。(あ、音声ブラウザを配慮したらという場合です) さて、本題に。 CSSのみでロールオーバーするテクニックは有名でございますが、ココ最近JSでいいじゃん。と思うようになってます。 ってことで、こんなサイト名ですけどJavaScriptでやるロールオーバーの方法のひとつでも。 jsファイルのご用意 何はともあれ、下記のjsファイルをご用意します。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src")
This domain may be for sale!
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
mooRainbow is a powerful Javascript color picker like photoshop (made with mootools) that allows you to visually choose and use colors as a real and useful application. What at first I wanted to have was of course a color picker, but I wanted it to be rapid, optimized, clear and powerful: so here we are. News: [2008-08-27] mooRainbow 1.2b2 is out and works with MooTools 1.2, thanks to all who emai
history plugin This plugin helps you make your Ajax-driven page available for "Go Back" button and "bookmark" of browser. ブラウザ履歴を簡単に操作可能なjQueryプラグイン「jquery.history」。 「Ajaxなページで「戻るボタン」を機能させる方法」で紹介したその方法がjQueryのプラグインとしてライブラリ化されました。 動作確認は、デモ画面の、load1, load2, load3 リンクを押していき、ブラウザの戻るボタンで確認することが可能です。 「Ajaxなページで「戻るボタン」を機能させる方法」で解説したとおり、iframe を使ったりしているようです。 こういった機能はライブラリ化されていると便利、というかAjaxフレームワークには最初からついて
Parallax Background with Javascript and CSS ページに今まで見たことのないような背景画像をCSSとJavaScriptで設定「Parallax Backgrounds」。 一見なんの変哲もないサイトのように見えて、スクロールしてみると2枚の背景画像が違う速度でスクロールし、面白い効果が見られます。 スクロールバーをつまんでゆっくりページをスクロールしてみてください。 雲の画像が、その後ろの布風の背景画像よりも高速に動いてみえると思います。 JavaScriptの window.onscroll イベントによってそれぞれの背景画像のスクロール位置を調節しているようです。 凄く面白いなぁ、と思ったのですが、この方法を応用することで、新たに面白い効果を作ることができるかもしれませんね。 訪問者への驚きの要素として実装してみると面白いでしょう。 サポートブ
Creating web sites for the Wii Opera browser Though it may be old news that Wiimote keycodes can be detected by JavaScript in the Wii Opera browser, I could not find a JavaScript library that facilitates handling these input events, so I created my own. Wii用のサイトを作る際に超便利なJavaScriptライブラリ「wii.js」 wii.jsをインクルードすると次のようなAPIを使うことが出来ます。 wii.isWiiOperaBrowser() - WIIで見ているかどうかを true/ false で返す wii.setupHand
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※(米印)」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず1文字分右に動かして、「text-indent : -1em;」で最初の行だけ1文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
Spry framework for Ajax(以下、Spry)は、アドビが提唱しているデザイナー向けの JavaScript ライブ ラリです。無償で配布されているこのライブラリを利用することで、サーバサイドで特別なプログラムを用意したり、ユーザの Web ブラウザへ新たなプラグインをインストールすることなく、今話題の Ajax を利用した動的でリッチなインタフェースやコンテンツを HTML の中に作り出すことができます。 “デザイナー向け”というのが Spry の大きな特長であり、他の Ajax ライブラリと比べてもユニークな点です。Spry そのものは JavaScript ライブラリ群ですが、難解な JavaScript のプログラミング知識はそれほど必要ではありません。HTML コーディングのスキルがあれば、XML からのデータを取得し、加工し、ダイナミックな形で Web ページ
When the original Suckerfish HoverLightbox was published, I was honestly surprised at the amount of attention it received. I was a fan of the technique, and I was also really glad that many people took the time to read the entire article instead of just playing with the demo and move on. One thing I was disappointed in, however, was the lack of attention to detail on my part in the demo and exampl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く