Do You PHP はてな このページをアンテナに追加 RSSフィード Twitter

2018-01-31

[]Firefox58.0.1でFaviconize Tabのようにタブを表示する

Firefox57にアップデートした際にタブをuserChrome.cssを使ってFaviconize Tabっぽくしたのですが、58.0.1にアップデートしたところxulのidや構造が変わってしまったのか、また元に戻ってしまいました。

ということで、

あたりを参考にして、chrome://browser/content/browser.xulインスペクターとにらめっこしつつuserChrome.cssちょっといじってみました。大きくはtabbrowser-tabsがclassからidに変わったみたいですね。最終的には以下の通りです。

@charset "utf-8";

tab .tab-text,
tab .tab-text-stack * {
   margin: 0px;
   padding: 0px;
   max-width: 0px;
   display: none;
}

tab .tab-content,
#tabbrowser-tabs tab[fadein="true"] {
   min-width: 36px !important;
   max-width: 52px !important;
}

#tabbrowser-tabs tab[fadein="true"]:not([selected="true"]),
#tabbrowser-tabs tab[fadein="true"] {
   max-width: 36px !important;
}

#tabbrowser-tabs tab .tab-close-button {
   display: none !important;
}

#tabbrowser-tabs tab[pending] {
   opacity: .6;
}

これを、AppData/Roaming/Mozilla/Firefox/Profiles/xxxxxxxxx.default/chrome/userChrome.cssとして保存&再起動すると、

f:id:shimooka:20180131142231p:image

こんな感じで表示されるようになりました。

2017-11-21

[]Firefox57でFaviconize Tabのようにタブを表示する

Firefox57にアップデートしたのですが、使用していたアドオンが一気に減ってしまい使い勝手がかなり変わってしまいました(泣)

中でもタブの表示は10タブ以上開いているのが常だったのでFaviconize Tabを使ってfaviconだけ表示(閉じる時は中クリック)していましたが、それが横にダラーっと並ぶようになってしまってアレなので、userChrome.cssでなんとかしてみました。

参考にしたのは、Faviconize Tabで使用されていたfaviconizetab.cssです。

これをちょっとだけ変更して、以下のようなuserChrome.cssを作成。

@charset "utf-8";

tab .tab-text,
tab .tab-text-stack * {
   margin: 0px;
   padding: 0px;
   max-width: 0px;
   display: none;
}

.tabbrowser-tabs tab[fadein="true"] {
   min-width: 36px !important;
   max-width: 52px !important;
}

.tabbrowser-tabs tab .tab-icon-image,
.tabbrowser-tabs tab .tab-close-button {
   margin-left: 3px;
}

.tabbrowser-tabs tab[fadein="true"]:not([selected="true"]),
.tabbrowser-tabs tab[fadein="true"] {
   max-width: 36px !important;
}

.tabbrowser-tabs tab .tab-close-button {
   display: none !important;
}

これを、AppData/Roaming/Mozilla/Firefox/Profiles/xxxxxxxxx.default/chrome/userChrome.cssとして保存&再起動すると、

f:id:shimooka:20171121141351p:image

こんな感じで表示されるようになりました。

とりあえずはこれで凌ぐことにします。

2016-07-01

[]JsViewsチュートリアル - テンプレートのリンクを解除する

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。

以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

JsViewsでテンプレートのリンクを解除する

コード

<html>
<body>
<div id="list_simple"></div>
<hr/>
<button id="add">add</button>
<button id="unlink">unlink</button>
<button id="empty">empty</button>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var fruits = {};

    $.templates('#template').link("#list_simple", fruits);

    $(document)
        .on('click', '#add', function(ev) {
            $.observable(fruits).setProperty({
                code: "99",
                name: "ドリアン"
            });
        })
        .on('click', '#unlink', function(ev) {
            $.observable(fruits).setProperty({
                code: "01",
                name: "バナナ"
            });

            // リンクを解除する。コンテンツはそのまま
            $.unlink('#list_simple');
        })
        .on('click', '#empty', function(ev) {
            // 空にすることで、リンクも自動的に解除される
            $('#list_simple').empty();
        });
});
</script>

<script id="template" type="text/x-jsrender">
{^{if #data}}
    <div id="inner">
        {^{>code}}/{^{>name}}
    </div>
{{/if}}
</script>
</body>
</html>

説明

テンプレートへのリンクを解除する場合、jsViewsのunlinkメソッドを使用します。ただし、unlinkメソッドテンプレート内のscriptタグを削除するだけ、つまり、リンクが解除されるだけで描画済みのコンテンツはそのままになりますので、必要に応じてコンテンツのクリアなどを行う必要があります。また、リンクされたノードが削除された場合、自動的にリンクも削除されます。

JSFiddleで動作を見る

参照

[]JsViewsチュートリアル - リンクしたテンプレートをまるごと差し替える

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。

以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

JsViewsでリンクしたテンプレートを別のテンプレートに差し替える

コード

<html>
<body>
<div id="list_simple"></div>
<hr/>
<button id="add">add</button>
<button id="switch">switch</button>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var fruits = {
        foo: 'foo',
        bar: 'bar'
    };
    $.templates({
        template1: "#template1",
        template2: "#template2"
    });

    var current_template = $.templates.template1;
    $.link.template1("#list_simple", fruits);

    $(document)
        .on('click', '#add', function(ev) {
            $.observable(fruits).setProperty({
                code: "99",
                name: "ドリアン"
            });
        })
        .on('click', '#switch', function(ev) {
            /**
             * テンプレートを差し替えるviewオブジェクトを取得する
             */
            var $view = $.view('#inner');   // $.view($('#inner'))でもOK
            if (current_template == $.templates.template1) {
                current_template = $.templates.template2;
            } else {
                current_template = $.templates.template1;
            }

            /**
             * テンプレートを差し替える
             *
             * コンパイル済みテンプレートでない場合、$.templates('#template1')の
             * ような書式でもOK
             */
            $view.tmpl = current_template

            /**
             * 新しいテンプレートで再描画
             */
            $view.refresh();
        });
});
</script>

<script id="template1" type="text/x-jsrender">
{^{if #data}}
    <div id="inner">
        {^{>code}}/{^{>name}}
    </div>
{{/if}}
</script>
<script id="template2" type="text/x-jsrender">
    <h1 id="inner">
        {^{>foo}}:{^{>bar}}
    </h1>
</script>
</body>
</html>

説明

リンクしたテンプレートを何らかのイベントが発生したタイミングで、別のテンプレートに差し替える事もできます。この場合、viewオブジェクトのtmplプロパティに別のテンプレートオブジェクトを代入し、viewオブジェクトのrefreshメソッドを呼び出すことで新しいテンプレートを使って再描画させます。

JSFiddleで動作を見る

参照

2016-04-25

[]BluetoothHHKB Professionalが到着!

PFUダイレクトAmazonショップで予約していたBluetoothHHKB Professionalが無事到着しました。

PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B

PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B

購入したのは英語配列(PD-KB600B)です。

プチ開封の儀

到着した荷物の箱を開けると。。。おおお、これですよこれ。予約特典(先着)のスマートケースも付いてきました。

f:id:shimooka:20160425113414j:image

化粧箱。

f:id:shimooka:20160425113759j:image

箱は重要じゃない、中身が大事です。今回初めて「墨」を購入しましたがダークグレーというか意外と黒くないんですね。

f:id:shimooka:20160425113832j:image

会社で使ってる初代HHKB Professional(PD-KB300)と並べたところ。初代はもう白色と言うより蛍光灯焼けしてクリーム色になってますけど(涙)

f:id:shimooka:20160425113856j:image

ちょっとタイピングしたところ、初代と比べてかなり「カチャカチャ感」がないです。あと、タッチがちょっと軽くなってる気がします。Professional2からそうなんでしょうか。。。

環境設定

普段はDELL製ノートPC+Windows7(64Bit版)+初代HHKB Professional+トリニティーワークス社のUSJP Proという組み合わせで使ってます。

USJP Proでやってることは

  • キーボード配列変換(106→101)
  • CapsLockとctrlキーの入れ替え(ノートPC側も含む)

の2つなのですが、今回購入したHHKBも含めて

  • 初代HHKBも今までどおり使える
  • BluetoothHHKBも初代と同様に使える
  • ノートPCのCapsLockはctrlキーと入れ替え

という環境にしたいので、USJP Proをやめてレジストリを直接いじることにしました。

キーボード配列変換

使用するキーボード毎に106(ノートPCのキーボード)と101(HHKB×2)を切り替える必要があります。ググってみたところ、HID毎に設定を上書きできることが分かったので早速実施。手順は以下のエントリを参考にしました。

(1)まずは、デバイスマネージャで2台分のHHKBハードウェアIDをそれぞれ確認。必要であればベースコンテナーIDも。

f:id:shimooka:20160425151351p:image

(2)レジストリエディタを使って、それぞれの所定の場所にKeyboardTypeOverride、KeyboardSubtypeOverrideを追加

f:id:shimooka:20160425151830p:image

CapsLockとctrlキーのキーマッピング変更

こちらもググるといろいろ情報が出てきますが、よく考えるとCapsLockキーがctrlキーになれば要件は満たせるわけで入れ替える必要がない事に気づきました。ということで、以下のサイトを参考にレジストリを変更。

実際には、コピペでregファイルを作って実行しました。

f:id:shimooka:20160425171042p:image

OS再起動して動作確認

レジストリを変更したらWindows再起動。ノートPC・初代HHKBBluetoothHHKBでそれぞれ動作確認し、問題がないことを確認しました。

まとめ

今日のお昼ごろから使ってますが、ようやくキーボード周りのケーブルが無くなって手元がすっきりしました。「カチャカチャ感」がないのが気になります(汗)が、まあそのうち慣れるでしょう。

f:id:shimooka:20160425171424j:image

後でAndroid端末にも繋げてみるか。。。

2016-04-12

[]ついにHHKBBluetooth版が発売!

ずーっと「あれば良いのに」と思っていたHHKB Bluetooth版がPFUから発売されることになったようです!

発売日は2016/04/22。PFUダイレクトAmazonショップで予約受付中です。

今のところ、色は墨のみ。英語配列・無刻印・日本語配列の3タイプ。

PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B

PFU Happy Hacking Keyboard Professional BT 英語配列/墨 PD-KB600B

PFU Happy Hacking Keyboard Professional BT 無刻印/墨 PD-KB600BN

PFU Happy Hacking Keyboard Professional BT 無刻印/墨 PD-KB600BN

PFU Happy Hacking Keyboard Professional BT 日本語配列/墨 PD-KB620B

PFU Happy Hacking Keyboard Professional BT 日本語配列/墨 PD-KB620B

速攻で予約しました。当然、英語配列です。到着が楽しみ!:-)

2016-03-03

[]Motorola Moto 360(1st Gen)にAndroid 6.0.1が降ってきた

久々のエントリですが、PHPネタではありません。

2nd Genがリリースされて陽の目が当たらなくなったMoto 360(1st Gen)ですが、TaskerAutoVoiceAutoWearのゴールデンコンビのおかげで個人的にはまだまだ現役です。以前よりも付ける時間が長くなり、仕事中はほぼつけっぱなしです。リューズ取れちゃったけど。。。

で、今朝もいつも通り腕につけてふと見ると、おや?Moto360のようすが・・・

f:id:shimooka:20160303121411p:image

カードを開いてみると。。。

f:id:shimooka:20160303121412p:image

おお!jugglyさんでアップデートされるらしいとあったけど半信半疑でした。ごめんなさい(汗)

会社に到着後、アップデートを実行。

f:id:shimooka:20160303114137j:image

f:id:shimooka:20160303114554j:image

待つこと5分。無事、Android 6.0.1(MEC23I)になりました。

ちょっといじってみるとメニューがちょっと変わったっぽいのでまとめておきます。

手首のジェスチャー

設定アプリから表示されるメニューに「操作」としてまとめられたようです。

f:id:shimooka:20160303130911p:image

ここに手首の操作の有効無効のスイッチがあります。また、チュートリアルを起動して一通りジェスチャーを確認できます。

f:id:shimooka:20160303130910p:image

にしても、腕を上げにやるのって結構難しくないのかな。。。

権限管理

新しく「権限」メニューが追加されています。

f:id:shimooka:20160303130908p:image

開いてみると、インストールされているアプリの一覧が表示されます。

f:id:shimooka:20160303130907p:image

アプリを選択すると権限の一覧が表示されるので、ここで権限の有効無効の切り替えを行えるようです。

f:id:shimooka:20160303130909p:image

2015-11-10

[]USB接続&フルHDモバイルディスプレイASUS MB169B+を買った

皆さんどんな環境で開発してます?

ノートPC単体?自作デスクトップデュアルディスプレイ?もしかして3枚?4枚?外部キーボード

自分の会社での環境は、15インチノートPC+お古のCinemaディスプレイデュアルディスプレイHHKBな感じです。片方のディスプレイターミナルエディタブラウザの開発ツールを開いてゴリゴリやって、もう片方にブラウザを広げっぱなしにして動作確認する感じにしてます。

で、諸々の事情で平日に自宅作業することがあるんですが、

  • 家にはホコリをかぶった17インチCRTしかない
  • まさか、リビングに持ってきて使うのもどうよ
  • 高さが全然違うし。。。

という状況なのでノートPC単体で使ってました。でも、ウィンドウが重なってしまって確認したい情報を同時に見られないのはさすがに効率が悪い。悪すぎる。

ということで、前から気になっていたASUS MB169B+を思い切って購入。

Amazonでちょうど3万円ぐらい。

ついでに、スタンドも購入。こっちは安いので充分。

ASUSの製品ページには本体800gとありますが、持った感じはそれよりも軽く感じます。15インチのタブレットからバッテリー抜いたような感じです。

PCとの接続はUSBなので超簡単。電源もUSBから供給なので余計なコード類はありません。PC側のUSBポート挿せばディスプレイドライバーがインストールされ、再起動したら何事もなかったようにデュアルディスプレイ化完了。

f:id:shimooka:20151110134646p:image

嫁さんが使っているMacBook AirでもASUSのサイトからディスプレイドライバーをダウンロードしてインストールすれば問題なく認識されました。

自分のノートPCに繋いだらこんな感じです。

f:id:shimooka:20151110114213j:image

f:id:shimooka:20151110114236j:image

使用感ですが、15.6インチワイドということもあり正面に据えるとちょうどいいサイズです。輝度は左側にボタンがあるのでそれで調整可能。淡い色の表現に難があるかな?という感じですが、コードを書く分にはあまり問題にはならないかと思います。

やっぱデュアルディスプレイ良いですね。これならもっと早く買っといても良かったかも。