﻿<?xml version="1.0"?>
<rss version="2.0">
	<channel>
		<title>ホームページ制作に役立つＡｊａｘ講座</title>
		<link>http://www.ayearwiththeverymost.com/</link>
		<description>Ａｊａｘの概要についての説明</description>
		<language>ja</language>
		<pubDate>Mon, 1 Jan 1 00:00:00 +0900</pubDate>
		<lastBuildDate>Mon, 5 Mar 2012 16:44:01 +0900</lastBuildDate>
		<item>
			<title>ホームページ制作・Ａｊａｘをはじめる前に</title>
			<link>http://www.ayearwiththeverymost.com/entry10.php</link>
			<description><![CDATA[
ホームページ制作にあたってより高度な表現やインタラクティブな表現をする事に大いに役立つものがAjaxです。Ajaxとはコンサルティング会社を経営するjesse James Garrett氏が2005年に投稿したエントリーで、Webアプリケーションへの新しいアプローチと言われているものです。AjaxはAsynchronous JavaScript and XMLおよびDHTMLの略で、デスクトップアプリケーションと常時新しい情報が更新された状態のWebアプリケーションとの機能および、サーバーが応答するまでの時間や画面が更新されるまでの時間、要求に対する応答が帰ってくる時間などの溝を埋める為に開発されたもので、Webサイトの構築に威力を発揮する手法と言われており新しく言語を学ぶような難しさは全くありません。Ajaxの開発によってデスクトップアプリケーションに備わっているような動的なユーザーインターフェースや趣向を凝らしたコントロールをWebアプリケーションで使用する事が可能となったのです。Ajaxについて調べると、多くの技術が関わっており、その為その技術の詳細を理解する為には何種類かの知識を必要とします。とはいってもホームページ制作にあたってはそこまで難しいものではなく、基本的な概要の知識があれば充分です。必要な知識はいくつかあり、Webフォームを作成する為に使用されてアプリケーションの残りの部分で使用するフィールドを識別する為に使用されるHTMLや、Ajaxアプリケーションの中核となるコードでサーバーアプリケーションとの通信が容易になるJavaScript、その他にもフォームを動的に更新してDivやSpanなどその他の動的なHTML要素を使用する事でHTMLのマークアップを行うDHTML、サーバーから返されたHTMLおよびXMLの構造を処理する為にJavaScriptを使用して処理されるDOMなどがあります。DOMとはHTMLやXMLをプログラム上で使う為のAPIで、HTMLやXMLのデータとAjaxを結びつける為に使われるものです。以上の４つのそれぞれのアプリケーションや機能、Ajaxについての理解を深める事でその理解を深めれば深めるほど、これらの技術に関して漠然と理解している段階からそれぞれの技術を使いこなせる段階に進みやすくなり、Webアプリケーション開発やホームページ制作への扉が開けると言えるでしょう。
			]]></description>
			<pubDate>Fri, 13 Jan 2012 11:21:29 +0900</pubDate>
			<guid isPermaLink="true">http://www.ayearwiththeverymost.com/entry10.php</guid>
		</item>
		<item>
			<title>データが受け取れなかった場合の処理</title>
			<link>http://www.ayearwiththeverymost.com/entry9.php</link>
			<description><![CDATA[
ネットワークで通信を行う場合には様々なエラーが発生する事があり、ありがちなエラーの事例としては読み込むべきファイルが無い場合などがあります。ファイル名を間違えて指定している場合もファイルが無いという形で認識され、ファイルが存在しない場合にはサーバーからのステータスコードが４０４となります。よくウェブページを閲覧していると、たまに404 Not Foundといった文字を見かける場合があり、これはファイルが存在しない事を表す値となります。readyStateプロパティの値が４で、statusプロパティの値が４０４の場合にはファイルが存在しないときの処理を行います。ファイルが存在しないというエラー以外にファイルへのアクセスが許可されていない場合や、basic認証に失敗した場合の他、単純に読み込みが完了しなかった場合やCGI等のサーバー内部のエラーなどがあります。エラー別に処理を分ける場合にはファイルが存在しない場合等１つ２つ程度のエラー時の処理を記述する場合はif命令でも充分ですが、いくつかのある程度のエラー数を処理したい場合にはswicth...caseを使用する事が一般的と言われています。Windows版のOperaではバージョンによっては４０４ではなく３０４になる場合があるので、エラーコード処理は２００以外はエラーとする方が安全であるとも言われております。switch...caseを使ってもエラー数が多くなるとその処理は大変ですが、JavaScriptの場合にはハッシュを使って関数を呼び出すようにする恐tでステータスコードに応じた処理を簡単に行う事ができるのです。StatusCode配列の添字の部分にはステータスコードを指定し、実行する関数／処理内容を定義するだけで簡単に多くのエラーの処理に対応することが可能となります。データの読み込みが中断された場合等のエラーについては、サーバーから送信を中断する場合にabort()メソッドを使用します。実行するとブラウザによって表示結果が変わり、Firefoxでは読み込み中でもステータスが変化するイベントが発生する為、とても長い行数となってしまいます。その他の環境によっても結果は変わる事があり、readyStateやステータスコードからは中断されたかどうかは判別できないので、中断した場合にはフラグ変数を用意してから処理する方が安全と言われております。
			]]></description>
			<pubDate>Thu, 12 Jan 2012 18:56:30 +0900</pubDate>
			<guid isPermaLink="true">http://www.ayearwiththeverymost.com/entry9.php</guid>
		</item>
		<item>
			<title>サーバー上のファイルの読み込みについて</title>
			<link>http://www.ayearwiththeverymost.com/entry8.php</link>
			<description><![CDATA[
ホームページ制作でAjaxを使用する時にサーバー上のテキストファイルや画像ファイルを読み込んでページ上に表示する事ができます。テキストファイルはopen()メソッドで最初の引数に”GET”を指定して、二番目の引数に読み込ませたいファイル名を指定し、三番目の引数は同期、非同期を示すフラグとなります。trueを指定するか省略すると非同期通信になり、falseを指定する事で同期通信となります。データの読み込みが完了したら、responseTextプロパティの値を表示する事で文字が表示されますが、日本語を含むテキストファイルの場合には問題が発生し、文字コードを認証させる為の先頭情報であるBOM(Bye Order Mark)付きのUTF-8以外ではうまく表示されない事があります。日本語を含むテキストファイルの場合には、基本的にBOM付きのUTF-8を使う事で大半の環境は整い、安全に配慮するならばresponseXMLやXML形式のデータを読み込む方が適しているでしょう。フォームのテキストアリアに文字を表示して使用する場合には、多くの場合普通の文字として表示する事が多く、このような場合にはdivタグで文字を表示するブロックを用意し、divタグのid属性に名前を指定します。名前は英数字で始まり、二文字以降は英数字の組み合わせで記述し、日本語の使用はエラーの元となるのでやめましょう。Id名を指定したらdivタグにアクセスする事ができ、文字を表示するにはinner TextまたはinnerHTMLを使用し、inner Textでは普通のテキストとして処理されてinner HTMLではタグとして処理されます。inner Textでは読み込んだ文字はそのまま表示され、inner HTMLではタグが反映されるので状況によって使い分ける事が重要となります。また処理速度ではinner Textの方が処理速度が速いと言われています。サーバー上に画像ファイルを読み込ませたい場合にresponseTextでページ上に表示するとGIF形式であればGIF89a~といった文字が表示され、ブラウザによって表示される文字が異なります。バイナリデータの場合にはJavaScriptではバイト単位で処理できる命令が無いので、バイナリファイルの処理を行う事は適していないと言われています。GIF形式の場合には先頭に文字が書かれ、これによって拡張子がgifでなくともファイルの先頭を読み出す事で本物のGIF形式かどうかを調べる事ができ、このような文字の事をマジックコードと呼びます。
			]]></description>
			<pubDate>Thu, 12 Jan 2012 18:55:47 +0900</pubDate>
			<guid isPermaLink="true">http://www.ayearwiththeverymost.com/entry8.php</guid>
		</item>
		<item>
			<title>サーバーとの通信について</title>
			<link>http://www.ayearwiththeverymost.com/entry7.php</link>
			<description><![CDATA[
ホームページ制作に使用する事で大きな効果を発揮させるAjaxはサーバーとの通信を行うことで様々なデータをやり取りし、処理を実行する事ができます。Ajaxといっても処理を行うプログラムはJavaScriptですので、JavaScriptでの可能な範囲内でしか処理は実行できず、Adobe AfterEffectに備わっているようなメール受信や簡易サーバーの作成によってソケット通信を行うオブジェクト等は用意されておりません。JavaScriptではソケット通信を行うことはできませんが、HTTPサーバーとやり取りする為のオブジェクトは備わっており、そのオブジェクトはInternet Explorerやその他のブラウザによって異なっています。Internet ExplorerではActive Xを使用して実行され、その他のブラウザではXMLHttpRequestオブジェクトを使用する事で通信を行います。また、Internet Explorerで用意されているXMLHTTPオブジェクトには二種類あり、同期通信によるファイルの取得と非同期によるファイルの取得方法があります。両方ともInternet Explorerとその他のブラウザではやり方が異なり、同期通信によるファイルの取得ではクライアントからサーバーに対して通信を行う為に使用するXMLHttpRequestオブジェクトを使用し、プログラムはJavaScriptとしてHTMLページ内に記述していくかたちとなります。まずはXMLHttpRequestオブジェクトを作成し、サーバーに対するリクエストを作り、同期通信の為に「send」メソッドを実行してサーバーからのレスポンスを全て返ってくるまで処理が停止されます。全てのレスポンスを受信したらコードをサーバーからファイルを読み込みダイアログに表示させ、どのタイミングでプログラムを実行するかに付いてはHTMLページ内に記述するなどして指定します。非同期通信についてはサーバーからのレスポンスを待たずに次の処理を行う事ができるので、大量のデータ処理が必要な場合等に役立ち、クライアント側でもレスポンスを待たずに処理する事が可能となります。基本的なプログラムの流れは同期通信のときと同じとなりますが、１つ大きな違いがあり、非同期通信では「send」メソッドを実行するとすぐに次の処理へ移ってしまうため、「alert」を受信する時点で表示するべきデータが受信できていない為に、何も表示する事ができないのです。よって、非同期通信の場合にはサーバーへリクエストを送信する部分とデータを受信後に表示する部分を分けて考える必要があるのです。
			]]></description>
			<pubDate>Thu, 12 Jan 2012 18:55:06 +0900</pubDate>
			<guid isPermaLink="true">http://www.ayearwiththeverymost.com/entry7.php</guid>
		</item>
		<item>
			<title>Ｆｌａｓｈとの連携</title>
			<link>http://www.ayearwiththeverymost.com/entry6.php</link>
			<description><![CDATA[
ホームページ制作におけるAjaxの仕様でのDHTMLの登場と同時期に急速に普及したものがFlashで、これを使用する事により少ないデータ量でアニメーションを作成する事が可能となり、ちょっとしたインタラクティブ的な事も手軽にできるようになった為、急速に普及し現在では当たり前の用に利用されているものです。Flashも時代とともに進化し、アニメーションだけにとどまらず、より複雑な処理が可能となり、Flashを使用する事でブラウザやOSの違い等にあまり悩まされる事も少なくなり、高機能なホームページを構築する事が可能となりました。FlashはブラウザやOS間の違いに悩まされるDHTMLとは違い、プログラマでなくともFlashを利用すれば手軽に高機能なホームページを構築する事ができるので、プログラム技術が必須なDHTMLとは違って、Flashはプログラムが解らなくともある程度の事が可能となります。ですがDHTMLとFlashにもお互いにメリット・デメリットは存在します。DHTMLのメリットやデメリットは前項での記述の通りで、Flashのメリットはその自由度の高さとプログラムを知らなくともダイナミックなホームページの構築が可能な事と、ブラウザとOS間の差が少ない事などがあります。デメリットとしてはプラグイン動作が必須でプラグインが動作しないとユーザーから閲覧する事も不可能となる…や有料のアプリケーションを必要とする事、Yahoo!やGoogleなどの検索エンジンにホームページの語句が拾われにくいという事などがあります。他にも両方とも様々な点がありますが、現在ではWebデザイナーが複雑なホームページ制作を行う場合にはFlashを使用する事が妥当とされています。ですがこのFlashを扱うのはWebデザイナーであってプログラマではないので、システムエンジニアやプログラマとWebデザイナーとの間には深い溝があり、そのためプログラマはFlashよりもJavaなどを使用してRIAを構築する事が多く、JavaもブラウザやOS間の差が少ない為、DHTMLと比べても安全かつ安心して利用する事が可能とされています。Ajaxは万能ではなく、既存のアプリケーションが無くなる事もありませんし、FlashやJavaで構築するホームページが消滅するわけではなく、FlashやJavaに加えてAjaxという選択肢が加わったという考え方をする事が正しいとされております。
			]]></description>
			<pubDate>Thu, 12 Jan 2012 18:54:12 +0900</pubDate>
			<guid isPermaLink="true">http://www.ayearwiththeverymost.com/entry6.php</guid>
		</item>
	</channel>
</rss>

