SHOEISHA iD

パスワードを忘れた場合はこちら

※旧SEメンバーシップ会員の方は、同じ登録情報（メールアドレス＆パスワード）でログインいただけます

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

講座

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

大西 武

中島 佑馬

株式会社ソラコム

WINGSプロジェクト 山田 研二

柳井 政和
イベント
イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

講演資料・動画まとめページ

Developers CAREER Boost 2024 講演資料まとめ

Developers X Summit 2024 講演資料まとめ

Developers Summit 2024 KANSAI 講演関連資料まとめ

Developers Summit 2024 Summer 講演資料まとめ

Developers Boost 2024 講演資料まとめ

Developers Summit 2024 講演資料まとめ

CodeZine BOOKS（コードジン・ブックス）は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
Script.aculo.usで作成するビジュアルなWebページ

Script.aculo.usで、ビジュアルなWebページを作成しよう

Script.aculo.usのGUI系コンポーネントの基礎

  • X ポスト
  • このエントリーをはてなブックマークに追加

　JavaScriptによるビジュアルな仕掛けを自分のサイトでも使いたい、と思っているあなた。簡単で機能豊富なオープンソースのJavaScriptライブラリ「Script.aculo.us」を導入してみませんか？

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

　Ajaxの登場によりJavaScriptへ多くのWeb開発者の注目が集まって以降、JavaScriptは、クールなWebページを作る上でなくてはならないものとなってきています。特に、ビジュアルな表示や効果を実現するためには、JavaScriptは今や不可欠のものといってよいでしょう。以前は、こうしたものをJavaScriptで実装するには気の遠くなるコーディングが必要でしたが、現在は多数のJavaScriptライブラリが登場し競い合っています。JavaScriptを手軽に導入したい、という人には夢のような時代となった、といってよいでしょう。

　が、あまりに多くのライブラリが登場したため、果たしてどれを使えばいいのか、よく分からなくなってしまった、という人も多いでしょう。また、機能を高度化するあまり、使い方がひどく難しくなってしまっているライブラリもあります。比較的簡単に、しかも効果的なビジュアルを作成できるライブラリはどれなのか、悩んでいる人も多いのではないでしょうか。

　もし、便利なGUIや、ビジュアルを支援する各種の視覚効果などをJavaScriptで実現したい、と考えているなら、「Script.aculo.us」は非常によい選択肢です。本記事では、Script.aculo.usに用意されている主な機能の使い方を紹介し、どれだけ手軽に高度なGUIを実現できるのか体感してもらいたいと思います。

対象読者

  • JavaScriptで高度なGUIを簡単に組み込みたいと思っているデザイナ。
  • JavaScriptの基本は分かっているけれど、本格的なコーディングにはちょっと自信がないという人。
  • JavaScriptで何ができるのか、とりあえず見てみたいと思う人。

Script.aculo.usとは？

　今回、利用するScript.aculo.usというライブラリは、その名の通りscript.aculo.usというサイトで開発配布されているフリーのJavaScriptライブラリです。このScript.aculo.usというライブラリ、「あまり聞いたことがないな」と思った人もいるかも知れませんが、Rubyのフレームワーク「Ruby on Rails」や、PHPのフレームワーク「CakePHP」といったものでサポートされていることもあって、実は意外に広く使われています。

　本記事執筆時点で、最新バージョンは1.8.2となっています。まずは、ダウンロードページにアクセスし、ライブラリファイルをダウンロードしましょう。

図1　ダウンロードページから、Zipファイルをダウンロードする。
図1　ダウンロードページから、Zipファイルをダウンロードする。

　ページ中央の「current version」から、最新版をダウンロードできます。Windowsでの利用なら、Zipファイルをダウンロードすると良いでしょう。ダウンロードした圧縮ファイルを展開すると、フォルダ内に「src」というフォルダが作成されます。このフォルダの中に入っているJavaScriptファイルが、Script.aculo.usの本体です。これを自分のWebサイトにコピーし、HTMLから読み込むことで使えるようになります。

　ただし！ これだけではまだScript.aculo.usは使えません。Script.aculo.usは、内部でprototype.jsライブラリを使用しています。従って、prototype.jsもWebサイトにコピーしてやらなければいけません。といっても、わざわざprototype.jsをサイトからダウンロードしてくる必要はありません。Script.aculo.usのフォルダ内にある「lib」フォルダの中に、prototype.jsが用意されています。これをそのまま使ってください。

ファイルとフォルダ構成を整える

　ここでは、例としてWebサーバーの公開ディレクトリに「jsapp」というフォルダを作成し、ここにファイルを配置することにします。このフォルダ内には、次のようなフォルダを用意しておきます。

jsappのサブフォルダ
フォルダ 説明
「js」フォルダ JavaScriptファイルの配置場所。ここに、Script.aculo.usのファイル類とprototype.jsを配置しておきます。
「css」フォルダ スタイルシートの配置場所。
「img」フォルダ イメージファイルの配置場所。

　ここに、各種のファイルを配置していくことにしましょう。まずは、基本となるものとして、「jsapp」内に「index.html」を、そして「css」内に「style.css」をそれぞれ用意しておくことにします。それぞれのファイルの内容は、次のようにしておきましょう。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Script.aculo.us</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="./js/scriptaculous.js"></script>
</head>
<body>
<h3 class="title">Script.aculo.us sample</h3>

※サンプルのindex.html。ここに試験用のコードを書く。

</body>
</html>
style.css
@CHARSET "utf-8";

h3.title {
    padding-left:10px;
    color: #FFFFFF;
    background-color : #000099;
}

　Script.aculo.usを利用する場合には、<script>タグで2つのファイルを読み込みます。1つは「prototype.js」、もう1つは「scriptaculous.js」です。それ以外のJavaScriptファイルは、<script>タグで読み込む必要はありません。また、Script.aculo.usでは、HTMLのタグを利用して機能を組み込むことが多いため、タグの表示を指定するためのCSSファイルを用意するのは基本といってよいでしょう。いちいち個々のタグに直接スタイルを記述していくのは、あまりスマートなやり方とは言えませんから。

　また、いずれも文字エンコーディングが「UTF-8」に設定されていますね。日本語を扱うことを考え、ここではすべてのファイルのエンコーディングをUTF-8で統一して作成することにします。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ドラッグ項目を作る

NEXT

この記事は参考になりましたか？

  • X ポスト
  • このエントリーをはてなブックマークに追加
Script.aculo.usで作成するビジュアルなWebページ連載記事一覧
この記事の著者

掌田 津耶乃（ショウダ ツヤノ）

三文ライター＆三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事

この記事は参考になりましたか？

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine（コードジン）
https://codezine.jp/article/detail/3495 2009/02/20 14:00
" ); }

おすすめ

アクセスランキング

  1. 1
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計 NEW
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    「CentOS Stream 10」発表、Linuxカーネル 6.12 LTSを搭載 NEW
  4. 4
    AppleがSiriとChatGPTを統合、Apple Intelligence強化
  5. 5
    【超時短テクニカルライティング】生成AIを活用してドキュメントを書く流れを掴もう！
  1. 6
    Google、XRデバイス用OS「Android XR」発表 NEW
  2. 7
    フロントエンドの定番ライブラリ「React」バージョン19の新機能を紹介──アクションによる非同期処理の進化 NEW
  3. 8
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  4. 9
    「CUDA」　～マンガでプログラミング用語解説
  5. 10
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説

アクセスランキング

  1. 1
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計 NEW
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    「CentOS Stream 10」発表、Linuxカーネル 6.12 LTSを搭載 NEW
  4. 4
    AppleがSiriとChatGPTを統合、Apple Intelligence強化
  5. 5
    【超時短テクニカルライティング】生成AIを活用してドキュメントを書く流れを掴もう！
  6. 6
    Google、XRデバイス用OS「Android XR」発表 NEW
  7. 7
    フロントエンドの定番ライブラリ「React」バージョン19の新機能を紹介──アクションによる非同期処理の進化 NEW
  8. 8
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  9. 9
    「CUDA」　～マンガでプログラミング用語解説
  10. 10
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    今後生成AIとどう向き合うべきなのか？ 現場のエンジニアと研究者が最新研究事例から語り合う
  6. 6
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  7. 7
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  8. 8
    Vue.js3.4～3.5の新機能をまとめて紹介！ 新しいAPIやSSRの改善
  9. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  10. 10
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

メールバックナンバー

アクセスランキング

  1. 1
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計 NEW
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    「CentOS Stream 10」発表、Linuxカーネル 6.12 LTSを搭載 NEW
  4. 4
    AppleがSiriとChatGPTを統合、Apple Intelligence強化
  5. 5
    【超時短テクニカルライティング】生成AIを活用してドキュメントを書く流れを掴もう！
  1. 6
    Google、XRデバイス用OS「Android XR」発表 NEW
  2. 7
    フロントエンドの定番ライブラリ「React」バージョン19の新機能を紹介──アクションによる非同期処理の進化 NEW
  3. 8
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  4. 9
    「CUDA」　～マンガでプログラミング用語解説
  5. 10
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説

アクセスランキング

  1. 1
    ランサーズ、「2024年必要とされたスキルランキング」を公開。「Lancers」上のデータを集計 NEW
  2. 2
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  3. 3
    「CentOS Stream 10」発表、Linuxカーネル 6.12 LTSを搭載 NEW
  4. 4
    AppleがSiriとChatGPTを統合、Apple Intelligence強化
  5. 5
    【超時短テクニカルライティング】生成AIを活用してドキュメントを書く流れを掴もう！
  6. 6
    Google、XRデバイス用OS「Android XR」発表 NEW
  7. 7
    フロントエンドの定番ライブラリ「React」バージョン19の新機能を紹介──アクションによる非同期処理の進化 NEW
  8. 8
    2024年の提示年収が高いプログラミング言語は？ paiza調査によるランキングが発表
  9. 9
    「CUDA」　～マンガでプログラミング用語解説
  10. 10
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  1. 1
    いいエンジニアになるための2つのポイント ──元Google技術者・石原氏が説く「シリコンバレー流ソフトウェア開発術」
  2. 2
    「CUDA」　～マンガでプログラミング用語解説
  3. 3
    ITエンジニア本大賞2025、投票締切直前！ みんなで選んだ歴代の大賞本を振り返って一挙紹介
  4. 4
    デスクトップアプリを開発しよう！ 「Rust」と「Tauri 2.0」の基本情報と環境整備の仕方を解説
  5. 5
    今後生成AIとどう向き合うべきなのか？ 現場のエンジニアと研究者が最新研究事例から語り合う
  6. 6
    2024年12月に開催される注目のITエンジニア向けカンファレンス5選
  7. 7
    日本在住の英語を話すソフトウェア開発者、年収の中央値は950万円に
  8. 8
    Vue.js3.4～3.5の新機能をまとめて紹介！ 新しいAPIやSSRの改善
  9. 9
    VSCodeをドキュメント作成に活用――テキストエディタ、Markdownエディタの設定と拡張機能を解説
  10. 10
    Python 3.13の新機能、対話型インタプリタの機能強化や高速化などを解説