JavaScript(Backbone.js)で、jsonファイルの読み込み方メモ
アプリケーションの設定値を定義した json ファイルの設定値を Backbone.Model を継承したオブジェクトで保持するようにしたら、 jQuery の ajax をそのまま使うよりすっきり出来た気がする（個人の感想）のでメモっとく。
もっと良いやり方あったらおしえてください。
まず html 側。 大事なのは head タグ内の script タグ部分。 Backbone.js には jQuery と underscore が必要なので、それらのライブラリを読み込んでいます。
stylesheet 読み込み部分はどうでもいいです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <title>title</title> <link rel='stylesheet' href='./css/style.css'/> <!-- 各ライブラリの読み込み --> <script src="./script/lib/jquery-2.1.4.min.js"></script> <script src="./script/lib/underscore-min.js"></script> <script src="./script/lib/backbone-min.js"></script> <!-- 今回書くJavaScriptファイル --> <script src="./script/app.js"></script> </head> <body> <p>sample</p> </body> </html>
で、次、読み込み対象の .json ファイルについて 今回は2つ .json ファイルを読み込むことにする。
一つ目の .json ファイル アプリケーションの名前とバージョンを持っている設定ファイルの想定。
config1.json
{ "app_name": "アプリケーション名", "version": "1.00" }
二つ目 画面か警告とかエラーとかの文言を定義している設定ファイルの想定。
config2.json
{ "MESSAGE_001": "メッセージゼロゼロイチ", "MESSAGE_002": "メッセージゼロゼロニ" }
で、最後に実際に、上記の json ファイルを読み込んでいるJavaScriptファイルについて。
app.js
var app = app || {}; // config.jsonを読み込むオブジェクト app.Config1 = Backbone.Model.extend({ // .json ファイルのパスを設定 url: './config1.json', }); app.Config2 = Backbone.Model.extend({ // .json ファイルのパスを設定 url: './config2.json', }); (function(){ 'use strict'; var config1 = new app.Config1(); var config2 = new app.Config2(); config1.fetch().then( function() { app.config1 = config1; return config2.fetch(); }).then( function () { app.config2 = config2; console.log( app.config1.get('app_name') ); console.log( app.config1.get('version') ); console.log( app.config2.get('MESSAGE_001') ); console.log( app.config2.get('MESSAGE_002') ); }); }());
ちょっと長くなってしまった。 まず、前半部分
var app = app || {}; // config.jsonを読み込むオブジェクト app.Config1 = Backbone.Model.extend({ // .json ファイルのパスを設定 url: './config1.json', }); app.Config2 = Backbone.Model.extend({ // .json ファイルのパスを設定 url: './config2.json', });
各jsonを読み込むためのクラスを Backbone.Model を継承して定義しています。 Backbone.Model は url 属性に定義したリソースを取得、作成、更新、削除を行う機能を持っているのでそれを使って楽します。 なので、クラスの定義は url 属性を定義するだけでおしまい。
次、後半部分
(function(){ 'use strict'; var config1 = new app.Config1(); var config2 = new app.Config2(); config1.fetch().then( function() { app.config1 = config1; return config2.fetch(); }).then( function () { app.config2 = config2; console.log( app.config1.get('app_name') ); console.log( app.config1.get('version') ); console.log( app.config2.get('MESSAGE_001') ); console.log( app.config2.get('MESSAGE_002') ); }); }());
まず、前半部分で定義したクラスを new して変数に代入します。
それで、ここからが個人的にややこしいと感じた部分。
config1.fetch() は実際には 前半部分のクラスの定義設定した url に対して HTTPリクエストのGETメソッドで非同期で取得しにいっている。 で、非同期ってことは
config1.fetch(); console.log( config1.get('app_name') ); console.log( config1.get('version') );
こんな風に書くと、config1.fetch(); でjsonファイルを読み込みに行ってるんだけど、読み込み終わらないうちに、2行目の処理に進んじゃんって、 コンソールには undefined undefined って出力される可能性が高い。
で、それを防ぐためにどうしたかって言うと、 .fetch() で jQuery のDifferedオブジェクトが返ってくるので、Differedオブジェクトの then()メソッドを使用して、fetch（実際には HTTP の GETメソッド ）が終了するのを待って、次の処理に移るようにしています。
今回の場合 config1.json の読み込みが正常に終わったらば、次は config2.json の読み込みをして、 それもちゃんと終わったらば、確認のために、それぞれの読み込んだ値をコンソールに表示するようにしています。
console.log( app.config1.get('app_name') ); console.log( app.config1.get('version') ); console.log( app.config2.get('MESSAGE_001') ); console.log( app.config2.get('MESSAGE_002') );
GitHubに学生時代に作った論理回路エディタを上げた
GitHubのリポジトリが1個だけっていうのも寂しいし、 学生時代に作った論理回路エディタを上げた。
https://github.com/jsuzuki20120311/logic_circuit_editor
こんな感じで論理回路を描けるらしい。
せっかくなのでAWSにもデプロイした。
http://ec2-54-191-139-159.us-west-2.compute.amazonaws.com:8080/logic_circuit_editor_3/
Java EE で アプリケーション起動時になんか処理するやり方
<dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> <scope>provided</scope> </dependency>
あとはServletContextListenerを実装したクラスを追加する。 例では、起動時にアプリケーションの名前とバージョンを設定から引っ張ってきて表示している。
@WebListener public class InitListener implements ServletContextListener { @Override public void contextInitialized(ServletContextEvent arg0) { System.out.println( " == Application start == " ); System.out.println( Config.getInstance().getAppName() ); System.out.println( Config.getInstance().getVersion() ); System.out.println( " ======================= " ); } @Override public void contextDestroyed(ServletContextEvent arg0) { // do nothing } }
Mac OS X で X509形式の公開鍵と、PKCS8形式の秘密鍵を生成する手順
忘れないようにX509形式の公開鍵とPKCS8形式の秘密鍵生成手順をメモっとく
ssh-keygen Generating public/private rsa key pair.
どこにファイルを作るか聞いてくる。ここではカレントディレクトリに test という名前のファイルで作成するように指定している。 Enter file in which to save the key (/Users/Jun/.ssh/id_rsa): ./test
パスフレーズを聞いてくる。同じパスフレーズを2回入力する。 Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in ./test. Your public key has been saved in ./test.pub.
次に X509形式の公開鍵を生成する openssl rsa -pubout -in test -out test.x509
パスフレーズを入力 Enter pass phrase for gonzo: writing RSA key
X509形式の公開鍵が test.X509 に出力されているはず
次に PKCS8形式の秘密鍵を生成する openssl pkcs8 -in test -out test.p8 -topk8 -nocrypt
パスフレーズを入力 Enter pass phrase for gonzo:
PKCS8形式の秘密鍵が test.p8 に出力されているはず。
おわり。
JavaScriptでプライベートなメンバ変数を作る方法メモ
はじめに普通にオブジェクト（ここでは type, name 属性を持った Catオブジェクト）を作る
function Cat (type, name) {
this.type = type;
this.name = name;
}
var tama = new Cat('ペルシャ', 'タマ');
alert(tama.type); // ペルシャが表示される。
tama.type = '雑種'; // typeを変更できてしまう。
alert(tama.type); // 雑種が表示される。血統書付きのペルシャ猫が雑種呼ばわりとはあんまりだ。
タマが雑種呼ばわりされないために、Catクラスを↓のように書き換えてみる。
function Cat (type, name) {
// これから猫種を調べるときはこのメソッドを使うこととする。
this.getType = function () {
return type;
};
this.getName = function () {
return name;
};
}
var tama = new Cat('ペルシャ', 'タマ');
alert(tama.getType()); // ペルシャが表示される。
tama.type = '雑種';
alert(tama.getType()); // 上のコード実行後もペルシャが表示される。
JavaScriptでSingletonパターン（browserify + Backbone.js）
JavaScriptでのSingletonパターン実装方法の備忘録です。 browserify使用している環境で、Backbone.Modelを継承したオブジェクトをSingletonにしています。 getInstance()メソッドでオブジェクトを取得します。
module.exports = (function() { 'use strict'; var Backbone = require('backbone'); /** * インスタンス保持用変数 */ var instance = null; var Singleton = Backbone.Model.extend({ //... }); return { /** * インスタンス取得パブリックメソッド * @returns {Singleton} */ getInstance: function() { if( !instance ) { instance = new Singleton(); } return instance; } }; }());
間違っている箇所、もっと良い方法があったら教えてください。
