2014-11-13

floatを使った時の左右のカラムの高さを揃える方法

css

floatを使用して左右のカラムに背景色や背景画像の指定をした時、コンテンツの量で左右の高さが合わなくて片方の背景が切れてしまう事が…。

無理に高さを指定しまうと変にスペースも出来てしまうし、いい方法がないかと検索してたらjQueryで簡単に高さを揃える方法がありました。
http://tukuruder.com/archives/1257#codesyntax_8

調べた中ではこれが一番簡単でわかりやすかったです。

著者：N.K

2014-10-17

WinSCPで多段階接続をする

便利ツール

【ローカル】

　→【踏み台１（鍵１認証）】

　　→【踏み台２（鍵２認証）】

　　　→【ターゲット（鍵３認証）】

という構成でWinSCPをターゲットに繋げる方法の一つを紹介します。

重要なのはWinSCP単体ではなく、puttyも併用する点です。

予め　puttyで多段階接続をする - 時雨に舞う　を済ませておきましょう。

-----

（１）トンネル用puttyの設定を用意する

　puttyで多段階接続をする - 時雨に舞う　のセッションをコピーし、その内容に対して下記の設定を加えます。

[接続→SSH→トンネル]

　ポートフォワーディング：源ポート：3000以上の任意の値（例：3111）

　ポートフォワーディング：送り先：
　　[ターゲットのIPアドレスまたはホスト名]:[ターゲットの接続先ポート番号]
　　（例：example.com:22）

　ラジオボタン１行目：ローカル

　（※上記３個所を設定したら「追加」ボタンを押しておくこと）

（ここまでやったらセッションを保存しておきましょう）

-----

（２）接続用WinSCPの設定を用意する

[セッション]

　ファイルプロトコル：SFTP

　ホスト名：localhost

　ポート番号：[上記（１）で源ポートに指定した値（例：3111）]

　ユーザー名：[ターゲットでログインするユーザー名]

（ここまでやったらセッションを保存しておきましょう）

-----

（３）トンネル用puttyを起動する（プロンプトが出ている状態にしておく）

-----

（４）接続用WinSCPでログインボタンで接続できるはず・・・

参考にしたページ

Connect to FTP/SFTP Server Which Can Be Accessed via Another Server Only :: WinSCP

著者：t.n

2014-10-17

puttyで多段階接続をする

便利ツール

【ローカル】

　→【踏み台１（鍵１認証）】

　　→【踏み台２（鍵２認証）】

　　　→【ターゲット（鍵３認証）】

という構成でputtyをターゲットに繋げる方法の一つを紹介します。

-----

（１）【踏み台１】に ~/.ssh/config を作成する（無ければ新規）

# vi ~/.ssh/config

▽ここから

HOST Humidai2

HostName [踏み台２のIPアドレスまたはホスト名]

User [ログインするユーザー名]

Port [接続先ポート番号]

HOST Target

HostName [ターゲットのIPアドレスまたはホスト名]

User [ログインするユーザー名]

Port [接続先ポート番号]

ProxyCommand ssh -W %h:%p Humidai2

△ここまで

　パーミッションを600にしておく（念のため）

# chmod 600 ~/.ssh/config

-----

（２）Pageant.exeを実行して常駐させる

　ここで多段階接続に必要な分の鍵を登録しておく

　（最低限鍵２と鍵３、鍵１も入れておいた方が楽）

-----

（３）puttyの設定をする（特筆無ければデフォルト）

[セッション]

　接続先の指定：ホスト名：[踏み台1ののIPアドレスまたはホスト名]

　接続先の指定：ポート：[接続先ポート番号]

[接続→データ]

　ログインの詳細：自動ログインのユーザ名：[ログインするユーザー名]

[接続→SSH]

　サーバに送られるデータ：リモートコマンド：ssh Target

[接続→SSH→認証]

　認証方法：Pageantを使って認証する：ON

　認証パラメータ：エージェントフォワーディングを認める：ON

　認証パラメータ：認証のためのプライベートキーファイル：鍵１

（ここまでやったらセッションを保存しておきましょう）

puttyの開くボタンで接続できるはず・・・

参考にしたページ

多段SSHで4段先のサーバに一発ログイン - Glide Note - グライドノート

著者：t.n

2014-10-02

WinSCPのiniファイルの場所(Windows8.1)

便利ツール

PC乗り換えの時に毎回iniファイルの場所を探すのでメモです。

C:\Users\ユーザ名\AppData\Local\VirtualStore\Program Files\WinSCP

エクスポート機能はあるのになぜインポート機能はないのだろうか…

著者：y.u

2014-09-29

Google ChromeがSkypeのCPU使用率を上げる問題

その他

最近ＰＣの動作が重い気がして気になっていました。
検索するとこんな記事が…！

Google ChromeがSkypeのCPU使用率を上げる問題の対処法 | numlockz

skypeのバージョンは変わっているんだけど…。

ためしにこれで、様子を見てみようと思います。

著者：yotsu

2014-09-18

deploygate（β版）を使ってみた

アプリ制作

アプリのテスト配信補助サイト（ツール？アプリ？）のdeploygateを使ってみました。

<a href="https://deploygate.com/" data-mce-href="https://deploygate.com/">DeployGate - An incredibly easy way to deploy apps in development!</a>
DeployGate - An incredibly easy way to deploy apps in development!

言語は英語の他に日本語があるので配信先の方が英語苦手でも大丈夫なのは助かりますね。

同様なサービスを提供していた testflight は apple に買収されて 2014/03/21 で android 向けのサポートが終了してしまいました。この手のサービスはandroid/iOSの両方で使えるから便利なのにね～。

deploygateは投稿時点ではβ版という事で、iOSもサポートする方向で拡張テスト中といった感じですね。サイトには

期間限定の特典

Beta Programをご利用いただくアカウントでは、DeployGateの可能性をお試し頂くために、次の制限が解放されています。

アプリ数: 無制限

配布数: 無制限

チームメンバー数: 無制限

Beta Program期間中だけ？ …ではありません！これらは、Beta Program期間の終了後もご参加いただいた方のアカウントに残ります。 DeployGate を一緒によりよくしていくのにご協力いただける方を歓迎します。

とありますが、無料とは書いていない点が気になります。（βテスト参加自体は無料です）

さて、前置きはこのくらいにして、実際の使用感についてですが、取り敢えず使えるレベルなのではないでしょうか。アプリ単体を扱う基本フローは

＜配信する側＞

　1.ユーザー登録

　2.android / iOS のパッケージファイルをアップロード

　3.配信先のメールアドレスを入力して招待（このタイミングで開発者/テスターを選択）

＜配信される側＞

　4.招待メールからユーザー登録（別に先にアカウントだけ作っておいても構わない）

　5.deploygateアプリのインストール

　6.プロファイルのインストール（iOSのみ）

　7.deploygateアプリからログイン

　8.テストするアプリを選択してインストール～テスト

また、アプリ単体ではなく Android/iOS 両方をテスト配信する場合はグループを使うと便利。グループを使う基本フローは

＜配信する側＞

　1.グループの作成

　2.チームの作成（このタイミングでテスター/開発者/管理者の権限を付与）

　3.グループにメンバーを追加（既存アカウントのメールアドレスを指定、たぶん招待もできると思う）

　4.メンバーをチームに所属させる

　5.グループにアプリをアップロード

　6.チームにアプリを関連付け

＜配信される側＞

　上記のアプリ単体を扱う基本フローと同様。インストール可能なアプリ名にグループ名が付いて表示される。

他にもアプリの配布やバグ報告機能？みたいなものがあるようですが、取り敢えずはここまで。

＜追記＞

アプリ配布時の更新通知やログ収集などはSDKの導入が必要そうですね。

著者：t.n

2014-08-25

どこかで誰かが・・・スタイルを上書きしている！

HTMLのとある要素のスタイルをどかで誰かが変更している時にそれを調査する方法について書いてみます。ブラウザはChromeです。

今回使うHTML

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="csstest.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
    <script type="text/javascript">
setTimeout("changeColor()", 3000);

function changeColor() {
	$("#aiueo").css("color", "aqua");
}
    </script>
</head>
<body>
	<p id="aiueo" class="test" style="color:purple;">テスト</p><br>
</body>
</html>

今回使うCSS

p {
	color:red;
}

.test {
	color:blue;
}

#aiueo {
	color:green;
}

このサンプルはp要素内の「テスト」という文字がCSSによって color:green になっているが、3秒後にJavaScriptによって color:aqua にされるタイミングでそれを検知しようというものです。

まず、検知する為にブレークポイントを貼ります。F12キーを押して「Developer Tools」ウィンドウを表示し、「Elements」タブを選択してください。
f:id:sigtech:20140825191302p:plain
スタイル（属性）の変更を検知したい要素を選択状態にして右クリックから「Break on」→「Attributes modifications」を順にクリックします。

ブレークポイントが貼られたかどうかは同じ画面の右側にある「DOM Breakpoints」を選択すると一覧表示されます。（「DOM Breakpoints」が表示されていない場合は「>>」の部分をクリック）
f:id:sigtech:20140825191306p:plain

ブレークポイントを貼ったら元のHTMLを表示しているウィンドウでF5を押して更新します。すると3秒後にヒットして下図のような画面になるはずです。
f:id:sigtech:20140825191308p:plain
属性が変更されるまさにその瞬間ですね。
この画面の右側に「Call Stack」という項目があります。これは「呼び出し元」から「実際に属性を変更した処理」への呼び出し履歴になります。その部分は２列になっていて、左側が（たぶん）関数名、右側がファイル名です。この各行を上から順にクリックしていくと呼び出している側を順に見る事ができます。

今回は「changeColor」の行までいくと
f:id:sigtech:20140825191312p:plain
このように「$("#aiueo").css("color", "aqua");」が呼び出し元だという事が分かります。
まぁ、知らないJavaScriptがたくさんあって結局誰が変更しているのか分からないという可能性もありますが…。
参考になれば幸いです。

ちなみに「Developer Tools」ウィンドウの「Elements」タブで右側に出てくる「Styles」は対象の要素を選択しておけば
f:id:sigtech:20140825191315p:plain
こんな感じでスタイルが誰に上書きされたのかを確認できます。下から上に向かって上書きの過程が見れますね。最初は csstest.css の2行目でp要素に対して、次は6行目でtestクラスに対して…、最後のはelement.styleで要素に直接指定（JavaScript含む）となっています。

ちなみに「Developer Tools」ウィンドウの「Elements」タブで右側に出てくる「Computed」も対象の要素を選択しておけば
f:id:sigtech:20140825191318p:plain
colorを開くと同じく過程が見れますね。任意のスタイルだけを見たい場合はこちらが便利。

著者：t.n