jQuery APIでWebサイトを演出しよう

開発環境を準備する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ブラウザはGoogle Chrome、テキストエディタはSublime Text2を使って、コーディングをしていきましょう。
講師:
05:30

字幕

このレッスンではサイトを構築するためのアプリケーション、開発環境の準備をしていきましょう。まずコードを打ち込むテキストエディターにはSublime Text2 を使います。Sublime Text2 は世界中で人気のテキストエディターです。こちらを使ってJavaScript 等を書いていきます。そして環境設定が用意されています。環境設定を見てみましょう。フォルダーを開いて、レッスンフォルダーの中にこのようにPreferences.sublime-settingsというファイルがありますのでこちらをドラッグアンドドロップでSublime Text のアイコンに落としますと、 このような画面が開きます。Sublime Text は各設定をこのように1行1設定としてテキストで記述していきます。少しとつぎにくいですがこのテキストで扱うということはコピーアンドペーストでいつでも移行が可能、という柔軟な形式になっています。この設定ファイルを反映させるためにはSublime Text 2 というメニューをクリックしましょう。そしてその中にPreferences という項目があります。Windows の場合はこちらのメニューバーにPreferences という項目があるのでそちらをクリックして頂ければ中身は一緒の項目になっています。 この中に Settings -User というのがありますのでこちらをクリックしてみましょう。そうしますと、このように現時点でのセッティングが開かれます。このセッティングはすべて消してしまっても大丈夫です。今回はこのレッスンで使うこちらのファイルをコピーしてこちらを全て上書きすることでも大丈夫ですし、既に Sublime Text を使用の方は自分の設定に従って設定をカスタマイズしていただいても構いません。また、使用しているパッケージがあります。パッケージはAutoFileName という画像やCSS, JS 等の外部ファイルを入力しやすくするためのパッケージが入れてあって後、HTML や CSS の入力支援としてEmmet というパッケージを使っています。パッケージは無料で使用ができこちらを導入しなければならないということはありませんがもし興味があれば導入をしてみてください。次にブラウザー、Google Chrome の紹介です。Google Chrome は動作が快適で拡張ができ、またデベロッパーツールというCSS や HTML,JavaScript の開発に便利なツールが備わっていたりします。 ここで便利なショートカットを1つ覚えておきましょう。更新のショートカット、Mac の方は Command+RWindows の方は Ctrl+R でできますのでこちらをうまく使って確認を進めていきましょう。また、デベロッパーツールの使用の方法を紹介します。それではフォルダーを開いて、この階層の1つ上の階層。_site_final というフォルダーがあるのでこの site_final の中にあるindex.htmlこちらの HTML をSublime Text にドラッグアンドドロップしましょう。そして Sublime Text 上で右クリック、そして Open in Browserという項目を選びます。そうすると Sublime Text で開いているファイルをーで確認することができますがデベロッパーツールの表示の仕方です。表示メニューから「開発管理」、そしてその中に「デベロッパーツール」というものがあるのでこちらをクリックします。このように画面の下に表示が出ます。また、自分が調べたい所を調べる方法もあります。例えばこちらの文章を知りたいということであればここで右クリックをしてコンテキストメニューの中から「要素の検証」という項目を選びましょう。 こちらを選ぶと、今右クリックしたところに自動的にデベロッパーツール上のハイライトが入ります。要素の検証を使うと、メニューバーからデベロッパーツールを開くよりも高速に開くことができるので検証したい要素がはっきりしている場合はコンテキストメニューから「要素の検証」と覚えておいてください。このレッスンでは開発環境の準備とデベロッパーツールの使い方について紹介しました。

jQuery APIでWebサイトを演出しよう

jQueryはJavaScriptを効率良く記述することができる、世界中で広く使われているライブラリです。APIとは外部のウェブサービスを自分のサイト内で利用できる仕組みのことです。このコースではjQueryやAPIの基本を学習したのち、jQueryのプラグインやGoogle APIなどの実践的な使い方について学びます。

2時間43分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年05月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。