![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
JavaScriptによるWeb開発，Androidアプリケーション開発（目次）
【概要】JavaScriptプログラミングとWeb開発について説明している．主要なトピックとして，単体でのJavaScriptプログラムの作成と実行，jQuery等を利用したWebアプリケーション開発，HTML/CSSの基本，サーバーサイドJavaScript，GoogleMaps API，CoffeeScript，Androidアプリケーションなどをカバーしている．各トピックについて，開発環境のセットアップから具体的な実装例まで詳細に解説されている．特に，EclipseやAptana Studioなどの開発環境の利用方法，jQuery UIを用いたインタラクティブな要素の実装，Android SDKやNDKの使用法，Ruboto，SL4A，RhoMobile Suiteなどの異なるAndroidアプリケーション開発フレームワークの紹介など，実践的な内容が豊富に含まれている．また，WindowsとUbuntuの両方のプラットフォームでの開発手順が説明されており，幅広い開発者のニーズに対応している．
JavaScript プログラミングの実践
JavaScript プログラムを作成し、実行してみる．
- jQuery を用いてテーブルの行に配色
- 強調表示 (jQuery と jQueryUI を使用)
- 画像をオーバーレイ表示 (jQuery と ColorBox を使用)
- 背景画像の全画面表示を行う (jQuery と supersized を使用)
- 背景画像の全画面表示を行い、ヘッダーとフッターを置く (jQuery と supersized を使用)
- Rhino を使った JavaScript プログラミング
Rhino は Java で実装された JavaScript 処理系. Java との連携が容易.
- 対話型での処理
- メッセージ表示
- 変数と式
- 関数定義
- Java のメソッドを使う
- JSONへの変換
Web開発のためのJavaScriptとjQueryの活用
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, スタイルシートの例
- 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 の解説記事は 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
サーバーサイドJavaScriptの開発環境と実践
【関連する外部ページ】 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
Google Maps APIを活用した位置情報サービスの開発
- Google Street View Image API を使ってみる
- Google Maps JavaScript API v3 を使ってみる
- Google Maps API を使ってみる
- Google Maps API を使って地図を表示してみる
- Google Maps API を使って地図上の緯度，経度を得る
CoffeeScriptによるJavaScript開発
Androidアプリケーション開発（Android SDK, NDK, Ruboto, SL4A, rhodes, RhoMobile Suite）
インストール
Windows 編
* Windows での，Android Studio 3.5 のインストール，Android 仮想デバイスの作成，プログラムの起動という一連の手順は，別ページ »で説明
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
SL4A
- Android に sl4a をインストールしてみる
- sj4j のダウンロードとインストール
- sj4j で各種インタプリタのインストール
- Rhino 1.7R2 を使ってみる
- BeanShell 2.0b4 を使ってみる
- JRuby を使ってみる
- アンドロイド・デバッグ・モニタを使って、スクリプトのディレクトリを確認する
- Android sl4a のプログラムを作成してみる
- Eclipse で Android sl4a のプログラムを作成してみる
RhoMobileSuite, rhodes
- 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 アプリケーションの実行