サンプルページ　　ViewLink （IEでWebページを編集）

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ViewLink　　view_link.htm

Webﾍﾟｰｼﾞ上で、編集可能なﾍﾟｰｼﾞ。　　　　ViewLinkﾋﾞﾍｲﾋﾞｱ（振る舞い）を応用した、ﾃｷｽﾄｴﾃﾞｨﾀｰ。　　　　　　UIを生成する HTML を呼び出し元のﾄﾞｷｭﾒﾝﾄに挿入しておかなくても、そのUIが閲覧時に表示されるｴﾚﾒﾝﾄﾋﾞﾍｲﾋﾞｱです。　　ｿｰｽの表示で見えるのは要素を表すﾀｸﾞです。　　　　MSHTML。　　　　　IE5.5～対応です。　　　　　ｺﾋﾟｰ、編集して制作者の情報を反映、簡単にWebで応用できます。

ﾃﾞﾓは、ﾀｲﾌﾟｲﾝ”らくがき” を行い、編集ﾎﾞﾀﾝをお試しあれ！。　　　不調〔ｴﾃﾞｨﾀｰが表示されない〕時は、［F5］ｷｰ　を押しﾘﾛｰﾄﾞをお試しあれ！。　ie設定や、互換表示・設定で。　

<ご使用方法>

　・　ﾛｰｶﾙ（=PC）への保存は、　view_link.htm、oka0445.htc を右ｸﾘｯｸします。　　　[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで行います。　　　※1:ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は多少ある）。　　　 ※2:hogehoge.html ：制作者が名付けた挿入先ﾌｧｲﾙの総称。

　・　PCに保存したﾌｧｲﾙを WordPad や SmipleText などのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　<ご使用方法>などの、不要な文字は削除します。　　　このDHTMLの実装方法は、♪ をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、挿入先（新しいﾍﾟｰｼﾞ 1 や hogehoge.html）の、　<html>　～　</head>の間の任意の行”～”部分に、 (*1)を〔<html> は、<html xmlns:x> に変更。〕、さらに　　<body>　～　</body>の間の任意の行”～”部分に、(*2)をﾍﾟｰｽﾄします。

　･　編集方法 ：下記の（例）(*1)と、(*2)、(*3)　を参考に太字部分の編集を行い、制作者の情報・意図などを反映させます。　　　　　ﾊﾟﾗﾒｰﾀｰの変更も該当部分の記述/追加/変更/削除で行います。　　　　説明のための太字、彩色自体に依存なし。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 5.5～などで開き行います。　　　次のようにﾒﾆｭｰを辿り設定を確認します。　【Internet Explorer】-[ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [ｾｷｭﾘﾃｨｰ] - [ﾚﾍﾞﾙのｶｽﾀﾏｲｽﾞ] - [その他] - [IFRAMEのﾌﾟﾛｸﾞﾗﾑ…]：◎ 有効にする。　[UserDataの常設]：◎ 有効にする。　　　非作動原因（≒非更新確認）にﾌﾞﾗｳｻﾞｰのｷｬｯｼｭに残っている前ﾃﾞｰﾀがあります。　　目的のﾍﾟｰｼﾞを表示させた状態で、Internet Explorer で再読込みのために、Ｆ５ｷｰを押し最新ﾃﾞｰﾀを読み込みます。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、hogehoge.html、oka0445.htc などを転送/配置後に実施します。　　　FTPなどで変わってしまったﾌｧｲﾙ名は修正します。　　　　ｽｸﾘﾌﾟﾄ中への改行混入は非作動原因。

(*1) ：　 view_link.htm　（例）　　　　　　　挿入先の　<html> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

互換表示

<head>

<?import namespace=x implementation="oka0445.htc" />

</head>

(*2) ：　view_link.htm　（例）　　　　　　　挿入先の　<body> ～ </body>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

1行1列の表：罫線ｻｲｽﾞ　幅

<tr>

</tr>

</table>

</center>

</div>

(*3) ：　 oka0445.htc　（例）　　　　　　

　*.htc の編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

ｴﾘｱｻｲｽﾞ　背景　▼色　　ｽｸﾛｰﾙﾎﾞﾀﾝ色

ｺﾝﾃﾝﾂｻｲｽﾞ　　書体　　

基本色

吹き出し

<public:component tagName=editBox>

<public:defaults viewLinkContent/>

</public:component>

<br>

<div id=foo contenteditable align=left

style="height:400; width:700;background-color:white; font-face:MSPｺﾞｼｯｸ; padding:1;

border:inset #B698E8; scrollbar-base-color:#B698E8; overflow=auto;">

</div>

<br>

<button unselectable="On" onclick='document.execCommand("Bold");foo.focus();'

style="background-color:#B698E8; border-color:#B698E8" title="太字">

==== この間､説明を省略｡ ====

<button unselectable="On" onclick='document.execCommand("JustifyCenter");foo.focus();'

style="background-color:#B698E8; border-color:#B698E8" title="中央寄せ">

<br>

<button unselectable="On" onclick='document.execCommand("Cut");foo.focus();'

style="background-color:#B698E8; border-color:#B698E8"><B>切り取り</B></button>

<button unselectable="On" onclick='document.execCommand("Copy");foo.focus();'

style="background-color:#B698E8; border-color:#B698E8"><B>ｺﾋﾟｰ</B></button>

<button unselectable="On" onclick='document.execCommand("Paste")'

style="background-color:#B698E8; border-color:#B698E8"><B>貼り付け</B></button>

<button unselectable="On" onclick='document.execCommand("Overwrite");foo.focus();'

style="background-color:#B698E8; border-color:#B698E8"><B>上書き</B></button>

</div>