スマホ/幅480px/幅640px

News,blog & history


ニュース
19時~

 ご興味のある方は、運動できる服装で、奈半利町平のガレコレに来てみて下さい。見学や体験は無料ですので、お気軽にどうぞ。
 
 迷走台風5号の影響で、8月前半は透明度が出ず、中止とさせてもらってました。

 お盆を過ぎて、シュノーケリングに適した透明度が確保できると推測しており、予約を受け付けております。


【8月12日(土)時点】
 大分、透き通ってきています。海水浴として泳ぐ分には、全く問題ありません。

 奈半利川が、まだ笹濁りにまで達しておらず、この濁りが回って来ており、悲しいです。もう少しです。
 
本日関連のブログ
 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>
--

 カラー指定のコマンドは下記の2つである。

--
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]が表示される。これをタップすると[ボールド|イタリック|アンダーライン]に切り替わり、いずれかをタップする。
 

過去のボレコ(ブログ)
2013 2012 2011 2010 2009 2008 2007

【注目】
高知家・まるごと東部博(平成27年)
魔のS字カーブ
 奈半利町の『魔のS字カーブ』に、ご注意下さい。

【お仕事】
 ガレコレでは、各部署がいつでも独立できるように、部署名に将来の屋号を取り入れています。
 
シュノーケリング等

/// Webカメラ ///
Web-camera
@奈半利町海浜センター
(海辺の自然学校)

--
●2017年4月8日

 今年2017年は、ゴールデンウィークから泳げたらいいですね。ガレコレ店舗(兼住宅)の整理整頓が進み、シュノーケリングのお客さんの受け入れ態勢が整ってきました。

 あとは、お天気次第です。これだけはどうにもならないので、海の状況を逐一お知らせして、良き日に合わせて、ご来店頂こうと考えています。今季もよろしくお願いします。
--
 
パソコン
--
●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年経過しました。内弟子も1名育っており、ようやく演武もできそうです。仮設道場も組み立て中です。
--

仮設道場、組み立て中
遊軍、猫の手
活動記録

【ガレコレって?】
ガレコレ
所在地
ガレコレの主(ぬし)トドロ

【情報集】
気象状況
便利帳

【ゲーム】
 トドロは、パズル、シミュレーション、RPGが大好きです。昔は、ゲームを作ったりしていましたが、最近は遊ぶ一方です。スマホのゲームは楽しいですね。
パズドラ
ほしの島のにゃんこ

 『au』のiPhone5cに、乗り換えました。

 電話番号は、今までと同じです。

 MMS[マルチメディア・メッセージ・サービス](インターネットメール)のアドレスは、下記のように変更となります。

*@docomo.ne.jp → *@ezweb.ne.jp
(*は同じ)

 SMS[ショート・メッセージ・サービス](電話番号メール)も、利用できます。


Since 2015/11/26 総数92284 昨日153 今日137
お問い合わせ


by Network Communication Note