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

1. HTML で書いた文書をエスケープしたい

HTML のソースコードから

& " < >

を含む文字をエスケープしたい文字したい。目的は、 HTML の文書に HTML の文書を載せるとき、実体参照に変換する必要があるため。

 

2. HTML をエスケープする方法

ネット上のサービスとしては、

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

Ruby で HTML の特殊文字を実体参照に変換できる。

 

3. NotePd++ の場合

NotePad++ を使っているなら、

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

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

 

TextFX のインストール

追記（2013/06/01）：  メニューに TextFX が存在しない場合、メニューより、

• プラグイン > Plugin Manager > Show Plugin Manager

を起動する。 Available タブにおいて、TextFX Characters を選択して install ボタンを押す。

CSS で画像と文字を揃える

1. リストのマーカーとして画像を設定する

HTML でリストを書くには、ul, li 要素を用いる。

<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;
} 

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

• cf. 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

 

2. 画像と文字を揃える

a. 要素を垂直方向に対して、中央で揃える

画像と文字の位置を、垂直方向に真ん中で揃えたい場合は 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

 

b. 要素を水平方向に対して、中央に配置

水平方向に対して、要素を中央に配置したい場合は text-align を用いる。

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;" />

 

c. 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

 

参考サイト

• 小粋空間: リストマークの画像のずれを修正する
• 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 でリクエストを送信

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

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

telnet ホスト名 80

としてホストに接続してから、リクエストを送信する。

• cf. telnetでブラウズ(HTTP)

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

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

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

Telnet を起動したら

? , set ?

などで利用できるコマンドを確認。

 

2. Firefox のアドオン HTTP Resource Test

Firefox を使っている場合、アドオン HTTP Resource Test により、リクエストを送信できる。

アドオンをインストールしたら、

• メニューより 「ツール > 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 ボタンを押す

 

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

HTTP Resource Test で送信する Client Request における「パラメータと値」は、予めブラウザでフォームの入力と送信をして把握しておく必要がある。

そのためには、フォームでリクエストを送信する前に Firebug を起動しておく。フォームで、実際にリクエストを送信したら、

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

この値を Client Request で利用する。

 

4. その他

• 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. Auto-Reload で再読み込みを自動化

Google Chrome の拡張 Auto-Reload は、一定時間経過したらページを再読み込みしてくれる。ページごとに再読み込みの設定をすることができる。

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

Auto-Reload をインストールすると、ロケーションバーの右隅にアイコン が表示される。

これをクリックするとアイコンの色が緑になり 、一定時間経過したら自動でリロードされるようになる。

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

 

2. JavaScript によるオートリロードで、CPU の負荷が急上昇するサイトで利用した

上記の拡張機能を利用した理由は、JavaScript を使いオートリロードしているページを開いたら、CPU の負荷が上昇したため。HDD へのアクセスが頻繁になり、PC がウィーーーンと唸った。

そのため、Chrome の拡張機能を利用する方法に切り替えることにした。

 

3. 宅急便の配達状況をチェックする

クロネコヤマトの宅急便を利用すると、荷物の配達状況をウェブで確認できる。

1. 荷物の伝票番号で Google 検索を行う。
2. 「ヤマト運輸のお荷物の配送状況」のリンクを開く。
3. ロケーションバーにある Auto-Reload のアイコンをクリックして、アイコンを緑色の状態にする。

これでブラウザを開いておけば、荷物の配達状況を逐一確認できる。「Amazon のお急ぎ便」を利用したときに、今どこまで荷物が来ているのか調べるのに使った。

 

4. Firefox では Tab Mix Plus を使う

• Firefox でタブを定期的に再読み込みする - Tab Mix Plus で自動的にリロード

音量をマウスホイールで素早く調整する – Tray Volume を使いタスクバーの上で音量を設定

1. 音量を調整する場面が多い

PC で音楽を聴いたり、Skype でチャットしたり、Ustream で動画配信を見たりする。利用している場面に応じて、音量を調整する必要がある。

音量を変更するときは、

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

ワイド画面のディスプレイでは、タスクトレイのアイコンが小さく表示される。そのため、サウンドのアイコンにマウスポインタを合わせるときにストレスを感じる。

 

2. Tray Volume で音量を素早く変更する

Tray Volume を使うと、素早く音量を変更できる。特に上記の手順1 にかかる負担が限りなく 0 へ近づく。

タスクバーの上でマウスホイールを利用して音量を変更

Tray Voume 起動するとタスクトレイにアイコン が表示される。

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

追記（2012/07/19）： タスクバーでマウスホイールを動かしても、音量が変更されなくなるときがある。その場合、TrayVolume の再起動が必要となる。

• cf. Windows でアプリケーションを再起動するバッチ処理
• アプリケーションの再起動に System Explorer

タスクバーよりも、画面隅でマウスホイールを有効にした方が良いようだ。

• マウスホイール > 有効範囲 > 画面隅

 

音量の表示

「アイコン」タブで、Digital White を選択すると、タスクバーでの音量の視認性が良くなる。

 

3. 理想的な UI

ところで、iPhone や iPad が小さなディスプレイに特化した UI を採用している。

大きな画面に対しても、表示領域に見合った使いやすい UI があって欲しい。例えば、タスクトレイのアイコンにマウスポインタを移動させたら拡大表示し、操作しやすいパネルが出てくれたらいいな。

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

1. 言語の拡張

Haskell の構文を調べるときは The Haskell 98 Language Report を参照する。

Wikipedia で Haskell の歴史を見ると、Haskell 98 の前に Haskell 1.0 が 90 年に作成されている。

Haskell 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 に対する、様々な拡張の名前が挙げれている。

(以下を飛ばす。)

 

2. 型クラスの 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 プログラミング」で、コラム「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 )

 

3. 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)

 

4. 拡張を利用するには

「拡張」について調べた理由は、モナドに関した記事に、必ず「拡張」の話がでてくるため。

例えば、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

Make Link で Google スプレッドシートのリンクを作成

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

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

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

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

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

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

 

2. 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 のアドオン Notepad (QuickFox) でメモを書く – QuickNote から乗り換え

1. Firefox でアドオン QuickNote を使いメモをとる

Firefox でメモをとるとき、アドオン QuickNote を使っていた。

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

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

問題は、タブの上限が 4 つであること。これにより、メモが混在し、どこに内を書いたかわからなくなる。

 

2. QuickNote より高機能なアドオン QuickFox Notes

 QuickNoteに対して、Notepad (QuickFox) は機能が豊富なメモ帳。

インストールすると、ツールバーにアイコンを登録できる。

Notepad (QuickFox) が便利なのは、次の 5 点。

 

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

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

QuickNote ではタブの数の上限が 4 つだったけれど、QuickFox Notesでは、5 つ以上のタブを作成できる。

 

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

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

 

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

たくさんタブが増えたら、どこに何があるのかわからなくなる。スッキリと整理しておきたい場合、Gmail ライクにアーカイブすることができる。

• メニューの Archive > Add to archive

を選択する。または、タブをダブルクリックすることでアーカイブされ、タブが見えなくなる。

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

 

d. 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 の同期機能により、他の Firefox とめもの内容を同期できる。

 

e. 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 の開発ツールどれにしようかな？