jqGridとRuby on Rails4 でインタラクティブなCRUDアプリケーション作成(その1)

jqGridとRuby on Rails4 でインタラクティブなCRUDアプリケーション作成(その1)

jqGridとRuby on Rails4 でインタラクティブなCRUDアプリケーション作成(その1)

jqGridとRuby on Rails4 でインタラクティブなCRUDアプリケーション作成(その1) への2件のコメント

はじめに

Webアプリケーションフレームワークで、自動生成可能なページ遷移型のCRUDアプリケーションではなく、一旦ページ表示したら、そのページから移動せず、CRUD処理をすべて完了してしまうようなインタラクティブなWebアプリ(俗に言うSPA)の構築方法についてお話します。今回はクライアントに jQuery/jQueryのグリッドコンポーネントとしてメジャーなjqGridを利用し、通信はjQueryのajax機能を利用します。サーバーサイドはRuby2.0とRails4.0の構成となります。また、記載したソースコードはgithub上のパブリックリポジトリに公開しますので、興味のある方は、ダウンロードして、お手元で試してみることも可能です。

Rails 新規プロジェクト作成、GitHubにPush

事前準備として、ご自身のGitHubに リポジトリを作成しておく必要があります。
今回は リポジトリ名:jqgridrails としてリポジトリを作成しました。

EclipseにRailsプロジェクトを取り込む

ファイル>>新規>>プロジェクト

一般>>プロジェクトを選択
新規プロジェクト _004

既にローカルにあるフォルダ名をプロジェクト名とする。
新規プロジェクト _005

プロジェクト>>プロパティ>>プロジェクト・ネーチャー

Railsにチェックを入れる。
jqgridrails のプロパティー _006

Railsサーバー作成
名前:jqgridrails
プロジェクト:jqgridrails
Host/IP:127.0.0.1
ポート:3000

rails-server

Railsサーバーテスト起動

起動するとエラー

あらめて起動
http://localhost:3000 で動作確認できます。

一旦コミットして、Pushしておく

Sectionマスターを作ろう!

eclipse でdatabase.ymlを 自身のmysql環境に書き換える。データベースの接続情報はセキュアに扱いたいので、.gitignoreにdatabase.ymlを追記。

コントローラーを作ろう

一般的なCRUDではなく、AjaxでSPAを作成するので、初期ページ表示用のindexメソッドと、更新用のupdateメソッドのみ指定

モデルを作ろう!

モデルを作る前に、Railsではデフォルト、sqliteを利用するようになっているので、mysqlを利用するように変更する。まずはGemfileの ‘sqlite3’の行をコメントアウトし、 ‘mysql2’の行を追記する。

Gemfileにmysql2を追記

モデル sectmastの自動生成

データベースにテーブルを作成しよう

モデルの作成時にマイグレーションファイルというのが自動的に作成される。
db/migrateフォルダに出来た migrationファイルを修正する。
修正内容は sectcd/sectnameの追加。

テーブル作成実行!

クライアントサイドで必要な、JavaScript、StyleSheetをコピー

jquery / jquery UI / jqgrid 関連のJavaScript、StyleSheetをコピー
コピー先は app/assets/javascripts & app/assets/stylesheets

addJsStyle

動作確認

では、一旦動作確認

Eclipseより、Railsサーバーを起動します。

ブラウザーで http://localhost:3000/sectmasts/index で以下のような空っぽのページが表示されればOKです。
Jqgridrails - Chromium_002

テストデータ投入

一覧画面(HTML)作成

view/sectmasts/index.html.erb

内容は以下

メインとなるJavaScript作成

app/assets/javascripts/sectmasts-main.jsを作成

全データを読み込むロジックを実装(Ruby)

作成したRubyのメソッドに対応するルートを追記

config/routes.rb

application.jsの調整

jQueryは自前で用意したので、それを利用するように変更。jquery_ujs はとりあえず、外しておく。
変更部分のみ抜粋

app/assets/javascripts/application.js

変更前

変更後

動作確認!!

以下のように jqGridにテストデータが一覧されれば、めでたしめでたし。
まだまだ、いい加減な実装ですので。次回からもう少しまともにしていきましょう。

Jqgridrails - Chromium_003

githubへプッシュ

このリソースはPublicリポジトリとして公開していますので、以下のURLでソースを確認できます。
https://github.com/h-mito/jqgridrails.git

次回へ続く。。。。


About the author:

Related Posts

2 Comments

  1. tkc  - 2014年4月9日 - 8:08 PM
    返信 /

    素晴らしい!その2がないのが残念です。

    • hiro  - 2014年4月9日 - 11:22 PM
      返信 /

      コメントありがとうございます。
      その2書かなきゃとは思ってるんですがね・・・
      メニューにあるBizのところをクリックしていただいたら、jqGridでどんなことが出来るよってのは
      大雑把に分かっていただけるかと思います。
      気が向いたら その2も書いてみますので、気長にお待ちください。

Leave a comment

Back to Top