RETURN

■Zaurus の楽しみ方



■ 愛用エディタをHTMLエディタ化する編

 SL−C700に限らず、携帯端末の質問でよく目に付くのが、

携帯端末でホームページの更新はできるのか?

という質問です。

 SL−C700に関して結論を言えば、

  1. ネットにつなぐ環境
  2. テキストエディタ
  3. FTPソフト
  4. HTMLの知識

 があればできます。

  以上で問題解決――ってんじゃ面白くありません。

 HTMLはテキストエディタがあれば簡単にかけます。専用のHTMLエディタは不要です。よく使うタグなんでユーザー辞書に登録しておけばOKです。でも、やっぱりHTMLエディタが欲しい。リナザウのHTMLエディタもないこともないですが、決して快適に使えるものではなかったり、開発途上であったり……。多分、今ではCGIを使ってブラウザからホームページ更新というのが主流ですから需要が少ないからでしょう。

 ってことで、HTMLエディタを作っちゃいましょう。作るといってもプログラミングするわけではありません。KeyHelperというツールを使って、擬似的にお手持ちのテキストエディタをHTMLエディタに変身させちゃおう、ってわけです。

KeyHelper+yEdit for HTML

 お手軽にできるわけではありませんが、ちょいと根気があれば簡単にできますのでお試しあれ。

2003/4/30




 必要なものを揃えましょう

 KeyHelperとテキストエディタでSL−C700専用HTMLエディタを作るには、

 の3つが必要です。各々インストールしてください。

 テキストエディタは、

 などからご自分の好みにあったものをご準備下さい。詳しくは、「テキストエディタを探せ!編」をご覧下さい。

 KeyHelperの導入に関しては、「KeyHelper導入ツアー」を参考にしてください。

 以下の説明は、これらの準備ができたこと、KeyHelperの設定ファイルについて理解していることを前提にしています。

根気のインストールも忘れずに(^-^)。

2003/4/30




 KeyHelperの設定ファイル

 KeyHelperのキー設定ファイル拡張設定ファイル拡張設定ファイルの切替複数メニューの設置サブメニューの設置について理解しているものとして話を進めます。KeyHelperの設定が本分ではないもので(^^;。

作 業 手 順

 KeyHelperの設定で作業することは、

  1. HTML専用拡張設定ファイルの設置
  2. HTML専用拡張設定ファイルの読込みの設定
  3. HTML専用化アイコンの設置

 以上です。作業自体は簡単です。理屈が解ればなお簡単。

(1) HTML専用拡張設定ファイルの設置

 下記のKeyHelper拡張設定ファイル keyhelper_html.conf を ” /home/zaurus/Settings/”に設置します。これはテキストエディタをHTML化するための専用の拡張設定ファイルです。お好み、必要に応じて書き直してください。

 この例では [Menu3] まで使用していますので、キー定義設定ファイル keyhelper.xml も [Menu3] まで使用できるように設定する必要があります。

[TAB] はタブコードを入力することで、”[TAB]”と文字を打ち込むのではありません。

keyhelper_html.conf
[Global]
UseFilterApps =
XmlFile =
CharSet = ShiftJIS
SubMenuTimeout = 500
[Launch]
E = Applications/zeditor
N = __7x020netmon
Y = Applications/yEdit
Backspace = __9quit
Return = @text <br>%n

[Menu]
#= ランチャ
01_netfront(&N) = Applications/netfront3
02_mail(&M) = Applications/qtmail
04_calc(&K) = Applications/calculator
05_imgview(&I) = Applications/imgview

[Menu2]
#= HTML
05_改行<br>(&K) = @text [TAB] <br> [TAB] html/tag_br
06_段落<p>(&P) = @text [TAB] <p>%n</p> [TAB] html/tag_p
22_配置 = @menu [TAB] sub22 [TAB] slfolder
23_リンク = @menu [TAB] sub23 [TAB] slfolder
24_リスト = @menu [TAB] sub24 [TAB] slfolder
25_表(&T) = @menu [TAB] sub25 [TAB] slfolder
31_属性(&C) = @menu [TAB] sub31 [TAB] slfolder
41_色コード(RGB)(&C) = @menu [TAB] sub41 [TAB] slfolder

[Menu3]
#= conf切替
01_kh_change_Default(&D) = @qcop [TAB] QPE/KeyHelper config() [TAB] Redo.png

[Sub22]
#= HTML sub 配置
02_中央<div_center>(&Q) = @text [TAB] <div align="center"></div> [TAB] html/tag_div_center
03_右寄せ<div_right>(&Q) = @text [TAB] <div align="right"></div> [TAB] html/tag_div_right
04_左寄せ<div_left>(&Q) = @text [TAB] <div align="left"></div> [TAB] html/tag_div_left
07_引用<blockquote>(&Q) = @text [TAB] <blockquote>%n</blockquote> [TAB] html/tag_blockquote

[Sub23]
#= HTML sub リンク
02_<a_blank>**</a>(&A) = @text [TAB] <a href="" target="_blank">%clipboard%</a> [TAB] html/tag_a_blank_insert
03_<a>**</a>(&A) = @text [TAB] <a href="">%clipboard%</a> [TAB] html/tag_a_insert
04_<a_blank></a>(&A) = @text [TAB] <a href="" target="_blank"></a> [TAB] html/tag_a_blank
05_<a></a>(&A) = @text [TAB] <a href=""></a> [TAB] html/tag_a

[Sub24]
#= HTML sub リスト
01_リスト(&U) = @text [TAB] <ul>%n<li>%n</ul> [TAB] html/tag_ul_li
02_番号リスト(&O) = @text [TAB] <ol>%n<li>%n</ol> [TAB] html/tag_ol_li
03_リスト項目(&L) = @text [TAB] <li> html/tag_li

[Sub25]
#= HTML sub 表
01_セル<td>(&D) = @text [TAB] <td></td> [TAB] html/tag_td
02_行<tr>(&R) = @text [TAB] <tr>%n</tr> [TAB] html/tag_tr
03_表<table>(&T) = @text [TAB] <table align="" border="" cellpadding="" cellspacing="" width="">%n%t<tr>%n%t%t<td></td>%n%t</tr>%n</table> [TAB] html/tag_table

[Sub31]
#= HTML sub 属性
34_横位置align(&A) = @menu [TAB] sub34 [TAB] slfolder

[Sub34]
#= HTML sub 属性:横位置
03_center(&C) = @text [TAB] align="center" [TAB] html/tag_div_center
04_right(&R) = @text [TAB] align="right" [TAB] html/tag_div_right
05_left(&L) = @text [TAB] align="left" [TAB] html/tag_div_left

[Sub41]
#= HTML sub 色コード
01_black(&K) = @text [TAB] #000000 [TAB] html/color_black
02_gray = @text [TAB] #808080 [TAB] html/color_gray
03_silver = @text [TAB] #c0c0c0 [TAB] html/color_silver
04_white(&W) = @text [TAB] #ffffff [TAB] html/color_white
05_blue(&A) = @text [TAB] #0000ff [TAB] html/color_blue
06_navy = @text [TAB] #000080 [TAB] html/color_navy
07_teal = @text [TAB] #008080 [TAB] html/color_teal
08_green(&G) = [TAB] @text #008000 [TAB] html/color_green
09_aqua = @text [TAB] #00ffff [TAB] html/color_aqua
10_lime = @text [TAB] #00ff00 [TAB] html/color_lime
11_yellow(&Y) = @text [TAB] #ffff00 [TAB] html/color_yellow
12_magenda(&M) = @text [TAB] #ff00ff [TAB] html/color_magenda
13_olive = @text [TAB] #808000 [TAB] html/color_olive
14_purple = @text [TAB] #800080 [TAB] html/color_purple
15_maroon = @text [TAB] #800000 [TAB] html/color_maroon
16_red(&R) = @text [TAB] #ff0000 [TAB] html/color_red
17_orange(&O) = @text [TAB] #ffa500 [TAB] html/color_orange
18_brown = @text [TAB] #a52a2a [TAB] html/color_brown
19_pink(&P) = @text [TAB] #ffc0cb [TAB] html/color_pink
20_ivory = @text [TAB] #fffff0 [TAB] html/color_ivory

[Style]
FontColor_select = #FFFFFF
BgColor_select = #ff0000
Caption_select = (HTML) TaskSelector
FontColor_menu = #FFFFFF
BgColor_menu = #ff0000
Caption_menu = (HTML) TaskMenu
FontColor_menu2 = #ffffff
BgColor_menu2 = #ff0000
Caption_menu2 = (HTML) Tags
FontColor_menu3 = #FFFFFF
BgColor_menu3 = #ff0000
Caption_menu3 = (HTML) Setting

(2) HTML専用拡張設定ファイルの読込みの設定

 上で設置したHTML専用拡張設定ファイルを読込んで、KeyHelperをHTML専用化させます。

 お使いの拡張設定ファイルの適当な[Menu]に赤い部分を追記してください。

 実行することで、拡張設定ファイル keyhelper.conf をHTML専用の keyhelper_html.conf に読み替えます。
 上記のHTML専用の keyhelper_html.conf にはデフォルトの拡張設定ファイル keyhelper.conf に読み替える命令文もありますので、デフォルト←→HTML専用と切換えできるようになります。

keyhelper.conf デフォルトの拡張設定ファイルに追加
[Menu]
02_kh_change_HTML(&H) = @qcop [TAB] QPE/KeyHelper config(QString) [TAB] keyhelper_html Redo.png

(3) HTML専用化アイコンの設置

 アイコンの設置は必須ではありませんが、それっぽく見せるためには是非ともお使い下さいませ。

HTML専用化アイコン・セット

  1.  ZIP圧縮しておりますので、パソコン等で解凍して下さい。

  2.  続いて、SL−C700本体メモリに

           /home/QtPalmtop/pics/

     というディレクトリがありますので、その下に”html”というディレクトリを作成して下さい。

           /home/QtPalmtop/pics/html/
  3.  作成したディレクトリの中に、上記で解凍したアイコンを全て置いてください。

 以上です。

2003/4/30




 使ってみよう

エディタを起動する

 お好みのエディタを起動してください。最初は新規作成の画面で試されるといいでしょう。

HTMLエディタ専用拡張設定に切り換える

 先ほど、(2) HTML専用拡張設定ファイルの読込みの設定 でお手持ちの拡張設定ファイルに追加いただいた、

02_kh_change_HTML(&H) = @qcop [TAB] QPE/KeyHelper config(QString) [TAB] keyhelper_html Redo.png

 を呼びだしてください。ボクの場合は、このようなメニューで切り換えています。切り換えただけでは特に見かけの変化はありません。

2003/5/1


HTMLエディタ専用拡張設定に切り換える

 上記の(1) HTML専用拡張設定ファイルの設置 で設定したそれぞれのメニューを呼び出してください。実態はテキストの挿入ですから、選択すると文字列が入力されていきます。試していただけると何をしたいのか解るでしょう。

KeyHelper+yEdit

 注意していただきたいのがリンクタグの挿入です。

02_<a_blank>**</a>(&A) = @text [TAB] <a href="" target="_blank">%clipboard%</a> [TAB] html/tag_a_blank_insert
03_<a>**</a>(&A) = @text [TAB] <a href="">%clipboard%</a> [TAB] html/tag_a_insert

04_<a_blank></a>(&A) = @text [TAB] <a href="" target="_blank"></a> [TAB] html/tag_a_blank
05_<a></a>(&A) = @text [TAB] <a href=""></a> [TAB] html/tag_a

 上の2つは「キーワード展開機能」を使っています。つまり、クリップボードの文字列も一緒に”%clipboard%”の部分に貼り込むのです。
 例えば、

この私家版携帯端末考ってサイトを読むと腹が立つ。

 と「私家版携帯端末考」の文字列を選択して、[Fn]+[c]等でコピーします。続いて、KeyHelperで上記のリンクタグ(02のパターン)を書き込むと、

この<a href="" target="_blank">私家版携帯端末考</a>ってサイトを読むと腹が立つ。

 というタグがコピーした文字列と一緒に書き込まれます。

2003/5/1

HTMLエディタ専用拡張設定を終了する

 HTMLエディタを終了するには元の拡張設定ファイルを読込みます。上記の例なら[Menu3]の

01_kh_change_Default(&D) = @qcop [TAB] QPE/KeyHelper config() [TAB] Redo.png

 を実行するわけです。

2003/5/1






BACK