久しぶりに定時後に図書館行ったらとても楽しかったのでまとめる（１日目）
Newton 宇宙を支配する数式
天の川銀河の中心に1万個のブラックホール
私たちの住む天の川銀河の中心に、1万個のブラックホールがあることがわかった。これまで銀河の中心に大量に存在するだろうと考えられていたが、従来の観測ではその証拠は見つかっていなかった。ブラックホールは見ることが出来ないので、ブラックホールに飲み込まれるガスを観測することでブラックホールの存在を知ることが出来る。今回観測に成功したのは、アメリカ コロンビア大学のチャールズ博士らで、チャンドラX線観測機を用いて、天の川銀河の中心から3光年以内の領域を観測した。観測の結果、12個のブラックホールを検出し、この領域内に存在するブラックホールは1万個以上あると見積もることが出来る。今回の成果は、他の銀河の中心にもたくさんのブラックホールがある可能性を示している。
宇宙の全てを支配する数式
支配するとは一体何のこととなのか。 大阪大学理論物理学教授 橋本幸士 それは素粒子と重力についての式 支配されるの詳細がわからないまま説明が進んでいって不思議な気分だ。 重力の正体は時空のゆがみ -> アインシュタインが解き明かした 素粒子って何なの？ ヒッグス場が素粒子に重さを生じさせる 湯川秀樹は具体的に何をした人なのか
地磁気逆転
もう逆転し始めてもおかしくない 逆転するときには地磁気が弱くなる 地磁気が弱くなると人工衛星が故障しやすくなると考えられる 現にブラジルでは他の地域よりも地磁気が弱く、人工衛星が故障しやすい チバニアンとの関係、痕跡が千葉県市原市に残ってる 地磁気の逆転は岩石に残る 地磁気はなんで出来るか、それは地球の内部構造にある 棒磁石と同じ原理で磁力線が作られる
物理初歩
氷
氷になると膨らむのはなぜ 液体から個体になるときに膨らむ物質はあまり多くない（0～4度） 水は暖かければしたに行く、氷の張った湖 多くの物質は温度が高いと膨らむ、熱膨張という言葉があるくらい だから、暖かければ上に行く→例、気球
空
空は度押して青いのか 光は普通白い、赤橙黄緑青藍紫が合わさっている 青い光が沢山来ると青く見える。 青い光は短い波長なので
電気と磁石の関係
電流（電気の流れ）が磁力線を生み出す 磁力の強さをあらわすのが磁力線 磁石は磁力うを生み出す次は「物理数学の基本と仕組み」を読みたい なぜ内積するのか、等の基本的なことが記載されている。
Javaサーバーサイドプログラミング
servletのインスタンスは１つしか生成されない だから、フィールド定義しておくとかぶらなくていい サーブレットのライフサイクルとか載ってるしこの本良い感じだ。
Vue.jsでグラフ描画ライブラリが使用できるか調査してみた
Vue.jsでグラフ描画ライブラリが使用できるか調査してみました。
描画ライブラリの候補は以前の調査より次の３つにしました。
・HighCharts
・amCharts
・Chart.js
すると、結果として全て使用できるようでした。それぞれ紹介します。
HighCharts
HighCharts + Vue.js
https://www.highcharts.com/blog/tutorials/highcharts-vue-wrapper/
amCharts
amCharts + Vue.js
https://www.amcharts.com/docs/v4/getting-started/integrations/using-vue-js/
Chart.js
vue-Chartjs ( Chart.js + Vue.js )
https://vue-chartjs.org/
以上、「Vue.jsでグラフ描画ライブラリが使用できるか調査してみた」でした。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
HTMLにグラフを描画するツールの状況を調査してみた
HTMLにグラフを描画するツールの状況を調査してみました。
まずは、ざっとググってみて出てくるツールをリストアップ
・Google Charts
・Chart.js
・d3.js
・ECharts
・amCharts
・HighCharts
それらをGoogleトレンドにかけてGoogle検索状況を見てみる。
こんな感じでした。
Google Chartsの一強で、他はあまり変わらないかなって感じですね。ちなみに、上記のグラフはGoogle Chartsが使用されているそうですね。
それぞれのツールについてザックリ調査してみます。
Google Charts
https://developers.google.com/chart/
使用企業：Google
ライブラリがダウンロードできない。そのため常にGoogle経由で描画処理しなければならない。上記理由により敬遠のため、調査を飛ばします。Googleのサービスを使用すると所々に出てくるグラフは簡潔で読み取りやすく魅力的なので残念です。
Chart.js
https://www.chartjs.org/
商用利用無料
使用企業：見当たらない
HTML5 Canvasを使用してグラフを描画する。その特性により、ブラウザ側で描画処理を行うことになるので表示速度が少々心配です。処理が軽く十分な表示速度なのか、あるいは描画処理をサーバー側で実施する方法があるのか、その辺を要調査かと思います。
d3.js
https://d3js.org/
商用利用無料
使用企業：見当たらない
様々なグラフ描画ライブラリが出ているが、それらはこのd3.jsを拡張して作られていることが多い。学ぶのが大変なのでグラフ描画初心者向けではない。
ECharts
https://echarts.baidu.com/
中国企業baiduが作った描画ツール。baiduには良くない思い出があるので敬遠。調査を飛ばします。
amCharts
https://www.amcharts.com/
商用利用無料、右下リンク削除は有料
使用企業：MicroSoft、Amazon
SVGでグラフ描画する。GUIからグラフのソースコードを生成できる。
HighCharts
https://www.highcharts.com/blog/products/highcharts/
商用利用は有料、個人サイトでは無料、右下リンク削除は有料
使用企業：Facebook、MicroSoft、stackoverflow
SVGでグラフ描画する。
ということで、主要と思われるグラフ描画ツールを調査してみました。大規模で複雑な処理が必要であれば、次の２つが良い選択かと思います。
・amCharts
・HighCharts
小規模でシンプルな処理ならば、Chart.jsでも良いんじゃないかなと思いました。
・Chart.js
これから勉強するなら、「大は小を兼ねる」「GUIからソースコード自動生成」ということでamChartsが良いと思います。GUIから自動生成したソースコードを確認しながらであれば勉強も捗ります。
あとは、今回の調査では実施していませんが他のツールとの相性でこれから勉強するものを選択するのも良い手段かと思います。私はSpring Bootを好んで使用するので、JSライブラリを使用するとすればVue.jsが良いかなと考えています。なのでVue.jsと相性の良いグラフ描画ツールを次回調査してみようと思います。
追記 (2019年03月25日)
Vue.jsと相性の良いグラフ描画ツールを調査してみました。
somegoro.hatenablog.com
以上、「HTMLにグラフを描画するツールの状況を調査してみた」でした。
Google Chromeで通知を拒否する方法
出前館の通知がうざかったので設定を確認。
特定のサイトの設定を変更する
Change site permissions - Computer - Google Chrome Help
通知してこないように設定。確認したとくろ、デフォルトでは通知していいか確認が入るようになっている。
どうやら私はいつのまにか通知するように設定してしまっていたようだ。出前館の通知は不要なのでブロックに設定した。
これで完了。
これ、自分で実装することも出来るってことだよね。どうやるんだろう。
そして、Chrome以外ではどのような挙動になるのだろうか。
Push通知の勉強するならこの辺りが分かりやすそう
この要素使えるかな？を効率良く確認！Can I use の使い方
Web画面を作るときにはブラウザ間の違いを考慮する必要がありますね。その考慮すべきことの一つに「（IEで）この要素使えるかな？」があるかと思います。
Can I use という便利なサイト
そんなときには Can I use というサイトが便利です。要素を検索すると、このような感じで主要なブラウザで使えるかどうかを表示してくれます。
使えるかどうかは色で表示してくれているのですが、どの色が使えることを示しているのかは正直わかりません。私は Can I use を良く使うのですが、完全に雰囲気で使っていました。今日は土曜日で暇なので、きちんと調べてみました。
使えるかどうかの見方
色の凡例がどこにあるのか探してみます。すると、サイトの下部にこのように凡例がきちんと表示されていました。
緑が Supported 、黄色が Partial support ということで、緑と黄色になっているブラウザは対象要素を使うことが出来ます。ただ黄色は Partial support ですのでプレフィックスが必要だったりするようです。
赤が Not supported ということで、赤になっているブラウザは対象要素を使うことが出来ません。青が Support unknown なのですが、これはほぼ無いかと思います。私はまだ見たことがありません。意味としては Support unknown なので「不明」とのことですね。
一度見方を理解してしまえば今後は直感的に見ることが出来そうですね。
HTML/CSSを学ぶのにおすすめの本
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
ajaxのコードを書いて説明していくよ
以下の記事を書いてからしばらく経ちましたが、今はさらに簡単に書けるようになったようです。
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ（追憶） - Qiita
上記の記事でいうと、私はすっかりおじさんになってしまいましたね。若い方々には、私たちと同じ苦労をしないでほしいので、ぜひ新しい書き方で書くことをお勧めします。
過去の想いでとして、以下の記事は残しておきます。
以前から書こうと思っていた「ajaxソースコード」についての記事を書きます。今ではすっかり手に馴染んでスラスラかけるようになったajaxですが、その存在すらを忘れていた時期もありました。
somegoro.hatenablog.com
やらないと忘れてしまいますよね。当時は働いていなかったのでIT知識はすっからかんになっていました。完全に忘れたところから思い起こして書いたので、初心者にはぴったりかと思います。ajax初心者の方はまずこの記事を見てから本記事を見ると理解がスムーズに進むものと思われます。
さて、上記の記事でも記載されているとおり「ajax」は基本的に非同期通信のために使用します。同期通信として使用することも出来ますが非推奨となっています。非同期通信について理解がまだな方はこちらの記事を参照されたい。
somegoro.hatenablog.com
では、概要も概念も理解したところでソースコードの解説に入ります。次のソースコードでajax通信ができます。
$.ajax({ type: "GET", url: "some.html", dataType : 'json', data: { name: "John", location: "Boston" }, success: function(msg){ alert( "メッセージ「" + msg + "の受信成功" ); } });
もちろん非同期で通信します。コードをそれぞれ見ながら解説していきます。
type: "GET",
GETかPOSTかを記載するところ。省略可能で省略するとGETになる。
url: "some.html",
通信先を記載するところ。ここでサーバの指定もすることができる。
data: { name: "John", location: "Boston" },
送信するデータ。
dataType : 'json',
サーバーから期待するデータの形式。
success: function(msg){
通信が成功したら実行される関数。
jQueryのajax仕様はコロコロ変わるので、詳細についてはここを確認すると良いです。基本的な考え方は変わらないので、どこかのタイミングでしっかり覚えるとそのあと変更が入ったとしても簡単に覚えることが出来ます。ですので、すぐに仕様が変わるから意味がないなどと言わずに覚えてしまいましょう。
jQuery.ajax() | jQuery API Documentation
全部英語なので解読には骨が折れるでしょうが、確実にあなたの能力を伸ばすことでしょう。
日本語で見れるサイトはこちらだが、少々情報が古いような気もする。
jQuery.ajax(options) - jQuery 日本語リファレンス
$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO
こちらはIBMの記事。
こちらもかなり古い記事。なのですが、ajaxの確信をついている気がします。なので、これは結構お勧めで５回程度読めばajaxについての理解がかなり進むでしょう。
Ajax をマスターする: 第 1 回 Ajax の紹介
以上、ajaxコードの説明でした。jQueryを用いて学びましたが、簡単でしたね。
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
- 作者:山田 祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2016/09/30
- メディア: 大型本
TOEIC300点台の私が外資系企業に入社。効率的に英語を勉強する方法を模索！
私の英語能力は簡単な英文メールを調べながら読める程度です。しかし、外資系企業に入社したことで、英会話を習得する必要に迫られています。
ひとまずの目標は試用期間中に英文メールをスラスラ読めるようになることです。私は2月入社ですので7月末まで、残り3か月でこの目標を達成しようと思います。様々な勉強スタイルを試してきましたが、今最も効率的だと考え実践している方法をご紹介します。この方法は簡単2ステップで、細切れ時間でも実施できます。
ですので、普段英語の勉強にまとまった時間を割けない方にお勧めです。
ステップ2
そして登録した英単語をパソコンに読んでもらいます。
somegoro.hatenablog.com
これで、作業量を抑えて英単語を覚えることに注力できます。
この方法で勉強した結果を後日報告します！Good luck !
気になった英語をGoogle翻訳のフレーズ集として登録しておく方法
分からなかった英語や気になった英語を何度も調べてしまったりしませんか？私は何度も調べてしまいます。そこまでは別にいいんです、分からなかったら何度も調べたらいいかと思います。しかし、私は前回調べたことすら忘れてしまうのです。そんな方に朗報です。Google翻訳を使うことで調べた英語を登録 / 記録しておくことができます。
お気に入りのミュージック作ったから紹介するよ！Google SONG MAKER
Google SONG MAKERを使ってお気に入りのミュージックを作りました！
Check out this song I created with Song Maker → https://t.co/ya77JGUA4a #songmaker #chromemusiclab
— らんぐう (@ranguuuuu) 2018年3月5日
どうですか？チッチッチッチッのところが良い味出してると思いませんか？私はだいぶ気に入りました！
これはGoogleが作った「SONG MAKER」というWebサイトで、無料かつ登録無しで音楽が作れてしまうのです。面白いですね！
詳しいリリース紹介はこちら
japan.cnet.com
詳しい使い方はこちら
gigazine.net
以上、「SONG MAKERによる自作ミュージックの紹介」でした。
Java Servlet Filter - フィルターの設定方法
HTMLからJavaへデータを送信する際にフィルタークラスを入れることが出来ます。
フィルターの設定方法
HTMLからJavaへデータの送信をするとき、フィルターなるクラスを通すことが出来ます。まさにフィルターの名前にふさわしい機能です。しかも、フィルターはJavaのクラスに紐づけて使用することが出来ます。要はすべてのクラスにフィルターを付けることも出来るし、固有なクラスに対してだけとしてもフィルターをつけることが出来るのです。それでは、具体的な設定方法をまとめます。
フィルターをかけたいプロジェクトを右クリック→新規→その他
フィルター
パッケージとクラス名を記述
URLパターンがデフォルトではこのとおりになっています。すべての送信データに対してフィルタリングしたいなら /* と記述します。取り急ぎ私はすべてのデータに対して文字化け防止策を実施しました。
完了
これでフィルタークラスが出来ました。あとは出来たクラスのメソッドに対して、次のように書きます。これはコンテンツタイプを指定してます。
@Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // 受信データと送信データの文字コードを指定して request.setCharacterEncoding("UTF-8"); response.setContentType("text/html; charset=UTF-8"); // ここでそれらを繋げる chain.doFilter(request, response); }
HTML(form) → Java(Servlet) で文字化けが起きてハマった話
HTML(form) → Java(Servlet) で文字化けが起きてハマりました
Webアプリを作っているときに、HTMLからJavaにデータを送ろうとして軽くハマりました。無事に解決できましたので、その方法をご紹介します。
およそ一日ハマっていたので業務上では軽くじゃ済まないんですが、人生から見たときには一日は比較的軽いものです。私は視野を広く持っています（上司はどう思うかわかりませんが）。
ではまず状況からいくと、HTMLのformで JavaのServletクラスを指定してPOSTでデータを送信しました。しかし、Javaに送られてきたのは見るも文字化けしたデータだったのです。
この解決法として、javascriptを経由すればjQueryのajaxで簡単に解決することは出来ます。しかし、いつもこの方法ばかり使っていては学習にならないのでこの構成での解決方法を模索しました。
実行環境
様々な方法が様々なブログで紹介されていたのですが、なかなか文字化けは治りませんでした。ブログ書いた人は本当に直ったの？これはおそらく環境が違うからだと思います。
私はWindows10にTomcat9サーバー立てて実施しています。おそらくブログで紹介されていた環境はLinux上にサーバー立てたりTomcatのバージョンが違ったりで実施している方が多いのでしょう。
ともあれ、私が試した方法は次のとおり。私は一日試行錯誤しましたが、みなさんはこの記事を読めば一瞬で解決することが出来ます。ラッキーですね！
私が試した方法
私が試した方法は次のとおり3つに大別することが出来ます。それぞれどんなことを考えて、具体的に何をしたのかを書いていきます。
１．HTML
２．Servlet
３．Filter
１．HTML
・head要素にmeta要素追加
<meta charset="UTF-8">
上記のようになっていた記述を次のように書き換えてみました。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
状況変わらず、ダメでした。HTML5では元々のような記述で良いと聞いたことがあったのでこれは期待値低めでした。
・form要素に属性追加
HTMLのform要素に次のような属性を追加しました。
accept-charset='Shift_JIS'
これもダメ。これは初めて聞いたのでもしかしたらと思いましたが、状況変わらず、ダメでした。
２．Servlet
・doPostメソッドの引数にコンテキストタイプ設定
doPostメソッドの引数はHttpServletRequest、HttpServletResponseの型があります。そのどちらに対してもsetContentTypeで文字コードを指定できるとのことでしたので、指定してみました。
request.setContentType("text/html; charset=UTF-8");
ダメでした。次、もう一つの型。
response.setContentType("text/html; charset=UTF-8");
こちらもダメでした。こちらはそもそも返却用なので意味なしです。データを受け取ることがまず出来ていないのですから。
・server.xmlのConnector要素に属性追加
設定ファイルserver.xmlのConnector 要素に属性を追加して文字コードを明示することが出来るとのことで実施してみました。
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443"/>
上記のように記載されていたものを次のように編集。
<Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" URIEncoding="UTF-8" />
これもダメ。これをしたときにredirectPortまで削除してしまったようで、構成変えるぞ？のポップアップが表示されました。そのときは何を言われているのかよくわからなかったので、「もちろんOK」としたのですが、これによりリダイレクトすると404エラーが起きるようになってしまいました。ここできちんと文字コードを設定できていたら、課題は解決していたのかもしれません。でもそれは後から気付いたことです、当時はわからなかったことなので仕方がありません（と、自分に言い聞かせてます）。でも皆さんは気を付けてくださいね、この状況を把握して回復させるのに半日くらいかかりました。このおかげでeclipse内部の構成やServletの動きを追うことが出来、大変勉強になりました。結局この方法ではダメだと結論づけて、上記障害を回復させ次第違う解決方法の模索を始めてしまったのですがこの方法で課題解決できる可能性が濃厚です。でも大丈夫、上記の方法での解決を逃してしまっても解決できる方法があります。
３．Filter
最終的に解決した方法です。恥ずかしながらHTMLからJavaへデータを送信する際にフィルターが入ることを私は知りませんでした。フィルタークラスを作成して、そこでコンテンツタイプを指定します。詳細は次の記事にあります。
somegoro.hatenablog.com
これで文字化け問題を無事に解決することができました。
以上、「HTML(form) → Java(Servlet) で文字化けが起きてハマった話」でした。
あの日あの時どこにいたのか。KMLファイルの取得方法
KMLファイルって？
KMLファイルは位置情報を管理するためのXMLです。Google EarthやGoogle Mapsに読み込ませたりして、様々なことが出来ます。また、Androidを使っている人はデフォルトで自分の位置情報履歴を毎日取得してKMLファイルに保存しています。驚きましたか？今回の記事では、その位置情報履歴KMLファイルのダウンロード（エクスポート）方法をご紹介します。
手順は簡単２ステップです。
１．タイムラインを開く
２．ダウンロード
１．タイムラインを開く
まずは自分のタイムラインを開きます。「Google検索」ページに行き画面右上にあるメニューボタンからマップを選択し、Googleマップを開きます。
「Googleマップ」画面の画面左上にあるハンバーガーアイコンをクリックします。
メニューからタイムラインを選択します。
「タイムライン」画面の画面左上にある「今日」ボタンをクリックします。これで今日の自分のタイムラインを開くことが出来ました。
２．ダウンロード
次はダウンロードです。「タイムライン」画面の画面右下にある「設定」ボタンをクリックします。ポップアップウィンドウから「この日のデータをKML形式でエクスポート」をクリックします。
任意の場所に次のファイル名でkmlファイルがダウンロードされます。ファイル名はその日の日付となっています。
・history-2018-02-26.kml
KMLファイルを取得することで、自分がいつどこにいたのかが分かるようになりました。これらの情報を集めて、「自分が普段どのような行動をしているのかを解析」したり「残業の事実を証明」したり、様々なことに利用できるかと思います。それでは、KMLファイルで楽しんでください。
KMLファイルの詳細は情報は次のGoogleのKML公式サイトにあります。
developers.google.com
Google Adsense 自動広告をはてなブログに設置してみた
Google Adsense 自動広告をはてなブログに設置してみました
Google Adsense を眺めて収益チェックしていたら、自動広告のブロックが目に入りました。何だろうこれはとチェックしてみると、Googleさんが発行したコードを指定の場所に張り付けると、自動で広告を表示するというものでした。
何でも「適切な場所に適切な内容の広告を表示すること」を売りにしているようです。最近はAIの発展も目覚ましいので、その技術を応用しているのでしょうか。私はGoogleさんの勧めるものはとりあえず乗っかっとけの精神を持ち合わせているので、さっそく自動広告を当サイトはてなブログに適用してみました。
さっそく自動広告を設置
すると、どうでしょう。文字どおり、自動で広告が設置されました。
コードを組み込んだのはhead要素の中に一つだけだったのに、全然違うところに広告が表示されました。これはすごい。本当に表示されるのか不安だったのですが、コードを組み込んでから15分程度で表示されました。なので、みなさんも不安ながらもやってみてください。不安の15分の後、きっと感動することでしょう。
ちなみに、以前はこんな感じになっていました。いたって普通の注目記事のリストでした。
eclipseからTomcatを操作できるようにする設定方法
１．「ウィンドウ」→「ビューの表示」→「その他」をクリックします。
２．「ビューの表示」画面が出てくるので、サーバーを選択してOKします。
３．探すのが面倒でしたらフィルターにサーバーと入力すると出てきます。
４．eclipse画面下のビューにサーバータブが追加されました。このリンクをクリックしてサーバーの設定をしていきます。
５．Tomcat v9.0を選択し次へ。
６．参照ボタンからインストールしたディレクトリを選択する。
７．サーバーが無事に追加されました
８．起動してみましょう。
９．server.xmlの設定
Tomcat9系では、このままでは画面が開かずに次のように404エラー画面になります。
そんなときはserver.xmlの設定を見直しましょう。
<Context docBase="C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT" path="/"/>
Host要素中の末尾に上記Context要素を追記します。そしたら再起動。
１０．無事に起動できました。
ちなみに。。
上記で設定したものはTomcatをインストールした際に入力した設定です。
Tomcatの設定でシステム環境変数にJAVA_HOMEを設定しておかないと、Tomcatは上手く起動しません。私はこれで結構はまりました。最近のJavaはシステム環境変数のPathをインストール時に設定してくれて、インストール直後にコマンドプロンプトでjava -versionとバージョンチェックするとインストールしたバージョンが出力されるんですね。しかし、JAVA_HOMEまでは設定してくれません。ですので、Javaをインストールしたら自動で設定までしてくれたと思わず、システム環境偏すにはJAVA_HOMEを追加するのです。
