2014年12月6日土曜日

iPod nano 6th 押せなくなったスリープボタンを修理

iPodのボタンのクリック感が無くなった

「あれっ?クリック感が無い」、ことのはじまりはスリープボタンを押したときの感触の変化でした。

数日後「ボタンがへこんだまま戻らない」、まだこのときはボタンを強く押せば動作していました。

ところが次の日「ボタンを押しても反応しなくなった」「こまった! 修理せねば」となりました。

iPodの修理情報を収集

作業開始

先人の皆さんの情報を元に、分解していきます。

スリープボタン部分を分解すると、「黒い小さなポッチ」の位置がずれていました。見たところ、この「黒い小さなポッチ」がタクタイルスイッチのプランジャーの役割をしているようです。

タクタイルスイッチはプランジャーが円形板バネの中央部を押すと円形板バネが反転し、クリック感と接点の導通が確保される構造と思われます。そのため、プランジャーの押す位置が円形板バネの中央からずれてしまうと、円形板バネがうまく反転しなくなり接点が導通できなくなると考えられます。

一般的なタクタイルスイッチでは、スイッチの筐体が位置ガイドになってプランジャの位置がずれない構造になっているのですが、このiPodの場合は小さな本体に収めるための苦肉の策なのでしょうか、かなり強引な構造設計のように感じます。

スイッチの動作を回復するべく「黒い小さなポッチ」を両面テープで貼り付けてみました。ところが組み立てるときに位置がずれてしまうようでうまくいきませんでした。下の写真は両面テープが「ずれたり」「丸まったり」の試行錯誤中のときのものです。

数回の試行錯誤の結果、接着剤を使って「黒い小さなポッチ」を円形板バネの中央に固定する方法でうまくいきました。

使用した接着剤は「ロックタイトDPL-030」、ほんの少し粘度があるものです。接着剤が円形板バネの接点の中に入ると手の施しようが無くなってしまうので注意してください。スイッチの接点部では粘度の低いさらさらの瞬間接着剤の使用は避けましょう。

修理完了

スリープボタンの動作とクリック感が戻りました。先人の皆さんに感謝!

2014年12月5日金曜日

Firefox34.0がリリースされました。

デスクトップ版 Firefox のダウンロード
http://www.mozilla.jp/firefox/download/
デスクトップ版 Firefox のリリースノート
http://www.mozilla.jp/firefox/34.0/releasenotes/

12月01日に Firefox34.0 がリリースされました。

新機能ではリアルタイムコミュニケーションツール「Firefox Hello」 や、ブラウザテーマを簡単に切り替えられるカスタマイズ機能が追加されました。

また、Firefoxの起動時に 「Firefox は起動していますが応答しません」 のダイアログが表示された場合、「Firefox を閉じる」ボタンを押してFirefoxのプロセスを終了できるようになりました。(Windows Vista以降で対応)

さらに詳しく: Firefox は起動していますが応答しません | Firefox ヘルプ


リアルタイムコミュニケーションツール 「Firefox Hello」 については Firefox ヘルプ に使い方の説明があります。


テーマを切り替え

ブラウザのテーマとはFirefoxの外観のことを言います。Firefox34ではテーマを間単に切り替えられる機能が追加されました。

  • テーマを変更するには、メニューボタン、カスタマイズボタン、テーマボタンを順にクリックするだけです。テーマボタンをクリックするとテーマメニューが表示されるので、一覧から変更したいテーマを選択します。

    さらに詳しく: 簡単に見つけられるカスタマイズインターフェース

  • テーマメニューではインストールされたテーマの他に、おすすめテーマが表示されています。テーマ名をマウスオンするとテーマの概観をプレビューすることができます。また、テーマの削除や無効化などはアドオンマネージャで行います。 テーマメニューの管理ボタンが、アドオンマネージャへのショートカットボタンになっています。

    さらに詳しく: Firefox のテーマを使用するには | Firefox ヘルプ


そのほかの新機能の詳細はリリースノートをご覧ください。



デスクトップ版 Firefox の、開発ツールの更新と追加された機能のまとめ



WebIDE

WebIDE が有効になりました。WebIDEはブラウザ内やFirefox OS端末から、Webアプリケーションのテスト、デプロイ、デバッグをサポートするツールです。Webアプリの作成や、既存アプリのコードを開いたり編集が可能です。Firefox OSアプリ開発のためのFirefox OSシミュレータも提供されます。

さらに詳しく: WebIDE - 開発ツール | MDN



プロファイラ

「JavaScript プロファイラ」が改良されて、タブの名称が「パフォーマンス」に変わりました。

JavaScript プロファイラに加えて、フレームレートタイムラインが追加されました。フレームレートタイムラインは、プロファイルのサンプリング期間毎のブラウザの応答性を示します。

タイムラインには「目標フレームレート(常に60fps)」、「平均フレームレート」、「最小フレームレート」を表示します。

サンプリングプロファイラタイムラインでは、JavaScriptの処理の種類(「ネットワーク」、「JIT」、「GC」、「入力とイベント」、「グラフィック」、「ストレージ」、「Gecko」など)を色分けで表示します。

さらに詳しく: Performance - 開発ツール | MDN



ストレージインスペクタ

Webページが保存したデータを調査できます。対応しているストレージは Cookie, Local Storage, Session Storage, IndexedDBです。データは読み取り専用の状態で表示されます。

この機能を使うには、開発ツールのオプションで有効化します。 有効化するには開発ツールのオプションパネルから、「標準の開発ツール」の「ストレージ」のチェックボックスをオンにします。有効化すると開発ツールのタブに「ストレージ」が追加されます。

さらに詳しく: Storage Inspector - 開発ツール | MDN



iframe の切り替え

ツールの動作対象を、Webページ内の特定のiframeにします。

フレーム選択ボタンをクリックすると、Webページ内のiframeの一覧をポップアップ表示します。この一覧から選択すると、ツール(インスペクタ、コンソール、デバッガ)は選択したiframeを対象にして動作します。

この機能を使うには、開発ツールのオプションで有効化します。 有効化するには開発ツールのオプションパネルから、「利用可能なツールボックスのボタン」の「現在のドキュメントとして読み込むiframeを選択します」のチェックボックスをオンにします。有効化すると開発ツールバーにフレーム選択ボタンが追加されます。

さらに詳しく: iframe での作業 - 開発ツール | MDN



インスペクタ


jQuery イベント

イベントリスナが設定されている要素の横にevアイコンが表示されます。このアイコンをクリックすると、要素にアタッチされた全てのイベントリスナの一覧がポップアップで表示されます。Firefox 34 では、この一覧に jQuery イベントの表示機能が追加されました。


セレクタのハイライト

  • インスペクタの「パンくずリスト」にマウスオンすると、その要素をページ上でハイライト表示します。
  • インスペクタのルールビューやスタイルエディタでは、CSSセレクタをマウスオンすると、そのセレクタにマッチするすべての要素をページ上でハイライト表示します。


コンソール

console.table をサポート。データを表形式で表示できます。オブジェクトを表示するときは console.dir よりも表形式のほうが見やすくなりますね。

例えば、このようなオブジェクトの場合

var member = [
  {name:"Hnako", age:22},
  {name:"Taro", age:23},
  {name:"Keiko", age:25},
  {name:"Manabu", age:28}
];

オブジェクト全体をテーブルに表示
console.table(member);

カラムを指定(例:"name")して表示
console.table(member, "name");

カラム名をクリックするとテーブルをソートできます

さらに詳しく: Console.table - Web API インターフェイス | MDN

2014年11月26日水曜日

iPhone用ステレオマイク TASCAM iM2 をUSBマイクに改造

ドックコネクタ接続のマイクを改造してUSBマイクにする方法

ステレオマイク TASCAM iM2 は、iPhone や iPad、iPod touch 専用の製品なので接続インターフェースはドックコネクタ接続になっています。このドックコネクタ経由でやり取りされる信号線には アナログオーディオ、ビデオ、シリアル、FireWire、USB、電源などがあります。

TASCAM iM2 の場合

  • 製品内部では USB デバイスとして動作しているのではないだろうか?
  • さらに、TASCAM iM2 には充電用の USB コネクタが付いています。これを使えばドックコネクタ経由の USB 信号線を外部に引き出すことなく間単に USB 接続できそうだ!
この二つが改造アイデアに繋がっています。

この改造の元アイデアは TT@北海道 さんです。


はじめに接続ヶ所を確認

それぞれの資料から、USB データポートのピン番号を調査します。


USBデータポートのピンを確認

  • D+ : MCU 16 ピン、Dock connector 4 ピン、USB コネクタ 3 ピン
  • D- : MCU 17 ピン、Dock connector 6 ピン、USB コネクタ 2 ピン

電源ラインのピンを確認

USB コネクタのUSB 5Vは iPhone 充電用に使われており、TASCAM iM2 の動作電源は Dock connector 経由の3.3Vのようです。そのため、TASCAM iM2 を PC に USB 接続して動作させるには、この電源供給方法を Dock connector から USB に変更する必要があります。

  • 5V : USB コネクタ 1 ピン
  • 3.3V: Dock connector 13 ピン
  • GND : Dock connector 1 ピン

配線作業

それぞれの信号線の接続ポイントを確認後、配線作業を開始します。

  • USB コネクタ部 :USB 充電モード用の抵抗(D+,D-間の抵抗)を除去。
  • 電源部 :ツェナーダイオードと抵抗を取り付け。
  • USB データポート :D+,D-を UEW でバイパス。

今回の改造では、TASCAM iM2 の電源(3.3V)にツェナーダイオードHZ3C2 3.3Vを使用しました。iM2 の消費電力が90 mW、ツェナー電流5 mAから

抵抗Rは、$R=\frac{5V-3.3V}{5mA+27mA} = 53.125 \fallingdotseq 51\Omega$

改造完了後の実測では 3.4 Vになりました。

D+,D-の接続点は、TT@北海道 さんが改造されたのと同じように USB のダンピング抵抗に接続するのがいちばん作業しやすいです。


改造完了

TASCAM iM2 を Windows PC に接続して確認

使用環境:Windows7 64bit

USB 接続した iM2 を自動認識して、デバイスドライバがインストールされました。

デバイスマネージャで確認すると。USB オーディオデバイスとして認識されています。

実際にオーディオ入力として使ってみると USB マイクとして働いてくれています。

おまけに MIDI やスピーカが一緒についてきましたが、この機能は使うことができません。元々これらの入出力回路が iM2 に備わって無いので、追加回路無しでは使用できないと思われます。もしかすると他の製品ラインナップに同じ MCU を使った機種があるのかもしれませんね。

これで改造成功です、TT@北海道 さん、情報ありがとうございます。

2014年11月18日火曜日

lo_updateを使って LibreOffice4.3.4へ自動アップデート

LibreOffice 4.3.4

The Document Foundation より LibreOffice 4.3.4 のリリースがアナウンスされました。

さっそく、自動アップデートスクリプトlo_updateを使ってみました。

自動アップデートを実行

今回はインストールファイルのダウンロードも自動で行うので、オプション-gを付けて実行します。

lo_update -g 4.3.4

アップデート完了。

自動アップデートスクリプトは、うまく動いてくれています。

LibreOfficeの自動アップデートスクリプト lo_update はこちらの投稿に記載しています

cURL コマンドを使って LibreOffice を自動アップデート
http://babooshka-innerjourneys.blogspot.jp/2014/11/curl-lbreoffice.html

2014年11月12日水曜日

Firefox Developer Edition がリリースされました

Firefox Developer Edition は従来の Aurora を開発者向けにリニューアルしたもので、今回の Firefox のリリース10周年を記念してリリースされました。

Firefox Developer Edition のダウンロード
https://www.mozilla.org/ja/firefox/developer/
Firefox Developer Edition のリリースノート
https://www.mozilla.org/en-US/firefox/35.0a2/auroranotes/

Firefox Developer Edition の特徴

  • 独自のテーマ
    ブラウザ全体に適用された、開発者ツールのテーマデザイン。
  • 実験的な開発者ツール
    今回リリースの Valence のように、実験的な開発者ツールが含まれている。
  • 別プロファイル
    Developer Edition では別プロファイルが作成されるので Firefox のリリース版やベータ版と同時使用できる。
  • Web開発者向けの設定
    使う前にプラグインやアプリケーションをインストールしなくても、すぐに使えるように必要な機能は設定済み。

今回のリリースでは「Valence」と「WebIDE」が統合されています。

Valence

ValenceはFirefoxの開発ツールが、他のブラウザが提供しているリモートデバッグプロトコルに接続して開発やデバッグができるようにする機能の実験的なツールです。デスクトップ版とAndroid版のChrome、iOS版のSafariに対応しています。

この機能は、これまで「Firefox Tools Adapter」アドオンとして開発されていた機能が、今回の Firefox Develoepr Edition に統合されたようです。

さらに詳しく: Valence (Firefox ツールアダプタ) - 開発ツール | MDN

WebIDE

WebIDEはブラウザ内やFirefox OS端末から、Webアプリケーションのテスト、デプロイ、デバッグをサポートするツールです。アプリファイルの編集も可能になりました。アプリマネージャ(App Manager)の後続品として機能が拡張されています。

さらに詳しく: WebIDE - 開発ツール | MDN

他にも Firefox Develoepr Edition には、「インスペクタ」、「Web コンソール」、「デバッガ」、「スタイルエディタ」、「プロファイラ」、「ネットワークモニタ」、「レスポンシブデザインモード」、「Web Audio エディタ」などの開発ツールがすべて含まれています。



Firefox Develoepr Edition のテーマを切り替える

起動直後には、このようなページが表示されます。

このページの左下には、 「昔の見た目に戻すにはFirefox Aurora の見た目に戻すのは、とても簡単です。  詳しくはこちら」 と表示されていますが、
このリンク(developer.mozilla.org/Firefox/Developer_Edition/Reverting)をクリックすると、
このページ(developer.mozilla.org/ja/Firefox/Developer_Edition/Reverting)にリダイレクトされてしまい 404 Not Found が表示されます。(既に修正されています。)

これは日本語ページが未だ作成されていないことによるものだと思います。そこでページ右下の「他の言語」からEnglishを選択すると、
英語のページ(developer.mozilla.org/en-US/Firefox/Developer_Edition/Reverting)が正しく表示されます。


Firefox Develoepr Edition のテーマを通常のFirefoxのテーマに切り替えるには

  • メニューを開き「カスタマイズ」をクリック。
  • 「Use Firefox Developer Edition Theme」をクリック。
  • 「カスタマイズを終了」をクリック

開発ツールのテーマの変更は、 開発ツールのオプションを開き 「開発ツールのテーマを選択」セクションで「Light theme」を選択します。

Firefoxのリリース10周年を記念したリリース Firefox33.1

Firefox33.1がリリースされました

デスクトップ版 Firefox のダウンロード
http://www.mozilla.jp/firefox/download/
デスクトップ版 Firefox のリリースノート
http://www.mozilla.jp/firefox/33.0/releasenotes/

今回のリリースは Firefox のリリース10周年を記念したリリースです。

新機能では「忘れるボタン」の追加や「タイルの拡張」、検索エンジンに「DuckDuckGo」が追加されました。

更新が完了するとFirefox33.1のプライバシーツアーが表示されます。今回は、Firefox33.0.3からアップデートしたので、このURLが表示されました。

プライバシーツアーのページでは、「忘れるボタン」や「匿名検索エンジン DuckDuckGo」、「プライベートブラウジングボタン」のガイドを見ることができます。

  • ツアーのスタート

  • 「忘れるボタン」

  • 「匿名検索エンジン DuckDuckGo」

  • 「プライベートブラウジングボタン」

2014年11月6日木曜日

curl コマンドを使って LibreOffice を自動アップデート

前回の「LibreOffice のアップデート用スクリプト」を少し改良して、ファイルのダウンロードも自動化できるようにしてみました。ファイルのダウロードには curl コマンドを使っています。



Windowsでcurlを使う

curl コマンドを Windows で使えるように準備をします。

公式サイトの Download ページからインストールファイルをダウンロードします。

Win64 - GenericセクションのWin64 2000/XP x86_64 MSIのリンクをクリックすると、Windows バイナリの配布サイト cURL for Windows に移動します。ここで、使用環境に合わせてインストールファイルをダウンロードします。私の場合、使用環境が Windows 7 professional 64 bit SP1 なので curl-7.38.0-win64.msi をダウンロードしました。

ダウンロード完了後 msi インストーラを実行して curl をインストールします。インストール時に PATH が自動設定されます。

インストールが完了すれば curl コマンドを使えるようになります。例えば、mozilla.jp のコンテンツを取得するには、このように入力します。

curl www.mozilla.jp/

curl コマンドの使い方は cURL - Manual (マニュアル日本語訳) に詳しく書かれています。



LibreOffice の自動アップデートスクリプト


使い方

バッチファイルの保存場所は、前回と同じフォルダ(c:\lo_tmp)を使って説明します。

  1. 下記のコードをファイル名lo_update.batで保存します。(例 保存フォルダc:\lo_tmp

  2. スタートメニューのコマンドプロンプトを右クリック、「管理者として実行」で起動。

  3. lo_update.batの保存フォルダへ移動。(例 cd c:\lo_tmp

  4. バッチファイルを実行
    (例 LibreOffice 4.3.3 をダウンロード後アップデートする場合は
    lo_update -g 4.3.3を入力。)

  5. 「メインインストーラ」のインストール結果の確認ダイアログが表示されます。

  6. 「日本語の LibreOffice 組み込みヘルプ」のインストール結果の確認ダイアログが表示されます。

  7. アップデート完了しました。

インストール結果はカレントフォルダのログファイルに書き込まれます。

  • 「メインインストーラー」のインストールログファイルはlogfileMain.txt
  • 「日本語の LibreOffice 組み込みヘルプ」のインストールログファイルはlogfileHelppack.txt

このバッチファイルでは、「メインインストーラー」と「日本語の LibreOffice 組み込みヘルプ」のインストール結果だけをダイアログ表示するようにしています。

サイレントインストールする場合は、「INSTALL」セクション(114行目~)のmsiexec.exeのオプションを、/qn+から/qnに変更すれば OK です。

インストールに指定できるファイルバージョンは、LibreOffice の安定版 Index of /libreoffice/stable で公開されているリリースバージョンを利用できます。現在(Nov 06, 2014)指定可能なものは4.2.7,4.3.2,4.3.3(Nov 06, 2014 現在)です。このディレクトリで公開されているファイル構成はリリースの都度に更新されていて、新しいバージョンが追加されると古いものは削除されるようです。また、何かの都合でダウンロードサイトの URL に変更があった場合は、スクリプトの修正(20 ~ 35 行目)で対応する必要があります。

ご注意!:コマンドプロンプトのデフォルトのエンコードは「シフト JIS」なので、バッチファイルの保存時のエンコードも「シフト JIS」で保存しないと表示が文字化けします。

lo_update.bat

2014年10月31日金曜日

LibreOfficeのアップデート用スクリプト

LibreOffice 4.3.3 がリリースされました。

LibreOffice のインストールやアップデートでは「メインインストーラー」と「日本語のLibreOffice組み込みヘルプ」の2つのファイルをインストールする必要があります。

そこで、毎回のアップデート作業の手間を減らすために、簡単なスクリプトを書いてみました。バッチファイルの引数にインストールするLibreOfficeのバージョン番号を与えるだけでアップデートできます。



使い方

あらかじめ「メインインストーラー」と「日本語のLibreOffice組み込みヘルプ」をダウンロードしておきます。保存フォルダはバッチファイルと同じ場所にします。(例 保存フォルダc:\lo_tmp

LibreOffice最新版のダウンロード
http://ja.libreoffice.org/download/libreoffice-fresh/

  1. 下記のコードをファイル名lo_update.batで保存します。(例 保存フォルダc:\lo_tmp

  2. スタートメニューのコマンドプロンプトを右クリック、「管理者として実行」で起動。

  3. lo_update.batの保存フォルダへ移動。(例 cd c:\lo_tmp

  4. バッチファイルを実行

    (例 LibreOffice 4.3.3 にアップデートする場合はlo_update 4.3.3を入力。)

  5. 「メインインストーラー」のインストール結果のダイアログを表示。

  6. 「日本語のLibreOffice組み込みヘルプ」のインストール結果のダイアログを表示。

  7. アップデート完了

インストール結果はカレントフォルダのログファイルに書き込まれます。

  • 「メインインストーラー」のインストールログファイルはlogfileMain.txt
  • 「日本語のLibreOffice組み込みヘルプ」のインストールログファイルはlogfileHelppack.txt


LibreOffice アップデートスクリプト

このバッチファイルでは、「メインインストーラー」と「日本語のLibreOffice組み込みヘルプ」のインストール結果だけをダイアログ表示するようにしています。

サイレントインストールする場合は、「INSTALL」セクション(45行目~)のmsiexec.exeのオプションを、/qn+から/qnに変更すればOKです。

ご注意!:コマンドプロンプトのデフォルトのエンコードは「シフトJIS」なので、バッチファイルの保存時のエンコードも「シフトJIS」で保存しないと文字化けします。

lo_update.bat

Nov 9, 2014 追記:
ダウンロードも自動化してみました。「 cURL コマンドを使って LibreOffice を自動アップデート

2014年10月22日水曜日

Firefox33.0がリリースされました。

デスクトップ版 Firefox のダウンロード
http://www.mozilla.jp/firefox/download/
デスクトップ版 Firefox のリリースノート
http://www.mozilla.jp/firefox/33.0/releasenotes/

先週の10月14日に、Firefox33.0がリリースされました。

新機能では、OpenH264 Video Codec plugin が同梱されるようになりました。セッション情報の保存方法が改良されてセッション復元機能の信頼度が向上しました。新機能の詳細はリリースノートをご覧ください。



セッション情報のバックアップフォルダ

Firefox のプロファイルフォルダに、sessionstore-backupsフォルダが新たに追加されました。セッション情報のバックアップは、このフォルダに保存されます。バックアップは少なくとも15秒間隔で書き込まれます。これらのファイルは、すべてJSON 形式です。<さらに詳しく>



プロファイルフォルダに作成されるファイル

  • sessionstore.js : このファイルには最新のシャットダウン中のFirefoxの状態が含まれています。ただし、Firefoxがクラッシュした場合にはこのファイルは存在しません。


sessionstore-backups フォルダに作成されるファイル

  • recovery.js : ユーザーの操作またはスクリプトが必要とするたびに、セッションを復元するための情報をこのファイルに書き込みます。 "recovery.js" には15秒以内の古い状態が含まれています。

  • recovery.bak : 前回の正常な "recovery.js" のバックアップが書き込まれます。 "recovery.bak" は30秒以内の古い状態が含まれています。

  • previous.js : 前回のシャットダウンが成功した時の状態が書き込まれています。 Firefox は起動時に "sessionstore.js" が有効な場合、その内容を "previous.js" に書き込みます。

  • upgrade.js-[build id] : 最新の更新後の Firefox の状態が書き込まれています。 Firefox は更新後の最初の起動時に "upgrade.js-[build id]" に、 "sessionstore.js" の内容を書き込みます。



デスクトップ版 Firefox の、開発ツールの更新と追加された機能のまとめ



インスペクタ


イベントリスナのポップアップ表示

イベントリスナが設定されている要素の横にevアイコンが表示されるようになりました。このアイコンをクリックすると、要素にアタッチされた全てのイベントリスナの一覧が表示されます。この一覧は、ファイル名と行番号、イベントの伝搬フェーズや、定義されたイベントの DOM レベルを表示します。

一覧の「一時停止アイコン」をクリックするとデバッガーに切り替わりイベントリスナに移動します。「ファイル名と行番号」の部分をクリックするとポップアップでリスナ関数を表示します。


新しいルールを追加

インスペクタで選択中の要素に新しいルールを追加できます。CSS ペインのルールビューのコンテキストメニューから、「ルールを追加」をクリックすると選択中の要素にマッチしたセレクタが追加されます。今回からルールの追加の他に、セレクタの編集も可能になりました。


@keyframes の編集

インスペクタのルールビューに、CSS アニメーションの@keyframesの表示が追加されました。ブラウザで動作を確認しながら内容を編集することができます。


3次ベジェ曲線エディタ

animation-timing-function プロパティの 3次ベジェ曲線cubic-bezier(x1,y1,x2,y2)を視覚的に編集できるようになりました。3次ベジェ曲線のコントロールポイント P1、P2 をマウスで操作して動作タイミングを設定できます。


Transform のオーバーレイ表示

インスペクタのルールビューで Transform で変形した操作を、要素自身にオーバーレイ表示するようになりました。 以前のツールチップ表示からオーバーレイ表示になったことで、要素の変形の状態を、より確認しやすくなりました。これを確認するには、ルールビューで transform プロパティにマウスカーソルをポインタを載せます。



スタイルエディタ


@mediaサイドバーが追加されました。

スタイルシート中の @media 規則が、サイドバーに表示されるようになりました。選択中のスタイルシートに @media 規則が含まれている場合、このサイドバーに一覧が表示されます。サードバーの右端の数字は、定義されている行番号へのリンクになっています。サイドバーの一覧の中で現在適用されていないものはグレーアウトで表示されています。



デバッガ


ミニファイされたソースをブラックボックス化

min.js拡張子を持つソースは自動的にブラックボックス化されます。デバッガのオプション設定メニューでこの機能を無効にすることができます。



オプションパネル


詳細な設定

ツールボックスのオプションパネルで、「詳細な設定」セクションの「キャッシュを無効」のチェックボックスをオンにすると、ツールボックスの使用中はブラウザキャッシュが無効化されます。

今まではツールボックスを開くたびにキャッシュが有効に戻りましたが、今回からチェックボックスの状態を保持するようになりました。また、通常のブラウジングでは、この設定にかかわらずツールボックスを閉じるとブラウザキャッシュは有効化されます。


エディタ設定

ツールボックスのオプションパネルに「エディタ設定」が追加されました。タブやインデントの設定、閉じ括弧の自動入力などの設定ができます。

キーバインドの設定は、Vim,Emacs,Sublime Textの選択が可能です。



レスポンシブデザインビュー


ビューポートサイズ

ビューポートサイズの値を直接編集できるようになりました。これによって独自の寸法設定ができるようになりました。



開発ツールバー (Shift+F2)


新しいコマンドが追加されました。

  • folder : >> folder open [path]
    引数の [path] フォルダをエクスプローラで開きます。

    Firefox のプロファイルフォルダを開く場合は>> folder openprofileを使うと簡単です。

  • highlight : >> highlight [selector] [options]
    引数のセレクタ [selector] にマッチするすべてのノードをハイライト表示します。

    ハイライトの消去は>> unhighlightです。

    使用できる [options] の一覧

    • --keep : ハイライト状態の固定

    • --fill <string> : <string> で指定した色でマーク。

    • --hideguides : ハイライトした要素のガイド線を非表示にする。

    • --region <selection> : ボックスモデルをハイライトします。 <selection> には "content","padding","border","margin" が使えます。

    • --showinfobar : ハイライトした要素の情報を表示します。(タグ名と属性とサイズが表示されます。)

  • inject : >> inject <library> または>> inject <url>

    jQuery などのライブラリをページに挿入します。

2014年10月8日水曜日

TiddlyWikiにファビコンを追加する

TiddlyWiki

お気に入りメモツールの TiddlyWiki は、お気に入りのブラウザ Firefox を起動すれば何時でも使えるように「タブをピン留め」して使っています。 Firefox ではタブをピン留めするとファビコンだけの表示になります。

( 追記:Dec 22, 2014
  現在は最新版の TiddlyWiki5 と区別するため、 TiddlyWiki Classic と呼ばれています。
  http://classic.tiddlywiki.com/ )

ファビコンが無い場合、Google Chrome や IE では代替のファビコンが表示されるようですが、Firefox ではファビコンの無いものは表示してくれません。そのような訳でファビコンの無い TiddlyWiki は「のっぺらぼう」でなんだか寂しいです。



TiddlyWiki にファビコンを追加しよう

この方法は Firefox だけで使えます

ファビコンを指定する link 要素は head 要素の中に記述することになっているので、追加する場合は TiddlyWiki の HTML を直接編集するか、ファビコン表示用のマクロを書かなければなりません。ところが Firefox で TiddlyWiki を使う場合は、以下の方法でファビコンを追加することができます。

  1. favicon.ico を作る
  2. TiddlyWiki のカレントフォルダに favicon.ico を保存
  3. 「MainMenu」tiddler にコードを追加

コードを追加する tiddler は「MainMenu」tiddler で無くても良く、起動時に常に読み込まれる tiddler なら問題ないと思います。それでは手順を説明します



マルチアイコン favicon.ico を作る

元になる画像を作る

ImageMagickconvertコマンドを使い、テキストデータから画像ファイルfavicon.pngを作ります。今回は「TW」の文字を使って画像を生成します。

Windows のコマンドプロンプトで実行

convert -font Consolas -pointsize 48 ^
    -interline-spacing -35 ^
    -kerning -2 -crop 56x52+0+0 ^
    -background lightblue -fill black ^
    -bordercolor black -border 1 ^
    label:"T\n W" ^
    favicon.png

元画像からマルチアイコンを作る

次に、出来上がった画像ファイルfavicon.pngを元にして、マルチアイコンファイルfavicon.icoを生成します。

convert favicon.png ^
    -bordercolor white -border 0 ^
    ^( -clone 0 -resize 16x16 ^) ^
    ^( -clone 0 -resize 32x32 ^) ^
    ^( -clone 0 -resize 48x48 ^) ^
    ^( -clone 0 -resize 64x64 ^) ^
    -delete 0 -alpha off -colors 256 favicon.ico

これでfavicon.icoができあがりました。



TiddlyWiki のカレントフォルダに favicon.ico を保存

ファビコンを追加したい TiddlyWiki のカレントフォルダに favicon.ico ファイルを保存します。



「MainMenu」tiddler にコードを追加

TiddlyWiki の「MainMenu」tiddler に、次のコードを追加します。

<html>
<link rel="shortcut icon" href="./favicon.ico">
</html>

これで完了です、TiddlyWiki のファビコンが表示されています



もうひとつの方法:データURIスキームを使う

この場合は tiddler への追記だけでOKです。この方法の良い所は、参照用のfavicon.icoファイルをカレントフォルダに設置しなくて済むことです。

link の中に、予め Base64エンコードしたfavicon.icoを、テキストデータとして記述します。

こんなかんじです

<html>
<link href="ここにエンコード済みテキストデータを挿入" rel="shortcut icon" type="image/png">
</html>


画像ファイルを Base64エンコードするには

Firefox のインスペクタを使います。

  1. アドレスバーにabout:blankを入力。
  2. 開いたページにfavicon.icoファイルをドロップすると、ページにファイルの画像が表示されます。
  3. Firefox のインスペクタを起動 Ctrl+Shift+C
  4. favicon.ico画像を選択。
  5. インスペクタのfavicon.icoの行のコンテキストメニューから「画像のデータURIをコピー」を選択。
  6. エディタにペーストすると Base64エンコード済みのテキストデータが得られます。

得られた画像のテキストデータを上記のコードに挿入すると、このようになります。

<html>
<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADIklEQVQ4jXWTX0xTdxzFf5mPC2wlkxlRprK9DIJbMrPgRpxLnC+LybLF8AAyspk9sIcpGoYKtmXQqUXEODPHjKUq0N723rb38r/Iyv49LGFsgGBLaQFbCoWKGboMk3320KzaLHs4j+eTk/P9HvHRyXoudg9jlvsxK/2ck/swKwM0ubyYbBqGNgmj1YnR6khJb5Ew2TQqagwIvUWiWb3FFzcUzjp6MCsDmDpV6m/IXP1+lJ7IGlr4HtrsakpqKIE3vo7JpiEqG8+TV7CTTbnbyHhWx1MbNpCz40WeyXqO8urTdM3dxzY2i3T7bkr28TnUUAK9RUIYrU608D28S39RXl3H81tfQA0lUAKLOKei2CfmcU5F0yRNzOOZWcFodSCMVgeemWX6Y39SdvwU2TlbcQfjOCYjuKbj9EbX0syOyQiyP8ZQ4m+MVmcS4A4u07fwkLJjSYArsIQ7GOfK0C9UNV9JM7uml2gdHqH22w70FvvjBH1PJFD8MXoif3Cq9SaZuiw6fw8j+2PYxsL0RNb4/KtrbH+5gPrr8v8AAotos6ucdfai25iN5edxPKEV3ME4vdEHfHbuEvm7ijgjdT8BWHjIoeO1ZG/JxRVYRA0luNT3Ixm6LFp9I3T8NkPDTReD8UccrmvklTffwqz0p5dYWnWSjZu34JpOdnDtpzGezsjk6g+jHGm6jBACdzBOeXUdRfvf5bxn8F/ACr3RB3xc20BefiGu6SWUwCLtvwbJ1GXR0uVj38FShBAY2iRKq07w9vslXNC+SwK02VUckxHs43N0jM7gnIoi31lAmphn8/Y8KhubeW3vPt4pKWPPgQ947/CnHKj4hIvdw48B0u27yHcWUPyx1Nlkf4yC13ez84097C85RKtvhJwdL1G4u5gPq08nE+gtEmoogX18LvmqE/Opd/WEVni1eC9CCI61fIM3vk5hUTFCCI40XcasDCBMNg1vfB01lPjPYAaXH3Gw8ij5u4qwjYXx3YcTX1vZlLuNli4fF7QhREWNAZNNQ2+R0iZrtDowtDloaHfzpb2L+usyhjaJhnY3pk6VM1I3FTUG/gEHGNeMoFv3zwAAAABJRU5ErkJggg==" rel="shortcut icon" type="image/png">
</html>

このコードを、TiddlyWikiの「MainMenu」tiddler に追加すれば完了です。



さらにもうひとつの方法: MarkupPreHead tiddler を使う

さらにもうひとつ TiddlyWiki の MarkupPreHead tiddler を使う方法がありました。この tiddler に書き込むと TiddlyWiki HTML ファイルの<head>要素の中に、書き込まれた内容が挿入されるようになっています。

MarkupPreHead は shadow tiddler なので tiddlerリストの Shadowed タブの中に表示されます。

MarkupPreHead tiddler を開いて追記します。

<link rel="shortcut icon" href="./favicon.ico">

データURIスキームを使う場合も同じ箇所に挿入すればOKです。

TiddlyWiki を保存して再読み込みすると MarkupPreHead tiddler に書き込んだ内容が TiddlyWikiHTML ファイルの<head>要素に挿入されます。Firefox のインスペクタで確認すると、このように挿入されていることがわかります。

これでファビコンが表示できるようになりました。

この方法では Firefox と Google Chrome でファビコンの表示ができましたが、 IE はダメでした。



オリジナルのファビコンを作りたい

もっと簡単にファビコンをデザインしたい場合は、オンラインで作れるウェブサービスが幾つかあります。例えばこんな所favicon.ico Generator

あなたのTiddlyWikiに、オリジナルファビコンを作ってみてはいかがですか。

Firefox & TiddlyWiki で楽しいメモ環境をつくりましょう!