RSSはこちら

ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。 ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。
  • --⁄--⁄--(--)
  • --:--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄09⁄19(Sat)
  • 12:09

HKDではjavascriptライブラリ「jQuery」を使っています

タイトルのまんまなんですが、うちのテンプレートではjQueryを使っていろいろと子ネタを仕組んでいます。

・アンカーリンクのスムーズな移動
・IE6に透過pngを指定
・コメント入力フォームのデザイン
・スムーズな開閉メニュー

などを動作させるためにjQueryを使っています。

WEBに詳しい人なら一度はきいたことがある名前だと思います。
jQuery自体の使い方はいろんなWEBサイトで紹介されているので、ここではどういうところがいいのかなどを書きたいと思います。
WEBやHTMLついてあまり詳しくない人はいきなり専門用語が出てきて( ゚д゚)ポカーンだと思うので、まずは簡単な用語説明から・・・

【javascript】
ブラウザ上で動作するプラグラム言語。
<script type="text/javascript">
alert("Hellow!")
</script>

こんな感じの文章をHTML内に見かけた事があると思います。これがjavascriptのプログラム文です。
HTMLでは文字を表示するだけですが、そこにjavascriptのプログラムを組み込むことで、文字を動かしたり自動的に色を変更したり、HTMLだけでは表現できないいろんな事ができるようになります。

【javascriptライブラリ】
javascriptで記述したいろんな機能の集合体です。
プログラムの勉強をしたことがある人なら、関数やメソッドの集合体というほうが分かりやすいかもしれません。
javascriptの記述をライブラリとしてあらかじめまとめておいて、必要な時にそれぞれを呼び出して使う・・・といった雰囲気でしょうか。
数十行、数百文字からなるプログラムの記述を、たったの数文字で呼び出して実行できるようにる・・・という感じです。
そのまとまりをいくつもいくつも用意したのがjavascriptライブラリーと呼ばれます。
他にもjavacriptフレームワーク、ajaxライブラリ、ajaxフレームワークなんて呼ばれるかもしれません。

【jQuery】
javascriptライブラリの種類の1つです。
javascriptライブラリにはいろんな種類のものがあります。
例:prototype、Yahoo UI Library、MooTools、Spry、script.aculo.us、他にも色々

【Ajax】
Asynchronous JavaScript + XMLの略で「エイジャックス」と読みます。
プログラムはjavascriptで記述しますが、これはプログラム言語ではなく、1つの技術名というと分かりやすいかもしれません。
詳しくは次のページが参考になります。

いまさら聞けない、“Ajax”とは何なのか?@IT
http://www.atmarkit.co.jp/fwcr/rensai/imasara03/imasara03_1.html

上のリンク先でも、1つのアプローチ方法というふうになっていますね。





さて、ここからやっと本題なんですが・・・
javascriptライブラリが登場するまでjavascriptって使いづらいものでした(個人談)
なぜかというと理由は二つ、ブラウザによって挙動が違うのと、DOMの仕組みが理解しにくいの二つです。
この二つの理由により新しく勉強するのを敬遠してました。

今回、ブログテンプレートを作るにあたりjQueryを導入して本当に驚きました。
ブラウザの違いを気にすることなくプログラミングできて、jQueryのセレクタをつかって簡単に目的のHTML要素にアクセスできます。
そしていろんな方がプラグインを公開してくださっているので、自分の目的にあったプラグインを導入して簡単に大きな効果を生み出すことができます。

javascriptを使いすぎるとWEBページの表示が遅くなったりする・・・と思っていましたが、そういうこともなく快適に使えています。閲覧が遅い一番の問題はクライアント側よりFC2のサーバー側にあると思います。


Ajaxには非同期通信というのがあります。ブラウザのページリロードなしにWEBページの内容を更新する非同期通信というのがAjaxのおおきな醍醐味なわけですが、私の場合はそっちよりも、javascript全体が使いやすくなっているという所に大きなメリットを感じました。

jQueryを使って簡単にHTMLにアクセスできるので、ただいまちょっとしたものを作っています。
Ajaxの目玉の非同期通信を使って外部からのテキストをブログ内に表示しようと思います。
現在8割がた完成しているので、完成したら自分のブログで報告したいとおもいます。
関連記事
スポンサーサイト
category
カスタマイズ > その他カスタム
tag
jQueryjavascript
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/18-a0c08cff

検索フォーム

プロフィール

HKD TEMPLATE


Author:
 Hellow
mail:
 hkdesign.mail☆gmail.com
 ☆を半角@に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ!
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
1441位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
15位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。