HRR Co., Ltd.

技術的な記録を残していくことを目的としています。1次情報を大事にしています。

CygwinでTypeScriptをやってみる

はじめに

TypeScriptを勉強できるよう、環境を整えようと思ったのが動機でした。
なので「Hello, World!」メソッドを作るところまでです。

まずはnode.js

が必要になります。
CygwinでNode.jsを使うには、Windowsのものをインストールするのが普通かと思います。
ソースコードから入れられるかもですが…やってませんm(_ _)m

Node.js

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

$ npm --version
4.2.0

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

そしてnpmでTypeScriptを入れる

$ npm install -g typescript
C:\Users\UserName\AppData\Roaming\npm\tsc -> C:\Users\UserName\AppData\Roaming\npm\node_modules\typescript\bin\tsc
C:\Users\UserName\AppData\Roaming\npm\tsserver -> C:\Users\UserName\AppData\Roaming\npm\node_modules\typescript\bin\tsserver
C:\Users\UserName\AppData\Roaming\npm
`-- typescript@2.3.4

コマンドを打つだけでOKです。
試しに、コンパイルまでしてみます。

$ vi hello.ts

ファイルの中身はこんな感じで。

class Hello {
    say(): string {
        return "Hello, World!";
    }
}

いざコンパイル

$ tsc hello.ts
$ cat hello.js
var Hello = (function () {
    function Hello() {
    }
    Hello.prototype.say = function () {
        return "Hello, World!";
    };
    return Hello;
}());

あっさり終わってしまいましたが…
以上でした!

ブラウザの言語設定によってドキュメントに書いてあることが変わるんですけど

はじめに

私が気づいたのはGoogle Maps APIの下記ドキュメントです。
日本語で書かれた内容のほうが古いです。
Versioning  |  Google Maps JavaScript API  |  Google Developers

ブラウザはGoogle Chromeです。
ブラウザ依存の可能がありそうです。

経緯

ある日、Google ChromeデベロッパーツールのConsole画面に、Google Maps APIからのWarningsが出ていることに気づきました。
Retired Versionと出ているので、古いバージョンなのだなと理解しました。

Google Maps API warning: RetiredVersion
https://developers.google.com/maps/documentation/javascript/error-messages#retired-version

その後、日本語ドキュメントに従って、APIのバージョンを新しくしたのに、まだ「Retired Versionだよ!」って注意されたことから発覚しました。
いやいや、書いてる通り、リリースバージョンにしたんですけど…。

そこで、元のドキュメントを見てみることに。
自分でブラウザ翻訳をかけたわけではないので、恐らくブラウザの言語設定を見ているのではないかと思い、変更してみました。

f:id:hrroct:20170928195615p:plain
BEFORE

f:id:hrroct:20170928195611p:plain
AFTER

そして、サイトに再度アクセスすると…。
読みが当たっていました。
日本語ではリリースバージョンを3.26としていますが、英語版では3.29だと言っております。

The release version
We continually apply bug fixes to the release version, while ensuring the feature set remains stable. The fixes are listed in the release notes.
The current release version is 3.29. You can request it with either of the following bootstraps:
リリース バージョン
Google では、機能セットの安定性を確保しながら、リリース バージョンに継続的にバグ修正を適用しています。修正事項は、リリースノートに記載されます。
現在のリリース バージョンは 3.26 です。次のいずれかのブートストラップを使用して、リリース バージョンをリクエストできます。


試しに3.29にしてみると、Warningsは出なくなりました。
これは困る…。

言語設定による副作用

ブラウザの言語設定を見ているサービスは他にもあるようで、英語化されてしまうことがあります。
割り切って英語のまま使うか、いちいち切り替えるのか…。

最後に

私はたまたまGoogle Maps APIのドキュメントで見つけましたが、Googleのドキュメントなら他も同じなのではないでしょうか。
今後気をつけないといけません。

以上でした!

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サイト上のリンクされたテキストの一部を「普通に」選択できる機能です。
地味ですが便利です。

詳細

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

Google Chrome拡張機能Firefoxアドオン、Opera拡張機能があります。
画像を見る限り、本家はOperaなのでしょうか。
(2021/10/18追記: しかし現状のOperaChromiumベースなので、Chrome拡張のものを使うことになりそう。リンク切れてましたし)

具体例

試しに、このサイトにアクセスして、リンクテキストの一部を選択してみました。
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部作は完了となります。
どなたかの一助となることを祈っております。

以上でした!