開発の覚書

CKEditorがJavaScriptエラーになる

こちらのブログは、MTOS5 を使わせてもらっているのですが、Movable Type 標準のWISYWIGエディターは非常に貧弱で困っていました。そのため、なにかいいのはないかと探したところ『CKEditor』という素晴らしいプラグインがあることが分かり、早速インストールしてみました。

…ところが、いきなりうまく動きませんでした。

エディターを開くとJavaScriptエラーになりエディター自体が表示されません。↓こんな感じになってしまいました。

 JavaScriptエラーの詳細を見ると「'CKEDITOR'は宣言されていません」となっています。

最初は原因が皆目検討もつかなかったのですが、調べてみたら Movable Type の設定ファイル mt-config.cgi の StaticWebPath がコメントアウトされていました。
どうしてこんなことになっていたのか？
このブログを含む弊社のHPはファーストサーバーの共有サーバーを利用しているのですが、そちらに Movable Type をインストールしたあと、表示される Movable Type の設定画面がうまく動きませんでした。
仕方がないので、手動で mt-config.cgi を作成したのですが、そのときに間違えて StaticWebPath をコメントのままにしてしまっていたようです。

 

CKEditor をMTOS5に正常インストールできました

StaticWebPath を正しい設定にしたところ、CKEditor が正しく動きました。

使用してみましたが、かなり素晴らしいです。

 

CKEditorプラグイン は、世界中の１％の人々へ の蒲生さんと ToI企画 の天野さんの共同プロジェクトによるものだそうです。
CKEditorプラグインのインストール手順や機能詳細などは、蒲生さんの記事 や 天野さんの記事 で解説されていますので、そちらを参照して是非使ってみてその素晴らしさを実感してください。

前々回の『Flex Builder 3 + Redmine + Subversion の開発環境構築手順 その1』で、Subversion と連携するための Subversiveプラグインインストール手順をご紹介しました。
前回の『Flex Builder 3 + Redmine + Subversion の開発環境構築手順 その2』で、Redmine と連携するための Mylynプラグインをインストールしました。
これで、Flex Builder 3、Redmine、Subversion の連携を取るためのプラグインのインストールは全て完了しましたので、最後に実際にRedmine との連携をとるための設定手順を紹介したいと思います。

１．メニューバーの 「ウィンドウ > 他のビュー...」 を選択します。

２．「タスクリスト」「タスク・リポジトリー」を選択して、［OK］ボタンをクリックします。

 

Flex Builder 3 に、「タスクリスト」「タスク・リポジトリー」ビューが表示されます。

 

３．「タスク・リポジトリー」ビューの［タスク・リポジトリーの追加］ボタンをクリックします。

※「タスク・リポジトリー」ビュー上で、右クリックしたときに表示されるコンテキストメニューからも同様の操作が行えます。

４．「Web Template（拡張）」を選択して、［次へ］ボタンをクリックします。

 

５．「タスク・リポジトリーのプロパティー」に下記の値を入力して、［終了］ボタンをクリックします。

基本

サーバー	RedmineのURLを指定します。
ラベル	タスク・リポジトリーのラベル名称を指定します。
ユーザーID	RedmineにログインするユーザーIDを指定します。
パスワード	Redmineにログインするときのパスワードを指定します。

追加構成

パラメータ	project
値	RedmineのプロジェクトID（※1）

※［追加］ボタンをクリックして、入力します。

拡張構成　（Redmine0.8*の場合です）

Task URL	${serverUrl}/issues/show/
New Task URL	${serverUrl}/projects/${project}/issues/new
Query Request URL	${serverUrl}/projects/${project}/issues
	GET
Query Pattern	<td class="subject">.*?<a href="/redmine/issues/show/(\d+)">(.+?)</a></td>
ログイン・リクエストURL	${serverUrl}/login?username=${userId}&password=${password}

拡張構成　（Redmine0.9*の場合）

Task URL	${serverUrl}/issues/show/
New Task URL	${serverUrl}/projects/${project}/issues/new
Query Request URL	${serverUrl}/projects/${project}/issues
	GET
Query Pattern	<td class="subject">.*?<a href="/redmine/issues/(\d+)">(.+?)</a></td>
ログイン・リクエストURL	${serverUrl}/login?username=${userId}&password=${password}

HTTP認証
必要な場合、入力してください。

プロキシー・サーバー構成
必要な場合、入力してください。

Text Editor Settings
プレーン・テキスト（デフォルト）、または TextFile

※1 追加構成で指定する値（プロジェクト名）はRedmineのプロジェクト名称になります。不明な場合は、Redmineの管理者権限をお持ちであれば、設定で確認することができます

６．新規クエリーの追加確認ポップアップが出力されるので、［はい］ボタンをクリックします。

 

 ※タスククエリーの追加は、後から行うこともできます。

７．「リポジトリー・クエリーの編集」に下記の値を入力し、［終了］ボタンをクリックします。

 

基本

クエリー・タイトル

任意のタイトルを入力します。

 ［プレビュー］ボタンをクリックし、画面下部のリストに Redmine のチケットが表示されれば接続完了になります。

画面の「タスクリスト」ビューに Redmine のチケットが表示されるようになります。

 

「タスク・リスト」に表示されたチケットをダブルクリックすることで、Redmineのチケットを Flex Builder 3 上で確認できるようになります。

以上で Flex Builder 3上で Redmine 、Subversion との連携をスムーズに行うための環境が構築できたのではないかと思います。
これにより、Redmine のチケットも Flex Builder 3 上で確認できるようになり、Flex Builder 3 と Redmine を行ったり来たりしなくても良いようになるので、開発者は Flex Builder 3 だけに集中していても Redmine のチケット情報を取得できるようになります。
ただ残念ながら、チケットのステータス変更など Redmine 上で行う必要がある作業もあるので、完全に万全というわけではありません。
それでも、ここまでの開発環境を構築できることで、開発者の負担はけっこう減るかと思います。チームで開発されている場合には特に威力を発揮しますので、是非試してみてもらいたいです。

 Flex Builder 3 に Mylynプラグインをインストール

 前回の『Flex Builder 3 + Redmine + Subversion の開発環境構築手順 その1』で、まずはSubversion と連携するための Subversiveプラグインをインストールしました。

今回は、タスク駆動開発としてRedmineと連携するためのMylynプラグインのインストール手順を紹介します。

Mylynプラグインのインストールですが、実際に自分で開発環境を構築したときは、悲しいことに結構はまりました。特に、新規リモートサイトで指定するMylynプラグインのURLが、ネット上では最新バージョン（2010年3月時点ではガリレオ用）を指すURLになっていたりしたので、古いeclipse（EUROPA）をベースにしているFlex Builder 3には合わず、旧バージョンのURLを探すということに気付くまで苦労してしまいました。

その苦労の成果を忘れないように、こちらのブログで紹介したいと思います。

Subversive同様、こちらもFlex Builder の ソフトウェア更新を利用します。

１．メニューバーの 「ヘルプ > ソフトウェア更新 > 検索およびインストール...」 を選択します。

２．「インストールする新規フィーチャーを検索」を指定し、［次へ］ボタンをクリックします。

 

 ３．［新規リモート・サイト］ボタンをクリックし、「新規更新サイト」ダイアログで以下の2つのリモートサイトを追加してください。

　名前: Mylyn 3.2.3
　URL : http://download.eclipse.org/tools/mylyn/update-archive/3.2.3/v20100217-0100/e3.3

　名前: Mylyn Web Template
　URL : http://download.eclipse.org/tools/mylyn/update-archive/3.2.3/v20100217-0100/incubator

　※MylynプラグインのURLは、下記サイトを確認し、適切なバージョンのURLを指定してください。

　　　http://www.eclipse.org/mylyn/builds/
 

４．３で追加した2つのリモートサイトを選択し、［終了］ボタンをクリックします。

リモートサイトをチェックするのでしばらく待ちます

５．以下をチェックして、［次へ］ボタンをクリックします。

「Mylyn 3.2.2 > Mylyn Features」 を展開し、「Mylyn Task List (Required) 3.2.3」「Mylyn Task-Focused Interface (Recommnded) 3.2.3」をチェック
「Mylyn 3.2.2 > Mylyn Integration」 を展開し、「Mylyn Bridge: Eclipse IDE 3.2.3」「Mylyn Bridge: Team Support 3.2.3」「Mylyn Connector: Bugzilla 3.2.3」「Mylyn WikiText 1.1.2」をチェック
「Mylyn Web Template > Mylyn Incubator」 を展開し、「Mylyn UI  Usage Reporting 3.2.3」「Mylyn Connector: XPlanner (Incubation) 3.2.3」「Mylyn Connector: Web Templates (Advanced) 3.2.3」をチェック
 

６．ライセンスを確認して問題が無ければ、「使用条件の条項に同意します」をチェックして、［次へ］ボタンをクリックします。

７．インストールするフィーチャーが表示されますので、［終了］ボタンをクリックします。 

ダウンロードされるので、しばらくお待ちください。

 

８．ダウンロードとインストールが終了するとディジタル署名の承認確認が表示されます。
　　［すべてインストール］ボタンをクリックします。 

インストール終了するまでしばらくお待ちください。 

署名承認選択後、再起動の確認が表示されます。
［はい］ボタンをクリックし、Flex Builder 3 を再起動してください。

 以上で Mylyn のインストールは終了になります。
再起動された Flex Builder 3 で、「ウィンドウ > 設定」ポップアップを表示し、「Tasks」が追加されていることを確認します。

第1回とあわせて、Flex Builder 3 に Subversibプラグイン、Mylynプラグイン がインストールされ環境が整いました。

続き：その３にて、Redmineとの接続設定について説明します。

Flex Builder 3 に Subversiveプラグインをインストールする

開発で、BTSや、バージョン管理システムを使うと非常に便利です。
これらのツールは非常に強力ですが、より便利にするために Flex Builder 3 と連動させたいと考え、Flex Builder3 + Subversion + Redmineを連携させるためのプラグインをインストールしてみました。 eclipse（GANYMEDE、GALILEO）などは情報がネット上で集められたのですが、Flex Builder 3 だけというのは私の探し方が悪いのか、なかなか見つかりませんでしたので、覚書としてこちらにてご紹介します。 Flex Builder3 にSubversiveプラグイン、Mylynプラグインをインストールし、Flex Builder3 + Subversion + Redmine を連動させる方法を何回かに分けてご紹介していきたいと思います。

まずは、その１として、Flex Builder3 にSubversiveプラグインをインストールする方法をご説明します。

Subversiveプラグインのインストールについては、下記のサイトを参考にさせてもらいました。
http://www.adobe.com/jp/devnet/air/articles/adb_howto_develop_ria_part6.html

ところが、こちらのサイトの手順でSubversiveをインストールをしていくと私の環境ではうまくいきませんでした。
上記サイトと手順を変えた部分は、インストール手順のなかに記述してあります。

【前提条件】
・Redmine、Subversionはインストール、設定済みとします。

インストールは、Flex Builder の ソフトウェア更新を利用します。

１．メニューバーの 「ヘルプ > ソフトウェア更新 > 検索およびインストール...」 を選択します。

２．「インストールする新規フィーチャーを検索」を指定し、［次へ］ボタンをクリックします。

３．［新規リモート・サイト］ボタンをクリックし、「新規更新サイト」ダイアログで以下の2つのリモートサイトを追加してください。

　名前: Subversive
　URL : http://download.eclipse.org/technology/subversive/0.7/update-site/
　名前: Subversive SVN Connectors
　URL : http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/

４．３で追加した2つのリモートサイトを選択し、［終了］ボタンをクリックします。

５．以下をチェックして、［次へ］ボタンをクリックします。

「Subversive」 を展開し、「Subversive SVN Team Provider Plugin」をチェック
「Subversive > Subversive Integration Plug-in's (Incubation)」を展開し、「Subversive SVN Integration for the Mylyn Proect (Optional) (Incubation)」をチェック （2010/03/17追記）
「Subversive SVN Connectors > Subversive SVN Team Provider Plugin」を展開し、「Sebversive SVN Connectors」「SVNKit」をチェック

※上記のAdobeのサイトでは、「Sebversive SVN Connectors > Subversive SVN Team Provider Plugin」を全て選択するようにしていますが、「Sebversive SVN Connectors > Subversive SVN Team Provider Plugin」内の「JavaHL」を選択するとうまくいきませんでしたので、こちらでは、「JavaHL」をインストールから外しています。

６．ライセンスを確認して問題が無ければ、「使用条件の条項に同意します」をチェックして、［次へ］ボタンをクリックします。

７．インストールするフィーチャーが表示されますので、［終了］ボタンをクリックします。

８．ダウンロードとインストールが終了するとディジタル署名の承認確認が表示されます。
　　［すべてインストール］ボタンをクリックします。

署名承認選択後、再起動の確認が表示されます。
［はい］ボタンをクリックし、Flex Builder 3 を再起動してください。
以上で Subversive のインストールは終了になります。
再起動された Flex Builder 3 で、「バースベクティブを開く」ポップアップを表示し、「SVNリポジトリー・エクスプローラー」が追加されていることを確認します。
続き：その２にて、Mylynプラグインのインストールについて説明します。

ブラウザのタイトル設定方法を紹介します。
設定方法は難しくないのですが、いくつか注意すべき点が存在します。


mxmlの<Application>のpageTitleプロパティを使用すると、
ブラウザのタイトル部分に表示するタイトルを設定する事が可能です。

■メインアプリケーション（mxml）
 

<?xml version="1.0" encoding="utf-8"?>

	

実際にswfコンテンツがのっているhtmlは、ビルド時に
index.template.htmlを元に生成されますが、この時<Application>のpageTitleの値を参照し
htmlの<titlle>に設定を行います。


■index.template.html

<title>${title}</title>

  ↓ビルドでhtmlが生成される

■XXXXX.html

<title>mxmlで設定したタイトル名</title>

わざわざアプリケーション側で設定しなくても、index.template.htmlのtitleを直接変更すれば
シンプルな設定となりますが、実はこの方法ではtitleに日本語を設定してしまうと
タイトルが文字化けしてしまいます。



■index.template.html

<title>テストページ</title>

  ↓
■XXXXX.html

<title>繝�繧ｹ繝医�壹�ｼ繧ｸ</title>

その為、タイトルの設定は<Application>のpageTitleプロパティで設定する必要がありますが、更に注意点が存在します。

通常、自動生成されるhtmlのエンコードはUTF-8ですが、
エンコーディングをUTF-8以外に変更した場合、title部分が文字化けしてしまいます。

文字化けしてしまった部分を直接修正する方法もアリですが、
ビルドの度に生成されるファイルなので、都度修正が必要になってしまいます。
（デグレード等を引き起こす可能性があるため危険です）

そこでオススメなのが、JavaScriptでタイトルを設定する方法です。
この方法ならば文字化けも解消でき、かつ動的にタイトルの設定を行う事が可能となります。
以下がサンプルです。
■アプリケーション側

//　ウインドウの切り替え
ExternalInterface.call('setTitle',viewName);

■html側（JavaScript)

<script language="JavaScript" type="text/javascript">

	// windowのタイトルを設定
	function setTitle(ttl)
	{
		window.document.title = ttl;
	}
</script>

html側(index.template.htmlに実装)にタイトル設定用のJavaScriptを用意し タイトル設定を行うタイミング時、画面側でExternalInterfaceを使用しJavaScriptの呼び出しを行います。 この方法を使用した場合、動的にタイトルの値を変更する事も可能となるのでオススメです。