 |
News,blog & history 
ニュース 実写版だよ。観たいねえ。
本日関連のブログ Webページ上で、文字に修飾できるエディター（編集機能）が完成したので、再度お知らせ。いくつかの問題が残されているものの、パソコンおよびスマホのいずれのブラウザでも利用できる。いよいよ『子猫の手 Ver.3』の作成に取り掛かれる。
【問題点】
(1) Windows10+Microsoft Edge,IEにおいて、CSSによる書き出しに対応していない。HTML5で廃止された<font>タグ、<strike>タグを使用してしまう。それらのタグは、ブラウザの方でサポートされているので、問題は回避できている。
--
・Windows10+Microsoft Edge,IE
<font color="red" size="5"><strike>赤色</strike></font>
・CSS書き出しに対応しているブラウザ
<span style="color: red; font-size: x-large; text-decoration-line: line-through;">赤色</span>
--
(2) Windows10+Microsoft Edge,IEにおいて、修飾を繰り返すことによって、不要なタグが残る場合がある。表示に影響しないので、問題は回避できている。
(3) 上付き、下付きでは、Windows10+Microsoft Edge,IEにおいて文字が小さくなるが、その他のブラウザでは同じサイズであり、表示に違いがある。
(4) Windows10+Google Chromeにおいて、全角文字が斜体で表示できない。
(5) パソコンでは、文字選択中は文字が反転したままなので、特に文字色の反映が確認しにくい。
(6) スマホでは、画面が小さいので使いづらい。
【プログラミングのポイント】
※ソースは、ブラウザからご確認下さい。
(1) 編集エリアを指定する。
--
<body>
<div id="id_html" contentEditable="true"></div>
</body>
--
(2) CSSによる書き出しに設定する。
styleWithCSSコマンドに対応していないブラウザがあることは、悲しむべきことである。
加えて、ページ更新するとフォームのラジオボタンで不可解な挙動をするブラウザに対処するために、checkedを記述した文字色の方にわざわざチェックを入れている。
編集エリアをフォーカスすることで、パソコンではカーソルが明示される。
--
<script>
window.onload = _setup;
function _setup(){
document.execCommand("styleWithCSS",0,true);
document.forms[0].color[0].checked = true;
document.getElementById("id_html").focus();
}
</script>
--
(3) 修飾用のボタンにフォームのボタンを使用することで、文字選択が外れない。
今回は、簡易的に<input type="button" value="文字">を利用して、ボタン内に文字を表示した。ボタンに画像を表示するには、<input type="image" src="ファイル名">や<button type="button"><img src"ファイル名"><br>文字</button>を利用すれば良い。
--
<body>
<form>
<input type="button" class="btn" style="font-weight:bold;" value="B" title="Bold" onclick="_exec('bold')">
</form>
</body>
--
(4) 修飾関数_exec()の設定
createLinkコマンドの場合、リンク先のアドレスをprompt()で入力させている。なお、カラー指定は別にしている。
--
<script>
function _exec($cmd,$val){
switch($cmd){
case "createLink":
$val = prompt("link","http://");
if($val==null || $val==""){
break;
}
default:
document.execCommand($cmd,false,$val);
}
}
</script>
--
下記のコマンドを_exec()で利用した。
--
justifyLeft
justifyCenter
justifyRight
outdent
indent
insertUnorderedList
insertOrderedList
bold
italic
underline
strikeThrough
superScript
subScript
createLink
unlink
fontSize
insertText
--
createLinkに関して、さらに開発中。またもや、EdgeやIEが邪魔をする。Microsoft最低！
insertTextが利用できるようになっていたのには驚いた。簡単に、文字の挿入および置換ができた。
(5) カラー関数_color()の設定
文字色と背景色には、基本17色を含む35色をパレットにした。ガレコレのイメージカラーであるPink345(#ff0040)、サンズイのイメージカラーであるAqua170(#00ffd5)を、独断と偏見で入れてある。
ラジオボタンで［文字色］と［背景色］を切り替えて、パレットを使用する。
--
<script>
function _color($val){
if(document.forms[0].color[1].checked){
$cmd = "backColor";
if($val == "white"){
$color = "transparent";
}
}else{
$cmd = "foreColor";
}
document.execCommand($cmd,false,$val);
}
</script>
--
カラー指定のコマンドは下記の２つである。
--
foreColor
backColor
--
今回、初期値が、文字色black、背景色無しtransparentである。初期値を指定した場合、ブラウザが自動的に判断してくれて、HTMLタグが削除される。ゴミが残るブラウザは、言わずと知れたMicrosoft社のものである。
(6) HTMLタグを書き出す関数_html()の設定
innerTextが利用できるようになっていたのには驚いた。簡単に記述できた。HTMLタグ書き出しエリアを、別に設けている。
createLinkコマンドで作成した<a>タグに、setAttribute()でtarget="_blank"を追記して、リンクを新しいウインドウ（タグ）で表示するようにした。
--
<script>
function _html(){
$target = document.getElementsByTagName("a");
for($i=0; $i < $target.length; $i++){
$target[$i].setAttribute("target","_blank");
}
document.getElementById("id_text").innerText = document.getElementById("id_html").innerHTML;
}
</script>
--
(7) コマンドをリセットする関数_reset()の設定
実は、(6)と逆のことをやっているだけである。編集エリア自身に書き出している。
--
<script>
function _reset(){
if( confirm("Do you reset commands?") ){
document.getElementById("id_html").innerHTML = document.getElementById("id_html").innerText;
}
}
</script>
--
(8) その他の修飾方法
パソコンでは、下記のショートカットキーが利用できる。
--
[Ctrl]+[B]: Bold
[Ctrl]+[I]: Italic
[Ctrl]+[U]: Underline
[Ctrl]+[C]: Copy
[Ctrl]+[V]: Paste
[Ctrl]+[Z]: Undo
[Ctrl]+[Y]: Redo
--
iPhone (Safari)では、文字を選択したあと、ダイアログの右側▶をクリックすると[BIU]が表示される。これをタップすると［ボールド｜イタリック｜アンダーライン］に切り替わり、いずれかをタップする。
【問題点】
(1) Windows10+Microsoft Edge,IEにおいて、CSSによる書き出しに対応していない。HTML5で廃止された<font>タグ、<strike>タグを使用してしまう。それらのタグは、ブラウザの方でサポートされているので、問題は回避できている。
--
・Windows10+Microsoft Edge,IE
<font color="red" size="5"><strike>赤色</strike></font>
・CSS書き出しに対応しているブラウザ
<span style="color: red; font-size: x-large; text-decoration-line: line-through;">赤色</span>
--
(2) Windows10+Microsoft Edge,IEにおいて、修飾を繰り返すことによって、不要なタグが残る場合がある。表示に影響しないので、問題は回避できている。
(3) 上付き、下付きでは、Windows10+Microsoft Edge,IEにおいて文字が小さくなるが、その他のブラウザでは同じサイズであり、表示に違いがある。
(4) Windows10+Google Chromeにおいて、全角文字が斜体で表示できない。
(5) パソコンでは、文字選択中は文字が反転したままなので、特に文字色の反映が確認しにくい。
(6) スマホでは、画面が小さいので使いづらい。
【プログラミングのポイント】
※ソースは、ブラウザからご確認下さい。
(1) 編集エリアを指定する。
--
<body>
<div id="id_html" contentEditable="true"></div>
</body>
--
(2) CSSによる書き出しに設定する。
styleWithCSSコマンドに対応していないブラウザがあることは、悲しむべきことである。
加えて、ページ更新するとフォームのラジオボタンで不可解な挙動をするブラウザに対処するために、checkedを記述した文字色の方にわざわざチェックを入れている。
編集エリアをフォーカスすることで、パソコンではカーソルが明示される。
--
<script>
window.onload = _setup;
function _setup(){
document.execCommand("styleWithCSS",0,true);
document.forms[0].color[0].checked = true;
document.getElementById("id_html").focus();
}
</script>
--
(3) 修飾用のボタンにフォームのボタンを使用することで、文字選択が外れない。
今回は、簡易的に<input type="button" value="文字">を利用して、ボタン内に文字を表示した。ボタンに画像を表示するには、<input type="image" src="ファイル名">や<button type="button"><img src"ファイル名"><br>文字</button>を利用すれば良い。
--
<body>
<form>
<input type="button" class="btn" style="font-weight:bold;" value="B" title="Bold" onclick="_exec('bold')">
</form>
</body>
--
(4) 修飾関数_exec()の設定
createLinkコマンドの場合、リンク先のアドレスをprompt()で入力させている。なお、カラー指定は別にしている。
--
<script>
function _exec($cmd,$val){
switch($cmd){
case "createLink":
$val = prompt("link","http://");
if($val==null || $val==""){
break;
}
default:
document.execCommand($cmd,false,$val);
}
}
</script>
--
下記のコマンドを_exec()で利用した。
--
justifyLeft
justifyCenter
justifyRight
outdent
indent
insertUnorderedList
insertOrderedList
bold
italic
underline
strikeThrough
superScript
subScript
createLink
unlink
fontSize
insertText
--
createLinkに関して、さらに開発中。またもや、EdgeやIEが邪魔をする。Microsoft最低！
insertTextが利用できるようになっていたのには驚いた。簡単に、文字の挿入および置換ができた。
(5) カラー関数_color()の設定
文字色と背景色には、基本17色を含む35色をパレットにした。ガレコレのイメージカラーであるPink345(#ff0040)、サンズイのイメージカラーであるAqua170(#00ffd5)を、独断と偏見で入れてある。
ラジオボタンで［文字色］と［背景色］を切り替えて、パレットを使用する。
--
<script>
function _color($val){
if(document.forms[0].color[1].checked){
$cmd = "backColor";
if($val == "white"){
$color = "transparent";
}
}else{
$cmd = "foreColor";
}
document.execCommand($cmd,false,$val);
}
</script>
--
カラー指定のコマンドは下記の２つである。
--
foreColor
backColor
--
今回、初期値が、文字色black、背景色無しtransparentである。初期値を指定した場合、ブラウザが自動的に判断してくれて、HTMLタグが削除される。ゴミが残るブラウザは、言わずと知れたMicrosoft社のものである。
(6) HTMLタグを書き出す関数_html()の設定
innerTextが利用できるようになっていたのには驚いた。簡単に記述できた。HTMLタグ書き出しエリアを、別に設けている。
createLinkコマンドで作成した<a>タグに、setAttribute()でtarget="_blank"を追記して、リンクを新しいウインドウ（タグ）で表示するようにした。
--
<script>
function _html(){
$target = document.getElementsByTagName("a");
for($i=0; $i < $target.length; $i++){
$target[$i].setAttribute("target","_blank");
}
document.getElementById("id_text").innerText = document.getElementById("id_html").innerHTML;
}
</script>
--
(7) コマンドをリセットする関数_reset()の設定
実は、(6)と逆のことをやっているだけである。編集エリア自身に書き出している。
--
<script>
function _reset(){
if( confirm("Do you reset commands?") ){
document.getElementById("id_html").innerHTML = document.getElementById("id_html").innerText;
}
}
</script>
--
(8) その他の修飾方法
パソコンでは、下記のショートカットキーが利用できる。
--
[Ctrl]+[B]: Bold
[Ctrl]+[I]: Italic
[Ctrl]+[U]: Underline
[Ctrl]+[C]: Copy
[Ctrl]+[V]: Paste
[Ctrl]+[Z]: Undo
[Ctrl]+[Y]: Redo
--
iPhone (Safari)では、文字を選択したあと、ダイアログの右側▶をクリックすると[BIU]が表示される。これをタップすると［ボールド｜イタリック｜アンダーライン］に切り替わり、いずれかをタップする。
過去のボレコ（ブログ）
【注目】
高知家・まるごと東部博（平成27年） 奈半利町の『魔のＳ字カーブ』に、ご注意下さい。
【お仕事】
ガレコレでは、各部署がいつでも独立できるように、部署名に将来の屋号を取り入れています。
/// Webカメラ ///
＠奈半利町海浜センター
（海辺の自然学校）
--
●2017年4月8日
今年2017年は、ゴールデンウィークから泳げたらいいですね。ガレコレ店舗（兼住宅）の整理整頓が進み、シュノーケリングのお客さんの受け入れ態勢が整ってきました。
あとは、お天気次第です。これだけはどうにもならないので、海の状況を逐一お知らせして、良き日に合わせて、ご来店頂こうと考えています。今季もよろしくお願いします。
--
●2017年4月8日
今年2017年は、ゴールデンウィークから泳げたらいいですね。ガレコレ店舗（兼住宅）の整理整頓が進み、シュノーケリングのお客さんの受け入れ態勢が整ってきました。
あとは、お天気次第です。これだけはどうにもならないので、海の状況を逐一お知らせして、良き日に合わせて、ご来店頂こうと考えています。今季もよろしくお願いします。
--
--
●2017年4月8日
『子猫の手 Ver.2.6』リリース。
順次、画像のサムネールのサイズを、240pxから480pxに差し替えていきます。
●2016年10月1日
『子猫の手 Ver.2.5』リリース。
●2015年2月16日
『子猫の手 Ver.2』リリース。
--
●2017年4月8日
『子猫の手 Ver.2.6』リリース。
順次、画像のサムネールのサイズを、240pxから480pxに差し替えていきます。
●2016年10月1日
『子猫の手 Ver.2.5』リリース。
●2015年2月16日
『子猫の手 Ver.2』リリース。
--
【日時】土曜 19:00～20:30
※火曜の練習は、みんなの体調が整ってから、再開します。
【場所】ガレコレ 畳の間
※仮設道場を組み立て中
【月謝】三千円（2017年4月1日～）
※なお、加領郷小学校の体育館で行うイベントは、奈半利町体育会扱いで、無料です。
--
●2017年4月8日
2007年1月から行っている公開練習も、今年で10年経過しました。内弟子も１名育っており、ようやく演武もできそうです。仮設道場も組み立て中です。
--
※火曜の練習は、みんなの体調が整ってから、再開します。
【場所】ガレコレ 畳の間
※仮設道場を組み立て中
【月謝】三千円（2017年4月1日～）
※なお、加領郷小学校の体育館で行うイベントは、奈半利町体育会扱いで、無料です。
--
●2017年4月8日
2007年1月から行っている公開練習も、今年で10年経過しました。内弟子も１名育っており、ようやく演武もできそうです。仮設道場も組み立て中です。
--
仮設道場、組み立て中
【ガレコレって？】
【情報集】
【ゲーム】
トドロは、パズル、シミュレーション、RPGが大好きです。昔は、ゲームを作ったりしていましたが、最近は遊ぶ一方です。スマホのゲームは楽しいですね。
『au』のiPhone5cに、乗り換えました。
電話番号は、今までと同じです。
MMS［マルチメディア・メッセージ・サービス］（インターネットメール）のアドレスは、下記のように変更となります。
*@docomo.ne.jp → *@ezweb.ne.jp
（*は同じ）
SMS［ショート・メッセージ・サービス］（電話番号メール）も、利用できます。
電話番号は、今までと同じです。
MMS［マルチメディア・メッセージ・サービス］（インターネットメール）のアドレスは、下記のように変更となります。
*@docomo.ne.jp → *@ezweb.ne.jp
（*は同じ）
SMS［ショート・メッセージ・サービス］（電話番号メール）も、利用できます。
Since 2015/11/26 総数88504 昨日128 今日047
お問い合わせby Network Communication Note