【jQuery】jQueryのデバッグツール

jQueryのデバッグツール

jQueryプログラムを書いてもデバッグ出来る環境がないとプログラムが思った通りの動作をしないときに、どこが良くないのか見つけるのに苦労します。

jQueryのデバッグが手軽に出来るツール

手軽にデバッグを行うことが出来る環境は、すでにブラウザに組み込まれています。

IEやChromeはhtmlファイルを読み込んだ後、F12キーを押すことでデバッグ環境が表示されます。

慣れるまでに試行錯誤するかも知れませんが、動かしているうちにコツがわかってくると思います。

変数に何が設定されていて、どう分岐されているか確認しながら画面を見ることができます。

マイクロソフトの統合開発ツール

私はHTML文書を作成したり、jQueryプログラムを書いたり、デバッグするのに、マイクロソフトの統合開発ツールVisual studioを使用しています。
現在は無料のVisual Studio Communityが簡単に?利用できますのでVisual Studio Communityを使うのも良いですね。
一応リンク先を付けておきます。
visual studio 2015 community

【jQuery】jQueryを利用するためには?

jQueryを利用するためには?

jQueryは、ご存知の通りHTML文書に組み込んで利用します。
利用すると言う事だけであればHTML文書から、jQueryファイルを取得し外部参照ソースとして呼ぶか、ネットワークで配信してもらえるサービスを利用して呼ぶか、のどちらかを行うだけでjQueryを使うことができるようになります。

jQueryファイルを取得するには

jQueryはたった一つのファイルを取得するだけです。

1.jQuery本家サイトのダウンロードページから、最新版ライブラリをダウンロードすることができます。
現在はVer3系になっています。

2.CDN(Content Delivery Network)と言われるネットワークで配信してもらえるサービスもあります。
Google CDN、Microsoft CDN、CDNJS CDN、jsDelivr CDNが紹介されています。
とりあえず、Google CDN、Microsoft CDNをリンクしておきますが、リンク切れするかもです。
Google CDN
Microsoft CDN

ダウンロードしても良いですし、ネットワーク経由で参照しても良いので自分の環境に合わせてください。
また、jQueryは良く更新が行われている「生きて進化しているライブラリ」です。
jQueryを取り巻く環境に合わせ進化していますので、仕様が更新されるチェックを行うことも大切です。

jQueryを利用してプログラミングする

すでにプログラミングの素養の有る方は、すぐにでも概要を掴み複雑なプログラムを作り始めることができるかも知れませんが、普通はそんなに簡単にできません。
まずは小さく単純な動作を確認できる環境を整え、いくつかのシンプルなプログラムを書き、動きを確かめながらjQueryに慣れていくことが肝要です。
これから引き続きプログラミング情報を載せていく予定ですが、簡単に手順を書きます。
1.HTML文書を作成する
2.<head>要素内でjQueryファイルを呼び出す
例)<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
3.jQueryを使って処理プログラムを書く
4.動かして動作確認する

HTML文書を作成したり、jQueryプログラムを書いたり、デバッグするのに、私はVisual studioを使用しています。
現在は無料のVisual Studio Communityが簡単に?利用できますのでVisual Studio Communityを使うのも良いですね。
一応リンク先を付けておきます。
visual studio 2015 community

【jQuery】jQueryとは

jQueryとは

jQueryとは、メジャーなJavaScriptライブラリです。
JavaScriptはWebブラウザ上でいろいろなことが処理できるプログラミング言語ですが、JavaScriptを使って1からプログラムを書くと面倒なこととか専門家でないと難しいところを、jQueryがライブラリを提供してくれて比較的簡単にしてくれます。
なお、jQuery自身もJavaScriptで記述されています。

jQueryのJavaScriptを簡単に扱えるようにしてくれる特徴とは

◆複雑な処理をシンプルに記述できるようにしている
JavaScriptはWebブラウザ上で処理を行いますが、ご存知の通りWebブラウザにはいくつもの種類があり、各々でできたりできなかったりして、同じ処理をするにしてもWebブラウザに合わせてカスタマイズする必要がある場合もでき、複雑で面倒なことが起きます。
jQueryではその複雑で面倒な部分をライブラリ内で吸収しているので、異なるWebブラウザでも同じメソッドを使うことで同じような処理を行ってくれます。

◆CSSセレクタを使うことができる
CSSはWebブラウザに画面表示をどのようにするかを指示するための言語です。
CSSセレクタはHTMLの要素を複数選択し、処理を指示することができます。
CSSセレクタは、本来はJavaScriptとは異なるものですから、使用できなかった(し辛かった)のですが、jQueryではCSSセレクタを簡単に選択し操作できるようにしました。そしてCSSと同じように複数選択できるようになり、同じように短い記述でまとめて処理が書けるようになりました。

その他、jQueryの利用者が多いことからネットで検索すれば情報がたくさん出てきますし、プラグインも簡単に手に入ります。開発環境もVisual Studioでサポートされていたり、Webブラウザ上のデバッグもできたりします。

また、日々jQuery自身の更新もされており、jQuery自身がより良いものになっていっています。

【HTML5】HTML5とは

HTML5とは
 定義を大まかに言うと、HTML5はW3C(World Wide Web Consortium ワールド・ワイド・ウェブ・コンソーシアム)によって2014年10月28日に勧告・公開された、WebPage(ウェブページ)やWeb Application(ウェブアプリケーション)を構築する際に使用されるフォーマット仕様の第5版である。
また、2016年9月にHTML 5.1が勧告される予定。
HTMLを取り巻く環境は、各組織の思惑が有るため複雑に絡んでいます。
なので、興味の有る人は別途ググってください。

ここからは私見で書くので、偏った情報になると思いますが、このような見方もあるとの参考にしてください。
HTML5とは、ウェブアプリケーションのプラットフォームとしての機能させるべく開発された仕様です。
そのため、今までは例えばプラグインをインストールしないと使えなかったビデオ機能など、普通に欲しいと思われる機能を盛り込んだ仕様になっています。
これはAppleがFlashを採用しなかったようにいろいろと思惑が働いているようですが、基本的には、プラットフォームは共通の技術の上に構築されるべきという概念が有るためと思われます。FlashはAdobeの製品なので、Adobeが特定のハードウェアに対しプラグインを作らないという事態はAdobeの支配が強まるとの見方もでき、Appleの容認できなかったようです。

なので、HTML5は巨大なマーケットをいろいろな組織が自分達の有利になるよう、または不利にならないように、便宜上公平なプラットフォームとして策定したHTML仕様です。
ですが、HTML5はW3C以外にもWHATWG(Web Hypertext Application Technology Working Group ウェブ・ハイパーテキスト・アプリケーション・テクノロジー・ワーキング・グループ)の影響も受けており、策定に関しては専門家でないとよくわからないと思われます。

とりあえず、HTML5を使うに当たっては、当面不必要な情報でしたが、HTML5の定義はこんな感じです。

以上、HTML5とは・・・でした。