読者です 読者をやめる 読者になる 読者になる

めも、メモる

技術的メモ. Sencha/C#など。

エクセルのリンク先を取得する

Alt + F11でVBAを開いて、標準に以下をコピペすると関数として使えるようになる。

 

Public Function linkAddress(r As Range) As String

    If r.Hyperlinks.Count > 0 Then '指定したセルにハイパーリンクオブジェクトがある

        linkAddress = r.Hyperlinks(1).Address

        '追加部分

        If r.Hyperlinks(1).SubAddress <> "" Then

            linkAddress = linkAddress & "#" & r.Hyperlinks(1).SubAddress

        End If

    Else

     If InStr(r.Formula, "=HYPERLINK") Then 'HYPERLINK関数を使っている

            linkAddress = Mid(r.Formula, 13, InStr(13, r.Formula, """") - 13)

      Else

         linkAddress = ""

      End If

    End If

End Function

 

 

ExtJS4 tooltipの設定

1.Gridの場合

..

                renderer: function(v, obj, rec){

                  obj.tdAttr = 'data-qtip="' + v + '"';

                  return v;

                }

  

2.DataViewの場合

<div class="itemSelector" data-qtip="{name}">{name}</div>

 

知らなかった。

GridのTextarea Editor

ExtJS 4.1

Gridにテキストエリアのエディターを追加しようとしたとき詰まった。

editor: {

 type: 'textarea'

}

では textfield(input)になってしまう。

editor :{

 xtype: 'texterea'

}

でもだめ。

 

editor: Ext.create('Ext.form.TextArea',{})

で解決。

IIS7 PowerShell スナップインを有効にする

メモ:以下

Set-ExecutionPolicy RemoteSigned

実行権限を与える

 

Import-Module webAdministration

スナップインを有効にする

 

cd IIS:\Sites

確認

 

これだけではなぜか、 Set-WebConfiguration は使えなかった

すべてがインストールされなかったようで、タスクバーのパワーシェルを右クリック「システムモジュールをインポートする」で解決

Sencha Touch2でGoogle Calendar OAuth2認証を使う

アプリ中でGoogle Calendar連携が必要なため、OAuth2の認証を使ったときのメモです。ちょっと力技な方法かもしれません。

GoogleのOAuth2認証では、ブラウザ側(以下STアプリ)では以下3つのパターンがあります。

1.すでに有効なトークンを持っている

2.トークンが無効だが、ブラウザ自体はGoogleにログイン状態になっている

3.トークンが無効で、ブラウザもGoogleにログオフ状態になっている

1.の場合は、特に対応に入りません。通常通りサーバー側のAPIにデータを投げればサーバー側でGoogleにデータを投げます。

2.の場合、サーバー側でGoogleにアクセスすると、認証に失敗します。この時、Googleから認証のためのURLを渡されますので、そのURLがSTアプリに渡されます。

ここで最初の注意が必要です。そのURLをwindow.openで開くとフルスクリーンアプリの場合、Safariが起動してしまいます。ログイン状態なためユーザーは何もしないまま、処理が完了し、完了画面を閉じて再度アプリを立ち上げるなければなりません。

このケースでは、cardレイアウトに以下のようなviewを渡しました。

Ext.define("Ext.view.GoogleLogin", {

    extend: "Ext.form.Panel",

  config: {

      layout: 'vbox',

      items: [

        {

          xtype: 'container',

          flex: 1,

          html: '<iframe src="" id="googleLogin" style="border:0;"></iframe>'

        },

        {

          xtype: 'container',

          flex: 10,

          style: 'font-size: 18px;text-align:center;',

          html: '処理中です。<br>しばらくお待ちください。'

        }

        ]

    }

});

 

そして、サーバーから受け取ったURLをこのiframeに渡します。ログインが不要であれば、このiframe内で処理が完了します。完了後のリダイレクト先を同一ドメイン内に指定し、リダイレクト先のJavaScriptから認証前の登録処理を再実行する関数を呼び出します。画面遷移なしで処理を完了できます。

 

3.の場合はGoogleへのログインが必要になります。セキュリティ上の問題で、認証用のログイン画面はiframe内に表示させることができません。画面遷移させる必要があるのですが、2.との切り分けが難しいです。3.のケースでは、iframe内でGoogleのログイン画面に遷移させようとして、できないためエラーが発生する、という状況になります。したがって、iframeのsrc(url)が変化したときのイベントをハンドルして後続の処理につなげたいのですが、そのようなAPIは存在しないようです。

仕方なく、最初にiframeにGoogle認証URLを与えてからsetIntervalで3秒待ったのちに、iframeのsrcを調べ、2.の処理完了のURLでないときは再度認証画面へ遷移させる、という方法をとりました。

次に、画面遷移の方法です。フルスクリーンの場合、window.openではSafariが開いてしまいます。そこで、

 location.href = googleLoginURL; 

として、フルスクリーンのまま画面全体がグーグルのログイン画面に遷移するようにしました。

なお、Androidでフルスクリーンにして使っていない場合は、普通にwindow.openの方が便利なので、切り分けて対処しました。

 

一般的には、どうされているのでしょうか。サーバー側の実装にもよりますが、こんなまどろこしいことせずに、ネイティブアプリのガワをつくって対処させるものなのでしょうか。

ExtJS4.1/ Page Analyzerを使ってみた

ExtJS4.1でPage Analyzerを使いつつ、パフォーマンスチューニングをしたのでその時のメモです。

Page Analyzerは、ExtJSSDKの、/examples/page-analyzer/page-analyzer.html をブラウザからアクセスすると使えます。上記ページでURLを指定すると、ページのiframeで実行し、分析結果を見ることができます。Layout, Components, Performanceの機能(タブ)があります。

例えば、Componentsは、以下のように画面中のComponentを確認することができます。

f:id:pin_ponpan:20130330084229p:plain

上部バーに書き込んだURLにアクセスし、Componentの場合は「Generate Component Tree」ボタンを押すと上記のような画面になります。

 

私が今回一番使ったのは、Layoutです。ExtJSでは、ページを生成する際に、一定の条件でComponentをLayout化する(この意味を正確に理解していませんが、componentを中間オブジェクトからdomツリー上、及びExtのページ全体の管理オブジェクトに組み込むような処理と理解しています)ようです。

f:id:pin_ponpan:20130330084617p:plain

 

その処理が実行されただけ、Runフォルダが表示されます。1ページ内でも何度も実行されるようです。

私は以下の方針でチューニングを進めました。

 

1)Panel-itemsの階層を減らす

レイアウトを調整したり、スクロールバーを出すためなど、安易に階層を多くしていた箇所を極力スリムにしました。

 

2)処理の重さは、Panel>Container>Component

xtypeを指定しないと、デフォルトはPanelになってしまいます。今回、Page Analyzerで一番はっきりと改善効果を計測できたのがこの部分でした。Runフォルダを展開していくと、下図のようにComponentごとの処理時間が表示されます。

f:id:pin_ponpan:20130330084712p:plain

PanelだったオブジェクトをComponentにするとはっきりと数字に影響します。Componentで済みそうな箇所を探して、数字が減っていく様子を見るのは楽しかったです。

 

3)まとめてLayout化する

LayoutのRunフォルダの対象オブジェクトを見ると、同じオブジェクトに対して何度もLayout化していることがあります。これらを可能な限りまとめると、全体の不可を小さくできます。

具体的には、

Ext.suspendLayouts();

を実行すると、次に

Ext.resumeLayouts(true);

するまでレイアウト化が実行されなくなります。

これも2度実行されていたRunフォルダが1つになることを確認できます。ただし、Page AnalyzerのTimeをみると、2回になったから2分の1、というわけではなく、足した数から一定割合が減少した、という改善です。

suspendLayouts関数を複数組み込んだとき、suspendLayoutsとresumeLayoutsの間が長くcallback関数などが絡むなど、layoutが正しく実行されなくなることがあります。

また、極端な話、全体を囲ってしまえば一回で済むわけですが、それでは一度の負担が大きくなるような気もします。このあたりはよくわかりません。

 

まとめ)

改善すべき個所がはっきりと数字として表示されることで目標が明確になり、改善結果も見えるのでPage Analyzerはかなりありがたいツールです。

ただ、今回活用できたのはごく一部です。

LayoutのRunフォルダ以下で、処理時間の内訳が表示されます。緑色のComponent内の最適化についてはわかるのですが、数字が大きい、FlushやInvalidateをどう理解すればよいかわかりませんでした。

 

f:id:pin_ponpan:20130330084821p:plain

 

Invalidateは文字通り解釈すれば、間違った記述がある、ということと思われますが、Component内のモジュールの部分部分をコメントアウト→実行→Invalidateの数字を確認、というアプローチではInvalidateの数字は変わらず、うまくいきませんでした。

また、Performanceタブは内容を理解できず、解説記事も見つけられませんでした。

 

参考)

http://www.sencha.com/blog/optimizing-ext-js-4-1-based-applications

パフォーマンスチューニングに関するSenchaのブログ。2013/03/30現在、Page Analyzerを検索して得られる情報はこのサイト以上のものを見つけられませんでした。

 

http://www.sencha.com/forum/showthread.php?153565

上記ブログで紹介されている、チューニングに関するSenchaのForumでのスレッド。

 

http://neverep.blogspot.jp/2012/03/ext-js-41.html

上記記事の日本語での紹介記事。

 

 

 

 

メモ

技術に関するネタを分けて書くことにしました。

別館は、http://taiji.exblog.jp/