Firefox のタブをツリー形式にする (ツリー型タブ Tree Style Tab の導入)

今まで Tab Mix Plus を使って、
特にタブの複数段表示が重宝していたが、
タブの枚数が多すぎて管理しきれなくなってきた。

ツリー型の親子関係で整理したいという気がしていたので、
以下のアドオンを導入する。

Tab Mix Plus と併用している人もいるようだが、
こちらの機能だけで私が必要としている機能は足りると思ったので、
Tab Mix Plus は削除した。

インストール

上記ページから、インストールボタンを押すだけ。

その後、Firefox の再起動。

設定

デフォルトの設定から変えたところを以下に記載

ツール > アドオン の各「設定」ボタンから

  • ツリー型タブ
    • 外観
    • タブバーの表示位置 → 右 (2016/05/22追記)
    • 「タブの表示を左右反転」をOFF (2016/05/22追記)
    • つまみ → モダン黒
    • ツリー
    • 「新しいツリーが作られた時は、自動的に他のツリーを折り畳む」をOFF
    • 「タブを切り替えた時は、~ 折り畳む」 をOFF
  • 情報化タブ
    • プレビュー
    • 「サムネイルをスクロールする」をOFF
    • 大きさを固定する → 26ピクセルに
    • 読み込み状況
    • タブ内のプログレスバーの表示位置 → ラベルの下

未読タブのテキストを赤く表示したかったので、
以下の記述を userChrome.css に追加。

/* 未読タブは赤色で表示 (「情報化タブ」アドオン)
 * https://github.com/piroor/informationaltab/blob/master/skin/classic/informationaltab/informationaltab.css
 */
:root[informationaltab-indicate-unread="true"] tab[informationaltab-unread="true"] .tab-text {
    color: red;
}

(2016/05/22追記)

2つのウィンドウを重ねて開いて、他方を見ながらこちらを書くようなときに、
左側を参照することが多いので、タブバーは右に置くことにした。

ツリー型タブ表示例

HHKを買ったのでキー配列の見直しと思い出話

Happy Hacking Keyboard Lite2 を買ったんです。
それに合わせて、キーボードの配列をカスタマイズしている設定を見直ししたので、その紹介。

  • どんなキー配列にしているか
  • どういう風に実現しているか
  • (おまけ)どうしてこうなったか、自分でも忘れてしまいそうなので書いておく

どんなキー配列にしているか

まず、私のパソ環境について。
今、メインで使っているのが LetsNote NX2 。windows 7。
それのキーボードをそのまま使い、
集中してやりたいときは、ディスプレイと HHK Lite2 日本語配列 を外付けして使っている。

キー配列は、
Change Key
yamy ( Yet Another Mado tsukai no Yuutsu )
というソフトで以下のようにカスタマイズしている。

  • 物理的には日本語配列のキーボードを US配列として使う
  • 「変換」「無変換」は追加の Shiftとして使う
  • Ctrlキーは A の隣
  • Ctrl+O で IME ON
  • Ctrl+J で IME OFF

my_key_setting

それとIMEの設定は基本ATOKのキーで、追加で以下のようなカスタマイズをしている。

  • Ctrl+I : 文節長-1
  • Ctrl+O : 文節長+1
  • Ctrl+F : 次文節
  • Ctrl+B : 前文節
  • Ctrl+P : 変換候補一覧で1ページ前
  • Ctrl+N : 変換候補一覧で1ページ次
  • (その10個の中から選ぶのは数字キーで)
  • Ctrl+J : ひらがな変換
  • Ctrl+K : カタカナ変換
  • Ctrl+L : 半角英数変換
  • Ctrl+E : 半角カタカナ変換
  • Ctrl+Y : 全角英数変換

どういう風に実現しているか

Change Key による設定

Change Key
レジストリでキーを入れ替える(ための設定をしてくれる)ソフト。

後述の yamy では、CapsLock の入れ替えができないため、より前段で入れ替えるために使用。

いじっているのは、CapsLock を 追加のCtrl キーとする1点のみ。

yamy による設定

yamy ( Yet Another Mado tsukai no Yuutsu )

yamy の設定ファイルを github にあげておくので、
詳細はそちらを参照。

dotfiles/_mayu at master – entosen/dotfiles

ノートPCのキーボードを直接押す場合と、HHK Lite2 JP配列 を使う場合とで、
いくつか設定が違う点があり、それはオプションを用意して内部的に分岐させて
切り替えれるようにしている。

IME による設定

今のところ Microsoft Office IME 2010 を使用。

IMEの設定で、キー操作で “ATOK” を選択後、以下の設定を追加する。

Ctrl+I  -, 変換+次, 文節長-1, 文節長-1, 文節長-1, -
Ctrl+O  -, 変換+次, 文節長+1, 文節長+1, 文節長+1, -
Ctrl+P  -, 全変換, 変換+次, 前候補群, 文節変換, 全変換
Ctrl+N  -, 全変換, 変換+次, 次候補群, 文節変換, 全変換
Ctrl+B  -, -, 文節左, 文節左, 文節左, 文節左 
Ctrl+F  -, -, 文節右, 文節右, 文節右, 文節右 

Ctrl+J  -, ひらがな, ひらがな, ひらがな, ひらがな, ひらがな
Ctrl+K  -, カタカナ, カタカナ, カタカナ, カタカナ, カタカナ
Ctrl+L  -, 半角英数, 半角英数, 半角英数, 半角英数, 半角英数
Ctrl+E  -, 半角カタカナ, 半角カタカナ, 半角カタカナ, 半角カタカナ, 半角カタカナ
Ctrl+Y  -, 全角英数, 全角英数, 全角英数, 全角英数, 全角英数

どうしてこうなったか

どうしてこんなキーバインドを使うようになったかを、時系列で振り返ってみる。
この先小さいときの記憶も薄れていくと思うので、今のうちに備忘しておく。

※この先、完全におまけなので、暇な人だけ読んでください。

小学校時代。
家には PC-98があってBASICでプログラムしてたりした。
そのときのキーボードはこんな感じ。

9801s

PC-98 キーボード

基本JIS配列だけど、Aの左にCTRLとCAPSが並んでたりする。
MS-DOSだったので、CTRLキーは使った記憶はないが、使ってたとしたらAの横なので、
このころから、「CTRLはAの横」が身についてしまっていたのかもしれない。

中学校時代~高校時代
家にもWindows3.1とか、Windows95とかが来たころ。
家は仕事の関係上NEC機ばかりだったので、キーボードはやっぱり上のと同じ、
PC-98配列だったと思う。
よく固まるPCを使っていたこともあったので、CTRL+Sでこまめにセーブというのはやっていたので、
それはAの横のCTRLを押していたんだと思う。

大学1年
大学入ったときに、いわゆるDOS/V機を買ってもらった。epsonダイレクトの Endever 。
これは DOS/V 機だったので、「日本語106キーボード」だったんだと思う。
であれば Ctrl左下のはずだけど、使った記憶がない。
でもキーを入れ替えるというのもやった記憶がないので、多分左下押してたんだと思う。

1年のときの学校のコンピューターは、AIXで、何かしらの専用端末いじってたはず。
キーボード記憶にないけど、違和感なかったからJIS配列だったのかなぁ。

大学2年
ここが大きな分かれ道だ。
2年から学部の演習室でプログラミング演習があり、
コンピュータはSunで、X端末が並んでいる部屋だったが、
キーボードが Happy Hacking Keyboard で US 配列だし、カーソルキーさえないしろものだった。

lite_top

Happy Hacking Keyboard | キー配列 | PFU

無理やりemacs(Mule)を使わされ、カーソルキーもなく、GUIのメニューもなく、
結構みんなパニックだった。
演習クリアしないことには卒業できないので、
emacsのキーバインド、カーソル移動ぐらいは覚えて乗り切った。

のちに自分は vi (jvim3) を使うようになったけど、
(何かで読んで vi の方が編集力高いような気がしたし、
emacsのctrlやmeta押しながらというのが覚えられない気がしていた。)
この演習室は3年の末までは使ったので、ここでやっているうちに、US配列に慣れて、
自宅のPCにも安いUSキーボード買ってきて使っていたはず。

大学4年
研究室に配属になって、一人1台 FreeBSD のPCが与えられた。
このときも自分でUS配列のキーボード持ち込んで使っていたんだと思う。
BSD使う頃になると、CtrlとCapsLockを入れ替えるという設定もわかっていたので、
US配列+Aの隣がCtrl という状態がスタンダードになった。
そのうち、US配列の HHK Lite2 を自分で買って使うようになった。

このころBSD上で使ってた日本語変換(cannaか?)で、
Ctrl+iで文節縮め、Ctrl+o で文節伸ばしとか、
Ctrl+IでON、Ctrl+JでOFFとか、に触れて、
なんでも Ctrl でやるような設定にカスタマイズしていったんだと思う。

会社
会社で貸与されたのがwindows機で、キーボードも普通のJIS109キーボードだった。
自前のキーボード持ち込むのは(表向き)禁止だったので、
窓使いの憂鬱を使って、それをむりやりUS配列で使うというのをやり始めたのはこのころ。
刻印と入力文字が異なるけど、ブラインドタッチしてるので、
特に困ることなく使えて今に至る。

そのうち、vimって大文字のコマンド結構あって(大文字Iとか大文字Aとか)、
Shiftを押す小指が疲れるような気がして、
何かで読んだかなんかで、変換と無変換に Shift を割り当てるようになった。
これが意外と快適で、HHK も 日本語配列の Lite2 に買い替えて、家でも会社でも使うようになった。

会社のPCがノートPCに変わって、当然キーボードの選択なんでできないので、
JISキーボードがきて、今に至る。

windows7になって、窓使いの憂鬱から yamy に変えた。

まとめ
というわけで、だらだら書いてしまったが、こんな感じでやってきている。
この先、AZIK とかにも挑戦してみたい。

HTMLソース中の改行が無視されるけど半角空白になってしまって困るという件

先週、このブログを Markdown形式で書き始めて気になっていたことだけど、
HTMLのソース中の改行って表示上は無視されるんだと思っていたんだが、
そうではなく空白文字として扱われてしまう。

どういうこと?

例えば、以下のようなコード。
表示すると2つ目の段落にはソースコードの改行部分で空白が間に入ってしまう。

<div>
今日はとってもよい天気でした。
</div>
<div>
今日はとっても
よい天気でした。
</div>

Firefoxでの結果

もちろんこれは、単語を空白で分かつ英語の文書を書く場合は
妥当な挙動だということは分かる。
例えば以下で、改行が完全に無視されてしまって、
“Internetencyclopedia” とか “non-profitWikimedia” になるのは困るもの。

<p>
Wikipedia is a free-access, free-content Internet 
encyclopedia, supported and hosted by the non-profit
Wikimedia Foundation.
</p>

英語と日本語じゃ、適切な挙動が違うってことだね。

なんとかならないか

ブラウザがなんとかしてくれないものか。
日本語か英語かを判断して、適切な挙動(1つの空白にするか、完全に無視するか)
をしてれればよいのにと思って、
各ブラウザで試したり、CSSをいじってみたりしたけどダメ。
現状では各ブラウザ理想的な挙動にはなっていないようだ。
空白があいてしまう。

検索もいろいろしてみた結果、Firefox の Bugzilla に同様の指摘が上がっていた。

そこからリンクされている CSS Text Module Level 3 というのが、
まだドラフト版だけど、まさにこの挙動について規定されていた。

4.1.2 Segment Break Transformation Rules
4.1.2 区分分断の変換規則
区分分断(以下、単に分断と記す)は縮退可能であり、分断の前後の文脈に依存して、
一個のスペース(U+0020)に変換されるか、または除去される。

  • 分断の[前、後]の文字のいずれもが、次のいずれも満たすならば、分断は除去される:
    • 東アジア圏の字幅プロパティは[F,W,H (Aではない)] のいずれかである、かつハングルでない


CSS Text Module Level
3

日本語訳 – CSS Text Module Level 3 (日本語訳)

まだドラフトだから、各ブラウザまだ対応してないのかなぁ。

雑感

そもそも、HTMLの段落部分は、ソース上でも改行せずに書いたらいいやんけ。
でも行分けて書いておいた方が、文の順序の入れ替えとか楽(特にvimだと)なので、
いやだけど、しようがないのかなぁ。。。

あとは、
最近は HTML を直接エディタで書くことも少なくなってきて、
Markdown や Doxygen のコメント形式などから変換してHTMLが出力されることが
ほとんどなので、
その変換の過程で、段落内の改行は取っちゃえばいいのかね。

現状だと、Markdownやdoxygenコメント中の改行は、
htmlソース中でもそのまま改行文字として残るみたいなので、
結果1文字空いてしまうことが起こってしまうんだけど。
この変換プログラムぐらいは自分でいじれそうだから、
自分のブログなんかはそういう風に改造してしまうってのが
当面の策かなぁ。

すっきりしないですが。

Windowsでインストーラーなしのソフトをどこに置くか

yamy とか PuTTY とか、
インストーラーがついていなくて自分で解凍して適当なディレクトリに配置する
ようなソフトウェアを、Program Files の中に手動で置いていたけど、
それだと不都合があることがわかってきたのでまとめておく。

これらのプログラムは、設定変更されたときに実行ファイルと同じ場所に
設定ファイルを書き出すらしい。
どうも Program Files の中のファイルは権限的に書き込みできないようなので、
反映しない。エラーも出ない。
自分で置いたディレクトリなのに…。

環境

  • 環境: Windows 7
  • ユーザーアカウント制御の設定: 既定 – プログラムがコンピューターに変更を加えようとする場合のみ通知する (上から2番目)
  • yamyなど、インストーラーを持たない、かつ、実行ファイルと同じディレクトリのファイルに書き込みをしようとする場合

調査

yamy の設定ファイル を例に説明する。

yamy には設定を選べるUIがあって、これを編集するUIもある。

yamyの選択メニュー

yamyの選択肢設定画面

ただ、現状、これに追加しようとしても反映しない。
おそらく c:\Program Files\yamy\yamy.ini に書き込まれるはず。
これの権限を調べると、一般ユーザーには「読み取りと実行」しかついていない。
このせいかなぁ。
Program Files以下の権限

ためしに c:\ProgramPortable\ 以下に入れてみる。
このディレクトリは、単に c:\ 以下に何も考えずにディレクトリを作っただけ。
入れ方は、ダウンロードフォルダ内で zip を展開して、
できたディレクトリを「移動」した。

あ。うまくいった。
Authenticated Users に変更がついているからかな。
ProgramPortable以下の権限

おそらく、c:\ の権限より、 c:\Program Files の権限の方が
厳しいものになっているからだと思う。

Windows 7新時代:第8回 Windows XP → 7移行のアプリケーション・トラブル解決法 (1/2) – @IT
これのケース3に書かれていることだと思う。

場所は関係なくて、結局アクセス権限の問題なんだろうけど、
まあこれでうまくいったし、
Program Filesの中に入れてそれぞれ権限考えるのはちょっと面倒なので、
手動で入れるものは c:\ProgramPortable に入れるようにしよう。

もちろんこのPC使うのが自分だけだから、あまり考えずにそうしているわけだけど。
そもそも Program Files 以下に設定置くようなプログラムは、
マルチユーザーでは使えないのか。
だったら、もういっそ個人ディレクトリの下に置いたほうが正解なのなかぁ。

とりあえず、以下の方針で行こう。

  • インストーラーがついているソフトはそれに従う。 Program Files など
  • インストーラーがついてないものは、c:\ProgramPortableに入れる
  • インストーラーがついてないものは、c:\Users\ユーザー名\ProgramPortable に入れる

WordPress Markdownプラグインで勝手に改行される問題

WordPressを設置して、記事を Markdown で書くために、
Jetpackを入れて、その中の Markdown モジュールを有効にした。

ただそれだと、改行の挙動が想定と違っていた。
通常の Markdown だと、(空行でない) 単なる改行は無視されるはずと思っていたが、
<br/> に変換されてしまっている。

これをなんとか通常の挙動にしたい。

起こっていること(想像)

以下は、ちゃんと調べずに、挙動からの推測で書いている。

WordPressは、DB上で各記事を「テキスト」編集の形式のまま保持している。
それを出力時に加工して出力している。
通常は、空行で区切って段落(<p>)とするのと、段落内の改行を<br>に変更する。
wpautop というらしい。

markdownプラグインを入れた場合は、
markdown → wpautop という順番で処理され、
markdownの方もそういう加工が後段に入ることは意識してあるので、
あえてmarkdownの方では <p>タグをつけていない。
おそらくこの挙動は、途中からmarkdownプラグインを導入した場合でも、
過去のエントリを崩さないためだと思う。

ただ、今回は最初から全エントリをmarkdown形式で書いていくので、
この辺、無視してしまってもよい。

対応方法

対応方法としては、

  1. markdownの方で<p>タグも出力するようにして、wpautop は完全に無効にする
  2. markdownの方は現状のまま(<p>タグがつかない)、wpautopで<p>タグだけつける

が考えられるけど、調べたら 2 の方法でやっているブログが見つかったので、
とりあえずはその方法で行う。

やってみる

テーマは Twenty Fifteen を使っているので、
WordPressの管理画面 > テーマの編集 から
functions.php を選んで、以下の記述を追加する。

// 記事の自動整形を無効にする
// https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpautop
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

これだと、<p></p><br/>も自動付与されなくなる。
結果 jetpack の markdown では、<p> までも付かなくなってしまった。

次に、<br> の処理だけを止めるようにする。

// 記事の自動整形のうち、<br>の付与だけをやめる。
// http://blog.sfpgmr.net/entry/%E6%98%A8%E6%97%A5%E3%81%8B%E3%82%89markdown%E8%A8%98%E6%B3%95%E3%82%92%E8%A9%A6%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B
function wpautop_nobr($txt) {
    return wpautop($txt, false);
}
remove_filter('the_content','wpautop');
add_filter('the_content','wpautop_nobr');
remove_filter('the_excerpt','wpautop');
add_filter('the_excerpt','wpautop_nobr');

これだと期待どおり、<p>がついて<br>がつかないという動作になった。
とりあえずはこれでOk。

残る課題

今回、テーマの functions.php に追加したが、
本来テーマによらない挙動のはずなので、
もっと適切な(テーマによらない)場所に記載するのが適切だと思うのだが、
そこがどこなのか。

ブログ始めました。WordPressのセットアップ。

主に勉強したことをまとめてアウトプットしていくことが大事だと思って、ブログを始めようと思います。

レンタルサーバに WordPress をセットアップしたので、そのメモ。

簡単なので、メモ残すこともなかったぐらいだったけど。

ゴール

WordPress でブログを立てる。

要件

  • サーバ: さくらのレンタルサーバ
  • ドメイン: ムームードメインで取得した entosen.tokyo
  • サービスURL: http://www.entosen.tokyo/b/
  • 同ホストで別ドメインのサービスもするかもしれないので、ドキュメントルートはサブドメインを切る形でやる
  • 記事はmarkdownで書く

ブログ以外のサービスも同じドメインでやるかもしれないと思って、
ブログは /b/ 以下に作ることにした。

やったこと

ドメインの設定

ドメインはすでに取得済みだったので、設定から。

“entosen.tokyo” を解決するネームサーバはここ(さくらのDNS)だと設定する。

参考

ドメインを利用(他社で取得・管理のドメイン)|さくらインターネット公式サポートサイト

  • ムームードメイン>ネームサーバ設定変更>「GMOペパボ以外のネームサーバを使用する」
    • ここで、さくらのレンタルサーバで指定されているDNSサーバを登録。

確認

反映するまでに時間がかかるが、
反映されれば whois コマンドで以下のように出るはず。

% whois entosen.tokyo
Domain Name:ENTOSEN.TOKYO
...省略...
Name Server:NS1.DNS.NE.JP
Name Server:NS2.DNS.NE.JP
...省略...

OK。

さくらのサーバのDNSの設定(Aレコード)

  • さくらのサーバコントロールパネル>ドメイン設定>新しいドメインの追加
  • 他社取得したドメインを移管せずに使う・属性型JPドメインを使う(さくら管理も含む)
  • ドメイン追加に進む
  • ドメイン名に取得したドメイン名 entosen.tokyo を入力

これで、entosen.tokyo と www.entosen.tokyo が DNSに登録されるらしい。

確認。

さくらのネームサーバー上を確認

>nslookup entosen.tokyo ns1.dns.ne.jp
サーバー: ns1.dns.ne.jp
Address: 210.188.224.9

名前: entosen.tokyo
Address: 219.94.129.220

>nslookup www.entosen.tokyo ns1.dns.ne.jp
サーバー: ns1.dns.ne.jp
Address: 210.188.224.9

名前: entosen.tokyo
Address: 219.94.129.220
Aliases: www.entosen.tokyo

デフォルトのネームサーバーで確認。反映には時間がかかる。
>nslookup entosen.tokyo

権限のない回答:
名前: entosen.tokyo
Address: 219.94.129.220

>nslookup www.entosen.tokyo

権限のない回答:
名前: entosen.tokyo
Address: 219.94.129.220
Aliases: www.entosen.tokyo

ブラウザでも確認

バーチャルホストの設定

同じレンタルサーバで別ドメインのサービスもするかもしれないので、
entosen.tokyo は、バーチャルドメインとして別ディレクトリに
ドキュメントルートが来るように設定する。

  • さくらのサーバコントロールパネル>ドメイン設定>entosen.tokyo の「変更」
  • 「マルチドメインの対象のフォルダをご指定ください」 → “/entosen” を指定。

これで、 ~/www/entosen がドキュメントルートのディレクトリになる。

WordPress のインストール

これに従ってやったら、簡単にできたわ。

WordPressでブログを始めよう!|さくらインターネット公式サポートサイト

WordPress の設定

ざっと見て、大事そうなところは設定した。

  • 設定>一般設定
    • WordPressアドレス → http://www.entosen.tokyo/b に (wwwを追加)
    • サイトアドレスも同様
    • 日付は YYYY-MM-DD 形式
    • 時刻フォーマットは24時間形式
  • 設定>パーマリンク設定
    • パーマリンクは 「投稿名」に。

パーマリンク名は、間にカテゴリを入れようかと迷ったけど、
やはりカテゴリは将来変えたくなることもあるだろうと思って、
投稿名だけで行くことにした。

WordPressをインストールしたら最初に設定しておきたい22項目 | ワードプレスの使い方!初心者めっちゃ入門ガイド【ハイパー】

akismetプラグインの設定

[WordPressコメントスパムを排除するプラグイン『Akismet』2014版 | ワードプレスの使い方!初心者めっちゃ入門ガイド【ハイパー】]
(http://wordpress.siyouyo.com/plugin/1290/)

WP Multibyte Patch の有効化

Markdownで投稿できるように
→ JP Markdown プラグインを使う。

https://ja.wordpress.org/plugins/jetpack-markdown/

あれ!? markdownでは、普通に改行した場合は改行にならないと思ってたんだけど、
なんか改行されてるね。
これについては 別エントリで。