※何度投稿しようとしてもBad Requestが出てしまったのでgistで投稿します。ご了承下さい。 gist.github.com
やりたいこと 前回エントリ LineBotで Ethereum の web3.jsを操作する(その1: バックエンドで残高取得) ではバックエンドにてLine Messaging APIとweb3.jsを使ってパブリックチェーンのイーサリアム残高を取得しました。しかしながら、送金等その他の処理も全てバックエンドで行うとなると、 秘密鍵を外部に送る機会が生じるため、(暗号化されていようといまいと)危険。 WebStorageが使えない。 など色々不便が多いため、フロントで実装したいと思います。 イメージ図 とは言え、秘密鍵をスマホに保存するのはやはり危険が伴うので、WebStorageに保管するのは、アドレスのみに留めておきます。秘密鍵はペーパーウォレット等のQRコードから読めるようにします。 1 web3.jsの読み込み web3.jsはフロント用のライブラリが用意されているので、そのまま
JavaScriptの名前空間とモジュール分割方法 require(node.js/browserify) HTMLScriptタグ WSH フル対応JavaScriptNode.jsWSHRequirebrowserify タイトルが長くなりました。 名前空間、モジュール分割。 これだけでJavaScript業界(界隈)はひどく混乱しているような気がしました。 自分はクラスタイプの.NET系経験のある、JavaScriptを初めて1ヶ月程度の者です。 他言語では迷う事のない言語の根本的な名前空間とかスタティッククラスモジュール分割的な機能が、JavaScriptだと歴史的経緯として実装がさまざまになってしまっている事に驚きました。 どうにか、混乱しないようにしておかないといけないな、と思ったのでまとめておきます。 例えば、'名前1.名前1-1.名前1-1-1'、みたいな'文字列'をピリオ
背景 browserifyは大変便利なコマンドです。 それ自体には、複数ファイルを処理するためのオプションはありません。 gulpとgulp-browserifyを組み合わせて複数ファイルを処理する方法があります。 結論 gulp-browserifyは、既にメンテナンスされていません。 npm scriptでnpm-run-allを使って置き換えました。 npm scriptで置き換え gulp-browserifyの場合 srcディレクトリにあるclient.jsとexecute.jsを変換します。 const gulp = require('gulp') const browserify = require('gulp-browserify') const src = 'src/' const dest = 'dest/' gulp .task('browserify', () =>
Reactアプリの開発環境は create-react-app で簡単に構築できる のですが、文法チェックから自動ビルドまで含めた万全の環境のため、ちょっと試すには少し重い気がします。なのでシンプルなトランスコンパイル環境を模索してみました。 最初は babel-cli だけで ok かと気軽に始めたのですが、Webブラウザ環境での import 問題が解決できず、結局は browserify と babelify の組み合わせに落ち着きました。 特に babelify のページには設定サンプルが豊富で、とても参考になりました。 準備 node と npm は利用できるよう準備しておいてください。私は node.jsの導入 あたりを参考に導入しました。 まずは作業用のディレクトリ(フォルダ)を作成します。今回は "rtk-react" としました。そして src, build のサブディレ
JavaScriptのバンドラーには今のところBrowserifyを使っているけど、webpackもどんなものか把握したいという人のための記事です。 記事執筆時点(2017/11)では、webpackのバージョンは3.8.1です。 とりあえずJavaScriptをバンドルする例 まずは単純な設定でwebpackを使ってみます。 必要なnpmパッケージはその名の通りwebpackだけです。インストールしましょう。 基本的に、webpackの設定はwebpack.config.jsというJavaScriptファイルに書いていきます。 このファイルをpackage.jsonなどと同じディレクトリに作ります。 これが基本ですが、以下の様にもできます。 (npm scriptsやgulpなどを通して)webpackを実行する際のオプションによって、明示的に設定ファイルを指定してもよい。 ファイル名を
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <script src="index.js"></script> </head> <body> </body> </html> "use strict"; var isObject = function(value) { if ( (Object.prototype.toString.call(value) === '[object Object]') && (!Array.isArray(value)) && (value !== null) && (typeof value !== 'undefined') ) { return true; } return false; }; var check = function(a, b,
関連記事 ビルドせずに CDN でReactを使いたい場合は、こちらの記事 ・React16 CDN でHelloWorld JSXありなし両方 - Qiita https://qiita.com/standard-software/items/0cdbcdb2a6d6355c946b JSXありで最小構成のビルド環境を作る場合は、こちらの記事 ・React16 最小構成のビルド環境 broserify reactify JSXあり - Qiita https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6 それぞれ参考にしてください。 はじめに 最小構成の React 16 のビルド環境を作ります。 環境は、Windows 。 node.js インストールしておいてください。 インストール 今回は browserify を
関連記事 ビルドせずに CDN でReactを使いたい場合は、こちらの記事 ・React16 CDN でHelloWorld JSXありなし両方 - Qiita https://qiita.com/standard-software/items/0cdbcdb2a6d6355c946b JSX無しで最小構成のビルド環境を作る場合は、こちらの記事 ・React16 最小構成のビルド環境 browserify JSX無し - Qiita https://qiita.com/standard-software/items/87c4a0dc3c67c426c31f それぞれ参考にしてください。 はじめに 環境は Windows 。 node.js インストール済みとします。 インストール 今回は browserify と reactify を使います。フォルダを決めてローカルインストールします。
関連記事 React16 最小構成のビルド環境 browserify reactify JSXあり - Qiita https://qiita.com/standard-software/items/781ec3f491f4f1bea7b6 こちらの記事では Browserify で Reactify を使ったのですが、Babelも同時に使いたいという要望があると思われるので、React のための変換を Babelでやるようにするのがはやりのようですね。 ですので、Browserify の transform モジュールの babelify を使って変換を行います。 はじめに 環境は Windows 。 node.js インストール済みとします。 インストール 今回は browserify と reactify を使います。フォルダを決めてローカルインストールします。 npm init -
となってしまう 以下によればそういうもんみたいなのであきらめるしかない https://github.com/browserify/browserify/issues/664#issuecomment-35615649 browserify doesn't work with conditional requires and can't be made to work with arbitrary dynamic requires without solving the halting problem first. Do something different instead. This is a dead end. あきらめられなかったので続き → browserify前にrequireのパスを正規表現で置換
はじめに WebpackやBrowserifyなどのモジュールバンドラーは最近のWeb開発ではなくてはならない存在ですが、基本的には設定ファイルを書いてコマンドをたたくだけでバンドルができてしまうので、それらがどのようにモジュールの依存関係を解決しバンドルを作成しているのかという裏側の仕組みまで知る機会はあまりないかと思います。 私自身もVue.jsアプリを作っていたりしますが、Webpack周りはvue-cliにお任せしてしまっているので、Webpackについてはあまり詳しくありません。 しかし先日Webpackによるビルドがうまくいかないことがあり、何が原因なのか調べるのにバンドルのソースを確認しようとしたのですが、どこに何が書いてあるのかよくわからず非常に苦労しました。 そんな時にTwitterでminipackというリポジトリを見つけました。 https://github.com/
やりたいこと 前回エントリ LineBotで Ethereum の web3.jsを操作する(その1: バックエンドで残高取得) ではバックエンドにてLine Messaging APIとweb3.jsを使ってパブリックチェーンのイーサリアム残高を取得しました。しかしながら、送金等その他の処理も全てバックエンドで行うとなると、 秘密鍵を外部に送る機会が生じるため、(暗号化されていようといまいと)危険。 WebStorageが使えない。 など色々不便が多いため、フロントで実装したいと思います。 イメージ図 とは言え、秘密鍵をスマホに保存するのはやはり危険が伴うので、WebStorageに保管するのは、アドレスのみに留めておきます。秘密鍵はペーパーウォレット等のQRコードから読めるようにします。 1 web3.jsの読み込み web3.jsはフロント用のライブラリが用意されているので、そのまま
(強いて言うなら)サーバー・インフラ開発者の、初めてのWebページ開発 その2. HTMLとJavaScriptとの連携JavaScriptjQuery初心者Ajaxbrowserify はじめに Webページ開発初心者のサーバー・インフラ開発者が簡単なページ開発を行った際の記録その2です。その1はこちら。(要約: CSS設計大事) 今回はJavaScript部分を作ってみます。 環境構築 Webサーバーとして動作させたい: Node.jsの利用 まずはjsで実際にWebサーバーとして動作させたいので、Webサーバーの用意をしましょう。私は自宅に立てたルーターをHTTPサーバー(lighttpd)にします。 …なんて「Webサーバー」とくくられるとハードルが高くなっちゃいますが、Node.jsというサーバーサイド向けのJavaScript実行環境を利用すると、比較的簡単に簡易的なWebサー
以下のようなことがやりたくて環境を整えてみたのでメモ。 Reactつかいたい + JSXで書きたい 再利用できそうなComponentを別のjsファイルにしておいて、requireで依存性を解決とかしたい トップページ用のjsと、検索ページ用のjsが別々に存在してる、みたいな想定。うまく言えないけどrequireのrootが複数あるような? watchしておいて勝手にビルドされるといいな ということでタイトルのものを組み合わせてみたのだけれど、不勉強だからか意外とハマりました。。 package.json 色々試行錯誤していって最終的に以下のようなpackage.jsonが出来上がりましたという感じです。 { "name": "test-proj", "description": "test project", "main": "gulpfile.js", "scripts": { "wa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く