chocolateorange.github.io

03

2017-11-08T00:00:00+09:00

Sass Compatibility関連のリンクについて。

02

2017-11-08T00:00:00+09:00

npmからインストールできるsassモジュールについて。

npm install sassでインストールされるモジュールがいつの間にかdart-sassになっていた。

dart-sassは名前からもわかるようにDartで書かれており、JavaScriptにコンパイルされたコードがモジュールとしてインストールされる。

実行ファイルもインストールされるので、コマンドラインからsassコマンドとして使用できる。

$ ./node_modules/.bin/sass --help
Compile Sass to CSS.

Usage: dart-sass <input>

    --[no-]stdin    Read the stylesheet from stdin.
-s, --style         Output style.
                    [expanded (default)]

-c, --[no-]color    Whether to emit terminal colors.
    --[no-]trace    Print full Dart stack traces for exceptions.
-h, --help          Print this usage information.
    --version       Print the version of Dart Sass.

01

2017-11-08T00:00:00+09:00

npmコマンドから取得できるパスについて。

$ npm bin
/path/to/repos/node_modules/.bin

$ npm root
/path/to/repos/node_modules

$ npm prefix
/path/to/repos

いずれのサブコマンドも-gオプションを付けることによってグローバル領域のパスを取得できる。

Travis-CIでコンテナベースの環境にパッケージを追加する

2017-07-13T00:00:00+09:00

Travis-CIではsudo: falseとするとコンテナベースの環境が使用され、動作が高速になるが通常の方法によるパッケージの追加ができない。

APTアドオンを使用することによって、コンテナベースの環境でもパッケージを追加できる。

Installing Packages with the APT Addon

ホワイトリストは以下のリポジトリから確認できる。

https://github.com/travis-ci/apt-source-whitelist

GoogleアラートとはてなアンテナをRSSフィードで読む

2017-07-13T00:00:00+09:00

Googleアラートとはてなアンテナに登録した情報をRSSフィードで読む方法について。

Googleアラート

アラートを作成する際にオプションを表示し、配信先を「RSS フィード」に選択してから作成するとフィードのアイコンが表示されるので、それをRSSフィードに登録する。

はてなアンテナ

URLの末尾に/rssを付加すると、RSSが配信されているので、それをRSSフィードに登録する。

以下に詳しく記載してある。

RSS(RDF Site Summary)の配布について

dアカウントのロックを解除する

2017-07-12T00:00:00+09:00

SPモードの契約をしていないドコモの回線でdアカウントがロックされた場合、アカウントの再発行をし既存のアカウントを上書きすることでロックを解除するのと同等のことができる。

回線の契約やdアニメストアなどの契約は上書きされるアカウントのものを引き継げる。（引き継げた）

アカウントの再発行をする手順は以下の通り。

「ID/パスワード」を何度か誤って入力したら「ID/パスワードがロックされているため、ログインできません。ロック解除の手続きを行ってください。」というメッセージが表示され、ログインできなくなりましたが、どうしたらよいですか？

自分は上記のページの「SMSが受信できる端末をご利用のお客様」に該当したので、以下を試した。

ドコモのお客様で、SMS(ショートメール)を受信できる端末をご利用の場合、パソコン等からdアカウントの再発行をすることでロック解除ができます。再発行をしても契約内容や設定内容は変更されません。再発行は、「dアカウントを発行する」で開く画面の「ドコモの回線をお持ちの方」を選択し、画面の表示に従ってお手続きください。

アカウントの再発行をする際、試しに、と思いロックされた既存のアカウントと同じアカウント名を使用したところ、同じアカウント名で再発行をすることができた。

上書きしたアカウントはdアニメストアに正常にログインでき、視聴履歴などもそのまま残っていた。「料金の確認・お支払い」のページも開くことができ、契約している回線の情報が表示された。

経緯としては、料金の確認をしようとdアカウントにログインしようとして、何度もログインに失敗してしまいロックされてしまった。仕方がないので以下のページを読むことに。

ID/パスワードをお忘れの方・ロックがかかってしまった方

上記のページに記載してある方法を試していたのだけど、埒が明かず、仕方なくドコモショップに行って確認したところ、以下の方法を紹介された。

SPモードを一度契約してロックを解除する
新しくアカウントを作りそのアカウントを電話番号と紐づける

今回の再発行は2.に近いが、複数のアカウントが存在することになる、と言っていたので今回の再発行とは異なる。また、使わなくなるとはいえログインできないアカウントが残されたままになるのは避けたかった。

なので1.を試す他ないと思っていたが、しぶとく調べていたところ「ID/パスワード」を何度か誤って入力したら「ID/パスワードがロックされているため、ログインできません。ロック解除の手続きを行ってください。」というメッセージが表示され、ログインできなくなりましたが、どうしたらよいですか？を見つけることができ、試してみたところ上手くいった。

formの中にある要素にname属性の値でアクセスする

2017-06-28T00:00:00+09:00

formの中にある要素を取得する方法をよく忘れるのでメモしておく。

<form name="form1">
  <input name="text1">
</form>

上記のようにマークアップされていた場合、form要素を取得するには以下のコードでアクセスできる。

document.form1;

input要素を取得するには以下のコードでアクセスできる。

document.form1.elements.text1;

ドキュメント内のすべてのform要素を取得したければ、以下のコードでアクセスできる。

document.forms;

UglifyJSで文字列をエスケープシーケンスに変換する

2017-06-16T00:00:00+09:00

HTMLがShift_JISで配信されている環境で、JavaScriptにマルチバイトの文字を書いてUTF-8で保存し、ブラウザでアラートを表示したら文字化けしてしまった。

素直にスクリプトをShift_JISで保存し直せばよかったのだろうが、UTF-8で保存したかったので文字列をエスケープシーケンスへ変換することにした。

調べてみると、UglifyJSにはエスケープシーケンスに変換するオプションがあるようで、以下のIssueのコメントのようにすると変換できる。

https://github.com/mishoo/UglifyJS2/issues/490#issuecomment-53410397

CLI

CLIから実行する場合は以下のようにオプションを指定する。

$ uglifyjs index.js -b beautify=false,ascii_only=true   

標準入力からスクリプトを与えると以下のような出力になった。

$ printf -- 'alert("マルチバイト")' | uglifyjs -b beautify=false,ascii_only=true
alert("\u30de\u30eb\u30c1\u30d0\u30a4\u30c8");

webpack

webpackの場合はUglifyJS Webpack Pluginを使用するので、以下のようにオプションを指定する。

const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.optimize.UglifyJSPlugin({
      output: {
        ascii_only: true,
      },
    }),
  ],
};

ツールの設定をpackage.jsonに書く

2017-05-03T00:00:00+09:00

昨今のJavaScript開発ではBabelやESLintなどのツールがよく使われるが、これらのツールを複数使用すると.babelrcや.eslintrcなどの設定ファイルがリポジトリのルートディレクトリに複数存在することとなる。

ツールの数が増えると設定ファイルも増えるので、管理するファイルが増える。そこで、いくつかのツールはpackage.jsonに設定を記述できるので、これを利用すると個別の設定ファイルを作成せずに済む。

Babel

Babelはbabelという名前でフィールドを作成すると読み込まれる。

{
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

参考ページ：Use via package.json

ESLint

ESLintはeslintConfigという名前でフィールドを作成すると読み込まれる。

{
  "eslintConfig": {
    "extends": "eslint:recommended"
  }
}

参考ページ：Configuring ESLint

PostCSS CLI

PostCSS CLIはpostcssという名前でフィールドを作成すると読み込まれる。

PostCSS CLIが対応している（正確にはPostCSS CLIが使用しているpostcss-load-configが）のであって、PostCSS本体は対応していないようだ。

{
  "postcss": {
    "from": "/path/to/src.css",
    "to": "/path/to/dest.css"
  }
}

参考ページ：postcss-load-config#packagejson

stylelint

stylelintはstylelintという名前でフィールドを作成すると読み込まれる。

{
  "stylelint": {
    "extends": "stylelint-config-standard"
  }
}

参考ページ：Loading the configuration object

browserslist

browserslistはbrowserslistという名前でフィールドを作成すると読み込まれる。

Autoprefixerやbabel-preset-envなどのモジュールがこれを使用している。

{
  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions"
  ]
}

参考ページ：browserslist#browserslist

browserslistフィールドとbabel-preset-envの設定を含んだbabelフィールドはどちらが優先されるかは不明。

設定を読み込むモジュール

設定を読み込むモジュールには以下のようなものがある。上記のツールの多くはcosmiconfigを使用している。

davidtheclark/cosmiconfig
azu/rc-config-loader
- textlintが使用している
MoOx/rc-loader
- メンテナンスされていない
- cosmiconfigに代わられた

fs.existsSyncが非推奨ではなくなっていた

2017-03-27T00:00:00+09:00

node.jsのドキュメントを読んでいた時にfs.existsSync()が非推奨ではなくなっていたことにふと気がついた。

調べてみるとver.6.xから非推奨ではなくなっている。

バージョン	記述
0.10.x	特になし
0.12.x	非推奨になります
4.x	非推奨
5.x	非推奨
6.x	非推奨ではありません
7.x	非推奨ではありません

調べてみると、issues/1592やcommit/7b5ffa46fe4d2868c1662694da06eb55ec744bdeで非推奨が取り消されているのを確認できた。

非同期のfs.exists()は変わらず非推奨になっている。