NotePad++ で HTML の特殊文字をエスケープ

HTML のソースコードのように文字

& " < >

を含むものを HTML の文書に載せるときは実体参照に変換する必要がある。

• HTMLエスケープ（HTMLエンコード）ツール | Diaspar Journal

を使って変換したり、Ruby で HTML の特殊文字を実体参照に変換 したりすればいいけれど、NotePad++ を使っているなら、

1. 対象文字列を選択
2. メニューより TextFX > TextFX Convert > Encode HTML (&<>”)

これにより変換された文字列を AutoHotkey で Windows Live Writer に ソースコード を貼り付ける。

CSS で画像と文字を揃える

リストのマーカーを画像に設定

HTML で以下のリストを書いた。

<ul id="list0">
	<li>hoge</li>
	<li>piyo</li>
	<li>fuga</li>
</ul>

このリストの各項目の前にマーカーとして画像(star.png) を付けるには CSS で以下のように指定。

#list0 { 
	list-style-image: url("star.png"); 
	list-style-position: inside;
} 

これにより右図のように表示される。

• list-style-image
• list-style-position
• 12.5.1 Lists: the 'list-style-type', 'list-style-image', 'list-style-position', and 'list-style' properties

 

リスト項目の背景画像を設定

上記だとマーカーの中心に文字の位置を合わせられないので、マーカーをリスト項目の背景画像として設定。

#list0 li { 
	list-style: none;
	background: url("star.png") no-repeat top left;
	padding: 15px 0px 15px 60px;
} 

文字が真ん中に位置するように padding で上下の間隔を調整する。

• list-style
• background
• padding

 

画像と文字を揃える

要素を垂直方向において中央で揃える

上記のようにリストではなく、画像と文字の位置を垂直方向に真ん中で揃えたい場合は vertical-align を使う。

<img src="star.png" style="vertical-align:middle;" />
<span >hoge piyo fuga</span>

 

• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties

 

要素を水平方向において中央に配置

ところで、水平方向において要素を中央に配置したい場合は text-align を利用。

適用される対象は、

Applies to: block-level elements, table cells and inline blocks

(16.2 Alignment: the 'text-align' property より)

div 要素の子要素として画像を配置。

<div style="text-align:center;">
  <img src="star.png" />
</div>

または、display と 要素をセンタリング するための margin の設定を併用し、

<img src="star.png"      style="display:block; text-align:center; margin:auto;" />

 

text-align と vertical-align

しかし、不思議なのは要素を中央に配置するのが text-align であって、なぜ horizontal-align ではないのだろう？ vertical-align と意味的に対になるなら horizontal-align の方が忘れにくいのになぁ。

CSS1

仕様を見ると Cascading Style Sheets, level 1 では、Text properties 節に各々含まれている。

• 5.4         Text properties
• 5.4.4         'vertical-align'
• 5.4.6         'text-align'

CSS2.1

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification では、別々の節に分かれて説明されている。

• 9 Visual formatting model
• 10 Visual formatting model details
• 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties
• 16 Text
• 16.2 Alignment: the 'text-align' property

あ～ (+_+) 、HTML, CSS どちらもまともに仕様書読んでないなぁ。。

 

参考サイト

• 小粋空間: リストマークの画像のずれを修正する
• imgのvertical-align ::: CSS（マークアップ）::: 0から目指すWebマスター

Firefox のアドオン Tab Mix Plus で、タブに色付けし、未読と現在アクティブなタブを目立つようにすることで視認性を向上

1. 現在アクティブなタブと、未読のタブを、すぐに把握したい

Aging Tabs via kwout

Aging Tab は、開いたまま読んでいないタブの色を、徐々に変化させる Firefox のアドオン。以前は、このアドオンを利用して、未読のタブを目立たせ、視認性を向上させようとした。

Tab Mix Plus via kwout

しかし、しばらく使った結果、自分の場合、そこまでする必要はなく、

1. 「現在アクティブなタブ」
2. 「未読のタブ」

の二つが目立てば十分だと感じた。

 

2. Tab Mix Plus における、タブの色の設定

Tab Mix Plus の設定より

• 表示 > タブ > ハイライト

における「現在のタブ」「未読のタブ」にチェックを付け、「スタイルをカスタマイズ」ボタンを押す。

「現在のタブ」は背景色を薄い黄色に設定。

---

訂正(2011.1.1)： 「現在のタブ」は背景色を薄い赤色に設定を変更した。

理由は、自分の場合、本や資料を読むとき、４色ボールペンを使い、アンダーラインを付けながら、内容を把握する。このとき、赤色を一番重要な色として使用している。

開いているタブを見て、目的のタブを探すとき、圧倒的に、現在アクティブなタブがどれなのか把握したいことが多い。そのため、現在のタブを赤色にして、目立つようにした。

色々な情報ツ－ルを使っている場合、ツール間で、自分にとって、同じような意味づけ、アナロジーを利用すると、認識がしやすい。このことは、Dexpot を使い、ウィンドウを操作するホットキーを設定するときにも感じた。

---

「未読のタブ」は背景色を薄い水色に設定。

これで以下のように複数タブを開いても何がどこにあるのか把握しやすくなる。

 

3. プログレスバーを非表示にして、不必要な情報を見えなくする

ついでに、新しく開いたタブが読み込み中だと、プログレスバーが表示されて気が散る。これを表示させないように、先ほどの表示設定の画面で「プログレスメーターを表示」のチェックをはずした。

 

無意識に認識してしまう情報量が多いと、ストレスになるので、見える範囲はなるべくシンプルに保つことを心掛けることにした。

 

4. 不必要なタブは、消し、必要な情報のみ開いておく

以前から、Tab Mix Plus には、タブの色設定があることを知っていた。しかし、自分にとってそれほど重要な機能だと思ってなかった。

複雑なものを、複雑なまま瞬時に把握できれば、それに越したことはない。しかし、年齢とともにシンプルなものを好むようになり、必要ないものはどんどん捨てる。タブもたくさん開いた後、目的に合わせては消し、必要ないものは別ウィンドウへ移動させながら情報を消化する。

• 追記(2011.1.1) : cf. Firefox 4 の「タブのグループ分け」 (Panorama) を多用するようになった

そんな自分の部屋は、結構ぐちゃぐちゃで、捨て切れないものが乱雑に散らかっている。なんとかならいかなぁ。 ^^;

 

関連記事

• 複数のタブを飼い馴らすためのアドオン
• タブプレビューによるタブの切り替え

PHP で半角カナを全角に変換する

Gmail で半角カナを入力して送信すると、

全角カナに変換される。

PHP で上記のような変換をする関数は mb_convert_kana 。第2引数のオプションの指定により様々な変換に対応している。

例えば、以下のような変換をしたいとする。

K  「半角カタカナ」を「全角カタカナ」に変換します。

V  濁点付きの文字を一文字に変換します。"K", "H" と共に使用します。

( PHP: mb_convert_kana - Manual より )

echo mb_convert_kana("本日haセイﾃﾝﾃﾞｽ", "KV", "utf-8");

結果は、

本日haセイテンデス

ただし、第3引数のエンコーディングを指定しないと変換されなかった。

 

参考サイト

• "42": mb_convert_kana()で全角半角などが変換できない

Firefox のアドオン HTTP Resource Test でリクエストを送信

Telnet で HTTP メソッドをリクエスト

Telnet で HTTP メソッドをリクエストするには、コマンドラインで

telnet ホスト名 80

としてホストに接続してからリクエストを送信する。 ( cf. telnetでブラウズ(HTTP) )

Windows Vista で標準の Telnet クライアントを使うには、

[コントロールパネル] - [プログラムと機能] へ進み、左側に表示されるタスクから「Windows の機能の有効化または無効化」を選択し、「Telnet クライアント」にチェック

(へーいち の うぇぶろぐ | Windows Vista で TELNET コマンドを使う より)

Telnet を起動したら ? , set ? などで利用できるコマンドを確認。

 

Firefox のアドオン HTTP Resource Test

Firefox を使っているなら、アドオン HTTP Resource Test を使うと Telnet でリクエストを送信するときのようにできる。

アドオンをインストールしたら、メニューより 「ツール > HTTP Resource Test」 を選択。

例えば、フォームから POST メソッドでリクエストを投げるのと同様の動作をさせたい場合は、

1. Resource の URI に POST 先のアドレスを入力
2. Method で POST を選択
3. Client Request の Representation に 「パラメータ値=値&パラメータ=値&…」 を入力
4. Content-Type で application/x-www-form-urlencoded を選択
5. Submit ボタンを押す

 

Firebug でリクエストのパラメータと値を取得

上記の Client Request における「パラメータと値」は、予めブラウザでフォームの入力と送信をしておくと楽。 フォームでリクエストする前に Firebug を起動。リクエストを送信したら、

1. 「接続」タブにおいて POST 先の URL に相当する部分をクリックして展開
2. POST タブ内の「パラメータ」の下にある「ソース」に書かれている「パラメータと値」に対応したテキストをコピー

この値を上記で利用する。

 

その他

• Web アプリケーションのセキュリティー: 脆弱性をテストする

Google Chrome で特定のドメインにおいて JavaScript を切る

Firefox でスクリプトの実行を管理する NoScript と同様の拡張機能を Google Chrome で探したけれど見当たらなかった。標準の機能で JavaScrip の実行を切ることに。

 設定 > オプション > 高度な設定 > コンテンツの設定 > Javascript > 例外 で Javascritpt を実行したくないドメインを指定して「処理」をブロックにする。

パターンの指定は、

Click Exceptions on any tab to customize how resources for particular websites should be handled. In the "Pattern" field, you can enter hostnames and IP addresses, as well as specific domain masks (e.g. enter [*.]google.com to match everything from google.com and www.google.com, but not othergoogle.com).

( Images, JavaScript, and other web content settings : Security settings - Google Chrome Help より)

特定のページではできないようだ。

ところで、上記のように JavaScript を切ったサイトでは拡張機能 Auto-Reload が機能しなかった。Chrome では JavaScript が密接に絡んでいるのだろうか？

Web Developer - Google Chrome 拡張機能ギャラリー にも次のように書かれている。

‘Disable JavaScript’ is not possible to implement with the current Google Chrome APIs. Please star this bug and hopefully the APIs will be updated

Google Chrome で特定のページをオートリロード - Auto-Reload

1. JavaScript によるオートリロードで、CPU の負荷が急上昇

Google Chrome で JavaScript によって、オートリロードしているページを見ていたら、CPU の負荷が上昇。HDD へのアクセスが頻繁になり、PC がウィーーーンと唸った。

当該サイトで用意されている、オートリロードの機能を使わず、Chrome の拡張機能を利用する方法に切り替えることにした。

 

2. Auto-Reload で再読み込みを自動化

Auto-Reload は、特定のページで一定時間したら再読み込みしてくれる拡張機能 。

Auto-Reload - Google Chrome 拡張機能ギャラリー via kwout

インストールするとロケーションバーの右隅にアイコン が表示される。これをクリックすると色が緑になり そのページのみが一定時間経過したら自動でリロードされるようになる。

時間の設定は、上記アイコンを右クリック > オプション で以下のページより設定。

タスクバーでマウスホイールによって音量を調整 – Tray Volume

PC で音楽を聴いたり、Skype でチャットしたり、Ustream で動画配信を見たり。最近は時に応じて音量を調整する場面がしばしば。音量を変更するときは、

1. タスクトレイに表示されたサウンドのアイコン をクリック
2. マウスホイールで音量を調整

という手順を踏む。

面倒くさがりやの自分にしてはこの操作を多用するにも関わらず、これまで疑問を持たずに何度も繰り返してきた。ワイド画面のディスプレイに変更してから、特にタスクトレイのアイコンが相対的に小さくなり、アイコンにマウスポインタを合わせるのがストレスでしょうがない。 iPhone や iPad が小さなディスプレイに特化した UI を採用するのと同じように、大きな画面もそれに合わせた UI があってしかるべきだと感じる今日この頃。

 

Tray Volume

Tray Volume を使うと、上記の 手順1 にかかる負担を限りなく 0 へ近づけることができる。 Tray Voume 起動するとタスクトレイにアイコン が表示されるので、

1. そのアイコンを 右クリック > オプション... を選び、
2. 「操作」タブ > マウスホイールにおいて、タスクバーを選択する。

これで何も考えず素早くタスクバーにマウスポインタを移動させ、マウスホイールで音量を調整できる。

 

音量の表示

タスクトレイのアイコンを右クリック > スキン > AeroDegital を選択すると、小さいながら音量が アイコンに表示されるので見やすくなる。

Haskell の GHC で拡張を使うためのオプションとプラグマの指定

言語の拡張

Haskell の構文を調べるときは The Haskell 98 Language Report を参照する。 Wikipedia で 歴史を見ると、Haskell 98 の前に Haskell 1.0 が 90 年に作成されていたようだ。 この 1.0 の説明に次のように書かれている。

… 1997年後半にそのシリーズは、安定しており小さく可搬なバージョンの言語仕様と、学習用および将来の拡張の基礎としての基本ライブラリなどを定義した Haskell 98 に到達した。実験的な機能の付加や統合を通じて Haskell98 の拡張や派生物を作成することを、委員会ははっきりと歓迎した^[1]。

(太字は引用者による)

上記出典を確認すると、

Haskell continues to evolve, going well beyond Haskell 98.For example, …

Type system innovations, including:

• multi-parameter type classes;
• functional dependencies; 
• …

(Preface の `Extensions to Haskell98’ より)

というように、Haskell 98 に対する様々な拡張の名前が挙げれている。

(以下を飛ばす。)

 

型クラスの constructor classes による拡張

「型クラス」にしても、現在の構文は Haskell 1.0 から見たら拡張されており、

Type classes are one of the most distinctive features of Haskell (Hudak et al. [1992]). They have been used for an impressive variety of applications, and Haskell 1.3 significantly extended their expressiveness by introducing constructor classes (Jones [1995a]).

(Type Classes: An Exploration of the Design Space、太字は引用者による)

Haskell 1.3 より constructor classes が導入されたと。

少し調べると、これに関して The Haskell 98 Language Report の 4.1 Overview of Types and Classes には、

More examples of type classes can be found in the papers by Jones [7] or Wadler and Blott [12]. The term `type class' was used to describe the original Haskell 1.0 type system; `constructor class' was used to describe an extension to the original type classes. There is no longer any reason to use two different terms: in this report, `type class' includes both the original Haskell type classes and the constructor classes introduced by Jones.

上記の訳、4.1 型およびクラスの概要

型と構成子クラスのさらなる例は、Jones の論文 [7]、あるいは、Wadler と Blott の論文[12] に見ること ができる。「型クラス」という用語は、元々は Haskell 1.0 の型システムを 記述するのに用いられていたものであり、「構成子クラス」の用語は元々の 型クラスを拡張を記述するのに用いられていたものである。このレポートで はすでに、これらの用語を分けて用いる理由はなく、「型クラス」は元々の Haskell 型クラスとJones によって導入された構成子クラスの両方を含んで いる。

(太字は引用者による)

と記述されている。

 

constructor classes とは

Haskell の仕様の歴史を Language and library specification – HaskellWiki で辿ると、Changes from Haskell 1.2 to Haskell 1.3 に constructor class の説明が書かれている。

constructor classes remove the restriction that types be `first order'. That is, `T a' is a valid Haskell type, but `t a' is not since `t' is a type variable.

(Constructor Classes より)

「constructor classes により型が一階である制約がなくなった」ってなんのこっちゃ？ (@_@; と思ったら、モナドで最初につまづいた点と関係していた。「ふつうの Haskell プログラミング」で Maybe a 型を取り上げてモナドの説明がされていた章のコラム「Monad クラスのインスタンスは型じゃない」 (p269) を読み返してみると、次のように述べられている。

… Maybe a は型で、Maybe は型コンストラクタです。ですから、Monad クラスのインスタンスであるのは型コンストラクタ Maybe であって、型ではありません。

Constructor class - The Mail Archive にも同様の内容が書かれている。

The term `constructor class' is meant to include classes like Functor and Monad, whose instances are type constructors but not types.

思い返してみると、「型をクラスのインスタンスにする」意味はすぐに理解できたけれど、「型コンストラクタをクラスのインスタンスにする」というのがなかなかわからなかった。先ほど Haskell 1.3 の変更の説明で使われていた言葉を用いるなら、first-order な型をクラスのインスタンスにするのは理解しやすいが、higer-order な型がクラス宣言で使われているのを理解するのは難しい。 (cf. A Gentle Introduction to Haskell: Classes )

Meet the Monads の説明では以下の記述が上記に相当する。

Haskell ではこのコンテナの型も多相にすることができます。それゆえ、「m a」と書いて、ある型の値を保持するある型のコンテナを表現することができます。

この文章を読んだとき、そういう書き方が Haskell では元々できるものだと思っていた。しかし、Haskell 1.3 よりも前の時代には Moand クラスの (>>=) メソッドの型、

(>>=) :: m a -> (a -> m b) -> m b

の `m’ のような型変数の使い方ができなかったようだ。

 

型の構文の変化

念のため constructor classes が導入される前と後のバージョンの「型」の構文を調べてみる。 Haskell 1.2 では以下の通り。(記法は バッカス・ナウア記法 、 文脈自由文法 を参照。)

(Report on the Programming Language Haskell Version 1.2, 4.1.1 Syntax of Types, p25 より)

上記 tycon は type constructors を表わすので (同上 p8) 、Haskell 1.2 において「型」は型コンストラクタが最初に置かれる。また、型変数を表わす tyvar が来たとしても一つの型変数だけが許される。

これに対して Haskell 1.3 は以下のように型が表現されている。

(Report on the Programming Language Haskell Version 1.3, 4.1.1 Syntax of Types, pp.32-33 より)

tyvar は型変数なので、t, a がそれぞれ型変数であるなら、t a は型の表現として正しいことがわかる。

 

constructor classes の例

constructor classes について知りたければ、Functor  と Monad の定義を読めばいい。しかし、慣れるには自分で何か適当な例を考えねば … と思ったけれど良い例が思い浮かばなかったので、具体性に乏しい意味不明な例で。 ^^;

例えば、Hoge という入れ物があるとする。この入れ物には、どんな型の値でも一つだけ入れることができるとする。

data Hoge a = Hoge a

ここから中身を取り出す get 関数を定義するなら、

get (Hoge x) = x

更に Piyo という入れ物があり、こちらは左右二箇所に値を入れる場所があると仮定。

data Piyo a = Piyo { left, right :: a }

同じく中身を取り出す get 関数を定義したい。

… とその前に、Hoge も Piyo も二つとも入れ物なので、「入れ物」を表わす型クラス Container を定義し、入れ物の中身を取り出す関数 get の型を宣言しておく。

class Container c where
    get :: c a -> a

ここで get 関数において、型の第１引数を c a のように型変数 2 つを用いて表現した。これが件の constructor classes 。

次に、型コンストラクタ Hoge, Piyo を型クラス Container のインスタンスにする。ただし、Piyo は get で中身を取り出すとき、左側にある値だけを取り出し、右は無視するとする。

instance Container Hoge where
    get    (Hoge x) = x

instance Container Piyo where
    get    (Piyo l r) = l

これを使い、

main = do print $ get $ Hoge 100       -- 100
          print $ get $ Piyo "p1" "p2" -- “p1”

折角なので、入れ物から取り出した後、関数を適用する getf 関数の型も型クラス Container に宣言する。

    getf :: (a -> b) -> c a -> b

上記の宣言に対応して、Hoge で getf 関数を実装

    getf f (Hoge x) = f x

piyo の方は、先ほどと同じく左側の値を取り出し、それに対して関数を適用し、右側は無視するとする。

   getf f (Piyo l r) = f l

これを使い、

          print $ getf (*2) h           -- 200
          print $ getf (replicate 2) p  -- ["piyo", "piyo"]

全体はこちら。

Hoge とか Piyo とか意味不明な例で試したけれど、おかげで Functor が理解しやすくなった。 ^^; ( cf. Haskell の fmap )

 

Haskell 2010 の拡張

2009.11 には Haskell 2010 と名付けられた改訂版がでているようで、

Haskell 2010 に導入された拡張の名前は、DoAndIfThenElse、HierarchicalModules、EmptyDataDeclarations、 FixityResolution、ForeignFunctionInterface、LineCommentSyntax、 PatternGuards、RelaxedDependencyAnalysis、LanguagePragma、NoNPlusKPatterns である。

( Haskell – Wikipedia より)

新たに拡張が導入されている。 (cf. changes in Haskell 2010 , via Haskell Prime)

 

拡張を利用するには

「拡張」について調べようと思った理由は、モナドに関した記事を読んでいると必ず「拡張」について話がでてくるため。例えば、All About Monads では、

… ここで示した定義では Haskell 98 の標準にはない、複数パラメータ型クラスおよび funDeps が使われています。この State モナドを利用するのに、これの詳細を完全に理解する必要はありません。

(The State monad より, 太字は引用者による)

同様の記述が Reader モナド, Writer モナド, Error モナド にもある。モナド以外でも Existentially quantified types, GADT で `extention’ という単語を見かけて以来気になっていた。

 

コマンドラインのオプションで指定

7.1. Language options によると、拡張を利用するには次の2 種類の方法がある。

• Every language option can switched on by a command-line flag "-X...",
• Language options recognised by Cabal can also be enabled using the LANGUAGE pragma,

一つはコマンドラインのオプション。もう一つは LANGUAGE プラグマの指定。

例えば、Haskell 2010 で導入された EmptyDataDecls を試してみる。 “Fun with Functional Dependencies”  には次のような記述がある。

data Zero

「ん？何でデータコンストラクタが書かれてないんだろう？」 (@_@;

と思いながらコードを書いて実行すると、以下のメッセージが表示される。

    `Zero' has no constructors (-XEmptyDataDecls permits this)
    In the data type declaration for `Zero'

これは先ほど拡張を実行するときの方法の一つ「オプションを付けて実行しなさい」ということ。

main 関数を適当に書いた後、

ghc ファイル名 -XEmptyDataDecls

のようにオプションを指定するとコンパイルできる。

 

プラグマによる指定

Use of language extensions – HaskellWiki では、

We recommend to explicitly switch on language extensions that are needed using the LANGUAGE pragma instead of switching them on all at once using the -fglasgow-exts compiler flag.

(太字は引用者による)

上記のコマンドラインよりもプラグマによる指定が勧められている。

プラグマとは The Haskell 98 Report: Compiler Pragmas によると、

プラグマは 付加的指令やヒントをコンパイラに与えるために使用される。しかし、 これは Haskell 言語そのものの正式な部分ではなく、プログラムの意味を 変えるものではない。 …

字句としてはプラグマはコメントと看倣される。

GHC のマニュアルでは 7.13. Pragmas に、

Pragmas all take the form {-# word ... #-} where word indicates the type of pragma, and is followed optionally by information specific to that type of pragma.

つまり、コメント として見なされるように

{- -}

で囲み、プラグマであることを示すのに # を使い、

{-# #-}

プラグマのタイプと、それに対する指示をオプションとして指定。

{-# プラグマのタイプ [指示] #-}

「言語の拡張」の場合は、プラグマのタイプに LANGUAGE と記述する。

{-# LANGUAGE [指示] #-}

 

先ほどの EmptyDataDecls をプラグマを使って書くなら、

{-# LANGUAGE EmptyDataDecls #-}

data Zero

オプションで指定する拡張の名前は、先ほど実行したときに表示されたメッセージ中の

-XEmptyDataDecls

から先頭の –X をとった文字列を使えばいいので一々覚えておく必要はない。

 

その他

サポートされているプラグマの一覧を表示するには、

ghc --supported-languages

( 7.13. Pragmas より )

 

参考サイト

• Should I use GHC Haskell extensions or not? - Stack Overflow

Google スプレッドシートでリンクを挿入 - Make Link でお手軽入力

ハイパーリンクを入力するための数式

Google スプレッドシートはセルに URL を入力した後、そのセルをクリックするとリンク先に飛ぶためのポップアップが表示される。

URL ではなくテキストでリンクしたい場合は、

… 該当するセルに次のようなハイパーリンクの数式を入力します。

=hyperlink("www.google.com";"ウェブを検索")

(リンクを挿入する : スプレッドシートの編集 - Google ドキュメント ヘルプ より)

 

Firefox のアドオン Make Link で数式を作成

上記の数式を一々入力するのは面倒なので、Make Link :: Add-ons for Firefox を使って簡単に入力できるようにする。

1. Firefox を開き適当な位置で「右クリック > Make Link > 設定」。
2. 「新規ボタン」で新しい設定を作成。
3. 名前を適当に付け、フォーマットに以下を入力。

=hyperlink("%url%";"%text%")

これで Make Link に新しく作成したものが表示されるので、リンクを貼りたいページで右クリックして Make Link  > Google Spreadsheets を選択し、素早く以下のように入力できる。

 

参考記事

• Make Link で文章を引用するための形式をカスタマイズ

Firefox のアドオン QuickFox Notes でメモを書く – QuickNote から乗り換え

QuickNote は残さないメモに使う

車にタイヤが必要なように、PC にブラウザがなければどこへも行けない。それくらいブラウザの利用率が高いので、必然的に画面における占有率が高いのが Firefox 。そのため、ちょっとメモ書きをする程度なら、既にエディタが起動しているにも関わらず Firefox のアドオン QuickNote を使う。

このアドオンが便利な点は、以下の 2 点。

• ツールバーのアイコンからすぐに起動できる
• 一定の文字数を入力すると自動的に保存してくれる

長期的な保存を目的としないメモを書く際、わざわざファイル名をつけて保存するのは煩わしい。QuickNote では、用済みの内容は消して、どこにも残らないようにしている。目的に対して丁度いい機能的なサイズだと感じる。

シンプルな機能は、それに見合った使い方を余儀なくされる。その良い例がこの QuickNote だと思うけれど、タブの上限が 4 つであるためにメモが混在し、どこに書いたかすぐに把握できなくなることも事実。 もちろん、タブ 4 つまでという制約があったため、「残さないメモを書く」という特化した使い方を強いられたが、その使い勝手が悪いか？と問われたらそうでもない。しかし、もう少しタブの数を増やせたらいいのにと感じるときもある。 (+_+)

 

高機能な QuickFox Notes

QuickFox Notes via kwout

これに対して機能が豊富なのは QuickFox Notes 。インストールして、ツールバーにアイコンを登録して起動。

機能の一覧はアドオンのページを参照するとして、便利だと思ったのは次の 4 点。

 

タブの数を好きなだけ増やせる

タブを増やすにはタブの左側の十字アイコンをクリックするか、または、タブがない空いている場所でダブルクリック。

QuickNote ではタブの数の上限が 4 つだったけれど、上図では 5 つタブを作成できているのがわかる。

 

間違えて消したらゴミ箱から取り出せる

必要なくなったタブを削除したい場合は、タブの右側のペケ印をクリック。安心なのは間違えて削除しても、その上のゴミ箱から取り出すことができること。

 

タブが増えすぎたらアーカイブ

たくさんタブが増えたら、どこに何があるのかわからなくなる。スッキリと整理しておきたい場合、Gmail ライクにアーカイブすることができる。メニューの Archive > Add to archive を選択するか、タブをダブルクリックすることでアーカイブされ、タブが見えなくなる。

元に戻したいときは、Archive > Send back to Editor 。

しかし、これまでの自分の QuickNote の使い方を考えると、これに頼り過ぎるのはやめようかな。

 

Xmarks との連携

ところで、ブックマークは Xmarks を使いサーバ上に保存している。QuickFox Notes はこれにも対応しているようだ。

if you already have a bookmarks synchronization add-on installed in your Firefox (e.g. Xmarks or Mozilla Weave), your notes will be synchronized automatically.

(QuickFox Notes :: Add-ons for Firefox  より)

どういうことだろう？と思いブックマークの一覧を見たら、QuickFox Notes というフォルダが作成されており、

• ブックマークの名前 –> QuickFox Notes のタブの名前
• ブックマークの説明 –> QuickFox Notes のメモの内容

という対応付けがされていた。つまり、QuickFox Notes のデータの保存はブックマークを利用しているので、Xmarks の同期機能を利用できるということ。環境を変えたときに、メモの内容を保存し忘れたことがあったが、これからそういう心配もなくなった。 ^^

 

URL をダブルクリックで開くことができる

追記 (2010.5.26) : URL がテキストとして書かれている場合、ダブルクリックするとそのページを開くことができる。

Excel のフィルが動作しない場合

Excel で行ごとに同じ計算を繰り返す場合、一つ入力したセルの右下にマウスのポインタを移動させ、十字になったところで下方向へドラッグする。しかし、一見これが動作していないように見えたら、

F9

を押して再計算。

これで意図した計算結果が表示された場合、メニューより「ツール > オプション」の「計算方法」タブで、計算方法において「自動」が選択されていることを確認する。

知らない内に上記の設定が変わっていたなら原因は、

• [XL2002] 作業グループの状態で Excel 終了時にファイルを保存すると計算方法が手動になる

とのこと。

 

参考サイト

• 計算方法が勝手に手動になる－作業グループのまま終了：Excel エクセルの使い方-関数/計算式
• 複数シートへの一括操作－作業グループ：Excel エクセルの使い方-入力/編集

Windows Live Writer で記事ごとに別ウィンドウで開くには

Windows Live Writer では、「新しい記事を書く」ときや「下書き」「最近投稿した記事」を編集するとき、デフォルトでは既に開いている記事と同じウィンドウに読み込まれる。そのため、書くのを中断した記事を一旦保存する必要があり操作が面倒。 (+_+) 編集している記事を開いたまま、別ウィンドウに他の記事を開きたいときは、別にもう一つ Windows Live Writer を起動していた。

 

オプションの基本設定

しかし、よくよく見たらデフォルトの動作を変更する設定があった。

1. メニューより 「ツール > オプション > 基本設定」。
2. 記事ウィンドウの設定において、「記事ごとに新しいウィンドウを開く」を選択。

こんな基本的な設定を見逃していたとは。 しかも設定の一番最初。。 (o_ _)ｏ~†

それにしても、こちらの動作の方が随分快適。

PHP の開発環境を整える (2010.5) - CakePHP の準備

1. 開発環境の一覧

この時期、恒例になってきた開発環境の整備。変なエラーに煩わされないことを祈りつつ設定 (+_+)

利用するツールとバージョンは以下の通り。

• IDE
  • PDT, PHP Development Tools (PDT) – Downloads より, PDT 2.1-SR2, Eclipse 3.5-SR2
• Web サーバ, DB
  • XAMPP, Browse XAMPP Files on SourceForge.net より, 1.7.3
• バージョン管理
  • Subversion, Apache 2.2-compatible を Subversion Binary Packages より, 1.6.6
  • TortoiseSVN, TortoiseSVN downloads | TortoiseSVN より, 1.6.8
  • Subclipse, http://subclipse.tigris.org/update_1.6.x を subclipse: Download and Install より ( cf. Eclipse から Subversion を利用する – Subclipse )

 

2. CakePHP を利用するための準備

今回、開発環境を新しくした理由は、修正したいコードがあったため。修正対象のソースコードで、PHP が使われている部分は、

1. パーツに分割した HTML を結合する処理と ( cf. フレームの代わりにPHPを使う ) 、
2. フォームでの問い合わせの処理。

DB は使用していない。処理はシンプルなので、テンプレートエンジンを使わず、自前で MVC ライクに書いている。しかし、いくら単純でも、Web ページの数が増えてくると、重複した部分が徐々に気になってくる。フレームワークを使うように変更しようか、検討中。

以前に、CakePHP を試してみようと環境を整えたことがある。

PHPフレームワーク ちいたん via kwout

軽量なフレームワーク

• ちいたん

も良さげだけれど、 PHP で他のフレームワークを使ったことがないので、とりあえず CakePHP への移行が無難かな。

PHP はたくさんのフレームワークが乱立している。なるべくシンプルでコンパクトなものを使いたい。以下の図による説明を見ると、今回の自分のやりたいことに対して、CakePHP は、妥当な選択に思えた。

PHPフレームワークの機能比較/CakePHP,symfony,Zend Framework - PHPプロ！ via kwout

ちなみに、調べていたら、 symfony からのつながりで、Twig というテンプレートエンジンが気になった。一度、使ってみたい。

Twig via kwout

 

使用する CakePHP のバージョン

CakePHP のバージョンを確認したら、1.3.0 と 1.2.7 がリリースされている。1.3 はまだ出たばかりのようなので、今回は 1.2.7 を利用することにした。

CakePHP: 高速開発 php フレームワーク。 Home via kwout

現時点では、1.2 の方がドキュメントが充実している。

• マニュアル :: 1.2 Collection :: The Cookbook

 

PDT へ CakePHP のソースコードをインポート

1. cakephp / cakephp1x より、1.2.7 をダウンロードして解凍。
2. PDT で新規に testCakePHP2 プロジェクトを作成。
3. 解凍した CakePHP のソースコードを testCakePHP2 プロジェクトに D&D。
4. プロジェクトのプロパティで Resource > Text file encoding を UTF-8 に変更。

 

Apache の設定

Apache の httpd.conf で以下の記述がコメントアウトされているのを確認。 ( cf. Apacheとmod_rewrite )

LoadModule rewrite_module modules/mod_rewrite.so

テスト用のアプリケーションの設定のために以下の記述を追加。

Alias /testCakePHP2/ "C:/develop/tool/eclipse/workspace/testCakePHP2/"
<Directory "C:\develop\tool\eclipse\workspace\testCakePHP2/">
    Options FollowSymLinks 
    AllowOverride All
    Allow from All
</Directory>

ただし、PDT が利用する workspace は、

C:/develop/tool/eclipse/workspace/

であるとする。また、アプリケーションのルートの URL は、

http://localhost/testCakePHP2/

とする。上記の設定中 Options FollowSymLinks を有効にしているのは、Old Nabble - CakePHP - Forbidden Error によると、

In order for mod_rewrite to work you have to have:
Options FollowSymLinks
Put that right under the AllowOverride All and it should work. :)

 

CakePHP の .htaccess に RewriteBase を追加

次に CakePHP on XAMPP でちょっとはまった « 43HR を参考にして、PDT にインポートした CakePHP のソースコードの以下の各々のファイルに内容に RewriteBase を追加。

• testCakePHP2/.htaccess に RewriteBase /testCakePHP2
• testCakePHP2/app/.htaccess に RewriteBase /testCakePHP/app
• testCakePHP2/app/webroot/.htaccess に RewriteBase /testCakePHP2/app/webroot

 

debugger.php の設定

これで http://localhost/testCakePHP2/ にアクセスすることができるようになった。ただし、以下の警告が表示される。

Notice (1024): Please change the value of 'Security.salt' in app/config/core.php to a salt value specific to your application [CORE\cake\libs\debugger.php, line 548]

CakePHPブログチュートリアル :: 開発例 :: マニュアル :: 1.2 Collection :: The Cookbook によると、

security saltは、ハッシュの生成に用いられます。/app/config/core.phpの153行目を編集し、デフォルトのsalt値を変更してください。

これにより、警告が消える。

 

3. MySQL の設定

今回は DB を使う予定はない。しかし、http://localhost/testCakePHP2/ にアクセスすると警告がでるので、ついでに DB の設定もしておく。

XAMPP のコントロールパネルで MySQL の Start ボタンを押す。

Admin ボタンで phpMyAdmin を起動。(phpMyAdmin を使いたくない場合は、MySQL Workbench を利用するとよい。)

「データベース」タブを選択し、新規にデータベース testcakephp を作成。

XAMPP の MySQLと PHP の説明によると、

MySQLは "root" に対するパスワード無しで起動します。したがってPHPではMySQLサーバを以下で接続できます： mysql_connect("localhost","root","")
MySQLの"root" に対するパスワードを設定したい場合は、コンソール（Console）の下の"mysqladmin"を使ってください。

testCakePHP2\app\config の database.php.default を database.php に名前を変更。 database.php で $default 変数のハッシュのキーに対する値において、

• login を root
• password を空
• database を 上記で作成した testcakephp

に変更する。これで、http://localhost/testCakePHP2/ にアクセスすると警告が消える。

データベースで、アプリケーション専用のユーザを作成してアクセスしたいなら、phpMyAdmin の「特権」タブにおいて、test ユーザを作成。パスワードを test とする。その際、グローバル特権にデータと構造に全てチェックを付けておいた。

上記の database.php に戻り、

• login を test
• password をtest
• database を 上記で作成した testcakephp

と設定する。

http://localhost/testCakePHP2/ にアクセスすると、オールグリーンで準備完了。

 

 

4. 分散バージョン管理に移行しようかな…

分散バージョン管理Git/Mercurial/Bazaar徹底比較 (1/5) - ＠IT (2009/1/14) によると、

分散バージョン管理システムでは、ローカルのブランチに対して作業を行い、テストまできちんと終了した作業のまとまりを中央リポジトリへ反映できます。

出先で、ノート PC を利用してバージョン管理をしたいので、そろそろ分散バージョン管理に移行しようかな。

個人的には Haskell で作られている Darcs を使ってみたい。

• ソースコード管理システム「Darcs 2.4」リリース - SourceForge.JP Magazine : オープンソースの話題満載 (2010年03月03日)

 

関連記事

• PHP の開発環境を整える (2008.4)
• Eclipse から Subversion を利用する – Subclipse
• XAMPP 1.7.2 上でエラーとなった PHP コード - ショートタグの設定
• CakePHP の環境を整える
• PHP の include ではまった
• XAMPP を入れなおしたら、Apache, MySQL が起動しない
• MySQL の開発ツールどれにしようかな？

ウィンドウを縦方向へ素早く最大化 - ぴたすちお を使って

Windows 7 をはじめて触ったとき、何気に便利だと思ったのはウィンドウを最大化するときの操作。ウィンドウの上端または下端を画面隅まで広げると縦方向に最大化する。

Windows 7 新機能 簡単「Aero スナップ」操作 via kwout

この機能は「Aero スナップ」の動作の一つ。どちらかと言うと、左右二つのウィンドウに最大化させる動作の方が注目されているようだけれど、実際によく使うのは上記の操作の方だと思う。

 

Vista で AeroSnap の一部の動作を実現

AeroSnap BETA は XP やVisat で Aero スナップの動作を真似たアプリ。しかし、上記の縦方向への最大化は実装されていないようだ。

 

「ぴたすちお」でタイトルバーをクリックしてウィンドウを縦方向へ最大化

ぴたすちおの紹介 via kwout

そこで、いつも マウスオーバーでウィンドウをアクティブにする設定 でお世話になっている ぴたすちお の出番。

ダウンロードして起動したら、「マウスショートカットの設定」をクリック。

画面下の「タイトルバーを」の設定で、好みマウス操作に対して「最大化(縦方向)」を設定する。

自分の場合、

• タイトルバーを右クリックしたら 「最小化」。
• Shift + 右クリックで 「最大化(縦方向)」

にするように設定。ついでに、

• Ctrl + Shift + 右クリックにより 「タイトルバーのみ表示/戻す」

で、昔の Mac の `ウインドウシェード’ のような動作になるようにしている。

 

余談

ところで、上記の Aero Snap の動作の内、ウィンドウを左右に最大化することに関して、【山田祥平のWindows 7カウントダウン】 ウィンドウ操作の効率化 には、

実は、こうした作業は、Vistaでだってできなくはなかった。デスクトップを、並べたいウィンドウだけが開いた状態にし、タスクバーを右クリックしたショートカットメニューから「ウィンドウを左右に並べて表示」を実行すればいい。

言ってしまえば、元も子もないが、つまるところは「ただし横幅半分」という条件付き最大化が、Aero Snapの正体だ。 

言われてみたら、そういえばそうだ。 ^^;

 

関連記事

ウィンドウの操作を快適にするために。

• ウィンドウの枠をつかみやすくする hMouseLimit - マウスオーバーでウィンドウをアクティブにするアプリとの併用に最適
• ウィンドウ の枠を太くしてマウスでつかみやすくする