Kawa.netxp [JavaScript] JKL.Calendar／ポップアップするカレンダー表示クラス JKL.Calendar は、ポップアップでカレンダー表示を行うクラスです。 2006年10月にクラス名を変更しましたが、2005年4月のリリース当初のクラス名 JKL.Calender も 別名定義してあるので、こちらも利用可能です。半年前にご指摘いただいた typo でした。 合わせて、選択可能な日付範囲指定用のプロパティ min_date／max_date を追加しました。 Yahoo! UI ライブラリのカレンダー機能がかなり強力なので、 最近なら YUI もオススメできそうですが、 実は JKL.Calendar の方が日本語環境では使いやすかったりするかもしれません。 JavaScript ソースのダウンロードはこちら： jkl-calendar.js JavaScr

電脳レストハウス梅ちゃん堂は終了しました。

新着記事一覧 やまと、群雄【動】シリーズに『クロノスの大逆襲』からケンリュウが参戦 [02:11 10/13]  ASUS、「ASUS PC Park 2008 Powered by Intel」開幕--大阪で最新製品を体験 [21:55 10/12]  小倉優子「消防団は親父も退治してくれます｣ --「地域総合防災力展」が開催 [14:03 10/12]  【レポート】今週の秋葉原情報 - 大容量HDDに注目! 1.5テラが新登場、そして再び8千円切りの1テラも [02:08 10/12]  【インタビュー】「デザイナーがもっと面白く自由になればいい」-クリエイター・長谷川踏太 [21:47 10/11]  仲村みう、生涯"ゴスロリ"宣言 - 「おばあさんになっても続けます!」 [16:25 10/11]  新垣結衣、羽織袴姿で貫禄ポーズ - 映画『フレフレ少女』初日舞台挨拶 [16:0

作成するアナログ時計 さて、最終回の今回はこれまで学んできたCanvasのテクニックを応用して、アナログ時計のjsライブラリを作ってみましょう。図1に完成図を示します。 まず時計の文字盤を画像ファイルとして用意し、それをCanvasに組み込み表示させます。そして、短針、長針、秒針を、Canvasの直線を使って表現します。これら一連の処理をsetIntervalを使って1秒おきに描画しなおします。 ここで解説するjsライブラリは、どのページにも問題なく簡単に組み込めるように作成します。Canvasのテクニックだけではなく、jsライブラリ作成のポイントも一緒に学んでいきましょう。 変数名の重複に注意 JavaScriptは、jsファイルとして機能ごとに分離することができます。しかし、ファイルを分離したからといって、グローバル変数や関数がそれぞれのjsファイル内に隠ぺいされているわけではありませ

名言・目標ガジェット 前回まで、Googleガジェットの使い方や作り方について解説してきました。最終回となる今回は、これまでの内容を復習しながらサンプルガジェットを作ってみたいと思います。 はじめに、作成するガジェットの内容を説明します。ガジェットのタイトルは「名言・目標ガジェット」です。タイトルの通り、名言や目標を表示するガジェットになります。それでは、最もシンプルな形で作ってみましょう。 Google Gadget Editorのページ（http://code.google.com/apis/gadgets/docs/gs.html#Scratchpad）を表示してください。HelloWorldのガジェットが表示されていると思います。その「Hello, world!」の部分を、自分が気に入っている名言や、目標に書き換えます。また、ModulePrefsのtitle属性の値を「名言・目標

変数のスコープ いよいよ最終回となりましたが、今回は、今まで学習した内容を組み合わせて、より実践的なアプリケーションを作成してみたいと思います。いつもの通り、このページの動画を見ながら最終目標を見てみましょう。また、このサンプルファイルはダウンロードできますので、こちらを見ながら勉強していきましょう。今回は、JavaScriptでフォームを自由に操っていきます。 その前に、前回も説明した変数について、もう少し細かく説明していきます。 変数には、スコープというものがあり、宣言した変数がどの範囲で参照できるかを認識しておく必要があります。プログラム全体で参照できる変数を、グローバル変数、関数など、一部でしか参照できない変数をローカル変数と呼びます。 グローバル変数を宣言するには、基本的には、プログラムの先頭で、「var 変数名」で宣言します。関数の中ではなく、必ず、関数の外で宣言してください。

RPA見直される”業務”と”人”の関係 人的リソースを単純作業から解放！ 高付加価値業務への転換のために Kubernetes活用の最適解とは？ 今、注目のコンテナを活用した柔軟なIT基盤 運用、管理の課題を解決しメリットを最大化 今時プライベートクラウドの作り方 2020年代のプライベートクラウド環境を AzureとVMwareを例に紹介 高い従業員満足度と安心・安全 新時代にむけた理想の業務環境こそ Anywhere Workspaceが目指す未来 最新ストレージで変わるIT運用 仮想化テクノロジーとFlashArrayの組合せで 運用負荷軽減と高性能化を実現したDMM サービスを止めない！ サイバーエージェントに聞く高可用性の実現 そこにピュア・ストレージが選ばれた理由 年間5,000件の問い合わせに対応 疑問を解消したいユーザーも答える情シスも みんな幸せになるヘルプデスクの最適解

Web APIとJSON Web上ではネットショッピング、ブログ、SNSなどさまざまなサービスが提供されています。これらのサービスの中にはWebブラウザから利用するだけでなく、サービスの機能の一部をプログラムから利用可能なAPI（Web API）として提供しているものもあります。Web開発者はWeb APIを利用したアプリケーションを開発したり、既存のWebサイトにWeb APIを利用した機能を追加することなどが可能です。 なお、Web APIを使用し、複数のサービスの機能を組み合わせたり、独自の機能を追加したサービスを構築することをマッシュアップと呼びます。 これらのWeb APIの多くはXMLで情報を返すものが多いのですが、中にはJSONで情報を返却するWeb APIも存在します。そこで、今回はJSONを使用するWeb APIの利用方法を紹介します。 Ajaxのクロスドメイン制約 しか

画像を組み込む！ Canvasでは、Webブラウザで表示可能な画像を組み込み表示することが可能です。Canvasは文字を描画する機能がないため、その代用として画像組み込みが重宝します。 Canvasでは、ただ単に画像をそのまま表示するだけではなく、画像の任意の領域をトリミングしたり、拡大や縮小してCanvas上の好きな場所に貼り付けたりすることが可能です。しかし、画像を組み込む場合、画像のロードが完了してから、画像の描画処理を実行しなければいけません。これを踏まえて、画像の組み込み方法を見ていきましょう。 drawImageメソッド 画像をCanvas内に組み込み表示させるためには、drawImageメソッドを使います。このメソッドには以下のように3つの引数を与えます。 ctx.drawImage(image, dx, dy); Canvasの座標(dx, dy)に、imageに格納された

線の色を指定するstrokeStyleプロパティ 今回は、Canvasに描いた線や図形に好きな色を指定する方法を解説していきます。これまで、Canvasに線を描く場合はstrokeメソッドを、図形を塗りつぶす場合はfillメソッドを使ってきましたが、Canvasに表示される色はすべて黒でした。これは、Canvasで描かれる図形のデフォルト色が黒となってるためです。 →今回のサンプルコード（zip形式/47.4KB） Canvasでは、色を指定するために、fillStyleプロパティとstrokeStyleプロパティが規定されています。strokeメソッドやfillメソッドを呼び出す前に、これらのプロパティに色をセットします。 では、strokeStyleプロパティとfillStyleプロパティについて、詳しく見ていきましょう。まずは、strokeStyleプロパティです。 strokeSt

はじまりはいつも"Hello, world!" 前回はGoogleガジェットの使い方やその利点について解説しました。今回は、Googleガジェットの作り方を解説します。 Googleガジェットは、XMLを書いて作ります。 百聞は一見にしかずということで、Googleがサンプルとして提供しているHello Worldと表示するガジェットのXMLを見てみましょう。 Moduleタグの子要素にModulePrefsタグとContentタグがあり、Contentタグの中にCDATAとして"Hello, world!"の記述があります。では、これをiGoogle上で表示してみましょう。 iGoogleにログインし、iGoogleのページ右上の「コンテンツを追加」をクリックします。もしくはこのページを表示します。 ページ左側のメニューバー下に「フィードやガジェットを追加」というリンクがあるので、そこを

画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース

Ajaxライブラリが生まれた経緯 Ajaxテクノロジで開発する上で、大きな問題となることの1つは各Webブラウザ間の互換性問題です。主にInternet Explorer（以下、IE）とそれ以外のWebブラウザの仕様の違いに依存しています。 まず、Ajaxの肝となるXMLHttpRequestの呼び出し方からして異なっています。 IEの場合は、「xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")；（IE７はXMLHttpRequest()でも可能）」となり、それ以外のWebブラウザでは、「xmlhttp = new XMLHttpRequest()；」となります。 また、オブジェクトにイベントをアタッチするやり方も違います。 IEの場合は、「element.attachEvent('onclick', handler);」となり、それ以外のWe

パスという概念を理解して、直線を書こう！ 前回では矩形（四角形）を描くstrokeRectメソッドやfillRectメソッドを紹介しました。これらは、呼び出すだけで矩形の線を描いたり、塗りつぶした矩形を描いたりすることができ、非常に分かりやすいメソッドでした。しかし、これらのメソッドはCanvasにおいて例外的といっても良いでしょう。 通常、Canvasではパスという概念を使って図形を描きます。今回は、このパスの使い方について詳しく解説していきます。まずは、直線を書いていきましょう。 白い紙に鉛筆を使って線を描くシーンを想像してください。最初に、頭の中で線を描こうと考えますよね（beginPathメソッド）。次に、書き始める場所に鉛筆を置きます（moveToメソッド）。そして鉛筆を動かします（lineToメソッド）。これで線が描かれます。Canvasでも、これによく似たことをメソッドの呼び

はじめに　ブラウザの種類やバージョン、おのおのブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。この連載では、クロスブラウザスクリプトを実現する方法について順を追って解説してきています。　クロスブラウザスクリプトを実現するためには、様々な方法があります。これまでの連載では、ブラウザの種類やバージョンを判断し、そのブラウザがサポートしているスクリプトを実行する方法を解説してきました。また、それ以外の方法として、実行するスクリプトをブラウザがサポートしているかどうか調べ、それに合わせて用意したスクリプトを実行する方法なども説明してきました。実際にクロスブラウザスクリプトを作成する時には、それらの方法を単独あるいは組み合わせて作っていくことになります。　本来のJavaScriptの理想的な姿としては、JavaScriptをサポートしたブラウザ

Canvasとは、JavaScriptを使って動的に図を描くために策定された仕様です。これまで、動的に図を表示させる方法としては、Flashが代表的な選択肢でした。しかし、Canvasを使うことで、テキストエディタさえあれば、誰でも無料で動的に図を描くアプリケーションを作ることができるようになるのです。 手前みそで恐縮ですが、図1は筆者がCanvasを使って作った棒グラフを描くJavaScriptライブラリのキャプチャ画像です。Canvasを使うことで、簡単な図だけではなく、かなり凝ったデザインも扱うことができることがおわかりいただけると思います。 しかし、Canvasは決してFlashの代替技術ではありません。まずは、Canvasの特徴を簡単にまとめてみましょう。Canvasの特徴としては、「JavaScriptを使って描画する」「文字は描けない」「アニメーション機能がない」の3つがあり

Ajaxの定義を考える 皆さんはAjaxという言葉がなんの略かご存じですか？ AjaxはAsynchronous JavaScript + XMLの略称で、Asynchronousは非同期という意味です。この言葉はデザインコンサルティング会社Adaptive PathのJesse James Garrett氏によって提唱されました。 その内容はadaptive pathの2005年2月18日掲載記事で読むことができます（出典：Ajax: A New Approach to Web Applications）。 その記事によればAjaxという具体的な技術があるわけではなく、既存技術の組み合わせによって定義されると述べられています（図1）。 では、それを満たさないとAjaxと言えないのでしょうか？ データ通信に関して最近ではJSONというフォーマットが主流でXMLを使うことは少ないですし、動的

このページでは、JavaScriptのオブジェクト指向言語としての側面を研究します。 JavaScriptは、HTMLの拡張という側面が注目されていますが、 プログラム言語として見た場合にも、興味深い独自の特徴がたくさんあります。 このページでは、これらJavaScriptの言語としての特性、 特にオブジェクト指向言語としてJavaScript を見た場合の特徴について詳しく研究を試みます。 JavaScriptは、ほぼ完全なオブジェクト指向言語です。プログラマによるクラス定義、プロパティ定義、メソッド定義ができます。継承は、言語の基本機能としては用意されていませんが、基本機能の組み合わせにより実現できます。 メソッドのバインディング(binding)はレイトバインディング（late binding）です。これは、JavaScriptが変数の型のない言語だからです。 JavaScriptに