CreateJS実践講座

CreateJSのダウンロードと設定

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CreateJSライブラリのダウンロードと読込み方をご紹介します。
講師:
05:59

字幕

このレッスンでは CreateJS のライブラリの ダウンロードの仕方や その設定の仕方をご紹介します CreateJS を ダウンロードするサイトは Google で検索すれば すぐに見つかるでしょう 「 CreateJS 」としますと もうすでに出ていますね 2番目が CreateJS の ライブラリの中の 「 EaselJS 」という ダウンロードサイトの様です ちなみに一番上は 私が Web で前に連載していた タイトルです こちらの「 EaselJS 」に行ってみます 「 EaselJS 」の ダウンロードサイトが出てきました 「 DOWNLOAD 」をクリックします ダウンロードにはいくつか方法があります 「 CDN 」と言うのを使う方法と 普通にダウンロードする方法と まず 普通にダウンロードする場合には 下にスクロールすると CreateJS とは 複数のライブラリを持っている スイート製品です その中心となるのが EaselJS なんですけれど 他に Tween を扱う 「 TweenJS 」 「 SoundJS 」「 PreloadJS 」 などがあります ダウンロードする場合は それぞれについて Zip ファイルをダウンロードする これをクリックすれば Zip ファイルがダウンロードされます 実際に使うのは 上の方の CDN を使うのですけれども ダウンロードした場合にどうなるか お見せしましょう ダウンロードした Zip ファイルを 解凍すると 「 EaselJS-0.8.0 」 という フォルダが出来上がります もっとも この「 0.8.0 」は バージョン番号ですので もし バージョンが改められれば この番号も変わってきます その中で 実際に コーディングに使うのは 「 lib 」というフォルダです ファイルは複数ありますけれど 通常使うのは 「 easelJS-0.8.0.min.js 」 このファイルを使えば結構です このファイルを ライブラリ用のフォルダを1つ決めておいて そこに入れます アップロードする場合も同様です 他のライブラリについても 同じ様にダウンロードして 「 lib 」とか決まった名前の フォルダに入れておけば結構です 例えば Tween であれば 「 tweenjs-0.6.0.min.js 」 というファイルを同じ様に使います ライブラリを使うもう一つの方法 CDN というのは 「コンテンツデリバリーネットワーク」 の略です これは手元 あるいはサーバーに ライブラリを ダウンロードして 直接 置くのではなくて サイトから直接 ライブラリを持ってきます ですから 手元にも ご自分のサーバーにも ライブラリをおく必要がありません 手軽ですので こちらの方法を使いたいと思います ダウンロードした場合も CDN を使う場合も いずれも html ドキュメントの スクリプト要素を読み込む必要があります そして その読み込んだ スクリプト要素の中に このコピーした CDN を 使うことになります 「 COPY CDN URL 」 これをクリックします すると「コピーされました」 と出てきますので これで結構です html ドキュメントの方に移りましょう html ドキュメントを Dreamweaver で開きました 設定はほとんど無いような状態です CreateJS ではキャンバスを使うので キャンバスに対するスタイルの 設定だけが加えてあります もっとも キャンバス自体の 要素がありませんので これは今の所 効果がありません では スクリプト要素を読み込みます ここにスクリプト要素を加えて そして ソースです もし ダウンロードしてあるなら そのダウンロードしたフォルダ その中のライブラリの名前を 指定するわけですけれども 先ほどは CDN をコピーしました ということは ここにペーストすれば良い ということになります URL が入りました そうしたら これを閉じて 結構です 本当に読み込まれているかどうか 少し不安を感じている方もいるでしょう そういう疑り深い方は プログラマに向いています 確かめましょう アラート関数で確かめることにします スクリプトを書く場所が すでに用意されていますので このスクリプト要素の中に 「 alert 」です 何を確かめるかと言うと 今 細かい内容が分からなくても結構ですが CreateJS を読み込まないと 使えないクラスの オブジェクトを作ればよい ということです オブジェクトを作るときは 「 new 」です 「 createjs 」これは必ず クラスの前に付くことになっています 「 shape 」というクラスがあります これで「 shape 」という クラスのオブジェクトが もし ちゃんと CreateJS が 読み込まれていれば 作られるはずです 確認してみましょう ファイルを一旦保存して ブラウザでプレビューします Google Chrome で見てみましょう アラートが出てきました ちゃんと「 shape 」という オブジェクトの名前が付いています これが出れば OK です このレッスンでは CreateJS のライブラリの ダウンロードの仕方と その読み込み方をご紹介しました ダウンロードには2つ方法があって 手元に ローカルに Zip ファイルをダウンロードして展開する それを読み込むという方法と CDN からサイトから 直接 持ってきてしまう方法の 2通りあるので CDN での読み込み方をご紹介しました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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