webpackでビルドしたbundle.jsを外部から利用したい
webpackにてbundle.jsを生成したはいいけど別のJavaScriptからbundle.jsの中のモジュールを呼び出したいみたいなことはあるかとおもいます。もちろんbundle.jsに全部含めるのがベストというのは承知しているのですが、開発者の思惑の範疇を超えて後々からやむを得ない対応をしないといけないなどいろいろ理由がある場合もあります(要は本来は「知らんがな」な事案)。 特にbundle.jsの中にjqueryがあって、それを後から差し込んだJavaScriptでも利用したいんだけど「$」や「jquery」がundefinedになってしまい、無駄と分かっていてもやむを得ず多重読み込み(同じものを2度読み込む)するという自ら画竜点睛を欠いた対応を加えることになってしまいます。 そんなときにやりかた分からなかったら困るのでメモ。
環境
module | version |
---|---|
node | v8.10.0 |
webpack | v4.7.1 |
webpack.config.js
webpackの設定ファイルには以下のよう記述しました。
module.exports = { entry: { app: './src/js/index.js' }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' // 'window.$': 'jquery' }) ] };
"'window.$': 'jquery'" をコメントアウトとしていますが、これが効きませんでした。 これが効くとしている記事も散見されましたがもしかしたらwebpackのバージョンなどが合っていなかったのかもしれません。
index.js
エントリーとなるindex.jsにて以下のように記述していました。
var $ = require('jquery');
これを以下のように変更するとwindowにて読み込まれグローバルで「$」にてjqueryを参照できるようになりました。 また自作のJavaScriptについても同じ方法でグローバルに持ってくることができます。(本来ならやるべきではない、2度目)
var $ = window.$ = require('jquery'); var myModule = window.myModule = require('myModule.js');
最後に
他にいいやり方あれば知りたいです。 決してキレイなやり方ではないけどやむを得ない。そんな時を迎えないことを祈りつつ。
Eclipse(nodeclipse)+Node.js+Express4+DynamoDBの開発環境をWindows上に構築する
はじめましてNode.js。AWS Lambdaでいろいろ作ってみようと思ったときに今まではJavaを使っていました。ただサーバーレス構成でのWebアプリケーションを考えると、クライアントへのリアルタイムなレスポンスが必要になった時にJavaだとやっぱり呼び出し遅延の問題があったりとむずかしいのかなと思ったので一念発起してNode.jsを使ってみようというのがこのエントリの起点です。
2018.09.28 追記
この記事、けっこう読んでいただいているようなので以下2点を注意書きさせていただきます
- 「AWS LambdaでJavaの呼び出し遅延の問題」の記載について、「コールドスタート」のことを言っています。この対策として「ウォームスタート」があります。
- 「AWS LambdaでのNode.jsのサポートバージョン」について、2018年09月現在、「v6.10」「v8.10」となっているようです。「v4.3.2」は新規作成できないようです。
Node.js をインストール
https://nodejs.org/en/ にアクセス
- v6.10 系をインストールする場合は https://nodejs.org/dist/v6.10.3/ にアクセス (Lambdaのサポートバージョンが「v4.3.2」、「v6.10」のため)
node-v6.10.3-x64.msi をダウンロード
- インストール開始
- インストールフォルダは「/nodejs」に設定
- プロキシ環境下の場合はnpmにプロキシ設定が必要になるのでDOSプロンプトにて以下のコマンドを実行
C:\>npm config set proxy http://[USERNAME]:[PASSWORD]@[PROXY_HOST]:[PROXY_PORT] C:\>npm config set https-proxy http://[USERNAME]:[PASSWORD]@[PROXY_HOST]:[PROXY_PORT]
nodeclipse をインストール
- /eclipse4.7/eclipse.exe よりEclipseを起動
- workspaceを設定(本メモでは「/workspace_4.7」とする)
- プロキシ環境下の場合は、「設定」>「一般」>「ネットワーク接続」を選択し、以下を設定
- アクティブ・プロバイダー「マニュアル」
- 「HTTP」「HTTPS」にチェックをつけ「編集」にて両方に以下を設定
- 「ホスト」: [PROXY_HOST]
- 「ポート」: [PROXY_PORT]
- 「認証が必要」: チェックをつける
- 「ユーザ」: [USERNAME]
- 「パスワード」: [PASSWORD]
- 「適用」を選択後に、「適用して閉じる」にて設定画面を閉じる
- 「ヘルプ」>「新規ソフトウェアのインストール」を開く
- 「追加」ボタンを押し「リポジトリーの追加」を表示、以下を設定し「OK」を選択
- 「名前」: nodeclipse
- 「ロケーション」: http://www.nodeclipse.org/updates/
- 「作業対象」に「nodeclipse」を選択する
- インストールするプラグインが表示されるので「すべて選択」した後に「次へ」
- 「~見つけることができませんでした」が表示される場合、Eclipseを再起動し再実施
- あとは基本的に「はい」「OK」を繰り返しインストール
nodeclipse を設定
- 「設定」>「Nodeclipse」を選択
- 「Node.js path」に以下を設定する
- \nodejs\node.exe
Express4をインストール
nodeclipseをインストールするとExpressの「3.6.2」がデフォルトでインストールされています。したがってExpress4は手動でnpmからインストールします。
- npm にてプロキシ設定を行うためDOSプロンプトにて以下のコマンドを実行
C:\>npm install -g express C:\>npm install -g express-generator
- 以下に実行ファイルがインストールされる
- \Users[USER_NAME]\AppData\Roaming\npm\node_modules\express-generator\bin\express-cli.js
- 「設定」>「Nodeclipse」を選択
- 「Express path」に1のパスを設定する
AWS Toolkit for Eclipseをインストール
- 「ヘルプ」>「新規ソフトウェアのインストール」を開く
- 「追加」ボタンを押し「リポジトリーの追加」を表示、以下を設定し「OK」を選択
- 「名前」: AWS
- 「ロケーション」: https://aws.amazon.com/eclipse
- 「作業対象」に「AWS」を選択する
- インストールするプラグインが表示されるので「すべて選択」した後に「次へ」
- あとは基本的に「はい」「OK」を繰り返しインストール
AWS Toolkit for Eclipseを設定する
AWSのアカウントを持っている場合はキーを発行して設定すればよいですが、今回はローカル開発を想定しているのでキー、シークレットに設定する値は適当で構いません。ただこのあたりの値がlocalデータベースのファイル名に使われるようなので半角英数字を設定するのが適当かと思われます。
- 「設定」>「AWS ツールキット」を選択
- 「プロファイル詳細」に以下を設定
- 「アクセス・キーID」: test
- 「秘密アクセス・キー」:****
- 「適用して閉じる」を選択
DynamoDB ローカルテストツールをインストール
- 「設定」>「AWSツールキット」>「DynamoDB ローカルテストツール」を選択
- 「インストール・ディレクトリー」に以下を設定(※ インストール・ディレクトリは手動で作成すること)
- 「インストール・ディレクトリー」: C:\usr\local\dynamodb-local
- 「適用」を選択
- バージョンに以下を選択して「インストール」
- 「バージョン」: 2016-01-07
- インストール完了したら「適用して閉じる」を選択
- 「ウィンドウ」>「パースペクティブ」>「パースペクティブを開く」>「その他」>「AWS管理」を選択
- 「AWSエクスプローラー」が開くので右上の立方体マークを選択
- リージョンが表示されるので「localhost」を選択
- 「Amazon DynamoDB」が表示されるので右クリック「Start DynamoDB Local」を選択
- DynamoDB Localが「http://localhost:8000」で起動する
Node.js Express プロジェクトの作成
- プロジェクト・エクスプローラーで右クリック「新規」>「Node.js Express Project」を選択
- プロジェクト名を入力して「完了」を選択
- プロジェクト・エクスプローラーにファイルが生成される
- 「/bin/www」を右クリックし「実行」>「Node Application」を選択
- ブラウザにて「http://localhost:3000/」にアクセスする
まとめ
JavaやRubyの開発環境構築に負けるとも劣らないぐらいハマりポイントが何箇所かありました。(特に「Express4」のあたり。。。) と、今回は書けませんでしたがDynamoDBとの連携は「dynamoose」などを使ってみるとよいかと思います。
参考
Eclipse に Nodeclipse を入れて Node.js のデバッグ環境を作る : まだプログラマーですが何か?
【Node.js】Eclipseの設定(Nodeclipse + Express 4) - STDIO
node.js - How to update Express.js template in nodeclipse - Stack Overflow
GitHub - dynamoosejs/dynamoose: Dynamoose is a modeling tool for Amazon's DynamoDB
平成29年度秋期情報処理技術者試験への申し込み
来週7月6日(木)、秋期の情報処理技術者試験の申し込み開始ですね。今回は初の論述の問題がある試験に挑んでみようかと思います。技術士の第二次試験にも論文があったり、会社で報告書の提出の機会も多くなってきた(自分もそういう年齢になってきた)のでそのあたりの練習も兼ねて。なのでシステムアーキテクト、ITサービスマネージャ、ITストラテジストのいずれか。自分の業務に一番近そうなのは「システムアーキテクト」になるんだけど、挑戦してみたいのは「ITストラテジスト」となりさてどうしたものか。
試験対策
全体
午前はとにかく過去問。IPAのWebサイトからもダウンロードできるし、解説がほしいなら市販の過去問題集か参考書が必要になる。 午後は勉強とか暗記というよりもどういう問いかけをされるか?と、それにどう答えるかの傾向は掴んでおく必要があるって感じかな。なので午後Iについても結局は過去問とその解答・解説を何年分か見てみた上で思考方法を馴染ませておくのがよさそう。論述についても解答例がついた参考書で傾向を掴めれば高度の試験区分に問わず対策は横展開できると考えてもよさそう。
午前I (マークシート)
免除なのでやりません。免除じゃなかったとしても過去3~5年分の試験問題を反復して3回ぐらい回せば合格ラインの達成はそんなにむずかしくないはず。これについては基本情報処理技術者、応用情報処理技術者、あと他の高度試験の午前についてもきっと同じ。
午前II (マークシート)
基本的に午前Iと同じやり方。ただ過去問を見る限りマネジメント・ストラテジ系の問題の割合が多くなるのかな。正直あまり得意ではないのでこの機会に苦手を克服したいなと。あといつもはノートに回答をズラッと書いて採点、書いて採点を何回もするのですがそれができそうな解説付きの自分的にはイイ感じの問題集が見つからなかった。どうしようかと思っていたけどGoogle Playのアプリでそれっぽいのがあったので今回はこれでやってみようかな。100円と安いので。
午後I (記述式)
システムアーキテクトだったら自分の普段の業務、特に上流工程部分にかなり近い。他人が書いたシステム構築提案書を読ませてもらえる機会をもらったと思いながら、いろいろ細かいところをチクチクとツツく感じ。時には過去に自分が関係した似たようなシステム・事案が出てきて「あぁこうすりゃよかった!」と改めて気づかされることもしばしば。そういう意味では情報処理試験は実務とかけ離れているとはまったく思わない。あと自分のやり方としては先に問題の設問と解答欄を見てから問題を選んでます。選択肢で分かるものがあればラッキーだし、「a」に入るものは?なんかもすぐに分かったりするのがあったり、「下線部分の~」とかの問題も然り。要は自分が得意そうなのを先に見つけられるようにざっと目を通す。また参考書はちょっと古くてもたぶん問題ない。
- 作者: 松田幹子,松原敬二,満川一彦
- 出版社/メーカー: 翔泳社
- 発売日: 2017/03/07
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
午後II (論述式)
これははじめてやるのでなんとも言えないのだけれど、上述のとおり結局は模範解答に如何に近づけられるかになると思う。そういう意味では問題文と参考書の模範解答を熟読して自分のものにできるかどうか。それができれば高度の試験区分に問わず午後IIの論述は無双できるのかなと。まだ参考書も開いていないし買ってさえいないのだけれども。
情報処理教科書 高度試験午後II論述 春期・秋期 (EXAMPRESS)
- 作者: ITのプロ46,三好康之,秋田智紀,佐久間賢次,藤田章康
- 出版社/メーカー: 翔泳社
- 発売日: 2013/07/23
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (8件) を見る
まとめ
というわけで秋期は「システムアーキテクト」「ITストラテジスト」のいずれかを受験したいと思います。技術士の第一次試験の翌日曜日になりますのでいろいろな気合が多く必要になりますが臆せず臨みます。ダブルで受験される方、一緒に頑張りましょう;)
技術士(情報工学)の第一次試験申し込み
今週は春期の高度情報処理技術者試験の合格発表がありました。今回は情報処理安全確保支援士(登録セキスペ)・旧情報セキュリティスペシャリストを受けましたが無事合格しました。資格の名称に不満はあるものの、高度情報処理技術者試験ははじめて合格できたので素直に喜ばしいことに思っています。情報処理試験の対策などはまた別の記事に起こすとして、今回は技術士試験のことを書きます。
技術士
IT関係の技術者にはあまり馴染みのない資格ではないかと思います。先述の情報処理技術者試験は経済産業省が行う国家試験に対して、技術士は文部科学省が認定する国家資格になります。情報処理技術者試験は試験内容が情報処理に特化しているといえますが、技術士は情報処理(技術士では情報工学部門にあたります)以外にも建築や機械、電子、環境、原子力など21の技術部門が設けられており「技術」に関して網羅された資格といえると思います。今回は技術士の情報工学部門(以下、技術士(情報工学)といいます)の試験申し込みについて述べます。
試験について
大きく第一次、第二次があります。第一次試験に合格すると、第二次試験に進むことができますが、第二次試験を受けるためには第一次合格から一定期間必要だったり、実務経験が必要だったりします。第一次試験については申し込み条件は特にないようです。今回は第一次試験について述べます。
申し込みの流れ
基本的には以下を読むと分かります。
概ね以下のような流れになります。
- 申込書のダウンロード(PDF)
- 申込書を入力(PDFに直接書き込みます)
- 申込書を印刷(PDF内のボタンから印刷します)
- 受験料を振り込み
- 申込書に振り込み明細の原本、証明写真を貼付
- 申込書を郵送
申込書の入力
気をつけないといけないのはこのPDFを入力した状態のまま保存できないこと。 途中まで入力して続きはまた今度と思って別名保存しても入力した情報は残りません。 印刷でPDFにできるソフトで別のPDFにしようとしてもエラーが起こったりとこの申込書のPDFはなかなか手ごわいです。 家にプリンタがない人とかネットプリントを使っている人にはちょっとなんらか工夫が必要かもしれません。 「Microsoft XPS Document Printer」にてxpsファイルにした後、さらにそれを印刷してPDFとして保存してなんとか乗り切れました。
試験対策
基本的には情報処理技術者試験の午前と似たような問題が出題されます。 対策も過去問を中心にやれば合格はそんなに難しくないように思われます。 このあたりは受験後にまたまとめたほうがよさそうかな。
まとめ
受験料が11,000円、第二次でさらに14,000円とあまりかわいくない金額設定であるとか、申し込みがWebでできないとか、入金も振込みだけとか、申込期間が非常に短いだとか、年1回しかないとか、いろいろ言いたいことはたくさんあるのですが、技術士は科学技術分野での最高位の国家資格であり取得者は「高度な技術力を持った技術者」であることが認定されます。特に建設部門、総合技術管理部門の社会的評価は高いようですね。情報工学部門については現在は受験者も少なく今後に期待されるといったところでしょうか。二次試験の記述と論文は高度情報処理技術者試験とも通じ、最後の口頭試験は昇進面接のようなもの?と普段の業務ではあまりない機会を与えてくれます。そこまでいけることを祈りつつ申込書を送付したいと思います。
EC2 Windowsインスタンスにfluentdを導入してログファイルをS3に保存する
Windowsにfluentdを導入するという記事があまりに少ない・ヒットしないのでメモ書き。そもそもAWSでWindows使ってる人・案件少ないのかな?
インストール
基本的に以下のリンクの内容でインストールできる。キャプチャも貼ってあるので丁寧だ。
手順詳細
インストールがうまくいかなかったり、導入してもうまく動作しなかったり、いろいろうまくいかないことは世の常(というよりWindows + Ruby環境は昔から魔窟である印象)なので手順の詳細を以下に書きました。 概ね以下のような手順となる。
- rubyをインストール
- DevKit-mingwをインストール
- gitをインストール
- fluentdをインストール
- fluentdのプラグインをインストール
- fluentdをサービス登録
- fluentdの設定ファイルを設定
- fluentdを起動
gemからfluentdをインストールすることになるのですがうまくいきませんでした。gemを最新版にアップデートしてfluentdをインストールすればよいのですが、今度はgemをアップデートするのに躓きます。このあたりはrubyあるあるのようです。以下の手順で解決しました。
@rem gem install でエラーとなるのでgemを最新に更新 cd C:\ C:\>gem -v 2.5.1 @rem Rubygemsを最新バージョンにする。 @rem アップデートはgemで取れるが、上で示した通りhttpsは通らないので、httpを指定して取る。 @rem セキュアな方法ではないのであまりオススメしません。どうしても気になるor組織の都合上許されない人はgemの手動ダウンロードからのインストールを試みてください C:\>gem install rubygems-update --source http://rubygems.org/ @rem 出力省略 C:\>update_rubygems @rem 出力省略 C:\>gem -v 2.6.7
またWindowsに対応したfluentdのバージョンは0.14以上となります。gemでなにも指定しないと0.12が入ったりするようなのでバージョンを指定してインストールします。
@rem fluentdインストール C:\>git clone https://github.com/fluent/fluentd.git C:\>cd fluentd C:\fluentd>gem install bundler C:\fluentd>bundle C:\fluentd>bundle exec rake build @rem fluentd 0.14.13 built to pkg/fluentd-0.14.13.gem. @rem pkg配下にgemが作られるのでそれを指定してインストール C:\fluentd>gem install pkg\fluentd-0.14.13.gem --no-ri --no-rdoc
プラグインについてもfluentd 0.14に対応したものをインストールします。「fluent-plugin-ec2-metadata」は名前の通りEC2のメタデータ(インスタンスIDとかタグとか)を取得するプラグインで「v0.1.0」以上がそれに当たるようです。「fluent-plugin-s3」はこちらも名前の通りS3を操作(アップロード)するプラグインで「1.0.0」以上をインストールする必要があります。
@rem pluginインストール C:\fluentd>gem install fluent-plugin-ec2-metadata -v 0.1.0 --no-document C:\fluentd>gem install fluent-plugin-s3 -v 1.0.0.rc2 --no-document
そして起動、と行きたいところですがこのまま起動するとS3へアップロードの段でSSLエラーが発生するので以下より証明書をダウンロードし任意の場所に設置、環境変数「SSL_CERT_FILE」へパス設定する。
@rem https://github.com/bagder/ca-bundle より「ca-bundle.crt」をダウンロード C:\>mkdir C:\ruby\certs @rem ca-bundle.crt を設置 C:\ruby\certs\ca-bundle.crt @rem システム環境変数に設定 @rem 変数名: SSL_CERT_FILE @rem 変数値: C:\ruby\certs\ca-bundle.crt
fluentd をWindowsのサービスとして登録、またオプションも指定します。それぞれのパスは環境に応じて適宜変更してください。
@rem fluentdをWindowsのサービスとして登録 C:\>fluentd --reg-winsvc i @rem fluentdを設定 C:\>fluentd --reg-winsvc-fluentdopt '-c C:/fluent/fluent.conf -o C:/fluent/log/fluent.log'
fluentd の設定ファイルを設定する(C:/fluent/fluent.conf)
(S3に保存するログファイルを指定、AutoScalingを設定する場合はS3のオブジェクトキー[パス]にインスタンスIDを加えるなど工夫が必要になります。後追いで記述。)
Windowsのサービスからfluentdを起動します。AutoScalingなインスタンスの場合は自動起動設定もお忘れなく。
総評
動作はひととおり確認してちゃんとS3に保存されていました。ただはじめにも書きましたが記事などがあまりないのと、fluentd0.14がまだあまり浸透していないせいなのかプラグインの状況や設定ファイルの記述方法についても情報が乏しく少し苦労しました。公式ドキュメントを熟読した上で設定触りながら動作確認したり、時にはソースコードを覗いたりするのがいいかもしれません。(意外と?中身はシンプルな作りでした)
参考
fluentd 0.14
Fluentd v0.14.0 has been released | Fluentd
Updating plugin for v0.14 from v0.12 | Fluentd
Fluentd Meetup 2016 Summer レポート 〜 v0.14 の新機能からプラグイン開発者向け API まで - 無印吉澤
Windows + fluentd, rubyとか
Fluentd が Windows を正式サポートしたので動かした - 蒼の王座・裏口
EC2のログをfluentdを使ってタグ情報を利用したフォルダ構成でS3にアップロードする - Qiita
windowsにfluentdをインストールする手順 - Qiita
EC2にオープンソースMAの「Mautic」をインストールして日本語化する
MA(Marketing Automation:マーケティングオートメーション)とはなに?ぐらいのレベルからひとつ抜けるためにも実際に触ってみようということでオープンソースMAである「Mautic」のオンプレミス版をAWS EC2にインストールした。そのメモ書き。
Mautic
MAツールは導入から運用までを考えると初期費とコンサルティング費で軽く800万~1,000万ぐらいの可愛くないコストがかかる模様。
なのでちょっとした開発やサーバ運用を厭わないチームなのであればMauticのオンプレミス版(無料)を入れて、使ってみたあと予算を確保するかどうかを考えるといいらしい。
Mauticは他の有償のMAツールと大体同程度の機能は備えてあるとのことなので使わない手はない。
そして読み方は「マウティック」でいいのかな?
インストール
基本的に以下のリンクの内容でインストールまでは完了。
DBについてはRDSにするか、EC2内に立てるかがあると思うのですが本番運用でもない限りはEC2内に立ててしまったほうが良いように思います。RDS高いので。その分バックアップは自分でしないといけないし自動起動設定なんかも忘れずにしないといけない。RDSの運用上手くやってる(使うときだけ起動するなど)チームならRDSでもいいかもしれない。そのあたりは用途と運用するチームのスキル次第で判断すればいいんじゃないかな。
日本語化
しかし、日本語化しようと思うとディレクトリの権限設定に以下を追加しないといけないようだった。
$ sudo chown -R apache:apache /var/www/html/media $ sudo chown -R apache:apache /var/www/html/translations
これらディレクトリに権限を与えることで[歯車アイコン] > [Configuration:設定] > [System Defaults:システムのデフォルト] > [Default Language:デフォルトの] の設定を「Japanese:日本語」を選び、「Apply」して「Save & Close」すれば、同ディレクトリ内に翻訳がダウンロードされて日本語表示にすることができるようだ。
アカウント
アカウント登録は1件ずつ。今回はチーム(数人~十数人)で使ってみようと思ったので、まとめて登録する方法があるのなら誰か教えてほしい。
それにRoleが初期のままだと「Administrator」しかない。このあたりはひと通りの検証をした後に運用ルールを決めてそれぞれのユースケースに対して自分で設定する必要があるよう?もうちょっとなんとかならないのかな。ベストプラクティスとかあるならこれも誰か教えてほしい。
検証
おおまかには以下のような流れになるのかな。
- コンタクトに自分を登録して、そのコンタクトに対してランディングページへのリンクを仕込んだメールを作成。
- ランディングページはMauticのものを使ってもいいし、外部で作ったのならトラッキングコードを仕込む。
- 自分にメールを送信して、受信したメールを開封
- メール本文のランディングページのリンクをクリック。
- メールの開封率、クリック、コンバージョンの計測。
注意しないといけないのはMauticにログインしたブラウザで、メール本文のランディングページへのリンクを開くとクリック・コンバージョンはカウントされないらしい。
そのあたりはMAとしてよくできている。なのでブラウザのシークレットモードなんかで開けば計測されるはず。
あとコンタクトはcsvでインポートできる模様。アカウントもできるようにしてほしい。
この次、感想とか
リードの管理だとか大事なところはまだこれから勉強しないといけない。
でも導入も簡単だし、Google Analyticsのトラッキングコードライクなスクリプトの埋め込みで計測もできるし、会員情報を管理しているオウンドメディアを展開しているところならちょっと入れてみるぐらいの感覚でもいいのかもしれない。敷居はかなり低い。
あと気になるところはコンタクトへのメールの送信かな。会員のほとんどが携帯のキャリアメールだったりするオウンドメディアだとMauticのような海外製のサービスよりも日本のメールマーケティングツールのほうがノウハウは蓄積されているだろうと思う。そのあたりもフォーラムが元気だと日本の開発者がプラグインとか開発してたりを期待できるのだけれど、ちょっと求めすぎかな。自分がやれってね。