Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

nginx.confの設定でCSSや画像が読み込まれない問題を修正する

参考にさせていただいたページ

起こっていた問題

Chromeコンテキストメニューから 検証 > Element で

<link rel="stylesheet" href="/css/style.css">

のところにマウスオーバーすると、以下のメッセージが表示されました。

Resource interpreted as Stylesheet but transferred with MIME type text/plain

と表示されていました。

解決方法

以下のように、nginx.confファイルの、httpの設定に2行追記しました。

http {
  〜略〜
  include /etc/nginx/mime.types;
  default_type application/octet-stream;
  〜略〜
}

あとブラウザのキャッシュクリアをした方が良いかもしれないです。

input type="number" の挙動を少しだけ確認してみた

参考にさせていただいたページ

はじめに

  • iOSAndroidでは数字キーボードを表示させたい
  • フィールドに半角数字だけを入力させたい

という要望があり、2020年7月20日現在の挙動をあらためて確認しました。

type="number"にすると

2020年7月20日現在の挙動として、keydownイベントでざっと確認したところ以下の通りでした。

  • MacChromeで全角数字を入力して、確定したときに入力値が削除されました。このときevent.targer.valueには何もわたされません。
  • MacFirefoxで全角数字を入力して、確定したときに見た目上は全角数字が入力できました。このときevent.targer.valueにはには半角数字が渡されます。
  • MacFirefoxで半角数字012などを入力したときに0が削除されて12に変換されました。このときもevent.target.valueの型はstringです。

type="tel"にすると

  • iOSで表示されるキーボードにハイフンが無い

inputmode属性

試していませんが、特に解決はしなさそうな気がします。

結局どうしているか

参考までに結局のところどのような実装をしているかというと、

  • type="tel" でiOSAndroidのキーボードを数字にする(ハイフンなし)
  • event.target.valueに全角数字が渡されたら半角にし、数字以外の文字は削除してフィールドバリューに入れ直す

みたいなことをしています。

netlifyとhexoでブログを公開する

参考にさせていただいたページ

hexoについて

hexoとnetlifyでブログを公開する手順について

gitリポジトリを作成してcloneする

とりあえずGitHubexampleリポジトリを作成して、cloneしたことにして説明を進めます。

cdする

cd example

hexoで作ったブログをlocalhostで確認する

Hexo」公式ページで最新情報を見て頂くのが良いと思いますが、以下のような感じですぐにHello Worldページが確認できると思います。

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

とりあえずこの段階ではHelloWorldまでできていれば充分だと思います。

私のディレクトリ構造

このとき以下のようなディレクトリ構造になりました。blogディレクトリ配下は hexo init blog コマンドでできたものです。

example
  ├── .git
  ├── README.md
  └── blog
        ├── _config.yml
        ├── package.json
        ├── scaffolds
        ├── source
        |   ├── _drafts
        |   └── _posts
        └── themes

netlifyにGitHubでログインしてDeploy設定をする

だいたい以下のページの通りです。非常に参考になりました。 - Hexo でブログを作成して Netlify で公開するまで - to-me-mo-rrow - 未来の自分に残すメモ - - HexoとNetlifyで快適なブログ環境を手に入れよう! - Adwaysエンジニアブログ

少しトライ&エラーを繰り返したのが以下のBuild settingsです。

Repository: github.com/ユーザー名/リポジトリ

f:id:motomichi_works:20200718170436p:plain

  • Repositoryは github.com/ユーザー名/リポジトリ名
  • 私の場合はexample/blogという一階層ディレクトリ構造なので Base directoryは blog (package.jsonがあるディレクトリパス)
  • 私の場合はnode_modulesをリポジトリにpushしていないためnode_modulesをインストールしてからビルドする必要がありますので、Build commandに設定するのは npm install; npm run build
  • Publish directoryは blog/public/ (blog/ の部分はBase directoryを入力すると自動で入力されます。index.htmlがあるディレクトリパス)

同じようにハマっている人の参考になればと思います。

詳細は各環境のDeploysから、Deploy logを読んでトライアンドエラーをしてみるのが良いと思います。

デプロイされたindex.htmlのページが確認できたらあとはhexoのドキュメントを見ながら簡単な調整をコツコツとやります。

hexoの調整と新規ページの作成

参考ページを見ながら設定変更や新規ページの作成をすると良いでしょう。

grepコマンドで正規表現を使って文字列を抽出する

参考にさせていただいたページ

パターンにマッチする行を抽出する方法

正規表現を使用するときは-Eオプションを使うと良いです。

ファイル単体なら以下のような感じでマッチできます。

grep -E "^hoge$" example.html

ディレクトリ内をまとめてglobパターンでマッチもできます。

grep -E "^hoge$" example/*

パターンにマッチした文字列だけを抽出する方法

以下のように -o オプションを使います。

grep -o -E "パターン" ファイルパス

IE11でSymbolは定義されていませんとエラーが出る

参考にさせていただいたページ

解決したい問題

IE11で「'Symbol' は定義されていません。('Symbol' is undefined.)」と表示されました。

解決策

webpackを使用する場合

using Symbol causes exception in IE11 · Issue #514 · zloirock/core-js · GitHub にあるように以下の2行を書くと解決すると思います。

import 'core-js/es/symbol';
Symbol('');

webpackを使用しない場合

reactjs - 'Symbol' is undefined in IE after using babel - Stack Overflow にあるようにscriptタグを追記すると解決すると思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>

jestのcustom reporterを作成してテスト実行結果をcsvファイルで出力する

参考にさせていただいたページ

はじめに

jestのテスト実行結果を出力するためのreporterは比較的簡単に自分で作成することができます。

csvで出力したいという要件があったので、作成してみました。

コードを書く

公式ページの「Configuring Jest · Jest」の例が最も簡素でわかりやすいと思います。

具体的には、「GitHub - mas0061/jest-allresult-csv-reporter: A Jest plugin. Output all test results to CSV.」のindex.jsを参考にすると具体的な書き方がよくわかります。

  • constructorはglobalConfigとoptionsを引数として受け取ることができます。
  • onRunCompleteメソッドは、contextsとresultsを引数として受け取ることができます。

htmlやjunitで出力してくれるモジュール

テスト対象でない子コンポーネントをstubで置き換える | Vuex + vue-test-utils その0006

参考にさせていただいたページ

サンプルコード

たとえばMyComponentの子コンポーネントHogeComponentを置き換えたい場合は、mountするときに以下のようにします。

  wrapper = mount(MyComponent, {
    stubs: {
      HogeComponent: { template: '<div class="hoge" />' },
    },
  });