2011年12月1日木曜日

jQuery Mobile

ブログのタイトルと少し離れるけど,ここ3回にわたってJavascriptのライブラリについて説明する.

jQuery Mobileとは

JavascriptのライブラリであるjQueryのモバイルプラットフォーム向けのフレームワークである.
HTMLの属性にjQuery Mobileで用いる属性を追加するだけでモバイル向けのページが簡単にできあがる.
動作もjQueryを用いて記述できるため開発が行いやすい.
と,基本的なことを書いたが,基本的な使い方はこの記事では記述しないので適宜調べてほしい.
また,今回の記事は1.0Beta2以降を対照としている(執筆時点での最新版は1.0 final).

jQuery Mobileでページ内のオブジェクトを動的に更新

jQuery Mobileはページを描画する段階のHTMLで動的にモバイル向けのページを生成する.
そのため,サーバからの受信したデータなどに応じてページの描画を変更する場合ちょっとしたテクニックが必要になる.

data-role="listview"の場合

以下のようなリストに対して,

このようにデータを追加する場合

以下のコードで動的に更新が可能である.

この方法は割と日本語でも解説が出てくる.

フォームの場合

例えばラジオボタンの選択状況を変更した場合,Javascriptでフォームの状態を変更しても反映されない.
対処法はフォームごとに違うため,ここではラジオボタンを例に挙げる.
そのほかの設定はこちら
HTMLが次のような場合

Check 2に対してチェックする場合,以下のコードで動的にチェック可能

すでに表示されているページを動的に変更する場合

上記の2つ以外でページを書き換えたい場合が出てくるときがある.
その場合は.trigger('create')を用いる.
以下のHTMLのdivの内容を全部書き換える場合

スクリプトは

ほんとはBeta2が出たあたりで記事にしたかったんだが,時間がとれなかったので今回記述.
ほかにも,2ペインビューを作成したが最近プラグインが出たのでこれは実装してから記事にする.
あとは,iScrollのjQuery向けプラグイン(問題あり)や,GoogleMap用のプラグインについては時間が出来たら記事にする.
次の更新はいつになることやら...

半年ぶりに更新

半年ほど,研究とバイトでなかなかまとまって書くことが出来なかったブログですが,ひさしぶりに更新.

半年分たまっていた設定を投稿を分けて記述する.

とりあえず背景として,
  • 5月〜7月までバイトに力を入れMacBook Air 13inchを購入.
  • 9月に雷の影響で自宅のサーバの電源が故障し,新規サーバを構築
  • 11月にNetduinoの存在をしり興味を持ったので購入
こんな感じで,お金が結構必要になり結構働いた.
その際に手に入れたjQuery Mobileについてと,Sencha Touchについてを次の投稿から説明したいと考え中.
あとは,Netduinoについても少し記述しようかな.

2011年4月28日木曜日

FirefoxでのVideoタグ

Firefox4でvideoタグを使って遊んでいたらいくつかつっかかったところがあったのでメモ.

ローカルのビデオファイルを再生し,canvasタグでイメージを読み込み書き換えようとした場合の問題

ローカルのビデオファイルをcanvasタグで取得し,書き換えようと実行したら,'Security error" code: "1000'が発生.
これは,ブラウザのセキュリティの問題らしくabout:configを書き換えることで対処可能.
参考:http://d.hatena.ne.jp/chiheisen/20100815/1281885412
変更箇所
security.fileuri.strict_origin_policy を false に変更

サーバーのoggファイルを再生できない

サーバーにoggのビデオファイルを配置したのはいいが今度は再生できないという問題に遭遇.
Apache 2の場合は拡張子に対して複数のMIMEを指定することで対処が可能らしい.
しかしIISではひとつの拡張子に対してひとつのMIMEしか指定できなかったので方法がわからなかった.
調べてみると,IISでも動作させている方がおり以下の設定で動作する
IIS側ではMIMEに

  • 拡張子:.ogg
  • MIME:application/ogg
を追加すればよい.
次にHTMLファイルのほうだが, とする,正しくType指定をすると動作する
参考:http://devharbor.blogspot.com/2010/06/ogv-and-html5-player-in-firefox.html

2011年4月19日火曜日

Redmineの設定

インストールができたところで次は設定
今回行う設定はLDAP連携と,Git連携である

LDAP連携

redmineに管理者でログイン

  • 設定 → LADP認証 → 新しい認証方式
  • 名称:区別がつくように
  • ホスト:LDAPサーバーのURLを指定
  • ポート:デフォルトでは389
  • アカウント:設定している場合は入力
  • パスワード:設定している場合は入力
  • 検索範囲:LDAP検索ベースの値を入力
  • 合わせてユーザを作成:チェックを入れると初回ログイン時に自動的にユーザーを追加する
  • ログイン:uid
  • 名前:cn
  • 苗字:sn
  • メールアドレス:main
後はログイン時に自動的にLDAP認証を行い,redmineにユーザーがいない場合はユーザーの追加ダイアログに移行する

Gitリポジトリとの連携

今回の環境ではGitリポジトリが配置されているのがファイルサーバーでありwebサーバーとは別に配置されている
そのため,そのままではGitリポジトリを読み込むことができない
そこで,autofsとnfsを用いて,redmineからGitリポジトリへアクセスした場合に自動でマウントする設定を行う
まず,nfsとautofsのインストールをする

# apt-get install nfs-common autofs
次にautofsの設定を行う
/mntディレクトリにアクセスした場合に自動でマウント
# echo /mnt auto.nfs >> /etc/auto.master 
マウントの設定ファイルを記述 ipaddrはIPアドレスを入力.dirにはgitが含まれるディレクトリを選択
ただし,すでにサーバーでgitが含まれるディレクトリがnfsで利用可能であることが条件
# echo "git -fstype=nfs,r {ipaddr}:{dir}
autofsを再起動
# /etc/init.d/autofs restart
後はredmineでリポジトリを参照する場合に/mnt/git/{repo_name}を参照すれば良い

Gitで詰まったところ

ここからは自分が設定で詰まったGitを参照する方法
ファイルサーバー上のgitディレクトリに空のプロジェクトを作成して裸のGitを作成する

$ mkdir new_proj
$ cd new_proj
$ git --bare init
次に,そのディレクトリ対してソースを追加する.追加するソースのディレクトリに移動
git pathには上記で作成したGitディレクトリのパスを指定
$ git init
$ git add .
$ git commit -m '{comment}'
$ git add origin {git path}
$ git push
以上

Ubuntu Server 9.10 に Redmine をインストールメモ

Redmineというプロジェクト管理ツールをインストールし,作成するプロジェクトのメモ替わりとして使ってみようと思い実際にインストールしてみたときのメモ.

環境はUbuntu Server 9.10
アップデートはすべて当てた状態
すでにApache 2, vim がインストールされていると仮定
# で始まるコマンドは管理者権限(Ubuntuで管理者権限にする場合はsudo –s)

Rubyのインストール

まずは,Redlineを動作させるために必要なrubyをインストール

# apt-get install ruby 
# apt-get install ruby1.8-dev 
# apt-get install openssl-ruby 
# apt-get install rubygems 
# apt-get install rake 
次に,Ruby on Railsをインストール
最新版のRedmine 1.1.2ではRails2.3.5が求められるのでバージョンを指定してインストール
# gem install rails -v=2.3.5
rackもインストール
バージョンは1.0.1
# gem install rack -v=1.1.2

SQLのインストール

設定のいらないSQLiteを利用する.

# apt-get install sqlite3 swig libsqlite3-dev 
# gem install sqlite3-ruby

Passengerのインストール

Ruby on Rails のアプリケーションをApache 2上で動作させるために必要なモジュール.redmine単体では必要ないが,今回はApache 2に組み込むのでインストールする

# apt-get install apache2-prefork-dev g++ libopenssl-ruby1.8 libcurl4-openssl-dev 
# gem install passenger 
PassengerのApache 2用モジュールのインストール
# passenger-install-apache2-module
注意事項を読みEnterキーを押すとインストールが始まる.
この時ビルドに必要なモジュールが足りない場合,インストールするようにメッセージが表示されるので,もし足りない場合はインストールする.
以下のような結果が表示される(一部抜粋)
・・・省略
Apache 2 にPassengerを組み込むために以下の2つのファイルを作成する
1つ目
# vim /etc/apache2/mods-available/passenger.load
記述する内容は上記のインストールの際に表示された文字列のLoadModuleの行
インストールするPCの毎に設定が違うので注意
2つ目
# vim /etc/apache2/mod-available/passenger.conf
記述する内容は上記のインストールの際に表示された文字列のPassengerRootとPassengerRubyの行
インストールするPCの毎に設定が違うので注意
また,redmaineがインストールされるエイリアスを設定する場合はRailsBaseURIを追加する
(今回は/var/wwwディレクトリの下にredmineのシンボリックリンクを貼ったので/redmineとした)
次にApache 2から追加したPassengerのモジュールを読み込むためにシンボリックリンクを貼る
最後にApaceh 2を再起動する
/etc/init.d/apache2 restart

redmineをインストール

# wget http://rubyforge.org/frs/download.php/74419/redmine-1.1.2.tar.gz
# tar -zxf redmine-1.1.2 /usr/local/bin/redmine
# mv redmine-1.1.2 /usr/local/bin/redmine
redmineのディレクトリへ移動
# cd /usr/local/bin/redmine
データベースの設定を行う
# cp config/database.yml.example database.yml
# vim database.yml
database.ymlへ記述する内容
データベースの設定とユーザ名及びバスワードを設定する
  production:
     adapter: sqlite3
     database: db/redmine.db
     host: localhost
     username: admin
     password: admin
     encoding: utf8
セッションキーの設定
# vim config/environment.rb
keyとsecretを適当に設定する.secretは30文字以上
config.action_controller.session = {:key => "_key_", :secret => "_secret_" }
データベースの初期化
# rake db:migrate RAILS_ENV="production"
データベースの読み込み
# rake redmine:load_default_data RAILS_ENV="production"
言語の設定を求められるので,自分の環境にあった言語を入力

最後にApache 2へのシンボリックリンクを作成し,ユーザ権限を一部のディレクトリに追加して終わり
# ln -s /usr/local/bin/redmine /var/www/redmine
# chown -R redmine:redmine log tmp files public/plugin_assets db/redmine.db
# chmod -R 755 log tmp files public/plugin_assets db/redmine.db

参考:http://redmine.jp/guide/RedmineInstall/

2011年3月29日火曜日

Mac OS X Server ver 10.6 Snow Leopard に Git

今回は,研究室で利用してるMac OS X ServerにGitをインストールし,その設定を行った.そのメモである.

さて,Mac OS X Serverは標準ではGitがインストールされていない.そこで,Gitの公式サイトhttp://git-scm.com/ からMAC OS XのSnow Leopardバージョンをダウンロードしてインストールする.環境に合わせたものをインストールする.

次に,クライアントからGitのリポジトリに接続できるようにする場合の設定である.インストール直後の設定ではユーザがSSH接続でGitコマンドを利用することが出来る.しかし,git+ssh接続では,何故かgitが正しく利用できない.これは,ターミナルで接続した場合bashのプロファイルが読み込まれ環境変数のPATHにGitのパスが追加される.しかし,git+ssh接続ではPATHに追加されない.そこで,.bashrcをホームディレクトリに追加する.例として以下のコマンドで実現することが出来る.
$ ln –s .bash_profile .bashrc
これで,問題なくSSHからMAC OS X ServerのGitに接続することが出来る.

参考:http://www.snow-wolf.net/entry/2008/2/serving-git-mac-os-x/

2010年12月16日木曜日

Fedora14にadb環境を構築

今回は,Fedora14にAndroidの開発環境を構築していきます.

Fedora14をDVDのディスクからクリーンインストールした状態で行います.



こちらの環境に沿って行いました.
ただし,いくつか情報が古いため,所々解説を交えます.



追加のボタンをクリックするとうまく追加できないので,直接Work withに入力します.

しばらく待てば表示されます.ちなみにEclipseUpdateはアップデートする物が無いのでやる必要はありません.



PATHの設定の変更
現状では,以下のようになっています.
PATH=$PATH:$HOME/AndroidSDK:$HOME/AndroidSDK/tools
それを次のように変更します
PATH=$PATH:$HOME/AndroidSDK:$HOME/AndroidSDK/tools:$HOME/AndroidSDK/platform-tools
adbが含まれているディレクトリが変更されたためです.



以上