2017
07.24

jQueryで動きのあるページを作ろう♩Webデザインは自己表現!

CSS, HTML5, JavaScript

jQueryとは

まず、jQueryってなあに?って思ったあなたにはこちら  ↓

jQuery(ジェイクエリー)は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月に開催された BarCamp NYC でリリースした。様々な場面で活用されており、JavaScriptライブラリのデファクトスタンダードと呼ぶ者もいる。 jQuery – wikipedia

例えば、以下のアーティスティックな動きのあるページはJavaScriptで出来ています。

とってもきれいですよね!

これはプログラマーが作ったものですが、「Fork」すれば自分のものとして使う事が出来ます。

いくらフォークできても、やはりそこには著作権が存在することを忘れてはいけません。

著作者の意向を一番に尊重した上で使う様にした方がいいです。

Readmeファイルを必ず読んで使う必要性があります。どのプログラムでもそうする必要があります。

ライブラリとは

けれどもソースコードは複雑で多種多様なので、大抵のものは「ライブラリ」として公開されています。

だからほとんどの場合、勝手に使わせて頂く事が可能です。多くの人は難しいコードを覚えたいと思いませんから。。

そして このコードが少しでも解る様になれれば、アレンジして自分のものとしてライブラリに登録することもできます。

初心者の方は、一から勉強したいかもしれませんので、公式サイトも紹介しておきます。

What is jQuery ?   https://jquery.com/

サンプルアーカイブ(jQuery利用例)

「canvas」 とは

少し話が戻りますが、jsdo.itの公開ソースにある 「canvas」についても少し触れていきます。

端的に説明すると、HTML5で使用する「JavaScript」 の 「canvas要素」です。

HTML5についての説明が必要であれば、こちらに記事を投稿していますので ご一読ください。

つまり、HTML5の中に自由に描画できる領域を作成するというAPIです。

(*APIについて不明な場合は、前回の記事を参照ください)

APIは簡単にサービスが作れるプログラムでしたが、今回は静止画像を要素で定義して貼付ける手法として使われています。

HTML5といえばレスポンシブデザインなので、レスポンシブデザインについて再度復習しておく必要があるかもしれません。

デスクトップパソコンや携帯電話といった幅広いデバイスのいずれに対しても、外観や操作方法が最適化された (リサイズ、パンニング、スクロールを最小限にし、読みやすく、ナビゲーションしやすい) サイトを制作するためのウェブデザインの手法。-Wikipediaより引用

つまりjQueryなどの動的スクリプトとは別物です。

jQueryは「JavaScript」と呼ばれるスクリプト言語です。

「Java」というプログラミング言語もありますが、それとは別物です。ややこしいのですが、よく混同されるので、頭に入れておく必要があります。

もしあなたがホームページを開設したのであれば、今すぐにでもライブラリからソースを読み出しすることもできるという訳です。

それぞれのスクリプトを扱える様になれれば、今すぐにでもフロントエンドエンジニアの一スキルとして経歴書に書くことができます。応募できる会社が増えます。

サンプルデモ    :http://yukycohamabe.ciao.jp/demo/jquery/sample.html

jsdo.it は鎌倉にあるIT企業

私は横浜の南の方に住んでいて、鎌倉まで徒歩で行ける距離なので、東京のIT企業よりも身近に感じるのですが、 jsdo.it を提供している会社は 面白法人カヤックという鎌倉にある会社です。

サイトは無料のサービスで、エンジニアやプログラマーが貴重な(?)ソースを公開していて、それを他のユーザーがフォークすることで自分のライブラリとして利用することができます。画期的ですよね!

ただやっぱり「サービス」なので、登録者同士が仲間意識を持って繋がることで盛り上がる訳です。

jsdo.itを使いこなすコツは、やはり仲間を作ること。実践してみることです。1ヶ月も使ってみれば解ると思いますが、けっこうすんなりスキルアップできますよ!

時々カヤックさんがエンジニアを応募されていますので、興味のある方は応募してみることをおすすめします♫

今日も最後までお読み頂きありがとうございました。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。