ブログ

開発 一覧

こんにちは、尾崎です。

Aipoの「タイムライン」機能のデバッグを行った際、JavaScriptのデバッグに便利な方法はないかと探したところ、いくつか方法はあったのですが今回はGoogle ChromeのDevToolsを使ってJavaScriptのデバッグをする方法を紹介したいと思います。

JavaScriptで機能を開発する際や、不具合・エラーが出ていて原因を調べたい時などに非常に役に立つ方法です。

実際に、例としてAipoのタイムラインに投稿する際のJavaScriptの動きを見ながらJavaScriptのデバック方法について説明していきます。

続きを読む

2013/09/24 13:30:00
尾崎

こんにちは、尾崎です。

今回はAIipoのjava側のデバック方法を紹介したいと思います。

Aipoでは画面を表示する処理やデータベースに登録する処理などをJavaで実装しているため、新しい機能を開発するときなどに

画面が表示できない、データベースに登録できないなどの不具合が出てきた場合、デバックは非常に役に立ちます。

実際に、掲示板でトピックを追加した際にデータベースに登録する処理を追っていきながら、Aipoではどのようにデバックしていけばいいかについて、紹介していきたいと思います。

開発環境については、普段AipoはEclipseを使って開発しているため、Eclipseを使ってJavaのデバックを行いたいと思います。

続きを読む

2013/09/10 16:00:00
尾崎

さて、前回はALAbstractFormDataについて見てみましたが、次は一覧画面・詳細画面表示の基底クラスALAbstractSelectDataについて紐解いてみましょう。

Aipoにおける一覧・詳細系の処理はとりあえずここを見ましょう。

ALAbstractSelectData.java

各portletsの中のXXXSelectDataはここを継承しています。

トップ画面・最大化画面はActionが起点になるので、ToDoのActionを見てみましょう。

続きを読む

2013/09/03 16:00:00
岩崎

Aipoにおけるフォーム系の処理はとりあえずここを見ましょう。

ALAbstractFormData.java

各portletsの中のXXXFormDataはここを継承しています。

例えば新規登録を見てみましょう。

ToDoの新規登録処理はToDoFormJSONScreen.javaが始点になります。

ToDoFormJSONScreen.java

続きを読む

2013/08/27 09:00:00
岩崎

AipoにはスケジュールやToDo等様々な機能があります。
それらの機能がどのように呼ばれているのか、ToDoをもとに見てみましょう。

続きを読む

2013/08/20 09:55:17
岩崎
08092013

Aipoのアプリ配置情報

岩崎 カテゴリ:開発 タグ:,

Aipo内のアプリは位置情報はpsmlに書かれています。
アプリの追加や配置変更をした場合、以前までは物理ファイルのpsmlファイルを更新していましたが、現在はpsmlファイルをデータベースに保存しています。

該当するテーブルは

  • jetspeed_group_profile
  • jetspeed_role_profile
  • jetspeed_user_profile

の3つになります。

各ユーザーごとのpsmlの設定は以下のように取得することができます。

select profile from jetspeed_user_profile where media_type='html' and user_name = '<username>';
2013/08/09 18:44:57
岩崎
08082013

Aipoのユーザーテーブル

岩崎 カテゴリ:開発 タグ:

Aipoのユーザーテーブルはturbine_userにあたります。

それぞれのカラムが何に該当するかいくつかピックアップして見てみます。

user_id ユーザーID
login_name ログイン名
password_value パスワード
first_name
last_name
email メールアドレス
last_login 最終ログイン日時
disabled 有効・無効フラグT:無効、F:有効になっています。
position_id 役職ID
tutorial_forbid 初回ログイン時に表示されるチュートリアル表示フラグT:最後まで表示済、F:未表示になっています。

turbine_userを含めてAipoのSQLは下記に登録されています。

https://github.com/aipocom/aipo/blob/master/sql/postgres/org001.sql

2013/08/08 18:22:30
岩崎
08062013

Aipoのデータベース接続設定

岩崎 カテゴリ:開発 タグ:

Aipoを開発する際に、元のAipoとは別のデータベースを用意してカスタマイズを行いたいシーンが有ると思います。

Aipoのデータベースの接続設定は下記ファイルに記載してあります。

https://github.com/aipocom/aipo/blob/master/oms/src/main/webapp/WEB-INF/datasource/dbcp-org001.properties

例えばデータベースを、org001を複製してorg002にしてそちらでカスタマイズをしていく場合は

cayenne.dbcp.url=jdbc:postgresql://localhost:5432/org002

にするなどでデータベースを切り替えることが可能です。

2013/08/06 18:17:00
岩崎
08012013

GitHubに移行しました

岩崎 カテゴリ:開発 タグ:,

github.png

今までgoogle codeを使っていましたが、「Aipoの多言語対応その2」で
コミット先としてGitHubを案内しているように、GitHubにデータ移行をしました。

GitHub(Aipo.com)

今まで慣れ親しんだgoogle codeからGitHubに移行した理由や、
メリット・デメリットを解説します。

続きを読む

2013/08/01 18:03:15
岩崎

Aipo7系ではJavascriptのコンソールを出す方法が

http://user.aipo.com/develop/debug/dojo.html

に載っている方法と設定箇所が多少異なっているため、ご説明いたします。

変更を行うファイルはJavascriptファイルではなくなり、テンプレートファイルになりました。

https://github.com/aipocom/aipo/blob/master/war/src/main/webapp/WEB-INF/templates/vm/layouts/html/default.vm

https://github.com/aipocom/aipo/blob/master/war/src/main/webapp/WEB-INF/templates/vm/layouts/default.vm

になります。このファイル内のdjConfig の設定内にisDebug: true,を追加します。

<script type="text/javascript">
 djConfig = {
 isDebug: true,
 xDomainBasePath: '$!{external_resources_url}/javascript',
 cacheBust: '$!{utils.CacheBust}',
 siteTitle: '$!{alias}'
 #if($!utils.isAndroid2Browser($data)) ,locale: androidLocale() #end
 };
</script>

<script type="text/javascript">
 djConfig = {
 isDebug: true,
 cacheBust: '$!{utils.CacheBust}',
 siteTitle: '$!{alias}'
 #if($!utils.isAndroid2Browser($data)) ,locale: androidLocale() #end
 };
</script>

変更後、Aipoをビルドしなおしてあげると、この画像のように、画面上にコンソールウィンドウが表示されます。このコンソールウィンドウに

console.log(djConfig);

などと入力して実行することで実行結果が表示されるようになります。

debug.jpg

2013/08/01 15:20:45
岩崎
07302013

SQLのログを出力する方法

岩崎 カテゴリ:開発 タグ:,

Aipoで実行されているSQLのログを出力したい場合、ありますよね。

そんな時には以下のファイルに記載されている設定を変更することでSQLのログを出力させることが可能です。

aipo\war\src\main\webapp\WEB-INF\conf\log4j.properties

# Cayenne
log4j.appender.cayenne = org.apache.log4j.RollingFileAppender
log4j.appender.cayenne.MaxFileSize = 1000KB
log4j.appender.cayenne.MaxBackupIndex = 30
log4j.appender.cayenne.file = ${catalina.base}/logs/cayenne.log
log4j.appender.cayenne.layout = org.apache.log4j.PatternLayout
log4j.appender.cayenne.layout.conversionPattern =%d <%-5p> (%t) [%F:%L]- %m%n
log4j.appender.cayenne.append = true

log4j.category.org.apache.cayenne = warn, cayenne

ここに記載されている

log4j.category.org.apache.cayenne = warn, cayenne

の行を

log4j.category.org.apache.cayenne = info, cayenne

のように変更することでSQLのログを出力させることが可能です。

ログの出力先はcayenne.logになります。

2013/07/30 18:05:13
岩崎
07252013

Aipoの多言語対応その2

岩崎 カテゴリ:開発 タグ:

Aipoでは多言語化対応を進めています。

日本語[ ja_JP]、英語[en_EN]、韓国語[ko_KR]等々様々な言語ファイルを用意していますが、たまに[1]やアラブ圏のロケールのブラウザからのアクセスが有るようです。そういった場合に今までは文字化けが発生していましたが、該当する言語ファイルがないロケールの場合はデフォルトの言語ファイルを表示するようにしました。

詳しくはこちらのコミットをご覧ください。

https://github.com/aipocom/aipo/commit/47efd7c848495ba1e6b8b30ef0a4e248fb7bfe34

https://github.com/aipocom/aipo/commit/0c9e562a059724e69a689482ae3f4f99d48a02ab

2013/07/25 19:09:12
岩崎

タイトルで全部言い切ってしまいました。

IEでのデバッグに便利な開発者ツール。でもとあるサイトを開いた際に表示が崩れる、なんてことがありました。

aipo.png

どうやらこれ、cssを読み込むときにmedia属性をつけていると起きてしまう現象だったようです。

<link rel="stylesheet" type="text/css" href="style.css" />

のようにmedia属性を外す必要が有るようです。

2013/07/19 18:54:54
岩崎

Aipoではバージョン6からOpenSocialに対応したソーシャルアプリを使うことができます。

開発の際にはApacheなどの別サーバを用意して、そこにxmlを置いて・・・というのが一般的かもしれませんが、最も簡単にソーシャルアプリを動かすにはTomcatを使います。

aipo\war\target\aipo\chat-root.xml

のようにファイルを置くことで

http://localhost:8080/aipo/chat-root.xml

でアクセスが出来るようになります。

あとはAipoのアプリ追加でこのURLを指定することでとりあえずソーシャルアプリが使えるようになります。

targetにあるので、mvn cleanとかすると消えるのでそこだけ注意です。

2013/07/17 18:06:04
岩崎
07162013

Aipoの多言語対応

岩崎 カテゴリ:開発 タグ:

Aipoでは多言語対応を進めています。

日本語以外のブラウザでアクセスした際に画面上に

l10n.XXXX

のように出てしまう場合、多言語化対応に対応していない言語の可能性があります。

カスタマイズする際には

https://github.com/aimluck/aipo/tree/master/war/src/main/resources/com/aimluck/eip/modules/localization

に該当するフォルダに該当の言語ファイルを置く(AipoLocalization_ja.propertiesをコピペしてファイル名をリネームする)ことで、回避することができます。

最近では韓国語(AipoLocalization_ko.properties)・中国語(AipoLocalization_zh.properties)のブラウザで表示した際にl10n.XXXXのように出てしまっている現象に対応しました。

2013/07/16 18:48:14
岩崎
07012013

携帯でのお手軽表示確認

岩崎 カテゴリ:開発 タグ:,

iPadでのお手軽表示確認

iPhoneでのお手軽表示確認

などを紹介してきたので、最後は携帯の表示確認ができるエミュレータの紹介です。

昔はau端末のシミュレータ、Openwave SDKやソフトバンクのウェブコンテンツヴューアなどがあったのですが、Openwave SDKは公開中止、ウェブコンテンツヴューアはWindows XPのSPモード適用したあたりから使えなくなりましたね。

今はiモードHTMLシミュレータII一択ですね。

http://www.nttdocomo.co.jp/service/developer/make/content/browser/html/tool2/

htmlのエラーチェックもしてくれるので便利です。

2013/07/01 13:49:47
岩崎
06192013

iPadでのお手軽表示確認

岩崎 カテゴリ:開発 タグ:, ,

iPhoneでのお手軽表示確認

ではiPhone用のエミュレータについて触れましたがiPad確認用としては

iBBDemo3があります。

https://code.google.com/p/ibbdemo3/

これを使うことでiPadの表示確認がお手軽にできてしまいます。

iPhoneの表示もできるのですが、多少挙動が怪しい箇所があるので、「Mobilizer」の方を主に使っています。

SafariだとUser-Agent切り替えてもブラウザの画面サイズまでiPad用に切り替わらないので、User-Agent切り替えて、ブラウザの画面サイズ変更して、程度の表示切り替え確認であれば使用に問題ないかと思います。

2013/06/19 18:59:43
岩崎

Aipoを開発していると

mvn install

コマンドを実行してEclipseのTomcat再起動・・・

なんてのが普通の流れだと思います。

でも実はもっと効率的に反映をさせる方法があります。

Eclipseでプロジェクトを右クリックして「Tomcatプロジェクト」→「コンテキスト定義を更新」
を行うと、そのプロジェクトだけ再度ロードがされるようになります。

Tomcatにぶら下がっているプロジェクトの数が少ないうちはそのメリットをあまり感じませんが、Tomcat上で5,6個のアプリケーションを動かしながら開発をしている場合、

EclipseのTomcat再起動を行うと、アプリケーションを全部ロードし直すので、再起動に時間がかかるようになります。

TomcatプロジェクトであればAipoに限らずこの方法が使えるかと思います。

以上開発効率アップのTipsでした。

2013/06/19 11:27:34
岩崎

tomcat2.png

EclipseからTomcatを起動する際に、パラメータを渡したい、なんてときがあると思います。

そんな時には、このように、「設定」→「Tomcat」→「JVM設定」から

「JVMパラメータへ追加」に追加したいパラメータを渡してあげます。

-Dsun.nio.cs.map=x-windows-iso2022jp/ISO-2022-JP

みたいなのですね。

2013/06/17 19:00:29
岩崎

現在Aipoの開発では主にWindowsを利用しています。

Aipoを開発しているとPC・スマートフォン・携帯電話での表示確認を並行して行いたい場合が出てきます。
その際スマートフォンでの表示に使っているツールをご紹介します。

Adobe AIRをベースとしたアプリケーション「Mobilizer」です。

http://www.springbox.com/about/tools/

これを使うことでiPhone4,iPhone5の表示確認がお手軽にできてしまいます。

Aipoを開発しているWindows上で動いているため、他のブラウザと同様に

http://localhost:8080/aipo

でアクセスでき大変便利です。

また、スクリーンショットをpngで書き出すことが出来るため、表示変更の指示を出す際などに使用しています。

もちろん最後にはAndroid,iPhoneの実機での確認を行っています。

2013/06/15 01:04:57
岩崎

Aipoではソーシャルアプリ用にOpenSocialを使っています。

OpenSocial対応のため、Aipo内ではJavascriptで以下のようにOpenSocial用のコンテナを呼び出しています。

<iframe id="sharedStateIframe" name="sharedStateIframe" src="about:blank" frameborder="no" scrolling="no" width="0" height="0"></iframe>

Javascriptの場合、

<script language="JavaScript" type="text/javascript" src="/aipo/javascript/dojo/dojo.js?1369208242947"></script>

のようにして呼ぶのが一般的ですが、画面を早くするため、iframeを呼び出してから、該当するiframeのsrcを書き換えてOpenSocial用のコンテナを遅延ロードしています。

src=""とhref=""で無駄リクエストが発生する問題、ブラウザ対応状況

で語られていますが、Aipoで使用しているように

src="about:blank"

の場合は依然この問題が発生しているようです。

AipoのリクエストをIEなどで見てみると以下のようになり、無駄なリクエストが発生している事がわかります。

request.png

ブラウザのネットワークをキャプチャしていてこういったリクエストが発生することがありますが、Aipoの場合は上記理由によってOpenSocial用のコンテナを遅延ロードしているので、ご理解いただければと思います。

2013/06/13 13:36:58
岩崎
06132013

mavenでfindbugsを実行する方法

岩崎 カテゴリ:開発 タグ:, ,

Javaプロジェクトのソースコードが健全かどうかをチェックするのに欠かせないFindbugs。

Mavenで実行する方法についてまとめてみたいと思います。

続きを読む

2013/06/13 12:36:00
岩崎

メインページ