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 のプログラムを実行してみます

  VJet のページ: https://projects.eclipse.org/projects/webtools.vjet

  この 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 の素晴らしい解説記事は https://ascii.jp/elem/000/000/498/498710/index-2.html

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

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

レイアウト

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

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

画像ギャラリーの例

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

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

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

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

  jQuery, JQueryUI の見本を兼ねる

• Date Picker (jQuery と jQueryUI を使用)
• jQuery UI のボタン

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

【外部ページへのリンク】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.
• 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 3.5 のインストール，Android 仮想デバイスの作成，プログラムの起動という一連の手順は，別ページ »で説明

• 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仮想マシンを生成、開始できるプラグイン

• 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 で Aptana Studio を使って RhoMobile アプリケーションを実行してみる

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

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

redis

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

PhoneGap

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

MIT App Inventor

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

Windows ガジェット

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