Webサイトを色々見ていて、リンクをクリックしたらPDFファイルだった、なんて経験は誰しもがあるだろう。インライン表示になっていると突然固まったようになってしまって、がっかりしてしまう。他にもメディア系(QuickTimeやWMVなど)もそうだ。 リンク先が何なのか予め分かっていると、クリックしないとか覚悟してからクリックできる。ユーザビリティの高いサイトを目指すためにも使ってみたいのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはIconize、リンク先のメディア種別をアイコン表示するソフトウェアだ。 Iconizeを読み込ませると、リンク先の拡張子に応じてリンクの隣にアイコンが表示される。対応しているメディアも多く、Word/Excel/PowerPoint/PDF/XPI/RSS/OPML/vCard/EXE/DMG/iCal/JPEG/SVG/SWF/CSS/MP3
ブログをはじめとしてサイト上でプログラム言語を記述することは多々ある。そして見やすさのためにはハイライト表示されているのが良い。 表示はもちろんのこと、編集まで考えると便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはCodePress、JavaScriptベースのコードハイライタだ。 CodePressが対応している言語は、PHP/JavaScript/Java/Perl/SQL/HTML/CSSになっている。制御文や関数、変数、文字列部分等がハイライト表示される。 また、行番号表示/非表示がJavaScriptの関数レベルで制御できる。また、オートコンプリートの機能もあり、例えばPHPモードでifの後にタブを入力すると、"if () {¥n}"を自動で補完する機能もある。 表示のハイライトだけではなく、編集まで考慮されているのが特徴的だ。また、タブ文字が入力できる
JavaScriptでヒアドキュメントを使うライブラリを作りました。 heredoc.js http://www.teria.com/~koseki/memo/jsheredoc/heredoc.js テスト http://www.teria.com/~koseki/memo/jsheredoc/test.html 外部ファイルサンプル http://www.teria.com/~koseki/memo/jsheredoc/tests.txt 使い方 scriptタグ内に直接書き込む使い方(インラインモード)と、外部ファイルを読み込んでコールバックを実行する使い方があります。 インラインモード <script src="heredoc.js"> # ここはscriptとして解釈されません。 str1 =<<EOT 複数行の文字列です。 下の行でおわりです。str1はグローバルになります。
複数の言語を使い分けるのは面倒、という人は多いのではないだろうか。サーバ系の言語が複数組み合わさると問題の切り分けが面倒だし、Webアプリケーションを作っているとただでさえサーバ側の言語とSQL(プログラム言語ではないが)を利用する必要がある。そこにさらにクライアントサイドの言語まで加わると管理が大変だ。 そこでJavaScriptを別な言語のように扱えるようにしてしまうのはどうだろう。例えばこのように。 今回紹介するオープンソース・ソフトウェアはJSRuby、JavaScriptによるRuby実装だ。 まだまだ本格的に動作すると言う訳ではないが、簡易的な動作はするようになっている。if else endや、def、putsなどが利用でき、Arrayも各種メソッドがサポートされている。FizzBuzzだって解ける。 JavaScriptのオブジェクトが利用できるようになっているので、最終的
今回はJavaScriptとWebページの表示・操作の体感速度について考えてみます。というのは,JavaScriptのせいでWebページの表示や操作などの速度が遅くなっている,と感じることがあるからです。 現在のWebサイトでは,JavaScriptを使って使い勝手を向上することは,ごく当たり前に行われています。例えば,動的にページを書き換えたり,ページ遷移を行わずにサーバーと通信を行ってデータを取得したりと,JavaScriptを使うことで,Webサイトをより便利に,より使いやすくすることができます。 Ajaxという言葉がはやってから,もう2年以上がたつんですよね。何年か前,JavaScriptはじゃまで,セキュリティを低下させる不要なものだと見なされていた頃がありました。しかしそれから一変して,「JavaScriptをがんがん使ってもいい」という空気になったことで,Webサイトを作成す
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
プログラムにおいて、日付というのは厄介な存在だ。表示形式は様々に存在し、タイムゾーンもあり、60進数と12進数がおり混ざっている。 Railsでは翌週金曜日をnext_week(:friday)といった形式で呼び出せる。この拡張がエレガントで惹かれる。同様の操作を実現するJavaScriptライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはDatejs、日付を扱うために生まれたJavaScriptライブラリだ。 Datejsは文字列を日付形式にパースしたり、計算すると言った操作ができるライブラリだ。Date.today()からはじまって、Date.today().next().friday()で翌週金曜日になる。 日付の計算も用意で、Date.today().addMonths(-3)で三ヶ月前になる。(3).months().ago()でも三ヶ月前になるらしい。面白い。 パ
ianime.jsもようやく安定して動き出したので、スライドショーを作ってみようと思ったのだが、通常のjavascriptのイベント処理を使って作ろうとすると、(1)最初のアニメーションの動作を指定し、(2)そのアニメーションの終了イベントを受けて次の指示を出し、...と、ものすごいスパゲッティ・コードを書かねばならなくなる。 それがどうしても耐えられなかったので、色々と試行錯誤をしているうちにたどり着いたのが、JSONを使ったアニメーション専用のメタ言語である。下の例の太字の部分がそれ。 function start() { anime.addSequence([ { duration:3000 }, { id:'pic4', effect:'fadeout', duration:3000 }, { duration:3000 }, { id:'pic3', effect:'fadeou
はじめに AJAXは、デスクトップアプリケーションと同じくらい対話性と応答性のよいリッチなWebアプリケーションを開発する手段として、多くの開発者に採用されてきました。AJAXでは、WebのUIを異なるセグメントに分割します。ユーザーはあるセグメントで操作を実行し、その操作が終わらないうちに他のセグメントで作業を開始することができます。 しかし、AJAXには大きな欠点があります。戻る、進む、ブックマークといった標準的なブラウザ機能が無効になるのです。AJAXアプリケーションの開発者は、ユーザーをAJAXの欠点に無理やり順応させるのではなく、アプリケーションを従来のWebインタラクションスタイルに合わせ、次の機能を提供するようにしなければなりません。[戻る]/[進む]ボタンが機能するようにして、エンドユーザーが直観的なやり方で履歴ページ間を移動できるようにする。ユーザーがブックマークを作成で
これはすごい・・・。 TIDEは「Tiny IDE(統合開発環境)」の略らしい。 そのシンプルな名前にたがわず、実に手軽にJavaScriptを書いて、テストすることができる。日本語もきちんと通るようだ。 しかもIDEだけあって、変数の中身をウォッチしたり、ステップごとに実行していくことが可能だ。 JavaScriptは慣れていないとどうにもとっつきにくかったりするが、こうした環境があればその動作を確認しながら学習していくことができるだろう。 まだベータ版ということで多少のバグがあるようだが、これからJavaScriptをやってみよう!と思われている方にはお勧めだ。
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
Yahoo!は4日(米国時間)、Yahoo! Developer Networkを通じてYSlowの最新版となる「YSlow 0.8」を公開した。YSlowはFirebugを活用しつつJavaScriptで開発されたWebページパフォーマンス計測ツール。Firefox向けのエクステンションとして実装されており、Mozilla Public License version 1.1のもとでオープンソースソフトウェアとして公開されている。 YSlow 0.8ではFirebugのネットパネルでキャッシュからリソースを読み込んで表示しないように変更されたほか、スタイルシートのヘッダでファイル名を混在させた状況では処理対象として認められないというバグが修正されている。また特定のCDNホスト名に関するメッセージがより扱いやすいものへと変更されている。 YSlowはYahoo! Exceptional P
JavaScriptの進化が止まらない。もし、JavaScriptの欠点を挙げるとすれば、外部のファイルがロードできない点にあったと思う。やはりこれができないと他の言語の比べると弱い印象になってしまう。 だが、それをもJavaScriptは克服していく。本当にすごい。 今回紹介するオープンソース・ソフトウェアはAjile、外部スクリプトファイルの読み込み等多数の機能を実装したJavaScriptライブラリだ。 JavaScriptはあまり得意ではないので、これはあまり自信がない。ただ、すごいという事だけはお伝えしたい。まず、外部ファイルの読み込み。これはLoad(ファイル名)にて実装される。 さらにNameSpace。汚染の被害軽減のためには必須だろう。次がIncludeとImport。Importはアスタリスクをサポートしているようだ。さらにImportAsというものもある。 実際の実装
未だに半年前のエントリにブクマされるみたいなので、もう少しjavascriptについて書いてみる。 今回は大規模化開発におけるJavascriptの注意点とかそういうの。当てはまらない環境の方もいます。(しかも基本的な事だらけで大したことは書いてないです) ほぼリッチクライアントを主目的としたjavascripterとコードを対象とします。 どちらかというと、ライブラリを提供する側の視点から 1.ログを出力せよ あなたが書いたコードは遅い、と必ず言われます。なので言われる前から、自分の書いたコードの処理時間をログするようにしましょう。 次のような処理時間を計測するロガーを作ります。 var TraceLog = function (){ this.startTime = -1; var outer = document.getElementById('_outer'); if(oute
JavaScriptが、いま注目を浴びている。 JavaScriptがこれだけの注目を浴びた理由の1つとして、Ajax技術の登場とも相まって、JavaScriptに対する確かな理解の必要性が高まったという事情は否定できない。しかし、それだけでは説明できない急速な注目の理由として、もう1つ、JavaScriptという言語そのものが持つユニークさが開発者の目を引いたという点は看過できないだろう。 もっとも、このユニークさは同時に、多くの開発者が感じているJavaScriptに対する苦手意識と同義でもある。これまでVisual BasicやC#、Javaといった言語でオブジェクト指向構文になじんできた開発者にとって、JavaScriptのオブジェクト指向構文はいかにも奇異なものに映るのだ。ようやくクラスという概念を理解した開発者が、JavaScriptという言語の背後にたびたび見え隠れする「プロ
研究と言うのは技術発展のための重要な要素であるにも関わらず、Web系の世界ではあまり熱心にはされていないように感じる。 新しい技術を生み出す事で、次世代のWebが見えてくる可能性もある。探求し、新しい取り組みをはじめよう。 今回紹介するオープンソース・ソフトウェアはGin、JavaScript構文解析ソフトウェアだ。 JavaScriptには元々evalの仕組みがある。なぜ構文解析を行うのか、それは勿論技術探求のために他ならない。実際、Ginは600行くらいのコードで数式やJSONをパースし、データが取り出せるようになっている。 技術的にこれは非常に面白い。ぜひソースを読むべきだ。こうした試行錯誤の結果が、新しい技術を生み出すきっかけになるのではないかと思う。 公式サイトでは数式、JSONのパースを試す事が可能だ。Ginの面白さは実際に試し、ソースに触れてはじめて分かるものだと思う。ぜひ試
Web2.0時代(?)の技術要素の一つにWeb APIがある。また、各種アプリケーションがWeb化され、ブラウザ内で動作するようになっている。 しかし、これらに必須なのがインターネットだ。ネットワークに繋がっていなければ利用できない。その限界を超えるかも知れないソフトウェアがこれだ。 今回紹介するオープンソース・ソフトウェアはCouchDb、新しい形式のドキュメントデータベースだ。 CouchDbは簡単に言うとRESTを通じたWeb API経由でデータ取得ができるデータベースだ。結果はJSONで受け取ることができる。そのため、PHP/Ruby/Java/LotusScript/Cなど、言語を問わず広く利用できる。 興味深いのは、このCouchDb自体は各クライアントに入れて動作させるという方法だ。この場合、オフライン状態でも利用でき、オンラインになると同期処理をすることができる。 どういっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く