はてなブックマーク

Windows GitBash のプロンプト表示がやたらと遅い。何のコマンドも打たずに Enter を押しただけでも、何か表示がつっかえる。 何が原因かと思って調べてみたところ、どうも GitBash デフォルトのプロンプト内に設定されている __git_ps1 という関数が遅いようだ。 その証拠に、プロンプトを PS1='$ ' と簡素化すると、かなりサクサク動くようになった。 It looks like there problem lies in your bash prompt setting. Try setting PS1='$ ' so that whatever fancy prompt setting is deactivated, then see if it is still slow to you. 参考：Git Bash (mintty) is extremely

iOS Safari で見せる Web サイトをネイティブアプリ風に見せるための演出の一つとして、「適当なところでダブルタップした時にズームしない」ことを実現したい。 Twitter や Instagram を iOS Safari で見るとそのような動きが実現されているので、何かやり方はあるんだろうなぁーと思ったのだけど、かなり手こずってしまった。 iOS10 までは user-scalable=no が使えた JavaScript で TouchEnd イベントをチェックする方法 touch-action: manipulation が一番カンタン iOS10 までは user-scalable=no が使えた meta 要素で指定するヤツ。今では動かない。 <meta name="viewport" content="width=device-width, initial-scale

去年書いた記事のアップデート版。 neos21.hatenablog.com 拙作の @neos21/neos-normalize はバージョン 1.0.7 になり、チマチマとオレオレパーフェクト設定に向けた調整をしてきた。 その調査結果をまとめ、2019年以降はこんな font-family 指定で決まりだな、と吹聴して回ろうと思う。 ゴシック体 (サンセリフ) のフォント指定 明朝体 (セリフ) のフォント指定 等幅 (モノスペース) のフォント指定 以上 ゴシック体 (サンセリフ) のフォント指定 2019年以降、Mac でも Windows でも、システム標準のフォントを使ってイイカンジに Web ページを表示する font-family 指定は以下で決まり。 @font-face { font-family: "Yu Gothic M"; src: local("Yu Gothi

CentOS Linux 上にインストールした MySQL で検証。 MySQL を使っていて、絵文字を含むテキストを INSERT・UPDATE しようとしたら、以下のようなエラーが出た。 Incorrect string value: '\xF0\xA6\x9A\xB0\xE7\x94...' for column 'my_column' at row 1 調べてみると、どうも MySQL の utf8 エンコーディングはサロゲートペア文字に対応していないようで、絵文字などを扱うには、サロゲートペア文字に対応したエンコーディング utf8mb4 に変えないといけないみたい。 参考：MySQL Incorrect string value: の解決策 | テクニカルノート 設定手順は以下のページどおり。 参考：MySQLの文字コードをutf8mb4に変更 - Qiita まずは DB の

以前、「ウェブサイトに適用する游ゴシックフォントを見直しまくった最終解」という記事を書いた。 neos21.hatenablog.com おかげさまで、はてブで77ブクマ (本稿執筆時点) いただき、皆様もこの件について苦労なさっていることが伺い知れた。 今回はこの続報。Windows・Chrome 環境で、游ゴシックフォントが適用されている場合のみ、フォントを少しだけ太く表示させる JavaScript と CSS を作ったので紹介する。開発者が自分のサイトに組み込んで調整いただけるだろう。 前回のおさらい 問題の概要 ウェブサイト開発者ができる対処法 クライアントサイドでできる対処法 text-shadow ではなく -webkit-text-stroke-width を使う window.getComputedStyle() では使われているフォントが分からない canvas 要素を

キーボードの押下したキーを調べる JavaScript ツールを作った。その名も KeyCode Checker。 See the Pen KeyCode Checker by Neos21 (@Neos21) on CodePen. 画面上でキーを押下すると、そのキーの情報を表示する。 普通に event.key などの値を取得・表示しているだけ。 昔は event.key で取得できる数値しか情報がなかったと思うが、何やら最近は event.code というプロパティでもう少し分かりやすいキー名が拾えるようになったようだ。あと Ctrl や Alt などのキーはキーボードの左右に2つ配置されていたりするので、location というプロパティで左右を区別できたりする。 他に特筆すべき点もないが、:nth-child(n + 3) で「3つ目以降の要素」を指定できるのを初めてちゃんと実践

Angular に組み込まれている、Protractor という E2E テストツールを通じて、Selenium Webdriver を少し触ってきていた。今回はテストツールとしてではなく、ウェブスクレイピングを行うための手段として、Selenium Webdriver と、Chrome を操作するための ChromeDriver を利用してみようと思う。 selenium-webdriver と chromedriver のインストール ブラウザを起動して任意のページを表示するまで ヘッドレスモードにする ところで async・await って何 今回はココまで selenium-webdriver と chromedriver のインストール 作業ディレクトリを作ったら $ npm init -y で package.json を生成しよう。selenium-webdriver は以下

拙作のノーマライズ CSS ライブラリ、「Neo's Normalize」を見直していたところ、Windows の Chrome ブラウザで適用されている游ゴシックフォントがかすれていた。 「あれ？@font-face で游ゴシック Medium を指定してるのにな？」と思い、設定を見直したところ、コレが効かなくなっていた。 当時 Neo's Normalize を作る際、それなりに調査しまくった結果だったのだが、どうも仕様が変わっていたようなので、OS・ブラウザごとに挙動を見直すことにした。今回はその研究結果をまとめる。 游ゴシックフォントに関する基礎知識のおさらい Chrome で効かなくなっていた @font-face font-weight: 500 は効いたが、副作用が避けられない Chrome で游ゴシック Medium を使うのは諦める 別解 : 潔く Regular フォン

前回、ADODB.Stream を使って UTF-8 でファイルの読み書きを行った。しかしこのとき書き出されるテキストファイルは BOM 付き UTF-8 になってしまう。 neos21.hatenablog.com そこで今回は、BOM なし UTF-8 のテキストファイルを書き出すよう、前回の VBScript を改善してみる。 ' 読み込みファイルの指定 (相対パスなのでこのスクリプトと同じフォルダに置いておくこと) Dim input Set input = CreateObject("ADODB.Stream") input.Type = 2 ' 1：バイナリ・2：テキスト input.Charset = "UTF-8" ' 文字コード指定 input.Open ' Stream オブジェクトを開く input.LoadFromFile "inputText.txt" ' ファイ

Heroku の無料プラン (Free Dyno) で使える、Web アプリを稼動させる仮想環境「Web Dyno」は、30分間その Web アプリにアクセスがないと自動的に Sleep してしまう。 Web Dyno が Sleep してしまうと、次回その Heroku アプリに初回アクセスした時に、Web Dyno が再起動してレスポンスを返すまで、15〜30秒くらい待たされてしまう。 この初回アクセス時のレスポンスの悪さを解消するために、自分が Heroku アプリを使いたくなる時間帯には、予め Web Dyno の Sleep を解除しておきたいと思った。 今回は Web Dyno を Sleep させないようにする、Sleep していたら自動的に再起動させてやるための方法を調べたので、それを紹介する。 Web Dyno を Sleep させないようにするには、Heroku アプリ

前回の続き。TypeScript コード内で import や export を用いていると、デフォルトの設定ではブラウザ上でそのコードが利用できないことを話した。 neos21.hatenablog.com 今回はこの対応方法を紹介する。 なお、今回の目的は「TypeScript の素振り環境として楽に構築できること」なので、Webpack などのバンドルツールを用いるのではなく、可能な限り素に近い状態から HTML 上で利用できるようにしてみる。 AMD or UMD 形式でトランスパイルして RequireJS を使う 難アリ：ESModules 形式にして直接利用する 失敗：SystemJS を使って TypeScript をそのまま動作させる 結論：AMD (UMD) 形式で出力して RequireJS を使おう AMD or UMD 形式でトランスパイルして RequireJS

入門git 作者: Travis Swicegood,でびあんぐる出版社/メーカー: オーム社発売日: 2009/08/12メディア: 単行本（ソフトカバー）購入: 25人 クリック: 305回この商品を含むブログ (101件) を見る git merge でマージする時、Fast-Forward なマージだとマージコミットが作られない。 Fast-Forward とは、取り込もうとしているブランチの方が、手元のブランチよりも新しい状態であること。「手元のブランチより新しいブランチを取り込むだけだから、わざわざ『追い付きました！』報告みたいなコミットは作らなくてもいいよね」という理屈で、デフォルトではマージコミットを作らない設定になっている。 しかし、マージ作業も立派な「作業」であり、マージに問題があった時に追跡しづらくなるので、基本的にはマージコミットを作るようにしたい。 通常のコマンド

npm-run-scripts を使っていると、npm run something コマンドにオプション引数を渡したくて、$ npm run something -- --include=hoge みたいに書いたりする。 他にも、ハイフンから始まるファイルを指定するときに、$ rm -- -some.txt などと書いたりする。 このハイフン2つ -- って何？というのを調べてみた。 どうやらコレはDouble Dash ダブル・ダッシュと呼ばれており、UNIX におけるコマンドフラグの終わりを示す記号とのこと。オプションのスキャンを強制的に終了させる記号のようだ。 参考：引数"--"(Double dash)のみとは何を意味するのか 参考：Man page of GETOPT "--" は特殊な引き数で、スキャンのモードによらず、 オプションのスキャンを強制的に終了させる。 参考：Lin

TypeScript実践プログラミング【電子書籍】[ スティーブ・フェントン ] ジャンル: 本・雑誌・コミック > PC・システム開発 > インターネット・WEBデザイン > その他ショップ: 楽天Kobo電子書籍ストア価格: 3,456円 TypeScript v2.5 時点で指定できる、tsconfig.json の compilerOptions をまとめた。主に Angular4 系で使っている tsconfig.json なので、React.js を使いたい場合などはコメントアウトしてあるオプションを使う必要があったりするかも。 // tsconfig.json : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html { // 保存時にビルドする (true) "buildOnSave": true,

tsc を利用して TypeScript をトランスパイルする素振り環境を作ってみた。最初はコンソール上でコンパイルした JS ファイルを $ node example.js のように動かして満足していたのだが、コンパイルした JS ファイルを HTML で読み込んで動かそうとしたら、import・export が解釈できないようで詰まってしまった。 すぐにモジュールの仕様が問題なのは分かったが、その話をするために、まずは JavaScript におけるモジュール管理の仕組みをおさらいするための記事を書いてみた。 素振り環境の用意 まずは Node.js で動かしてみる HTML から JS ファイルを読み込んでも動作してくれない？ モジュール管理の仕組みをおさらいしよう JavaScript におけるモジュール管理の歴史 モジュールバンドルツールの登場 モジュールの仕様が複数生まれた A

入門bash第3版 bash　2．05b　＆　3．0対応 [ キャメロン・ニューハン ] ジャンル: 本・雑誌・コミック > PC・システム開発 > その他ショップ: 楽天ブックス価格: 3,024円 msys や GitBash、Cygwin などで、C:\Users\Neo\ といったフォルダパスを cd コマンドに渡すと、うまく移動できないことがある。\ が特殊文字として扱われるからだ。 以下のようにバックスラッシュ (円マーク) \ をスラッシュ / に変えれば移動できるが、いちいち置換するのは面倒くさい。 $ cd C:/Users/Neo/ もう少し楽にやるには、以下のようにフォルダパスをシングルクォート ' で囲んでやれば良い。 $ cd 'C:\Users\Neo\' どうも Windows 向けの Bash のバージョンによって、cd コマンドは挙動が違うように見える。と

Vagrant入門ガイド 作者: 新原雅司出版社/メーカー: 技術評論社発売日: 2013/09/12メディア: Kindle版この商品を含むブログ (5件) を見る MacOS Sierra 上に、VirtualBox + Vagrant を利用して、Windows7 の仮想環境を構築してみようと思う。 VirtualBox をインストールする Vagrant をインストールする Windows イメージをダウンロードする Vagrant Box を登録する Vagrantfile を設定する Vagrant で起動する 共有フォルダ設定をしてみる Windows を日本語化してみる 完了 VirtualBox をインストールする まずは、Vagrant で操作する VirtualBox をインストールする。 Downloads – Oracle VM VirtualBox 検証時は v

CSSシークレット ―47のテクニックでCSSを自在に操る 作者: Lea Verou,牧野聡出版社/メーカー: オライリージャパン発売日: 2016/07/23メディア: 単行本（ソフトカバー）この商品を含むブログ (1件) を見る CSS Grid を調整するため、IE11 のみ適用したい CSS があったのだが、IE11 は @supports がサポートされていないので、@media を用いた CSS ハックで対応することにした。 以下のように書けば、IE11 でのみ CSS を適用できる。 @media all and (-ms-high-contrast: none) { *::-ms-backdrop, .selector { /* IE11 にのみ適用される */ } } *::-ms-backdrop を除けば、IE10 以降で適用されるようになる。IE10 の対応とか考