作ろうウェブページ！ mi-aHTMLモード HELP

by 今野 滋

7 Shell Scripts

• はじめに

  1. Shell Scripts は、様々な便利機能を提供します。
  2. bash と ruby が使われています。OSX10.3以前のOSXをお使いの場合は、rubyをTkが使える環境にアップデートして、パスの設定を行う必要があります。（アップデート/設定をしなくても動作するものもあります。）
  3. パスの設定は、~/Library/Preferences/mi/mode/aHTML/defaults/addpath.txt にてまとめて行います。必要に応じて、このファイルを編集してください。 パスの設定は、それぞれのスクリプトについて個別に行うこともできます。
  4. 追加して欲しい機能がありましたら、今野までご連絡ください。

• C 色：入力・設定 (⌘+control+C)

  
  1. 色の入力をスライダーを動かして、実際に色合いを確認しながらできます。
  2. このツールで、いったん、色のデータを保存し、「V 色：出力・置換」で色のコードをmiのウインドウ上に出力します。
  3. 編集中の mi のウインドウ上で、マーク（選択）された部分に色のデータ（名前か16進コード）がある状態で起動すると、その色が写し取られます。 また、マークした部分が無い場合は、クリップボードの中のデータを参照します。 そのいずれも該当しないか、色データが読み取れなかった場合は、予め保存されていた配色で起動します。
  4. Launcher がインストールされてあれば、 フォルダーを開いて(⌘+y=>7o)、直接ダブルクリックで起動することもできます。ファイル「C 色：入力・設定」をコピーしておけば、どこからでも起動できます。
  5. GUI 環境の構築には、Tk を使っています。起動すると、画面左上背後にウインドウが現れますので、Doc に現れる黒いアイコンをクリックして、前面に出します。
  6. Tk のウインドウの２枚目を出した場合、１枚目とぴったり重なっているかもしれません。出ているウインドウの数は、Doc に現れる黒いアイコンの数で確認できます。
  7. Tk の起動はmiが起動してから初回だけ時間がかかります。のびのび体操などでもしながら気長にお待ちください。
  8. 「確定・保存」ボタンをクリックすると、表示されている色のデータが保存されます。この操作は何度でもできますが、最後にクリックしたときの色が有効です。 クリックせずに Tk のウインドウを閉じると、何の変更もなされません。
  9. 背景色のデータを写し取るには、background-color:(ここに色の16進コード又は名前);をマークした状態で起動してください。
  10. 色の16進コードは、３，６，９ 桁のどれでも読み取れますが、読み取り後は６桁に直されてしまいます。
  11. サンプルとして表示されるフレーズのバラエティーは、お好みにより書き換えることができます。option キーを押しながら、このツールを選ぶと編集できます。
  12. 色のデータは一時保存領域に保存されています。時間が経つと消えてしまうかもしれないので、重要な色合いは別途メモを残してください。 色の設定はメモからいつでも簡単に呼び出せます。
  13. miの古いバージョンを使ってると、Tk のウインドウ（スライダー）が出ている間はファイルの保存ができない可能性があります。
  14. OSX10.4 ではそのままでも使えますが、OSX10.3 では、Ruby のアップグレードと、TclTkAquaBI のインストールが必要です。詳細は、 Ruby インストールガイド - MacOS X をご覧になってください。 OSX10.2 以前では残念ながら使えません。
  15. OSX10.4 でも Tk のウインドウが、うまく立ち上がらない場合があります。もしかしたら、X11 が必要かもしれません。 アプリケーション⇒ユーティリティ（＝ターミナルと同じ場所）とフォルダーを開けて、中に白い[Ｘ]のアイコンが無かったら、OSXインストールディスクより、X11 を追加インストールしてください。

• V 色：出力・置換 (⌘+control+V)

  1. 「C 色：入力・設定」で保存された色のデータを、mi の編集ウインドウ上に出力します。
  2. どこもマーク（選択）していない状態で実行すると、カーソルが置かれた場所に color:#eeff5c;background-color:#000079;のような形に書き出されます。
  3. 色の名前又は16進コードのみをマークした状態で起動すると、保存されていた前景色に書き換えられます。 選択範囲に過不足があったり、Webで使われない色名に関しては、無視して何もおこりません。
  4. 広範囲にマークした状態で起動すると、
     • color:(ここに色の16進コード又は名前);の部分の色を、保存されていた前景色の設定に、
     • background-color:(ここに色の16進コード又は名前);の部分の色を、保存されていた背景色の設定に、
     すべて同時に書き換えます。
  5. 色のデータは基本的には 16進コードで表されますが（例：darkorange ⇒ #ffa500）、赤や白などの基本色は名前で表されます。
  6. 使用例：
     1. <span style="color:red;background-color:white;">色を付けます</span>のように、とりあえず、色を付ける設定をします。
     2. <span style="color:red;background-color:white;">色を付けます</span> 適当に広めにマークします。
     3. この状態で実行( command+control+v )すると、内容は変わらずに、色の設定だけが張り付きます。
  7. マークした部分の日本語が化ける場合があります。その場合は、いったん ⌘+z で戻り、より多くの和文を含んだ範囲を選択するか、 または、和文を含まない範囲を選択するかしてください。なお、和文の途中に選択範囲の境界がある場合に化けることが多いです。
  8. 備考：ツール⇒スタイル⇒色 (⌘+y=>sa) にも、これを簡略化したシェルスクリプトが使われています。<span style="色">

• D ファイルの参照元フォルダを開く (⌘+Shift+D)

  1. href=, src=, data= で参照されているファイルの置かれているフォルダーを開きます。
  2. マーク（選択）された部分から、該当する記述を探し出して、該当するフォルダーを全て開きます。href=, src=, data= を含んだ形でマークしてください。
  3. どこもマークしていない状態では、そのhtmlファイル自身が置かれているフォルダーを開きます。

• L Another HTML-lint文法チェック (⌘+@)

  1. 文法チェックで有名な Another HTML-lint を利用した文法チェックを支援します。
  2. ローカルに、HTML-lint がインストールされてある状態では、それを利用して文法チェックします。 無い場合は、作成中のhtmlファイルを読み取り、文法チェック用の送信フォームにコピーします。
  3. 環境：文字の処理にユニコードを利用しております。RUBYを最新のバージョン(1.8.5 以降)に更新してください。
  4. プログラム本体は、ツール > 7 Shell Scripts >8 他のツールの部品 >L HTMLlint文法チェック の所にあります。
  5. 表示はデフォルトブラウザでされますが、デフォルトブラウザとは別のブラウザで表示させたい場合は、 上記プログラム本体のツール名に、使いたいブラウザ名を書き足してください。例：L HTMLlint文法チェック(Opera)
     ただし、ブラウザ本体はアプリケーションフォルダー内のトップ（つまり普通の場所）にある必要があります。 対応しているブラウザ名は、Safari, Firefox, Opera, Camino, Shiira, SeaMonkey, Mozilla, iCab, Omni Web, ie。
  6. ローカルモードで使用する場合に、アドバイザリーを全て出力させるようにするには、プログラム本体を、option キーを押しながら選択して開き、 CheckOption = "" の右辺を"-pedanti"に書き直してください。
  7. 送信フォーム作成機能に関して：
     • これは、ご利用中のMacの所定の場所に Another HTML-lint がインストールされていない状態で機能します。
     • JavaScript で、送信ボタンにフォーカスされるようになっているので、JavaScript が有効なら、Enter のみでチェックサイトに飛べます。
     • 文字コードをいったんJISに変換するので、処理できない文字がある場合があります。
     • 文法チェックサイトは、Another HTML-lint gateway の配布元のお世話になるので、本家の付加軽減を配慮する必要があります。 自前のWebサーバーを持っており、そこに Another HTML-lint gateway をインストールできる人は、 プログラム本体の中の変数を書き換えて、なるべく自前のサーバーの方にアクセスするようにしてください。 また、ローカルにインストール（後述）できた場合は、なるべくローカルで使ってください。
  8. Another HTML-lint のインストール方法：これをやれば、ネットに繋がず、配布元にも迷惑をかけずに、利用できます。
     1. Ruby のバージョンが、1.8.2 でも、ユニコードの認識がうまくいかない場合があることが報告されています。OSX10.4 でも Ruby の更新をすることをお勧めします。
     2. OSX 10.2 以前をお使いの人は、perl のバージョンを 5.8 以上にアップデートしてください。 なお、アップデートできなかった場合は、Jcode.pm（後述）の代わりに、jcode.pl をhtmllintフォルダの中にいれておけば動くようですが、UNICODE で書かれたhtmlを扱うことができなくなります。
     3. Jcode.pm を「Tarballを直接入手(Jcode-2.07.zip)」よりダウンロードして ダブルクリックにて解凍。現れたフォルダからJcode.pmを取り出す。（CPAN云々は不要です。もちろんCPANを使っている人はJcode.pmをCPANでインストールしておけば良し。）
     4. htmllint.zip（フルパッケージ）を配布元よりダウンロードして、 ダブルクリックにて解凍。現れたフォルダ htmllint/ 中に、Jcode.pm を入れる（Perl のバージョンが5.8よりも古い場合は、jcode.pl を入れる）。 ※もし、フォルダ名が htmllint Folder になっていたら、htmllint に直す。
     5. miのフォルダ：ホーム/Library/Preferences/mi/（「モード設定フォルダ」の一段上位）の中に、先ほど用意した htmllint/ をフォルダごと入れます。これで完了。
     6. 以上の作業は、ネットに接続した状態で Terminal から下記のように実行することもできます。１行づつ実行してください。 （注意：行末にピリオドがある行もあるので見落とさないでください）

        cd ~/Library/Preferences/mi/
        mkdir htmllint
        cd htmllint
        curl -O http://openlab.ring.gr.jp/k16/htmllint/archives/htmllint.zip
        curl -O http://openlab.ring.gr.jp/Jcode/Jcode-2.07.zip
        unzip htmllint.zip
        unzip Jcode-*.zip
        mv Jcode-*/Jcode.pm .
        rm htmllint.zip
        rm -fr Jcode-*
        

     7. 参考サイト：
        • Mac でのローカルな Another HTML-lint 利用に関する情報
          Mac OS XでAnother HTML-lintを使おう (HTMLチェッカー) © Toshiyuki Mori さん
        • mi から Another HTML-lint を使う機能が昔から公開されています。日本語ファイル名対策など独特な工夫があります。
          HTML 構文チェックツール（Strict (X)HTML mode） © 広瀬行夫さん
  9. ローカルに使うほうの機能に関して、
     • この機能は、Another HTML-lint の詳細な仕様に依存しております。今後、Another HTML-lint をアップデートした際に、仕様変更等に伴い、うまく動作しなくなる場合も考えられます。 その際には作者(今野)までご連絡ください。
     • 文法チェック対象の html ファイルのファイル名又は、そのファイルを含むフォルダ名に、webに適さない文字が含まれていると、動作しない場合があります。 現在のところ、バックスラッシュ\、シングルクオート' が含まれている場合が該当します。改善は今後の課題となっております。

• I オートイメージ <img> ( ⌘+i )

  1. 画像の相対パスか又は、ブラウザに表示されている画像のアドレスをコピーして、カーソルを置いて実行すると、画像タグを書き出します
  2. 画像タグを丸ごとマークすると、そこから画像のファイル名を抽出して、画像タグの表示サイズとALT属性値を書き出します。
     • 画像タグ全体を含む形でマークしてください。
     • 複数の画像タグが同時にマークされた場合は、各々の画像タグに処理が施されます。
     • たとえば、ブラウザに表示させてある画像をドラッグ＆ドロップして作った画像タグの表示サイズを修正できます。
     • 画像を同名のファイル名で更新した場合の寸法の更新にも使えます。
     • ALT属性値が書き換えられるのは、値が「alt="○"」か空欄「alt=""」の時だけです。保存されたALT属性値を反映させるには、ALT属性を削除してから実行します。
  3. 画像のファイル名をマークした状態で、実行すると、画像タグができます。ファイル名にワイルドカード“*”が使えます。
     • 大文字と小文字は区別されます。
     • パターンにマッチしたファイル名の画像ファイルのタグ全てが書き出されます。
     • * で、同一ディレクトリ内の全ての画像ファイルが対象になります。
     • b* で、同一ディレクトリ内で、bから始まるファイル名の画像ファイルが全てが対象になります。
     • *.jpg で、同一ディレクトリ内の、拡張子.jpg のファイル全てが対象になります。
     • */*.gif で、一階層下のディレクトリ内の全ての、.gif 拡張子をもつファイルが対象になります。
     • */*/*.gif で、二階層下のディレクトリ内の全ての、.gif 拡張子をもつファイルが対象になります。
     • **/*.png で、同一又は下の階層全てのディレクトリ内の、.png 拡張子をもつファイルが対象になります。
     • gif 又は png 両方を対象にしたい場合は、*.{gif,png}と、中括弧でくくり、カンマで区切ります。
     • 複数のパターンを同時に扱いたいときにはパターンの間に改行を入れます。
     • ファイル名に特殊な記号などが用いられていると、動作しない場合があります。
     • ファイル名の大文字小文字は区別されますが、末尾に書かれた拡張子に関してのみ（小文字⇔大文字）変換されたファイル名も自動的に併せて探索します。
     • ファイル名がURIエンコードされていた場合は、デコードされたファイル名も併わせて探索します。
     • このマッチパターンは正規表現ではありません。より詳しく知りたい人は、 rubyのDir.glob を参照願います。 正し、バックスラッシュ\を使ったエスケープがうまく動作しないかもしれません。
  4. いまのところ、GIF,PNG,JPEG,BMP,XBM に対応しています。
  5. 注意：書き込まれる側のhtmlファイルを予め保存しておいてください。相対パスの検出、文字コード判別、html<=>xhtml の判別に使っています。
  6. 大量の画像がマッチするようにすると、マシンへの負担が大きくなります。適宜絞り込みましょう。
  7. 処理は１分でタイムアウトになるようにセットしてあります。
  8. 画像の寸法を検出するのに、コマンド sips を利用しています。とても古い MacOS では動かないかもしれません。
  9. 慣れてくると、ドラッグ＆ドロップよりも高速に作業ができるようになるでしょう。

• 1 ALT属性値保存

  • マークされた部分の画像タグのALT属性値を拾い出し、保存します。
  • 保存されたALT属性値は、オートイメージ実行によるALT属性値に反映されます。
  • Leopard 以降では、ALT属性値は画像ファイル自体の拡張属性に保存されます。（コマンド xattr を使用。）
  • Leopard よりも前の OSX では、ALT属性値はテキストファイル「画像ファイル名 + _alt.txt」に保存されます。

• H 画像表示枠半分

  • <img >タグに適用。画像の表示サイズを半分に縮小し、画像自体へのリンクを付加します。
  • 画像にリンクが張られている場合は、リンクはそのまま変更しません。

• 0 オートリンク

  1. リンク用アンカー自動作製ツールです。ページのタイトルを取得し、リンクのスタイルを与えられた環境から自動判別して書き出します。
  2. URL をマークして実行すると、そのサイトのタイトルを取得して、title属性の中に書き出します。
  3. ブラウザに表示されているアドレスをコピーして実行すると、そこへのリンクを自動生成します。
     1. 何処もマークしていない状態で実行した場合⇒ページのタイトルを鋏んだ形でアンカーが生成されます。
     2. 文字列をマークした状態で実行した場合⇒ページのタイトルを、title属性の中に書き出します。
  4. ローカルなファイルのアドレスにも対応しています。ファイルの場所は自動的に相対パスに書き直されます。
  5. ページタイトルは、「Safari3の履歴⇒Firefox3の履歴⇒Opera9の履歴⇒ネット上」の順番で探します。編集して、優先順位を容易に変更することができます。
  6. ハングルやアラビア語等の場合、Firefox2 の履歴が文字化けをおこす可能性があります。その場合は Firefox2 の履歴を消去してください。
  7. すみませんが、古い Mac や古い Ruby への配慮はしていません。このサポートを希望されるかたがいましたら、今野までご一方ください。改良版の作成を検討します。
  8. ツール/Q quick-10keys/0 ハイパーリンク（自動）[⌘+0]　にもこれが使われています

• S URLスクラップ

  1. ページのリンクを作成する際に、ページのスクリーンショットの縮小画像と、ページのタイトルを自動取得します。
  2. ネットに接続された状態で、ページのURLをマークしてから実行します。href="url" の形に記述されている部分であれば、URLの部分だけを抽出します。
  3. タグを書き出す html ファイルは予め保存されている必要があります。スクリーンショット画像は、フォルダー img/ が作成され、その中に保存されます。
  4. このスクリプトは coral を利用しています。予め coral がインストールされてある必要があります。

     Coral http://hmdt-web.net/coral/

  5. coral のインストール方法
     1. 上記 coral のページにアクセスし、「ダウンロード」のボックスを探し、Coral#.#.dmg をダウンロード
     2. ダウンロードしたファイルをダブルクリックし、マウント。
     3. その中のフォルダー bin/ をフォルダー ~/Library/Preferences/mi/ の中にコピー。既にフォルダー bin がある場合は、中身を bin/ の中にコピー。
     4. コピー先の bin/ ファルダーを開き、その中の coral を mi で開き、以下の文字列を修正して保存。
        ./coral.app/ ⇒ ~/Library/Preferences/mi/bin/coral.app/
  6. ImageMagick がインストールしてあると、スクリーンショット画像の画質が向上します。
  7. このスクリプトは、OSX 10.4 で開発・テストしています。古いバージョンではまだテストしていません。Ruby のバージョンが1.6以前だと、文字化けする可能性があります。

• M メールアドレス探知⇒粉飾処理

  1. メールアドレスを検出して、名簿業者にアドレスを収集されにくい形に書き換えます。いわゆる「エンティティー化」と呼ばれている処理です。
  2. 見た目にはずいぶん変わりますが、ブラウザでの表示と、クリックした際の挙動に関しては、処理をする前と変わりません。 ただし、とても古いブラウザや自作ブラウザでは正しく動作しない可能性もあります。
  3. 「エンティティー化」の意味とその効果に関しては下記サイトを参照願います。
     • ちょっと変わった？ソフトウェアのページ http://ab.jpn.ph/soft/（著作権 (C) 嶌津信彦さん） 「エンティティー化」の有効性を実際に検証した詳細な解説があります。この方法は、おそらく、嶌津氏が最初に開発したものです。
       1. スパム・迷惑メール調査結果
       2. メールアドレス収集ソフトの体験版を使用し、検証
     • HTMLエンティティ化 http://hp.vector.co.jp/authors/VA022023/javascript/make_html_entity-ja.htm（著作権 (C) 2003 広瀬行夫さん） 広瀬さんは、miの「Strict (X)HTMLモード」も著作公開されています。
  4. 猫も杓子も「エンティティー化」に走るようになると、名簿業者も対応するでしょうが、その気配はないので、当分大丈夫でしょう！
  5. 使い方：
     • 処理したい部分をマークして実行します。全部選択すると、文書全体に対して処理が実行されます。
     • NTT DoCoMo の空白を含むメールアドレスの場合、'hello world'@docomo.ne.jp 又は "hello world"@docomo.ne.jp のように、ユーザー名の部分を、クォートで括ってください。
  6. 注意：作者としてはかなり自信がありますが、動作無保証です。実行保存する前にできるだけバックアップを作成してください。 間違いが無いかどうか、メールアドレスの部分を直接確認してください。

• A accesskey＆tabindex上から順番

  1. accesskey と tabindex を選択範囲の最初から順番に割り振ります。これらは、視覚や体の動きが制限されている人たちにハンデを負わせないための処理です。 ⇒参考：バリアフリーWebデザインガイド(⌘+y=>yb)
  2. なるべく、全体を選択した状態にして実行してください。
  3. 初期設定を編集すれば、キーの範囲を狭めることなどもできます。
  4. 注意：既に書かれてある accesskey と tabindex は、いったん削除されてしまいます。
  5. accesskey とか tabindex だとか、なんだか良くわからないという人は、とりあえず、実行しておきましょう。

• G ASCII文字列 ⇒ 画像に変換

  1. メールアドレスなどの文字列を、画像に変換します。
  2. 扱える文字は、半角英数で、いわゆるASCII文字に限られます。改行は、空白に変換されます。制御文字（見えない文字）は対象外です。
  3. 文字色と背景色は、シェルスクリプトの「C 色：入力・設定」ツールにて設定してください。
  4. miの古いバージョンでは、「C 色：入力・設定」ツールが出ていると、ファイルを保存できない場合があるので、注意してください。
  5. 字体は、Courier 12pt です。フォント画像を修正することにより、お好みの字体に変更することは可能です。
  6. 予めhtmlファイルが保存されていないと使えません。
  7. htmlファイルと同じディレクトリ内に、img フォルダーが作成され、その中に、数字ファイル名のgif画像が作成されます。
  8. alt属性の値はランダムに生成されますので、適宜書き換えてください。
  9. 画像化された文字列のバックアップは、ディスクトップに、mi_backupdata.txt というファイル名のファイルが現れて書き出されます。 同名のファイルがディスクトップにあった場合は、勝手に内容が追記されてしまうのでご注意ください。
  10. 動作要件：Imagemagick が予めインストールされてある必要があります。

• P フォトアルバム＆スライド作成

  1. html ファイルと同じディレクトリ内、又は、下位のディレクトリ内から、拡張子 .jpg .JPG のファイルを探し出し、サムネイル画像で写真を一覧できる、フォトアルバムを作成します。 ついでに、スライドショーも作製されます。
  2. 同様に、拡張子 .mpg .mpeg .MPG .MPEG のファイルを探し出して、その動画へのリンクを作成します。 その動画ファイルと同じディレクトリ内に同じファイル名で拡張子 .thm .THMのファイルがあった場合は そのファイルをサムネイル用の JPEG 画像ファイルとして処理します。 ⇒動画用のサムネイル画像を置く場合は、いったん画像をJPEGとして作成しておき、拡張子を .thm に書き直してください。
  3. 画像の一覧を表示させたい部分に、カーソルを置き、実行します。マークされた部分は上書きされて消えてしまうので注意。
  4. 単純なプログラムなので、画像ファイルが壊れていた場合のエラー処理などはありません。
  5. 元の画像ファイルは加工しません。
  6. small という名前のサムネイル用のディレクトリを勝手に作成します。 フォトアルバムを作成するごとに、一旦削除されますので、同じ名前のフォルダ内に消されたくないファイルがある場合は、フォルダーを移動するなどして保護してください。
  7. スライドショー関連の html ファイルやスタイルシートファイルは small ディレクトリ内に作製されます。デザインなど、必要に応じて適宜編集してください。 スライドショー各ページの文字スタイル、配色、配置などの修正は、おおかた、この中のスタイルシートを編集することで行うことができます。
  8. 画像が大きかったり、枚数が多いとかなり時間がかかったりします。まずは数枚の画像でテストしてみてください。
  9. 実行後は、結果が表示されるまで、mi がフリーズしたような状態になりますが、異常ではありません。処理が終わるまで、mi の操作はできません。
  10. もしも、画像タグが書き込まれなかった場合は、ディレクトリ small 内に「backup.txt」というファイル名のファイルが作成されているので、この内容をコピーして貼付けてください。
  11. 動作がはじまったら、完了するまで Mac 本体をそっとしておいてあげてください。ファイルの操作やらなにやらすると、何かの拍子で画像処理をスキップしてしまう場合があるようです。
  12. オプション設定：様々なオプションを指定することができます。大きさ、明るさ、画像タグのclass属性、クリック時のtarget属性 などをコントロールできます。 オプションの記述を、半角スペース又は、改行で区切り、マーク（選択）された状態にして、実行します。
      1. サムネイル画像の大きさの上限 ⇒ オプションの記述の先頭に数字を書きます。数字が一つだけなら、 縦横両方の大きさの上限。２つを改行や空白文字で仕切って書くと、順に縦横のサイズの上限となります。単位はピクセル（画素）。例「 160 120 」
      2. 明るさの指定 ⇒ bright=1.5 と書いてマークされた状態で実行すると、明るさ1.5 で、サムネイル画像が作成されます。明るさの値は１がオリジナルと同じで、 ２まで行くと、かなり明るいです。デフォルトは1.5 に設定されています。例「 160 120 bright=1.2 」
      3. 画像のclass属性の指定 ⇒ class="hello world" と書くと、デザイン設定.helloと.world が、すべてのサムネイル画像に反映されます。 例「 160 120 bright=1.2 class="tham"」
      4. Target属性付加⇒マークする部分に、「target="_blank"」と書いておくと、クリックされた画像が新しいウインドウ（又はタブ）上に開くようになります。 「 _blank 」を書き換えて、任意の target 属性を盛り込むことができます。
      5. ファイル名の小文字化⇒マークする部分に、「komoji」又は「downcase」と書いておくと、対象となる画像ファイルのファイル名が、すべて小文字に変換されます。 これを実行する場合は、あらかじめバックアップを作成しておくことをお勧めします。
      6. 詳細情報表示⇒マークする部分に、「camera」と書いておくと、露出時間や絞り等の詳細情報が取得されます。 このオプションを選択すると、処理に時間がかかるので、気長にお待ちください。 また、加工された画像を用いた場合は、詳細情報が正しく取得できない可能性があります。全てのデジタルカメラで撮られた画像ファイルについて調査したわけではないので、 デジカメで撮ってから未加工の画像ファイルであるにも関わらず、うまく動作しなかった場合は、ご一報いただけますと助かります。
      7. 回転⇒マークする部分の行頭に特定の記号を書き、続けて、画像ファイル名を書くと、サムネイル画像を回転させて表示することができます。
         1. 行頭に“<”又は“＜”又は“←”を書くと右９０°回転です。（つまり、左が上の画像の場合。）
         2. 行頭に“>”又は“＞”又は“→”を書くと左９０°回転です。（つまり、右が上の画像の場合。）
         3. 行頭に“_”又は“＿”又は“↓”を書くと１８０°回転です。
         4. 画像ファイル名にはディレクトリ名もつけます。画像タグを書くと確実でしょう。
         5. 画像タグは、編集中のウインドウに画像ファイルをドラッグ＆ドロップして作成できます。
         6. 記述例：

            160 120 bright=1.2 > <img src="img/hoge.jpg"> img/migigaue.jpg

         7. ファイル名やディレクトリ名に日本語（とくに、ひらがな濁音）など、英語以外や特殊な記号が含まれていた場合は、ファイルの指定を検知できないかもしれません。
         8. ファイル名の中に、他のオプションのキーワードが含まれていると、有効になってしまうので注意してください。
         9. 回転するのはサムネイル画像だけで、オリジナルは加工されません。何度でもやり直すことが可能です。
      8. スライドショーの入替時間⇒マークする部分に、「interval=8」 と書いておくと、スライドショーの表示間隔が８秒になります。 デフォルトは６秒に設定されています。値は０以上の整数のみ有効です。 ページの自動送りをしたくない場合は、interval=900 など、大きな数字を入れておくと良いでしょう。ちなみに、この時間間隔は、後から個別にファイルを編集して調整できます。
      9. スライドショーループ設定⇒マークする部分に、「noloop」と書いておくと、スライドショーの再生が一周で止まるようになります。
      10. 時系列に並べる：マークされる部分に「order=time」と書いておくと、ファイルの作成時刻順に並びます。複数のカメラで撮影した場合などに便利。画像ファイルが加工されていたりした場合は加工した時刻になるかもしれません。
      11. 画像ファイル生成時刻の修正：Windows 等のメディアを経て、ファイル生成時刻の情報が損なわれてしまっている場合、マークされる部分に「fixdate」と書き込んでおくと、JPEG 画像ファイルのメタデータから撮影日を拾い出して、ファイル自体の時刻をその時刻に修正する。
  13. やり直す場合は、普通に ⌘+z で戻れます。ただし、mi のウインドウを一度閉じてしまうと、この操作はできませんので、注意してください。
  14. フォトアルバムとスライドショーのどちらかが不要な場合は、タグを削除するだけです。サムネイル画像は共通です。
  15. 大きさや明るさをかえて実行し直した場合は、表示を確認するときに、ブラウザで再読み込みをしてください。 スライドショーの画像を更新するには、フォトアルバムを削除しない状態で、再読み込みします。
  16. スライドショー雛形：スライドショーの各ページは雛形ファイルを元に作製されます。予め雛形を編集することにより、様々なスライドショーを自動生成することが可能です。 とくに、作者連絡先メールアドレス等はあらかじめ自分用に書き直しておくことをおすすめします。 雛形は下記ディレクトリ内にあります。なお、それらの記述の中の[[大文字アルファベット]] の形で入っているのはプログラムが後で値を代入する部分です。 open ~/Library/Preferences/mi/mode/aHTML/templates/html/photo-album/small/
  17. スライドショーの表示枠の大きさは、生成されたhtmlファイルを修正して、容易に変更できます。
  18. 表示される「撮影日」はファイルの作成日から取り出しています。 画像が加工されたり、圧縮されたり、メールに添付された場合は、新たに保存されたり展開された日付になってしまいます。 日付が正しくない場合は、必要に応じて適宜修正してください。
  19. 画像のファイル名やディレクトリ名に半角英数以外の文字が使われていた場合は、htmlの文字コードを UTF-8 にしてお使いください。 ウェブサーバーにアップロードする場合は、ファイルを見れなくなる可能性があるので、あらかじめファイル名やディレクトリ名を半角英数のみに変えておいてください。
  20. 動作要件：Imagemagick が予めインストールされてある必要があります。 Ruby のバージョンが 1.8 よりも古いものに関しては、考慮していません。OSX 10.3 以前の Mac を使っている人は、バージョンに気をつけてください。

• Q フォトアルバム(Background-mode)

  1. 処理内容は「P フォトアルバム＆スライドショー作成」と同じですが、タグの書き出しをしません。
  2. サムネイル画像のタグは、small フォルダー内に、backup.txt として書き出されます。
  3. 実行中でも mi での編集作業ができます。写真の量が膨大である場合にご利用ください。
  4. ただし、Mac 本体に高負荷（大きなファイルサイズの画像を大量に扱う場合など）がかかっている場合は、処理が完了するまで、Mac をそっとしておいてください。何かの拍子に画像処理をスキップしてしまう場合があります。

• T CSV_file ⇒ Table文

  1. CSV ファイルを開いて、Table 文に書き出します。表計算ソフトで作成された１つのワークシート上に複数の表があったり、セルの中に改行・カンマ・タブなどがあり、扱いが難しいケースに役立ちます。使い方は下記３通り。
     1. 編集中のウインドウに、CSV ファイルをドラッグ＆ドロップして、リンクを作成し、そのリンクをマーク(=選択)した状態で実行
        • 予め、アンカータグ<a ></a>に挟まれた部分に、表のcaptionを書いてください
        • 予め、title 属性の部分に、表のsummary属性となる部分、すなわち、見えない人に読み上げてあげる文章を入れていください
     2. 上記のリンクと同じ要領で、ネット上の CSV ファイルへのリンクを書き、実行。http又はftpでダウンロードできるファイルに限ります。 なお、ファイルをダウンロードするので、ネットに接続されていないと失敗します。
     3. 何もしないで実行すると、編集中の html ファイルと同じディレクトリか又は下位のディレクトリの中から CSV ファイルを探し出し、カーソル挿入位置に表を書き出します。
  2. table, tr, td タグそれそれに、class属性を書き込むことができます。それらの属性付きタグを書いて、リンクと一緒にマークして実行してください。class 属性を読み取ります。
  3. 書き出された表には境界線がありません。線はスタイルシートで設定してください。デザインサンプルは、スタイルシートサンプルの中から書き出すこともできます。
  4. 線は欲しいけどスタイルシートで線引きをしたくない人は、あまりおすすめできませんが、マークされる領域内に、border=1 と書き込んでおいてください。

• U uri-escape(リンク不適文字置換)

  1. リンクの記述に不適切な文字を選択的にURIエンコードします。
  2. 例えば、a">b.gif というファイル名の画像があった場合、タグを<img src="a">b.gif">と書くと、 ブラウザはaと言うファイル名のファイルを探しにいってしまいます。 そこで、画像のファイル名に、この置換を適用して、<img src="a%22%3Eb.gif">と書くと、画像は正しく表示されます。
  3. また、ユニコード以外の文字コードで、id属性に日本語を入れてしまった場合にも使えます。リンクの#以降にURIエスケープした文字を入れます。
  4. 意図しない変換が行われないように、適用する範囲を注意して選んでください。自動で範囲をサーチする設定にはなっていません。
  5. そもそも、webに不適なファイル名を使わないことが肝要です。

• J ユニコード文字列を実体参照化

  1. 表現豊かな絵文字☺や、ハングル한글など外国語のユニコード文字を、Shift_JIS 等の古い文字体系のページに表示させるために使います
  2. 保存時に不適とされた文字をマークして実行することにより、実体参照にエスケープします。例：한글⇒&#54620;&#44544;
  3. 動作環境は、OSX10.3以降。それ以前の場合は、iconv を別途インストールし、システムが参照できるようにパスを設定してください。
  4. ➤ unicode 絵文字の例

• W Wordで<web保存>したfileを洗う

  1. MS ワードで保存した html ファイルから、ゴミを洗い落として読める形にします。
  2. ファイルを一旦開き、動作させると、ファイルを読み込んで処理をし、表示画面全体を書き換えます。この時点ではまだ保存されていません。
  3. 本体は「8 他のツールの部品」の中にあります。この ⌘+y=>7w の場所にあるのは、本体を呼び出してから文字コードを調整をするものです。
  4. 手持ちの環境（比較的古い）でしかテストしていません。今後寄せられた情報から、いろんなワードの html ファイルに対応できるようにしたいと思います。

• R TOC 挿入

  1. id 属性が与えられた h1〜h6 タグを探して、一覧をリストにまとめたものを書き出します。
  2. body タグ以前に <!-- URL http://〜 --> を書き入れておくと、その場所を起点としたリンクになります。

• N SetRingtypeNavigation

  1. <body>タグと最初のheddingタグの間に、読者を誘導するナビゲーションリンクを挿入します。
     
     
  2. 使い方：起点となるindex.htmlファイルと同じディレクトリ内に、別にhtmlファイルを作成し、 ナビゲーションを挿入するページへのリンクを、そのファイル内に読者を誘導する順番に並べて書き込んで保存し、 その開いたウインドウのどこかにカーソルを置いて実行。
     ⇒リンク先のファイルに、ナビゲーション用リンクが書き込まれます。
  3. リンクは勝手に抽出するので、起点となる index.html ファイルに一通りのリンクがあるならば、その上で実行しても構いません。
  4. リンクを検出するので、ファイル名だけを書いたのでは効力がありません。
  5. 上位ディレクトリへ遡るリンクや、外部へのリンク、絶対パス等は扱いません。スキップされます。
  6. ナビゲーションリンクを、ページの上方に固定表示する場合は、ツール＞C CSS＞I id 属性用＞H header を参考にしてください。このヘルプのスタイルシートも参考になります。
  7. 注意：<body>タグと最初のheddingタグの間に書かれてあったものは消えてしまいます。 最初に試すときには、ディレクトリごとバックアップを取っておくことをお勧めします。
  8. Rubyのバージョンが1.8.2よりも古い場合は、文字化けを起こす可能性があります。OSX10.3以前の人は、rubyをアップデートしてから使ってください。
  9. デザインと挿入位置は固定ですが、今後利用者からの要望があれば、改良します。（いまのところ、自分で使うだけなので…）

• F 擬似フレーム管理

  1. index.html のメニュー欄に存在するリンクから、index.html と同じフォーマットのページを生成/更新します。
     • index.html と同じフォルダー内か又は、下位ディレクトリ内のファイルへのリンクの扱いをサポートします。
     • index*.html（*は任意の文字列）へのリンクはスキップされます。
       • これは、index-e.html 等を書き換えたりしないようにするため
       • index01/hoge.html はスキップされますが、hello/index.html はスキップされません。
     • hello/world/ へのリンクは、hello/world/index.html へのリンクと解釈されます。
  2. 使い方
     1. index.html 内に、<div id="MENU">〜</div> と <div id="MAIN">〜</div> を記述。
        • このとき、DIV の開始タグと終了タグは単独の行にすること
        • <div id="MENU">〜</div> が、メニューリンクを記述する部分になります。
        • <div id="MAIN">〜</div> が個々のページの内容を記述する部分になります。
     2. 他のページへのリンクを、<div id="MENU">〜</div> 内に記述します。
        • リンク部分をリスト<li>で括ってください。表示中のページのリンク部分には、<li class="selected"> が割り当てられます。
        • index.html の自身へのリンク部分には、<li class="selected"> を使ってください。他のページが生成されたときの戻り先になります。
        • リストタグのデザインはスタイルシートで行ってください。
  3. タイトルタグに文字列 HOME を含めておくと：<title>〜Home</title> 、個々のページで、Home 部分が、リストタグに書かれた文字列に置き換わります。
     • <li><a href="hoge.html"><!-- hello -->world</a></li> とした場合は、hoge.html タイトル中の Home 文字列部分は、helloworld に置き換わります。
  4. 初回の実行で、リンク指定したhtmlファイルが生成されます。既にファイルが存在している場合は、 <div id="MAIN">〜</div> 部分以外が全て置き換わります。

• 6 File名⇒Base64エンコードデータ

  1. 画像などのファイル名の部分をマークして実行すると、データがHTML本文中に埋め込まれます。
  2. mime type の設定は、~/Library/Preferences/mi/mode/aHTML/defaluts/mime.types に記述します。

• O このフォルダーを開く

  1. シェルスクリプトを編集するときに、シェルスクリプトのフォルダーを開きます。これ自体は、たぶん、一番簡単なシェルスクリプトです。

• 8 他のツールの部品

  1. 主に他のツールから呼び出されて使われるシェルスクリプトをまとめてあります

• 8 > Q 選択部分を隠し保存してブラウズ > D defalut (^⌘+r にて使用)

  1. 「ツール⇒Y ブラウズ⇒U 保存しないで複製をラウズ(^⌘+R)」のための部品です。
  2. 選択部分文字列をピリオドで始まる隠しファイルとして保存し、ブラウズします。その隠しファイルは、次にこの機能を使ったときに消去されます。
  3. ツール78Sにて予め一時保存されたタグの中に含まれるid属性を拾い出して、そこまでスクロールして表示されます。
  4. ブラウザは、特に指定しない限り「デフォルト」に設定したブラウザが使われます。
  5. このツールを複製して、名前の一部をブラウザ名に変更すると、そのブラウザで表示されます。
     • 例：D default ⇒ F firefox
     • Safari, Shiira, Opera, Mozilla, Camino, iCab, OmniWeb, SeaMonkey, Firefox, ie に対応。
     • 「Firefox」は「fx」と略記できます。
     • このツールのコピーを作成後、「ツール⇒Y ブラウズ⇒U 保存しないで複製をラウズ(^⌘R)」のファイルをコピーし、 KEYTOOLの引き数を変更して、toolやtoolbarに使うことができます。

• 8 > R  id属性を探してブラウス > D defalut (⌘+r にて使用)

  1. 「ツール⇒Y ブラウズ⇒R IDサーチブラウズ(⌘+R)」のための部品です。
  2. 選択部分の先頭又はその前の部分からid属性を探し出して、そこまでスクロールして表示します。
  3. ブラウザは、特に指定しない限り「デフォルト」に設定したブラウザが使われます。
  4. このツールを複製して、名前の一部をブラウザ名に変更すると、そのブラウザで表示されます。
     • 例：D default ⇒ F firefox
     • Safari, Shiira, Opera, Mozilla, Camino, iCab, OmniWeb, SeaMonkey, Firefox, ie に対応。
     • 「Firefox」は「fx」と略記できます。
     • このツールのコピーを作成後、「ツール⇒Y ブラウズ⇒R IDサーチブラウズ(⌘R)」のファイルをコピーし、 KEYTOOLの引き数を変更して、toolやtoolbarに使うことができます。
  5. このツールを使う人は、日ごろから見出し行のタグにID属性を入れる習慣をつけておくと良いでしょう。
  6. Cyberduck から開いた一時保存ファイルの場合、該当するURLを開きます。ただし、
     1. cyberduck のブックマークには「パス」と「URL」が正しく記述されている必要がある。
        
     2. パスに対応した URL でなければいけない。
     3. パスの記述がない場合は、public_html, www, www1, www2, ... 以下のパスを想定する。
     4. 最後にアクセスしたブックマークからデータを取るので、複数のブックマークを開いた場合には対応できない
     5. ブックマークでアクセスしたディレクトリから見て下位のディレクトリにしか対応しない
     6. html 本文中、<body> タグ以前に、以下の記述をすると、優先的にその場所「http://hoge.test/hoge.html」を表示する
        <!-- URL http://hoge.test/hoge.html -->

• X CHECKXHTMLFORMONOTAG

  1. ファイルを読みに行って、XTHML or HTML を判別し、XHTML であったら、“ /”を出力する