Jekyll2017-11-09T00:41:09+09:00https://chocolateorange.github.io/chocolateorange.github.iowebsite of chocolateorangesasaplus1032017-11-08T00:00:00+09:002017-11-08T00:00:00+09:00https://chocolateorange.github.io/2017/11/08/03<p><a href="http://sass-compatibility.github.io/">Sass Compatibility</a>関連のリンクについて。</p>
<ul>
<li><a href="http://sass-compatibility.github.io/">Sass Compatibility</a></li>
<li><a href="https://github.com/sass-compatibility">GitHub Organization</a></li>
</ul>sasaplus1Sass Compatibility関連のリンクについて。022017-11-08T00:00:00+09:002017-11-08T00:00:00+09:00https://chocolateorange.github.io/2017/11/08/02<p>npmからインストールできる<code class="highlighter-rouge">sass</code>モジュールについて。</p>
<p><code class="highlighter-rouge">npm install sass</code>でインストールされるモジュールがいつの間にか<code class="highlighter-rouge">dart-sass</code>になっていた。</p>
<ul>
<li><a href="https://www.npmjs.com/package/sass">sass</a></li>
<li><a href="https://www.npmjs.com/package/dart-sass">dart-sass</a></li>
</ul>
<p><code class="highlighter-rouge">dart-sass</code>は名前からもわかるようにDartで書かれており、JavaScriptにコンパイルされたコードがモジュールとしてインストールされる。</p>
<p>実行ファイルもインストールされるので、コマンドラインから<code class="highlighter-rouge">sass</code>コマンドとして使用できる。</p>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> ./node_modules/.bin/sass <span class="nt">--help</span>
<span class="go">Compile Sass to CSS.
</span><span class="gp">Usage: dart-sass <input></span>
<span class="go">
--[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.
</span></code></pre></div></div>sasaplus1npmからインストールできるsassモジュールについて。012017-11-08T00:00:00+09:002017-11-08T00:00:00+09:00https://chocolateorange.github.io/2017/11/08/01<p><code class="highlighter-rouge">npm</code>コマンドから取得できるパスについて。</p>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> npm bin
<span class="go">/path/to/repos/node_modules/.bin
</span></code></pre></div></div>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> npm root
<span class="go">/path/to/repos/node_modules
</span></code></pre></div></div>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> npm prefix
<span class="go">/path/to/repos
</span></code></pre></div></div>
<p>いずれのサブコマンドも<code class="highlighter-rouge">-g</code>オプションを付けることによってグローバル領域のパスを取得できる。</p>sasaplus1npmコマンドから取得できるパスについて。Travis-CIでコンテナベースの環境にパッケージを追加する2017-07-13T00:00:00+09:002017-07-13T00:00:00+09:00https://chocolateorange.github.io/2017/07/13/02<p>Travis-CIでは<code class="highlighter-rouge">sudo: false</code>とするとコンテナベースの環境が使用され、動作が高速になるが通常の方法によるパッケージの追加ができない。</p>
<p>APTアドオンを使用することによって、コンテナベースの環境でもパッケージを追加できる。</p>
<p><a href="https://docs.travis-ci.com/user/installing-dependencies/#Installing-Packages-with-the-APT-Addon">Installing Packages with the APT Addon</a></p>
<p>ホワイトリストは以下のリポジトリから確認できる。</p>
<p><a href="https://github.com/travis-ci/apt-source-whitelist">https://github.com/travis-ci/apt-source-whitelist</a></p>sasaplus1Travis-CIではsudo: falseとするとコンテナベースの環境が使用され、動作が高速になるが通常の方法によるパッケージの追加ができない。GoogleアラートとはてなアンテナをRSSフィードで読む2017-07-13T00:00:00+09:002017-07-13T00:00:00+09:00https://chocolateorange.github.io/2017/07/13/01<p>Googleアラートとはてなアンテナに登録した情報をRSSフィードで読む方法について。</p>
<h2 id="googleアラート">Googleアラート</h2>
<p><a href="https://www.google.com/alerts">Googleアラート</a></p>
<p>アラートを作成する際にオプションを表示し、配信先を「RSS フィード」に選択してから作成するとフィードのアイコンが表示されるので、それをRSSフィードに登録する。</p>
<h2 id="はてなアンテナ">はてなアンテナ</h2>
<p><a href="http://a.hatena.ne.jp">はてなアンテナ</a></p>
<p>URLの末尾に<code class="highlighter-rouge">/rss</code>を付加すると、RSSが配信されているので、それをRSSフィードに登録する。</p>
<p>以下に詳しく記載してある。</p>
<p><a href="http://hatenaantenna.g.hatena.ne.jp/keyword/RSS%28RDF%20Site%20Summary%29%E3%81%AE%E9%85%8D%E5%B8%83%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">RSS(RDF Site Summary)の配布について</a></p>sasaplus1Googleアラートとはてなアンテナに登録した情報をRSSフィードで読む方法について。dアカウントのロックを解除する2017-07-12T00:00:00+09:002017-07-12T00:00:00+09:00https://chocolateorange.github.io/2017/07/12/01<p>SPモードの契約をしていないドコモの回線でdアカウントがロックされた場合、アカウントの再発行をし既存のアカウントを上書きすることでロックを解除するのと同等のことができる。</p>
<p>回線の契約やdアニメストアなどの契約は上書きされるアカウントのものを引き継げる。(引き継げた)</p>
<hr />
<p>アカウントの再発行をする手順は以下の通り。</p>
<p><a href="http://id.smt.docomo.ne.jp/src/utility/pc/faq1.html#p04">「ID/パスワード」を何度か誤って入力したら「ID/パスワードがロックされているため、ログインできません。 ロック解除の手続きを行ってください。」というメッセージが表示され、ログインできなくなりましたが、どうしたらよいですか?</a></p>
<p>自分は上記のページの「SMSが受信できる端末をご利用のお客様」に該当したので、以下を試した。</p>
<blockquote>
<p>ドコモのお客様で、SMS(ショートメール)を受信できる端末をご利用の場合、パソコン等からdアカウントの再発行をすることでロック解除ができます。再発行をしても契約内容や設定内容は変更されません。
再発行は、「dアカウントを発行する」で開く画面の「ドコモの回線をお持ちの方」を選択し、画面の表示に従ってお手続きください。</p>
</blockquote>
<p>アカウントの再発行をする際、試しに、と思いロックされた既存のアカウントと同じアカウント名を使用したところ、同じアカウント名で再発行をすることができた。</p>
<p>上書きしたアカウントはdアニメストアに正常にログインでき、視聴履歴などもそのまま残っていた。「料金の確認・お支払い」のページも開くことができ、契約している回線の情報が表示された。</p>
<hr />
<p>経緯としては、料金の確認をしようとdアカウントにログインしようとして、何度もログインに失敗してしまいロックされてしまった。仕方がないので以下のページを読むことに。</p>
<p><a href="https://id.smt.docomo.ne.jp/src/utility/idpw_forget.html">ID/パスワードをお忘れの方・ロックがかかってしまった方</a></p>
<p>上記のページに記載してある方法を試していたのだけど、埒が明かず、仕方なくドコモショップに行って確認したところ、以下の方法を紹介された。</p>
<ol>
<li>SPモードを一度契約してロックを解除する</li>
<li>新しくアカウントを作りそのアカウントを電話番号と紐づける</li>
</ol>
<p>今回の再発行は2.に近いが、複数のアカウントが存在することになる、と言っていたので今回の再発行とは異なる。また、使わなくなるとはいえログインできないアカウントが残されたままになるのは避けたかった。</p>
<p>なので1.を試す他ないと思っていたが、しぶとく調べていたところ<a href="http://id.smt.docomo.ne.jp/src/utility/pc/faq1.html#p04">「ID/パスワード」を何度か誤って入力したら「ID/パスワードがロックされているため、ログインできません。 ロック解除の手続きを行ってください。」というメッセージが表示され、ログインできなくなりましたが、どうしたらよいですか?</a>を見つけることができ、試してみたところ上手くいった。</p>sasaplus1SPモードの契約をしていないドコモの回線でdアカウントがロックされた場合、アカウントの再発行をし既存のアカウントを上書きすることでロックを解除するのと同等のことができる。formの中にある要素にname属性の値でアクセスする2017-06-28T00:00:00+09:002017-06-28T00:00:00+09:00https://chocolateorange.github.io/2017/06/28/01<p>formの中にある要素を取得する方法をよく忘れるのでメモしておく。</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><form</span> <span class="na">name=</span><span class="s">"form1"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"text1"</span><span class="nt">></span>
<span class="nt"></form></span>
</code></pre></div></div>
<p>上記のようにマークアップされていた場合、<code class="highlighter-rouge">form</code>要素を取得するには以下のコードでアクセスできる。</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">form1</span><span class="p">;</span>
</code></pre></div></div>
<p><code class="highlighter-rouge">input</code>要素を取得するには以下のコードでアクセスできる。</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">form1</span><span class="p">.</span><span class="nx">elements</span><span class="p">.</span><span class="nx">text1</span><span class="p">;</span>
</code></pre></div></div>
<p>ドキュメント内のすべての<code class="highlighter-rouge">form</code>要素を取得したければ、以下のコードでアクセスできる。</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">document</span><span class="p">.</span><span class="nx">forms</span><span class="p">;</span>
</code></pre></div></div>sasaplus1formの中にある要素を取得する方法をよく忘れるのでメモしておく。UglifyJSで文字列をエスケープシーケンスに変換する2017-06-16T00:00:00+09:002017-06-16T00:00:00+09:00https://chocolateorange.github.io/2017/06/16/01<p>HTMLがShift_JISで配信されている環境で、JavaScriptにマルチバイトの文字を書いてUTF-8で保存し、ブラウザでアラートを表示したら文字化けしてしまった。</p>
<p>素直にスクリプトをShift_JISで保存し直せばよかったのだろうが、UTF-8で保存したかったので文字列をエスケープシーケンスへ変換することにした。</p>
<p>調べてみると、UglifyJSにはエスケープシーケンスに変換するオプションがあるようで、以下のIssueのコメントのようにすると変換できる。</p>
<p><a href="https://github.com/mishoo/UglifyJS2/issues/490#issuecomment-53410397">https://github.com/mishoo/UglifyJS2/issues/490#issuecomment-53410397</a></p>
<h2 id="cli">CLI</h2>
<p>CLIから実行する場合は以下のようにオプションを指定する。</p>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> uglifyjs index.js <span class="nt">-b</span> <span class="nv">beautify</span><span class="o">=</span><span class="nb">false</span>,ascii_only<span class="o">=</span><span class="nb">true</span>
</code></pre></div></div>
<p>標準入力からスクリプトを与えると以下のような出力になった。</p>
<div class="language-console highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gp">$</span> <span class="nb">printf</span> <span class="nt">--</span> <span class="s1">'alert("マルチバイト")'</span> | uglifyjs <span class="nt">-b</span> <span class="nv">beautify</span><span class="o">=</span><span class="nb">false</span>,ascii_only<span class="o">=</span><span class="nb">true</span>
<span class="gp">alert("\u30de\u30eb\u30c1\u30d0\u30a4\u30c8");</span>
</code></pre></div></div>
<h2 id="webpack">webpack</h2>
<p>webpackの場合は<a href="https://github.com/webpack-contrib/uglifyjs-webpack-plugin">UglifyJS Webpack Plugin</a>を使用するので、以下のようにオプションを指定する。</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">webpack</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'webpack'</span><span class="p">);</span>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span> <span class="o">=</span> <span class="p">{</span>
<span class="c1">// ...</span>
<span class="na">plugins</span><span class="p">:</span> <span class="p">[</span>
<span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">optimize</span><span class="p">.</span><span class="nx">UglifyJSPlugin</span><span class="p">({</span>
<span class="na">output</span><span class="p">:</span> <span class="p">{</span>
<span class="na">ascii_only</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="p">},</span>
<span class="p">}),</span>
<span class="p">],</span>
<span class="p">};</span>
</code></pre></div></div>sasaplus1HTMLがShift_JISで配信されている環境で、JavaScriptにマルチバイトの文字を書いてUTF-8で保存し、ブラウザでアラートを表示したら文字化けしてしまった。ツールの設定をpackage.jsonに書く2017-05-03T00:00:00+09:002017-05-03T00:00:00+09:00https://chocolateorange.github.io/2017/05/03/01<p>昨今のJavaScript開発では<a href="https://babeljs.io/">Babel</a>や<a href="http://eslint.org/">ESLint</a>などのツールがよく使われるが、これらのツールを複数使用すると<code class="highlighter-rouge">.babelrc</code>や<code class="highlighter-rouge">.eslintrc</code>などの設定ファイルがリポジトリのルートディレクトリに複数存在することとなる。</p>
<p>ツールの数が増えると設定ファイルも増えるので、管理するファイルが増える。そこで、いくつかのツールは<code class="highlighter-rouge">package.json</code>に設定を記述できるので、これを利用すると個別の設定ファイルを作成せずに済む。</p>
<h2 id="babel">Babel</h2>
<p>Babelは<code class="highlighter-rouge">babel</code>という名前でフィールドを作成すると読み込まれる。</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="s2">"babel"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="s2">"presets"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="s2">"es2015"</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>参考ページ:<a href="https://babeljs.io/docs/usage/babelrc/#use-via-package-json">Use via package.json</a></p>
<h2 id="eslint">ESLint</h2>
<p>ESLintは<code class="highlighter-rouge">eslintConfig</code>という名前でフィールドを作成すると読み込まれる。</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="s2">"eslintConfig"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="s2">"extends"</span><span class="p">:</span><span class="w"> </span><span class="s2">"eslint:recommended"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>参考ページ:<a href="http://eslint.org/docs/user-guide/configuring">Configuring ESLint</a></p>
<h2 id="postcss-cli">PostCSS CLI</h2>
<p><a href="https://github.com/postcss/postcss-cli">PostCSS CLI</a>は<code class="highlighter-rouge">postcss</code>という名前でフィールドを作成すると読み込まれる。</p>
<p>PostCSS CLIが対応している(正確にはPostCSS CLIが使用している<a href="https://github.com/michael-ciniawsky/postcss-load-config">postcss-load-config</a>が)のであって、<a href="http://postcss.org/">PostCSS</a>本体は対応していないようだ。</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="s2">"postcss"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="s2">"from"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/path/to/src.css"</span><span class="p">,</span><span class="w">
</span><span class="s2">"to"</span><span class="p">:</span><span class="w"> </span><span class="s2">"/path/to/dest.css"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>参考ページ:<a href="https://github.com/michael-ciniawsky/postcss-load-config#packagejson">postcss-load-config#packagejson</a></p>
<h2 id="stylelint">stylelint</h2>
<p><a href="https://stylelint.io/">stylelint</a>は<code class="highlighter-rouge">stylelint</code>という名前でフィールドを作成すると読み込まれる。</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="s2">"stylelint"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span><span class="w">
</span><span class="s2">"extends"</span><span class="p">:</span><span class="w"> </span><span class="s2">"stylelint-config-standard"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>参考ページ:<a href="https://stylelint.io/user-guide/configuration/#loading-the-configuration-object">Loading the configuration object</a></p>
<h2 id="browserslist">browserslist</h2>
<p><a href="https://github.com/ai/browserslist">browserslist</a>は<code class="highlighter-rouge">browserslist</code>という名前でフィールドを作成すると読み込まれる。</p>
<p><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a>や<a href="https://github.com/babel/babel-preset-env">babel-preset-env</a>などのモジュールがこれを使用している。</p>
<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
</span><span class="s2">"browserslist"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w">
</span><span class="s2">"last 2 Chrome versions"</span><span class="p">,</span><span class="w">
</span><span class="s2">"last 2 Firefox versions"</span><span class="w">
</span><span class="p">]</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>
<p>参考ページ:<a href="https://github.com/ai/browserslist#browserslist">browserslist#browserslist</a></p>
<p><code class="highlighter-rouge">browserslist</code>フィールドと<code class="highlighter-rouge">babel-preset-env</code>の設定を含んだ<code class="highlighter-rouge">babel</code>フィールドはどちらが優先されるかは不明。</p>
<h2 id="設定を読み込むモジュール">設定を読み込むモジュール</h2>
<p>設定を読み込むモジュールには以下のようなものがある。上記のツールの多くはcosmiconfigを使用している。</p>
<ul>
<li><a href="https://github.com/davidtheclark/cosmiconfig">davidtheclark/cosmiconfig</a></li>
<li><a href="https://github.com/azu/rc-config-loader">azu/rc-config-loader</a>
<ul>
<li><a href="https://github.com/textlint/textlint">textlint</a>が使用している</li>
</ul>
</li>
<li><a href="https://github.com/MoOx/rc-loader">MoOx/rc-loader</a>
<ul>
<li>メンテナンスされていない</li>
<li>cosmiconfigに代わられた</li>
</ul>
</li>
</ul>sasaplus1昨今のJavaScript開発ではBabelやESLintなどのツールがよく使われるが、これらのツールを複数使用すると.babelrcや.eslintrcなどの設定ファイルがリポジトリのルートディレクトリに複数存在することとなる。fs.existsSyncが非推奨ではなくなっていた2017-03-27T00:00:00+09:002017-03-27T00:00:00+09:00https://chocolateorange.github.io/2017/03/27/01<p>node.jsのドキュメントを読んでいた時に<code class="highlighter-rouge">fs.existsSync()</code>が非推奨ではなくなっていたことにふと気がついた。</p>
<p>調べてみるとver.6.xから非推奨ではなくなっている。</p>
<table>
<thead>
<tr>
<th>バージョン</th>
<th>記述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://nodejs.org/docs/latest-v0.10.x/api/fs.html#fs_fs_existssync_path">0.10.x</a></td>
<td>特になし</td>
</tr>
<tr>
<td><a href="https://nodejs.org/docs/latest-v0.12.x/api/fs.html#fs_fs_existssync_path">0.12.x</a></td>
<td>非推奨になります</td>
</tr>
<tr>
<td><a href="https://nodejs.org/docs/latest-v4.x/api/fs.html#fs_fs_existssync_path">4.x</a></td>
<td>非推奨</td>
</tr>
<tr>
<td><a href="https://nodejs.org/docs/latest-v5.x/api/fs.html#fs_fs_existssync_path">5.x</a></td>
<td>非推奨</td>
</tr>
<tr>
<td><a href="https://nodejs.org/dist/latest-v6.x/docs/api/fs.html#fs_fs_existssync_path">6.x</a></td>
<td>非推奨<strong>ではありません</strong></td>
</tr>
<tr>
<td><a href="https://nodejs.org/dist/latest-v7.x/docs/api/fs.html#fs_fs_existssync_path">7.x</a></td>
<td>非推奨<strong>ではありません</strong></td>
</tr>
</tbody>
</table>
<p>調べてみると、<a href="https://github.com/nodejs/node/issues/1592#issuecomment-251770788">issues/1592</a>や<a href="https://github.com/nodejs/node/commit/7b5ffa46fe4d2868c1662694da06eb55ec744bde">commit/7b5ffa46fe4d2868c1662694da06eb55ec744bde</a>で非推奨が取り消されているのを確認できた。</p>
<p>非同期の<code class="highlighter-rouge">fs.exists()</code>は変わらず非推奨になっている。</p>sasaplus1node.jsのドキュメントを読んでいた時にfs.existsSync()が非推奨ではなくなっていたことにふと気がついた。