JavaFX Nightをきいてきた

11月25日のJavaFX Nightをきいてきた！内容メモメモ

---

■JavaFXにダイアログがやってくる　蓮沼さん
JavaFX 8 update 40
・これまでダイアログがなかった
入ってくるダイアログ
　　Alert
　　TextInputDialog
　　ChoiceDialog
　　スーパークラス：Dialog→拡張で、独自ダイアログも
・Alert　Information：ヘッダーテキスト、コンテキストテキスト
・Alert　Warning
・Alert　Error
・Alert　Confirmation：ボタン２とOKと取消
・Alert　None：アイコン、ボタンを追加
・TextInputDialog：
・ChoiceDialog:

使い方
・Stageの代わり
・コントローラークラスの中で、イベント処理をやっているとき
　ユーザーに応答を求めるとき
・showAndWait();戻り値オプショナル
・show();戻り値void
・DialogPane野中に、HeaderText,ContentText,Graphic,ButtonTypes
コード
　Alert alert = new Alert(INFORMATION);
　プロパティ設定

　値
　Optional<ButtonType> result = alert.showAndWait();

戻り値
　Alert ButtonType→９種類
　TextInputDialog String
　ChoiceBox 選んだアイテムの型

Tips
(1)alert.setHeaderText(null);

(2)サイズを変えたい
　alert.getDialogPane().setPrefSize(400,0,300,0);

(3)ウィンドウが要らないとき
Stageを開かないでDialog

まとめ
・Dialogとサブクラス
・Stageと同じようだけど、違う
・まずダイアログを作ってshowAndWait
・アドベンとカレンダー８日目
・スライドシェア、21:00にアップ
　www.slideshare.net/btnrouge/javafx-dialogs

---

JavaFX　アドベントカレンダー

■Heapstats loves JavaFX
・HeapStats
　Javaの生涯解析支援＆監視ツール
　エージェントの性能
　→置き去りにされたアナライザ
・HeapStatsFXAnalyzer
　　Java8(Lambda,StreamAPI）
　　プラガブル
　　コミニティドリブン
・なぜJavaFX8
　Swingnodeが使いたい
・主な機能
　　FXML
　　Chart
　　Task
　　国際化
・構成
　Heapstats1.0相当のアナライザ
　プラグインで機能拡張
・Heapstatsのプラグイン
　　FXMLを含むJar形式
　プラグインにはタブが与えられる
　FXMLの含まれるパッケージ名を設定してlibにいれておく
・プラグインがよばれるまで
　　クラスローダーの設定
　　リソースバンドル指定
　　staticでないロード
・プラグインコントローラー
　　プラグインは継承する必要アリ
　　最小限の機能、インターフェース
・データの受け渡し
　　各プラグインのコントローラーに直接アクセス
　　→親ウィンドウのコントローラから取得できる

・RefTreePlugin
　　Swingnodeで実装、要JGraphX

・JVMLive
　　JDPを使って、ネットワーク上のJVMを自動ルックアップ
　　JVMのクラッシュ検知機能

・JavaFXで困ったこと
　　ダイアログがない 8u40までの命
　　複数Chartの合成に対応していない
　　Chartのツールチップが重い
　　animated=trueなAreaChart→アニメーションやめた
・JavaFXで困っていること
　　JavaFXコントロールがブラックアウトする
　　FXMLOがSceneBuilderでロードできない
　　windowsとLinuxでウィンドウサイズ関連のプロパティの動きが違う
　　SwingNodeのDrag and Dropの動きがおかしい

・お願い
　まずはFork
　次にPull Request
　できればプラグイン作成
　いいね！

・あったらいいなプラグイン
　vmstatなど・・

---

■Bind Me Softly
Property
Bind
UseCase

自己紹介
　Java in the box
　ITPro：JavaFX2で始めるGUI開発

Property
・ぜひ使ってください
・PropertyはJavaBeansのextends
　　Base of Bind
　→JavaFX Script
　　2からはいってきた
・Property Classes
　　BooleanProperty
　　IntegerProperty
　　LongProperty
　　FloatProperty
　　DoubleProperty
　　ObjectProperty
　　StringProperty
　　ListProperty
　　SetProperty
　実装クラスには、Simpleがつく

IntegerProperty prop
　= new SImpleIntegerProperty(20);

Updateしたときにイベントが挙がる
Immediate
　prob.addListner

Lazy(遅延処理）
　GUIの場合は、遅延のほうがいい
　両方使うと・・・

Code Convention
　クラスのフィールドに使う
　class Foo {
　　IntegerProperty bar = new SimpleIntegerProperty();
　　GetterとSetterのほかに

　　IntegerProperty barProperty(){ return bar; }

　　を入れることを忘れない。

Bind
・プロパティ間の自動同期
　　y.bind(x)　ｘをかえると、yが変わる：一方通行

・双方向Bind
　.bindBidirectional(s1.valueProperty());
　ネストすると、追えなくなってくる

・ユーティリティクラス
　　Bindings
　　　　add,subtract,multiply,divide
　　　　論理演算
・Low Level Bind API
　　スライダーから色を作るような場合

UseCase
１．知らないうちに使っている
　　　～View

２．Node-Node,Node-Model：ブリッジになるところにbind

３．ルール、バリデーションに使う
　　レイアウト（ステージの大きさに部品を合わせる）
　　　アンカーペイン

４．アニメーション

・Bind楽しいよ！

---

■LT1:サーバーサイド JavaFX
・JavaFX：デスクトップ→サーバーサイドで使ったら？
・S-tune問題：１セットしかないスピーカー
・サーバーで音楽を流す
・Media Viewでながす
・Https問題
・Jettyをプロキシに
・Sound Cloud
　Sound CloudのJava APIクライアントやんない
　APIかわる、認証

■LT2：いまさら始めるJavaFX
・なんでJavaFX
　　らずべりーぱい、検証用アプリ
　　案件：JavaFX知らないと提案もできない

・環境構築
　　NetBeans IDE　かんらん
　　Seane Builder2.0　著間的に分かる

・おもっちゃったこと
　　レイアウト自由
　　ドラッグ＆ドロップ簡単
　　勝手に伸びちじみ
　　なんかちらつく
　　もっと３D,SE
　　Java8のデータ加工が半端ない

Bing Translation APIとWeb Speech APIを使った、HTML5による自作翻訳サイト？を見てきた！

HTML5がHTML5が開く新しい未来（１１月２２日）をきいてきた！
その内容をメモメモ

---

L

HTML5
・2014年10/28　W3C勧告

１．HTML５の概要
　狭義：HTML5　意味づけ、検索エンジンにやさしい、スマホ！
　CSS3　　　　リッチなデザイン、変形、アニメーション、３次元
　Javascript　動き、双方向性、センサー、GPS、描画、ゲーム

　狭義のHTML
　　入力フォーム　プレースホルダー
　　日付　DatePicker
　　レンジ
　　メールの入力チェック（バリデーション）
　　Progress,Meter
　　マルチメディア　速さを変えられる（音声、映像の操作）

　CSS3
　　円形のグラデーション、反射、３D

　HTML5：ネットにアクセスしないで利用できる

---

■デモで理解する　これからのHTML５
　見て、利いて、あついWebの新時代を感じる！
　　レスポンスブWebデザイン

　HTML５．１が２０１６年内に勧告になる

　HTML5元年

　HTMLは情報を流すだけのテクノロジーではなくなった

　WebStorage,FileAPI,GeolocationAPI,WebWorker

・Canvas Demo
　　データ保存：　milkcocoa
　　Javascript１行で、データ保存が可能
　　未踏のひとがつくった

・翻訳アプリ
　　Bing Translation API
　　Web Speech API(Chromeのみ対応）

・画像編集アプリ
　　File APIでイメージを読み込む
　　画像処理、範囲指定して白黒、セピア切り出し
　　カラーピッカー表示：Inputタグ、type=color(Chrome,Operaだけ）

・HTML5プラスαを利用することで、さらに範囲が広がる

---

■HTML5が作り出す新たな世界　LPI　成井 氏

　HTML4.01　文書閲覧
　HTML5　　アプリケーション実行環境

・ワンソース　マルチユース／マルチデバイス
・JavaもHTML5対応　JavaEE7
・SAPもHTML5ベースのSAP　Fiori
　　Java→Javascriptへ
→社内外の両方にHTML5
・楽天もHTML5を仕様
　Situation of HTML5 services
・WPO（Webパフォーマンス　オプティマイゼーション）
　　日本語で検索するとヒットしない
　　英語で検索すると、いっぱいHit（Youtubeで検索すると動画）

・HTML5の可視化の可能性
　Kendo UI
　　Data visualizations powered by HTML5

・体の中を３次元で見る
　FDA：HTML5のブラウザで見ると規定
　本格的CG

・OpenGL→WebGL
　　レイトレーシングのデモ「HTML5　F1」で

検索

・NHK　HTML5対応　ハイブリッドキャスト
　→むしろ民放によい：スポット広告

・可視化技術は限りなく進歩する
　→HTML5は可視化技術の１つ、
　　応用範囲は限りなく広がる
　　今後の仕事の選択肢
　　「HTML5　XXX」（XXXは興味ある言葉をいれて）検索
　　→HTML5プロの仕事の選択肢は非常に広い

・James Cameronとスティーブジョブスの共通点
　→右脳と左脳の融合

　Appleと他の会社の違い
　　採用：IT＋音楽／映像の人を採用

　IT+Creativeな人が極端に少ない→でも市場は巨大
　　CreativeはVolume pricing
　　　Javaプログラマ（１人月５０万～よくても１５０万）
　　　→この絵、何人月ですか？という人はいない
　　年齢にも関係ない
　　Off shoreの対象外

・LinuxよりもHTML5のほうが伸びるかも

・HTML5試験：今　Level1　今後Level2出る

・Webデザイナー白書
　求めている技術
　　　Javascript
　　　マルチデバイス
　　　HTML5
　　　iPhoneアプリ

・「A Whole new Mind」→「ハイコンセプト」

---

■Webアニメーション
Canvas
・タッチゲーム
・センサーを使ったUFOゲーム
・GPSを使った位置アプリ
・Webアプリケーションの基盤
・Google doodles
・プレゼント：クリスマス

Javaの仕様策定の関与の仕方とか、MVCの仕様策定に関してとか

JJUG CCC 2014 Fallに行ってきた（途中、抜け出していなかったけど）
つづき。いちばんさいご

MVC1.0を通じてadaopt a JSRを知ろう！

をメモメモ

---

JJUGではadaopt a JSRはじめました。
adaopt a JSR＝JCP,JSRに参画する

JSR：Javaの仕様の構成
JCP：JSRの使い方

JSR：Javaの仕様の構成
　Javaの仕様はJSRで定義
　　　JSR337:Java SE 8：３０８，３１０，３３５を傘下
　　　JSR335:ラムダ式

JSR：３つの構成要素
・仕様文書
・仕様テストツール
・リファレンス実装

JCP:Java Community Process
JCP2.9はJSR355で定義されている

EC：企業団体JUG・仕様の最終承認
JSR SpecLead：仕様作成の中心
PMO：事務局（Oracle Americaの担当者)
JCPメンバー：仕様のレビュー、Spec Leadになりたいよという

JSR提案
（事務局さいばん）
JSRレビュー
EC投票
通らなかったらやり直し１かい。
ExpertGroupがはいる
Early draftを何回も
Public草案
JSRレビュー
EC投票
Finalドラフト

JSR371ExpertGroupまだ募集中

JCPメンバー
　Oracle AmericaとJSPA契約を結んだ個人、企業、組織
　　　JJUGもJCPメンバー

詳しくは、JJUGナイトセミナー
これからのJCP、コミュニティと共に

補足
JEP(じぇっぷ）JDK Enhancement-Proposal
→OpenJDKの実装
JEPは実装固有のものもある（GCなど）

Adopt-a-JSR
・個人がJSPメンバーとして活動するのは面倒
　　JSPAを結ぶ必要がある
　　次期JCPでは、加入が楽
・ユーザーグループを通じて参加すれば、気が楽＆声が届きやすい
　　Adopt-a-JSR
・ユーザーグループを通じて仕様策定に貢献
　活動内容は自由
・JJUG at Adopt a JSRメーリングリスト
　JSR 371　MVC1.0にコミット

まずJJUGに参加（MLに登録するだけ）
JCPアカウントを作成してJJUGにひもづけ

Javaに対する様々な貢献With Adopt a JSR
７月のJJUGナイトセミナー

MVC1.0の経緯
JJUGとしての貢献

MVCの経緯
　JAX-RS：アクション指向REST向け
　JSF：コンポーネント指向

アクション指向
JerseyMVC
SpringMVC
Struts

もともとJAX-RSの延長だった

Oracleのサーベイ
６０．８％　MVCあったほうがいい

いろいろあって、別Spec
MVC１．０（JSR-371)

JJUGとしての貢献
・MLを購読する
・参照実装を試す
・MVC1.0についてTweet,ブログに書く

日本語ページある

MLを購読する
・JAX-RSベース、サーブレットベース？
・Testフレームワーク
・Portlet
・MLに意見を

参照実装　Ozark.java.net
CDIベース

フリーディスカッション
なぜJSFだとだめなの？

AngularJSとの組み合わせ
Microsoft　GUIをクライアントサイド
RESTはのこすべき（JAX-RSもわるくない）
JSFが今後使えるか？
デザイン会社に発注した場合：JSFは合わない
→JSF2.2　HTMLの属性として

　

JavaSE8、JavaME8、JavaEE7の話を聞いてきた！

JJUG CCC 2014 Fallに行ってきた（途中、抜け出していなかったけど）
つづき。順番ぐちゃぐちゃだけど、午前２番目

■Java Create The Future
Simon Ritterさん

をメモメモ

---

いま、Javaの状態
　　→２０周年になろうとしてるけど、いろいろおきてる
　Java：いろいろ
　　プラットフォーム
　　言語
　　ライブラリ
　　VM
　　・・・それ以上
　今日皆さんがきているのも・・・Javaはコミュニティ
　　いろいろな側面
　　スタンダードの定義
　　オープンソース
　　JUG
　　いろんな側面

コミュニティー３つとりあげる
　１．カンファレンス
　　例＊Javaらんど
　　　ドイツでJUGが開催２２のJUG
　　　成功。２日８００人来年も（さらに倍の参加者予定）
　　　ベルギー：３５００人参加
　２．LJC(ろんどんじゃばこみにてぃ）
　　　スタンダード、教育
　３．ハイライト！スタンダードに対して
　　　モロッコJUG　個々の仕様の作成
　　　Adapt a JSR
JUGは異なる様々な取り組み
　　Javaコミュニティプロセス　１５年
　　Oracle　SUNがいうだけではない
　　いろんなインプット
　　　　IBM,RedHat,Twitter
　　　　規模の小さな企業
　　　　エンドユーザー：例　銀行とかもニーズ必要
　　　　個人も！

すうじとしてしょうかい：Java8について
　　ロードショー２０カ国以上
　　イベント　７５以上
　　Webキャスト
　　Moocも　エンベティッド用　８０＋
　　５人：いろいろ出張

コミュニティ増えている
　　世界各地に

JavaSE8
・ことし３がつろーんち！
　たくさんの関心
　関連して本もたくさん
　９ヶ月ぐらいの間に
・スタンダードだけでない
　→前：オープンソース
　　OpenJDK
　　Oracle以外も貢献
　　　すてぃーぶんこーるぼーん
　　　　Date　Time　API
・JDK8
　いろんなものふくまれている
　とくに２つ紹介
　　　シンタックス変更
　　　　ラムダ式
　　　　パラメータ化されたビヘイビア
　　　　関数プログラミングの要素も
　　　　　すとりーむすAPI、これくしょんでいろいろ
Streams　
・コンピューターパワー・アーキの変化（マルチコア）：並列化
　シーケンシャル、並列を考えなくて良い
　変えることも簡単（１回のメソッドコール）
　後方互換性

パフォーマンス向上→JDK8にすべし。はやくなるから

セキュリティ
トらんすポートレベルなど

あたらしいつーる
JRockit→つかえるように
ミッションコントロールなど
アドバンスドマネージメントコンソール

JavaSEロードマップ
２つの大きなリリース
８のUpdate40,60
２０１６：JDK9
　さらに進化：モジュラリティパフォーマンス、セキュリティ
そのあと・・・

コミュニティ、ぜひおてつだいしてくださいね
JDK9アーリーアクセスもうでてる
ためして、どんどんふぃーどばっくしてね

JAVA　ME8
まいくろえでぃっしょん

去年
・複雑なライブラリMEとSEの重なり少なく、MEはわかれていた
　　CLDC、CDCの２つ：サブセットの中にサブセット
・JavaME8　シンプルに
　　API：SEと多くオーバーラップ（もちろん、重ならないところも必要だけど）
　　言語上の観点では違いないように

急速に普及
・ARM,フリースケール、クアルコム
・低消費電力、小メモリ
・こういったデバイスでも機能する

モバイル
・Oracleモバイルアプリケーションネットワーク
・RoboVM：Android,IoSではしらせる
・JavaCard

ME8アップデート来年
２０１６　ME9

この点でもおちからをかりたいとおもってます
らずべりーぱいとかで、ボードやすくなってる
→アプリ開発しやすくなってる
　あーりーびるど

JavaEE7
・アクティブなコミニティ
・アプリケーションサーバー
・コミュニティからのコントリビューション
・仕様をデベロッパーのニーズを満たす
・個人のコントリビューション
新しいフィーチャー
・HTML5に対するサポート（JSON,WebSocket）
・スケーラビリティ（デベロッパーがスレットコントロールできる）
・GlassFish；まだ生きている！
　　JavaEEのリファレンスである
　　Oracle：コマーシャルサポートはしないが、４．１は出ている
・JavaEE8の将来
　　調査結果：JSONのバインド、セキュリティ、キャッシング、クラウド
　　多くのJSR
・ロードマップ
　　JavaEE8仕様作成
　　GlassFish5

継続して参加してね！
・個人のJSRが採用されることを願ってる
・JavaEE8はもっとかかわってほしい

来年、Java２０周年記念
２０年たっても完成していない

JSRをだすには
２つ
JCPに個人が参加するのを簡単にしようとしてる
オープンソースプロジェクトに参加する
　　OpenJDK,GlassFish
　Adapterのセッションで説明するよ

Javaの脆弱性だけど、7,8の人はアップデートでよいとして、６の人は？Interstageは？

2014年10月 Oracle Java SE のクリティカルパッチアップデートに関する注意喚起
https://www.jpcert.or.jp/at/2014/at140041.html

についてなんだけど、
（以下太字は上記サイトより引用）


Oracle 社の Java SE JDK および JRE には、複数の脆弱性があります。遠
隔の第三者は、これらの脆弱性を使用することで、Java を不正終了させたり、
任意のコードを実行させたりする可能性があります。脆弱性の詳細については、
Oracle 社の情報を確認してください。

Oracle 社が提供する修正済みソフトウエアへアップデートすることをお勧
めします


とのことなんだけど、Java7,Java8の人は、いいよ。
でも、Java6はＥＯＬだから、Java6,Java5のパッチは出ないよねえ。。。きっと・・

だけど・・・


対象となる製品とバージョンは以下の通りです。

- Java SE JDK/JRE 7 Update 67 およびそれ以前
- Java SE JDK/JRE 8 Update 20 およびそれ以前

※ Oracle 社によると既にサポートを終了している Java SE JDK/JRE 5
および 6 も脆弱性の影響を受けるとのことです。

とのこと。

Ｊａｖａ６やＪａｖａ５の人は、どうすれば・・・
そいうえば、Interstageとか、Java6でやってる人いるよねえ・・・

・・・どうすれば・・・？

ＩＥ8でCharts.jsはうごかない

で、IEの互換性（IE７～IE１１）いろいろのつづき。

IE8にして、ちょっとこまったのは、Chart.js。
canvasをつかっているので、IE8はだめ・・・なんだけど、

IE8でCaanvasをつかえるようにするExplorerCanvasをつかっても、えらーがでる（ぐたいてきには、Chart.jsでmeasureText() メソッドがないエラー。IE9ではいったらしい）

う～ん、【jQuery】IEでも使えるグラフ描画ツールをみると、jQuery Google Chartsが使えそうなので、jQuery Google Chartsにしますかね・・・

ここ

jQuery Google Charts
http://keith-wood.name/gChart.html

の「Live Feeds」をみて、動的に動かす方法をお勉強したいとおもいます。

Chart.jsを使って「動的に」グラフをアニメーションさせる方法

Javascriptでグラフを書く場合、Chart.jsを使うことが多いと思う。
ただ、Chart.jsは、

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介
http://liginc.co.jp/web/js/40934

にあるように、多くのサンプルは、グラフを１回書くだけで、
Ajaxとか使って、動的にグラフを描いていく（アニメーションさせる）
方法を書いてないよね。

例えばこんな感じ

http://www.geocities.jp/xmldtp/js_chart1.htm

（ちょっと経つと、点が追加されていく。
　下のボタンをクリックすると、少し経ってから
　とまる（すぐにはとまらない）。

　とまっているときにクリックすると、動き出す）。


なので、今日は、そこをちょっと書いてみる。

---

■ダウンロード

上記サイトに説明してあるので詳細は、省略。

Chart.jsの公式サイトで「Download」クリックすると、GitHubにいくので、
右下のDownloadZipをクリックしてくれ。


■参考文献

DownloadしたZIPを解凍すると、Chart.jsがあるところに、Sampleフォルダとdocフォルダがある。
Sampleフォルダの中には、サンプルチャートがあり、
docに説明がある（すげー大雑把な）。今回は、その「01-Line-Chart.md」を参考にした
（拡張子mdだけど、中身はテキストファイル）


■概要

１．世間一般に言われているように、グラフを書く
　　・今回は、折れ線グラフ（ラインチャート）

２．点を変更する場合、

　　myLineChart.datasets[0].points[2].value = 50;
　　myLineChart.update();

のように、点を設定して、updateする。ここで、
datasets（何本目の線か指定）まではいいが、
データは、dataで配列指定したはず。

だけど、
　　　.points[なんばんめ].value
でイケるみたいよ！

３．点を追加する場合は、

　　　myLineChart.addData([40, 60], "August");


はじめに追加する点。ここで２本の線がある場合２点、
３本の線がある場合、３点みたい・・
次に、横軸の項目名を書く。


■ソースコード

<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="Chart.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script>
//==============================//
//	データ			//
//==============================//
var	datapos = 10;
var	onoff=1;
var lineChartData = {
	labels : ["1番目","2番目","3番目","4番目","5番目","6番目","7番目","8番目","9番目","10番目"],
	bezierCurve: false,
	datasets : [
		{
			label: "1本目",
			fillColor : "rgba(255,255,255,0.2)",
			strokeColor : "red",
			pointColor : "red",
			data : []
		},
		{
			label: "2本目",
			fillColor : "rgba(255,255,255,0.2)",
			strokeColor : "blue",
			pointColor : "blue",
			data : []
		}
	]
};

//==============================//
//	開始時処理		//
//==============================//
window.onload = function(){

	//	初期データセット
	for(i=0 ; i < lineChartData.datasets.length ; i ++)
	{
		for(j=0;j< datapos;j++)
		{
			lineChartData.datasets[i].data[j] =  Math.round(Math.random()*100);
		}
	}

	//	チャート生成
	var ctx = document.getElementById("canvas").getContext("2d");
	window.myChart = new Chart(ctx).Line(lineChartData, {
		responsive : true
	});

	//	１秒ごとに繰り返し
	setTimeout("mycheck()",1000);

}

//==============================//
//	繰り返し処理		//
//==============================//
function mycheck()
{
	myaddData = [];
	for(i=0;i<lineChartData.datasets.length;i++)
	{
		myaddData[i]= Math.round(Math.random()*100);
	}
	window.myChart.addData(myaddData,(datapos+1)+"番目");
	datapos++;

	//	継続フラグが１だったら、再度呼ぶ
	if (onoff == 1 )
	{
		setTimeout("mycheck()",1000);
	}
}

//==============================//
//	データ追加・停止	//
//==============================//
function stopsw()
{
	if ( onoff == 1 )
	{
		onoff = 0;
	}
	else
	{
		onoff = 1;
		setTimeout("mycheck()",1000);
	}
}

</script>
</head>

<body>
<div style="width: 50%">
	<canvas id="canvas" height="450" width="600"></canvas>
</div>

<button onclick="stopsw()">グラフ追加／停止切り替え</button>

</body>

</html>

■動作
こんなかんじで、追加されていく。

動的に繰り返しているのは、
setTimeout("mycheck()",1000);
で、点を追加する処理を繰り返し呼んでいるから。


■ＰＳ
どうでもいいはなしだけど、一番はじめに紹介したサイト、LIGの会社の
ブログページだよね！
LIGって、社長が砂浜にもぐったり、世界一即戦力な男の、あのLIGだよねえ・・・おおお～

AngularJSのお勉強

ここ

AngularJS入門 (全12回)
http://dotinstall.com/lessons/basic_angularjs

でお勉強した成果をメモメモ

---

●#01 AngularJSとは何か？
　JavascriptのＭＶＣフレームワーク

●#02 はじめてのAngularJS
1,スクリプトを読み込み、ng-app
　　→ng：A"ng"ular

２．INPUTタグに対して、ng-model="name"
　　→{{name}}で値が入る（ある程度評価できる）

●#03 コントローラーを使ってみよう
　１．divタグで、ng-controller=mainCtrl

　２．別ファイルにvar mainCtrl =function($scope){
　　　　$score.users=[
　　　　　　連想配列でデータ
];
　　　}

　３．{{users.length}}で、配列の大きさを返してくれる

４．ulタグで囲み、liタグにng-repeat="user in users"
　　　{{user.name}}
　　　とかすると、人数分繰り返す


●#04 フィルターを使ってみよう
　　{{user.name|uppercase}}
　など、|をつけて便利な機能
　　　|number:4 小数点４けた
　　　|number カンマ区切り
　　　|currency:"\" 円記号
　　　|date:'yyyy-MM-dd'日付

●#05 ループで使えるフィルター
　１．ng-repeatのフィルター
　　　ng-repeat="user in users|orderBy:'-score'|limitTo:3"

　２．フィルターを使って対象文字だけを絞り込む
　　　input type="text" ng-model="query"
　　　ng-repeat="user in users|filter:query"

　３．query.nameで名前だけ

●#06 ループで使える便利な命令
　１．ng-repeatの中で
　　{{$index}}　番号
　　{{$first}}　最初の要素？
　　{{$last}}　 最後の要素？

　２．ng-class-even,ng-class-odd

●#07 コントローラーのネストとイベント
　１．コントローラーは、入れ子に出来る
　　親要素からのデータを引き継げる

●#08 フォームの基本を学ぼう
　　ng-submit


●#09 エラーメッセージを表示する
　１．formタグ novalidate
　２．INPUTタグ ng-minlength
　３．エラーメッセージ:spanタグで、ng-show

●#10 フォーム部品を設置しよう (1)
　１．INPUTタグのtype=number,email,urlなどもできる

●#11 フォーム部品を設置しよう (2)
　１．type=checkboxのとき ng-true-value,ng-false-value
　２．type=radio ng-modelの名前を同じにする
　３．textarea {{140-user.memo.length}}で１４０字からの残り文字指定

●#12 フォーム部品を設置しよう (3)
　１．リストボックス
　　　ng-optionsでoptionタグ自動生成(初期値はng-init）
　２．ＡＰＩリファレンスに細かく載っている

---

P.Sこのドットインストールの

レッスン一覧
http://dotinstall.com/lessons

みると、すごい・・・

JQueryで、セレクタをID指定("#id")して、うまくいかないとき確かめたいこと・・

目的の対象が、自分(this)か、自分の先祖の場合、

$(this).attr("id");　・・・自分の場合

$(this).parents(".class_name").attr("id")・・・自分の先祖で、クラス指定されている場合

などを使って、ＩＤを取得し、そのＩＤを表示してみよう
alert($(this).attr("id"));

そしてもし、うまくいかないのが変数を使っている場合、そいつも表示してみよう。
書き間違いや、（クロージャーによる変数書き換えなどでの）変数の思い違いは、
これで気づける。


なお、thisと$(this)は、オブジェクトの型が違うから注意！
thisは、HTMLのオブジェクトとして処理される。
つまり、this.attr("id");はエラーになる。

これが$(this)と書くと、JQuery型に変換され、JQueryで書けるようになる。

D3.jsで日本地図出して、点をうつ方法

前に、Ｒで日本地図出して、気象庁のデータ読み込んで、軌跡を描くところまでは、できた>で、最後に「D3.jsで日本地図出して、点をうつ」ところまで出来たと書いておきながら、その方法を書いていなかった。

今回、その方法を書いておく。

【お題】
結局、こんなやつを出す。


【前提】

日本地図を用意する。本当は

http://cloud.aitc.jp/20140627_D3js/201406xx_D3js.pdf

の１５ページや

http://www.slideshare.net/dsuket/d3js-35239244

の３４シート目にあるように、
（１）http://www.naturalearthdata.com
　　　にいって、データをshape形式でとってきて
（２）それをGeoJSONに変えるため、ogr2ogrし
（３）さらにGeoJSONをTopoJSON形式に変換

となるんだけど、今回は、そのシートの４０枚目にある
http://bit.ly/japantopo
つまり、
https://dl.dropboxusercontent.com/u/1662536/topojson/japan.topojson
のデータを使います。


【プログラム】
こんなかんじ

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample 01</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script type="text/javascript">

$(function(){

//	日本地図
var topoJsonUrl = "https://dl.dropboxusercontent.com/u/1662536/topojson/japan.topo.json";

//	変数設定
var width = 500,
    height = 500,
    scale = 1;

// bodyにSVGをつくり、g(地図グループ）を作る
d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g").attr("id", "all-g");

//投影法の設定
var projection = d3.geo.mercator()
		.center([138, 38])
		.scale(1200)
		.translate([width / 2, height / 2]);
    
// 地図読み込み
d3.json(topoJsonUrl, onLoadMap);

// データ設定
var mydata =[
[135.25508,34.336263],
[140.103417,39.706976],
[139.69194,35.659432]
];

//==============================//
//	地図と点を描く		//
//==============================//
function onLoadMap (error, jpn) {

	//地図を描く
	var path = d3.geo.path().projection(projection);
	var features = topojson.object(jpn, jpn.objects.japan);
	d3.select("#all-g")
        	.append("g").attr("id", "path-g").selectAll("path")
            	.data(features.geometries)
            	.enter()
            	.append("path")
            	.attr("fill", "#f0f0f0")
            	.attr("stroke", "#999")
            	.attr("stroke-width", 0.5/scale)
            	.attr("d", path);

	//	点を描く
	d3.select("#all-g")
		.append("g").attr("id","circle-g").selectAll("circle")
		.data(mydata)
		.enter()
		.append("circle");

	//	赤く塗る
	d3.selectAll("#circle-g circle")
		.attr("fill", "red")
		.attr("opacity", 0.5)
		.attr("transform", function(d) { 
			var coord = projection([d[0], d[1]]);
			return "translate(" + coord.join(",") + ")"; 
		})
		.attr("r", 5/scale);
}

});

</script>
</head>
<body>

</body>
</html>

【参考】
上記スライドシートのほか
http://jsfiddle.net/dsuket/sEFjd/
など。

「ファイルダウンロード終了後に画面遷移」に見る、ブラウザの移り変わり-その１

ファッショナブルに・・・これがブラウザの方向性なのだろう・・・

---

■共通問題「ファイルダウンロード終了後に画面遷移」問題とは

昔からのブラウザ処理での問題に「ファイルダウンロード終了後に画面遷移」というのがある。
サーバー側のプログラムは簡単に作れる。

サーブレットの例だと
Servlet でファイルをダウンロードする
http://himtodo.fc2web.com/java/download.html

問題はクライアント（ブラウザ側）だ。
ＩＥ６だと、ダウンロードするとき２通りの状況がある
　　　・ブラウザの上に、ダウンロードするかどうかのバーがでてしまう場合
　　　・ダウンロードダイアログが出てくる場合
さらに、大きいファイルだと
　　　・ダウンロードテンポラリファイルから、指定したファイル名に書き換える
ダイアログも出てくる。

これらのダイアログの出た後に、画面遷移をさせたいわけだが、
これを、どうするか・・・という問題だ。

---

■この問題の難しさと、数々のアプローチ

どうして、この問題が難しいのかというと、ずばり、
ダイアログ終了のイベントが取れないからだ。


●イベントが取れないもの、そのイベント終了後に画面遷移しろといわれても・・・
ということで、

http://qa.atmarkit.co.jp/q/1377

や

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=36426&forum=12

では、無理！ということになった。


●そして、その後、この問題は
・サーバー側でファイル転送が終了したら、画面遷移する

という問題に緩和して、この緩和問題は、

・サーバー側でファイル転送が終了したら、セッション中にフラグを上げ、
　クライアント側は、一定時間ごとに（ＡＪＡＸを使って）ポーリングを行い
　サーバーでフラグがあがったら、ダウンロード終了とみなして、
　画面遷移する

というセッションを利用した方式（と、以降記述）で実装されることに
なろうとしたが、ＩＥ６では問題があり、実質、できなかった。


●それが、ＩＥが１１にもなることにより、画面上の問題がクリアされ、
いまでは、これより美しい

・クライアント側で、はじめクッキーにＳＴＡＲＴとか入れておき、
　サーバー側でファイル転送が終了したら、ＥＮＤと書き換える
　クライアント側は、SetTimeout（いや、インターバルでもいいけど）
　で一定時間ごとに（いや不定期でもいいけど）クッキーを確認し、
　ＥＮＤになったら、ダウンロード終了とみなして、画面遷移する

という方法が、使われるようになった
以降、これをクッキーを使う方法と述べる

参考：

http://d.hatena.ne.jp/nabehiro/20140208/1391850498

---

■このシリーズについて

今回、この流れを、ブラウザの変遷という観点から見ていきたいと思う。

なぜ、クッキーを使う方法はＩＥ６時代ではなく、ＩＥ１１，Ｃｈｒｏｍｅ
時代になって出てきたか、ＩＥ６では何が問題で、それがブラウザの変遷
により、どうかわっていったのか、

この問題は、どのような形に変わろうとしているのか
（サーバから、テキストに変換してAJAX転送、自分でダイアログを出し、
　受け手でバイナリにして、FileAPIを使って、自分で保存する等）

をファッショナブル（って、死語だな。なにかいい言葉考える）をキーワード
にして、「みつめます」（という言葉、ＮＨＫスペシャルでよく使っているので
使ってみた）

（次回につづく）

ajaxでUnexpected end of inputとかUnexpected tokenとか

$.ajax()をやったときの返り値で、はまったので、メモメモ
ちなみにブラウザはChrome

SyntaxError: Unexpected end of input
　　出力が全くないのに、結果を出力しようとしている
　　サーブレットなら、サーブレット側で
response.setContentType("text/plain;charset=UTF8");
PrintWriter out = response.getWriter();
out.print("ok");
　　など、何か送る


SyntaxError: Unexpected token
　　たとえば、$.ajaxの引数dataType:"json"とか指定しているのに、
　　返り値はテキストなど、dataTypeで期待される返り値ではない。

サーブレットをJUnitでテストしたいとき

HTTPUnitを使って、はまった。
セッションがうまく取れなかったり・・・なにが悪かったんだろう・・
とにかくうまくいかなかったんだけど、

ここ

■[Java][Spring] JUnit(djUnit)でServletをテスト(with MockHttpServletRequest)
http://d.hatena.ne.jp/pikipikipikky/20110614/1308057548


に書いてある
•MockHttpServletRequest
•MockHttpServletResponse

を使えば、一発だった。

そこで、今回は、これについて

---

【サーブレットテストをJUnitで行うときの問題】

サーブレットを生成(new)することろはいいが、duGet,doPost,serviceを呼び出すとき、
HttpServletRequest、HttpServletResponseで、リクエストとレスポンスをセットしなければならない。このとき、以下の問題が起こる

・この２つは、インターフェースであり、クラスではない。どのクラスからインスタンス化するのか？

・引数の値が設定したくても、パラメータはgetParameterはあっても、setParameterがない

これを解決するのが、上記のクラス。実際にそれを生成すると、setParameterして、サーブレットに値が渡せる。

---

【ダウンロード＆インストール】

以下のファイルをダウンロードします。

１．Spring Mock:MockHttpServletRequestとMockHttpServletResponse
が入っています。

spring-mock-2.0.6.jar
http://www.java2s.com/Code/Jar/s/Downloadspringmock206jar.htm


２．spring-core：上記１が呼び出します。

spring-core-3.2.3.release.jar
http://www.java2s.com/Code/Jar/s/Downloadspringcore323releasejar.htm


３．commons-logging：なんか、必要みたいです。

commons-logging-1.2-bin.zip
http://commons.apache.org/proper/commons-logging/download_logging.cgi


これらを、ビルドパスに設定します。

---

【テストについて】

　テスト側のクラスはJUnitでふつうにやっているときと同じです。
　こんなふうになります。

１．サーブレット生成
Tashizan tashizan = new Tashizan();

２．リクエスト、レスポンスを生成
MockHttpServletRequest req = new MockHttpServletRequest();
MockHttpServletResponse resp = new MockHttpServletResponse();

３．リクエストにデータ設定
req.setParameter( "args1", "1" );
req.setParameter( "args2", "2" );

４．もし、セッションに設定する必要があれば・・・
HttpSession session = req.getSession();
session.setAttribute("ans","1");

５．実行！
try {
　　　tashizan.service(req, resp);
　　} catch (Exception e) {
　　　e.printStackTrace();
}

６．結果をチェック

６－１．パラメータの確認、取得
assertEquals( "args1", "1", req.getParameter("args1") );
assertEquals( "args2", "2", req.getParameter("args2") );

６－２．セッションの中身確認
HttpSession session = req.getSession();
assertEquals("ans","3",session.getAttribute("ans"));

６－３．フォワード先確認（response.getForwardedUrl()）
assertEquals("ans","/ans.jsp",resp.getForwardedUrl());

---

【サンプルソース】

チェックされる側のサーブレットサンプル

package sample;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class Tashizan  extends HttpServlet {
	public void service(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException
	{
		//	引数から値を取得する
		int arg1 = Integer.parseInt(request.getParameter("args1"));
		int arg2 = Integer.parseInt(request.getParameter("args2"));

		//	セッションに値を設定する
		HttpSession session = request.getSession();
		session.setAttribute("ans", String.valueOf(arg1+arg2));

		//	フォワードする
		RequestDispatcher dispatch = request.getRequestDispatcher("/ans.jsp");
		dispatch.forward(request, response);
	}
}

チェックする側のJUnitサンプル

package sample;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

public class Tashizan  extends HttpServlet {
	public void service(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException
	{
		//	引数から値を取得する
		int arg1 = Integer.parseInt(request.getParameter("args1"));
		int arg2 = Integer.parseInt(request.getParameter("args2"));

		//	セッションに値を設定する
		HttpSession session = request.getSession();
		session.setAttribute("ans", String.valueOf(arg1+arg2));

		//	フォワードする
		RequestDispatcher dispatch = request.getRequestDispatcher("/ans.jsp");
		dispatch.forward(request, response);
	}
}

---

いじょう。

JQueryの自作のしかた

Javascriptを書いていると、だんだんいろんなことを書いてきて、
「うーんまとめたい。部品化したい」と思うわけです。

で、その部品化としては、JQueryにしてしまうのが、一番かなと・・

ということで、Javascriptで書いた内容を部品化するための

　　　JQueryの自作のしかた

について、調べたので、ここにメモメモ。

---

■やるべきこと

JQueryの自作のしかたは、

自作のjQueryスクリプトをプラグイン化しよう
http://www.webopixel.net/javascript/392.html

に書いてある。

なので、そのとおりやってみる。

---

■お題。

ボタンを押されたら、alertを出す。
変数msgを使って、表示するメッセージも変えられる

---

■サンプル作成
対象となるJQuery(jquery.mkalert.js)

;(function($) {

	$.fn.myalert = function(options) {

		var opts = $.extend({}, $.fn.myalert.defaults, options);

		$(this).click(function(){
			alert(opts.msg);
		});
	};

	$.fn.myalert.defaults = {
		msg: "OK"
	};

})(jQuery);

呼び出し側

<HTML>

<head>



<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript" src="jquery.myalert.js"></script>



<script type="text/javascript">

$(function() {

	$('#alert-btn').myalert({

		msg:"メッセージ"

	});

});

</script>



<title>JQuery自作テスト</title>

</head>

<BODY>

<div id="alert-btn">実行</div>

</BODY>

</HTML>

---

■結果
クリックした

---

なんか、部品化に使えそう・・・

JSONをサーブレットで受けようとしたとき、JSON-libで、Class Not Foundになりまくる

クライアント側をJavascriptで書いた場合、JSONで入出力したい。
このとき、サーブレットで受けるとすると、JSON-libが使える。

ところが、これを使おうとすると、

java.lang.ClassNotFoundException: org.apache.commons.lang.exception.NestableRuntimeException

のようなかんじで、がんがんClass Not Foundになりまくる。

JSON-libのサイト

Welcome to Json-lib
http://json-lib.sourceforge.net/

に、

•jakarta commons-lang 2.5
•jakarta commons-beanutils 1.8.0
•jakarta commons-collections 3.2.1
•jakarta commons-logging 1.1.1
•ezmorph 1.0.6

と書かれているが、最新のものを持ってきてしまうと、
おかしくなる。

今、やって、動いたバージョンのパターンを書いておく

commons-beanutils
http://commons.apache.org/proper/commons-beanutils/download_beanutils.cgi
は、１．９．２

commons-lang
http://commons.apache.org/proper/commons-lang/download_lang.cgi
は２．６

commons-collections
http://commons.apache.org/proper/commons-collections/download_collections.cgi
は３．２．１

commons-logging
http://commons.apache.org/proper/commons-logging/download_logging.cgi
は１．２

ezmorph
http://sourceforge.net/projects/ezmorph/files/
は１．０．４

json-libは２．４

の組み合わせでうまくいった。