モンスター・ラボTech/Designブログ
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

モンスター・ラボTech/Designブログ

株式会社モンスター・ラボのテクノロジスト、デザイナーによる持ち回りブログです。

Amebaでブログを始めよう！
次ページ >>

zeeta使用例

ヒロシです。
Mr.ポポがzeetaについて紹介してくれてますが、今回は実プロジェクトでの
zeeta使用例を書こうと思います。

今回使用例としてあげるのは、
　・会議の結果を記録
　　・会議の結果から仕様を洗い出す
　　・会議の結果からTODOを洗い出す
　　・会議の結果から確認事項を洗い出す
　・確定した仕様や確認事項から新たなTODOを洗い出す
　・重要な情報の登録
　　・メール
　　・他
といったものです。

以下の記載はあくまで一例に過ぎません。こうしなければならない、
という訳ではありませんので、参考程度にながめてください。


●会議の記録
　・議事録ノードを作って記録する
　・1回ごとにノードを分ける
　・一つの会議ノード下に幾つかのノードを作成する
　　・メモ
　　　・議事のメモを記載
　　・★提出
　　　・これが提出用。メモから提出用を作成する
　　・リンクノード各種
　　　・このリンクノードが以下に記載していく内容のキモになります

　※後日検索した際「役に立たねぇ」なんてことが無いようご注意を。
　　細かく書きませんが、日時、出席者、場所等を記載するのは当然ということで。


●事前準備
　・今回確認事項リンクノードを作る
　　・⇒今回確認事項
　　　・今回の会議で確認すべきことを一つ一つノードで追加します
　　　・例
　　　　⇒今回確認事項
　　　　　甲について確認する
　　　　　乙について確認する
　　　　　等々
　・前回TODOリンクノードを作る
　　・⇒前回TODO
　　　・前回の打ち合わせでTODOとなったものをTODOノードからコピーする
　　　・ノードをコピーすること
　　　・新規ノードとして作成してはいけません
　　　・例
　　　　⇒前回TODO
　　　　　Aについて調査し報告する
　　　　　丙について確認した内容を回答する


●会議中
　・メモの記載
　　打ち合わせの内容をなるべく時系列に沿って書いてしまいましょう
　・今回確認事項、前回TODOリンクノード下の各ノードに結果を記載
　　打ち合わせによって得た回答や報告を記載していきましょう


●会議後（その１）
　・メモから★提出を記載
　・その際、決定事項、TODO、要件などを洗い出し、わかりやすく明記するとともに
　　リンクノードに書き出します
　※決定事項に要件が含まれることがよくあります
　・例
　　★提出
　　　⇒決定事項
　　　　hogehogeはgerogeroとする
　　　⇒要件
　　　　○○リストのソート順は更新日時降順
　　　⇒TODO
　　　　××画面のレイアウトを提示する
　・今回確認事項、前回TODO結果記入
　　・会議中に走り書きした内容の清書
　　・完了したものに対し目印をつける
　　　・ノードの先頭に「済：」等とつけると完了しているものとそうでないものが一目でわかります


●会議後（その２）
　※この部分が本当の意味で肝かも
　・その１で会議の結果決まったことやら何やらが洗い出されます
　・そのままにしておくと「ただ書いただけ」になってしまいます
　・なので各リンクノード配下に追加したノードの下にさらにTODOリンクノードを追加します
　・このTODOはそのノード記載内容に対し、やらなければならないことを更に洗い出します
　　・自分達がやらなければならないこと
　　・相手にやってもらわなければならないこと
　・例（その１の例に追記してます）
　　★提出
　　　⇒決定事項
　　　　hogehogeはgerogeroとする
　　　　　⇒TODO
　　　　　　仕様書に反映する
　　　⇒要件
　　　　○○リストのソート順は更新日時降順
　　　　　⇒TODO
　　　　　　仕様書に反映する
　　　　　　プログラムを修正する
　　　⇒TODO
　　　　××画面のレイアウトを提示する
　　　　　⇒TODO
　　　　　　画面を作成する
　　　　　　画面仕様書を作成する
　　　　　　紙芝居を作成する
　　・例（事前準備の例に追記してます）
　　　⇒今回確認事項
　　　　済：甲について確認する
　　　　乙について確認する
　　　　　⇒要件
　　　　　　乙は△△とする
　　　　　　　⇒TODO
　　　　　　　　仕様書に反映
　　　　　　　　プログラムを修正


●会議後（その３）
　・議事録のリンクノードに書き出したTODOは大本のTODOノード下にもコピーする
　　※【これ重要】～と私は思ってる・・・
　　　・個別のノードに対するTODOとして洗い出したものは、すべてのTODOをまとめて管理するノード下にもコピーすること
　　　・これにより、TODOが埋もれることなく、またどの時点で発生したTODOであるのかが明確になる
　・その１、その２で洗い出した自分達分のTODOを処理する
　　・処理したTODOは、先頭に「済：」をつけて大本TODOノード下の完了ノード下に移動する
　　　※増えてきたら2ndViewを使うと便利
　　・例
　　　▲TODO
　　　　TODOその２
　　　　済：TODOその３　　　～一旦こうする（済の字は担当者が記入）
　　　　＞完了
　　　　　済：TODOその１
　　　　　　　↓
　　　▲TODO
　　　　TODOその２
　　　　＞完了
　　　　　済：TODOその１
　　　　　済：TODOその３　　～その後こちらに移動（すぐ移動でもいいいが、管理者が確認したら移動、の方がいい）
　　　　

※上記以前のTODO管理
　・大本のTODOノードのコピーを各議事録下においていた
　・これでもTODO管理自体はできる
　・が、時間が立ってくると、いつ誰がどうして行ったかを確認したくなる


●重要な情報の登録
　・メール
　　・「重要なメール」というノードを作ってちゃんと登録しましょう
　　　・例
　　　　　重要なメール
　　　　　　〇〇に関する問い合わせ
　　　　　　××の取得先について確認
　　　　　　会議開催日は○月×日です
　　　　　※上記例のノードは適当ですが、メールのタイトルをノードのタイトルとしておくのが良い
　　・特に確認やTODOに関連するメールは「重要なメール」ノード下に追加すると共に、各確認、TODOノード
　　　下にもリンクノードを作って関連付けるとよい
　　　・例
　　　　　⇒今回確認事項
　　　　　　○○に関して確認する
　　　　　　　⇒メール
　　　　　　　　〇〇に関する問い合わせ
　　・メールの回答から派生する確認事項やTODO
　　　・議事録と同様、リンクノードを使って確認事項やTODOを洗い出しましょう
　　　・例
　　　　　⇒今回確認事項
　　　　　　○○に関して確認する
　　　　　　　⇒メール
　　　　　　　　〇〇に関する問い合わせ
　　　　　　　　　⇒回答
　　　　　　　　　　Re: 〇〇に関する問い合わせ
　　　　　　　　　　　⇒TODO
　　　　　　　　　　　　TODOその１
　　　　　　　　　　　　TODOその２
　・他
　　・それなりのノードを作って登録する
　　・管理方法はメールと同じようにするといいかと


●最後に
　※長々と書いてきたのでまとめます
　・議事録や重要な情報を記録
　・それに対する確認事項やTODO、要件などを書きだす
　　⇒どこで発生したか明確にするため
　・個々の確認事項、TODOは、その「まとめノード」にコピー
　　⇒埋もれることを防ぐため
　・要件は纏めノードがあればそこへコピー
　　・各機能の要件ノードがあればそこへコピー
　・確認事項、TODOは、完了したら「済：」を追記
　　⇒未対応のまま放置されないようにするため
　・「済：」となったものは完了ノードに移動
　　⇒確認事項やTODOの纏めノードは数十件、数百件と増えていく
　　⇒移動することにより、纏めノード下には、未処理のノードだけが残ることになる
　　⇒この作業は管理者が”確認してから”行った方がいい

　※ここまで来て記載し忘れに気づいた
　　・TODOや確認事項には担当者を割り振るべき
　　・例
　　　　⇒TODO
　　　　　（ヒロシ）TODOその１
　　　　　（Mr.ポポ）TODOその２
　　・担当割は管理者が行うのが望ましい


他山の石、以って玉を攻むべし

謝です。

久しぶり二回目のブログを書きます。

中国語は『他山之石，可以攻玉』ということわざがあります。
日本語だと『他山の石、以って玉（たま）を攻（おさ）むべし。』です。

僕は前Androidの開発を担当していました。
勉強するために、ほかの方々のやり方を勉強しようと思っていて、
APKファイルを逆コンパイルして、
ソースを覗いたりどかしてました。

そもそも作者の著作権を無視して、
逆コンパイルするのはあまりよくないと思います。
勉強以外の目的では使わないでくださいね。

これから簡単に説明したいと思います。

まずAPKファイルを入手します。
様々な方法がありますが、
ここでは説明しません。
自分で調べといてください。

これから、apktoolを下記サイトからゲットします。
https://code.google.com/p/android-apktool/

apktool.jarを「C:\Windows」にコピーします。

apktoolのインストール先に下記コマンドを実行します。
　　apktool d XXX.apk 出力先Path

上記手順を実行すればXMLファイルを見ることができます。

これからJAVAファイルを見る手順を紹介します。

１、下記URLで「jd-gui.zip、dex2jar-0.0.7.3-SNAPSHOT.zip」を入手します。
　　・http://java.decompiler.free.fr/?q=jdgui
　　・http://code.google.com/p/dex2jar/
２、APKファイルの拡張子をZIPに変更します
３、ファイル解凍し、DEXファイルを取得します。
４、下記コマンドでDEX→JARに変換
　　dex2jar.bat class.dex
５、jd-guiでjarファイルを開く

それでJAVAファイルが表示することができます。
ProGuardを使われたら大変見づらいと思いますが、
読んでみればちょっとでも勉強になると思います。

いかがでしょうか。
繰り返しになりますが、勉強以外の目的で使わないでくださいね。

Chrome Extensionで社内メールを「いいね～」したい（第2回）

Chrome Extensionで社内メールを「いいね～」したい（第2回）

前口上

1ヶ月振り3回目の稲村です。前回のエントリ『Chrome Extensionで社内メールを「いいね～」したい（第1回）』の続きです。
今回のエントリの部分を作ったのは1ヶ月近く前で、注意点などはだいたい忘れてしまいました。心より恥じる。
なお、せっかく社内用の自作ツールで好きに作るのだからという事で、JavaScriptの代わりにCoffeeScriptで書いています。と言っても、書こうとするコードが単純な事と、私のCoffeeScriptレベルが相まって、JavaScriptが読める人なら見て分かるレベルになっています。

Gmailの画面に「いいね～」ボタンを埋め込む

Chrome Extensionにおける表示中ページの操作

Chrome Extensionで「表示中のページの内容を操作する」のは、Content Scriptsという技術を使います。
簡単に言うと、extensionで用意したJavaScrriptを表示中のページで動かす技術です。無条件に動かせる訳ではなく、上記ページに書いてある通り何点か制約もありますが、今回実現したい「メールを表示している画面をパースして、特定部分にボタンとJSを埋め込む」という処理は、つまりHTMLの走査+DOMの挿入だけなので、この制約に引っかからずストレートに書けます。
なおストレートに書く以外に何があるかというと、extension内の他のページとメッセージングによってやり取りする事で、Content Scriptでは制限されているchromeのAPIを使う、といった手法があります。

Gmailのメールスレッド画面にボタンを埋め込む

「いいね～」ボタンは各メールについて表示する必要があります。具体的には、Gmailはメールをスレッドにまとめて表示するので、その中の各メールのヘッダ部分（差出人、件名などが表示されている部分）に表示します。

まずは、メールスレッドを開いた時に処理を起動する必要があります。前回一言書いたように、jQueryを使います。
最初は$(window).load()や$(window).ready()を使ってみたのですが、無念な事に希望したタイミングで起動する事が出来ませんでした（具体的にどうNGだったかは忘れました…）。GmailはAjaxが流行る発端になっただけあって(?)Ajax処理が激しいので「読み込み終わった」とか言ってもそう単純にいかないようです。
早速暗礁に乗り上げかと思いきや、次に試したhashchangeイベントで無事動作させる事が出来ました。
// Coffee Script
$(window).bind 'hashchange', (event) =>
URLを見たところ、メールスレッドを開いた際は"#mbox"（受信箱）→"#mbox/123456789xxxxxx"（メールスレッド）のように、間に"/"が入るようですので、その存在をもってメールスレッド画面とみなす事にします（社内ツールは気楽ですね）。
	if location.hash.indexOf '/' > -1

次に、「いいね～」ボタンに必要な以下の情報を取得します。
  • 差出人（DOM）
  • 差出人名（テキスト）
  • 件名（テキスト）
  • 送信日時（テキスト）
    • 		frame = $('#canvas_frame').contents()
    		from = frame.find('.gD')
    		from_email = from.email()
    		subject = frame.find('.hP').text()
    		sent_at = frame.find('.g3').attr 'title'
    また自分（Gmailの画面を開いているユーザ）のメアドを取得する必要があります。これは本来認証して取得しないと簡単に詐称できちゃったりしますが、社内用かつ試作中という事で、画面から取る事にしました。危険ですので、良い子のみんなは真似しないで下さい。
    		me = frame.find('a[href="//google.com/profiles"]').text()

    あとはボタンを埋め込むだけです。見栄えは置いておいて、とりあえず★マークを「いいね～ボタン」として埋め込みます。
    		like_button = $('<a href="#">★</a>')
    		like_button.on 'click mousedown', (event) =>
    			# ここでAjaxリクエスト送信
    			false
    		from.after like_button
    まとめると以下です（ログ出力を追加しています）
    $(window).bind 'hashchange', (event) =>
    	if location.hash.indexOf '/' > -1
    		frame = $('#canvas_frame').contents()
    		from = frame.find('.gD')
    		from_email = from.attr 'email'
    		subject = frame.find('.hP').text()
    		sent_at = frame.find('.g3').attr 'title'
    		me = frame.find('a[href="//google.com/profiles"]').text()
    		console.log "me: #{me}"
    		console.log "subject: #{subject}"
    		console.log "from: #{from_email}"
    		console.log "sent_at: #{sent_at}"
    		like_button = $('<a href="#">★</a>')
    		like_button.on 'click mousedown', (event) =>
    			# ここでAjaxリクエスト送信
    			false
    		from.after like_button
    さて、これをcoffeeコマンドでコンパイルした後、Chrome Extensionを動かしてみます。
    メールのヘッダ部分
    Chromeのコンソール
    無事★が表示され、ブラウザのコンソールにログが出力されました！
    …ただし、これはスレッド内にメールが1通ならば良いですが、2通以上になると当然ながら全て先頭のメールの情報となってしまう為、修正が必要です。
    が、今回は時間の関係上ここまでとして、次回続きを書きたいと思います。
    struts2のsタグメモ
    ヒロシです。歳のせいか物忘れが酷いので、メモっておくとです。


    struts2のsタグです。


    ●チェックボックス
    　<s:checkbox name="inputDto.sptMlFlg"  value="%{inputDto.sptMlFlg}"/>

    　※valueにはtrue/falseが入るので、値を1とか2とかで持っている場合は変換が必要です
    　※valueで指定した変数にて入力値の取得、表示値の設定ができます


    ●リストボックス（複数指定可能）
    　<s:select key="inputDto.mlStrList" list="mlVoItems" listKey="mail_addr" listValue="mail_addr" value="%{inputDto.mlStrList}" multiple="true" size="5"/>

    　※Action側でListを作成し、キーとなる項目の属性をlistKeyに、値となる項目の属性をlistValueにセットします
    　※Action側のInputDtoクラスには下記のように配列で定義しておくと複数指定したものが格納されます
    　　　private String[] mlStrList;
    　※valueで指定した変数にて入力値の取得、表示値の設定ができます
    　※multiple="true"としないと複数選択可能となりません


    ●プルダウン
    　<s:select key="inputDto.triggerCd" list="triggerTypeVoItems" headerKey="" headerValue="トリガーを指定"  listKey="trigger_cd" listValue="trigger_name" value="%{inputDto.triggerCd}"/>

    　※Action側でListを作成し、キーとなる項目の属性をlistKeyに、値となる項目の属性をlistValueにセットします
    　※選択値はvalueで指定した変数にセットされます。表示時に選択状態にしたい場合もここにセットすればOK

    　【参考】固定値をJSPに書いちゃう例
    　　<s:generator separator="," val="%{'OK,NG'}" >
    　　<s:select name="inputDto.auth" list="top" headerKey="" headerValue="-" />
    　　</s:generator>


    ●textarea
    　<s:textarea name="inputDto.memo" cols="76" rows="5"/>

    　※nameで指定した変数に入力値が入ります。表示時に出力したい場合もこの変数にセットすればOK
    　※他のタグと違ってvalueなくてもOK。但しその場合はnameじゃなくてkeyを指定した場合
    　※key指定でvalue無しは試してません・・・


    ●textfield
    　<s:textfield key="inputDto.owner" value="%{inputDto.owner}" size="35" />

    　※valueで指定した変数にて入力値の取得、表示値の設定ができます


    ●値を表示するのはこれ
    　<s:property value="%{inputDto.title}" />

    　※valueで指定した変数に表示値を設定します


    ●サーバ側で生成したHtmlを画面に表示する
    　<s:property value="%{taisyoServiceHtml}" escape="false"/>

    　※escape="false"をしないとHtmlタグがそのまま出てきます


    ●見出しをマスクする（ように見せかける）ような場合
    　<s:label key="complFlgLabel" value="完了チェック"/>

    　上記keyをキーにdocument.getElementByIdして、そのclassNameを変更することによって
    　CSSによる制御を行いました。実際にマスクするわけではなく、色を変えてますくされてい
    　るかのように見せました。


    PHPフレームワーク　Symfony　いよいよバージョン2に
    こんにちは、山口です

    今回は2011年7月にリリースされて注目を浴びている、
    PHPフレームワークSymfony2について、紹介します。

    これまで使われていたSymfony1系には、
    高機能で、中～大規模サイト向け、
    多人数で開発するときの開発効率の向上
    といったメリットがありました。

    一方、シンプルで軽量高速な、CakePHPや、Codeigniterと比較すると、
    処理の重さや学習コストの増加といったデメリットもありました。

    私も、2年ほどSymfonyを業務で使っていて、
    高機能で、多人数でも安全に開発できるSymfonyの恩恵を日々享受していますが、
    もう少しシンプルで、柔軟だったらと思うこともよくあるので、
    今後のSymfony2の発展には多いに期待しています。

    ■Symfony2の特徴
    ○動作環境
    Symfony 2.0は名前空間を利用しているので、PHP 5.3以降に対応しています。

    ○インストール
    インストールは、ソースをダウンロードして展開し、
    cache,logsディレクトリを書き込めるようにするだけなので簡単です。
    DB設定などを行う画面が用意されていて、少しフレンドリーになっています。

    Symfony のインストールと設定 | Symfony2日本語ドキュメント

    Symfony2をインストールする

    ○高速になった？
    6月22日に開催された、The State of Symfony2オンラインカンファレンスの
    開発者によるスライドをみると、Symfony2で加わった新しい特徴を知ることができます。

    特に「Killer Feature of Symfony2」と謳われている
    状況によっては「symfony 1.xの約80倍高速」になるというキャッシュシステムは期待大です。

    ○Symfony2の全体像
    大雑把にSymfony2の全体像をつかむには、以下の記事がお勧めです。
    特に、コントローラ周りは、大幅に改善されてシンプルになっているようです。
    ○バンドル
    バンドルというのは、Symfony2の新しい機構で、
    他のソフトやフレームワークでいう、プラグインのようなものです。

    しかし、Symfony2では、コアフレームワークの機能から自分の作るアプリまで
    すべてがバンドルとして構成されるのが大きな特徴になっています。
    Symfony2でMongoDBを使うバンドルとか色々配布されています。

    バンドルは、
    php app/console generate:bundle
    という風にコンソールから自動生成することができます。

    自分でWebアプリを作る場合は
    バンドルを作成したら、その中にルーティング、コントローラ、テンプレートを配置します。
    Symfony1のmoduleに近い構造です。

    1.ルートの作成(routing.yml)
    　(src/Acme/HelloBundle/Resources/config/routing.yml)

    2.コントローラの作成()
    　(src/Acme/HelloBundle/Controller/HelloController.php)

    3.テンプレートの作成
    　(src/Acme/HelloBundle/Resources/views/Hello/index.html.twig)

    そして、routing.ymに記載したURLにアクセスすれば、
    ページが表示されるわけですね。

    ※参考

    ○ビュー
    Symfony2では、ビューにTwigというテンプレートエンジンが採用されています。
    これまでは、PHPをテンプレートに使っていて、なんでも書ける代わりにロジックが
    増えて混乱の原因になっていました。

    Twigはビューとしてできることが、いい意味で制限されているので、
    アクションとビューの役割分担が明確になって良いと思います。

    また、Twigはテンプレート継承ができるので、これまでlayoutで実現していた
    ビューの構造化もすっきりと実現できます。



    ○フォーム
    Symfony1のフォームフレームワークは、一番習得するのに苦労するところですが、
    画面からのフォーム入力、バリデーション、データベースへの登録・更新をとても
    簡単に扱うことができます。

    しかし、ちょっと複雑な入力フォームをカスタマイズしようとすると、
    急に難易度が上がって、膨大な時間がかかるという厄介なところもありました。

    Symfony2では、フォームやコントローラにビジネスロジックが混在するのを防いで、
    よりシンプルで再利用可能な仕組みに改善されているようです。



    ■最後に
    以上、Symfony2の概要を把握するための情報をざっと書いてみました。
    Symfony2を自分で動かしてみたい！という人のガイドになればと思います。

    次ページ >>