画像を組み込んでいこう！
画像を組み込む！ Canvasでは、Webブラウザで表示可能な画像を組み込み表示することが可能です。Canvasは文字を描画する機能がないため、その代用として画像組み込みが重宝します。 Canvasでは、ただ単に画像をそのまま表示するだけではなく、画像の任意の領域をトリミングしたり、拡大や縮小してCanvas上の好きな場所に貼り付けたりすることが可能です。しかし、画像を組み込む場合、画像のロードが完了してから、画像の描画処理を実行しなければいけません。これを踏まえて、画像の組み込み方法を見ていきましょう。 drawImageメソッド 画像をCanvas内に組み込み表示させるためには、drawImageメソッドを使います。このメソッドには以下のように3つの引数を与えます。 ctx.drawImage(image, dx, dy); Canvasの座標(dx, dy)に、imageに格納された
[Think IT] 【これならわかる！JavaScript/Ajax】やりなおしのJavaScript 第1回：そろそろ本気で学びませんか？ (1/3)
画面の一部を瞬時に切り替える方法 JavaScriptを勉強したいけど、プログラム構造がよく分からなくて、なんとなく使っている人は多いのではないかと思います。市販の本やWebサイトにはJavaScriptのサンプルがたくさん載っているので、必要なところをコピー＆ペーストしてしまうと、JavaScriptの文法が分からなくても動いてしまいます。 しかし、このような使い方をしていると、JavaScriptサンプルを少しだけ修正したいという時に対応できなくなります。これでは「JavaScriptを使える」とは言えませんよね。 そこで、本連載では、JavaScriptをもう一度やり直したい方々のために、勉強の切り口を変えて紹介していきましょう。 最初のトピックでは、JavaScriptを使ってHTMLのコンテンツを入れ替える方法について紹介してます。この技術は、最近話題になっているAjaxのベース
[ThinkIT] 第2回：Seleniumを体感する (1/3)
それでは、Seleniumがどのようなものかデモによって体感してみましょう。今回のデモでは以下のようなテストを行います。 試験項目 検索画面にて正常に検索できること 試験手順 検索画面を開く 検索フィールドに「selenium」と入力し、[検索]ボタンを押す 検索結果画面が表示されることを確認 「selenium の検索結果」と表示されていることを確認
[ThinkIT] 第1回：Webブラウザを使ったテストツールSeleniumとは (1/3)
この連載は、WebアプリケーションのテストツールであるSelenium（セレニウム）についてサンプルを用いながら概要と基本的な使い方を解説していきます。本連載第1回の今回は、Seleniumの概要について紹介します。 Seleniumとは、Webブラウザを使ってWebアプリケーションをテストするツールです。この「Webブラウザを使って」というのが非常に大きなポイントで、人が手でWebブラウザを操作する代わりにSeleniumがWebブラウザを操作してくれるのです。 そして単純に操作するだけでなく、例えばエラーメッセージが正しく表示されているかといった検証も行うことができます。つまり、今まで人手を必要としていたWebブラウザを使った試験が自動化できるものなのです。そのため数百項目もあるテストも、クリック1回で実施できます。 より重要なことは「自動化することによって試験を繰返し実施できる」こと
[ThinkIT] 第5回：グローバル変数の制御と更新履歴ファイル (1/2)
前回の「第4回：JavaScriptライブラリの作成」で作成したCalcライブラリでは、オブジェクトの初期化で特に複雑な処理は不要でしたが、より高度なライブラリになると多数の関数を定義したりループを回したりと、初期化処理の中で変数を必要になるシーンが増えてきます。 JavaScriptの変数スコープは「{}」で囲われたブロック単位でなく、関数単位になります。関数外でvar宣言した変数も全てグローバル変数として定義されるため、例えばライブラリ中で リスト5：calc.cgiサンプルCGI（Webサービス側） という初期化コードを記述した場合、tmpとiの2つのグローバル変数を利用（汚染）することになります。 ライブラリは他のプログラムと併せて利用するためのものですから、ライブラリ外のプログラムが変数tmpやiを別の用途で利用していた場合に影響が出てしまう可能性があります。 ライブラリの初期化
[ThinkIT] 第1回：Prototypeライブラリの内部 (1/2)
JavaScriptは絶え間ないポップアップウィンドウや迷惑なアニメーションに覆われた「失われた10年」を乗り越え、Ajaxというキラー技術を引っさげて、ついに復活を成し遂げつつあります。 世界中のエンジニア達がJavaScriptを利用したWebアプリケーションの開発に取り組み、毎日のように新しいライブラリやフレームワークが公開されるようになりました。公開されたコードの再利用により応用が広がり、さらに発展が加速している感があります。 ブラウザー上で誰でも手軽にソースコードを閲覧できるJavaScriptは元来、究極のオープンソース用プログラム言語であるとも言えます。本稿では、既存の人気ライブラリの内部構成を徹底解剖するとともに、オリジナルのJavaScriptライブラリを作成するテクニックをご紹介しましょう。 自作したJavaScriptプログラムを他の人にも利用しやすい形で公開すれば、
[ThinkIT] 第1回：5分でわかるXAMPPの魅力 (1/3)
最近、Webアプリケーションシステムを構築する際に「LAMPで行う」という話をよく耳にします。LAMPはWebアプリケーション構築の際に容易に導入を進められることから、大企業でも盛んに用いられるようになってきました。 LAMPとは「Linux」「Apache」「MySQL」「PHP/Perl/Python」の頭文字をつなげたものです。日本ではWebアプリケーションというとまだまだJavaが主流ですが、世界を見渡すとオープンソースなWebアプリケーションは、ほぼLAMPが独占しているといっても過言ではありません。 フリーコマースの「osCommerce」やポータルサイトの「Xoops」をはじめとして、SFAやEIP、CMS、ERPなど、ほとんどのアプリケーションがLAMP上で動作することを前提として作られています。極端な言い方になりますが、企業の必要なアプリケーションのすべてをLAMPで運用
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ThinkIT] 第6回：自作ライブラリの公開とJavaScriptライブラリの今後 (1/2)
[ThinkIT] 第4回：JavaScriptライブラリの作成 (2/2)