めも、メモる

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

Azure: 仮想マシンに固定IPアドレスを割り当てる

まず、Azure Powershell が必要なので、Web Platform Installerからインストールします。

edge.hateblo.jp

 

PowerShellを立ち上げ、Import-Module Azureを実行すると、Azureのログイン画面に遷移します。

 

これで使えるようになるので、

1)予約済みIPの取得

New-AzureReservedIP -ReservedIPName "IPアドレスの名前" -Label "ラベル名" -Location "Japan West"

 

2)サービスに割り当て

Set-AzureReservedIPAssociation -ReservedIPName "予約済みIPの名前" -ServiceName "サービス名"

qiita.com

Chrome DevToolsからJSファイルを編集する

この記事は、Sencha Advent Calendar 2015 の16日目の記事です。

技術系のブログを書くのは1年ぶりくらいです。今回、Advent Calendarに初めて参加しました。普段は、業務用のクラウドサービスの開発・運用をしています。

Senchaは、わんくま同盟 のおそらく2012/02/25 の勉強会で知りました。それまでは、jQuery+HTMLテンプレートでAjaxをガリガリ書いていたのですが、なかなかしんどいものがありました。ExtJSのGridが動いているのをみて、そういうものを自作している時代ではないと悟りました。

それ以降は、フロントエンドは、PC、スマホタブレットむけにSenchaを使っています。ちなみに、バックエンドはC#で書いています。

Advent Calendarでも開発環境の話はいくつか出でますね。 JSで問題になるのはインテリセンスですが、みなさん、いろいろ工夫されているようです。

ところで、Chrome DevToolsでデバッグしているときに、最強のインテリセンスツールがここにあるじゃないか、と常日頃から思っています。

よくtypoしてしまう、Ext.ComponentQuery.queryだって、一瞬です。Chromeのコンソールで書いて動かしてコピペなんてことはよくやっています。

 

この記事では、以下で試した結果を書きます。

まずテスト用に、generate app したページに単純にボタンをつけました。

f:id:pin_ponpan:20151214111120j:plain

 

この文章をリロードなしに変更してみます。

Chrome Dev Toolsのsourceタブを開きます。

f:id:pin_ponpan:20151214111410j:plain

ここを編集したあと、consoleのファイル中にカーソルがあるまま、ctrl+sで保存できます。

f:id:pin_ponpan:20151214111545j:plain

背景が赤になってます。「この変更はローカルファイルで保存されてませんよ」っていう警告です。この時点で、メッセージをいったん閉じて再度開くと、変更されたように動きます。

f:id:pin_ponpan:20151214111901j:plain

ローカルファイルには反映されていないので、このままリロードすると変更は消えてしまいます。

該当するファイルを右クリックして、Map to file system resourceをクリックして、エクスプローラから該当するファイルと対応付けます。

f:id:pin_ponpan:20151214112118p:plain

 いきなりすると、すべてのフォルダのファイルを検索してくるので、Main.jsなどよく使われるファイル名だと探すのに苦労します。

そういう時は、先にフォルダでも同じように対応づけられるので、先にフォルダ対応付けておくと検索で上の方に出てくるようになります。

 

さて、これで紐づいたはず。しかし、まだ警告が出ています。

f:id:pin_ponpan:20151214112623j:plain

これはExtJS側で、デフォルトでは、キャッシュをリフレッシュさせるためにファイルを呼び出す際に毎回新しいクエリ ?_dc=xxxを発行しているためです。

f:id:pin_ponpan:20151214112755j:plain

クエリまで含めて対応させているので、このままだと、次の?_dc=yyyになった時のファイルと対応しなくなってしまいます。

これは、app.jsファイルで、LoaderにdisableCachingをfalseを設定することで回避できます。

    Ext.Loader.setConfig({
        disableCaching: false
    });

    Ext.application({
        name: 'test',

        extend: 'test.Application',

        autoCreateViewport: true
   });

 

これでクエリは出なくなりました。なお、Chrome Dev Toolsでは以下のようにDisable cache という設定がありますので、こちらでキャッシュが残ってしまうことを回避できます。

f:id:pin_ponpan:20151214113405j:plain

これで、Dev Toolsで編集してもエラーは表示されずに、ローカルファイルに変更が反映されるようになりました。

f:id:pin_ponpan:20151214113607j:plain

 

今回改めて確認しただけで、まだこの方法で開発したことはないのですが、デバッグと修正には便利だと思います。

 最近は、HTML+JS+CSSでデスクトップアプリをかける、Electron なんてのも出てきました。Chromium内臓です。であれば、Chrome Dev Toolsのようなインテリセンスを出すIDEは原理的には可能な気がします。

Electronはエディタによく使われているそうなので、もしかしたら、JSインテリセンス付きのアプリは既にあるかもしれません。そのあたりの情報をご存知の方がいましたら、教えてください。

 

※参考

Web屋ならチェックしておきたい!作業効率が激変するChrome DevToolsの便利な使い方まとめ | 株式会社LIG

LIGさんはネタ記事がバズって有名ですが、技術系のブログもしっかり更新されているという話もよく聞きますね。

Windows Serverでオフラインの時間同期

ネットにつないでないマシンの時間同期の方法

 

1.繋がっているマシンをNTPサーバとして機能させる

い)レジストリの設定

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\W32Time\Config

値=1:時刻サーバとして公開する

ろ)NTPサーバの有効/無効の設定

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\W32Time\TimeProviders\NtpServer

値=1:有効

は)同期間隔の設定

HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\W32Time\TimeProviders\NtpClient

単位:秒

 

2.NTPサーバと同期させる

コントロールパネル、日付と時刻、インターネット時間でサーバを1.で設定したサーバに変更する。

 

参照

Active Directoryおよびワークグループ環境での時刻同期 − @IT

WindowsでSencha+PhoneGapをビルドする

Sencha+PhongeGap開発のための準備です。

まず、前提としてのインストール

  1. node.jsのインストール
  2. npmのインストール
  3. PhoneGapのインストール
  4. Sencha Cmd、Sencha Touch

が必要

1.node.jsのインストール

以前、Windows環境にnode.jsをインストールしたとき、とても苦労した記憶があるが、今や http://nodejs.org/download/ のサイトに行ってインストローラを実行するだけで簡単だった。

2.npmのインストール

C:\Program Files\nodejs\node_modules\npm\

(インストール環境によってパスは異なる)へ行って、

node cli.js install npm -gf

参考:Node.js と npm のインストール方法(Windows編) - Node塾

3.PhoneGapのインストール

 npm install -g phonegap

 

その後は、

  1. Sencha Touchアプリケーション開発の準備
  2. Sencha Touchプロジェクトの作成
  3. Sencha TouchとPhoneGapもしくはCordovaとの連携
  4. プラグインの追加およびコーティング
  5. エミュレータもしくは実機で実行
# PhoneGap環境の初期化
$ sencha phonegap init com.albatrosary.SampleApp SampleApp

※SmapleAppというのはApple ID

カメラ用のプラグインをインストールするには、プロジェクトディレクトリ内にあるphonegapディレクトリに移動し、プラグイン追加のコマンドを実行してください。

 

SenchaCmd5では、設定ファイルがリンク元と変わったようです。

app.jsonファイルのbuilds.native.phonegap.config.platformにandroidを指定

 

参考


スマートデバイスに特化したSencha Touchでハイブリッド開発(PhoneGap/Cordovaの利用) | HTML5Experts.jp

 

 これで、開発の準備はできました。次にビルドです。

 コミット履歴から差分ファイルを抽出して別のフォルダにコピペする

GitとSVNの並行運用のため、Gitで作業 → まとまりをSVNへ反映 という手順をpowershellで書いた。

 

#最終バージョンを取得する
$lastUpdate = Get-Content -Path ($folderPath+"lastGitVersion.txt")

#更新ファイルリストを取得し、svnのフォルダファイルを上書きする
git diff head $lastUpdate --name-only | %{ CopyWithDirectory -sourcePath ($gitRoot+"/"+$_) -destinationPath ($folderPath+"/"+$_) }

#最終バージョンを上書きする
$a = (git log --oneline | Select-Object -first 1).Split(" ");
$a[0]

set-content -path ($folderPath+"lastGitVersion.txt") -value $a[0]

 

SVNフォルダのルート直下にlastGitVersion.txtファイルを置いておき、ここに最後に反映させたコミット番号を書き込んでおく。

ここで、フォルダごとコピペにてこずってしまう。そのままCopy-Itemでできればいいのだが、これだと新規で追加したファイルを追加することができない。

間違いなく同じ問題にあたった人がいるはずなのだが、うまくみつからなかったので車輪の発明をしてしまう。

方法としては、ファイルが存在しない場合、親ディレクトリをたどって存在するまでディレクトリ名を配列に入れておき、そのあと、配列にある分ディレクトリを追加するというもの。

ここで、ファイルパスを制御する Split-Pathコマンドが上手く使えればいいのだが、戻り値を文字列として取得して云々が上手くできずに、結局、パスから親ディレクトリ名を取得する関数も必要になり、時間がかかってしまった。

パイプラインをちゃんと理解できていないのが根本問題。

 

#ファイルパスの最後(ファイル名またはフォルダ名)を取得すする

function GetParentDirectory{
param(
[string]$path
)
$retArr = $path.Split("\")

return $retArr[$retArr.Length-1]
}
function CopyWithDirectory {
param (
[string]$sourcePath,
[string]$destinationPath
)

$bufPath1 = $destinationPath
$arr = @()

$destinationPath.Replace("/","\")

$parentDirectory = GetParentDirectory -path $bufPath1
$bufPath2 = $bufPath1.Replace("\"+$parentDirectory, "")
$ret = Test-Path $bufPath2

if ( $ret -eq $false ){
while( $ret -eq $false ){
$parentDirectory = GetParentDirectory -path $bufPath2
$bufPath1 = $bufPath2.Replace("\"+$parentDirectory, "")

$arr += $parentDirectory

$parentDirectory = GetParentDirectory -path $bufPath1
$bufPath2 = $bufPath1.Replace("\"+$parentDirectory, "")
$ret = Test-Path $bufPath2
}
#echo $arr
for($i = $arr.Length - 1; $i -gt -1;$i--){
New-Item -path $bufPath1 -name $arr[$i] -type directory
$bufPath1 = $bufPath1 + $arr[$i]
}
}

Copy-Item -Path $sourcePath -Destination (Split-Path ($destinationPath) -Parent) -Force
}

 

 

Windows7にposh-gitをインストールする

powershellでgitコマンドを使うために、post-gitをインストールした。そのメモ。

gitをC:ドライブではなく、E:ドライブにインストールしていたためか

WindowsでGitを使う時はposh-gitを入れよう — kashew_nuts-blog

のとおりに実行してもそのままではうまくいかなかった。

 

powershellで以下を実行。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Confirm
git clone https://github.com/dahlbyk/posh-git.git

こちられは問題なく動いた。

この後、

.\posh-git\install.ps1

では動かず、posh-gitのフォルダを検索して実行した。私の環境では以下だった。

C:\Windows\SysWOW64\posh-git

. $PROFILE

を実行すると、

WARNING: Could not find ssh-agent

がでるところはそのままだが、

$profile

で設定ファイルのパスを確認して、

Microsoft.PowerShell_profile.ps1 に

$env:path += ";" + (Get-Item "Env:ProgramFiles(x86)").Value + "\Git\bin"

を加えてもうまくいかなかった。

(Get-Item "Env:ProgramFiles(x86)").Value + "\Git\bin"

をインストールされたパスに変更して無事完了。

gitリポジトリのあるディレクトリへ行くとちゃんとgitのブランチが表示される。すばらしい。

 

 

 

 

 

 

ExtJSでcheckboxにfalseを指定する

取得したチェックボックスの全てをチェックする/チェックをはずすの処理を実行するとき。Ext.selectしてset({checked: true)はできるけど、set({checked: false})は動かない。

set({checked: false}, false)なら動く。<input checked> でcheckedを削除するにはこうする必要がある、ということらしい。

 

Yes, a bit of a challenge, but I learned some good stuff while investigating! This is how checking/unchecking checkboxes should ideally be done in ExtJS:

var checkall = function() {
 Ext.select('input[type=checkbox]').set({checked: true}, false);
}

var uncheckall = function() {
 Ext.select('input[type=checkbox]').set({checked: false}, false);
}

 

Normally, Ext.Element.set() uses the DOM method HTMLElement.setAttribute() under the hood, but what we want in this case is not setAttribute('checked', false), but rather removeAttribute('checked'), since the checked state of the checkbox depends on whether or not the attribute is present, not its value. Passing the optional second parameter as false indicates that the set method should bypass the normal setAttribute() call and set the property directly on the underlying DOM element, which is what we want. The underlying effect is exactly the same as your workaround of "el.dom.checked=false", but is a bit cleaner-looking. ;) The parameter is in the docs here (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element-method-set), but without much explanation. If you follow the link to the source (http://docs.sencha.com/ext-js/4-0/source/Element2.html#Ext-Element-method-set), however, it becomes readily apparent what is going on.

Hope that answers things for you! And thanks for the interesting question - I certainly learned a lot in my poking around to figure it out! :)

 http://www.sencha.com/forum/archive/index.php/t-150097.html?s=cf4568fa1a674907f9cbe2c5b4b49c2a