2017-12-06

preact-cliにてtemplate.htmlをカスタマイズするに当たりhtmlWebpackPlugin.options.ssrより前にsprictを書くとDOMの書き換えが一部動作しない事例

駄目

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>

良い

<!DOCTYPE html>
<html lang="en">
    <head>
       <meta charset="utf-8">
       <title><%= htmlWebpackPlugin.options.title %></title>
       <meta name="viewport" content="width=device-width,initial-scale=1">
       <meta name="mobile-web-app-capable" content="yes">
       <meta name="apple-mobile-web-app-capable" content="yes">
       <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
       <% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
           <meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
       <% } %>
       <% for (var chunk of webpack.chunks) { %>
        <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
           <% for (var file of chunk.files) { %>
               <% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
                   <link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
               <% } else if (file.match(/manifest\.json$/)) { %>
                   <link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath + file %>">
               <% } %>
           <% } %>
       <% } %>
   </head>
    <body>
        <%= htmlWebpackPlugin.options.ssr({
            url: '/'
        }) %>
        <script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
        <script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
        <script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
        <script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
    </body>
</html>

2017-12-04

Firebase Storage User Base Security DocumentのRE2構文ミス

プログラミング

ユーザーデータを保護する | Firebase において

match /public/{imageId} {
  allow read: if resource.size < 100 * 1024;
  allow write: if imageId.matches(".*\.txt");
}

というサンプルがあるがエラーになる。

f:id:yoneapp:20171204180544p:plain

Google RE2の正規表現で「?（ハテナ）」「.」などをエスケープする方法【Data Studio】 - アズメディア｜広告とメディアを考える（@_danboooo_ ）を参考に

match /public/{imageId} {
  allow read: if resource.size < 100 * 1024;
  allow write: if imageId.matches(".*\\.txt");
}

と修正すると良さそう。

なお Syntax · google/re2 Wiki · GitHub にSyntaxの説明がある。

2017-12-01

typescriptでscriptタグを使いcdnから読み込んだ場合に型付でコードを書く方法がわからない

プログラミング

例えば、こういう風にScriptを読み込むと、他のサイトのロードで読み込みが終わってる可能性があるから有利（なはず）

<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>

とするとtypescript + webpackを使った時に、cdn読み込みファイルは含めないのが嬉しい。この場合に、どのように記述すればいいのだろう。

形無しで良ければ、このようにdeclareで宣言すれば良さそうでした。

declare var firebase: any

せっかくfirebaseがtypescript定義ファイルd.tsを用意してくれてるので使いたいのです。もしご存じの方が居たら教えて頂けるとうれしいです🙇

自己解決メモ

これは、TypeScriptの対応範囲で無いのかもしれない。 TypeScript上は通常の読み込みを行い、CDNを使うことを読み込みの依存関係と考えて、externalsを使ってfirebaseを無視するのが良さそう。

webpackのビルド高速化の効果を測ってみた - Qiita

2017-11-26

preact-cliでCSS Modulesを任意フォルダで使用する

プログラミング

preact-cli は webpack をラッピングしています。

preact.config.js を作成する事によりカスタマイズが可能です。
https://github.com/developit/preact-cli/wiki/Config-Recipes

また preact-cli のCSS規則で components と routes 以下のファイルは <div class={style.header}>hoge</div> のような記法が使用できるCSS Modulesで
それ以外は import 'sanitize.css' のようにCSSが読み込めるようになっています。

詳しくはコードをご確認ください。
https://github.com/developit/preact-cli/blob/1e54b822b561206ce8ea1121f4ac1877cf4e23f3/src/lib/webpack/webpack-base-config.js

そこで components と routes 以外のフォルダでもCSS Modulesで読み込まれるように試してみました。

export default function(config, env, helpers) {  
  const staticLoads = [
    source('sanitize.css'),
    source('style/index.css')
  ];

  const loaderA = config.module.loaders[4];
  const loaderB = config.module.loaders[5];
  
  delete(config.module.loaders[4].include);
  delete(config.module.loaders[5].exclude);

  config.module.loaders[4].exclude = staticLoads;
  config.module.loaders[5].include = staticLoads;
}

このように webpack の設定を上書きする事で components と routes 以外でもCSS Modulesが使えるようになります。

2017-11-19

IRKitじゃないエアコンの自動化

効率化

f:id:yoneapp:20171119101257j:plain

朝起きる前にリビングをエアコンが温めていてほしい。寝るときには、勝手に切れてほしい。

IRKit でIoTで、プログラムからエアコン操作というフレーズが思い浮かびます。

きっとそれは初手としては過剰です。ELPA タイマー付エアコンリモコン RC-32AC を使えば、この要件は満たせます。

優位性として、IRKitはUSB配線が必要ですが、RC-32ACは乾電池で動かすことが出来ます。

また、IRKitにはリモコンの学習機能がありますが、RC-32ACはありません。しかし、必要な国産エアコンのパターンはだいたい内蔵されていて、学習の手間がありません。

費用的にもRC-32ACは2000円程度であり、エアコンの自動化に挑戦する上で手軽な価格帯だと思います。

私も実際のところ、IRKitを買ってから、やりたい事に対してまだ複雑だなと考えて、RC-32ACにたどり着きました。

朝起きてリビング暖かいのは最高なので、おすすめですよ😆

2017-11-18

クラウドマイニングでビットコインを手軽に採掘

仮想通貨

f:id:yoneapp:20171116165254p:plain

クラウドマイニングとは？

ビットコインのよう仮想通貨を取引所で買う以外に、パソコンの処理計算により仮想通貨を取得するという選択肢があります。これをマイニングと言います。

自前でマイニングする事もできますが、クラウドサービスを借りるようにクラウドからマイニングをレンタルする事もできます。これがクラウドマイニングと呼ばれます。

マイニングは電気を使うので、電気代の高い日本でマイニングを行うのは不利な可能性が高いでしょう。クラウドマイニングは、電気代が有利な地域などで提供されているので、日本在住の方が自前でやるより有利になる場合が多いです。

クラウドマイニングは１〜２年の一括払いを行う事が多いので、サービス提供中の倒産や詐欺に注意が必要です。せめて、実績のある業者を選びたいものです。調べたところ今のところ実績があるもので、GenesisMiningやHashFlareが日本だと信頼されているようです。

なおGenesisMiningはビットコインプランは既に売り切れており、今回は買うことが出来ませんでした。そこで、今回はHashFlareのビットコインプランで採掘を行うことにしました。

HashFlareの会員登録と購入方法

会員登録

会員登録が完了すると、このような管理画面が見れるようになります。
（もし良ければ HashFlare から会員登録をしてくれると嬉しいです）

f:id:yoneapp:20171116111007p:plain

購入方法

実際に購入してみましょう。

HashFlareではいくつかのマイニングのアルゴリズムを選択することができます。今のところビットコインが収益性が良いとされていますので、SHA-256を選択することになるかと思います。

サイドメニューの"ハッシュレートを買う"を選択すると、アルゴリズムメニューが表示されます。

"SHA-256"を選択しましょう。

f:id:yoneapp:20171116132123p:plain

すると、次の画面になりますから、メモリを操作してほしい量の処理能力を選択しましょう。

f:id:yoneapp:20171116112108p:plain

どれぐらい購入すればいいか悩むと思います。一つの指標として、ぱぱぎーくさんが作成されているハッシュフレアの再投資シミュレーターで収益性をシミュレーションしてみると良いでしょう。

f:id:yoneapp:20171116152048p:plain — ハッシュフレアの再投資シミュレーター

例えば、このように10TH/sを選択したとします。

f:id:yoneapp:20171116151836p:plain

シュミレータの単位が10 GH/sのため、TH/sの場合はGH/sの1000倍なので10 TH/sを10000 GH/sと読み替えて、"シミュレーターのハッシュレート(×10GH/s)"欄に10000 GH/sを10で割って1000と入力します。次に"複利運用期間(日)"が180日になっているので今回は0に変更しましょう。

計算実行ボタンを押すと、このような結果が表示されます。実際には、変動する要素があるのでこの通りにならないのですが、現時点の状況が続けば165,000円の支払いに対して152日で元本を回収して、最終的には396,106円となるシミュレーションになります。

※ クラウドマイニングの収益性は１日に採掘できる仮想通貨の数と仮想通貨の価値が変動しますので、現時点で儲かる計算でも将来的には損をする可能性があります。

f:id:yoneapp:20171116112926p:plain — ハッシュフレアの再投資シミュレーター結果

予算を決めましたら緑色の"処理済み"を選択します（多分、翻訳ミスでしょう）

支払い画面に進みますので、これは必要ではありませんが、割引コードをお持ちならば"コードを使う"を押してを入力してください（初回のみ/キャンペーン展開中は無効のクーポン）

コードの入力が終わったら、価格を確認して"支払い方法の選択"を選択します。

f:id:yoneapp:20171116114609p:plain

HashFlareには複数の支払い方法があります。

f:id:yoneapp:20171116114720p:plain

ビットコインでの支払いに慣れている人は"Bitcoinで支払う"がオススメです。

"Pay with EMC"はEmercoin(エマーコイン)と呼ばれる仮想通貨での支払いですが、国内で取り扱っている取引所がないので難易度が少し高いと思われます。

"電信送金で支払う"は、銀行を使った海外振込な上に7日間程度の確認期間が必要なので、難易度がかなり高いと思われます。

"クレジットカードでの支払う"にはUPとCの２つの業者があります。HashFlareでのクレジットカード払いには非常に癖があります。

何度も試したのですが、UPは日本のクレジットカードが通らないと思われます。

Cの場合にも3DSecureに対応したクレジットカード会社である必要があります。その上で、カード情報の入力に成功しても次の画面のような謎の購入番号の入力を行う必要があります。

f:id:yoneapp:20171116115842p:plain

この確認番号はクレジットカードの利用明細に表示されるのですが、おそらく日本のクレジットカード会社では1〜2週間待たないと分からないと思われます。

私の場合は、上記画面のFAQよりお問い合わせを行うことで、手動で承認してもらえましたが、やや面倒ではあります。

"Payeerから支払う"はPaypalのような支払い方式だと思われますが、手数料がぼちぼちかかるのであまりオススメではありません。

f:id:yoneapp:20171116120815p:plain — Payeerの$150チャージに対する手数料

購入が無事完了しましたら、このようにハッシュレートの欄に処理能力が表示されます。また右下のテーブルにより売上を確認する事ができます。

f:id:yoneapp:20171116123911p:plain

以上になります。何かわからないことがありましたら、各種ルートよりご相談いただけましたらご相談に乗ることができるかと思います。

※ 投資を行う際は、自己責任で行って下さい。

2017-11-11

仮想通貨を保護できるハードウェアウォレットを買ってみた

仮想通貨

f:id:yoneapp:20171111000421j:plain

仮想通貨に関わってすぐ、自前のウォレット自体を持つことは少なくなっているのかなと思います。

bitFlyerやZaifなどの取引所に置きっぱなしになっていたり、VALUに入れっぱなしになっているかもしれません。セキュリティ的にあまり大きい金額を外部に置いておくことは良くないとされています。

じゃあどうすればいいんだろう？と思い検索し、ハードウェアウォレットのLedger Nano Sを2台購入しました。

ハードウェアウォレットに仮想通貨を入れておけば、セキュリティ的には結構安心できそうです。ただ、ハードウェアが壊れてしまったりバックアップコードを控えるのを間違えると、結局資産を失ってしまうので注意が必要です。
※ 「ハードウェアウォレットって買った方がいいの？」簡単な判断基準はコレっ！

ソフトウェアウォレットに仮想通貨を入れるという選択肢もあります。
※ ビットコインの保管(ウォレット比較)

今回、ソフトウェアウォレットのbreadもアプリがなかなか素敵な感じだったのですが、いろいろなアルトコインもまとめて管理したかったり、ChromeアプリのUIや外見が素敵だったのでLedger（対応通貨）を選択しました。

f:id:yoneapp:20171111105018p:plain — LedgerのChromeアプリ

一番安い「Ledger Nano」でハードウェアウォレット入門してみようを参考に買おうと思ったのですがLedger Nanoは現在取り扱ってないようでしたので、Ledger Nano Sを購入しました（USB TypeCの流れがきたのでUSB型は難しくなったのでしょう）

ハードウェアウォレットが故障した場合はどうなるのか？を考慮すると２台買っておくのがいいでしょう。

さて、実際に買う際には"ハードウェアウォレットの販売者が悪者で仮想通貨を盗まれる"ケースも想定する必要があります。

じゃあ誰から買えばいいかという事なのですがLedger公式サイトのRetailersに公式パートナーが表示されていますので、そこに乗っている業者さんから買うと少しは安心かなと思います。より万全を期すなら公式から買うという選択肢もあります。

Ledger Nano Sを購入して、設定が完了したら試運転をしてみましょう。仮想通貨全てに言えることですが、初めて利用するシステムでは大金を送らないほうが良さそうです。

初回の送金では10〜100円くらいの少額を送ってみて無事に着金を確認できたら（念を入れるなら着金したものを別のアドレスに送金できるところまで確認してしてから）残りを送るという慎重さが必要です。

どのような暗号通貨を扱う場合にも必要なクセですね。
いきなり1万円くらいの高額を送ろうとする人がいるのが信じられません。
まず送金元プログラムが正しく動くか分からないですよ。何も信じないのが基本。自分もミスするかもしれないから信じない。

VALU | しゅうまい（ビットコイナー）VALU継続組のVALU

最後にリカバリー手順を確認しましょう。というのも、ハードウェアが壊れてしまった場合に、リカバリー手段が正常でないと資産が失われてしまいます。そこで、少額の資産しか管理していないLedger Nano Sのメモリを一度リセットしてリカバリーを試しておくと良いでしょう。
※ ハードウェアウォレットTREZOR（トレザー）を買ったら必ずしておきたいこと

フリーランスプログラマのブログ

iOS & Rails & JavaScript

preact-cliにてtemplate.htmlをカスタマイズするに当たりhtmlWebpackPlugin.options.ssrより前にsprictを書くとDOMの書き換えが一部動作しない事例

Firebase Storage User Base Security DocumentのRE2構文ミス

typescriptでscriptタグを使いcdnから読み込んだ場合に型付でコードを書く方法がわからない

自己解決メモ

preact-cliでCSS Modulesを任意フォルダで使用する

IRKitじゃないエアコンの自動化

クラウドマイニングでビットコインを手軽に採掘

クラウドマイニングとは？

HashFlareの会員登録と購入方法

会員登録

購入方法

仮想通貨を保護できるハードウェアウォレットを買ってみた