- 投稿日：2019-10-20T22:16:02+09:00
自分のポートフォリオを作ってみた。
ついに！中野のポートフォリオが完成しました！
こんにちは。ポートフォリオの秋がやってきた気がしたので、
自分のポートフォリオを作りました。
我ながらかっこよくできたと思います。（自画自賛）
というわけで、コード紹介です。
コード紹介
こだわったところa.toplink{ padding: 0 5vw; text-decoration: none; color:#ddddff; transition: all .3s; }今回これを作るのに当たって、気をつけたのは、余白設定です。
今までサイトを作るときは、ほとんど余白の「padding」「margin」を使っておらず、
どうしても子供っぽい殺風景なデザインになってしまいました。
なので、ここには格段と気を使いました。他にも、使ったことのなかった「header」や「footer」も使えたので、とてもいい経験になりました。
今後の展望
- もっと色々作って欄を増やす
- 情報を濃くする
- 投稿日：2019-10-20T20:20:56+09:00
position+marginでなぜ上下左右を中央寄せできるのか
はじめに
以下のHTML設計とCSS設計を前提に話を進めていきます。
position.html<html> <head> <meta charset="utf-8"> <title>Position</title> <link rel="stylesheet" href="./position.css"> </head> <body> <div class="contents"> <div class="left-content"> <div class="blue-content"></div> </div> </div> </body> </html>position.csshtml, body { height: 100%; margin: 0; padding: 0; } .contents { background-color: black; height: 100vh; margin: auto; width: 960px; } .left-content { background-color: red; float: left; height: 300px; position: relative; width: 300px; } .blue-content { background-color: blue; height: 200px; width: 200px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }以上のようなCSSを当てた際に以下のような画面になります。ここでは青い要素にposition+marginを当てることで、上下左右を中央寄せしています。
上下左右が中央揃えになる条件
まず結論からお話しすると上下または左右を中央揃えさせるには、以下の2つの条件が必要になります。
1. topとbottomとheight(上下)またはleftとrightとwidth(左右)がauto以外であること
2. margin-topとmargin-bottom(上下)またはmargin-leftとmargin-right(左右)がautoであること
上記のCSS設計では、top・right・left・bottomを0に指定しており、marginにもautoの値を設定しているため、条件を全て満たしていると言えます。1の条件を満たすのであれば、top・right・left・bottomは「0」であることが重要なのではなく、auto以外の値になっていればOKということです。なので全ての値を1pxなどにしても、中央に来るはずです。(内包物の高さや長さがheightやwidthを超えてしまうとずれます。)
なぜpositionをabsoluteにするのか
上記の条件を見た際に、「それならpositionをabsoluteにする必要はないのでは？」と思うかもしれません。
なので、それについてこれから説明していきます。
そもそも、positionプロパティには4つの値があります。.blue-content { /*特に配置方法を制定しない。値がstaticの場合は、top、bottom、left、rightの値は適応されず、初期値であるautoになる。positionプロパティのデフォルト値である。*/ position: static; /*相対位置の配置になる。positionプロパティでstaticを指定した場合に表示される位置が基準位置となる。*/ position: relative; /*絶対位置への配置となる。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となる。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となる。*/ position: absolute; /*絶対位置への配置となるのはabsoluteと同じだが、スクロールしても位置が固定されたままとなる。*/ position: fixed; }上記からわかるように、positionをabsoluteにしなければならない理由は、positionはデフォルト値でstaticが当てられており、その条件下では、top、bottom、left、rightを指定しても適応されず、autoの値をとる。つまり、1の条件を満たせないからです。
positionをfixにしたらダメなの？
結論からお話しすると、fixでも問題ありません。ただ、relativeの位置指定などが効かなくなるので、画面中央で固定されてしまいます。
.blue-content { background-color: blue; height: 200px; width: 200px; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }
なぜ上下左右が中央揃えになる条件が上記の2つなのか
なぜ、上記の2つの条件が必要なのかというのは、当たり前と言えば、当たり前なのですが、CSSの仕様書にそのように明記されているからです。
上下中央揃えに関する記述
If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.
Google翻訳
'top'、 'height'、および 'bottom'の3つすべてが自動の場合、 'top'を静的な位置に設定し、以下のルール番号3を適用します。 3つとも「auto」でない場合：「margin-top」と「margin-bottom」の両方が「auto」の場合、2つのマージンが等しい値になるという追加の制約の下で方程式を解きます。 'margin-top'または 'margin-bottom'のいずれかが 'auto'の場合、その値の方程式を解きます。 値が過剰に制約されている場合は、「bottom」の値を無視して、その値を解きます。左右中央揃えに関する記述
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below. If none of the three is 'auto': If both 'margin-left' and 'margin-right' are 'auto', solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is 'ltr' ('rtl'), set 'margin-left' ('margin-right') to zero and solve for 'margin-right' ('margin-left'). If one of 'margin-left' or 'margin-right' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'left' (in case the 'direction' property of the containing block is 'rtl') or 'right' (in case 'direction' is 'ltr') and solve for that value.
Google翻訳
'left'、 'width'、および 'right'の3つすべてが 'auto'の場合：最初に 'margin-left'および 'margin-right'の 'auto'値を0に設定します。次に、 'direction'静的位置を含むブロックを確立する要素のプロパティは「ltr」で、「left」を静的位置に設定し、以下のルール番号3を適用します。それ以外の場合は、「右」を静的な位置に設定し、下のルール番号1を適用します。 3つとも「auto」でない場合：「margin-left」と「margin-right」の両方が「auto」の場合、2つのマージンが負の値にならない限り、2つのマージンが同じ値になるという追加の制約の下で方程式を解きます。その場合、包含ブロックの方向が 'ltr'（ 'rtl'）の場合、 'margin-left'（ 'margin-right'）をゼロに設定し、 'margin-right'（ 'margin-left'）を解きます。 'margin-left'または 'margin-right'のいずれかが 'auto'の場合、その値の方程式を解きます。値が過剰に制約されている場合、「左」（包含ブロックの「方向」プロパティが「rtl」の場合）または「右」（「方向」が「ltr」の場合）の値を無視し、その値。なぜmargin autoで左右だけ中央揃えになるのか(おまけ)
ここからはpositionは関係ありません。なぜ左右だけ中央揃えになるかを説明していきたいと思います。
結論から簡単にお話しすると、HTMLはデフォルトで水平フロー、つまり横書きであることから、左右のmarginのみ自動で計算してくれるからです。では、なぜ左右のみmarginが自動で算出されるのかを見ていきます。8.4. ブロックレベル要素におけるwidth、height、marginsの制約
For block-level elements with horizontal flow in a containing block also with horizontal flow, the computed values of the 'width' and margins must satisfy this constraint:水平フローのブロックレベル要素で、 その包含ブロックもまた水平フローの場合、 'width'の算出値とマージンは以下の等式を成立させなくてはいけない:
(1)
(width of containing block) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right(包含ブロックの幅) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
The following cases can occur:
次のケースがある:
None of width, margin-left and margin-right are specified as 'auto' and the values satisfy the constraint.
width、margin-left、margin-right全ての指定値が'auto'ではなく、等式が成立している場合。
None of width, margin-left or margin-right was specified as 'auto' and the equation is not satisfied. There are two sub-cases: (1) if the 'direction' of the element is 'ltr', the specified value of 'margin-right' is ignored and 'margin-right' is set to the value that makes the equation true; (2) if 'direction' is 'rtl', it is 'margin-left' that is ignored and computed from the equation.
width、margin-left、margin-rightの指定値が'auto'ではなく、等式が成立していない場合。 これにはふたつのサブケースがある: (1) 要素の'direction'が 'ltr'の場合、 'margin-right'の指定値は無視され、 'margin-right'には等式を成立させる値が設定される。 (2) 'direction'が 'rtl'の場合、 'margin-left'は等式を成立させるために無視される。
If exactly one of width, margin-left or margin-right is 'auto', its value is computed from the equation.
width、margin-leftもしくはmargin-rightのうちにひとつが'auto'の場合、 その値は等式が成立するように算出される。
If width and one or both margins are 'auto', the margins that are 'auto' are set to 0 and the equation is solved for width.
widthと片方、もしくは両方のマージンが'auto'の場合、マージンは共に'auto'となり、 更にそれらはゼロと算出され、widthによって等式を成立させる。
If both margin-left and margin-right are 'auto', the equation is solved under the extra constraint that margin-left = margin-right.
margin-leftとmargin-rightが共に'auto'の場合、 margin-left = margin-rightとなるように等式を成立させる。
上記にあるように、水平フローにおいて以上の等式を成り立たせなければならず、さらに、widthだけを指定し、marginがautoの場合はmargin-left = margin-rightとなるように等式を成立させてくれる。また、
通常フロー要素の場合で、 包含ブロックが水平フローの場合:
'auto' on 'margin-top' and 'margin-bottom' is equal to 0
'margin-top'と 'margin-bottom'の 'auto'はゼロになる
とあるように水平フローにおいて、margin-topとmargin-bottomのautoは値が0になってしまうため、上下は中央揃えされません。
垂直フローにしたらどうなるの？
垂直フローにした場合、全てが逆転します。つまり、margin autoが上下にしか効かなくなります。
垂直フローの包含ブロック内の垂直フローのブロックレベル要素も似ているが、 等式はheightとmargin-top、margin-bottomで作られる。
(2)
(height of containing block) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom(包含ブロックの高さ) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
通常フロー要素で、 包含ブロックが垂直フローの場合:
'auto' on 'margin-right' and 'margin-left' is equal to 0
'margin-right'と 'margin-left'の 'auto'はゼロになる
では実際にやってみましょう。
blue-contentの親要素であるred-contentに以下のCSSを当て、垂直フローにし、margin autoを当ててみましょう。html, body { height: 100%; margin: 0; padding: 0; } .contents { background-color: black; height: 100vh; margin: auto; width: 960px; } .left-content { background-color: red; float: left; height: 300px; width: 300px; writing-mode: vertical-lr; /*垂直フローにする記述*/ } .blue-content { background-color: blue; height: 200px; width: 200px; margin: auto; }すると以下のようになります。上下のみmargin autoが効いてますね。
参考文献
positionプロパティについて
CSSで中央寄せする7つの方法
position: absolute; の指定で要素が上下左右中央配置になる理由
CSS3ボックスモデルモジュール(英語)
CSS3ボックスモデルモジュール(日本語)
margin autoで真ん中による理由
- 投稿日：2019-10-20T20:08:17+09:00
【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！
Webサイトを作ってみたいが、作り方がわからない！そんな方向けに
- HTML、CSS、JSの位置付けを理解する
- 人が書いたコードが読めるようになる
- CodePenで自分でも書いてみる
というステップでWebサイト作りができるようになる記事を書きました。下記にまとめます。
Webの基礎知識
まず、HTML、CSS、JSの位置付けを理解する。
- HTML：文書構造
- CSS：見た目
- JS：動作、変更
※参考：【Webの基礎知識】書ける前に読む！HTML、CSS、JSの書式-1
HTMLの基本
タグと閉じタグで囲う「要素」の解説。
<!--DOM要素--> <タグ名 属性="値">テキスト</タグ名>※参考：【HTMLの基本】書ける前に読む！HTML、CSS、JSの書式-2
CSSの基本
「セレクタ」「プロパティ」「値」などの解説。
/*セレクタ*/ セレクタ { プロパティ: 値; }※参考：【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3
JSの基本-前編（オブジェクト、関数、変数）
オブジェクト指向「オブジェクト（何が）」「プロパティ（どうなる）」「メソッド（どうする）」や「DOM」「変数」「関数」などを解説。
//プロパティ オブジェクト.プロパティ = 値; //メソッド オブジェクト.メソッド(引数); //変数 const 変数名 = 値; //関数 function 関数名(引数){ //処理 }※参考：【JSの基本-前編】書ける前に読む！HTML、CSS、JSの書式-4
JSの基本-後編（イベント、制御構造）
イベントと制御構造の解説。イベントは「いつ」にあたる部分。制御構造は「分岐」と「反復」。
//イベントリスナ オブジェクト.addEventListener("イベント名", //処理 , false); //if文（分岐） if (条件式) { //処理 } //for文（反復） for (初期化式; 条件式; 増減式) { //処理 }※参考：【JSの基本-後編】書ける前に読む！HTML、CSS、JSの書式-5
HTML、CSS、JSの基本（動画版）
上記の内容を抜粋した動画版。CodePen使ってYoutube上でライブコーディングしてみた。
CodePenでHTML、CSS、JSを体験しよう【クモコツ一人もくもく会-1】
YoutubeのURLはこちら！
- 投稿日：2019-10-20T18:14:43+09:00
CSSアニメーションで揺らぐ円を描いてみる
CSSアニメーションで揺らぐ円を描いてみる
円の外側がゆらゆらしている円を描いてみます。
想定
理想形(結果)はこれです。
See the Pen ShakingBall by YamaOK (@yamaok) on CodePen.
素材
- html
- css
- css-animation
- Vue
仮説
ゆらゆらしている円を描くにはどうしたらいいのか？を考えてみます。
- 外側がそれっぽく波を打っていればいい?
- 波を打つ = 凸凹を表現してあげればよい?
- 角の丸み(border-radius)が異なるdivを適当な数、重ねて配置して回転すればよい？
- 重ねたときに水っぽく見えるように色の透過度を調整してあげる必要がありそう
実践
円を重ねる
複数のdivを作成し、重ねます。
0. サイズの指定は適当に・・・揺らぎの幅を少なくしたい=正方形/大きくしたい=長方形
1. 表示位置を絶対指定にすることで重なるよう調整します。
2. 真ん中寄せにして必ず画面中央にします。
3. 色の透過度を指定する.ball{ // 0. width:30em; height:30em; // 1. position:absolute; // 2. left:0px; top:0px; margin:0auto; // 3. background-color:rgba() }異なる角度の丸みを設定する
ここでVueを使います。
すべてhtmlで描くこともできますが、後々の設定変更に柔軟に対応できそうなのでVue側で制御してしまいます。
- 描画する円の数は、Vueで指定します(後々、どれくらいの円を描けばちょうどよいか調整するため)
- 描画する際の角の丸みについては、あまり角張るといけないのでこちらでいくつか定義します
- 回転のスピードにも ばらつきをもたせる ことで揺らぎをそれっぽくさせてみます
<html> <body> <div id="content"> <div id="animationBlock"> <div id="contentName"><span>Hello World</span></div> <!--1. これで、ballCount(int)の数分だけdivを描画できます--> <template v-for="count of ballCount"> <!--2. 可変にしたいスタイルの定義はVueで定義したメソッドで出力します--> <div class="ball" :style="getCss(count)"></div> </template> </div> </body> </html>const balls = new Vue({ el:'#animationBlock', data:{ //1. とりあえず10個あればいいと思いましたが、各自でちょうど良い数を定義してください ballCount:10, //2. 丸み付けのパターンをいくつか定義します // 丸みは正方形の場合、一辺の半分で円になってしまいます // したがって、半分未満の長さを指定します features:[ {radius:13}, {radius:13.5}, {radius:14} ], }, methods: { getCss:function(wave){ //2. let feature = this.features[wave % this.features.length] //3. let duration = Math.floor(Math.random() * 10 % 5 + 2) return `border-radius:${feature.radius}em;animation-duration:${duration}s` } }, })まとめ
応用させれば似たような揺らぎをもたせることはできそうだなあと思います。
今回は定義しませんでしたが、アニメーションの開始をずらす Or 開始位置をずらすなどしても面白いかもしれません。できるかぎり可変にはしたつもりなので、皆さんの美的センスに合わせて改良してください。
例に描いたものはすべて自分のセンスですので・・・笑皆さんのお役に立てれば幸いです。
- 投稿日：2019-10-20T17:55:28+09:00
プログレスバーを実装してみた
久しぶりの投稿です。
今回はプログレスバーを実装してみました。
ソース
では、いつもどおりソースを載せておきますね。
progress_practice.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>プログレスバー 練習</title> <script src="./js/progressbar.js"></script> </head> <body> <div> <!-- 進捗(%)を表示 --> <input type="text" id="bar" value="0%" style="border-style: none" disabled="true"> <br> <!-- プログレスバー --> <progress id="myProgress" value="0" max="100" width="200px">0%</progress> </div> <!-- ボタンを押すと、プログレスバーが実行される --> <input type="button" id="myButton" onclick="updateProgress()" value="start"> </body> </html>progress.jsvar interval; var val; function updateProgress() { val = 0; document.getElementById("myButton").disabled = true; // 50ミリ秒ごとに更新 interval = setInterval("updateVal()", 50); } function updateVal() { // 進捗(%)を表示する var bar = document.getElementById("bar"); bar.value = val + "%"; // 100%になるまで、バーを更新 if (val < 100) { val += 1; document.getElementById("myProgress").value = val; document.getElementById("myProgress").innerText = val + "%"; // 100%になったら、バーが止まる } else if (val == 100) { clearInterval(interval); document.getElementById("myButton").disabled = false; } }解説
まず、htmlからですね。
プログレスバーのタグはprogress要素となります。次に、jsですね。
ポイントは2つです。
1つ目が、setInterval関数です。
この関数は一定間隔で、処理を実行します。
第一引数に、関数を入れます。
この関数に、処理を実装すれば、いいわけです。
第二引数には、時間を入れます。
指定した時間が経過すると、もう一度第一引数で指定した関数が実行されます。2つ目に、
clearInterval関数です
setIntervalを止めたいときに使うものです。参考
【JavaScript入門】setIntervalの使い方まとめ
＜progress要素＞ - タスクの進捗度 | HTMLのタグリファレンス
- 投稿日：2019-10-20T16:53:45+09:00
HTML/CSS まとめ
HTML/CSSに関して、備忘録的にまとめていきます。
左側にやりたいこと、右側に対処方法を記載していきます。
*定期的に追記・更新していきます。HTML
-見出し：
＜h＞＜/h＞ 複数の見出しをつけるときは、＜h1＞＜h2＞＜h3＞とする。
*番号ごとに文字の大きさは小さくなる。文字サイズ 1＞2＞3＞-段落（見出し以外の文）：
＜p＞＜/p＞-リンク:
＜a＞XXX＜/a＞*ｕrlなどをつけるときは、＜a href="URL"＞XXX＜/a＞-画像添付：
＜image src="URL"＞ *閉じタグは必要ありません。-リスト：
親要素：＜ul＞＜/ul＞
子要素：＜li＞＜/li＞
＊CSS上、list-styleプロパティを使用することで、子要素の先頭に表示するマーカー文字を指定できる。
ex)list-style: none; →子要素の先頭には何も表示しない-入力フォーム
-１行：＜input＞ *閉じタグは必要ありません。
-複数行：＜textarea＞＜/textarea＞CSS
-背景画像：
background-imageプロパティ
ex)background-image: url(画像のURL);
*background-imageで指定された背景画像は表示範囲を埋め尽くすまで、繰り返し表示します。
→background-size:cover;を追記すると、1枚の画像で表示範囲を埋め尽くすようサイズが拡大縮小します。-クラスの中央配置：
marginの左右にautoを指定します。ex)margin:0 auto;
＊marginにautoを指定するときは、必ずwidthを併せて指定します。
＊上下のmarginにautoを指定することはできません。-透過：
opacityプロパティを使用。 ０→１/透明→不透明-文字間隔の調整：
letter-spacingプロパティを使用。-ブロック要素/インラインブロック要素/インライン要素 特徴と設定方法
・ブロック要素（＜div＞等）
width/height:指定可 margin/padding:指定可 配置：縦並
・インラインブロック要素
width/height:指定可 margin/padding:指定可 配置：横並
・インライン要素（＜a＞等）
width/height:指定不可 margin/padding:左右のみ指定可 配置：横並
＊設定方法：displayプロパティを使用する。-カーソルが乗った時に変化を加える
セレクタ:hoverを使用することで、カーソルが乗ったときのCSSを指定することができます。
ex)クラス名:hover{
＊カーソルが乗ったときの状態をhoverと言います。-変化を加える対象と時間の設定：
transitionを使用します。
ex)transition: all(変化対象） 1s(変化時間）;
「変化対象」にはcolorなどのプロパティを指定しますが、allを指定すると全プロパティに適用出来ます。
transitionは多くの場合、hoverと組み合わせて使います。-クリックされた時だけ変化を加える：
セレクタ：activeを使用します。
要素がクリックされている間だけCSSを適用することができます。
*使用方法は上記のhoverと同じなので割愛します。-クラス（要素）の角を丸める：
border-radiusプロパティを使用します。
ex) border-radius:10px; *数字が大きいほど角が丸くなります。-テキストなどの配置指定：
text-alignプロパティを使用します。
ex)text-align: center;
*leftで左寄せ、centerで中央揃え、rightで右寄せに設定可能
*インライン要素やインラインブロック要素の配置を指定
(ブロック要素は上記のmarginを使用して調整）-行間の指定：
line-heightプロパティを使用することで、行の高さを指定できます。
*値が大きいほど行間が大きくなります。 ex)line-height:10px;
*line-heightプロパティは、要素内、縦方向中央に文字を配置するのにも使えます。
line-heightプロパティの「高さの中心」に文字が配置されるため、
要素の高さとline-heightを同じ値にすると、文字がちょうど中央に配置されるようになります。
ex)width:40px; line-height:40px;
→要素の中央位置に文字列が配置される。-文字の太さ調整：
font-weightプロパティを使用します。normal＝通常 bold＝太いで指定します。-画面上に要素を固定：
position: fixed;を使用します。-要素の重なり順序指定：
z-indexを使用します。
z-indexは整数値で指定し、値が大きいほど上に表示されます。
＊z-indexプロパティは必ずpositionプロパティと併用する必要があります。
- 投稿日：2019-10-20T08:59:33+09:00
初心者によるプログラミング学習ログ 131日目
100日チャレンジの131日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
131日目は、
おはようございます
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) October 15, 2019
131日目
Udemyでwebデザイン、ヘッダーのロゴとナビゲーション作成
ドットインストールでwebサイト構築、大枠作成#100DaysOfCode#駆け出しエンジニアとつながりたい#早起きチャレンジ#webデザイン
- 投稿日：2019-10-20T00:26:13+09:00
HTML+JavaScriptを駆使して"全角ＸＸ文字"地獄を脱するツールを作ってみた
社内の各種申請に利用するシステムは、多くの入力欄が全角文字のみ入力可能という仕様になっています。これは開発時のテスト行程を少なく出来るなど開発者側にとっての大きな利点を生みます。しかし、困ってしまうのが意図せず半角英数字記号が混ざってしまい、「全角ＸＸ文字で入力してください。」地獄に陥った時・・・
また、文字数の指定も明示されていない上にカウントも表示されないので、ここでも「全角ＸＸ文字」地獄に陥ります・・・
開発の動機及び開発言語の選定理由
上述の様に社内申請システムで毎度"全角ＸＸ文字"地獄に陥るため(なかなか脱出できない)
システムの利用環境に開発環境がインスール出来ないのでブラウザさえ有れば動くHTML+JavaScriptを選択
世の中に出回っているツールは「不要な親切機能」が有る代わりに「必要な」機能が無かったため
最近ひょんなことからWebプログラミングに凝ってしまったので勉強も兼ねて実装
ツールを構成する各種スクリプト
今回の開発ではそもそも使える言語が大幅に制限された環境で利用することを考慮して実装する必要が有ったため、HTML5 + JavaScript＋正規表現のみを駆使して実装しました。Pythonが使える環境ならもっと楽に開発が出来た可能性も有ります・・・。(pyperclip等を利用して)
半角英数字記号スペースを全角文字に変換するスクリプト
半角スペースが混じっている場合まず半角から全角に変換してから変換しないと文字コードをずらす方法で先に変換してしまうと別の記号になってしまうので先に変換しています。
function toFullWidth(value){ return value.replace(/\u0020/g,"\u3000").replace(/[ -~]/g, s => { return String.fromCharCode(s.charCodeAt(0) + 0xfee0) }) }
- このスクリプトで以下の様にすると全角英数字記号スペースを半角に変換するスクリプトになります。
function toFullWidth(value){ return value.replace(/\u3000/g, "\u0020").replace(/[ －～]/g, s => { return String.fromCharCode(s.charCodeAt(0) - 0xfee0) }) }スペースは取り除くスクリプト
後述の文字数上限を超えている場合に超えない文字数にするスクリプト内で利用します。
function deleteSpace(value){ return value.replace(/\s+/g,""); }文字数上限までを切り出すスクリプト
function cutString(value, length){ return value.substr(0, length); }文字数上限を考慮した全角変換スクリプト
まずはスペースを取り除き、それでも文字数上限を超えている場合は切り出すという方法を採用しました。
function full_and_length(value, length){ const conv_value = toFullWidth(value); if(conv_value.length > length){ let temp_str = deleteSpace(conv_value); if(temp_str.length > length){ return cutString(temp_str, length); } } return conv_value; }ボタンを押すと自動的に編集結果がコピーされる機能も追加
const result1 = document.getElementsByTagName("input")[0]; result1.select(); document.execCommand("copy");
- このスクリプトを応用することで、今回はクリップボードをクリアする機能も実装しました。
まとめ
制約の多い環境下での利用を考慮したツールの設計・実装は大変勉強になりました。また、実装を通してHTMLやJavaScriptへの理解も深まりました。また、ブラウザを上手く利用することで、ゼロから実装するととてつもなく大変なGUIの実装をHTML標準の部品だけで実現出来てしまうことの便利さに気が付きました。今後、HTMLで実装したUIも紹介できればと思っています。また、便利ツールを継続して開発して紹介出来ればと思います。
Reference
http://www.koikikukan.com/archives/2013/08/28-015555.php
https://blog.yug1224.com/archives/580e07c974d0d51807ee1295/
https://www.nishishi.com/javascript-tips/trim-space-chars.html
http://catprogram.hatenablog.com/entry/2013/05/13/231457
https://qiita.com/butakoma/items/642c0ec4b77f6bb5ebcf