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 で楽しいメモ環境をつくりましょう!