ゆるふわエンジニアのブログ

やったこと、調べたこと等をつらつらと書いていくかもしれません。

Windows10(Build1803)上でGoogle Chromeを使用すると「応答時間が長すぎます。」と表示されWebページにアクセスできない問題について、解決編

本記事では、下記記事にて書いた問題の解決方法を記述していきます。

j-levia.hatenablog.jp

本記事の内容です。

どうしたら解決したのか?

下記ページ
https://productforums.google.com/forum/#!msg/chrome/s5S1uPI0kMc/b2Mud3SKCgAJ
の、LarryLACa氏の書き込み(9月20日)にてアップロードされている
CryptSvcAdminSetAclFix.ps1を実行したら直りました。

何が原因だったのか?

上記のLarryLACa氏の書き込みに原因も記載されているので、
参照してください。(丸投げ)

参考情報

https://productforums.google.com/forum/#!msg/chrome/s5S1uPI0kMc/PVBgVbx6DAAJ

Babelのインストールおよび使用方法

本記事では、Babelのインストール方法および使用方法について紹介していきます。
Babelは、ES2015やES2017形式で記述したJavaScript
ソースコードをES5以前の形式に変換するツールです。

本記事の内容です。

package.jsonを作成する

下記のコマンドを実行し、package.jsonを作成します。

npm init -y

Babelをインストールする

下記のコマンドを実行し、Babelやプリセットをインストールします。

npm install --save-dev babel-cli babel-preset-env

ソースコードを変換する

下記のコマンドを実行し、ソースコードをES5以前の形式に変換します。
今回は、jsフォルダ下のファイルすべてを変換し、
その結果をdistフォルダへ出力しています。

.\node_modules\.bin\babel js --out-dir dist

参考にしたWebサイト

babeljs.io

無償でフル機能が使用できるC++ Builder(C++ Builder Community Edition)

本記事では、WindowsAndroidMac向けアプリのソースを
1つのソースコードでかつC++で開発可能、さらに、フル機能を無償で使用できる
統合開発環境である、C++ Builderについて紹介していきます。

本記事の内容です。

C++ Builderの特徴

クロスプラットフォーム開発

上記でも書いた通り、

向けのアプリを、1つのソースコードで開発できます。

参照しているDLLをEXEに含めることができる

参照しているDLLを別途配布ではなく、EXEに含める形でビルドできます。

ダウンロードの方法

下記Webサイトでアカウント登録を行った後、ダウンロードできます。
www.embarcadero.com

注意点としては、
Delphi Community Editionと同一の環境で共存させることはできない
ので、ご注意を。

webpackでconfigファイルの共通部を外部ファイルへ切り出す

本記事では、webpackでconfigファイルの共通部を
外部ファイルへ切り出して管理、使用する方法を紹介していきます。

本記事の内容です。

webpack-mergeをインストール

webpack-mergeを使用するので、下記コマンドを実行し、インストールします。
ライセンスはMITです。

npm i webpack-merge

configファイルの共通部を別途ファイル化

今回は、webpack.config.base.jsという名前で共通部分をファイル化します。
内容は下記の通りです。

webpack.config.base.js

const config = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./js/index.js`,
  
    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
}

module.exports = config;

各環境毎のconfigファイルで共通configファイルを読み込む

それぞれ、開発用(webpack.config.development.js)と
本番用(webpack.config.production.js)のファイル内で
共通のconfigファイル(webpack.config.base.js)を読み込み、
共通以外の部分をそれぞれ設定します。

内容は下記の通りです。

開発用configファイル(webpack.config.development.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 開発モードに設定
  mode: 'development',

  // 使用するソースマップの開発ツールを設定
  devtool: 'cheap-module-eval-source-map'
});

module.exports = config;

本番用configファイル(webpack.config.production.js)

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.base.js');

const config = merge(baseConfig, {
  // 本番モードに設定
  mode: 'production'
});

module.exports = config;

後は、過去の
j-levia.hatenablog.jp
で紹介した通り、それぞれのconfigファイルを指定してビルドを実行します。

参考にしたWebサイト

qiita.com

webpackで使用するconfigファイルを指定(選択)する方法

本記事では、webpackで使用するconfigファイルを指定する
(選択する)方法を紹介していきます。

本記事の内容です。

webpackのconfigファイルを準備する

下記の通り、使用するwebpackのconfigファイルを複数準備します。

開発用(webpack.config.development.js)

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する
    mode: 'development',
   
    // 下記の1行を追加する
    // 値はお好みで
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

本番用(webpack.config.production.js)

開発用configファイルのmodeをproductionに書き換えただけです。

ビルド時に使用するconfigファイルを指定する

下記の通り、ビルド時にオプションで使用するconfigファイルを指定します。
[使用するconfigファイルのファイル名]に、使用するconfigファイルの名前を入力します。

npx webpack --config [使用するconfigファイルのファイル名]

上述したそれぞれのファイルを指定する場合は、下記の通りとなります。

開発用configファイル(webpack.config.development.js)を使用してビルド

npx webpack --config webpack.config.development.js

本番用configファイル(webpack.config.production.js)を使用してビルド

npx webpack --config webpack.config.production.js

Visual Studio CodeでVue.jsの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用してVue.jsを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

vetur

Vue.jsのコードスニペットです。
入力補完などを行ってくれるのですが、触ってみたところ、
JavaScriptファイルにしか対応していないようです。

VueHelper

veturと同じく、Vue.jsのコードスニペットです、
こちらは、HTMLファイルやJavaScriptファイルの入力補完も行ってくれます。
正直、こちらだけインストールしておけばいい様な気がするのですが、
veturと競合して変な動作等をしないようなので、両方インストールしています。

Visual Studio CodeでHTML+CSS+JavaScriptの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用して
HTML + CSS + JavaScriptを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

HTML関係

HTML Snippets

HTML5に対応したスニペットです。

HTML Hint

HTMLの静的解析ツールです。


CSS関係

IntelliSense for CSS class names in HTML

CSSクラスの入力補完プラグインです。


JavaScript関係

ES Lint

JavaScriptの静的検証ツールです。

その他

Open in browser

HTMLファイルを右クリックすると、デフォルトブラウザで開くか
その他のブラウザで開くかを問われるメニューが追加されます。