HRR Co., Ltd.

技術的な記録を残していくことを目的としています。そのうち関係ないことを書き出しそう。

Teratermで作業ログを残す

はじめに

Teratermで、作業ログを残す方法です。
意識することなくログを残すために、Teratermが起動したら自動で残してくれるよう、設定を行います。

設定方法

ログの設定

メニューの[設定]→[その他の設定(D)...]→[ログ]のタブで、設定をします。

f:id:hrroct:20170911121914p:plain

設定画面

ログ表示用エディタ(E)

私はサクラエディタを使っているので、メモ帳から設定を変えています。

C:\Program Files (x86)\sakura\sakura.exe
標準ログファイル名(strftimeフォーマット可)(F)

デフォルトは「teraterm.log」ですが、そのままではいつどこで取ったログだかわからないので、変更します。
私は下記のように設定しています。

teraterm_%Y%m%d_%H%M%S_&h.log

teraterm_年月日_時分秒_ホスト名(IPアドレス).log」といったファイル名になります。
その他、使えるものはヘルプに載っているので、そちらをご参照ください。
Additional settings ([Setup] メニュー)

標準のログ保存先フォルダ(S)

作業頻度によってはそこそこ溜まるので、場所も考えたほうがいいかもしれません。
私は容量的に余裕のあるDドライブに置いています。

D:\log
自動的にログ採取を開始する(U)

ここにチェックを入れます。
勝手に開始してくれます。

ログの保存

上記で設定した内容は勝手に保存されないので要注意!
メニューの[設定]→[設定の保存(S)...]で保存先を指定します。
ちなみに、規定のINIファイルは下記にあります。

C:\Program Files (x86)\teraterm\TERATERM.INI

おわりに

作業ログは普段役に立つことは稀ですが、いざというときに必要になったりします。
自分の身を守ることにも役に立ちます。
ぜひ設定しておくことをオススメします!

以上でした。

Select like a bossが地味に便利

Select like a boss のご紹介

便利な拡張機能のご紹介です。
Webサイト上のリンクされたテキストの一部を「普通に」選択できる機能です。
地味ですが便利です。

詳細

Google Chrome拡張機能Firefoxアドオン、Opera拡張機能があります。
画像を見る限り、本家はOperaなのでしょうか。

chrome.google.com

addons.mozilla.org

addons.opera.com

通常、Webサイト上のリンクされたテキストの一部を選択することはできません。
リンクテキストごと掴んでしまうのではないでしょうか。
それを通常のテキストのように選択できるようにするのが、この拡張機能/アドオンです。

具体例

試しに、このサイトにアクセスして、リンクテキストの一部を選択してみました。
https://www.google.co.jp/chrome/browser/desktop/index.html

f:id:hrroct:20170829191247p:plain

きちんと「フォーム」という文字列だけ選択できているのが確認できると思います。

ただし…

Google ChromeでHTMLを見てみると、該当のaタグにdata属性が追加されていました。
「data-select-like-a-boss="1"」これです。

<a class="show-dialog-options hide-cros" data-g-event="cta" href="#" data-select-like-a-boss="1">別のプラットフォーム向けのChrome をダウンロード</a>

他のブラウザでは調べていませんが、ソースコードのコピーの際にはご注意を…。

おまけ

Select like a boss.
「上司のように選択する」って何?と思ったので調べました。

上司 = 自分よりも上のレベルということで「プロ」「とっても上手」「鬼のように」「かっこよく」という意味があるようです。
あちらのボスのイメージはそういう感じなんですね。

以上でした!

Chosenプラグインの使い方(発展編)

はじめに

Chosenプラグインネタ、第3弾です。

hrroct.hatenablog.com

hrroct.hatenablog.com

Webアプリを作成していると、どうしてもデフォルトの機能では仕様を満たせないこともあります。
そんな発展的な使い方を迫られている方に、お届けします。

仕組みを覗いてみる

内部の作りを理解することで、できることとできないことが見えてくるものです。
では、Chosenプラグインでは、どのような仕組みでステキなUIを実装しているのでしょうか。

ブラウザについている開発者ツールを使って、ソースコードを見てみましょう。
バージョンは下記の通りです。
jQuery 3.1.1
Chosen 1.6.2

<select id="target">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

上記がベースとなるselectタグです。
これに対して、

$('#target').chosen();

を実行すると…

<select id="target" style="display: none;">
  <option></option>
  <option value="1">1st Option</option>
  <option value="2">2nd Option</option>
  <option value="3">3rd Option</option>
</select>

<div class="chosen-container chosen-container-single chosen-container-active chosen-with-drop" style="width: 94px;" title="" id="target_chosen">
  <a class="chosen-single">
    <span>1st Option</span>
    <div><b></b></div>
  </a>
  <div class="chosen-drop">
    <div class="chosen-search">
      <input type="text" autocomplete="off">
    </div>
    <ul class="chosen-results">
      <li class="active-result result-selected highlighted" data-option-array-index="1">1st Option</li>
      <li class="active-result" data-option-array-index="2">2nd Option</li>
      <li class="active-result" data-option-array-index="3">3rd Option</li>
    </ul>
  </div>
</div>

こうなります。
コード量が増えたことに、私はビックリでした。
そして、selectタグが"display: none;"で見えなくなっていることにもビックリ。
まるっきり、新しいタグを生成しているんですね。

この構造を知ると、

$('#target').trigger('chosen:updated');

という更新イベントを頻繁に実行しなくてはならない理由もわかります。
また、同時にあまり外から手を加えられないこともわかります。

というわけで

さらなるカスタマイズを望む場合、自動生成された部分をいじくる必要が出てきます。
自動生成後にJavaScriptでごにょごにょすればできないこともないですが…

オススメはしません。
バージョンアップのたびに追随していかなくてはいけなかったり、予期せぬ不具合を踏むことにもなりかねません。

最後に

これでChosenプラグイン3部作は完了となります。
どなたかの一助となることを祈っております。

以上でした!

Windows Updateを再開できた話

はじめに

あるときから、Windows Updateが自動で更新されずにそのままになっていました。
更新内容を能動的に取得しようとしても…
「更新プログラムを確認しています…」
で止まるんです…。

いろんなサイトに書いてあることを試してもダメでしたが、やーっと解決しましたので、共有します。

結論を先に書くと…

自動でUpdateされなくなった、最後のWindows Updateを手動でインストールしました。
そのあとは自動でWindows Updateが動くようになりました。

経緯

まずは対象のインストーラーを探す

「更新プログラムの最終確認日時」が2016年11月8日だったので、2016年11月のWindows Update内容をGoogleで検索してみました。
そしたらこの月のWindows Updateは2016年11月9日。
なので、2016年11月のUpdate内容を探せばよい、ということです。

「2016年11月 Windows update kb」で検索すると、下記が見つかりました。

2016 年 11 月 Windows 7 SP1 および Windows Server 2008 R2 SP1 用のセキュリティ月例品質ロールアップ
https://support.microsoft.com/ja-jp/help/3197868/november-2016-security-monthly-quality-rollup-for-windows-7-sp1-and-windows-server-2008-r2-sp1

↓その流れで…

Microsoft®Update カタログ
Microsoft Update Catalog

ここにたどり着きました。

見つけたらダウンロード、インストールするのですが…

私の使用PCはWindows7の64bitなので、
「2016 年 11 月 x64 ベース システム用 Windows 7 向けセキュリティ マンスリー品質ロールアップ (KB3197868)」
を選んでダウンロードしました。

ここでインストール前の注意点。
Windows Updateのサービスを一旦止める必要があります。
コマンドプロンプトを立ち上げて(Windowsキー + r → "cmd"と入力してEnter)、下記コマンドを実行します。

C:\Users\******>net stop wuauserv
Windows Update サービスを停止中です.
Windows Update サービスは正常に停止されました。

停止が失敗した場合は、もう一度叩きましょう笑
私はそれで止まってくれました。

最後に

私の場合、これで「更新プログラムを確認しています…」で止まることがなくなりました。
もちろん、これで解決しない方もいると思います。
でもでも、一部の困っている方への一助となれば、これ幸いにございます。

以上でした!

CygwinでElectron製アプリを作りたい (1)

はじめに

electron.atom.io

Electronに興味を持ち、実際にいじってみようと思いました。
今回は環境を作ってサンプルを動かすところまでやります。
ちなみにCygwinで環境を作ります。

内容はelectron-quick-startを元にしています。

github.com

まずは環境構築

electron-quick-startにて、GitとNode.jsが必要だと明記されています。
まずはこれを揃えましょう。

Gitについては、サンプルのソースコードを取得するのに必要なのであって、今後も使用していくかは自由だと思われます。

Git

GitはCygwinでサポートされていますので、こちらを使いましょう。
やり方は2つあって、

apt-cygを使う

apt-cygについては、こちらの記事を参考にしてください。
ちょっと古いですが。

hrroct.hatenablog.com

下記コマンドを実行するとインストールできます。
ついでにバージョン情報を確認してみました。

$ apt-cyg install git
$ git --version
git version 2.12.2
Cygwinのセットアップ用のexeファイルを使う

64bitなら「setup-x86_64.exe」という名前です。
Cygwinを使っている方ならどこかにあるはず…
これを使用してGitをインストールしてもOKです。

Node.js

CygwinではNode.jsのサポートをしていないのか、apt-cygで探しても出てきません。
(ソースコードから入れることはできるかもしれませんが…試してません)

なので、Windowsのものをインストールして使うことになります。

Node.js

インストールが終わりましたら、npmコマンドを叩いてみましょう。

$ npm --version
4.2.0

問題なく使えそうですね。

electron-quick-start を起動する

下記コマンドを叩けと言われているので、適当な作業ディレクトリに移動してから叩きましょう。

# Clone this repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start

# Install dependencies
npm install

# Run the app
npm start

これで、サンプルアプリが立ち上がります。

f:id:hrroct:20170525110847p:plain

次に見るべきは…

このドキュメントでしょうか。
electron.atom.io
Quick Startの詳細が書かれているので、自分がやったことの深掘りをするにはよいかもしれません。
※英語です

それと、electron-api-demosを見てみるとよいと思います。
同じ手順で、デモアプリをダウンロード、実行することができます。

$ git clone https://github.com/electron/electron-api-demos
$ cd electron-api-demos
$ npm install
$ npm start

これをみると、新しいウィンドウの作り方とか、メニューのカスタマイズとか、クリップボードの使い方とか、いろいろ書いてあります。
※やっぱり英語ですけど
自分がやりたいことへのイメージがついてくるのではないでしょうか。

さいごに

手順通りなので、あまり面白くはないですよね…
electron-quick-startは、環境を作って動作確認をする、くらいの意味合いなのかなぁと思いました。

自分が使いやすいファイラーを作ることが私の目標ですので、
学んだことはまたこちらで共有していきたいと思います。

以上でした!