大河内教授の憂鬱

jQueryでドラッグ＆ドロップ

2012-01-21T14:18:00.000+09:00


自分用のブログエンジンを作っていて、
要素をドラッグ＆ドロップしながら章立てできるようなものにしたいなと思い
要素をどんどん追加していこうと思い、
最初draggable,droppable辺りを利用していたんだけど、
追加したい場所や、追加した要素の順番を変更したりと
sortableが必要だったので少し書いてみる。


何がしたいか？


・ドラッグして要素の追加
・ドラッグしたものは残す
・ドラッグしたものを変更
・ドロップする場所は順序変更が可能

これによりコンテンツを編集していく感じ


ソートの準備


まずソートしたい要素に対して


 $(".content-box").sortable({
  placeholder:'ui-state-highlight',
  connectWith: $('.content-box'),
  axis:'y',
  update : function (event,ui) {
   //順序を変更した後
  },
  receive : function (event,ui) {
   //他から要素が追加された場合
  }
 });
と行います。placeholder：移動する場所に対してのスタイルを指定します。これで色の変更などを行なって移動を行いやすくします。connectWith：移動できる場所を自分自身のみにしています。axis：yを指定して縦方向だけ移動できるようにしています。update,receiveはイベントですが、updateは順序を変更した場合のみに発生、receiveは他から要素が入ってきた時です。receive発生時もupdateは発生します。一旦はこれだけでcontent-box内の要素の順序変更ができるようになります。ドラッグしてくる側の設定
ここが一番苦労したというか気づかなかったというか。ドラッグする側に対してもsortableで対応しないと、ドラッグできないのではないか？と思ってそうしてたのですが、cloneが効かなかったり、何かとやりたい事に対してうまくいかなかったのですが、まずドラッグしたい要素に対して、ドラッグをできるようにします。
 // アイテムのドラッグ
 $('.item').draggable({
    cursor: 'move', 
    opacity: 0.7,
    connectToSortable: $('.content-box'),
          helper:'clone'
 });
cursor：カーソルの変更opacity：移動時の透明度connectToSortable：指定した場所にはsortableの対象として扱ってくれるので上記で指定した「ui-state-highlight」をやってくれます。helper：移動中の表示をコピーにしています。これに対しては実際はfunctionも扱えるので移動する時に表示を変えたい場合はfunctionを指定して戻り値でタグを返します。まぁこれで大体できるんだけど、、、
私の場合はitemの部分とcontent-box内の要素が違います。この状態で行うとitemのタグがそのまま配置されてしまうのでreceiveイベントの時に
    var addTag = createContentItem(itemName);
    var dropItem = $(this).children(".item");
    dropItem.after(addTag);
    dropItem.remove();
新しくタグを追加してあげて、ドロップした要素を削除しています。当初はどちらもsortableを指定しないと要素の追加場所がわからないのではないか？と思って指定していたのですが、片方をドラッグにしてcloneを行えば良い事に気付いたので後は追加要素を追加削除するだけでした。connectToSortableに気づいたら非常に簡単にできました。ただsortableでhelperにclone指定をした場合にうまく動作しなかったのが少し解せない感じでした。

MacでXtionを動作させる

2012-01-18T13:12:00.001+09:00


Macでの動作もしておこうと思ったので

ここ

を参考にしました。

前準備


portが1.9だと失敗したので2.0系のupdateから開始


sudo port selfupdate
sudo port install libtool
sudo port install libusb-devel +universal
かなりインストールに時間がかかりました＞＜。ドライバ等
本家のunstableからMacOS用のopenni-bin-dev-macosx-v1.5.2.23.tar.bz2nite-bin-macosx-v1.5.2.21.tar.bz2sensor-bin-macosx-v5.1.0.41.tar.bz2をダウンロードしてくる。それぞれinstall.shが存在するのでそれらを実行。これでOKでした。sudoが必要なものはsudoで行なってください。通常のSampleはこれで動作するのですがJava実行だと
java.lang.UnsatisfiedLinkError: no OpenNI.jni in java.library.path
が出てしまいます。
java -Djava.library.path=/usr/lib -jar jarファイル
で動作しました。Mac miniですが640x480だと重くてデータを飛ばせなかった＞＜。

Xtionがやってきた。

2012-01-09T14:13:00.000+09:00


Xtionがやってきたので、少し触ってみる。
XtionはKinectと同様にOpenNIを利用したモーションキャプチャーです。
Kinectは現状ではハードウェアが商用利用は不可ですが、Xtionは商用利用が可能です。

特に商用利用が目的ではないのですが、
USBバスで動作するのでこちらを購入したというところが強いのですが、
Kinectで行うとハック感がなくなるかな？というところで、
Xtionにしました。Xtion Pro Liveです。

OpenNIのインストール


まず付属してたDVDだと古そうだったので
本家からPackageを入れます。
古い記事だと64ビットだと動作しないみたいな話がありますが
この時点では動作するようです。

Macについては後述しておきました。


どんなものを作るのか？


友人が電子書籍系をやっているのだけど「マイノリティ・リポートやろうぜっ」って感じだったので
そういうものを作ろうと思った。
動かすのはiPadのようなタブレットだった。iPadにOpenNIとか非現実的な事だし、
私自身がxcodeでソレ系のアプリを作る気もないし、
とにかく相手にプッシュする方法が必要だったので、
相手がサーバでこっちがクライアントという選択肢だと、
こっちから接続しなきゃいけないし、何かと不便に感じた。

ちょうどRFCにWebSocketが載ったところだったのでこっちをサーバにしてWebSocketを実装する事にした。
Javaで動作するものを作ろうと思ったのでJettyでWebSocketサーバを作成して、
そこから何らかのクライントでWebSocketにアクセスしてもらって通信をやろうと思った。

WebSocketを作る


ここを参考に
サーバサイドは作成した。

実際はChatRoom的な管理は必要ないわけだけど、
例えばHTML(WebSocketでアクセスできるもの)で資料を作って
それをみんなの端末で見る～。。。なんてI/Fも想定してたりしてなかったり。

HandTrackerを発見！


はじめはサンプルの「UserTracker」を元に作り始めた。
Userを認識してSkeletonCapabilityで骨格を認識させて、
それで手の動きを見ようと考えていたんだけど、
「GestureGenerator」「HandsGenerator」が存在する事を知り
ココに「HandTracker」のサンプルがあるので拝借。
※っていうか最新のパッケージならローカルにも展開されてます。

サンプル読んだおかげで大体の動作は理解できた。

・Contextやら読み込んで各Generatorを初期化
・イベントに対してObserverを作成(コールバック)
・ループして
・ノードを更新してノードからデータを取得
・何かやる

みたいな流れみたい。


HandsGeneratorでジェスチャーを認識


このサンプルにGestureGeneratorに対して"Click"とあり、
これがセンサーに向かって手をpullしたり、調べた限りだと"Wave"などを認識できるようなんだけど
「これにLeftとかRightをかあれば楽？」と考えたりもしたけど

この辺りを読むと
サンプルの通りGestureGeneratorで認識させてからHandsで行うのが通常の使い方みたい。
サンプルは

・GestureGeneratorに"Click"を登録
・イベント発生でHandsGeneratorのトラッキングを開始
・Update系のイベントでそのポイントを取得して履歴に残す
・ポイントの履歴を描画
・手の認識が終わったらGestureGeneratorの"Click"を再度登録

みたいな流れ。
Updateで履歴があるのでこれを使って


 public static SocketType getType(float modX, float modY, float modZ) {

  SocketType type = SocketType.NONE;
  if ( Math.abs(modY) < margin ) {
   if ( modX < (movement*-1) ) {
    type = SocketType.LEFT;
   } else if ( modX > movement ) {
    type = SocketType.RIGHT;
   }
  } else if ( Math.abs(modX) < margin ) {
   if ( modY < (movement*-1) ) {
    type = SocketType.DOWN;
   } else if ( modY > movement ) {
    type = SocketType.UP;
   }
  } else {
   if ( modZ < (movement*-1) ) {
    type = SocketType.ZOOMIN;
   } else if ( modZ > movement ) {
    type = SocketType.ZOOMOUT;
   }
  }
  return type;
 }
みたいな座標の移動量を計算させて、どっちに動いているかを判定※SocketTypeってのはオリジナルのEnumです。あとはソケットで送るだけ。まぁこれだと調整値によって認識とかしまくりとか認識しないとかさんざんなのでもう少し何かする必要があるかな？感想
何かライブラリ使ってもう少し何かできそうな流れだったけど、自分で理解するのも含めて作ってみた。サンプルを理解したところをもう少し書きたかったんだけど、またそれは別の機会でもあれば。

undefinedという値について

2012-01-06T22:32:00.000+09:00

引数に「undefined」って指定してあるのなんで？と言っていた人がいた。jQueryの話だったけど、JavaScriptの癖(癌)を利用したトリックだと推測。undefinedはグローバルスコープの変数だから、引数に対してundefinedを代入して、ローカルスコープに持って来てロジックによっては処理を早くしたり、undefinedの値をローカル内で保証できる状況になるという仮説を立てたけど、「引数間違って指定したら失敗するんじゃね？」と思ったので試してみた。


<script type="text/javascript">
<!--

function undefinedTest1(arg1) {
 if ( arg1 === undefined ) {
  console.log("1");
 }
}

function undefinedTest2(arg1,undefined) {
 if ( arg1 === undefined ) {
  console.log("2");
 }
}

var val;
console.log("undefined");
undefinedTest1(val);
undefinedTest2(val);

console.log("変数に値を入れてみる");
undefined = true;
undefinedTest1(val);
undefinedTest2(val);

console.log("第2引数に値を入れてみる");
undefinedTest2(val,"test");

// -->
</script>

でコンソールは


undefined
1
2
変数に値を入れてみる
2
第2引数に値を入れてみる

まず、関数が正常に動作している事を確認。グローバルスコープのundefinedに値を代入すると関数１の値は不可能になり、間違って引数指定をすると、undefinedに値が代入されて、関数２もアウト。まぁ十分テストされていれば第２引数の指定はないだろうから危なくはないのかな？思ったとおりの動きだったのでひとまず満足。

リストボックスを引っ張って更新

2011-12-05T10:42:00.001+09:00


スマートフォンでSNS系のアプリを使っていて
「更新ボタン」を押しているとなんとなく未来感がない。
Twitterの公式アプリ等はそうだが、上側に引っ張るとリストが更新される。

WindowsPhoneでもこれを行なってみようと思ったら

高橋忍氏のブログや
その書籍プログラミングWindowsPhoneでも紹介されています。

んじゃ書く必要ないじゃん。と思いましたけど少し書いてみます。


スタイルを変更


ListBoxの中身はScrollViewerで構成されているので、
ScrollViewerのVerticalCompressionというVisualStateGroupを利用して
ListBoxの状態を把握しようってことですね。

上記のブログにはPageごとの設定とありますけど
私的にはアプリケーション内で指定したいのでApp.xmlにApplication.Resoucesとして定義しています。


    <Application.Resources>
        <Style TargetType="ScrollViewer">
            <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="ScrollStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="00:00:00.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Scrolling">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalScrollBar"/>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalScrollBar"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NotScrolling"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="VerticalCompression">
                                    <VisualState x:Name="NoVerticalCompression"/>
                                    <VisualState x:Name="CompressionTop"/>
                                    <VisualState x:Name="CompressionBottom"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="{TemplateBinding Padding}">
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                                <ScrollBar x:Name="VerticalScrollBar" HorizontalAlignment="Right" Height="Auto" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Opacity="0" Orientation="Vertical" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{TemplateBinding VerticalOffset}" ViewportSize="{TemplateBinding ViewportHeight}" VerticalAlignment="Stretch" Width="5"/>
                                <ScrollBar x:Name="HorizontalScrollBar" HorizontalAlignment="Stretch" Height="5" IsHitTestVisible="False" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Opacity="0" Orientation="Horizontal" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{TemplateBinding HorizontalOffset}" ViewportSize="{TemplateBinding ViewportWidth}" VerticalAlignment="Bottom" Width="Auto"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
この記述によって、アプリケーションのすべてのScrollViewerで圧縮した場合のイベントの発生が可能になります。※私には縦の必要がないのでVerticalのみです。ListBoxから取り出してイベントを登録
上記ブログにある通り(そのままのコード)ListBoxからScrollViewerを取り出して変更があったというイベントに登録します。
        private void ListBoxCompressionHandling(ListBox targetlistbox)
        {
            VisualStateGroup vgroup = new VisualStateGroup();

            // ListBox の初めに定義されている ScrollViewerを取り出す 
            ScrollViewer ListboxScrollViewer = (ScrollViewer)VisualTreeHelper.GetChild(targetlistbox, 0);

            // Visual State はコントロールテンプレートの常に最上位に定義されている 
            FrameworkElement element = (FrameworkElement)VisualTreeHelper.GetChild(ListboxScrollViewer, 0);
            // Visual State を取り出しその中から 縦横Compression のVisualStateを取り出す 
            foreach (VisualStateGroup group in VisualStateManager.GetVisualStateGroups(element))
                if (group.Name == "VerticalCompression") vgroup = group;

            //縦横Compressionの状態が変わった時のイベントハンドラ 
            vgroup.CurrentStateChanging += new EventHandler<VisualStateChangedEventArgs>(ScrollViewer_CurrentStateChanging);
        } 
でイベントは
        void ScrollViewer_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
        {
            switch (e.NewState.Name) 
            { 
                case "CompressionTop":
                    break; 
                case "CompressionBottom": 
                    break;
                case "NoVerticalCompression":
                    break; 
                default: 
                    break; 
            } 
        }
で、この関数をLoadなどのイベントで呼び出すのですがLoadは何度も呼び出されるので、画面遷移が多いような画面だったら重複して登録してしまうので一度だけ登録するようにしておくのが良いでしょう。で何がしたいか？
これだと高橋忍氏のブログそのまま(アプリで登録した位の違い)です。私的にはスクロールを「グッ」とした時にだけ、更新をしたいのです。このままだと少しでも上にするだけでイベントが発生します。んじゃ、圧縮イベントと圧縮が終わったイベントの時刻で処理してみよう！アプローチ

        DateTime startTopTime = new DateTime(0);
        DateTime startBottomTime = new DateTime(0);
        DateTime endTime = new DateTime(0);
        private void InitCompression()
        {
            startTopTime = new DateTime(0);
            startBottomTime = new DateTime(0);
            endTime = new DateTime(0);
        }
        private Boolean IsCompressionTop() {
            if (!startTopTime.Equals(new DateTime(0)))
            {
                TimeSpan ts = endTime.Subtract(startTopTime);
                System.Diagnostics.Debug.WriteLine(ts.TotalSeconds);
                if (ts.TotalSeconds >= 0.9)
                {
                    return true;
                }
            }
            return false;
        }

        void ScrollViewer_CurrentStateChanging(object sender, VisualStateChangedEventArgs e)
        {
            switch (e.NewState.Name) 
            { 
                case "CompressionTop":
                    startTopTime = DateTime.Now;
                    break; 
                case "CompressionBottom": 
                    startBottomTime = DateTime.Now;
                    break;
                case "NoVerticalCompression":
                    endTime = DateTime.Now;
                    if (IsCompressionTop())
                    {
                        MessageBox.Show("できたよー");
                    }

                    InitCompression();
                    break; 
                default: 
                    break; 
            } 
        }
こうしてみると、確かにグッとした後にイベント発生ができるんだけどリストを離して戻った時の判定になってしまう。できれば、グッとしている間にイベントを発生したい。。。。もっといい方法があるような気がする。

WindowsPhoneの初期化と通信でトラブルヽ(´Д`；)ﾉ

2011-11-19T09:41:00.001+09:00


ちょっと失敗したので書いておく。
WindowsPhoneにおいて、通信は非同期処理しかサポートしていない。
ってのは有名な話だと思いますが、
OAuth認可の部分で少し失敗したのでメモしておく。

Access Tokenが切れていた場合、
Refresh Tokenを用いて再度トークンを取得してくる必要があります。

私はリフレッシュトークンを実装する前

・トークンが存在したら、アプリのメニュー画面
・トークンが存在しなかったら、ログイン画面

としていました。

これに
・トークンが存在しても、期限が切れていたらリフレッシュトークンで再発行処理
という部分を追加しました。

しかし、何度やってもResponseが返って来ませんでした。

結論から言うと既存処理の遷移の為、Defaultの画面が存在しませんでした。
なので画面用のスレッドが作成されず、
そのまま通信を行なってしまって、スレッドが同じになって、
同期処理とみなされていた。(なんかもう少し細かい話がありそうですけど)

って感じのようです。
Defaultを設定してあげて、そこから再発行をしたらすんなり動きました´ω｀
この画面がよくありがちな、アプリのロゴを出す画面でして
ほぼ見えない画面なのですが、何かしっくりこないです。

※お陰でBackで終了するという処理も必要になりました。
本人が推奨はしてません


一旦APIキーのみでアクセスできる検索画面にして、
ユーザにログインボタンを提示する画面を作って無駄のないようにしようと考えています。

objectのjsonデータを変換する。

2011-10-30T14:29:00.004+09:00


Google+のAPIの戻り値に"object"というオブジェクトデータがあり、
これがC#の予約後に引っかかってしまい、NewtonsoftのJSONパーサで解析をしていると無理になります。

https://developers.google.com/+/api/latest/activities#resource

なので


            private ObjectData objectValue;
            [Newtonsoft.Json.JsonPropertyAttribute("object")]
            public virtual ObjectData Object
            {
                get
                {
                    return this.objectValue;
                }
                set
                {
                    this.objectValue = value;
                }
            }
とすればOKです。

WindowsPhoneで最初の画面を選ぶ

2011-10-28T08:58:00.000+09:00


OAuth認証は基本的に最初の一回でOKのはずです。
なのでアクセストークン(もしくはリフレッシュトークン)を持っていて
通信可能な状態だった場合、別の画面を表示する必要があります。

画面を作る


まず縦向きのページを作成します。




分岐を作成する


App.xamlに対して、Startupイベントを指定します。


<Application 
    x:Class="Ziro.PlusPhone.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    Startup="Application_Startup">
で、App.xzml.csにコードができるので
        private void Application_Startup(object sender, StartupEventArgs e)
        {
            if (oauth.Load())
            {
                RootFrame.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
            }
            else
            {
                RootFrame.Navigate(new Uri("/LoginPage.xaml", UriKind.Relative));
            }
        }
という風に条件式を作ってあげて、遷移先を変更してあげます。私の場合、OAuth認証があるかどうかで判断しています。デフォルトの画面を読み込ませない
次にプロジェクトの「Properties」内にあるWMAppManifest.xmlのTasksタグにあるDefaultTaskのNavigationPageを削除します。
    <Tasks>
      <DefaultTask Name="_default" NavigationPage="/MainPage.xaml"/>
    </Tasks>
↓
    <Tasks>
      <DefaultTask Name="_default"/>
    </Tasks>
これをやっておかないと強制的にここが優先されます。これでOKです。

非同期で結果を受け取る

2011-10-27T21:41:00.000+09:00


WindowsPhoneの非同期処理の理念は伝わっているけど、、、
C#の言語理解が足りないから実装方法がわからない。
GoogleのAPIの実装を見た時に「うわっこんな実装になるのか。。。なんで？」って
ところが理解できてなかったと再度思うことになった。

何がしたいか？


WindowsPhoneでGoogle+にアクセスしたい。
そこで処理を書いていくと

1.OAuthの部分（＋その後の処理）をGUIと切り離したいのでライブラリ化しておきたい。
　－だけどアクセスは非同期処理になるので、データが返ってくるタイミングがわからない。
2.なのでそのデータをどう使うかはPhone側関数の処理にしたい。
3.その関数の引数はJsonの生データ(string)ではなくて、型が決まった状態で受け取りたい。
　－Newtonsoft.JsonのDeserializeObject()を呼び出すのでT型で呼び出したい。

この位の知識で実装してたら、あれ？あれ？って感じになったのでまとめておく。

レスポンスデータ取得後の呼び出し


最終的にT型で関数を呼び出すという目標に対して、
レスポンスが受けとったデータを呼び出すので


        public IJsonResult target;

        string = {レスポンスデータ};
        target.SendJson(data);


みたいな実装が必要なのでまずインターフェースを定義してみた。
これは生成時にT型が必要なのですが、呼び出し時にtargetをインスタンス化する為です。

SendJson()の実装


で、SendJson()の実装はジェネリックを利用して


    public class JsonResult<T> : Ziro.OAuth.IJsonResult where T : JsonData 
    {
        private Action<T> action;
        public JsonResult(Action<T> lambda )
        {
            action = lambda;
        }
        
        public void SendJson(string responseData) {
            //データを解析
            T jsonData = JsonConvert.DeserializeObject<T>(responseData);
            action(jsonData);
        }
    }


として、文字列をT型でデシリアイズして、それを引数にaction()を呼び出しています。
action()は引数がT型のラムダ式を引数に持つ式をコンストラクタで受け取ってます。

リクエストの呼び出し


        private void GetMe()
        {
            oauth.target = new JsonResult<GooglePlusData.Person>(GetPeople);
            oauth.GetPeople("me");
        }

        private void GetPeople(GooglePlusData.Person person)
        {
            //元のスレッドでメイン画面に遷移
            this.Dispatcher.BeginInvoke(() => NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative)));
        }


って感じでOKです。
GetPeple()はUrlを作成して、GETしています。

これでJsonResultの生成時に型情報と受け取りの実装を渡します。

総括


一瞬、OAuthを直接行う部分のインスタンス化を行う時にT型を使おうとしたのですが、
アクセストークンをやり取りするのがだるかったのでこうしています。
※おそらく後で分散ストレージを使うので、そうしなくても良かったかな？とも思ってます。
こうしておくことで多分他のOAuthを作りたい感じになった時に楽になるかな。。。と勝手に思ってます。

ここに行くまでﾌﾞﾋｰって感じでした。
C#の知識が乏しい状況での実装なので、本当にこれでいいのかも不明です。


JavaScript辺りのゆるふわな感じと、Javaの静的な感じが実現できていて素晴らしいなぁ。
結論としては、、、λｶﾜｲｲ。。。

WindowsPhoneでGoogle+に対してOAuth認証

2011-10-26T22:33:00.000+09:00

Google+APIでの認可を書いて、
後日WindowsPhoneへの移植を試みた。。。

しかしそれと同時に衝撃の事実。

DLLの参照設定ができないのだ。

「WindowsPhoneアセンブリのみと連動・・・」・・・なんとっ！

ということでOAuthの生コードを書くことにした。

何か調べるとライブラリは存在するのだが、OAuth1.0っぽいもの(Twitter系)が多くて

勝手に使い物にならないと判断した。

まぁC#触るの自体久しぶりだし、言語になれる意味でやっていきますか。

ってことで結局Google+のOAuthのページを読むことにした。

http://code.google.com/intl/ja/apis/accounts/docs/OAuth2.html

画面の作成

画面を作ります。

OAuthにはブラウザアクセスが必要なので、ブラウザを準備して
作成した認証コードが必要になるのでテキストと認証用のボタンを準備しておきます。

認証用のURLの発行

上記のURLにある通りにアクセスするURLを作成します。

https://accounts.google.com/o/oauth2/auth?
  client_id=xxxxxxx.apps.googleusercontent.com&
  redirect_uri=urn:ietf:wg:oauth:2.0:oob&
  scope=https://www.googleapis.com/auth/plus.me&
  response_type=code

自分のクライアントIDを添えてブラウザでアクセスします。
scopeに関しては上記のOAuthのサイトでは、別のスコープになってますので注意してください。

これを画面の初期化時にブラウザに設定して呼び出します。
※もちろん本物のアプリは違うタイミングでしょうけど。

こういう風にGoogleの認証ページになります。
認証は前にやった時と同じように行います。で認可が下りると
AuthCodeが発行された画面になります。

アクセストークンを取得する

AuthCodeコードがブラウザ画面に出ますので下にあるテキストボックスに貼付け
「認証」ボタンを押したところで

https://accounts.google.com/o/oauth2/token

のURLに対して

POST /o/oauth2/token HTTP/1.1
Host: accounts.google.com
Content-Type: application/x-www-form-urlencoded

client_id=xxxxxxxxx.apps.googleusercontent.com&
client_secret=xxxxxxxxxxx&
code={AuthCode}&
redirect_uri=urn:ietf:wg:oauth:2.0:oob&
grant_type=authorization_code

というポストを書いてあげます。
「code」は認証した後に発行された認証コードをテキストボックスに設定した値になります。

ここでWindowsPhoneは非同期処理しかないので送信には
BeginGetResponse(),BeginGetResponse()などを利用する必要があります。

これにより

{
  "access_token":"1/fFAGRNJru1FTz70BzhT3Zg",
  "expires_in":3920,
  "token_type":"Bearer",
  "refresh_token":"1/6BMfW9j53gdGImsixUH6kU5RsR4zwI9lUVX-tqf8JXQ"
}

というような文字列が取得できます。
これらの解析にはNewtonsoft.Json.Silverlightを使用しました。

Google+にアクセスする。

さてアクセストークンができたので何はともあれアクセスです。

https://www.googleapis.com/plus/v1/people/me?access_token=xxxxxx

とアクセスしてあげたら自分の情報が取れます。
※meは自分の情報ってことなのでAPI的にはuserIdを指定してあげればOKです。

これでまたJsonが戻ってきますので、解析してあげたらOKなわけです。
OAuth2.0ですので、アクセストークンの時間が切れた場合は
refresh_tokenで再発行を行う必要があります。

その際はアクセストークン時に使用した引数を

refresh_token=1/6BMfW9j53gdGImsixUH6kU5RsR4zwI9lUVX-tqf8JXQ&
grant_type=refresh_token

と変えて再発行すれば再認可は必要なくなります。
※refresh_tokenも期限はあるみたいです。

総括

基本的にはOAuthの説明です。
やったことある方なら通常のGoogleのドキュメントだけでOKだと思います。

詳しいAPIの説明は
https://developers.google.com/+/api/
にあります。

注意すべきは
・現状ではGoogleのクライアントAPIでは、WindowsPhoneアプリは無理なこと。
・WindowsPhoneの非同期等のポリシーなどでWebアクセスが通常ではないこと。
・C#が結構ｲｹﾃﾙ事。
・API呼び出しはBearerを利用した方がいいと思います。
・更新系のGoogle+APIがまだ

WindowsPhoneとC#になれる時間もいるのでゆっくりクライアントを作っていく予定。

さて、ではWindowsPhoneアプリの開発ですね。

.NET(C#) でGoogleOAuthを行なってみる。

2011-10-23T17:07:00.000+09:00

IS12Tを手にいれたけど、何かアプリつくろう！って思って考えてたら
Google+のクライアントがないことに気づいたのでそれを作ってみようと思う。

サンプルを読み込む

とにかくOAuthアクセスを実現する必要があるはずなので
まずはサンプルを取得してきます。

https://developers.google.com/+/downloads
http://code.google.com/p/google-api-dotnet-client/

ここにサンプルとあるのでそれを取得。
※各種OAuthとかの文章ありますけど、ソースとかが古かったりですね。

「Tasks.SimpleOAuth2」というプロジェクトがコンソールでできるやつみたいなので
そちらをスタートプロジェクトにして実行するわけですけど、
「Google.Apis.Samples.TasksOAuth2.ClientCredentials」に
APIキーの設定のがあるの以下のように設定します。



        public static readonly string ClientID = "xxxxxxxx.apps.googleusercontent.com";



        /// <summary>

        /// The OAuth2.0 Client secret of your project.

        /// </summary>

        public static readonly string ClientSecret = "xxxxxxxxxxxxxxxxlOd2y";



        /// <summary>

        /// Your Api/Developer key.

        /// </summary>

        public static readonly string ApiKey = "urn:xxxxxxxxxx";

OAuth用の準備

https://code.google.com/apis/console

に行ってGoogle+APIをONにしておきます。

今は「Courtesy limit: 1,000 queries/day」なので
１日1000回のアクセスまでのようですね。。。。ん？ユーザじゃなくてAPIキーでかな？

API AccessのところにOAuth2.0があるのでそこでキーを発行します。
OAuthでお馴染みのClientIDとSecretですね。

Google PlusのAPIを使ってみる

このサンプルはTasks APIの
PlusのDLLはBinaryサンプルのServiceの中にあります。
これを参照設定して追加してPlusServiceを使えるようにしておきます。





            // Display the header and initialize the sample.

            CommandLine.EnableExceptionHandling();

            CommandLine.DisplayGoogleSampleHeader("Google+ API");

コンソールにGoogleのロゴを出す部分ですね。特に大事なコードではないです。
一応TaskになっていたのでGoogle+に変更。



            // Register the authenticator.

            var provider = new NativeApplicationClient(GoogleAuthenticationServer.Description);

            provider.ClientIdentifier = ClientCredentials.ClientID;

            provider.ClientSecret = ClientCredentials.ClientSecret;

            var auth = new OAuth2Authenticator<NativeApplicationClient>(provider, GetAuthorization);

ここでClientIDとSecretを使ってURLを作成している処理です。
GetAuthrorizarionは、サンプルであるProgram.csにあります。



        private static IAuthorizationState GetAuthorization(NativeApplicationClient arg)

        {

            // Get the auth URL:

            IAuthorizationState state = new AuthorizationState(new[] { PlusService.Scopes.PlusMe.GetStringValue() });

            state.Callback = new Uri(NativeApplicationClient.OutOfBandCallbackUrl);

            Uri authUri = arg.RequestUserAuthorization(state);



            // Request authorization from the user (by opening a browser window):

            Process.Start(authUri.ToString());

            Console.Write("  Authorization Code: ");

            string authCode = Console.ReadLine();

            Console.WriteLine();



            // Retrieve the access token by using the authorization code:

            return arg.ProcessUserAuthorization(authCode, state);

        }

NativeApplicationClient を元にOAuthにアクセスするURLを作成していきます。
IAuthorizarionStateでTasksのGetStringValue()を読んでいるのでPlusServiceにしてあげます。
実行するとこんな感じです。

ReadLine()でOAuthの認証コードを待ち受けます。
※実際の実行タイミングはFetch()するまでアクセスはされません。

Process.Start()で作成したURLにアクセスしますのでこれと同時にブラウザが立ちあがってるはずです。

アクセスを許可するとキーが発行されるのでそれをコンソールにコピペして、Enterします。
タスクに対して



            var service = new PlusService(auth);

            Person me = service.People.Get("me").Fetch();

            CommandLine.WriteLine("     ^2" + me.Name);



            ActivitiesResource.Collection collection = new ActivitiesResource.Collection();

            ActivityFeed feed = service.Activities.List("me",collection).Fetch();

            foreach (Activity list in feed.Items)

            {

                CommandLine.WriteLine("     ^2" + list.Title);

            }

            CommandLine.PressAnyKeyToExit();

と行なってみたら、自分の投稿を取得できました。

はじめ自分のIDを指定して検索してたんですが

「うんなもんOAuthじゃねーヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ」だったんですけど"me"で取得できました。

一旦これでアクセス自体はできたみたいですね。

途中、OAuthとGoogle+のAPIと.NETのAPIを読んでいてパニック起こしました。

誰がどれを作っているのかわからなくなったからです。

上位のクラスとか結構しっかり作ってある感じなので

簡単にOAuth(Google+API)にアクセスすることができます。

これをネタにWindowsPhoneクライアントを作るっていう大きな作業が待ってます。

Jenkinsを利用したJSUnitの実行

2011-10-12T07:07:00.018+09:00

普段、Java周りではJenkinsを利用していますが、
静岡ITPro勉強会インフラ部でBTS周りをやる事になったので、
CIの発表としてJenkinsの利用方法をやる事になりました。

通常Javaでテスト作ってMavenで構成して、SVNでつなげるというパターンが多いのですが
勉強会で発表する事もあり(Java屋さんがいない)少しいつもと違う環境で動作させる事にしました。
という事でJavaScriptのプロジェクトを準備して、GitHubに連携って方法を行なってみる事にしました。

継続的インテグレーションの意義

Jenkinsはソース管理システムからソースコードを引っ張ってきて、テストを実行してレポートをする。
というのが王道の使い方です。
これを常時繰り返す事で、常にソースコードはテストを常に実行され、健全な状態に保って行く事が可能です。
Cronみたいなイメージでも使用できますが、レポート等も取れ、可視化できるので
インフラ周りでも使う事は可能だと思います。

開発の現場(出先など)で苦労する点としては
・ビルドサーバを準備できない
・そもそもテストが自動化できてない＞＜。
等と苦労する点があります。

管理者自身を助ける(単体テストの可視化と報告)優秀なやつなのですが
案外管理者等に伝わらない事が問題だと思っています。
※まぁこれは私のちから不足なのですが。

インストール

通常私の開発環境周りではTomcatが多いのですが、
軽いほうがいいかな？っと思い、軽量なコンテナのJettyを採用してみました。

ここからダウンロードしてきます。
ポート変更はetc/jetty.xmlでport(デフォは8080)の部分を変更すれば可能です。

「java -jar start.jar」
※ポートを開ける権限が無ければsudo等で実行してください

でサーバは起動します。
Jenkinsをダウンロードしてきます。

war形式で配布されています。※一瞬インストーラーになってたので焦った＞＜。
「jankins.war」をJettyの「webapps」ディレクトリに展開すると

「http://localhost:8080/jenkins/」で起動画面をみる事ができます。

ジョブ

ジョブを作ります。
通常はMavenを使って構成しているのですが、その辺りに詳しくないとわかりづらいと思ったので
やはりここはフリースタイルで行なってみる事にした。

JSUnitでテストを出きるようにする

Javaのテストは良く書いていますが、JSUnitでテストをするのは初でした。
なのでまずJSUnitを準備してテストできる状況にします。

http://sourceforge.net/projects/jsunit/files/jsunit/2.2/

解凍を行ったら
app,css,images,java,build.xml,testRunner.html
をプロジェクトに置きます。
Javaは通常実行時には要らないのですが、JenkinsでJSUnitプラグインを利用する際に指定するので必要です、
build.xmlはserver.xml等と名前を変えておきます。
※後述するビルドを「build.xml」とする為で、どちらも任意の名前で良い。
配置するディレクトリは「jsunit」とか「test」とかで良いと思います。

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

/**
* テストの一覧
*/
function suite() {
 var suite = new top.jsUnitTestSuite();
 suite.addTestPage('testDesigner.html');
 return suite;
}

</script>

というSuiteを用意して増えた時でも大丈夫な状態にしておきます。

<script language="JavaScript" type="text/javascript">
// テスト用のコード
function testMethod() {
assertEquals($('.item').length,3);
assertNotNull($('.content-box'));
}
</script>

というテストメソッドを作っておきます。他のxUnitと同じ感じですね。

でファイルシステムでも良いので「testRunner.html」にアクセスします。

testRunner.htmlからファイルを指定してRunするとこのようにテスト結果が出力されます。

これでテストする準備は整った。

プラグインを入れよう！

普段使っている時でもJenkinsのプラグインには様々なものがあります。
ソース管理はほとんどサポートしていますし、CheckStyle等のコードチェッカー等も充実しています。

今回はGitHub（＋Git）とJSUnit（＋xUnit）のプラグインを入れます。

ソースを取ってこよう！

ジョブの設定画面で「ソースコード管理システム」で「Git」を選択します。
そこにGitHubにあるリポジトリを指定しておきます。

この時点でビルドすると「ワークスペース」にソースを持ってこれるはずなので
それを確認しておくのが良いでしょう。こんな感じです。

ビルドを設定してテストしよう！

テストを実行する為、ビルドはAntを呼び出します。
Ant呼び出しを設定して、testをターゲットにしておきます。
Antの実行パス等はJenkins自体の設定で指定できます。

ビルドファイルなのですがリポジトリ等に置いてあるAntの設定ファイルを叩きます。
「./{projectName}/test/build.xml」
とかになると思います。

build.xmlは以下※展開してください。


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

<project name="JSUnitForJenkins" default="test" basedir=".">
  <description>
    Jenkins 上で JSUnit によるユニットテストを行う。
  </description>
  <property environment="jenkins"/>

  <!-- プロジェクトのホームディレクトリ -->
  <property name="home"
            location="${jenkins.WORKSPACE}/drag-designer"/>
  <!-- テスト対象のページ -->
  <property name="testPage"
            location="${home}/test/testSuite.html"/>
  <!-- JSUnit の動作するポート番号 -->
  <property name="jsunitPort"
            value="8090"/>
  <!-- Firefox のパス -->
  <property name="firefox"
            location="/Applications/FireFox.app/Contents/MacOS/firefox"/>
  <!-- JSUnit のホームディレクトリ -->
  <property name="jsunitHome"
            location="${home}/test"/>
  <!-- ログを出力するディレクトリ -->
  <property name="logsDirectory"
            location="${home}/test/logs"/>
  <!-- JSUnit 形式のログファイルを JUnit 形式のログファイルに変換する XSLT -->

  <!-- TestRunner -->
  <property name="testRunner"
            location="${jsunitHome}/testRunner.html"/>
  <!-- JSUnit Server を起動する build.xml -->
  <property name="buildScript"
            location="${jsunitHome}/server.xml"/>

  <target name="test">
    <mkdir dir="${logsDirectory}"/>
    <delete includeemptydirs="true">
      <fileset dir="${logsDirectory}" includes="**/*"/>
    </delete>
    <makeurl file="${testRunner}" property="testRunnerURL"/>
    <ant antfile="${buildScript}" dir="${jsunitHome}" target="standalone_test">
      <property name="browserFileNames" value="${firefox}"/>
      <property name="port" value="${jsunitPort}"/>
      <property name="logsdirectory" location="${logsDirectory}"/>
      <property name="url" value="${testRunnerURL}?testPage=${testPage}"/>
    </ant>
   
  </target>
</project>

プロジェクトのホームを設定して対応のSuiteのページを設定。
ブラウザを指定、ログ出力(テスト結果)の箇所、TestRunnerの指定、
JSUnitをコピーした際に名前を変更しておいてserver.xmlを指定します。

この設定でJenkinsはワークスペース上に取ってきたソースを元にJSUnitの実行を行います。
途中Firefoxで実行していますが
これらを増やして、クロスブラウジング等のテストを行うのも可能です。

処理結果をリポートする

Build後の処理として
「Publish testing tools result report」を選択して
JSUnit-2.2を選択して追加します。

**{projectName}/test/logs/*.xml

と、ビルドした際のテスト結果を出力した位置を指定します。これでOKです。

ジョブ実行

これで準備完了ですのでジョブを実行します。
実行時にFirefoxが起動してびっくりしますけど＞＜。

で結果がこれ。

テスト自体はしょぼいですけど、できましたー

問題

・クロスブラウジングのテスト何かもできるなぁ〜と思っていたのですが
　通常動作しているJenkinsサーバはXがないけど動作するのかな？

・今回Firefox使いましたけど、バージョンアップとかの画面出てしまうと
　テスト自体ストップする状況になってしまうような気がする

おまけ

・本当はMylynとGitHubをつなげたIssue管理をやろうとしたのですが
　それは後日ブログに書きます。
・私個人としてはCIでパトランプを回すのが目標なのですが
　後日の勉強会でやった事ある方にパトランプを回す所を見せてもらいました！

パトランプの動画

やってみて、興味を示してくれた方が何人かいらっしゃって
既に実行された方もいるみたいなので、やって良かった！と思いました。
※パトランプの成果が一番大きいかも＞＜。

ブラウザ三国志経路算出：ChromeExtensionを改良

2011-06-20T22:55:00.009+09:00

さて前回ダイクストラで最短経路を算出してみました。
このままではもちろんダメで何がダメかというと、
マップ見るたびに経路計算をしてしまうというダメダメな仕様。

このままでは通常時マップを見る時に計算してしまう。
ただ線引くだけのくせに、、、ｼﾞｬﾏ！ｱﾝｲﾝｽﾄｰﾙ。である。

なのでGUIを作って(無駄に画面だけあったけど＞＜)
そこでON/OFFできるようにする。せっかくなので座標を貯めこむ。

で座標を指定して経路を算出！みたいな感じである。

前回利用したcontent_scriptsとページ間のリソースの共有は基本的にできません。
コンテキストスクリプトは拡張機能というよりWebページに埋め込む。という仕組みである為、
拡張機能とは隔離されているもの。という風にできています。

そこでbackgroundという仕組みを利用します。manifest.jsonに以下を追加します。


  "background_page": "html/background.html",

全体はココ

で、イベントによる受け渡しをやるわけですが、以下が概要です。

こういう風にしたいと思います。

座標を保存する

まず、content_script により、51x51マップの時に、座標を吸い上げて以下を行います。


 var map = document.getElementById( "map51-content" );
 if ( map == null ) {
  return false;
 }

 var pointArray = [];
 var mapUlList = map.getElementsByTagName("ul");
 for ( var ulIdx = 0; ulIdx < mapUlList.length; ++ulIdx ) {
   var mapLiList = mapUlList[ulIdx].getElementsByTagName("li");
   for ( var liIdx = 0; liIdx < mapUlList.length; ++liIdx ) {
     var linkTag = mapLiList[liIdx].getElementsByTagName("a")[0];
     var point = createPoint(linkTag);
     pointArray.push(point);
   }
 }

 //バックグラウンドで保存する
 chrome.extension.sendRequest( { 
   action : "save" ,
   args : [pointArray]
  } , function( response )  {
   //戻り値処理
   console.log(response);
  }
 );

以前処理した時と同じように座標オブジェクトをcreatePoint()によって作成しています。
ここで重要なのは、chrome.extension.sendRequest()により、イベントを発生しています。

これはbackgroundで以下のように処理して、イベントを待機しています。


var CMD = {
    isSaveMode    : isSaveMode ,
    save      : save ,
    analysisDijkstra : analysisDijkstra 
};

function init() {
    chrome.extension.onRequest.addListener( function ( message , sender , sendResponse) {
        var retVal = CMD[message.action].apply(this,message.args); 
        sendResponse( { values : retVal } );
    } ) ;
};

backgroundの処理はブラウザが立ち上がった瞬間に始まりますので
そこでinit()を呼び出してあげます。
CMDはmessageによりメソッド名を送ってそれを実行する為の配列ですね。
自分で判定文を作って、関数を作っても良いのですが、こうしておくと、やりとりが増えても大丈夫です。

listenerですのでsendRequest()を呼んであげたらここが呼び出されるので
「save」というactionを呼び出してる感じ。argsにはオブジェクトのリストを渡してます。

ここでオブジェクトに変換せずにそのままHTMLのDOMを送りたい所ですが、
この通信手段にはJSONが使われているみたいで、その引数の変換時にデータ内に改行が存在してしまい、変換に失敗するようです。

で受け取ったbackgroundはリストにより、座標を保存します。


function save( mapArray ){
 for ( var idx = 0; idx < mapArray.length; ++idx ) {
  var point = mapArray[idx];
     localStorage[point.x + ":" + point.y] = JSON.stringify(point);
 }
};

こんな感じですね。

localStorageは「WebStorage」と呼ばれるHTML5的な新しい技術で拡張機能として専用のサンドボックス内にデータを保存するような仕組みです。
配列と同じようにして保存する事が可能です。
"他のブラウザで、、、"って一瞬思いましたが、冷静に考えればChromeExtensionでした＞＜。

localStorageには文字列が保存できるので JSON.stringify(point);で文字列にして保存しています。
※使っている場所ではJSON.parse()を実行しています。

これで座標を保存ができるようになったわけです。
実際にはGUIを利用して、「保存モード」かを判定して処理を行っています。
※それも通信とlocalStorageを利用してから実現しています。

経路の計算を行う

これで十分座標は保存できたと考えて、
次は画面操作との兼ね合いです。とは言っても簡単なHTMLですので、そんなに難しい事はしていません。

こういう画面です。
ソースはココ

※経路表示はまだ実装してないです＞＜

この画面から経路算出の為に座標をbackgroundに渡して
※座標は保存するようにしたので、引数では渡してませんけど＞＜
そこから経路算出を行っています。そこから戻り値で、経路情報を返しています。

ソース自体はgithubにすべておきました。
ダイクストラの大部分は変更していませんが、

・51x51の配列を使わないようにした。
・座標データはlocalStorageにある

って事で、直接座標データを取って処理しています。
※色々改良する余地はあると思います。

さて、これでWebページの情報を残して処理をするという基本アーキテクトの変更は可能になったわけです。
次回はbackgroundを利用して、経路表示も行いたいと思います。

ブラウザ三国志でダイクストラを行ってみる。

2011-06-17T11:27:00.018+09:00

「ブラウザ三国志」というゲームがあります。
そのゲームでは領地の奪い合い、砦攻略を目指して軍を進めていきます。
基本ゲームはしませんが、「ソーシャルゲーム」という分野においての勉強としてずっと続けています。いやバランス良くて本当に面白い。。。ってそんな事やってる場合じゃない＞＜

ChromeExtentionの仕組みみたいな部分での調査が大きいので「処理速度」や汚さは勘弁してください。あくまでそんな事できるんだ。程度でお読みください。

思い立ち

さてブラウザ三国志で砦攻略で重要になってくるのが、座標計算です。
次の砦に向かうという時に領地レベル☆１をめがけて経路を作ってつなげていきます。
自分１人でやっていくのはいいのですが、「同盟」を組んで同盟員とつなげていくと

「今度ここー」
「次私ここー」

みたいな事が起こってきます。
それを掲示板等で共有して進んでいくわけです。ソーシャルですねぇー。

で「ここ」って決めてく経路があるのです。
で、既にツール等もあるのですが、せっかくだから自分で作ってみよー！って思ったわけです。
ひとまずChromeExtensionで行きます。

今回は簡単に「51x51マップ」内で指定した座標間を結ぶ。をやってみましょう。

動きとしては
・51x51マップ時のみに動作する
　・座標を取得してくる
　・ダイクストラで経路を算出する
　・算出した経路をHTML表示する

って流れですかね。

Chrome Extentionを作成してみよう！

さて、まずはボタンを表示してみましょう。
ここを元に構成を勉強して、、、とひとまずHTMLを書けました。

こんな感じ。

ブラ三おなじみのアイコンで、
アイコンをクリックするとHTMLを出力してくれるようになりました。

座標データを収集

さて、このツールは何につけても座標データが存在しないといけません。

って事で
・HTMLのデータを取得
・そこから座標データを抜き出す！
という流れを説明します。

まず51x51マップか、、、という判定。
既存のページ(対象のHTML)の要素を取得するには先ほどのページで使った
「browser_action」とは別に「content_scripts」という仕組みを使用する方法があります。

以下をmanifest.jsonに追記します。


  "content_scripts": [
    {
      "matches": [
        "http://m21.3gokushi.jp/big_map.php*"
      ],

      "js" : [
        "script.js"
      ],

      "run_at": "document_end",
      "all_frames": true
  ]

※要素のつなぎは「,」を忘れずに。

という風に記述します。
matchesはそのページに来たら。jsは使用するJavaScript、run_atはどのタイミングで動作するか？です。
all_frameはすべてのフレームに対して処理を行うか？を記述します。

manifest.jsonは更新したら再読込の必要あります。
これらを思い通りに動かせる(読み込み失敗とかがない)ようになるまでは
Googleのトップページで練習した方が良いかもです。

ブラウザ三国志(mixi)ですが難しいのはページの構成ですね。
URLはもちろんmixiを指しますが、アプリ自体は
「"http://m21.3gokushi.jp/big_map.php*"」にアクセスしています。
なので、それをマッチに入れて、Frameをtrueにしているわけです。

ここまでで、ひとまず「全体地図」のクリックで動作するか確認しておくべきでしょう。

そこまでできたらアプリケーションが使用しているHTMLをハックします。
そうすれば

というコードが存在するので、このデータを


var map51 = document.getElementById( "map51-wrapper" );
if ( map51 == null ) {
  return;
}

という感じでデータを取得してきます。
その中に


<a 
href="/land.php?x=-22&y=-52#ptop" 
onmouseover="return gloss('

<dl class="bigmap">
<dt class="bigmap-caption">空き地</dt>
<dd class="bigmap-subcap">&nbsp;</dd>
<dt>座標&nbsp;/&nbsp;距離</dt>
<dd>(-22,-52)&nbsp;/&nbsp;[35.36]</dd>
<dt>戦力</dt>
<dd>★</dd>
<dt class="bottom-popup-l">資源</dt>
<dd class="bottom-popup-r">木1&nbsp;岩0&nbsp;鉄0&nbsp;糧0</dd></dl>'

);" onmouseout="nd();">
1
</a>

というデータがありますので取得します。


// ULタグを取得
var mapUlList = map51.getElementsByTagName("ul");
for ( var ulIdx = 0; ulIdx < mapUlList.length; ++ulIdx ) {
  // 内部のLiタグを取得
  var mapLiList = mapUlList[ulIdx].getElementsByTagName("li");
  for ( var liIdx = 0; liIdx < mapUlList.length; ++liIdx ) {
    // Aタグを取得
    var linkTag = mapLiList[liIdx].getElementsByTagName("a")[0];
    dijkstra.pointArray[ulIdx][liIdx] = createPoint(linkTag);
  }
}

createPoint(linkTag)で座標データを解析しています。


var createPoint = function ( linkTag ) {

  var point = {};
  point.x    = 0;
  point.y    = 0;
  point.team = "";
  point.lv   = 0;

  var lv  = replaceAll(linkTag.innerHTML,"\n","");
  if ( lv != "1" && lv != "2" && lv != "3" && lv != "4" && lv != "5" ) {
    return point;
  }
  point.lv = parseFloat(lv);
  if ( point.lv != 1 ) {
   point.lv = parseFloat(lv) *  parseFloat(lv);
  }
  // 文字列に変換
  var text = linkTag.outerHTML;

  // リンクタグの解析
  var firstIdx = text.indexOf("'");
  var lastIdx  = text.lastIndexOf("'"); 
  var data = text.slice(firstIdx+1,lastIdx);

  data = replaceAll(data,"<","<");
  data = replaceAll(data,">",">");
  data = replaceAll(data,""","'");
  data = replaceAll(data,"&","&");
  data = replaceAll(data,"&n"," ");
  data = replaceAll(data," bsp;"," ");

  var dp = new DOMParser();
  var doc = dp.parseFromString(data, "text/xml");

  var dtTags = doc.getElementsByTagName("dt");
  var ddTags = doc.getElementsByTagName("dd");

  // タグ数回繰り返す
  for ( var idx = 0; idx < dtTags.length; ++idx ) {

    var dtTag = dtTags[idx];
    var tagVal = dtTag.firstChild.data;

    if ( tagVal == "君主名" ) {
      point.team = ddTags[idx].firstChild.data;
    } else if ( tagVal == "座標 / 距離") {
      var tagData = ddTags[idx].firstChild.data;
      var startP = tagData.indexOf("(");
      var endP   = tagData.lastIndexOf(")"); 
      var pointData = tagData.slice(startP+1,endP);
      var pointArray = pointData.split(",");
      point.x = pointArray[0];
      point.y = pointArray[1];
    }
  }

  return point;
};

相手が存在する場合等もありますから、
x,y,同盟名,lv(領地の強さ)を設定したpointオブジェクトを貯めこんでおきます。
パーサを使用していますが、大きなマップ等になったら変更する予定ではあります。
※51x51ではそんなに重くなかった。

。。。さぁこれで座標データの抜き出しはOKです。
ダイクストラを行ってみましょう！

ダイクストラで最短経路を算出

さて座標データはすべて取得できたので、そのデータから最短経路を算出してみましょう。
実際のソースを貼っておきます。



//Map51x51かを確認
var map51 = document.getElementById( "map51-content" );
if ( map51 == null ) {
  return;
}

var MAX_X = 51;
var MAX_Y = 51;

// ダイクストラのロジック
var dijkstra = {};

// 座標データ
dijkstra.pointArray = new Array(MAX_X);
for ( var idx = 0; idx < dijkstra.pointArray.length; ++idx ) {
  dijkstra.pointArray[idx] = new Array(MAX_Y);
}

// 経路算出
dijkstra.getRoute = function(startX,startY,endX,endY){

  // その座標まで行くルート
  var workRouteArray = new Array(MAX_X);
  // 決定している距離
  var pointArray = new Array(MAX_X);
  // すべての配列を初期化
  for ( var xidx = 0; xidx < workRouteArray.length; ++xidx ) {
    workRouteArray[xidx] = new Array(MAX_Y);
    pointArray[xidx] = new Array(MAX_Y);
    for ( var yidx = 0; yidx < pointArray[xidx].length; ++yidx ) {
      workRouteArray[xidx][yidx] = null;
      pointArray[xidx][yidx] = Number.POSITIVE_INFINITY;
    }
  }

  // 作業する座標
  var workPointArray = new Array();

  // 始点オブジェクト
  var nowPoint = dijkstra.pointArray[startX][startY];
  var nowX = startX;
  var nowY = startY;
  var nowLen = 0;

  // 作業用のリストを取得する
  workRouteArray[nowX][nowY] = new Array();
  var nowRoute;

  while ( true ) {

 pointArray[nowX][nowY] = nowLen;
 nowRoute = workRouteArray[nowX][nowY];

    // 近隣の座標を算出
    for ( var addX = -1; addX <= 1; ++addX ) {

      var wkX = nowX + addX;
      if ( wkX < 0 ) continue;
      if ( wkX >= MAX_X ) continue;
     
      // 周りを見渡す
      for ( var addY = -1; addY <= 1; ++addY ) {
       
        var wkY = nowY + addY;
        if ( wkY < 0 ) continue;
        if ( wkY >= MAX_Y ) continue;

        // 既に決定済の場合
        if ( pointArray[wkX][wkY] != Number.POSITIVE_INFINITY ) {
          continue;
        }

        // その座標のルートを取得
        var workRoute = workRouteArray[wkX][wkY];
        // そこに行っていいのか？
        if ( workRoute === undefined ) {
          continue;
        }

        // 作業中の場所を取得
        var point = dijkstra.pointArray[wkX][wkY];

        //既に存在した場合
        if ( workRoute != null ) {
         var workLen = workRoute.length;
         var nowRouteLen  = nowRoute.length;
         //作業用のリストが短い場合
         if ( (workLen - 1) <= nowRouteLen ) {
          continue;
         }

         var workLv = 0;
         //TODO レベル加算を見る必要あり
         for ( var idx = 0; idx < workLen; ++idx ) {
          var point = workRoute[idx];
          var lv = parseFloat(point.lv);
          workLv = workLv + lv;
         }

         if ( (nowLen + parseFloat(point.lv)) > workLv  ) {
          continue;
         }
        }

        // 行けない場所だった場合
        if ( point.lv == "0" ) {
          // 行っちゃダメにする
          workRouteArray[wkX][wkY] = undefined;
          continue;
        }

        var newRoute = new Array();
        for (var i=0, l= nowRoute.length; i<l; i++) {
            newRoute[i] = nowRoute[i];
        }

        //その地点を設定
        newRoute.push(point);
        // 作業用のルートを作成
        workRouteArray[wkX][wkY] = newRoute;

        // 作業の配列に座標を指定
        var workPoint = {};
        workPoint.x = wkX;
        workPoint.y = wkY;

        workPointArray.push(workPoint);
      }
    }

    //console.log(workPointArray.length);
    //for ( var cnt = 0; cnt < workPointArray.length; ++cnt ) {
     //console.log("作業リスト" + workPointArray[cnt].x + ":" + workPointArray[cnt].y);
    //}

    var minLen = Number.POSITIVE_INFINITY;
    var deleteIdx = 0;

    // 作業リスト数回繰り返す
    for ( var cnt = 0; cnt < workPointArray.length; ++cnt ) {
     
     var workPoint = workPointArray[cnt];
        var wkX = workPoint.x;
        var wkY = workPoint.y;
  
     var workRoute = workRouteArray[wkX][wkY];
     var wkLen = 0;

     for ( var idx = 0; idx < workRoute.length; ++idx ) {
      var point = workRoute[idx];
      var lv = parseFloat(point.lv);
      wkLen = wkLen + lv;
     }

     // 設定できた場合
     if ( minLen == Number.POSITIVE_INFINITY || wkLen < minLen ) {
      minLen = wkLen;

      nowX = wkX;
      nowY = wkY;
      nowLen = wkLen;
      deleteIdx = cnt;
     }
    }


    // 行く所がない場合
    if ( minLen == Number.POSITIVE_INFINITY ) {
      break;
    }
    workPointArray.splice(deleteIdx, 1);
    
    // 現在の点を編集
    nowPoint = this.pointArray[nowX][nowY];
 //console.log("[" + nowPoint.x + "," + nowPoint.y + "]" + nowPoint.lv );
    // 終点と同一点だった場合
    if ( nowX == endX && nowY == endY ) {
      // 作業ルートから取得
      return workRouteArray[endX][endY];
    }
  }

  // 決まらなかった場合
  return null;
};

var nbsp = String.fromCharCode( 160 );
// 全ての文字列 s1 を s2 に置き換える
function replaceAll(expression, org, dest){  
    return expression.split(org).join(dest);  
}  

var createPoint = function ( linkTag ) {

  var point = {};
  point.x    = 0;
  point.y    = 0;
  point.team = "";
  point.lv   = 0;

  var lv  = replaceAll(linkTag.innerHTML,"\n","");
  if ( lv != "1" && lv != "2" && lv != "3" && lv != "4" && lv != "5" ) {
    return point;
  }
  point.lv = parseFloat(lv);
  if ( point.lv != 1 ) {
   point.lv = parseFloat(lv) *  parseFloat(lv);
  }
  // 文字列に変換
  var text = linkTag.outerHTML;

  // リンクタグの解析
  var firstIdx = text.indexOf("'");
  var lastIdx  = text.lastIndexOf("'"); 
  var data = text.slice(firstIdx+1,lastIdx);

  data = replaceAll(data,"<","<");
  data = replaceAll(data,">",">");
  data = replaceAll(data,""","'");
  data = replaceAll(data,"&","&");
  data = replaceAll(data,"&n"," ");
  data = replaceAll(data," bsp;"," ");

  var dp = new DOMParser();
  var doc = dp.parseFromString(data, "text/xml");

  var dtTags = doc.getElementsByTagName("dt");
  var ddTags = doc.getElementsByTagName("dd");

  // タグ数回繰り返す
  for ( var idx = 0; idx < dtTags.length; ++idx ) {

    var dtTag = dtTags[idx];
    var tagVal = dtTag.firstChild.data;

    if ( tagVal == "君主名" ) {
      point.team = ddTags[idx].firstChild.data;
    } else if ( tagVal == "座標 / 距離") {
      var tagData = ddTags[idx].firstChild.data;
      var startP = tagData.indexOf("(");
      var endP   = tagData.lastIndexOf(")"); 
      var pointData = tagData.slice(startP+1,endP);
      var pointArray = pointData.split(",");
      point.x = pointArray[0];
      point.y = pointArray[1];
    }
  }

  return point;
};


console.log("start");
// ULタグを取得
var mapUlList = map51.getElementsByTagName("ul");
for ( var ulIdx = 0; ulIdx < mapUlList.length; ++ulIdx ) {
  // 内部のLiタグを取得
  var mapLiList = mapUlList[ulIdx].getElementsByTagName("li");
  for ( var liIdx = 0; liIdx < mapUlList.length; ++liIdx ) {
    // Aタグを取得
    var linkTag = mapLiList[liIdx].getElementsByTagName("a")[0];
    dijkstra.pointArray[ulIdx][liIdx] = createPoint(linkTag);
  }
}

console.log("getRoute()");
var route;
route = dijkstra.getRoute(0,0,50,50);
if ( route != null ) {
 console.log("route log:" + route.length);
 for ( var idx = 0; idx < route.length; ++idx ) {
  var point = route[idx];
  console.log("[" + point.x + "," + point.y + "]" + point.lv );
 }
}
console.log("end");

このコードでは0,0 - 51,51を算出するわけですが、あくまで動作確認ように行なっているだけです。
実際には、始点座標から終点座標を入力するのが良いですね。

実際のコードのcreatePoint()はLvに対してべき乗の重みを付けています。

画面に表示してみよう

さて、座標は判定できたのでそのままHTMLに表示していきます。


route = dijkstra.getRoute(0,0,50,50);
var pointArray = new Array();

//経路のリストを連想配列に入れる
for ( var idx = 0; idx < route.length; ++idx ) {
 var point = route[idx];
 pointArray[point.arrayX + "," + point.arrayY] = point;
}

for ( var ulIdx = 0; ulIdx < mapUlList.length; ++ulIdx ) {
  // 内部のLiタグを取得
  var mapLiList = mapUlList[ulIdx].getElementsByTagName("li");
  for ( var liIdx = 0; liIdx < mapUlList.length; ++liIdx ) {
  
   var idx = pointArray[ulIdx + "," + liIdx];
   if ( idx === undefined ) {
    continue;
   }
   // Aタグを取得
   var liTag = mapLiList[liIdx];
   liTag.style.backgroundColor = "#555555";

  }
}

配列のポイントがあった方が処理しやすかったので
routeのオブジェクトにarrayX,arrayYを設定しています。

あとはULとLI回回して背景を変更するって感じです。
で出来上がったマップが以下の通り。

コードにより☆５までしか判定してないので最終地点に拠点等が存在すると
経路算出でエラーになります。

ここに載っているように世界にすぐ配信できます。
権利関係微妙ですが他のツール等に比べるとおとなしいので公開しておきました
誰かアイコン作って！（128x128pngしか受け付けない＞＜）

仕事中に呆けて遊んでいたのでやっとアウトプットできた感じ＞＜

今回のマップのダイクストラでの醍醐味は
重さが領地のレベルである事。☆２を進んだ時に遠征だときついだとか
その辺を考慮して重さを設定するところですね。

このソースを利用してマップをDBに貯めこんで計算してとかやれば大規模な遠征の道順等も教えてくれるはずです。
これをつくりはじめた時に、AppEngineを利用して
座標を全ユーザから送信してもらって、それで地図を更新して行くという仕様を考えましたけど
本気で行くと有料レベルになると思って止めました。
※お金発生してもOKですけど、お金取る(CM)とか入れると厄介かなぁと。。。

今回はゲーム周りでしたが、Tweetボタンやいいねボタンがないようなページを
簡単に共有したり、その他他人のWebページに１つエッセンスを加えて処理をやりやすくしたり、
Webのマクロみたいなイメージで処理する事が可能になります。

ChromeExtentionはChromeOSの登場によって
ChromeOS上で動作するアプリケーションを作れる事になります。
ChromeOSがどの程度市場を席巻するかは不明ですが、１つのアプリの公開形態としては
注視しておいても良いでしょう。

さぁ同盟員に書簡して使ってもらおう！

Canvasで絵を書いてみる

2011-06-13T20:06:00.005+09:00

さて、メモを操作するようなアプリを考えていて
初めはHTMLでゴリゴリと思っていたんですけど、
四角を書いてそれを線で結びたかったのでCanvasを使って絵を書こうと思いました。
JavaScript部分にはjQueryを使います。

まずはHTML上にCanvasを宣言します。


  <body id="body">
    <canvas id="canvas"></canvas>
  </body>

Canvasを一杯使いたいのでCanvasの要素を取得してきて
それをbodyタグと同じ大きさにします。


  var $cvm = $('#canvas');
  var width = $(document.body).width();
  var height = $(document.body).height();
  $cvm.attr("width", width);
  $cvm.attr("height", height);

ウィンドウのサイズ変更されたら、、、って考えなきゃだめですね。
TODOにしとこう！

でキャンバスの基本設定


  var ctx = $cvm[0].getContext('2d');
  ctx.lineWidth = 1;
  ctx.globalAlpha = 0.7;
  ctx.globalCompositeOperation = "source-over";

getElementById() から取得してgetContext("2d")でもできるのですが
せっかくjQueryを使用しているのでjQueryのオブジェクトから取得。

lineWidthは線の太さ、globalAlhaは透明度ですね。
globalAlhaを設定した場合、globalCompositeOperationを設定します。

このglobalCompositeOperationってのは
ココが分かりやすいです。
文章よりサンプルがわかりやすいかも。

さて四角を書くのですが、それに対してテキストを入れてみます。


ctx.font =textHeight + 'px "ヒラギノ角ゴ　Ｐｒｏ"';
// 表示するテキストの幅を取得する
var textWidth = ctx.measureText(item.text).width;
//Itemの幅を設定する
item.width = textWidth;
// テキストの背景を描画
ctx.fillStyle = "white";
ctx.fillRect(item.x, item.y, item.width,textHeight);

//テキストを描画
ctx.textBaseline = "bottom";
ctx.fillStyle = "black";
ctx.fillText(item.text, item.x, item.y + textHeight);

まずContextのfontに対して文字列の大きさ(高さの数値で変数化してます)を設定しています。
その後、テキストの横幅を測っています。ContextのmeasureTextで測ってます。
item.widthというものに残していますがitemはテキストのオブジェクト(描画位置とか持ってる)を
再描画用に持っているので、それに残してるってだけです。(矩形描画時に使ってます)
色をfillStyleで設定してfillRect()で矩形を描画します。

その後、textBaselineでテキストの位置を設定してfillStyleで文字の色を設定して
fillText()で描画を行います。これで矩形内に文字列を埋め込みます。

で要素間を結合したいので、その座標に関して線を引きます。
今回は「ベジエ曲線」という線を使って要素を結合したいと思います。


 ctx.beginPath();
 var point = new bezierPoint(preItem,item);
 ctx.moveTo(point.x1,point.y1);
 ctx.bezierCurveTo(point.x2,point.y1,point.x1,point.y2,point.x2,point.y2);
 ctx.strokeStyle="#440000";
 ctx.stroke();

まずbeginPath()を呼びます。
これは線を描画する際に「さぁ始めるぞ！」っていう事を意味します。
その後、bezirePoint()を呼んでいますが、これは独自処理で線を引くための座標を算出しています。
それで取得してきたpoint(独自のオブジェクト)を元にmoveTo()によって開始点を設定します。
そこからbezierCurveTo()を利用して、終点を設定します。
６個引数がありますが、４つ目までは曲線の付加情報ですね。(もうちょっと凝る予定ですけど)
で５，６の引数が曲線の終点になります。
でstorokeStyleで色を決定し、stroke()で線を描画します。

これをやると

こんな感じになります。

ひとまず少し前に記述していたEvernoteの要素をそのまま出してみました！

Evernoteにアクセスする　その７　ユーザ情報編

2011-06-07T19:20:00.002+09:00

さてNotebookの内容に入って行こうと思ってたんですけど、
冷静に考えるとユーザ名がない事に気づいた。
ログアウトとかに表示したいですよね。

なのでユーザの情報を取得しようと思います。


       THttpClient userStoreTrans;
  try {
   userStoreTrans = new THttpClient(USER_URL);
  } catch (TTransportException e) {
   throw new RuntimeException("クライアントアクセス時の例外",e);
  } catch (NullPointerException e) {
   throw new RuntimeException("クライアントアクセス時の例外",e);
  }
  
       TBinaryProtocol userStoreProt = new TBinaryProtocol(userStoreTrans);
       UserStore.Client userStore = new UserStore.Client(userStoreProt, userStoreProt);

     User user = userStore.getUser(getAccessToken());

こんな感じです。UserStoreを取得するための
USER_URLには「https://sandbox.evernote.com/edam/user」ですね。
ノートの場合とアクセスするUrlが違います。

getUser()に対してアクセストークンを渡してあげます。
これで返って来るUserに情報が入っています。

getEmail()とかあるので「やべー」と思いましたがどうやら値は入ってないようですね。
Userを見る限り、UploadのLimit等も入っているのでその辺りを考慮してアップロード等を
行う必要があるようですが、一応アップ系の処理は行わないので使わないかな？

さてまた寄り道になりましたがひとまずそれを利用してログアウトのリンクを作成。
ノートブックの一覧等を利用して、ひとまずノートを選択するような仕組みにしてみました。

ここからアクセスできますけど、
sandboxのユーザがないと無理ですので、持っている方しかアクセスできません。

Evernoteにアクセスする　その６ノート一覧取得編

2011-06-06T08:26:00.003+09:00

さて認証部分も終わったので、そろそろAPIでアクセスしないと
何やってるかわかんなくなってくるのでひとまずアクセスしてみよう！

実際にそこまでEvernote使いこなしているのか？という事も疑問でしたが
「メモ(ノート)を取る」という意味ではすごく良いアプリなんだな。。。と感じてました。

で、メモを活用するというアプリを考えた時に
「んじゃEvernote使えば？」というのが、このAPIにアクセスするきっかけになったわけです。

で、、、当初メモを取るアプリを考えていたんですけど、逆に考える事にしました。
メモはいくらでも、どんな媒体でも取るんだから、メモに情報を付加したり、
メモを取った後に色々眺める機能を作ってみようって。
まぁAPIアクセスを考えれるように、少しは追加とかもやるかもですけど。

で、evernoteにAPIでアクセスするまで、「ノートブック」と「ノート」の概念をあまり考えていませんでした。
なのでまずは一覧化して表示してみましょう。


       NoteStore.Client noteStore = getClient();
       List notebooks = noteStore.listNotebooks(getAccessToken());

       for (Notebook notebook : notebooks) {
        String guid = notebook.getGuid();
        logger.info(notebook.getName() + ":" + guid);
        NoteFilter filter = new NoteFilter();
        filter.setNotebookGuid(guid);
        NoteList noteList = noteStore.findNotes(getAccessToken(),filter, 0, 100);
        for ( Note note: noteList.getNotes() ) {
         logger.info(note.getTitle());
        }
       }

getClient()は前述の通り、SharedIdを元に取得してきます。
それとgetAccessToken()も認証の情報を元に取得してきます。

まずlistNotebooks()によりノートブックの一覧が取得できます。
Notebookには「guid」が存在し、それが一意の識別子になります。

それを元にNoteFilterを準備して、そこにGuidを設定してfindNotes()を行います。
第３、４引数は、オフセットとMaxの件数です。Maxの件数は、、、すべてってのは出来なさそう、、、

ひとまずこんなところですかね。
一応アプリではNotebookの一覧を表示して、クリックしたら、Noteの一覧が出るようなものを考えています。

次はNotebookについて記述していきましょう。

Evernoteにアクセスする　その５ OAuth理解編

2011-06-04T17:45:00.004+09:00

OAuthサンプルによって解説しようと思っていましたが、
結局暗号化を行って、テスト書いて、色々分かりやすくコードをいじってってこの状態になりました。
以下のコードでアクセスできます。


package jp.co.ziro.evernote.controller;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import java.util.TreeMap;
import java.util.logging.Logger;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.codec.binary.Base64;
import org.slim3.util.ApplicationMessage;

/**
 * 
 * EvernoteへのOAuthアクセスクラス
 *  - 認証URL作成 setCallbackUrl()
 *  - アクセストークン取得時はsendRequest(tokenSecret)
 *  で処理を行います。
 * 
 * 認証Urlの作成
 * 1.コンストラクタにより、固定値を設定する
 * 2.使用側は setCallbackUrl() にコールバックするUrlを設定する
 * 3.createAuthorization() の戻り値が認証Urlを取得
 * 4.getTokenSecret(),secretを取得(保存)
 * 
 * 認証Urlにアクセスする
 * 認可画面が表示され、そこでの結果がコールバックに渡される
 *
 * コールバックUrlで行う事
 * 1.コンストラクタにより固定値を設定する
 * 2.oauth_verifier,oauth_tokenがコールバックに呼ばれるのでそれを
 *   setToken() setVerifier() で設定
 *   verifierがnullだったら、認証が行われていない。
 * 3.sendRequest()を行う。引数は認証Url時に作成したsecret
 * 4.oauth_token にリクエストトークン、edam_shard にAPIアクセス用のIdが渡されます。
 * 
 * これらでthriftのAPIを利用して、Evernoteにアクセスできます。
 *  
 * 

 * @author secondarykey
 */
public class EvernoteRequest {

    @SuppressWarnings("unused")
    private static Logger logger = Logger.getLogger(EvernoteRequest.class.getName());

    /**
     * EverNoteのAPI ConsumerKey
     */
 private static final String CONSUMERKEY = ApplicationMessage
   .get("evernote.api.key");
 /**
  * EvernoteのAPI ConsumerSecret
  */
 private static final String CONSUMERSECRET = ApplicationMessage
   .get("evernote.api.secret");

 /**
  * アクセスするUrl
  */
 private static final String BASEURL = ApplicationMessage
   .get("evernote.api.baseUrl");
 
 /**
  * リクエストToken取得用のUrl
  */
 private static final String requestUrl = BASEURL
   + ApplicationMessage.get("evernote.api.requestTokenUrl");

 /**
  *　認証のUrl
  */
    private static final String authorizationUrlBase = BASEURL + ApplicationMessage.get("evernote.api.oauthUrl");

 /**
  * 文字コード
  */
 private static final String CHARSET = "UTF-8";
 /**
  * キー作成用のGETメソッド名
  */
 private static final String REQUEST_METHOD = "GET";
 /**
  * OAuth nonces用のランダム値生成
  */
 private static final Random random = new Random();

 
 /**
  * ベースのURL
  * @return リクエストするBaseUrl
  */
 public static String getBaseUrl() {
  return BASEURL;
 }

 /**
  * リクエストするパラメーター
  */
 private Map parameters = new TreeMap();
 
 /**
  * TokenSecret
  * getTokenSecret()時に空の場合、Exceptionを発生
  */
 private String tokenSecret = null;
 /**
  * 
  * コンストラクタ
  * パラメータ固定値を設定する
  * 

  */
 public EvernoteRequest() {
  setParameter("oauth_consumer_key", CONSUMERKEY);
  setParameter("oauth_timestamp", getTimestamp());
  setParameter("oauth_nonce", Long.toHexString(random.nextLong()));
  setParameter("oauth_version", "1.0");
  //暗号化を行う
  setParameter("oauth_signature_method", "HMAC-SHA1");
 }
 /**
  * タイムスタンプを作成
  * @return 現在時刻の秒をString化した値
  */
 private String getTimestamp() {
  return Long.toString(System.currentTimeMillis() / 1000);
 }

 /**
  * コールバックURLを設定する
  * @param callbackUrl コールバックUrl
  */
 public void setCallbackUrl(String callbackUrl) {
        setParameter("oauth_callback", callbackUrl);
 }

 /**
  * リクエストトークンを設定
  * @param requestToken コールバックされたリクエストトークン
  */
 public void setToken(String requestToken) {
        //それぞれをリクエスターに設定
        setParameter( "oauth_token", requestToken);
 }

 /**
  * Verifierの設定
  * @param verifier コールバックされたverifier値
  */
 public void setVerifier(String verifier) {
        setParameter( "oauth_verifier", verifier);
 }
 /**
  * リクエスト時の引数設定
  * @param name パラメータ名称
  * @param value パラメータの値
  */
 private void setParameter(String name, String value) {
  parameters.put(name, value);
 }

 /**
  * Encodes this request as a single URL that can be opened.
  */
 private String getUrl() {
  return requestUrl + "?" + join();
 }

 /**
  * HTTP引数の連結
  * @return Url引数にして返す
  */
 private String join() {
  StringBuilder sb = new StringBuilder();
  //開始フラグ
  boolean firstParam = true;
  
  //引数数繰り返す
  for (Map.Entry parameter : parameters.entrySet()) {
   //最初の処理
   if (firstParam) {
    firstParam = false;
   } else {
    sb.append('&');
   }

   //キー値を取得
   sb.append(parameter.getKey());
   //連結子を設定
   sb.append('=');
   try {
    //値をエンコードして設定
    sb.append(URLEncoder.encode(parameter.getValue(), CHARSET));
   } catch (UnsupportedEncodingException e) {
    throw new RuntimeException("エンコード時の例外", e);
   }
  }
  return sb.toString();
 }

 /**
  * リクエストを行う
  * @param
  * 
  * @throws IOException
  *             if a problem occurs making the request or getting the reply.
  */
 public Map sendRequest(String tokenSecret) {
        //Signatureを設定
  setParameter("oauth_signature", createSignature(tokenSecret));
  //アクセスする
  HttpURLConnection connection;
  try {
   connection = (HttpURLConnection) (new URL(getUrl())).openConnection();
  } catch (MalformedURLException e) {
   throw new RuntimeException("アクセスに対する例外",e);
  } catch (IOException e) {
   throw new RuntimeException("アクセスに対する例外",e);
  }

  int responseCode;
  String responseMessage;
  try {
   responseCode = connection.getResponseCode();
   responseMessage = connection.getResponseMessage();
  } catch (IOException e) {
   throw new RuntimeException("結果取得を行う",e);
  }
  // リクエストが正常じゃない場合
  if (responseCode != HttpURLConnection.HTTP_OK) {
   throw new RuntimeException("Server returned error code: " + responseCode + " " + responseMessage);
  }

  return createResponseMap(connection);
 }

 /**
  * 
  * 暗号化を行う
  * 1. メソッド名&アクセスUrl&HTTPの引数の文字列を作成
  * 2. secretをTokenと連結してsecretをバイト化
  * 3. Secret値を元にSignatureStringを暗号化を行う
  * 4. その値をBase64で16進数かする
  * 

  * @param tokenSecret リクエストToken取得時に発行されたSecret
  * @return 暗号化したSecret値
  */
 private String createSignature(String tokenSecret) {

  String encodeUrl  = encode(requestUrl);
  String encodeJoin = encode(join());
  String signatureBaseString = REQUEST_METHOD + "&" + encodeUrl + "&" + encodeJoin;

  // 署名対象のテキストを作成
  String secret = CONSUMERSECRET + "&";
  //TokenSecretが存在する場合
  if (tokenSecret != null) {
   secret += tokenSecret;
  }
        byte[] secretyKeyBytes;
  try {
   secretyKeyBytes = secret.getBytes(CHARSET);
  } catch (UnsupportedEncodingException e2) {
   throw new RuntimeException("エンコード時の失敗",e2);
  }

  String hmac = "HmacSHA1";
     SecretKeySpec secretKeySpec =  new SecretKeySpec(secretyKeyBytes,hmac);
     Mac mac;
  try {
   mac = Mac.getInstance(hmac);
   mac.init(secretKeySpec);
  } catch (NoSuchAlgorithmException e1) {
   throw new RuntimeException("暗号化インスタンス取得失敗",e1);
  } catch (InvalidKeyException e1) {
   throw new RuntimeException("暗号化インスタンス取得失敗",e1);
  }

        byte[] data;
        try {
            data = signatureBaseString.getBytes(CHARSET);
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(CHARSET + " is unsupported!", e);
        }
        byte[] rawHmac = mac.doFinal(data);
        Base64 encoder = new Base64();
 
        return new String(encoder.encode(rawHmac));
 }

 /**
  * 値のUrlエンコード
  * @param value エンコードする値
  * @return エンコードした値
  */
 private String encode(String value) {
  String rtnData;
  try {
   rtnData = URLEncoder.encode(value,CHARSET);
  } catch (UnsupportedEncodingException e) {
   throw new RuntimeException("エンコード時の例外",e);
  }
  return rtnData;
 }
 /**
  * レスポンスの値を取得
  * 
  * @param connection
  * @return
  */
 private Map createResponseMap(HttpURLConnection connection) {

  BufferedReader bufferedReader;
  String result;
  try {
   bufferedReader = new BufferedReader(new InputStreamReader(
     connection.getInputStream()));
   result = bufferedReader.readLine();
  } catch (IOException e) {
   throw new RuntimeException("読み込み時の例外", e);
  }

  Map responseParameters = new HashMap();
  for (String param : result.split("&")) {
   int equalsAt = param.indexOf('=');
   if (equalsAt > 0) {
    String name = param.substring(0, equalsAt);
    String value;
    try {
     value = URLDecoder.decode(param.substring(equalsAt + 1),
       CHARSET);
    } catch (UnsupportedEncodingException e) {
     throw new RuntimeException("エンコード時の例外", e);
    }
    responseParameters.put(name, value);
   }
  }
  return responseParameters;
 }
 
 /**
  * 認証Urlの作成
  * @return
  */
 public String createAuthorizarionUrl() {
        //リクエスト
        Map reply = sendRequest(null);
        String requestToken     = reply.get("oauth_token");
        //認証Urlの作成
        String authorizationUrl = authorizationUrlBase + "?oauth_token=" + requestToken;
        //TokenSecretを設定する
        tokenSecret = reply.get("oauth_token_secret");
  return authorizationUrl;
 }

 /**
  * TokenSecretの取得
  * @return
  */
 public String getTokenSecret() {
  if ( tokenSecret == null ) {
   throw new NullPointerException("TokenSecretが設定されていない");
  }
  return tokenSecret;
 }

 
}

まずコンストラクタで各種固定値の設定を行います。

oauth_consumer_key:KEY値

oauth_signature_method:「PLANTEXT」「HMAC-SHA1」のどちらか

oauth_timestamp:現在の秒

oauth_nonce:ランダムの値(リクエスト毎に一意)

oauth_version:「1.0」固定

Evernoteのサンプルではoauth_signatureにSECRET値を指定していますが、
HMAC-SHA1の際は暗号化を行うので、まだ指定していません。
oauth_signature_methodはPLANTEXT、HMAC-SHA1が存在し、サンプルはPLANTEXTが指定されています。
PLANTEXTを推奨(つうか使って)しているのも珍しい気もします。

HTTPにアクセスする時に利用するMapをTreeMapを利用していますが
暗号化時に引数をソートする必要があるのでTreeMapでKey値のソートを行っているわけです。

コンストラクタで設定した後はコールバックUrl(oauth_callback)を指定します。
Evernoteの認可画面により処理が行われるとそのUrlに戻ってきます。

認可画面に行くためにリクエストトークンを取得しに行きます。
createAuthorizarionUrl()ですね。

ここでsendRequest()でEvernoteにアクセスしています。
oauth_signatureをcreateSignatuer()を行ってHMAC-SHA1の暗号化を行って指定しています。

返ってきたResponseから値を取得します。
レスポンスにリクエストトークン（oauth_token）とSecret(oauth_token_secret)が指定されています。
リクエストトークンはhttps://sandbox.evernote.com/?oauth_token=xxxxとして利用すると認可画面にアクセスする事ができます。
Secret値は、アクセストークン時にシグネチャ値のキー値とする時にConsumerSecretと合わせて使用します。

ここまでが認可画面のリンクを作成する流れです。

コールバックURLを指定していますが、認可画面にアクセスし、操作を行うとこのUrlに戻ってきます。
そちらの処理が以下になります。

認証に成功するとコールバックURLにoauth_token、oauth_verifierが付与されて来ます。
oauth_verifierが存在しない場合は認証で拒否された等ですので、エラー画面等を出力しましょう。

設定されていたら、アクセストークンを取得する為、
このクラスをnewしてインスタンス化します。※設定する値は一緒。

oauth_tokenをsetToken() ,oauth_verifierをsetVerifier()を利用して、設定します。
設定したらsendRequest()によりアクセストークンを取得するのですが、
この時に最初のアクセスで取得したtokenSecretを渡します。

取得に成功するとoauth_tokenにアクセストークン、edam_shardにEvernoteにアクセスする時に必要な値が入ってきます。
このアクセストークンさえあれば何でもできるわけです。

その値を利用してAPIのアクセスです。
thriftのライブラリを使っています。


        String noteStoreUrl = noteStoreUrlBase + shardId;
       THttpClient noteStoreTrans    = new THttpClient(noteStoreUrl);
       TBinaryProtocol noteStoreProt = new TBinaryProtocol(noteStoreTrans);

       NoteStore.Client noteStore =
         new NoteStore.Client(noteStoreProt, noteStoreProt);
       List notebooks = noteStore.listNotebooks(accessToken);
       for (Notebook notebook : notebooks) {
         logger.info("Notebook: " + notebook.getName());
       }

サンドボックス＋"/edam/note/"＋edam_shardの値を作成して
それでTHttpClientを生成、それを利用してTBinaryProtocolを生成しています。

それを利用して生成しているNoteStore.ClientはEvernoteのライブラリですね。
生成したオブジェクトでAPI呼び出しを行っています。
ここではlistNotebooks()です。そこにアクセストークンを渡してアクセスしています。

・・・さて、再度理解を深める為にOAuthをしっかり説明してみました。
説明がヘタすぎますけど、ご了承ください。

まぁとにかく次回はAPIで色々やってみます。

Evernoteにアクセスする　その４ HMAC-SHA1編

2011-06-03T16:26:00.010+09:00

ここまでサンプルを元にEvernoteにアクセスしてきましたが、
SimpleOAuthRequestの中身を見てOAuthアクセスへの理解を
深めておきましょう。。。。って思ったんですけど、PLANTEXTでアクセスしているので
HMAC-SHA1でアクセスしてみましょう。

以下が元ソースです。
見られる場合は展開してください。


/**
 * Copyright 2008 by EverNote Corporation.  All rights reserved.
 */

package com.evernote.oauth.consumer;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

/**
 * This is a very simple implementation of an OAuth consumer request which can
 * be used to ask an OAuth service provider for either a Request Token or
 * an Access Token.  It only handles PLAINTEXT authentication, and it only goes
 * over a GET transport.  As a result, it should only be used over SSL.
 * 
 * @author Dave Engberg
 */
public class SimpleOAuthRequest {

  /**
   * Random number generator for creating OAuth nonces
   */
  private static final Random random = new Random();
  
  /**
   * The URL of the OAuth service Provider that we should hit to request a
   * token.
   */
  private String providerUrl;

  /**
   * A mapping containing all of the OAuth parameters that will be passed in
   * the reply.
   */
  private Map parameters = new HashMap();
  
  /**
   * Constructs a request object that can be used to make token requests from
   * an OAuth provider.
   * 
   * @param providerUrl  the base URL to request a Request or Access token
   * @param consumerKey  the OAuth consumer key, given by the Service Provider
   * @param consumerSecret  the OAuth consumer secret, given by the Provider
   * @param tokenSecret  if non-null, this is the previous oauth_token_secret
   *   that should be used in signing this request.  If null, this will assume
   *   that this message does not include a token secret in its signature
   */
  public SimpleOAuthRequest(String providerUrl, String consumerKey,
      String consumerSecret, String tokenSecret) {
    this.providerUrl = providerUrl;
    setParameter("oauth_consumer_key", consumerKey);
    String signature = consumerSecret + "&";
    if (tokenSecret != null) {
      signature += tokenSecret;
    }
    setParameter("oauth_signature", signature);
    setParameter("oauth_signature_method", "PLAINTEXT");
    setParameter("oauth_timestamp",
        Long.toString(System.currentTimeMillis() / 1000));
    setParameter("oauth_nonce",
        Long.toHexString(random.nextLong()));
    setParameter("oauth_version", "1.0");
  }
  
  /**
   * Sets one of the query string parameters for the request that will be
   * made to the OAuth provider.  The value will be URL encoded before adding
   * to the URL.
   * 
   * @param name  the name of the parameter to be set
   * @param value  the string value, unencoded
   */
  public void setParameter(String name, String value) {
    parameters.put(name, value);
  }
  
  /**
   * Encodes this request as a single URL that can be opened.
   */
  public String encode() throws IOException {
    StringBuilder sb = new StringBuilder();
    sb.append(providerUrl);
    boolean firstParam = providerUrl.indexOf('?') < 0;
    for (Map.Entry parameter : parameters.entrySet()) {
      if (firstParam) {
        sb.append('?');
        firstParam = false;
      } else {
        sb.append('&');
      }
      sb.append(parameter.getKey());
      sb.append('=');
      sb.append(URLEncoder.encode(parameter.getValue(), "UTF-8"));
    }
    return sb.toString();
  }

  /**
   * Sends the request to the OAuth Provider, and returns the set of reply
   * parameters, mapped from name to decoded value.
   *
   * @throws IOException  if a problem occurs making the request or getting the
   *   reply.
   */
  public Map sendRequest() throws IOException {

    HttpURLConnection connection =
      (HttpURLConnection)(new URL(encode())).openConnection();
    int responseCode = connection.getResponseCode();
    if (responseCode != HttpURLConnection.HTTP_OK) {
      throw new IOException("Server returned error code: " + responseCode +
          " " + connection.getResponseMessage());
    }
    BufferedReader bufferedReader = new BufferedReader(
        new InputStreamReader(connection.getInputStream()));
    String result = bufferedReader.readLine();
    Map responseParameters = new HashMap();
    for (String param : result.split("&")) {
      int equalsAt = param.indexOf('=');
      if (equalsAt > 0) {
        String name = param.substring(0, equalsAt);
        String value =
          URLDecoder.decode(param.substring(equalsAt + 1), "UTF-8");
        responseParameters.put(name, value);
      }
    }
    return responseParameters;
  }
  
}

これをHMAC-SHA1で処理を行う場合は、oauth_signatureの指定に
・HTTPメソッド
・リクエストURL
・リクエストパタメータ
これらをURLエンコードして、＆で結合してHMAC-SHA1で16進のダイジェスト値を作って
Base64エンコード後、URLエンコードした値をoauth_signatureに指定します。

オリジナルでEvernoteRequestクラスを作成してアクセスしてみましょう。
※動作確認用なので汚いのは許して＞＜

以下がHMAC-SHA1でアクセスしたソース


/**
 * Copyright 2008 by EverNote Corporation.  All rights reserved.
 */

package jp.co.ziro.evernote.controller;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.UnsupportedEncodingException;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.security.InvalidKeyException;
import java.security.NoSuchAlgorithmException;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import java.util.TreeMap;
import java.util.logging.Logger;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.codec.binary.Base64;
import org.slim3.util.ApplicationMessage;

/**
 * This is a very simple implementation of an OAuth consumer request which can
 * be used to ask an OAuth service provider for either a Request Token or an
 * Access Token. It only handles PLAINTEXT authentication, and it only goes over
 * a GET transport. As a result, it should only be used over SSL.
 * 
 * @author Dave Engberg
 */
public class EvernoteRequest {

    @SuppressWarnings("unused")
    private static Logger logger = Logger.getLogger(EvernoteRequest.class.getName());
 private static final String consumerKey = ApplicationMessage
   .get("evernote.api.key");
 private static final String consumerSecret = ApplicationMessage
   .get("evernote.api.secret");
 private static final String urlBase = ApplicationMessage
   .get("evernote.api.baseUrl");
 private static final String requestUrl = urlBase
   + ApplicationMessage.get("evernote.api.requestTokenUrl");
 /**
  * ベースのURL
  * @return
  */
 public static String getBaseUrl() {
  return urlBase;
 }

 /**
  * Random number generator for creating OAuth nonces
  */
 private static final Random random = new Random();

 /**
  * A mapping containing all of the OAuth parameters that will be passed in
  * the reply.
  */
 private Map parameters = new TreeMap();

 /**
  * Constructs a request object that can be used to make token requests from
  * an OAuth provider.
  */
 public EvernoteRequest() {
  setParameter("oauth_consumer_key", consumerKey);
  //暗号化を行う
  setParameter("oauth_signature_method", "HMAC-SHA1");
  setParameter("oauth_timestamp", getTimestamp());
  setParameter("oauth_nonce", Long.toHexString(random.nextLong()));
  setParameter("oauth_version", "1.0");
 }
 /**
  * タイムスタンプを作成
  * @return
  */
 private String getTimestamp() {
  return Long.toString(System.currentTimeMillis() / 1000);
 }

 /**
  * Sets one of the query string parameters for the request that will be made
  * to the OAuth provider. The value will be URL encoded before adding to the
  * URL.
  * 
  * @param name
  *            the name of the parameter to be set
  * @param value
  *            the string value, unencoded
  */
 public void setParameter(String name, String value) {
  parameters.put(name, value);
 }

 /**
  * Encodes this request as a single URL that can be opened.
  */
 private String encode() {
  return requestUrl + "?" + join();
 }

 /**
  * HTTP引数の連結
  * @return
  */
 private String join() {
  StringBuilder sb = new StringBuilder();
  boolean firstParam = true;
  for (Map.Entry parameter : parameters.entrySet()) {
   if (firstParam) {
    firstParam = false;
   } else {
    sb.append('&');
   }
   sb.append(parameter.getKey());
   sb.append('=');
   try {
    sb.append(URLEncoder.encode(parameter.getValue(), CHARSET));
   } catch (UnsupportedEncodingException e) {
    throw new RuntimeException("エンコード時の例外", e);
   }
  }
  return sb.toString();
 }

 /**
  * 文字コード
  */
 private static final String CHARSET = "UTF-8";
 /**
  * キー作成用のGETメソッド名
  */
 private static final String REQUEST_METHOD = "GET";

 /**
  * Sends the request to the OAuth Provider, and returns the set of reply
  * parameters, mapped from name to decoded value.
  * 
  * @throws IOException
  *             if a problem occurs making the request or getting the reply.
  */
 public Map sendRequest(String tokenSecret) throws IOException {
  // 署名対象のテキストを作成
  String secret = consumerSecret + "&";
  if (tokenSecret != null) {
   secret += tokenSecret;
  }

  String hmac = "HmacSHA1";
  
  String encodeUrl  = URLEncoder.encode(requestUrl,CHARSET);
  String encodeJoin = URLEncoder.encode(join(),CHARSET);

  String signatureBaseString = REQUEST_METHOD + "&" + encodeUrl + "&" + encodeJoin;
  logger.info(signatureBaseString);

        byte[] secretyKeyBytes = secret.getBytes(CHARSET);
     SecretKeySpec secretKeySpec =  new SecretKeySpec(secretyKeyBytes,hmac);
     Mac mac;
  try {
   mac = Mac.getInstance(hmac);
   mac.init(secretKeySpec);
  } catch (NoSuchAlgorithmException e1) {
   throw new RuntimeException("暗号化インスタンス取得失敗",e1);
  } catch (InvalidKeyException e1) {
   throw new RuntimeException("暗号化インスタンス取得失敗",e1);
  }
     
        String signature = null;
        byte[] data;
        byte[] rawHmac;
        try {
            data = signatureBaseString.getBytes(CHARSET);
            rawHmac = mac.doFinal(data);
            Base64 encoder = new Base64();
            signature = new String(encoder.encode(rawHmac));
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(CHARSET + " is unsupported!", e);
        }
  setParameter("oauth_signature", signature);

  HttpURLConnection connection = (HttpURLConnection) (new URL(encode())).openConnection();
  int responseCode = connection.getResponseCode();
  // リクエストが正常じゃない場合
  if (responseCode != HttpURLConnection.HTTP_OK) {
   throw new IOException("Server returned error code: " + responseCode
     + " " + connection.getResponseMessage());
  }
  return createResponseMap(connection);
 }

 /**
  * レスポンスの値を取得
  * 
  * @param connection
  * @return
  */
 private Map createResponseMap(HttpURLConnection connection) {

  BufferedReader bufferedReader;
  String result;
  try {
   bufferedReader = new BufferedReader(new InputStreamReader(
     connection.getInputStream()));
   result = bufferedReader.readLine();
  } catch (IOException e) {
   throw new RuntimeException("読み込み時の例外", e);
  }

  Map responseParameters = new HashMap();
  for (String param : result.split("&")) {
   int equalsAt = param.indexOf('=');
   if (equalsAt > 0) {
    String name = param.substring(0, equalsAt);
    String value;
    try {
     value = URLDecoder.decode(param.substring(equalsAt + 1),
       CHARSET);
    } catch (UnsupportedEncodingException e) {
     throw new RuntimeException("エンコード時の例外", e);
    }
    responseParameters.put(name, value);
   }
  }
  return responseParameters;
 }
}

・・・本当に汚い、、、
で、これを利用してindex時に


        EvernoteRequest oauthRequestor = new EvernoteRequest();
        String thisUrl = request.getRequestURL().toString();
        String cbUrl = thisUrl.substring(0, thisUrl.lastIndexOf('/') + 1);
        cbUrl = cbUrl + "callback";

        oauthRequestor.setParameter("oauth_callback", cbUrl);
        Map reply = oauthRequestor.sendRequest(null);
        
        String requestToken = reply.get("oauth_token");
        String tokenSecret = reply.get("oauth_token_secret");
        String authorizationUrl = authorizationUrlBase + "?oauth_token=" + requestToken;

        sessionScope("tokenSecret",tokenSecret);

という風にします。
すべての引数を指定した後にoauth_signatureを生成するので
sendRequest()にtokenSecretを持ってきています。(コールバック時に利用)

リクエストトークンとともにtokenSecretは取得できます。
アクセストークンを取得する際に使用するtokenSecretをセッションに残しています。
で以下がコールバックの処理。


        EvernoteRequest oauthRequestor = new EvernoteRequest();

        String requestToken = requestScope("oauth_token");
        String verifier     = requestScope("oauth_verifier");
        String tokenSecret  = sessionScope("tokenSecret");

        oauthRequestor.setParameter( "oauth_token", requestToken);
        oauthRequestor.setParameter( "oauth_verifier", verifier);

        //取得する
        Map reply = oauthRequestor.sendRequest(tokenSecret);

こちらはセッションからtokenSecretを取得して指定しているだけですね。

んーAuthrorization Headerでアクセスしたいですよねー。
アクセスもPOSTでもないですし。。。本物はそうしてみようっ。と。

次回、OAuthを読んでいくか、APIアクセスをもう少し行ってみるか悩んでます。
それを記述するのはOAuthの仕様なだけなのでそっち読めば良いかなぁ、、、と。

Evernoteにアクセスする　その３サンプルをシンプル編

2011-06-03T09:33:00.005+09:00

サンプルはJSPでOAuthを分かりやすく記述していますが
手数が多く記述してあるので、実装としてはわかりずらいので
一旦整理してみましょう。

Google for Eclipse Plugin[更新サイト：http://dl.google.com/eclipse/plugin/3.6] と
Slim3 Plugin[更新サイト：http://slim3.googlecode.com/svn/updates/]をインストールします。

Slim3はGoogleAppEngineに最適化されたMVCフレームワークです。
非常に簡単なので説明は省きます。

indexを作成して


        SimpleOAuthRequest oauthRequestor =
            new SimpleOAuthRequest(requestTokenUrl,consumerKey,consumerSecret,null);

        //現在のURLからコールバックURLを作成
        String thisUrl = request.getRequestURL().toString();
        String cbUrl = thisUrl.substring(0, thisUrl.lastIndexOf('/') + 1);
        cbUrl = cbUrl + "callback";

        oauthRequestor.setParameter("oauth_callback", cbUrl);
        Map reply = oauthRequestor.sendRequest();

        String requestToken = reply.get("oauth_token");
        String authorizationUrl = authorizationUrlBase + "?oauth_token=" + requestToken;

        //認証にリダイレクトを行う
        return redirect(authorizationUrl);

設定値などはコールバックURL以外はそのままです。
SimpleOAuthRequestを利用して認証用のURLを作成してそのままリダイレクトをかけてます。
※もちろんログインボタンとか作りたいなら別ですけど。

これにより/indexにアクセスするとEvernoteの認可画面が表示されるはずです。
それではコールバックURLを指定してみましょう。
callbackを作成して



        SimpleOAuthRequest oauthRequestor = new SimpleOAuthRequest( requestTokenUrl, consumerKey, consumerSecret, null);

        String requestToken = requestScope("oauth_token");
        String verifier     = requestScope("oauth_verifier");
        oauthRequestor.setParameter( "oauth_token", requestToken);
        oauthRequestor.setParameter( "oauth_verifier", verifier);

        Map reply = oauthRequestor.sendRequest();

        String accessToken = reply.get("oauth_token"); 
        String shardId     = reply.get("edam_shard");
        String noteStoreUrl = noteStoreUrlBase + shardId;

       THttpClient noteStoreTrans    = new THttpClient(noteStoreUrl);
       TBinaryProtocol noteStoreProt = new TBinaryProtocol(noteStoreTrans);
       NoteStore.Client noteStore =
         new NoteStore.Client(noteStoreProt, noteStoreProt);

       List notebooks = noteStore.listNotebooks(accessToken);
       for (Notebook notebook : notebooks) {
         logger.info("Notebook: " + notebook.getName());
       }

これもサンプルと同じ実装ですね。
もちろん認証してなかったら～とかの処理は必要ですが、
何やっているかを分かりやすくするため、２つのURLだけで実装してみました。

ListのところはNotebookを返してたので？じゃなくしました。
THttpClient はライブラリに存在するthriftのAPIですね。
それらを利用してEvernoteのAPIを利用するイメージです。

SimpleOAuthRequestの実装を説明しないと何やってるかわかりずらいですね。
次回はSimpleOAuthRequestについて記述してみましょう。

Evernoteにアクセスする　その２ OAuthアクセス編

2011-06-02T20:22:00.007+09:00

前回サンプルを動作させてみました。
サンプルはOAuthの動作を見せる感じに作ってあります。
JSPに書かれていて処理がわかりずらいのでコードを解析しながら読みやすくしていきましょう。

最初の方は定数等を定義していますね。


   private enum supportedRedirSchemas {FULL, EMBED};

は、iframeを利用する場合の処理の分岐ですね。
少し分かりづらいですが、基本的にindex.jspに対して、
「action」という引数を渡して処理を行ってます。

getRequestTokenの処理

Evernoteにアクセス(引数なし)

認証後getAccessTokenの処理

AccessTokenによりlistNotebooks

という順序で処理を行っています。
これはRequestTokenを準備してEvernoteにアクセスして
認証結果をAccessTokenで取得。
最後にAPIにアクセスしている感じです。

まぁご存知「OAuth1.0」アクセスです。
まずはgetRequestTokenによるrequestTokenの取得です。

サンプルのはじめのリンクをクリックした時の処理


          SimpleOAuthRequest oauthRequestor =
            new SimpleOAuthRequest(requestTokenUrl, consumerKey, consumerSecret, null);

          // Set the callback URL
          String thisUrl = request.getRequestURL().toString();
 　String cbUrl = thisUrl.substring(0, thisUrl.lastIndexOf('/') + 1);
 　if (redirSchema != null && redirSchema.equals(supportedRedirSchemas.EMBED.toString())) {
 　　cbUrl = cbUrl + callbackEmbedUrl;
 　} else {
 　　cbUrl = cbUrl + callbackUrl;
 　}
 　oauthRequestor.setParameter("oauth_callback", cbUrl);
     
          out.println("Request: " + oauthRequestor.encode());
          Map reply = oauthRequestor.sendRequest();
          out.println("Reply: " + reply);
          requestToken = reply.get("oauth_token");
          session.setAttribute("requestToken", requestToken);

ここで大事なのは
　com.evernote.oauth.consumer.SimpleOAuthRequest
クラスです。

コンストラクタではリクエストする為の引数を作っています。
その後、iframe埋め込みかを判定して、戻ってくるURLを変更しています。
サンプルを動作させるとわかりますがEMBEDを選んだ場合はiframeが出現して、
callback.jspが表示され、そのiframe上で認証をかけます。
なのでまぁその辺はあまり関係ないです。(OAuth後に呼び出すURLを変更するだけ)

sendRequest()によりrequestTokenUrlにリクエストして、RequestTokenを取得しにいっています。
戻り値のマップはResponseの値です。

その下で取得したRequestTokenでURLを作成しています。


  String authorizationUrl = authorizationUrlBase + "?oauth_token=" + requestToken;
  if (redirSchema != null && redirSchema.equals(supportedRedirSchemas.EMBED.toString())) {
   authorizationUrl = authorizationUrl + "&format=microclip";
  }

埋め込みの場合は少しいじってますね。
このURL(Evernote)にアクセスする事で認可できるわけです。
このURLが２番目のURL。

JSPでまどろっこしいのですが、
基本的にはURL生成からリダイレクトすればいきなり認証も可能ですね。

そのURLにアクセスすれば

という風にEvernoteへの認可画面(認証済なのでこういう画面ですが認証してないとログイン画面)が出ます。

これに認可されると指定してあるCallbackUrlに処理がきます。

コールバックで戻ってくる最初の処理がこちら。


          requestToken = request.getParameter("oauth_token");
          verifier = request.getParameter("oauth_verifier");
          session.setAttribute("verifier", verifier);

ちなみに「oauth_verifier」がnullの時は認可がされなかった時になります。
とにかくセッションに貯めてますね。。。このサンプル。
実際使う場合はコールバックURLでRequestTokenもverifierも取得して判定すれば良いでしょう。

で３番目のリンクをクリックすると


          // Send an OAuth message to the Provider asking to exchange the
          // existing Request Token for an Access Token
          SimpleOAuthRequest oauthRequestor =
            new SimpleOAuthRequest(requestTokenUrl, consumerKey, consumerSecret, null);
          oauthRequestor.setParameter("oauth_token",
              (String)session.getAttribute("requestToken"));
          oauthRequestor.setParameter("oauth_verifier", 
              (String)session.getAttribute("verifier"));
          out.println("Request: " + oauthRequestor.encode());
          Map reply = oauthRequestor.sendRequest();
          out.println("Reply: " + reply);
          accessToken = reply.get("oauth_token");
          String shardId = reply.get("edam_shard");
          session.setAttribute("accessToken", accessToken);
          session.setAttribute("shardId", shardId);

この処理を行っています。
再度SimpleOAuthRequestを利用してアクセストークンを取得しています。
・・・まぁセッションにまた貯めてますねぇ。。。

で最後にAPIにアクセスしています。


          String noteStoreUrl = noteStoreUrlBase +
            session.getAttribute("shardId");

          out.println("Listing notebooks from: " + noteStoreUrl);
          THttpClient noteStoreTrans = new THttpClient(noteStoreUrl);
          TBinaryProtocol noteStoreProt = new TBinaryProtocol(noteStoreTrans);
          NoteStore.Client noteStore =
            new NoteStore.Client(noteStoreProt, noteStoreProt);
          List notebooks = noteStore.listNotebooks(accessToken);

          for (Object notebook : notebooks) {
            out.println("Notebook: " + ((Notebook)notebook).getName());
          }

これによりノートブック一覧が取得できます。
ひとまずOAuthアクセスはこんな感じでできます。

SimpleOAuthRequestを読んでもらえればわかりますが、
パラメータを設定してアクセスしてあげてくれるだけです。

なのでOAuthの仕組みさえわかっていれば簡単です。
※サンプルは流れさえ押さえれば、わかるのですが
　JSPだけでアクセスしてるのでかなり複雑な書き方になっています。

OAuth1.0の解説で一番わかりやすいのはゆろよろ氏が記述している
OAuthプロトコルの中身をざっくり解説してみるよだと思います。
ご覧になってください。

さて今回はサンプルを元にやりましたので
次回Slim3を使ってアクセスしてみましょう！

Evernoteにアクセスする　その１サンプル動作編

2011-06-01T21:05:00.010+09:00

少し前にメモアプリを考えていて、
appengineに保存しようと思っていたんですけど、
なんとなくevernoteに残そうと思い立ったのでアクセスしてみた。

まず「http://www.evernote.com/」にアクセスすると
サイト下部に「開発者の方へ」とあるのでそこをクリック。

「WebサービスAPI」の説明があるのでそこを読んでクリック

そこで入力フォームがあるので、各種入力してSUBMITを行います。

そこから３日程待ちます。。。(´・ω・`)
※サンプル動かしてみてわかったのですが、
Webとして申込むとクライアントアプリのアクセスはできません。
おそらくクライアントアプリでWebのAPIアクセスは無理です。

すると英文でKeyとSecretが送られてきます。
一応これはsandboxなので終わったらできあがったよーってメール送ると
本番環境でも使えるようになるみたいです。(それは後日書くかな。。。)

さて開発に入ります。
・・・その前にユーザをsandnox側で登録しておく必要があります。

まずは
http://www.evernote.com/about/developer/api/
からサンプル等の入ったZIPをダウンロードしてきます。

まずダウンロードしたファイルを解凍します。
\evernote-api-1.19\sample\java\oauth\src
がソースになります。(warもあるのでそれでもOK)

java側にはOAuth用(com.evernote.oauth.consumer.SimpleOAuthRequest)のソースが存在します。
webappにはWebアプリ用のソースが存在します。

ライブラリには

log4j-1.2.14.jar
libthrift.jar
evernote-api-1.19.jar

を使ってますね。

展開したinde.jspの20行目位に


  static final String consumerKey = "xxxxxxx";
  static final String consumerSecret = "xxxxxxxx";

というコードがあるのでそこをメールできたKEYとSECRETに変更する。
これでAPIにアクセス可能になります。

これで動作できるようになります。

。。。サンプルが汚かったのでちょっとまだ読んでないで動作確認のみです。
ソース読みながらOAuthのアクセス(他と一緒の感じですけど)と
API等を見ながらアクセスしてみようと思います。

GoogleAppEngineのヘッダサイズ

2010-11-03T14:01:00.003+09:00

appengineでmixiのsimplepostのリダイレクトを作成しようとすると、

「java.lang.ArrayIndexOutOfBoundsException: 4096」

が発生してしまいました。
リダイレクト時のヘッダーが長すぎるようです。

mixiのsimplepostの日記は本文が全角１万文字まで
リダイレクトが可能なのですが、
どうもjettyの制限（現在は設定可能）やバグの部分が関係しているようです。

http://jira.codehaus.org/browse/JETTY-1093
http://jira.codehaus.org/browse/JETTY-1112

http://groups.google.co.jp/group/google-appengine-java/browse_thread/thread/488d57c223b8173c?pli=1

http://code.google.com/p/googleappengine/issues/detail?id=2413

設定を追加する可能性は低いとみて、
直接リダイレクトせずにクライアントからJavaScriptでリダイレクトをかけようと思います。

mixi Graph APIの認証

2010-10-03T16:01:00.005+09:00

http://developer.mixi.co.jp/connect/mixi_graph_api/api_auth

にある認可方法のJava実装の説明です。

まず、使用するには開発者登録を行い
https://sap.mixi.jp/
で新規サービス追加を行っておく必要があります。

まずURLを作って以下にリダイレクトします。


        String endPoint = "https://mixi.jp/connect_authorize.pl";
     
        String url = endPoint + "?response_type=code";
        
        String key = "キー";
        String scope = "r_profile";
        String display = "pc";

        url += "&client_id=" + key;
        url += "&scope=" + scope;
        url += "&display=" + display;
 
        return redirect(url);

※redirect関数はslim3の関数です。
　このURLにリダイレクトすればOKです。

するとmixiの認証画面に飛びます。
許可がおりるとサービスを作成した際のURLに遷移します。
キーにはサービス作成後に生成される「Consumer Key」を指定しておきます。
r_profileの指定は使用するサービスによって変更します。

認可手順のところに記述してありますね。



        //コードを取得
        String token = requestScope("code");
        String endPoint = "https://secure.mixi-platform.com/2/token";
        String args = "";
        
        String key = "サービスのKEYを指定";
        String scret = "サービスのSECRETを指定";
        String uri = "http://mixi.latest.secondarykey.appspot.com/callback";

        args += "grant_type=authorization_code";
        args += "&client_id=" + key;
        args += "&client_secret=" + scret;
        args += "&code=" + token;
        args += "&redirect_uri=" + uri;

        String json = post(endPoint,args);
        Map jsonMap = createJsonMap(json);

        String email = "メールアドレス";
        String url = "http://api.mixi-platform.com/2/search/people?q=" + email;
        //String url = "http://api.mixi-platform.com/2/people/@me/@self";
 
        get(url,jsonMap.get("access_token"));
  
        return forward("oauth.jsp");

飛んできたURLの引数で「code」がきますので
それを元にURLを作成します。
「redirect_uri」は、、、、何設定するのかな？多分合ってない気がする。。。
それをPOSTで投げます。
post()はオリジナルでHttpURLConnectionを利用して投げています。

その戻り値はjsonで戻ってきます。


{"refresh_token":"a4a634845360522a85cc030e043cb869d2536aa",
"expires_in":900,
"access_token":"8b17d199e43c879c1a015019cf55d9ecd0e2503",
"scope":"r_profile"}

こういう感じのjsonです。

この「access_token」を利用して、利用したいサービスにサクセスします。
ここではPeople lookup APIにアクセスして、
マイミクの情報を取得しています。

get()ではHttpURLConnectionに対して


connection.setRequestProperty("Authorization", "OAuth " + oauth);

と認証情報にアクセストークンを指定する必要があります。

このブログを記述している時点では
メールアドレスによる検索は認可されたユーザの
マイミクでないと検索できないようで、404を返してきていました。
テスト時に自分のメールアドレスを検索してて
「なんで４０４なんじゃー！」って思っていましたが、仕様のようです。

ExCellaで帳票

2010-04-24T16:51:00.005+09:00

最近ExCellaを触ってます。

実際はGoogleAppEngineでサービスを目標にしていて、
一部ExCella自体をいじりながらの開発です。
一応Excelが出力できたのでブログを起こしておきましょう。

やっぱりGAEでネックになるのは
ファイルシステムとの問題です。

まず、core側にあるExporterのTextExporterとWorkbookExporterを
削除しました。
単純にいうとまずはスモールスタートの為に
ExcelOutputStreamExporterのみをサポートする事にしました。

本来はXLS周りを使用してみたかったのですが
POI自体(ExCella内部で使っている)が、テンプレートの読み込み途中で
xmlファイルを保存している感じがあって、落ちてしまいます。

なので一旦はExcelに集中。

ExCella自体がファイルへの出力重視的な実装になっていて
親クラスで「出力ファイル名」等を持つことが多いみたいなので
ひとまずそのあたりを削除。
エラーになるところを潰していくような作業になりました。

・・・実際は根本の部分でOutputStreamの設定する仕組みに変えるべきだと
。。。ブログ書いてる途中に思いまして、ちょっと実装しなおそうかな？
って思っています。

現状だと


        ByteArrayInputStream inStream = new ByteArrayInputStream(template.getBytes());
        
        ReportBook outputBook = new ReportBook(inStream,ExcelOutputStreamExporter.FORMAT_TYPE);
        
        ReportSheet outputSheet = new ReportSheet("テンプレート","請求書");

        outputBook.addReportSheet(outputSheet);

        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        ReportProcessor reportProcessor = new ReportProcessor();
        stream = reportProcessor.process(outputBook);

        response.setHeader("Content-Disposition","attachment; filename=excel.xls");
        response.setContentType("application/msexcel");
        response.setContentLength(stream.toByteArray().length);
 
        OutputStream out = new BufferedOutputStream(response.getOutputStream());
        out.write(stream.toByteArray());
        out.close();

こんな感じで動作します。

GAEでの動作なのでinputStreamは
テンプレート用のファイルをDataStore上に溜め込んでいます。

コードネームはdon-gabachoです。
あー。。。もういっかい書き直して
全部書き留めないとなぁ。。。

※2010/4/25 でリファクタリング完成
http://code.google.com/p/don-gabacho/wiki/ExCella?ts=1272171109&updated=ExCella
streamをBookから引き渡すように変更しています。

カーソルの変更

2010-03-26T00:09:00.000+09:00

[Embed(source="Assets.swf", symbol="mx.skins.cursor.hogehoge")]

private var _hogehogeClass:Class;

こういう感じみたいですけど、
Assets.swfにあるイメージの一覧が欲しい。

FlashLiteで引数を埋め込む(Java)

2010-03-14T19:14:00.005+09:00

先日友人がFlashLiteでの引数埋込に苦戦してた。

携帯で個体識別番号などの引数を元にFlashを書き換えたいらしい。

ここに方式はあるんだけど、、、って事でJava化してみた。


 public static String inCode  = "utf-8"; 
    public static String outCode = "shift-jis"; 
    /**
     * FlashLite への引数の埋込
     * @param oldFile
     * @param argMap
     * @return
     */
    public static byte[] createArgEmbedSwf(byte[] oldFile, Map<String, String> argMap) {
        
        ByteArrayOutputStream byteStream = new ByteArrayOutputStream();
        //rectbitの３ビット右シフト
        byte rectbit = (byte)((int)oldFile[8] / 8);

        //$headlen = ceil(((( 8 - (($rb*4+5)&7) )&7)+ $rb*4 + 5 )/8) + 12 + 5;
        double dblHead = ((( 8 - ((rectbit*4+5)&7) )&7)+ rectbit*4 + 5 ) / 8;
        //ヘッダ長を取得
        int headLen = (int)Math.ceil(dblHead) + 12 + 5;

        //引数部分の作成
        byte[] doActionTag = createArg(argMap);

        //$newsize = $oldsize+strlen($doactiontag);
        int oldSize = oldFile.length;
        //新しいサイズを取得
        int newSize = oldSize + doActionTag.length;

        //新しいヘッダを作成
        byte[] newHeader = createHeader(oldFile,headLen,newSize);
        //ヘッダ後のデータを取得
        byte[] tail = createTail(oldFile,headLen);  
        try {
            //タグ部分の書き込み
            byteStream.write(newHeader);
            byteStream.write(doActionTag);
            byteStream.write(tail);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return byteStream.toByteArray();
    }
    /**
     * 新しいヘッダーの作成
     * @param buf
     * @param headLen
     * @param newSize
     * @return
     */
    private static byte[] createHeader(byte[] buf, int headLen, int newSize) {
        
        //ヘッダの位置を取得
        //$head = $headtmp.fread($fr,$headlen-9);
        //$newhead = substr($head,0,4).h32($newsize).substr($head,8);

        byte[] newHeader   = new byte[headLen];
        //４バイトでint値をバイトに変換
        byte[] newHeadSize = changeBytes(newSize,4);
        //長さを変更
        for ( int cnt = 0; cnt < headLen; ++cnt ) {
            if ( cnt >= 4 && cnt < 8 ) {
                newHeader[cnt] = newHeadSize[cnt-4];
            } else {
                newHeader[cnt] = buf[cnt];
            }
        }
        return newHeader;
    }
    //3f 03 18 00 00 00 96 08
    //00 00 6d 79 6e 61 6d 65
    //00 96 08 00 00 74 61 77
    //74 61 77 00 1d 00
    
    //3f 03 -- タグはじまり, Type=12(DoActionタグ)
    //18 00 00 00 -- タグ長さ 0x18 = 24 byte(ここからタグ終わりまでの長さ)

    //96 -- ActionPush
    //08 00 -- Pushするものの長さ, 8 byte
    //00 -- Pushするものは文字列
    //6d 79 6e 61 6d 65 00 -- "myname" (ord("m")=109=0x6d など。00は文字列終端を意味)

    //96 -- ActionPush
    //08 00 -- Pushするものの長さ
    //00　 -- Pushするものは文字列
    //74 61 77 74 61 77 00 -- "tawtaw"

    //1d -- ActionSetVariable
    //00 -- タグ終わり
    /**
     * タグ用のバイトを作成
     * @param argMap
     * @return
     */
    private static byte[] createArg(Map<String, String> argMap) {

        List<Byte> byteList = new ArrayList<Byte>();

        //タグの始まりを設定
        //$tag = "\x3f\x03";
        byteList.add((byte)0x3f);
        byteList.add((byte)0x03);

        //タグの長さを取得
        //$taglen = calctaglen($dataarray);
        int tagLen = calcArgLen(argMap);

        //$tag .= h32($taglen);
        add(changeBytes(tagLen,4),byteList);

        //foreach($dataarray as $key => $value)
        Iterator<Entry<String,String>> itr = argMap.entrySet().iterator();
        //キー数回繰り返す
        while ( itr.hasNext() ) {
            Entry<String,String> entry = itr.next();

            //$tag .= "\x96".h16(strlen($key)+2)."\x00".$key."\x00";
            addString(entry.getKey(),byteList);
            //$tag .= "\x96".h16(strlen($value)+2)."\x00".$value."\x00";
            addString(entry.getValue(),byteList);

            //$tag .= "\x1d";
            byteList.add((byte)0x1d);
        }
        //終端のバイトを設定
        //$tag .= "\x00";
        byteList.add((byte)0x00);
        return change(byteList);
    }
    
    /**
     * 引数の長さを取得
     * @param argMap 引数用のマップ
     * @return
     */
    private static int calcArgLen(Map<String, String> argMap) {
        int rtn = 0;
        Iterator<Entry<String,String>> itr = argMap.entrySet().iterator();
        //キー数回繰り返す
        while ( itr.hasNext() ) {
            Entry<String,String> entry = itr.next();
            String key;
            String value;
            try {
                key = new String(entry.getKey().getBytes(inCode),outCode);
                value = new String(entry.getValue().getBytes(inCode),outCode);
            } catch (UnsupportedEncodingException e) {
                throw new RuntimeException("文字列コード変換失敗",e);
            }
            //それぞれのバイト数とタグ用の11バイトを追加
            try {
                rtn += (key.getBytes(outCode).length + value.getBytes(outCode).length + 11);
            } catch (UnsupportedEncodingException e) {
                throw new RuntimeException("文字列コード変換失敗",e);
            }
        }
        //終端分を追加
        return rtn + 1;
    }

    /**
     * ヘッダの後ろを取得
     * @param buf
     * @param oldSize
     * @param headLen
     * @return
     */
    private static byte[] createTail(byte[] buf,int headLen) {

        int oldSize = buf.length - headLen;
        byte[] tail = new byte[oldSize];
        int idx = 0;
        //$tail = fread($fr, $oldsize-$headlen);
        for ( int cnt = headLen; cnt < buf.length; ++cnt ) {
            tail[idx] = buf[cnt];
            ++idx;
        }
        return tail;
    } 


    /**
     * リストから配列に変更
     * @param byteList
     * @return
     */
    private static byte[] change(List<Byte> byteList) {
        byte[] rtnByte = new byte[byteList.size()];
        int idx = 0;
        for ( Byte b : byteList ) {
            rtnByte[idx] = b;
            ++idx;
        }
        return rtnByte;
    } 
    
    /**
     * バイト配列への変更
     * @param i
     * @param leng
     * @return
     */
    private static byte[] changeBytes( int i ,int leng){
        byte[] b = new byte[leng] ;
        if ( leng > 4) {
            b[3] = (byte)((i >>> 24 ) & 0xFF);
        }
        if ( leng > 3) {
            b[2] = (byte)((i >>> 16 ) & 0xFF);
        }
        if ( leng > 2) {
            b[1] = (byte)((i >>>  8 ) & 0xFF);
        }
        if ( leng > 1) {
            b[0] = (byte)((i >>>  0 ) & 0xFF);
        }
        return b;
    }
    
    /**
     * リストへの追加
     */
    private static void add(byte[] byteArray,List<Byte> byteList) {
        for ( byte b : byteArray ) {
            byteList.add(b);
        }
    }

    /**
     * 文字列の追加
     * @param key
     * @param byteList
     */
    private static void addString(String key, List<Byte> byteList) {
        
        String tmp = null;
        try {
            tmp = new String(key.getBytes(inCode),outCode);
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException("文字列変換失敗",e);
        }

        //$tag .= "\x96".h16(strlen($key)+2)."\x00".$key."\x00";
        byteList.add((byte)0x96);
        //文字列数を設定
        byte[] lengByte;
        try {
            lengByte = changeBytes(tmp.getBytes(outCode).length + 2,2);
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException("文字列変換失敗",e);
        }
        add(lengByte,byteList);

        byteList.add((byte)0x00);
        //文字列を設定
        try {
            add(tmp.getBytes(outCode),byteList);
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException("文字列変換失敗",e);
        }
        byteList.add((byte)0x00);
    }

byteのつなげ方とかが独自で、少ない時間での実装なので何か良い方法があるかも。

byte[]での変換に終わってるのは、GAE上での動作確認をしたかったからです。

blob型で保存して動的に変更させる事に成功しました。



        byte[] newFile = FlashUtil.createArgEmbedSwf(targetFile.getBytes() , argMap);
        
        try {
            response.setContentType("application/x-shockwave-flash");
            OutputStream out =
                new BufferedOutputStream(response.getOutputStream());
            try {
                out.write(newFile);
            } finally {
                out.flush();
                out.close();
            }
        } catch (IOException e) {
            ThrowableUtil.wrapAndThrow(e);
        }

こんな感じかな？

日本語文字化けしちゃうけど、、、、まぁ方式がわかれば解決するでしょう。

Slim3でクラウド開発を始める。その４

2010-03-02T22:49:00.013+09:00

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

第一弾、第二弾、第三弾

第二弾をやってから第一弾をやらないと、

アノテーションのところがプロジェクト名に依存しているので

大変な事になりそう(>_<)すみません。

今回はGoogleAppEngineへのデプロイです。

GooglePluginを入れると左上に以下のアイコンが出ます。

それをポチッとな。

するとデプロイの画面がでますので、

プロジェクトを選択して、管理者のメールアドレスとパスワードを入力します。

画像では切れていますが、SDKの設定があるのでそこをクリック！

出てきた画面にGoogleAppEngineにアプリケーションを登録した際の

IDを入力します。

これで設定は完了です。

デプロイしたらURLにアクセスしてください。

おそらくアプリケーションが表示されている。。。。はずです。

Slim3でクラウド開発を始める。その３

2010-02-27T10:31:00.013+09:00

第一弾、第二弾

そういえば少し前にGAEがDataNucleusを使ってるので

それを使って、HSQLDBにつなげた事もありました(>_<)

で本題です。

Slim3は同時にテストも出力してくれます。

なのでその設定をします。

まずプロジェクトを選択して、設定を行います。

その後、Javaのコードスタイル、インポートの編成を選択して

プロジェクト特有の設定を行います。

(java.lang.Math.*)に必要なインポート数を「１」に設定します。

終わったら画面を閉じて「ウィンドウ」から「設定」を選択します。

Javaのエディタにコンテンツ・アシストがあります。

そこにお気に入りがあるので選択して

以下を追加します。

org.hamcrest.CoreMatchers

org.junit.Assert

org.junit.matchers.JUnitMatchers

で「一般」を選択すると「ワークスペース」があります。

そこに「自動的にリフレッシュ」がありますんで

選択してください。

Slim3でクラウド開発を始める。その２

2010-02-22T07:45:00.008+09:00

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

第一弾

さぁ第二弾です。
いよいよSlim3 RC1が近づいて参りました。
今回はsllim3-blankの名称を変更したい時の話をします。

まずプロジェクトで右クリックします。

その後リファクタを選んで、名前変更を選択します。

もしくはプロジェクトを選択して、F2でもOK。

出てきたボックスに対して、

自分の好きな名前（任意）を書きます。

するとプロジェクト名が変わります。

その後、build.xmlを選択して、

nameを変更します。

こんな感じですかね？

第三弾に続く。

FlexでGoogleAnalytics

2010-02-22T07:25:00.008+09:00

Flexでサービスを作成していましたが、

HTMLの呼び出ししかアクセス解析ができてなくて

ViewStack化しているような位置のアクセス解析ができてなかったので

アクセスログを取りたいなぁ。。。って思ってたら

「gaforflash」たるものを見つけました。

http://code.google.com/p/gaforflash/downloads/list

ダウンロードしたファイルのなかに[lib/analytics.swc]がありますので

ライブラリに追加してあげます。

Flashで使う場合はもう一個の「lib/analytics_flash.swc」を

使うみたいですね。


  private static var tracker:AnalyticsTracker = null;
  public static function initTracker(object:DisplayObject):void {
   if (tracker == null) {
   tracker = new GATracker(object, "UA-?????-??", "AS3");
   }
  }
  public static function viewPage(pageUrl:String):void {
   if ( tracker == null ) return;
    tracker.trackPageview(pageUrl);
  }

巷に落ちてるサンプルだと、常にnewしているようでしたが、

なんか勿体なかったので、Singletonパターンで作成しておいて

viewPage()でURLを設定する形を行いました。

コンストラクタの第四引数に「true」を設定してあげたら

デバッグモードで動作して、アクセスを確認できるみたいです。

Slim3でクラウド開発を始める

2010-02-21T12:25:00.013+09:00

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

Slim3に飛びついたのは、GoogleAppEngineで
ファイルのアップロードができるし、Strutsだったから
飛びついたのを覚えています。
現在はStrutsには対応していませんが

MVCが整った軽量なフレームワークです。

使用するにはeclipseとGoogle Plugin for eclipseが必要です。

「http://slim3.googlecode.com/svn」
[slim3-blank]をチェックアウトします。
※Downloadからblankをダウンロードしてインポートしても

　　開発は開始できます。

現在SDKは1.3.1のようですね。

作成されたプロジェクトで右クリックを押して、

コンパイラのアノテーションのファクトリーパスを選択します。

右の画像の画面を出してjarを選択します。

まだアーリーアクセス(EA)なんですね(>_<)

完成度結構高いんですけどね。

んでプロジェクトで「war/WEB-INF/web.xml」を

開きます。

右の部分が自分の名前空間になりますから

何か適当な名前をつけましょう！

その後はプロジェクト直下にある

build.xmlを選択して右クリックで

実行を押して、下のantを選択します。

すると右の画面が出ます。

gen-controllerはコントロールを自動作成

gen-modelはモデルを自動作成してくれます。

gen-controllerで出てくるボックスに

URLを指定してあげるとその指定したURLを

操作するControllerとJSP、プラステストコードを出力してくれます。

modelはそのモデルクラスとテストコードを出力してくれます。

mixiにOAuthなRESTfulアクセス(Java)

2010-02-13T17:15:00.003+09:00

最近サービスづいてきています。OAuthばっかりです。
今度はJavaでmixiにアクセスです！

まず、、、RESTful APIでアクセスするには
まずmixiアプリの登録が必要です。

http://developer.mixi.co.jp/appli/pc/pc_prepare/add_app_flow

アプリケーションを登録できたら、
アプリケーションに対してConsumer KeyとConsumer Secretが発行されます。

これを元にOAuthアクセスを行います。

まずHMAC-SHA1と呼ばれる暗号化を行う為のインスタンスを生成します。


            byte[] secretyKeyBytes = secret.getBytes("UTF-8");
            secretKeySpec = new SecretKeySpec(secretyKeyBytes,hmac);
            mac = Mac.getInstance(hmac);
            mac.init(secretKeySpec);

ここでのsecretはConsumer Secretに「&」を付与したものになります。
secretKeySpecはjavax.crypto.spec.SecretKeySpecになります。
macはjavax.crypto.Macですね。

URLに設定する引数を作成します。


        params.put("oauth_consumer_key", KEY);
        params.put("oauth_signature_method", "HMAC-SHA1");
        params.put("oauth_timestamp", String.valueOf(cal.getTimeInMillis()).substring(0,10));
        params.put("oauth_version", "1.0");
        params.put("oauth_nonce", nonce);
        params.put("xoauth_requestor_id", viewerId);
        params.put("format", "atom");

このparamsはURLを作成する為のオリジナルクラスのマップです。

oauth_consumer_keyに設定しているKEYはConsumer Keyですね。
oauth_signature_methodは暗号化を示す"HMAC-SHA1"を固定で指定します。
oauth_timestampは時刻を設定します。
oauth_versionはmixiに指定された文字列
oauth_nonceはリクエスト毎に違うランダムな文字列です。UUID.randomUUID().toString()などで生成します。
xoauth_requestor_idは対象のユーザIDです。
formatはatomを設定していますが、最終的に取得するデータの形式でjsonでも取得できます。

次にシグネチャを取得する為の文字列を取得します。


        String method = "GET";
        String http   ="http://" + endpoint + requestURI ;
        String args   = canonicalQS;
        String toSign;
        try {
            toSign = URLEncoder.encode(method,"UTF-8")+"&"+
                            URLEncoder.encode(http,"UTF-8")+"&"+
                            URLEncoder.encode(args,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e);
        }

endpointはmixiのエンドポイント、、、って公開して良いのかな？
requestURIは/people/{id}/@allです。{id}は取得したい人のIDを設定します。
canonicalQSは前に設定したマップから取得したURLの引数です。

これらの文字列をそれぞれURLエンコードして”&”で連結します。

その文字列を最初に作ったmacを元にしてシグネチャを作成します。


        String signature = null;
        byte[] data;
        byte[] rawHmac;
        try {
            data = stringToSign.getBytes(CHARSET);
            rawHmac = mac.doFinal(data);
            Base64 encoder = new Base64();
            signature = new String(encoder.encode(rawHmac));
         signature = signature.substring(0, hmac.length()-2);
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(CHARSET + " is unsupported!", e);
        }

        try {
            signature = URLEncoder.encode(signature, CHARSET).replace("+", "%20")
                    .replace("*", "%2A").replace("%7E", "~");
        } catch (UnsupportedEncodingException e) {
        }

この文字列には改行が入ってますので２文字削除しています。
そのあと、文字列の変換をかけてます。

で、、、作成されたシグネチャを元に、アクセスするURLを作成します。


String url = "http://" + endpoint + requestURI + "?" + canonicalQS + "&oauth_signature=" + sig;

でここにアクセスするとそのユーザの情報がXML化されて取得できるってわけです。
但し、ここで問題が発生します。
アクセスすると４０１エラーが返ってきます。

だので、、、mixiアプリの事を調べていくと。。。


対象ユーザが対象のmixiアプリを起動していない、もしくは起動から一定時間が経過した後にRESTful APIにアクセスを行った際には、
HTTPレスポンスコードとして「401 Unauthorized」が返却されます。

ををを、、、そういう事なのね。
ようはしばらくmixiアプリを起動した人の情報を
xoauth_requestor_idに設定してあげないと
アクセスできないってわけです。

APIを使うにはいろいろ画面遷移を考えないときついっぽいですね。
しかしこれでアクセスできました。
さぁ問題は何を作るかですね。。。。。

OAuthの仕様は
http://oauth.googlecode.com/svn/spec/ext/consumer_request/1.0/drafts/1/spec.html
にあります。

シグネチャがうまく取れるまで結構かかりました。
なのでここにある仕様(文字列)を元にテストを書きました。

実際のコードはその他サービスなどにアクセスしている為
複雑なクラスになっているのを平たく記述しているので
ペローンって感じのコードになっていますが、テストは通ります。


package jp.co.ziro.surpre.helper;

import static org.junit.Assert.*;

import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import java.util.Iterator;
import java.util.Map;
import java.util.TreeMap;

import javax.crypto.Mac;
import javax.crypto.spec.SecretKeySpec;

import org.apache.commons.codec.binary.Base64;
import org.junit.Test;


public class OAuthServiceHelperTest {

    private static final String KEY = "dpf43f3p2l4k3l03";
    private static final String SECRET = "kd94hf93k423kf44";
    private static final String endpoint = "provider.example.net"; 
    private static final String HMAC = "HmacSHA1";
    private static final String REQUEST_URI = "/profile";
    private static final String NONCE = "kllo9940pd9333jh";
    private static final String REQUEST_METHOD = "GET";
    
    @Test
    public void testOAuthService() {

        Map<String, String> paramMap = new TreeMap<String, String>();

        //基本的な引数をすべて設定
        paramMap.put("oauth_consumer_key", KEY);
        paramMap.put("oauth_signature_method", "HMAC-SHA1");
        paramMap.put("oauth_timestamp", "1191242096");
        paramMap.put("oauth_version", "1.0");
        paramMap.put("oauth_nonce", NONCE);
        
        String canonicalQS = canonicalize(paramMap);

        String method = REQUEST_METHOD;
        String http   ="http://" + endpoint + REQUEST_URI ;
        String args   = canonicalQS;

        String toSign;
        try {
            toSign = URLEncoder.encode(method,"UTF-8")+"&"+
                            URLEncoder.encode(http,"UTF-8")+"&"+
                            URLEncoder.encode(args,"UTF-8");
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e);
        }
 
        String hmac = hmac(toSign);
        hmac = hmac.substring(0, hmac.length()-2);
 
        assertEquals(hmac,"SGtGiOrgTGF5Dd4RUMguopweOSU=");
    }
    
    private String hmac(String stringToSign) {
        String signature = null;
        byte[] data;
        byte[] rawHmac;
        try {
            String secret = SECRET + "&";
            byte[] secretyKeyBytes = secret.getBytes("UTF-8");
            SecretKeySpec secretKeySpec = new SecretKeySpec(secretyKeyBytes,HMAC);
            Mac mac = Mac.getInstance(HMAC);
            mac.init(secretKeySpec);
            data = stringToSign.getBytes("UTF-8");
            rawHmac = mac.doFinal(data);
            Base64 encoder = new Base64();
            signature = new String(encoder.encode(rawHmac));
        } catch (Exception e) {
            throw new RuntimeException(e);
        }
        return signature;
    }


    private String percentEncodeRfc3986(String s) {
        String out;
        try {
            out = URLEncoder.encode(s, "UTF-8").replace("+", "%20")
                    .replace("*", "%2A").replace("%7E", "~");
        } catch (UnsupportedEncodingException e) {
            out = s;
        }
        return out;
    }

    private String canonicalize(Map<String, String> sortedParamMap) {
        if (sortedParamMap.isEmpty()) {
            return "";
        }
        StringBuffer buffer = new StringBuffer();
        Iterator<Map.Entry<String, String>> iter = sortedParamMap.entrySet().iterator();
        while (iter.hasNext()) {
            Map.Entry<String, String> kvpair = iter.next();
            buffer.append(percentEncodeRfc3986(kvpair.getKey()));
            buffer.append("=");
            buffer.append(percentEncodeRfc3986(kvpair.getValue()));
            if (iter.hasNext()) {
                buffer.append("&");
            }
        }
        String cannoical = buffer.toString();
        return cannoical;
    }

    
}

元のコードは
http://bit.ly/bVSEgt
なども参考にしています。

URL短縮サービスbit.ly

2010-02-10T08:31:00.004+09:00

Twitterでつぶやけるようにしたものの、
URLを貼り付けたら文章が長くなってしまうので
URL短縮サービスとつなげることにしました。

まずbit.lyにユーザ登録します。
するとアカウント情報のところにAPIKeyが発行されます。


 
String endPoint = "http://api.bit.ly/shorten";
paramMap.put("apiKey", APIKEY);
paramMap.put("login", LOGIN);
paramMap.put("version", VARSION);
paramMap.put("format", FORMAT);
paramMap.put("longUrl", longUrl);

※paramMapはURLの引数です。
　ちょっとクラス化しててうまく説明できないです。

URLを指定して、その他引数を渡します。
LOGINにはログイン用に登録したID、
versionには現在"2.0.1"、formatには"xml"を指定します。
※jsonでの取得もあるようです。

longUrlには変換対象のURLを指定します。

それでURLアクセスして取得してきたRESTに
"sortUrl"タグがありますので
それを利用すればOKです。

いやぁしかし、URL短縮ツールってURL短くするサービスだと思ってましたが
そのURLをアクセス解析なんかに使えるんですね。

メーリングリストとかでリンク送るときに使えば
アクセス数が簡易的にわかってよいかもですね。

あっちをたてればこっちがたたず

2010-02-10T00:48:00.002+09:00

新しいサービスをつくろうとして悩んでます。
OAuthでつなげようと思いながら、それはあれで、あれはそれで。

結論はY化しようと思います。

OAuthとTwitter4J(Slim3とFlexも)

2010-02-09T00:45:00.007+09:00

先日Flex（AS3）でOAuth認証を行いました。
しかし、セキュリティサンドボックスの問題により、棚上げしました。
セキュリティサンドボックスも何かまとめないとですね。

って事でWeb側でTwitterにアクセスしてサービスを実現する事にしました。
結局、プロキシになっちゃいました。
まぁ挙動さえ分かってしまえばこっちのもんです。

ちなみにOAuth部分はTwitter4Jに任せてますので
その挙動を見たければsourceを添付してあげて調べてください。

※ソースは一部関数化してるものを平らにしているので
変数名とかはおかしいかも。。。


Twitter twitter = new TwitterFactory().getInstance();
twitter.setOAuthConsumer(KEY, KEY_SECRET);
try {
        RequestToken requestToken = twitter.getOAuthRequestToken();
        String url = requestToken.getAuthorizationURL();
        requestScope("url",url);
        sessionScope("requestToken",requestToken);
} catch (TwitterException e) {
 new RuntimeException(e);
}

まず、Twitterオブジェクトを取得してアプリケーションのキー値を設定します。
そこからURLを取得してきます。それを返します。

その後、Pinを取得して処理する場合に新たにRequestTokenを作成すると
おかしくなるのでセッションに設定しました。
※requestScope(),sessionScope()はSlim3のメソッドです。
リクエストやセッションに溜め込んでください。

そのリクエストを元にURLにアクセスします。
私の場合はFlexなので


//リンクを飛ばす
navigateToURL(new URLRequest(oauthUrl));

って感じになりました。

ここにアクセスすると横の画像のWebが別ブラウザで表示されます。
Twitterアカウントを入力すると認証され、

Pinが表示されます。
。。。。画像で表示されます。選択してコピーして
そのPinを自分のWebページなどで入力します。

。。。ここでコールバックなどをうまく使えば
多分何手かUIを改善できそうな気がするんですけどね。

私の場合はそれを元にPinを入力して再度サーバサイドで処理を行いました。


Twitter twitter = new TwitterFactory().getInstance();
twitter.setOAuthConsumer(KEY, KEY_SECRET);
String pin = requestScope("pin");
RequestToken requestToken = sessionScope("requestToken");

AccessToken accessToken = null;
try {
    accessToken = twitter.getOAuthAccessToken(requestToken, pin);
} catch (TwitterException e) {
    throw new RuntimeException(e);
}
String token = accessToken.getToken();
String tokenSecret = accessToken.getTokenSecret();

先ほど保存しておいたRequestTokenと取得したPinをリクエストから受け取り、
AccessTokenを取得します。
それによりトークンを取得する事が必要です。

私はここでSlim3 Datastoreを使用して、トークンを永続化しています。
ちなみにですが、私が作ってるのは認証アプリなので
認証をしたUserオブジェクト(GAE)も保存しています。

その後はログインしたユーザを元に
このトークンを取得してきて処理をします。


Twitter twitter = new TwitterFactory().getInstance();
twitter.setOAuthConsumer(KEY, KEY_SECRET);

AccessToken accessToken = new AccessToken(data.getToken(),data.getTokenSecret());
twitter.setOAuthAccessToken(accessToken);
twitter.updateStatus(tweet);

dataは永続化したオブジェクトです。
updateStatus()はtwitter4jのつぶやく機能です。

こんな感じでサービスを作成しました。
ユーザ情報を保存したくなくて、OAuthに対応しましたが、
色々とツールがあって簡単にできるもんですね。

TwitterアプリでOAuth認証

2010-02-07T08:23:00.002+09:00

とあるサービスを作る過程でTwitterクライアントを
作ろうと思い、作り始めました。
始めはユーザIDとパスワードを入力してもらおうと考えていましたが
やはり自分のアプリにそれを保存しておくの億劫になり、
OAuth認証で作る事にしました。

まずここに行って
アプリケーションを登録する必要があります。

登録を終えるとアプリケーションのページができて、
キーが２つ発行されます。
「https://twitter.com/apps」で確認ができます。
ちなみに認証して使用しているアプリケーションを確認するには
「https://twitter.com/account/connections」
に行くと確認できます。

さてここで開発開始ですが。。。。
Javaの部分でサービスのアクセスを作成していたのですが、
認証部分はFlexで行った方が画面遷移とか簡単そうだったので
Flex側で書くことにしました。

Twitterさんのサイトに各言語におけるサンプルサイトを紹介しています。
https://twitterapi.pbworks.com/OAuth-Examples

そこでFlexのサイトがあったので
http://www.coderanger.com/blog/?p=59
これを元に作成しました。

なのでここのソースを元に説明していきます。


private var _twitauth:OAuthManager = new OAuthManager();
_twitauth.addEventListener( OAuthEvent.ON_REQUEST_TOKEN_RECEIVED, onRequestTokenReceived );
_twitauth.addEventListener( OAuthEvent.ON_REQUEST_TOKEN_FAILED, onRequestTokenFailed );
_twitauth.addEventListener( OAuthEvent.ON_ACCESS_TOKEN_RECEIVED, onAccessTokenReceived );
_twitauth.addEventListener( OAuthEvent.ON_ACCESS_TOKEN_FAILED, onAccessTokenFailed );
_twitauth.usePinWorkflow = true;
_twitauth.consumerKey = key.text;
_twitauth.consumerSecret = secret.text;
_twitauth.oauthDomain = "twitter.com";
_twitauth.requestToken();

この箇所はアクセス後の呼び出される関数を設定して
アプリケーションで取得したキーの設定を行っています。
サンプルではコントロールから取得している感じになっていますが
ここに設定してあげます。

_twitauth.requestToken();

で最初のリクエストを行っています。
この関数と同時にアプリケーション認証のサイトを別のブラウザで表示してくれます。

ここでユーザが許可し認証を行うと
アプリケーションが認証され、PINコードが表示されます。

そのPINをユーザにテキストボックスなどに入力してもらって


private function onSendPin():void
{
 _twitauth.requestAccessToken( Number( pin.text ) );
}

この関数で送ってあげます。
このリクエストで成功した場合「onAccessTokenReceived()」が発生するので
そこでユーザの認証情報を取得できます。

あとはアプリケーションでこの情報を永続化するなどをして
アクセスを行います。
下の方にあるコードはその情報を使ってつぶやいているコードです。

認証を行うとこのようにアプリケーションが追加されます。

おそらくアプリケーションの設定でCallbackURLなどを使って
一部自動化できるような気もしていますが、一応これでつぶやく事ができました。
ただし、このブログ公開時点ではサーバサイドにあげた場合に
アクセスできないという不具合があるので何か間違っているのかもしれません。

このコードを参考にしてオープンソース化されている方もいらっしゃるので
http://code.google.com/p/q-oauth/
ぜひお使いください。

Efflex

2010-01-30T12:47:00.002+09:00

Efflexを使用していますが、
どうも最新のエフェクトが使いたくて、
ソースをダウンロードしてきました。

だけど、、、コンパイルエラー。
Papervisionが入ってないからだと、swcを落としてきましたが
ダメでした。調べてみると結構古いバージョン(GreatWhite Alpha)を
使用しているらしく、ダメでした。

だけど冷静に考えるとswc自身が持っている可能性があると思い
libsに入れてみる。通った～！！！

って思いましたが単独でエラーになってます。
何点か問題になった点を修正して使えるようになりました。
結構かかりました。

GAEとDoCoMoのアドレス

2009-11-21T13:22:00.004+09:00

GAEでメール受信を作りましたが、

初めに試してもらった人が「xxxxx.@docomo.ne.jp」てアドレスでした。

どうも@の前に「.」があるとダメみたいで

getFrom()をやると「local part invalid」ってエラーが出てました。

なのでヘッダーの情報を見て、

 Enumeration<?> enu = aMessage.getAllHeaderLines();  //データ数回繰り返す while ( enu.hasMoreElements() ) {  String line = (String)enu.nextElement();  if ( line.toLowerCase().indexOf("from") >= 0 ) {   //fromを検索して追加   fromAddress.add(line);  } else if ( line.toLowerCase().indexOf("to") >= 0 ) {   //toを検索して追加   toAddress.add(line);  } }

って感じでFromやToを抜き出して、

そこからアドレスを抽出して処理してみました。

まぁシビアにはまずいかもしれませんが

一応これでメールアドレスを判定する事ができました。

TitleWindowをリサイズする

2009-11-15T14:40:00.002+09:00

TitleWindowをリサイズ可能にしようと思い立ち

http://blog.enjoitech.jp/detail.php?aid=137

を元に作成したのだが、スクロールバーなどがあると

かなり挙動不審になりますね。。。

つうことで

onThis_mouseDown() 関数の初めに

    if ( event.target != this ) {     return;    }

といれると結構安定します。

ちなみに私は

    private const SIZE_DRAGAREA:int = 10;   private const SIZE_MIN_WIDTH:int = 50;   private const SIZE_MIN_HEIGHT:int = 50;

位で使います。

Blogger・・・トラックバックできない。。。

・・・なんかややこしいけどやり方はあるみたい。

やってみるかな。。。

GAEでメール受信

2009-11-08T08:59:00.002+09:00

GAEにメール受信する機能が増えたんですね。
またまたやってくれます。。。。って思ってたら
やっぱり限定の機能なんですね。

・・・まぁそれだけでもすごい事です。
えーと、、、仕組みはここにあります。

string@appid.appspotmail.com

に送ると、

/_ah/mail/

に届くみたいですね。。。。
Cronとか駆使して、、、って考えてたんですけど、
開発環境でみる限り、メールを送信したら、サーブレットをPostしてくれるみたいです！
なんだ、、、色々楽ですね。。。

まず、appengine-web.xmlに



    <inbound-services>
      <service>mail</service>
    </inbound-services>

を追加します。

その後web.xmlに


    <servlet>
      <servlet-name>mailHandle</servlet-name>
      <servlet-class>bz.ziro.kanbe.servlet.MailHandlerServlet</servlet-class>
    </servlet>
    <servlet-mapping>
      <servlet-name>mailHandle</servlet-name>
      <url-pattern>/_ah/mail/*</url-pattern>
    </servlet-mapping>

～

    <security-constraint>
      <web-resource-collection>
        <url-pattern>/_ah/mail/*</url-pattern>
      </web-resource-collection>
      <auth-constraint>
        <role-name>admin</role-name>
      </auth-constraint>
    </security-constraint>

を追加します。
servletの上はクラス名、下はURLです。
URLは固定ですね。

下のはセキュリティ設定です。
第三者が触れないようにadmin(アプリ管理者)のみ触れるようにしておきます。

その後HttpServletを派生したクラスを作成して
doPost()を実装します。


 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {

        try {
            Properties props = new Properties();
            Session session = Session.getDefaultInstance(props, null);
            MimeMessage message = new MimeMessage(session, req.getInputStream());
            


        } catch (MessagingException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
 }

これで、メールを受け取ったら動作します。
http://localhost:8080/_ah/admin/
にアクセスすると、inboundMailっていうのがあるので
開発環境ではここから送信できます。

先だって話したように、URLとメールアドレスが連動しているので
何のメールかとかをToで判断したりすればOKだと思います。

FlexのリリースビルドをAntで

2009-11-08T01:37:00.002+09:00

Flexのリリースビルドを簡単にAntでやろうとしたらハマりました(>_<)


<project name="kanbeMng" default="release" basedir=".">
 
 
 <taskdef resource="flexTasks.tasks" classpath="D:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0\ant\lib\flexTasks.jar"/>
    <property name="FLEX_HOME" value="D:\Program Files\Adobe\Flex Builder 3\sdks\3.2.0"/>
    <property name="APP_ROOT" value="C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\kanbeMng"/>
    <property name="SRC_ROOT" value="${APP_ROOT}\src"/>
 <property name="mxmlc.jar" location="${FLEX_HOME}/lib/mxmlc.jar"/>
 
    <property name="debugDir"   value="bin-debug"/>
    <property name="releaseDir" value="bin-release"/>
 
    <property name="targetDir" value="D:/workspace/kanbe/war/mng"/>
    <property name="targetBlankDir" value="D:/workspace/kanbe-blank/war/mng"/>
 
    <property name="flashFile" value="KanbeMng.swf"/>

 <target name="release" depends="release-build">
  <move file="${SRC_ROOT}\${flashFile}" todir="${releaseDir}" overwrite="true"/>
  <copy todir="${targetDir}" file="${debugDir}/${flashFile}" overwrite="true"/>
  <copy todir="${targetBlankDir}" file="${releaseDir}/${flashFile}" overwrite="true"/>
 </target>

 <target name="release-build">

  <mxmlc file="${SRC_ROOT}\KanbeMng.mxml" 
      debug="false"
      actionscript-file-encoding="UTF-8"
      keep-generated-actionscript="true" 
      incremental="true">
   
   <compiler.library-path dir="${APP_ROOT}\libs" append="true">
    <include name="Efflex_v0.03_fx3_fp9.swc" />
   </compiler.library-path>
   
   <compiler.source-path path-element="${SRC_ROOT}"/>

  </mxmlc>
  
  </target>
</project>

私のわかる程度に説明します。

まず、自分の環境に合わせて、設定をします。
なんか無駄なものもありそうですね。。。 ...mxmlc.jarはいらないっすね。

でmxmlcタグを作成します。
swcがある場合はそれを読み込みましょう！

ん～キャッシュがウンタラカンタラが難しかったです。
もう少しわかりすく書きたいっすけどね。

GAE＋Flex＋ファイルアップロード＋認証

2009-10-08T08:20:00.002+09:00

GAE上でFlexを使用してファイルアップロードを行っているのですが
どうもうまくいかない状態でした。
まぁオススメはできませんが回避策を一応書いておきます。

FireReference.uploadはセキュリティ系の問題なのか
クッキーを送信できません。
ここのにupload()のURLRequestHeaderのところに記述があります。

GAEでは認証アプリ内ではクッキーを使用して認証を確認しているようで
JSESSIONIDとACSIDを送信することが不可能なようです。

なのでGAE上でFileReferenceを利用してアップロードをすると
アップロード時に認証エラーでアップロードができないようです。

そこで、私の場合はアップロードのURLを認証から外して独自認証することで切り抜けました。
Flexが送信するRequestに引数をjsessionidを指定しておいて
認証のかかってないURLの処理上でSessionからIDを取得して同一かを判定して切り抜けました。

まぁセキュリティ上は微妙でしょうけど、
一応認証を受けてないと使えないようにはしました。

で、、、ここで気をつけなければいけないのは
FileReferenceで渡すURLRequest.dataをObjectではなく、
URLVariablesにすることです。
そうしないとRequestでmultipartにならず、
multipartで値を受け取れないからです。(slim3)

Redmineインストール(Linux)

2009-08-28T00:31:00.004+09:00

やっぱwin32だと重いので、Linuxにインストールします。

まずRubyは
http://www.ruby-lang.org/ja/downloads/
から落としてきます。
バージョンは1.8系じゃないと何かとエラーになります。

んでそれを解凍して


./configure
make
make install

します。

で

# ruby -v

とやってインストールされたことを確認します。

その後rubygemsを落として来て解凍してそのディレクトリに入って、

# ruby setup.rb

とやります。
これでrubygemsはインストール完了(>_<)v

でその後にrailsを

# gem install rails -v 2.2.2

とやります。これで準備完了。

さて、いよいよredmineです。。。。
という前にDBをインストールしなければっ！

一番相性の良いMySQLにしますかね？

http://dev.mysql.com/downloads/mysql/5.0.html

に行って、V5.0を落としてきます。
V5.1でも良いんですけど、相性が悪いみたいです。

MySQLをインストールした後、データベースを作っておきましょう！
えーとそれは
http://secondarykey.blogspot.com/search/label/MySQL
この辺から作ってください！

create database redmine character set utf8;
データベースを作成する場合はUTF8を指定します。

でその後に

http://rubyforge.org/frs/?group_id=1850

ここから最新版の0.8.4を落としてきます。
で解凍して、config/database.yml を作成して


production:
  adapter: mysql
  database: redmine
  host: localhost
  username: red
  password: mine 
  encoding: utf8

って感じで書き込みます。

# rake db:migrate RAILS_ENV=production

を行うとテーブルを作成してくれます。

# ruby script/server -e production

で実行して

http://~~~~:3000/

でアクセスしてadmin/adminでログインします。

※ruby installでプロキシがある場合は
[-p http://~~~~~]って付け加えると大丈夫です(--)ﾉｼ

Redmine

2009-08-28T00:20:00.001+09:00

・・・んーやっぱWin32よりLinuxが早いね(-.-;)

GAEでデータビュー

2009-07-25T16:51:00.004+09:00

GoogleAppEngineのプラグイン1.2.2から。。。なのかは知りませんが
登録したデータをデータービューで見ることが可能になりました。
アプリケーションの起動中に

http://localhost:8080/_ah/admin/datastore

にアクセスすればOKです。
これでデータを見ることができますね。

GAEでメール送信

2009-07-18T15:29:00.002+09:00

GAEでメール送信するにはJavaMailを使用します。
・・・特段技術的なことを書くまでもないのですが受信はできません。
送信時はアプリの管理者がFromになる必要があります。
って全部マニュアルに書いてありますけど。。。

少しメールに関連したサービスの立ち上げを
やろうとしたのですが頓挫したので一応参考まで。

ドメインの切り替え

2009-07-13T21:32:00.003+09:00

HTTPサービスにアクセスする際に
ローカルで試す時と、デプロイした時の動作を変更したい。
そんな時にこの方法です。


var domain = "http://localhost:8080/";
var url:String = Application.application.url;
var httpExp:RegExp = new RegExp("http://[^/]*/");

if ( httpExp.test(url) ) {
  domain = httpExp.exec(url).toString();
}

まぁ取得を外出しにすればよいのですが、
手軽にこういう感じもあるんですね。

Flexで開発している間は、
「file://」でアクセスするので
mx.core.Applicationが持ってるURLではif文には入らないです。
入った場合は変換を実行しています。

って感じです。

FlexのExplorer

2009-07-12T16:08:00.004+09:00

Flex4を前にしてやるのもなんですが、
なかなか検索でトップに出ないの備忘録で。

Flex3のコンポーネント

Flex3のスタイル

GAEでVelocity

2009-06-28T18:23:00.003+09:00

少しテンプレートエンジンを使いたいなぁ。。。って思ったので
Velocityを使うことにしたんだけど、
GAEはファイルシステムはないので、、、って思ってたら
メモリ上で展開できるみたい。


VelocityContext context = new VelocityContext();
StringWriter writer = new StringWriter();
String template = 
 "テンプレートのテストです[${name}]" + 
 "";
context.put("name", "なまえー");  
Velocity.evaluate(context, writer, "vecocityTest", template);

これでwriterに設定できます。
テンプレートを「com.google.appengine.api.datastore.Text」で
保存すれば使えそうですね。

実行にはVelocity、commons-lang、commons-collectionが必要です。

GAEで派生データを登録

2009-06-27T17:38:00.006+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

少し前に試した時にダメだったので諦めていたのですが、
再度チャレンジしたらOKだったので投稿しておきます。

親クラスを準備します。


package bz.ziro.slim3.test.model;

import java.io.Serializable;
import java.util.Date;
import java.util.logging.Logger;

import javax.jdo.JDOHelper;
import javax.jdo.annotations.Extension;
import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;
import javax.jdo.annotations.Version;
import javax.jdo.annotations.VersionStrategy;

import com.google.appengine.api.users.User;

@PersistenceCapable(identityType = IdentityType.APPLICATION, detachable = "true")
@Version(strategy = VersionStrategy.VERSION_NUMBER)
public class Parent implements Serializable {

    private static final long serialVersionUID = 1L;

    @SuppressWarnings("unused")
    private static final Logger logger = Logger.getLogger(Parent.class.getName());

    @PrimaryKey
    @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
    @Extension(vendorName = "datanucleus", key = "gae.encoded-pk", value = "true")
    private String key;


    @Persistent
    private User creator;
    @Persistent
    private Date createDate;
    @Persistent
    private User editor;
    @Persistent
    private Date editDate;

    /**
     * @return the key
     */
    public String getKey() {
        return key;
    }

    /**
     * @param key
     *            the key to set
     */
    public void setKey(String key) {
        this.key = key;
    }
    public User getCreator() {
        return creator;
    }

    public void setCreator(User creator) {
        this.creator = creator;
    }

    public Date getCreateDate() {
        return createDate;
    }

    public void setCreateDate(Date createDate) {
        this.createDate = createDate;
    }

    public User getEditor() {
        return editor;
    }

    public void setEditor(User editor) {
        this.editor = editor;
    }

    public Date getEditDate() {
        return editDate;
    }

    public void setEditDate(Date editDate) {
        this.editDate = editDate;
    }

    /**
     * @return the version
     */
    public long getVersion() {
        return (Long) JDOHelper.getVersion(this);
    }
}

でこのクラスを派生した子クラスを準備します。


package bz.ziro.slim3.test.model;

import java.io.Serializable;
import java.util.logging.Logger;

import javax.jdo.JDOHelper;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.Version;
import javax.jdo.annotations.VersionStrategy;

@PersistenceCapable(identityType = IdentityType.APPLICATION, detachable = "true")
@Version(strategy = VersionStrategy.VERSION_NUMBER)
public class Child extends Parent implements Serializable {

    private static final long serialVersionUID = 1L;

    @SuppressWarnings("unused")
    private static final Logger logger = Logger.getLogger(Child.class.getName());

    @Persistent
    private String name;
    @Persistent
    private String detail;
    public void setName(String name) {
        this.name = name;
    }
    public String getName() {
        return name;
    }
    /**
     * @param detail セットする detail
     */
    public void setDetail(String detail) {
        this.detail = detail;
    }
    /**
     * @return detail
     */
    public String getDetail() {
        return detail;
    }
    /**
     * @return the version
     */
    public long getVersion() {
        return (Long) JDOHelper.getVersion(this);
    }
}

これで準備完了です。
ChildオブジェクトをGAE(JDO,BigTable)で登録すれば
Parentの属性も登録できます。

実装の通り、登録ユーザや登録日付などテーブル内にある同一の属性を
親クラスを利用することにより、はしょることができます。
まぁ私の場合は更新時などにオブジェクトに都度同一の実装が必要になり
困っていたので助かります。

JDOを知った時に論理モデル(つうかUML記述？)をそのまま使えるなぁ。。。
って思ってやったらダメだったんですけど、やっぱできるんですね。

ちなみにDataNucleusでJDBC(HSQLDB)で同じようにやると
Parentテーブルがにもデータがあって。。。って感じになった記憶があります。
※同一のエンティティではないです。

ちなみにSlim3のDaoでMetaクラスを利用して検索式を作成しても
ChildMetaに存在しないのでエラーになります。
問い合わせるかはもう少し試してからにしようと思ってます。

2009/07/08 ※再度試したらSlim3でも動作しました。
2009/07/26 ※再度試したらSlim3で動作。。。っていうかGAEで動作しませんでした。
ので、Embeddedの話で記述します。

Slim3で開発を始める。

2009-06-27T14:42:00.008+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

Slim3はGAE用に最適化され開発されているフレームワークで
すごくシンプルに開発できるように工夫されています。

今回は現在のSlim3での開発をおさらいしてみましょう。
まだ開発中ですので違う手法になっている可能性もあるので
十分に気をつけていただければ幸いです。
※eclipseでの開発です。

まず、「http://slim3.googlecode.com/svn」にSVNでアクセスして
「trunk/slim3-blank」からチェックアウトを行います。
ライブラリを落とし込んで来て作成するのもよいのですが
genで使用しているaptの設定などがあるのでblankで作成しておくのが良いでしょう。

で現在、aptの設定がプロジェクト名に依存しているので
プロジェクト名を変更した場合それを変更する必要があります。
プロジェクトで右クリック「プロパティ」をクリック
「Javaコンパイラー」→「注釈処理」→「ファクトリーパス」において
編集で「lib/slim3-genEA1-SNAPSHOT.jar」を再度指定します。

war/WEB-INF/web.xmlの中にある


 <context-param>
        <param-name>slim3.rootPackage</param-name>
        <param-value>slim3</param-value>
    </context-param>
    <context-param>
        <param-name>slim3.staticPackages</param-name>
        <param-value>model</param-value>
    </context-param>

の部分をオリジナルの名前空間に変更します。
「slim3.rootPackage」が自分の作成するアプリケーションのルートパッケージで
指定した位置がHotReloadingの対象になります。
「slim3.staticPackages」がHOTの対象外のパッケージを設定します。
カンマ区切りで指定できます。(モデルのパッケージは必ず指定してください)

これで開発の準備は完了です。

プロジェクトのルートにあるbuild.xmlで必要なクラスは
自動生成をして開発を進めていきます。

「gen-model」：エンティティ,Daoとそれぞれのテストクラスを出力してくれます。
「gen-controller」：controller,jspとそれぞれのテストクラスを出力してくれます。
※それぞれを指定する場合、パッケージ名は必要ありません。

build.xmlのprojectタグにある「name="xxxx"」を
自分のプロジェクト名に変更してあげる必要があります。

「gen-controller」で「index」と指定すると
ひとまずアプリケーションとして動作できるようになります。
※既存のjspやcontrollerは消しておいた方が良いかな。。。

SVNの設定(認証)

2009-06-21T11:34:00.003+09:00

さて、SVNのインストールが終わったので設定します。
Apacheのhttpd.confに


<Location /svn/mog>
  DAV svn
  SVNPath /home/svn/mog
</Location>

を追加します。


svnadmin create /home/svn/mog

を行うとリポジトリが作成されます。
これでクライアントからアクセスできるはずですが
apacheの起動ユーザに対して権限があることが条件です。

さてDIGEST認証を使うにはApacheにDIGEST認証モジュールが必要です。
※Apacheのモジュールでインストールしてあれば問題ありません。

ソースのmodules/aaaに移動して


/usr/local/apache2/bin/apxs -D DEV_RANDOM -c ./mod_auth_digest.c
/usr/local/apache2/bin/apxs -i -a -n auth_digest mod_auth_digest.la

と行うとhttpd.confにLoadModuleが追加されるはずです。
これで準備はOK

Apacheに


<Location /svn/test>

  DAV svn
  SVNPath /home/svn/test

  AuthType Digest
  AuthName "SVN AUTH"
  AuthUserFile /home/svn/.htdigest
  Require valid-user

</Location>

って感じで追加します。


htdigest -c /home/svn/.htdigest "SVN AUTH" username

でパスワードを入力してApacheを再起動します。
で再起動すればOKです。

SVNをインストール

2009-06-20T16:00:00.005+09:00

ソースを管理していたCVSのディスクがぶっ飛び、
せっかくなんでSVNをインストールしようと思い立つ

前準備で

http://www.oracle.com/technology/software/products/berkeley-db/index.html
※ごめんなさい。。。後述しますが、、、いらないかも。

からBerkeleyDBをダウンロードしてきて


cd dist/build-unix
../dist/configure 
make
make install

を行います。
build-unixに入ってからconfigureを行うのがポイントです。

/usr/local/BerkeleyDB.4.7
ができています。


echo "/usr/local/BerkeleyDB.4.7/lib" >> /etc/ld.so.conf
/sbin/ldconfig

を行って共有ライブラリに追加しておきます。

でApacheをインストールします。
http://www.apache.jp/misc/download.html
などから持ってきます。


./configure --enable-modules=most --enable-shared=max --enable-dav=yes --with-berkeley-db=/usr/local/BerkeleyDB.4.7
make
make install

を行います。
モジュールをすべて入れています。

次にいよいよSubversionです。
http://subversion.tigris.org/servlets/ProjectDocumentList?folderID=74
からダウンロードしてきます。
sqlliteのソースなどがいるのでdepsもダウンロードしておきます。


./configure --with-apxs=/usr/local/apache2/bin/apxs \
--with-apr=/usr/local/apache2/bin/apr-1-config \
--with-apr-util=/usr/local/apache2/bin/apu-1-config
make
make install

一応これで完了です。
・・・んーと。。。文献だとberkeleyを
configureに設定していたんですけど。。。
なんかうまくいかなかったので外しました。

ガツンとSlim3

2009-06-13T20:26:00.004+09:00

はてさて「Seasar Conference 2009 Spring」行ってきました。
行ってきたというより、ひがさんの話を聞いただけですけど。

まぁ単純に感想を言うと、為になったというか。。。
バイトを連れて言ったのですがわかりやすくてとても
参考になったというところでしょうか。

「ガツン」の節で始まるとは少し予想してませんでしたけど。

で、ひがさんに感化されたわけではないのですが
あんまりこういうことは書かんのようにしていますが一応言っておきます。

まぁ言語はなんでも良いんですよ。
ようは作るものだとか作りたいものに対してどうなのか？

Perlでも優れたシステムはあるし、RoRでもへなちょこなシステムはある。
※あくまでPerlは古いって意味合いだけ使ってますし
RoRは言語じゃないですけど、新しいって意味で使ってます。

言語は言語屋さんにお任せして(もちろん要望等は出しましょう)
私らはシステムを向きましょう。

だから私は「システムに絶対はない」と言うとるわけでして。

Slim3でおーだーばい。

2009-05-31T21:56:00.005+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト


ShopMeta shopMeta = new ShopMeta();
List<Shop> list = from(Shop.class).range(0,10).orderBy(shopMeta.createDate.desc()).getResultList();
List<BeanMap> shopList = new ArrayList<BeanMap>();
for (Shop b : list) {
  BeanMap m = new BeanMap();
  BeanUtil.copy(b, m);
  shopList.add(m);
}
requestScope("newShopList", shopList);

んー。。。エクセレント。なんかきれいです。
なんか直感的なソースが良いですね。

Slim3でユーザの検索

2009-05-31T21:51:00.004+09:00


   UserService userService = UserServiceFactory.getUserService();
   User user = userService.getCurrentUser();

   ShopMeta shopMeta = new ShopMeta();
         List<Shop> list = from(Shop.class).where(shopMeta.creator.eq(user)).getResultList();

ShopMetaは自動的に作られます。(aptとかをプロジェクトで設定します)
creatorはJDOで保存しているカラムの一部です。
※aptについては今勉強中です。後日設定方法を書きます。

なんかおしゃれになってきましたね。
もし私がゴクウだったら「おらワクワクしてきたぞ状態」です。

Slim3でリソース表示(訂正)

2009-05-26T23:13:00.006+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

※以下コメントを受けまして、少し訂正を入れています。
　訂正と言うか注釈ですね。。。

Slim3を触っています。
構築中っていうことでまだ単純な機能が足りません。
※訂正：単純な機能ではなく、私のスキルが足りなかったようです。

ん。。。JSPにリソースを表示したい。。。
ってことでオリジナルで作ってみました。
おそらく近日本家で実装されますんで
※訂正：コメントより、作られるのではなくJSTLで既にあるようです。

taglib作成の参考として読んでください。

まずtldファイルを作成します。


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

<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
  version="2.0">

  <description>Mog resource library</description>
  <display-name>Mog resource</display-name>
  <tlib-version>1.1</tlib-version>
  <short-name>res</short-name>
  <uri>http://mog.ziro.bz/resource</uri>
  
  <function>
    <description>
    resource bundle get
    </description>
    <name>get</name>
    <function-class>bz.ziro.mog.jsp.Resource</function-class>
    <function-signature>java.lang.String get(java.lang.String)</function-signature>
    <example>
      ${f:get(param)}
    </example>
  </function>
  
</taglib>

で作成したところにあるfunction-classを生成します。


package bz.ziro.mog.jsp;

import java.util.ResourceBundle;

public final class Resource {

 private static ResourceBundle resources = ResourceBundle.getBundle("application");
 
 public static String get(String aKey) {
  return resources.getString(aKey);
 }
}

ResourceBundleの生成に使っている"application"はクラスパス＋名称になります。
のでこの設定だとクラスパス直下にapplication.propertiesやapplication_ja.propertiesを
作成しておきます。※ResourceBundleは国際化されています。


<%@taglib prefix="res" uri="http://mog.ziro.bz/resource"%>

${res:get("mog.l.title")}

で表示することができます。
uriに指定するのはtldのuriに記述したURIです。
こういうtaglib作成があるんですね。Slim3のFunctionを参考にさせてもらいました。

TDDってもんを完全に守ったこともない僕にはまだまだ。。。
それでもコミッタを夢見るの巻きでした。

Slim3Struts廃止・・・

2009-05-25T01:08:00.003+09:00

Struts本命の僕には悲しいニュースです。

ただ。。。

ここで面白い話が聞けそうです！
ちょっくら行く予定です。

HTMLにFlashを埋め込む

2009-05-23T15:04:00.003+09:00

http://code.google.com/p/swfobject/

からswfobject.jsを取ってきて読み込みます。


<script type="text/javascript" src="assets/js/swfobject.js"></script>
<div id="flashcontent_container">
FlashPlayerがない
</div>

JavaSctiprなどで埋め込みます。


  var so = new SWFObject("MogPlayer.swf", "MogPlayer", "260", "400", "9");
  so.addParam("allowScriptAccess", "always");
  so.addParam("menu", "false");
  so.addParam("scale", "noscale");
  so.setAttribute("id", "playerWrapper");
  so.write("flashcontent_container");
  
  SWFID = "playerWrapper";

FlexでRadioButton

2009-05-23T15:00:00.002+09:00

Flexでラジオボタンを設定します。


            <mx:RadioButtonGroup id="answer"/>
            <mx:RadioButton id="answer1" groupName="answer" value="1" label="選択肢１" width="100%"/>
            <mx:RadioButton id="answer2" groupName="answer" value="2" label="選択肢２" width="100%"/>
            <mx:RadioButton id="answer3" groupName="answer" value="3" label="選択肢３" width="100%"/>
            <mx:RadioButton id="answer4" groupName="answer" value="4" label="選択肢４" width="100%"/>

でラジオボタンを作成します。
その後スクリプトなどでRadioButtonGroupで指定したIDのselectedValueを利用して
どれが選択されているかがわかります。


             if ( nowAnswer == answer.selectedValue ) {
              Alert.show("正解！");
             } else {
              Alert.show("ブー");
             }

Javaでセッション管理

2009-05-16T17:15:00.002+09:00

JavaのWebアプリでオブジェクトをセッションに
登録、削除した時にイベントを発生する場合
HttpSessionBindingListenerをimplementするとイベントを発生することができます。


public class Account implements HttpSessionBindingListener {

 @Override
 public void valueBound(HttpSessionBindingEvent arg0) {
 }

 @Override
 public void valueUnbound(HttpSessionBindingEvent arg0) {
 }
}

って感じです。

DataNucleusでJDBC接続

2009-05-16T08:28:00.002+09:00

datanucleus.propertiesを作成して


javax.jdo.PersistenceManagerFactoryClass=org.datanucleus.jdo.JDOPersistenceManagerFactory

javax.jdo.option.ConnectionDriverName=org.hsqldb.jdbcDriver
javax.jdo.option.ConnectionURL=jdbc:hsqldb:hsql://localhost/sealion_db
javax.jdo.option.ConnectionUserName=sa
javax.jdo.option.ConnectionPassword=
javax.jdo.option.Mapping=hsql

クラスパスのトップにおいて


 private static final PersistenceManagerFactory pmfInstance =
        JDOHelper.getPersistenceManagerFactory("datanucleus.properties");
    public static PersistenceManagerFactory get() {
        return pmfInstance;
    }

でPersistenceManagerFactoryを取得します。

これと同様にMETA-INF/jdoconfig.xmlを作成して


<?xml version="1.0" encoding="utf-8"?>
<jdoconfig xmlns="http://java.sun.com/xml/ns/jdo/jdoconfig"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="http://java.sun.com/xml/ns/jdo/jdoconfig">

   <persistence-manager-factory name="transactions-optional">
       <property name="javax.jdo.PersistenceManagerFactoryClass"
           value="org.datanucleus.store.appengine.jdo.DatastoreJDOPersistenceManagerFactory"/>
       <property name="javax.jdo.option.ConnectionURL" value="appengine"/>
       <property name="javax.jdo.option.NontransactionalRead" value="true"/>
       <property name="javax.jdo.option.NontransactionalWrite" value="true"/>
       <property name="javax.jdo.option.RetainValues" value="true"/>
       <property name="datanucleus.appengine.autoCreateDatastoreTxns" value="true"/>
   </persistence-manager-factory>
</jdoconfig>

と行います。
その場合は


 private static final PersistenceManagerFactory pmfInstance =
        JDOHelper.getPersistenceManagerFactory("transactions-optional");
    public static PersistenceManagerFactory get() {
        return pmfInstance;
    }

って感じになります。
何個もセッションを用意する場合は、指定子（transactions-optional）を
変更して追加します。

HSQLDBとDataNucleus

2009-05-15T13:03:00.002+09:00

hsqldb-1.9.0-alpha2を使ってたら
スキーマを作成するところで

java.sql.SQLException: unexpected token: NULL

と出ます。
DataNucleusのせいだと思っていたのですが
良く調べたら、create tableで

"NAME" VARCHAR(256) NULL,

みたいな指定ができないようです。
何か久々に無駄につかれた。
※同時に２個調査しようとするのが悪い

DataNucleusをEclipseで使う

2009-05-11T20:32:00.003+09:00

GAEだと勝手にEnhancerが動作していますが
JDOを単独で使うと都度「実行」を行っていました。
・・・しかしなんかあるだろうと思ったら本家にありました。

http://sourceforge.net/project/showfiles.php?group_id=222750&package_id=273215

ここからJARをダウンロードしてきて
Eclipseのpluginディレクトリに追加します。
Eclipseを再起動するとプロジェクトの右クリックに
「DataNucleus」が追加されます。

この画像の通り、AddするとDataNucleusがサポートされます。
その後Autoを設定しておくと更新ごとにEnhanceしてくれます。
※プロジェクトの設定でLog4Jのファイルを変更しないとエラーが出ます。

スキーマなどもここで動作します。
これで少し開発が簡単にいくかな？
※POJOからxmlファイルの作成もしてくれそうですね。

DataNucleusを動かしてみる

2009-05-09T07:55:00.003+09:00

GAEやSlim3を動作させてきました。
せっかくなのでSlim3を生で使いたいと思い立ちました。
Hibernate,S2DAOなどを使って。。。と思いましたが
せっかくなのでDataNucleusを使ってHSQLDBにアクセスしたと思います。
※とは言ってもサンプルです。

まず、DataNucleusのページから
http://sourceforge.net/project/showfiles.php?group_id=222750

・core
・rdbms
・enhancer
・sample

をダウンロードしてきます。

ObjectWebのASMサイトから
http://forge.ow2.org/project/download.php?group_id=23&file_id=9309

・asm

をダウンロードしてきて

Log4Jから
http://logging.apache.org/log4j/1.2/download.html

・Log4J

をダウンロードしてきます。
ApacheJDOから。。。といきたいところですが
JDOの2.3が必要ですので
http://www.datanucleus.org/downloads/maven2/javax/jdo/jdo2-api/

・JDO

をダウンロードしてきます。
HSQLDBから
http://sourceforge.net/project/platformdownload.php?group_id=23316&sel_platform=14519

・HSQLDB

をダウンロードしてきます。

JDOの2.3ってGAEでも使ってるんですけど良いんでしょうね。
※SNAPSHOTからea(アーリーアクセス？)に代わってますね。

解凍してきたHSQLDBの
demo/runServer.bat実行してDBを立ち上げます。

で、DataNucleusのsampleを解凍してeclipseに展開します。
でダウンロードしてきたそれぞれのjarをlibディレクトリなどに展開。
jarをクラスパスに追加してMainを実行します！

・・・・あれ？うごかない。。。
って調べていたら
JDOの設定ファイル「package.jdo」がない。。。
あれ？ormファイルならある。。。なんかの仕様変更ですかね。。。

http://www.datanucleus.org/products/accessplatform_1_0/guides/jdo/tutorial.html

にあるjdoファイルをコピーして作成します。
・・・それでも実行してもダメでした。

buildファイルなら実行可能なんですが、、、
GAEで見たことあるような、、、

おー！Enhancerですね。

「org.datanucleus.enhancer.DataNucleusEnhancer」を
「src\java\org\datanucleus\samples\jdo\tutorial\package.jdo」を引数にして
実行する必要があります。

・・・これで実行できますがこれは何の為にやってるんだか。。。

ひとまずこれで実行可能になります。
さぁ開発開始だぁー！

JDO関連のデプロイ後の遅延

2009-05-07T20:06:00.004+09:00

GAEのアプリケーション管理画面の
「DataStore」→「Indexes」を見ると画像のような画面が出ます。
ここの「Serving」が「Building」ってなってると
パーシスタントクラスの関連を構築中だって意味になります。

こないだやった時は半日(途中睡眠があるのでもう少し早いかも)かかりました。
デプロイした後試せるのは結構時間がかかります。

http://code.google.com/intl/ja/appengine/kb/general.html#indexes

ここにいろいろ書いてあります。

Slim3でディレクトリを表現

2009-05-07T19:56:00.004+09:00

Slim3では設定ファイル「slim3_configuration.properties」に


slim3.controllerPackage=bz.ziro.mog.slim3.controller
slim3.viewPrefix=/WEB-INF/jsp

という風にパッケージとJSPのディレクトリを記述して
URL(ディレクトリ)を表現していきます。
デモアプリにもあるように。。。なんかいっぱいコントローラーが出来上がってくると

・管理が煩雑になるのでは。。。
・いやいやきっと抜け道がある。。。

・・・後者でした。
「mng」というディレクトリを作ってその下に
アプリケーションを画像の通りに構築します。

「/mng/」にアクセスすると、MngControllerが動作してくれます。
※JSPは「mng下にファイルです」
「/mng/shop/」にアクセスすると mng.ShopControllerが動作してくれます。
※JSPは「mng/shop下にファイルです」

やっぱこのくらいのことは考えてあるんですね。

GAEにデータを保存

2009-05-07T19:47:00.004+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

さて、Slim3を手に入れ、Strutsでアップロードを可能にした私は
ついにデータを保存するということに挑戦。
っていうか簡単なんですけどね。

単純にBlobデータを使いました。
ファイルをアップロードして
FormFileからInputStreamを取り出して
ByteArrayOutputStreamを利用して


  ByteArrayOutputStream baos = new ByteArrayOutputStream();
  InputStream stream = aFile.getInputStream();
  byte[] buffer = new byte[8192];
  //終了まで読み込み続ける
  while (stream.read(buffer) != -1) {
   baos.write(buffer);
  }
  Blob imageBlob = new Blob(baos.toByteArray());

[com.google.appengine.api.datastore.Blob]ですね。
を生成します。

これをJDOで永続化してBigTableに保存します。

でそれを検索して


   Image image = getPersistentImage(Long.valueOf(shopId),Long.valueOf(imageId));
   Blob blob = image.getImage();
   rtnByte = blob.getBytes();

※ImageってのはBlobを保存したパーシスタントクラスです。

取得します。
これをストリームに描きだしたりすると画像が出ます！

Blobを見た時からこれをやりたかったんですけどね。
Slim3の力を借りてここまでたどり着きました！

ひとまずGAEでSlim3を動かしてみよう！

2009-05-05T02:45:00.005+09:00

すでにこの設定などは古くなっている可能性があります。

Slim3の開発はこんなブログより正式ドキュメントが有効です。
Slim3サイト
非公式と言われていますが充実した日本語サイトもあります。
Slim3日本語サイト

GAEでSlim3の使い方をやってみます！

みなさん。SVNでアクセスは可能ですか？
http://slim3.googlecode.com/svn
だったら上記にリポジトリパスを設定しましょう。
※eclipseっす。

ここから「slim3-demo」チェックアウトして、
後はGAEでデプロイするだけです。

※アプリケーションIDは自分のアプリケーションに設定して、
　バージョンも１つにしましょう。

思いのほかデプロイが簡単でびっくりしています！

押してもだめならSlim3化

2009-05-04T19:17:00.003+09:00

GAEにてファイルアップロードを行っていました。

ひがやすを氏がStrutsでのファイルアップロードを成功したようで
オープンソースらしいので少しお知恵を拝借しようと。。。
http://d.hatena.ne.jp/higayasuo/20090411/1239460908

と思い少しソース(＋ブログ)を眺めていたら。。。
「俺は一体何をしているのだろうと。。。」
と思ってしまいました。
※ちなみに「S3MultipartRequestHandler」を利用して
　やっているみたいですね。
久々にソース（＋ブログ）に感動しました。

Seasarには結構前にトライしましたが
客先に乗せるのは困難だと判断して少し離れていましたが
Slim3の考えには賛同できる気がします。

ってことでソースを借りるのではなく「On」させてもらおうと。。。
まぁ挫折の可能性は高いですが。。。

久し振りの間隔

2009-04-30T01:42:00.003+09:00

最近JDOを触っています。
GAEを触ることがきっかけで行い始めましたけど、
電子工学を習ったころ、
プログラミング初のオブジェクト指向、
Webを触り始めた頃、
ハードウェアを触り始めたころ。。。
その辺りの新鮮さを感じているところです。

新しいというより、、、
なんか今まで習ってきたことを復習させられていて
楽しい感じに近いです。

ん。。。いいっすね。

GAEのバージョン管理

2009-04-29T18:34:00.000+09:00

ローカルでの動作確認もありますが
デプロイした状況での確認も必要になります。

そこでデプロイのバージョニングを行います。

http://appengine.google.com/にアクセスすると
自分のアプリケーションの管理画面になると思います。
対象のアプリケーションを選択して
右にあるVersionsをクリックすると

という画面が出力されます。
ここのバージョンはeclipseのプロジェクトの設定で
[Google]→[App Engine]でデプロイメントのバージョンになります。
※１～の整数を指定します。

指定したバージョンでデプロイして
上記画面で右にあるURLでテストが行えます。
ちなみに初めて試した時に例外を見事発生させました。

JDOの１対多

2009-04-29T18:10:00.003+09:00

結構はまりました。
ここにあるようにバグにより
親のオブジェクト、子のオブジェクトのキーはKeyにする必要があるようです。
※子は仕様にも記述してありますけどね。

まず親側のクラスを


class Shop {

    @PrimaryKey
    @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
    private Key key;

    @Persistent(mappedBy = "shop")
    private List<Image> imageList;

・・・getter,setterは未記述

}

と記述します。
Keyは通常のIDENTITY(Longで自動設定した場合)と同一で、特に登録などの際に
設定する必要はありません。

そして子のクラスを


class Image {

    @PrimaryKey
    @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
    private Key key;

    @Persistent
    private Shop shop;
・・・getter,setterは未記述
}

というように記述します。

で登録は以下のようにします。


   PersistenceManager pm = SessionManager.get().getPersistenceManager();
   Transaction tx = null;
   try {
    String id = mogForm.getId();
    Long lngId = Long.valueOf(id);

    tx = pm.currentTransaction();
    tx.begin();

    log.warning(id);
    Shop oldShop = pm.getObjectById(Shop.class, lngId);
    
    List<Image> imageList = oldShop.getImageList();
    if ( imageList == null ) {
     imageList = new ArrayList<Image>();
    }
    
    imageList.add(image);
    image.setShop(oldShop);
    
    tx.commit();
   } finally {
    if ( tx != null && tx.isActive() ) {
     tx.rollback();
    }
    pm.close();
   }

Shopを検索してImageListを取得して
そこに追加を行ってコミットをかけています。
トランザクションをかけてあげないとエラーになります。
このクラスを登録するというより、親に追加して更新しているイメージです。
※子の追加でも可能かは検証してません。

扱っているShopクラスのidの値は
KeyクラスのgetId()により取得したLong値(Stringで使ってる)になります。
そのまま使用すると"Shop(4)"みたいな値になって検索の際にエラーになります。

・・・あぁ。。。やっとこさ関連が実装できた！

JDOで削除

2009-04-26T09:03:00.001+09:00

JDOのオブジェクトを削除します。


  PersistenceManager pm = SessionManager.get().getPersistenceManager();
  try {
   Shop oldShop = pm.getObjectById(Shop.class, Long.valueOf(id));
   pm.deletePersistent(oldShop);
  } finally {
   pm.close();
  }

更新時と同じくgetObjectById()でオブジェクトを取得して
deletePersistent()で削除を行います。

簡単ですね。

JDOで更新

2009-04-26T09:01:00.001+09:00

JDOで更新を行います。


  String id     = mogForm.getId();
  PersistenceManager pm = SessionManager.get().getPersistenceManager();
  try {
   Shop oldShop = pm.getObjectById(Shop.class, Long.valueOf(id));

   String name   = mogForm.getName();
   String detail = mogForm.getDetail();
   String url    = mogForm.getUrl();

   oldShop.setName(name);
   oldShop.setDetail(detail);
   oldShop.setUrl(url);
   oldShop.setEditor(user);
   oldShop.setEditDate(new Date());

  } finally {
   pm.close();
  }

getObjectById()を利用して検索を行います。

取得してきたオブジェクトを更新してclose()するだけです。
簡単ですね。

Keyを利用した検索もあるみたい。※それは後日

GAEでオブジェクト比較

2009-04-25T15:50:00.003+09:00

GAEでログインしたユーザだけのデータを表示したい。

そう思い立ちました。。。がっ！
JDOのオブジェクト比較にSQLってどうするんだろ？
と思い立ちしばし、、、

でできました。


  UserService userService = UserServiceFactory.getUserService();
  User user = userService.getCurrentUser();

  PersistenceManager pm = SessionManager.get().getPersistenceManager();
  Query query = pm.newQuery(Shop.class);

  query.setFilter("creator == crrentUser");
     query.declareParameters("com.google.appengine.api.users.User crrentUser");
     
  try {
   List<Shop> shopList = (List<Shop>)query.execute(user);
   for ( Shop oldShop : shopList ) {
    Shop newShop = new Shop(oldShop);
    shopForm.addShop(newShop);
   }
  } finally {
   query.closeAll();
  }

Query::setFilter()でSQLイメージを作って
Query::declareParameters()で型を宣言します。
Query::execute()で比較するオブジェクトを設定しておきます。

これでOKですね！
ログインしたユーザのみの機能もこれでOKですね。

ひとまずSingleton！

2009-04-25T01:42:00.002+09:00

さぁ、ひとまず、GoogleAppEngineの
データベースを使うにはSingletonパターンを勉強しましょう！

データベースのリソースを極力使わないのが
システム設計の基本なんですが
まず最初に行わなければいけないのは


package bz.ziro.test.jdo;

import javax.jdo.JDOHelper;
import javax.jdo.PersistenceManagerFactory;

public class SessionManager {
 private static final PersistenceManagerFactory pmfInstance =
        JDOHelper.getPersistenceManagerFactory("transactions-optional");
    public static PersistenceManagerFactory get() {
        return pmfInstance;
    }
}

です。
こうすることで


  PersistenceManagerFactory pmf = SessionManager.get();

使うことができます。

いやぁ。。。JDOを真面目に勉強してたらびっくりしました。
JDOってJavaの規格なんですね。。。
それでjarを拾いにいったらApacheで
そのjarだけでは実装できませんって言われて
やばっ！って思ってたら
googleもdatanucleusっていうやつを使ってるんですね。
※ってよく見たらreferenceにも書いてありました！！

ん～やっぱGoogleさんの考えてることはわからん、、、

GAEでStruts

2009-04-23T23:04:00.002+09:00

さて我が心のフレームワークStruts1.3を
GAEで展開したいと思います。

えーと。。。ひとまずblankアプリからですかね？
まずStrutsのappをおとしてきて、blankのwarを展開します。

で、、、展開したディレクトリから
jspはプロジェクトのwar下に置きます。

index.jspとpages/Welcome.jsp

WEB-INF下のlibとxmlファイル３つ。。。
web.xmlは上書きするかはお任せします。

これらを展開します。

でsrc下にある「MessageResources.properties」をsrcにコピーします。

でappengine-web.xmlに


<sessions-enabled>true</sessions-enabled>

を追記します。

でデプロイ。これで動作します。

。。。素直にGWTにするべきか悩ましい。。。

JDOで保存と検索

2009-04-21T18:24:00.006+09:00

さぁGAEでデータベースを取り扱ってみましょう！

JDOを利用して行うことができるようです。
JDOは。。。平たく言うとオブジェクトを保存できる仕組みとでもいいましょうか。。。

下準備は「src/META-INF」に
jdoconfig.xmlを準備する必要があります。

これはeclipseのプラグインでプロジェクトを作成した場合に
勝手にできあがってるみたいです。

それとパーシスタントクラスを準備する必要があります。
このクラスはPOJOと呼ばれる単純なクラスを準備します。


import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;

import com.google.appengine.api.users.User;

@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class Project {

    @Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
    @PrimaryKey
 private Long id;
    @Persistent
    private String name;
    @Persistent
    private String detail;
    @Persistent
    private User creator;
    @Persistent
    private User editor;

・・・・(getter と setterも準備)
}

残したいデータを準備するのですが
大事なのは「@～」っていう記述方法です。
アノテーションと呼ばれるコメントにより、特性を決める技術です。

@PersistenceCapable(identityType = IdentityType.APPLICATION)
でこのアプリケーションで一意であるデータということ

@Persistent(valueStrategy = IdGeneratorStrategy.IDENTITY)
保存対象でありIDENTITY(一意)であるということ

@PrimaryKey
プライマリーであるということ

@Persistent
保存対象である

ということを意味します。

さぁこれで保存する準備はできました。
画面を作成して保存して一覧に出すようにしてみましょう！

まず実行するJSPを準備


<form name="testForm" action="./JDOServlet" method="post">
<input type="text" name="name">
<textarea name="detail"></textarea>
<input type="submit">
</form>

まぁ普通のHTMLファイルでもOKですね。
でJDOServletをweb.xmlに記述します。


  <servlet>
    <servlet-name>JDOTestServlet</servlet-name>
    <servlet-class>bz.ziro.test.servlet.JDOServlet</servlet-class>
  </servlet>
 
  <servlet-mapping>
    <servlet-name>JDOTestServlet</servlet-name>
    <url-pattern>/secure/JDOServlet</url-pattern>
  </servlet-mapping>

※servletタグとservlet-mappigタグは順番に並べてください。

で少し長いですがサーブレットは以下のようになります。
※折りたたんであるので広げてください。


public class JDOServlet extends HttpServlet {

 /**
  * 
  */
 private static final long serialVersionUID = 1234131818439520488L;

 private static PersistenceManagerFactory pmfInstance = JDOHelper.getPersistenceManagerFactory("transactions-optional");
 @Override
 protected void doPost(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
  
  UserService userService = UserServiceFactory.getUserService();
  User user = userService.getCurrentUser();

  String name = req.getParameter("name");
  String detail = req.getParameter("detail");

  Project project = new Project();
  project.setName(name);
  project.setDetail(detail);
  project.setCreator(user);
  
  PersistenceManager pm = pmfInstance.getPersistenceManager();
  try {
   pm.makePersistent(project);
  } finally {
   pm.flush();
  }

  Query query = pm.newQuery(Project.class);
  try {
   List<Project> projectList = (List<Project>)query.execute();
   PrintWriter writer = resp.getWriter();
   resp.setContentType("text/html");
   if (projectList.iterator().hasNext()){
    writer.println("<table>");
    writer.println("<tr>");
    writer.println("<td>id</td>");
    writer.println("<td>name</td>");
    writer.println("<td>detail</td>");
    writer.println("</tr>");
    for ( Project pro : projectList ) {
     writer.println("<tr>");
     writer.println("<td>" + pro.getId() + "</td>");
     writer.println("<td>" + pro.getName() + "</td>");
     writer.println("<td>" + pro.getDetail() + "</td>");
     writer.println("</tr>");
    }
    writer.println("</table>");
   } else {
   }
  } finally {
   query.closeAll();
  }
 }
}

まずProjectのオブジェクトを準備しています。
でPersistenceManagerでmakeします。
これがinsert行為になります。

まだpmは使うのでflushだけして
Queryクラスで一覧を取得してきます。
このQueryクラスでwhere文やlimit文、Order文などを記述します。

でPrintWriterでHTMLに記述をしています。

さぁベタな文法ですがいかがだったでしょうか？
※PMFなどをSingletonパターンを利用しないと
　もう一回インスタンスを取得するとExceptionになります。

http://gae.ziro.bz/secure/test.jsp

でお試しできます。
※ごめんなさい。Creatorユーザでユーザを保存していますので
　試すとアカウントの情報が残ります。
　間違っても何かに使ったりしませんのでお試しください。

※ごめんなさい。現在はStrutsによる実装になってしまいました。

・・・さてトランザクションとかもやらんとな。。。

GAEで認証アプリケーション（続）

2009-04-20T17:24:00.003+09:00

さて情報の取得方法は前項でやりました。

大事なのはアプリケーションを認証で守ることです。
※前項では認証を行っただけ

日頃からJ2EEの認証JAAS使っといてよかった。


    <security-constraint>
        <web-resource-collection>
            <url-pattern>/secure/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <role-name>*</role-name>
        </auth-constraint>
    </security-constraint>

とweb.xmlに記述すると
/secure/～というURLは認証を通らないといけなくなります。

JSPなどにこのURLに関係するリンクを貼り、押下してみると
認証されないと行けないことがわかります。

なお、role-nameで「*」を指定していますが
アプリケーションの設定で管理者になっている「admin」というロールと
世間一般のGoogleアカウントがあるようです。(こっちは不明)

GAEでGroovy！

2009-04-20T00:09:00.002+09:00

はてさて知人がGroovyを使いたいということだったので
何となくですがやってしまいました。

まずweb.xmlに


    <servlet>
        <servlet-name>GroovyServlet</servlet-name>
        <servlet-class>groovy.servlet.GroovyServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>GroovyServlet</servlet-name>
        <url-pattern>*.groovy</url-pattern>
    </servlet-mapping>

を追加します。
って独自クラスを作ろうとしてたら
GroovyにServletてびっくりしました。

servletとservlet-mappingは
まとめて記述する必要があるので
独自のサーブレットがある場合は気をつけて編集しましょう。

でwar/WEB-INF/groovyというディレクトリを作成して
test.groovyファイルを作成します。


html.html {
    head {
        title "Hello"
    }
    body {
        p "Hello Groovy World!"
    }
}

これでデプロイして「ドメイン/test.groovy」でアクセスすれば
Groovy動作が完了しますね。簡単です。

このソースの前にScriptEngineManagerを使って
文字列実行できるかテストしたんですけど。。。。
ScriptEngineManagerってJava6標準なんですね。驚きました。

・・・あー忘れてました。Groovyのjarが必要ですね。
Groovyの本家からバイナリでもダウンロードして
jarをクラスライブラリに追加しないと動作しません。

GAEでJDO

2009-04-19T22:54:00.002+09:00

すっごい！！！JDOまで行っちゃうなんて！！！

PersistenceManagerFactoryをSingletonで作成して

・・・ってこれをパッケージングして
自分のクラス構造してたらQueryがあった。。。スゴイ。

うん。すごい。
またJDOについては書きます！

GAEで認証アプリケーション

2009-04-19T14:58:00.004+09:00

GoogleAppEngineで認証できるアプリケーションを作成してみましょう！

サンプルにもある通り、


    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();

と行うとユーザがログインしているかどうかがわかります。
userがnullの場合はログインしてない状況です。


userService.createLogoutURL(request.getRequestURI()
userService.createLoginURL(request.getRequestURI())

と行うとログイン、ログアウトのパスを取得できるので
それに対してAタグを書いてあげます。

引数の「request.getRequestURI()」は
ログイン後に戻るページですので変更すれば画面の遷移を変えることができます。

ここで彷徨ってしまったのは
独自ドメイン時のログイン画面です。
私の作ったアプリケーションの認証を作成しようとしたら
GoogleAppsの認証画面が出てきました。

「えー独自ドメインは自分のドメインの認証なのっ！」

・・・と勘違いしちゃいましたが違いました。
どうやらアプリケーションを作成した時に

でドメイン認証をチェックしたみたいです。
・・・１時間位さまよいました。。。
逆に考えれば独自認証のアプリも作れるってことですね！

はてさて情報の取得やログインへの遷移は可能になりましたが
大事なのはアプリケーションのセキュリティです。

・・・ってJAASを使用した方なら簡単ですね。
web.xmlを設定してあげればOKです。

ほぼ
ここと同じだと思いますが
server.xmlはいらないし「manage」っていうロールはないですね。
adminはアプリの管理者がそういう扱いになりそうです。