JavaScript と JQuery による Web プログラミング

JavaScript プログラミング

単体で JavaScript プログラムを作成し、実行してみる．

• Rhino を使った JavaScript プログラミング

  Rhino は Java で実装された JavaScript 処理系. Java との連携が容易.

  • 対話型での処理
  • メッセージ表示
  • 変数と式
  • 関数定義
  • Java のメソッドを使う
  • JSONへの変換

JavaScript, JQuery を使う Web アプリケーション

JavaScript, JQuery を使う Web アプリケーションの開発環境

• Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET あり)

  Eclipse JSDT は，HTML ファイルの中に JavaScript プログラムを書くときに便利な開発環境.　VJET とは，コードアシスト, コード検索, 構文チェックと意味チェックなどの機能を持つ Eclpse のプラグインです．Eclipse で JavaScript のプログラムを実行してみます

  この Web ページで行うこと

  • Web Development Tools, JSDT のインストール
  • Eclipse で VJET のインストール
  • 静的 Web プロジェクトの新規作成
  • JavaScript ファイルの新規作成
  • VJET の設定
  • Web ブラウザでの表示
  • JavaScript プログラムと実行結果例

• Eclipse を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる (VJET 無し)

  Eclipse JSDT は，HTML ファイルの中に JavaScript プログラムを書くときに便利な開発環境.　 Eclipse で JavaScript のプログラムを実行してみます

  • Eclipse で Web Development Tools, JSDT のインストール
  • 静的 Web プロジェクトの新規作成
  • JavaScript ファイルの新規作成
  • Web ブラウザでの表示
  • JavaScript プログラムと実行結果例

• Aptana Studio 3 を用いて JavaScript, JQuery を使う Web アプリケーションを実行してみる

  AptanaStudio は，HTML ファイルの中に JavaScript プログラムを書くときに便利な開発環境.　

  • Web プロジェクトの新規作成
  • JavaScript ファイルの新規作成
  • Web ブラウザでの表示
  • JavaScript プログラム例

• http://getfirebug.com/

HTML, スタイルシートの例

※配色については http://kuler.adobe.com/ が便利

• HTML ヘッダと css の例
  • ソースコード，キーボード操作，出力の例（サンプル）の HTML タグ
  • スタイルシートを用いた色，フォント、枠などの調整
  • スタイルシートを別ファイルにする場合の HTML ヘッダの記述例

• css を用いたヘッダー，フッターの例

  css を使って，Web ページの中にッダーとフッターを置きます．

• css を用いた要素の幅と高さの設定例

JavaScript, jQuery の例

• JavaScript を用いたポップアップの例
  • HTML ファイル内のJavaScript プログラムの書き方
  • JavaScript のプログラム例

• JavaScript を用いた日時の表示

  JavaScript を使う HTML の例として、HTMLファイルの中に JavaScript プログラムを書く場合と、 HTML ファイルと、JavaScript ファイルを分ける場合を説明します。

• jQuery のセレクタの例

• jQuery のサンプルプログラム

JavaScript, jQuery, 関連プラグイン等の例

※ jQuery の素晴らしい解説記事は http://ascii.jp/elem/000/000/498/498710/index-2.html

※ jQuery や JavaScript 等に関する素晴らしい情報は http://alphasis.info/jquery-api/forms/

jQuery については、http://jquery.com

レイアウト

• スタイルスイッチの例

  MITSUE-LINKS JavaScript Library スタイルスイッチを行います

  • スタイルスイッチを使って文字サイズを変える
  • スタイルスイッチを使って色を変える

• 子要素の高さをそろえる

  MITSUE-LINKS JavaScript Library を用いてを子要素の高さをそろえます

• jQuery を用いてテーブルの行に配色

• 強調表示 (jQuery と jQueryUI を使用)

• 画像をオーバーレイ表示 (jQuery と ColorBox を使用)

  jQuery と ColorBox を用いて，画像をオーバーレイ表示します．

• 背景画像の全画面表示を行う (jQuery と supersized を使用)

  jQuery と supersizedを利用して， ブラウザ画面いっぱいに背景画像を表示することを行います．

• 背景画像の全画面表示を行い、ヘッダーとフッターを置く (jQuery と supersized を使用)

• 背景画像の全画面表示を行う (JQuery Backstretchを利用)

  jQuery と JQuery Backstretchを利用して， ブラウザ画面いっぱいに背景画像を表示することを行います．

画像ギャラリーの例

• Cloud Zoom を用いた画像のズーム表示

  jQuery と Cloud Zoomを利用して， 画像のズーム表示を行います．

• 画像のスライドショー (Explosure を使用)

  jQuery と Explosure を用いて， 画像表示を行っています． 　スライドショウの機能もあります．

JavaScript + jQuery / jQuery UI を用いたフォームの例

• スライダー (jQuery と jQueryUI を使用)

  jQuery, JQueryUI の見本を兼ねる

• Date Picker (jQuery と jQueryUI を使用)

• テーブル・ソーター

• jQuery UI のボタン

• フォーム HTML ファイルのサンプル

  次のことを行う HTML ファイルの見本の説明を行います．

  • table タグを使い，フォームを整形

  • フォームのヒントの表示と、妥当性の検証（バリデーション） (JQuery Form Validation And Hints を使用)

    jQuery と JQuery Form Validation And Hintsを利用します．

  • テキストエリア（フォーム部品）の高さの自動拡大

    jQuery と Elastic を利用します．

• JQuery Form Validation And Hints

• テキストエリア（フォーム部品）の高さの自動拡大

JavaScript と JQuery UI

• jQuery UI, LINQ のダウンロード. Rails で使ってみる．
  • jQuery UI, LINQ のダウンロード
  • Rails プロジェクトの作成と JQuery UI ファイル, jquery.linq.js ファイルの組み込み
• JQuery UI を用いたドラッグ・ドロップ

threejs

• threejs を使ってパノラマ表示を行なってみる

サーバサイド JavaScript プログラム開発環境

• Eclipse を使って，JavaScript プログラムを扱ってみる

• サーバサイド JavaScript の処理系 Node.js

参考 Web ページ: http://www.keynavi.net/ja/tipsj/debug.html

参考情報

• GLUEscript: GLUEscript (Glueing Libraries Using EcmaScript) is the successor of wxJavaScript. GLUEscript uses SpiderMonkey, the JavaScript engine used in FireFox.

• JSPL:　 JSPL is a bridge between Perl and JavaScript (the SpiderMonkey engine specifically).

• JLS: Jls is a general-purpose JavaScript platform. GLUEscript uses SpiderMonkey, the JavaScript engine used in FireFox.

• JSDB: JSDB is JavaScript for databases, a scripting language for data-driven, network-centric programming on Windows, Mac, Linux, and SunOS

GoogleMaps API

• Google Street View Image API を使ってみる

• Google Maps JavaScript API v3 を使ってみる

• Google Maps API を使ってみる
  • Google Maps API を使って地図を表示してみる
  • Google Maps API を使って地図上の緯度，経度を得る

CoffeeScript

• CoffeeScript を使ってみる
• CoffeeScript の機能と文法

Android SDK, NDK, Ruboto, SL4A, rhodes, RhoMobile Suite

インストール

Windows 編

• Windows で Android Studio のダウンロードとインストールとテスト実行

  Android Studio は Google が配布している Android 統合開発環境．Android SDK Tools が同封されている．

  • JDK のダウンロードとインストール
  • Android Studio のダウンロードとインストール
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Andoid Studio の文字コードの設定

• Windows で Android SDK のダウンロードとインストールとテスト実行

  ※ ADT 組み込み済みの Eclipse が欲しい（自分で組み込むのはわりと面倒です）ときはこちら． 「Android SDK だけが欲しい」ときは、Android Studioをおすすめします

  • JDK のダウンロードとインストール
  • Android Studio v0.45 for Linux のダウンロードとインストール
  • Android Studio を起動してみる
  • Android Studio でプロジェクトの新規作成
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Android Studio でプロジェクトを実行してみる
  • Andoid Studio の文字コードの設定

• Windows で Genymotion をインストールして起動してみる

Ubuntu 編

• Ubuntu で Android Studio のダウンロードとインストールとテスト実行

  Android Studio は Google が配布している Android 統合開発環境．Android SDK Tools が同封されている．

  • Java Platform (JDK) のダウンロードとインストール
  • Android Studio v0.11 for Linux のダウンロードとインストール
  • Android Studio を起動してみる
  • Android Studio でプロジェクトの新規作成
  • Andoid Studio の文字コードの設定
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Andoid デバッグ・モニタを起動してみる
  • Android Studio でプロジェクトを実行してみる
  • Eclipse のプロジェクトのインポート

• Ubuntu で Android SDK ADT Bundle for Linux のダウンロードとインストールとテスト実行

  ※ ADT 組み込み済みの Eclipse が欲しい（自分で組み込むのはわりと面倒です）ときはこちら． 「Android SDK だけが欲しい」ときは、Android Studioをおすすめします

  • Java Platform (JDK) のダウンロードとインストール
  • Android SDK, ADT Bundle for Linux のダウンロードとインストール
  • Android SDK に付属の Eclipse の日本語化
  • Eclipse の環境設定と起動チェック
  • Eclipse で Android プロジェクトの新規作成
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Eclipse でプロジェクトを実行してみる

• Ubuntu で Eclipst と Eclipse の ADT プラグインのダウンロードとインストール

  Eclipse をインストール済みで、どうしてもそれを使いたい場合の手順．

  • Java Platform (JDK) のダウンロードとインストール
  • Eclipse のインストール
  • Eclipse の日本語化
  • Eclipse の環境設定と起動チェック
  • Eclipse ADT (Eclipse のプラグイン Android Development Tools) のダウンロードとインストール
  • Eclipse で Android プロジェクトの新規作成
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Andoid デバッグ・モニタを起動してみる
  • Eclipse でプロジェクトを実行してみる
  • Eclipse で既存のアプリケーションプログラムをインポートし，動かしてみる

• Ubuntu で Aptana Studio に ADT プラグインをインストール
  • Eclipse ADT (Eclipse のプラグイン Android Development Tools) のダウンロードとインストール
  • Aptana Studio で Android プロジェクトの新規作成
  • Andoid SDK マネージャ (SDK Manager) を用いた設定
  • Andoid 仮想デバイスマネージャ (AVD Manager) を用いたAndroid エミュレータの生成とテスト実行
  • Andoid デバッグ・モニタを起動してみる

• Ubuntu で Genymotion をインストールして起動してみる

  Genymotion は Virutal Box 上で Android 仮想デバイスを起動し操作するための各種のソフトウエア及び仮想デバイスイメージ

• Eclipse から Genymotion を使う

  Eclipse から Genymotion仮想マシンを生成、開始できるプラグイン

• houdini (書きかけ)

• Ubuntu で Android の実機の接続に関する設定

• Ubuntu で Android NDK を使ってみる
  • Android NDK のダウンロードとインストール
  • Android NDK に同封のサンプルプログラムのコンパイル
  • Eclipse に，C/C++ 開発ツール，C/C++ 開発ツール SDK, C/C++ ライブラリ API ドキュメント・ホーバー・ヘルプのインストール
  • Eclipse で Android NDK に同封のサンプルプログラムを動かしてみる
  • Eclipse で Android プロジェクトを作成し，Android NDK を使ってみる

• Ubuntu で Android NDK を使い ARM+Android で動く C プログラムをコンパイルしてみる

• Android システムを、Ubuntu 上でコンパイル (クロスコンパイル)

• Ubuntu で OpenCV for Android SDK のダウンロードとインストール (書きかけ)

• Ubuntu で OpenJDK のダウンロードとインストール

  どうしても OpenJDK を使いたいときの参考情報として載せています．

使用法

• Nexus 7 でのセンサーアプリ開発の試み（パワーポイントファイル）

• Android アプリケーションでのボタンの配置法の例

• Android アプリケーションプログラムでの画面遷移の例

• Android で JavaScript を使ってみる

Ruboto

• Ubuntu で Ruboto をインストールして起動してみる

• Eclipse を用いて Ruboto アプリケーションを開発する

SL4A

• Android に sl4a をインストールしてみる
  • sj4j のダウンロードとインストール
  • sj4j で各種インタプリタのインストール
  • Rhino 1.7R2 を使ってみる
  • BeanShell 2.0b4 を使ってみる
  • JRuby を使ってみる
  • アンドロイド・デバッグ・モニタを使って、スクリプトのディレクトリを確認する

• Android sl4a のプログラムを作成してみる

• Eclipse で Android sl4a のプログラムを作成してみる

RhoMobileSuite, rhodes

Windows

• Windows で RhoMobile Suite のインストールとテスト実行

• Windows で RhoStudio を使ってみる
  • RhoStudio を用いた RhoMobile アプリケーションの作成と起動
  • RhoStudio の Web Inspector を使ってみる
  • RhoStudio のデバッガを使ってみる

• RhoStudio で Android の GPS を動かしてみる

• Windows で RhoConnect アプリケーションを作ってみる
  • RhoStudio を用いた RhoMobile アプリケーションの作成と起動
  • RhoStudio を用いた RhoConnect アプリケーションの作成と起動
  • RhoMobile アプリケーションと RhoConnect アプリケーションの連携

• RhoStudio で Android のデバイスを扱う

Ubuntu

• Ubuntu で Rhodes のインストールとテスト実行

  Rhodes を用いて，Ruby プログラムを Android で動かす

  • Rhodes のインストール
  • RhoMobile アプリケーションのひな形の作成 (コマンドライン)
  • RhoMobile アプリケーションの各種設定
  • RhoMobile アプリケーションの起動

• Ubuntu で Rhodes を使ってみる

• Ubuntu で Aptana Studio を使って RhoMobile アプリケーションを実行してみる

  Aptana Studio とは， HTML, CSS, JavaScript, PHP, Ruby などを扱う機能をもった統合開発環境ソフトウエアです．

  • 既存の RhoMobile アプリケーションのインポート
  • RhoMobile アプリケーションの実行

redis

• Padrino で Redis をキャッシュとして使ってみる

PhoneGap

• PhoneGap を使って、簡単な Android アプリケーションを動かしてみる(書きかけ)

Titanium Studio

appcelerator は http://www.appcelerator.com/ で Windows 版, Linux 版, OS X版が配布されているので、ライセンス条項や使用条件を確認の上ダウンロード

参考: http://code.google.com/p/titanium-mobile-doc-ja/, http://titanium-mobile-doc-ja.googlecode.com/files/20100314.pdf

参考Webページ: http://gihyo.jp/dev/serial/01/titanium

• Linux で Titanium Studio のダウンロードとインストール, Android SDK の設定

• Titanium Studio を使って Titanium Mobile プロジェクトを作成してみる

MIT App Inventor

• MIT App Inventor を使ってみる
• MIT App Inventor のサンプルプログラム集

Flex

• Adobe Flash ビルダー (Adobe Flash Builder) 体験版のダウンロードとインストールとテスト実行

Windows ガジェット

• Windows 7 で Windows ガジェットを作ってみる

公開している資料等のご利用について．

クリエイティブコモンズ BY NC SAです． 資料のご利用を歓迎します． ご利用についての詳細はこちらで案内しています。