jQueryで動きのあるページを作ろう♩Webデザインで自己肯定感もアップ！
まず、jQueryってなあに？って思ったあなたにはこちら ↓
jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。 jQuery – wikipedia
例えば、以下のアーティスティックな動きのあるページはJavaScriptで出来ています。
とってもきれいですよね！
これはプログラマーが作ったものですが、「Fork」すれば自分のものとして使う事が出来ます。
いくらフォークできても、やはりそこには著作権が存在することを忘れてはいけません。
著作者の意向を一番に尊重した上で使う様にした方がいいです。
Readmeファイルを必ず読んで使う必要性があります。どのプログラムでもそうする必要があります。
ライブラリとは
けれどもソースコードは複雑で多種多様なので、大抵のものは「ライブラリ」として公開されています。
だからほとんどの場合、勝手に使わせて頂く事が可能です。多くの人は難しいコードを覚えたいと思いませんから。。
そして このコードが少しでも解る様になれれば、アレンジして自分のものとしてライブラリに登録することもできます。
初心者の方は、一から勉強したいかもしれませんので、公式サイトも紹介しておきます。
What is jQuery ? https://jquery.com/
「canvas」 とは
少し話が戻りますが、jsdo.itの公開ソースにある 「canvas」についても少し触れていきます。
端的に説明すると、HTML5で使用する「JavaScript」 の 「canvas要素」です。
HTML5についての説明が必要であれば、こちらに記事を投稿していますので ご一読ください。
つまり、HTML5の中に自由に描画できる領域を作成するというAPIです。
（＊APIについて不明な場合は、前回の記事を参照ください）
APIは簡単にサービスが作れるプログラムでしたが、今回は静止画像を要素で定義して貼付ける手法として使われています。
HTML5といえばレスポンシブデザインなので、レスポンシブデザインについて再度復習しておく必要があるかもしれません。
デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。-Wikipediaより引用
jQueryは「JavaScript」と呼ばれるスクリプト言語で、Canvasとは違って「動的スクリプト」と呼ばれるものです。
「Java」というプログラミング言語もありますが、それとは別物です。ややこしいのですが、よく混同されるので、頭に入れておく必要があります。
もしあなたがホームページを開設したのであれば、今すぐにでもライブラリからソースを読み出しすることもできるという訳です。
それぞれのスクリプトを扱える様になれれば、今すぐにでもフロントエンドエンジニアの一スキルとして経歴書に書くことができます。応募できる会社が増えます。
サンプルデモ ：ParticleJS-master
初心者に朗報
「Particle Develop」という専用のデザインツールがICSさんにて公開中です。
こちらを使うとHTMLソースにコピペすることで、簡単に華やかな表現をサイトに導入することができます！
私的にはいつまでも公開されているのが不思議なぐらい有料級ツールだと思います。
株式会社ICS 野原 のぞみさんという方が開発された素敵なサービスの様なので
感謝して無料で利用させていただきましょう！！^_^
https://ics.media/entry/11172/
私も実際にアプリ用のプロフィールとして自分の画像と組み合わせて使っています。
作り方については、また後日シェアさせていただきたいと思っております。
既に出来たよ！という方はぜひご報告くださいませ。^_^♪
今日も最後までお読み頂きありがとうございました。