<input type="number"> は、凄く変な動きをするので、結局使わなかった話

※ 2020年 3月 9日時点の内容です
　
＜ブラウザ＞
Chrome : バージョン 80.0.3987.122

HTML5 で追加された、<input type="number"> の挙動が物凄い微妙だったので、結局使わなかった。
　
こういうの。

<input type="number">

数値のみを許可し、数値を上下させるボタンが付いている。

以下、その理由。

アルファベットの「e」が入力可能

パッと触ってみた感じ、数字しか入力できないように制御されているかと思いきや、アルファベットの e が入力できる。
指数の入力に対応したという事なのかもしれないが、嬉しい場面あるのか？　これ。
ブラウザを使う大多数の人間は数学とは無縁の人だし、指数入力をする場面が多く存在するとは全く思えん。

つーか、「数値の入力のみを許可する」という仕様に対し、「e」が入力できたとしたら 99.9% バグ扱いされると思う。
「指数の入力に対応してます！」と言ったところで、「いや、そんなの使わねーから！」と却下されるんじゃないのか。

pattern が使えない

というわけで、アルファベットの「e」の入力を不許可にするべく、pattern で制御してしまおう。

<input type="number" pattern="^\d+$">

これで「e」の入力制限ができる・・・かと思いきや、input type="number" の時は、pattern はサポートされないらしい。
公式にもちゃんと書いてある。

何てこった。
という事で、こんな感じで対処。

<input type=number oninput="value=value.replace(/^\d/g, '')">

この時点でテンションがダダ下がり。
というか何でわざわざ正規表現を使って制御しなければならんのだ。開発者サイドでこういう気を回したく無いから使ってるのに。

小数の扱いが微妙

小数点がかなり適当に打ててしまう。

こんな感じで、先頭に小数点を入れたり、小数点を連続で入力できたり、末尾に数字を入れずに入力できたりする。
submit で弾けるとはいえ、こういう入力できるのはあんまりだ。
　
という事で、onchange で value を評価して、不正な値だったら整形・・・とやりたかったが、うまく動かない。
value をトレースすると、入力が「3.」なら valueは「3」となってたり、入力が「3..4」なら value は空白だったりと、小数点を取ることができなかったりする。
もう何を意図してそんな値にしたのか、さっぱり分からない。
　
解決するにはDOM操作でやらないといけないの？　いやいや、そこまでして使いたく無いよ。

FireFox での挙動ががが

FireFox : バージョン 73.0.1
　
何と、全角数字の入力ができちゃうぜ！ 数値だけじゃなくて日本語も入力可能だ！
一応、値はちゃんと取れるが、例のごとく pattern での入力制限ができない。

結論

<input type="number"> は、挙動が微妙すぎるんで、使わない方がいいんじゃないかな。

GitHub：【Windows】git config を編集したのに、別の人の名前で pushされる問題の解決方法

現在使っている端末にて、以前に使っている方の設定が残っていたので、自分用に git config を編集。

git config 変更

my-name、my-mailaddress@tekitou.com を、適当に読み替えてください。

git config --global user.name my-name
git config --global user.email my-mailaddress@tekitou.com

config内容確認

git config --list

設定変更OK。

が、push すると、なぜか以前のオーナーの名前で pushされている。
設定は変更済みなのに、何故？

そんな場合、Windowsに登録済みの資格情報が反映されている可能性があります。

コントロールパネル→資格情報マネージャーにて、「Web資格情報」もしくは「Windows資格情報」を確認してください。

前オーナーの資格情報を削除し、自分の名前とパスワードを登録。

MkDocs：インストールから github pages へのデプロイまで

MkDocsという、静的ページをサクッと作る事が出来るツールがあります。
以下、インストールから、GitHub Pagesまでアップロードする手順です。
　
githubのアカウントを「kakisoft」、githubのリポジトリを「sample01」という名称でやってます。
必要に応じて、適宜読み替えてください。 　

MKDocs をインストール（Windows の場合）

Chocolatey（パッケージマネージャー） を使用しています。
Chocolateyのインストールはこんな感じです。

choco install pip
pip install mkdocs

power shellでは上手く行かなかったんで、他の適当なコンソースアプリを使用してください。
私は、Cmderを愛用しています。

MKDocs をインストール（Cent OS の場合）

sudo yum install python-pip
sudo pip install pip --upgrade
sudo pip install mkdocs

MKDocs をインストール（Mac の場合）

sudo easy_install pip
sudo pip install pip --upgrade
sudo pip install mkdocs

sudo pip install mkdocs-windmill

ひな形を作成

mkdocs new sample01
cd sample01
mkdocs build
mkdocs serve

http://127.0.0.1:8000/ にアクセスすると、こんなページが表示されます。
　

コンテンツの追加

docs フォルダに、拡張子が「.md」のファイルを追加します。（それ以外の拡張子は対象外となるようです。）
ブラウザのリロード不要で、修正した内容がリアルタイムに反映されます。

GitHub リポジトリに登録

アカウント： kakisoft
リポジトリ： sample01
にアップしています。必要に応じて、読み替えて下さい。
以下では、リポジトリは既に作成済みの状態です。

git init
git add .
git commit -m "first commit"
git push -u origin mastergit remote add origin https://github.com/kakisoft/sample01.git
git pull origin master

デプロイ

mkdocs gh-deploy

URLは、こんな感じになります。
https://kakisoft.github.io/sample01/

アカウント名、リポジトリ名を、適宜読み替えてください。
　
「gh-page」ブランチが自動で作成され、そのブランチが公開用のリポジトリとなります。
うまく表示されない場合、リポジトリの Setting にて、「GitHub Pages」が published となっているか確認してください。
　

　

作ったもの

こんなの作ってます。

人狼ゲーム用語集（英語）

https://kakisoft.github.io/WerewolfGameInEnglish/ 　
　

調べものをして、メモとして残しておきたい事を記録したり。

https://kakisoft.github.io/MiscellaneousDocs/

Git（GitHub）：GUI 操作で親ブランチを切り替える方法

Git にてブランチを切った時、親ブランチはデフォルトだと master になりますが、親ブランチを指定したかった場合、プルリク後に GitHubの画面上から変更可能です。

ー１ー

（図では、親ブランチは masterです。）
プルリクしたページを表示し、「Edit」。

ー２ー

親ブランチをドロップダウンで選択できるようになっています。
対象にしたい親ブランチを選択します。

ー３ー

ポップアップが出てきます。
「Change base」を押します。

ー４ー

親ブランチが切り替わってます。

　
　
　
コマンドラインで操作するよりも、こっちの方がやりやすいのではないでしょうか。

PHP：composer.phar 実行時に「Could not open input file: composer.phar」というエラーが出た時の対処。

＜環境＞

OS：Windows 8
PHPのバージョン：7.2

---

現象

php composer.phar XXX といったコマンドを入力した時、Could not open input file: composer.phar というエラーメッセージが出る。

解決策

ターミナルより、以下を実行。

php -r "readfile('https://getcomposer.org/installer');" | php

エラーが解消され、php composer.phar create-project --prefer-dist laravel/laravel myblogといったコマンドが打てるようになります。
　
　
　
今更、そんな環境で開発する事情がある人なんて少数派だと思うが、せっかく解決できたんで書くことにした。

【2019年版】Mac で IE11 を動かそうとしましたが、諦めました。【人柱】

ミッション

新機能の動作確認をしてみたところ、Windows10 + IE11 環境のみ、エラーが発生して登録できなかった。
このままではリリースができない！　何とかしてくれ ！
　

動作環境の整備

＜環境＞
macOS High Sierra
　
原因がさっぱり分からないので、トライアンドエラーを繰り返すことになりそう。
修正してステージング環境にアップする作業を繰り返すのは手間なんで、ローカルで IE11 が動かせないを試す。
　

IE エミュレート

Chrome Developer Tools の IEエミュレート機能を使用。
　

手順

Chrome Developer Tools → More tools → Network conditions → User agent にて、「Select automatically」のチェックを外し、IE11 を選択。 　　 　
yourbrowser.is にて、IE11で動いている事を確認。 　
が、検証機で起こった現象は再現せず。
調べてみると、この方法はレンダリングが絡む部分は対応できてないらしく、確認できる事は限られているみたい。
　
別の方法で。 　

Wine（エミュレータツール）を使う

こちらのサイトを参考にさせて頂きました。
Use IE on OSX with Wine

参考サイトでは IE8 を起動していますが、使いたいのは IE11だったので以下のように変更。

brew install wine
brew install winetricks
winetricks ie11

wine 'C:\Program Files\Internet Explorer\iexplore'

起動画面

起動はできたものの、重すぎて使い物にならず。
あと、何かするごとにすぐにエラーが出る。実用には耐えられないす。

Winebottlerを使う

こちらのサイトを参考にさせて頂きました。
http://adragoona.hatenablog.com/entry/2015/07/11/170822
　
Wineをラップしたツールみたいです。 　
ツールのダウンロードページは、
http://winebottler.kronenberg.org/
なのですが、もんの凄く分かりづらい。
「ウィルスをダウンロードさせるサイトか？」と思えるレベルでトラップが存在する。
　
そして IE のバージョンは 8 しか選択できず。
結果は・・・うん、まぁこんな感じ。
　
　
固まって動かなくなっているので、強制終了してやって下さい。
　

Easy Wine を使う

こちらのサイトを参考にさせて頂きました。
https://aprico-media.com/posts/1397
　
exe を macOS で動作させるツールみたいです。
　
Microsoftのサイトより、IE11をダウンロードして実行。
結果は、ご覧の有様だ。
　
IEはどうやら起動時にOSのチェックをしているみたいで、それに引っかかってるっぽい。
　

仮装マシンを使う

Microsoftのサイトより、マシンイメージが配布されています。
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ 　
OS は Windows 7, 8, 10 から選べるのですが、「IE11 + Windows 10」の組み合わせは無し。
何故だ！？
　
仕方なしに 「IE11 + Windows 8」の仮想マシンをダウンロード。（7.62GB）
　
長い長い DL が終わり、ようやく動かすものの、検証機で発生していた現象が再現されず。
　
何故だーーっ！？
仮装マシンを使ってるせいなのか、Windows 8 と 10 の違いなのか、その辺は不明。
　

結論

素直に Windows マシンを用意しましょう。

頑張りましたが、幸せになれませんでした。

Netlify：JAMstack templates を使った、お手軽サイト作成

静的サイトのホスティング先として、かなりメジャーな感じになってきた Netlify 。

GitHub や Bitbuket のリポジトリを指定するだけでデプロイできてしまう手軽さが魅力ですが、リポジトリが無くても、テンプレートを指定するだけで静的サイトを作れたりします。

テンプレートには、Gatsby を使った爆速テンプレートもあったりします。

作り方

以下、Github アカウントは作成済みで、Netlify アカウントと連携している事を前提としています。

１．

JAMstack project templates にアクセスします。

２．

テンプレートを選択します。

今回は、「Gatsby + Netlify CMS Starter」を選択しています。
『Deploy to netlify』ボタンを押します。

３．

『Connect to Github』ボタンを押します。

４．

「Repository name」をデフォルトから変えたければ変更し、
『Save & Deploy』をボタンを押します。
　

５．

Site deploy in progress ...
の状態からしばらく待つと、デプロイが完了します。
URLをクリックすると、デプロイされたページに遷移します。
　

今回選択したテーマのデモページ（本家）は、こんな感じです。
　

６．

GitHub に、新しいリポジトリが自動で作成されています。
masterブランチを push すると、自動でデプロイされます。 　
使い方はテンプレートごとに異なるので、各種 Readme をご参照下さい。 　
　
自分の GitHubアカウントに自動生成されたリポジトリが、以下のような状態となっていた場合、画面下の方にある「Import Code」ボタンを押すと、ソースがコピーされます。 （中略） 　
　

実際に作ってみたもの

Gatsby developer blog というテンプレートを使って、サイトを作成してみました。
　
福岡市周辺の、公園などの子供が遊ぶ場所の情報をかいてます。
kaki-playground.com