生活情報オンライン

ITエンジニアが役立つ情報を発信します。

TOEIC300点台の私が外資系企業に入社。効率的に英語を勉強する方法を模索!

f:id:somegoro:20191221133427j:plain

私の英語能力は簡単な英文メールを調べながら読める程度です。しかし、外資系企業に入社したことで、英会話を習得する必要に迫られています。


ひとまずの目標は試用期間中に英文メールをスラスラ読めるようになることです。私は2月入社ですので7月末まで、残り3か月でこの目標を達成しようと思います。様々な勉強スタイルを試してきましたが、今最も効率的だと考え実践している方法をご紹介します。この方法は簡単2ステップで、細切れ時間でも実施できます。


ですので、普段英語の勉強にまとまった時間を割けない方にお勧めです。

ステップ1

まずは分からなかった英単語を登録します。
somegoro.hatenablog.com


ステップ2

そして登録した英単語をパソコンに読んでもらいます。
somegoro.hatenablog.com



これで、作業量を抑えて英単語を覚えることに注力できます。


この方法で勉強した結果を後日報告します!Good luck !

気になった英語をGoogle翻訳のフレーズ集として登録しておく方法

分からなかった英語や気になった英語を何度も調べてしまったりしませんか?私は何度も調べてしまいます。そこまでは別にいいんです、分からなかったら何度も調べたらいいかと思います。しかし、私は前回調べたことすら忘れてしまうのです。そんな方に朗報です。Google翻訳を使うことで調べた英語を登録 / 記録しておくことができます。

登録 / 記録方法

まずはGoogle翻訳で英語を翻訳 / 調べます。次に翻訳ブロック下部にある星アイコンをクリックして登録します。登録すると画面右側の星アイコンに赤い文字で数字が表示されます。
f:id:somegoro:20180316004747p:plain


そうしましたら、画面右側の赤い数字が表示された星アイコンをクリックします。すると、現在登録されている英語とその翻訳が表示することが出来ます。
f:id:somegoro:20180316004736p:plain


これで、調べた英語の登録とその確認ができるようになりました。登録がボタン一つで出来るのでとても簡単ですね。しかもGoogleアカウントに入れば端末にかかわらず登録した英語を確認、新しく英語を登録することができます。端末を選ばず使えるので英語の勉強が捗りますね。

シートに出力も出来る

さらに、登録した英語とその翻訳を一覧としてシートに出力することも出来ます。画面右側のエクセルのシートのようなアイコンをクリックします。
f:id:somegoro:20180316010844p:plain

すると、Googleスプレッドシートに出力することが出来ます。


以上、「気になった英語をGoogle翻訳のフレーズ集として登録しておく方法」でした。

Excelに英語を読み上げさせる方法。選択範囲を自動で全部読んでくれる!

Excelに英語を自動で読み上げさせる方法のご紹介です。簡単な設定で選択範囲の英語を読んでくれるようになります。また範囲を選択していないときは、すべての英語を読み上げます。


簡単3ステップで読み上げさせることが出来ます。

1.Excelの読み上げ機能を使えるようにする。
2.言語パックを追加する。
3.読み上げを英語にする。


1.Excelの読み上げ機能を使えるようにする。

Excelを開いて左上にある三角ボタン▼をクリックします。
ポップアップが開くので「その他のコマンド」を選択します。
f:id:somegoro:20180314151351p:plain


Excelのオプション画面が開くので、左メニューにある「クイックアクセスツールバー」を選択します。コマンドの選択プルダウンリストから「すべてのコマンド」を選択して全てのコマンドを表示させます。
f:id:somegoro:20180314151408p:plain
左側ブロックから「セルの読み上げ」を選択します。「追加」ボタンがクリックできる状態になるので、「追加」ボタンをクリックします。右側ブロックに追加できたことを確認できたら「OK」ボタンをクリックします。


先ほどクリックした三角ボタン▼の左側にセルアイコンが追加されました。クリックしてみましょう。日本語でセルを読み上げると思います。
f:id:somegoro:20180314151419p:plain

ここまでで日本語の読み上げが出来るようになりました。読み上げは日本語だけでいいという方はここまでで完了です。次からは英語を読めるように設定していきましょう。

2.言語パックを追加する。

ここまでの設定で英語も一応読んでくれますが、ローマ字読みで発音が日本語の状態です。これでは英語の勉強にならないので、読み上げ言語を英語にしていきます。コントロールパネルを開いて、「言語」を選択します。
f:id:somegoro:20180314151432p:plain


言語の追加をクリックして英語を追加します。
f:id:somegoro:20180314151445p:plain

3.読み上げを英語にする。

コントロールパネルに戻って「音声認識」を選択します。
f:id:somegoro:20180314151455p:plain


「音声合成」を選択します。
f:id:somegoro:20180314152220p:plain


音声の選択プルダウンリストで「Microsoft Zira Desktop - English (United States)」を選択します。
f:id:somegoro:20180314151613p:plain


これで英語を読めるようになりました。Excelを再起動して試してみてください。

ちなみに

Windowsをお使いの方はExcel以外でも読み上げさせる方法があります。


コルタナで「ナレーター」と入力してナレーターデスクトップアプリを選択、または「Ctrl+Windows+Enter」をクリックします。すると、ナレーターデスクトップアプリが起動します。
f:id:somegoro:20180314154226p:plain

ナレーターデスクトップアプリは全ての操作、アクティブウィンドウの文字を読み上げます。面白いし、目が疲れてるときは誰かに読んでほしい気持ちになるので有用ですね。しかし、ずっと使用しているとなんだか「うわぁあああ」って気持ちになります。そうしましたら終了させましょう。


終了するときは「CapsLock+Esc」をクリックします。
f:id:somegoro:20180314154235p:plain

以上。「Excelに英語を読み上げさせる方法。選択範囲を自動で全部読んでくれる!」でした。

お気に入りのミュージック作ったから紹介するよ!Google SONG MAKER

Google SONG MAKERを使ってお気に入りのミュージックを作りました!



どうですか?チッチッチッチッのところが良い味出してると思いませんか?私はだいぶ気に入りました!


これはGoogleが作った「SONG MAKER」というWebサイトで、無料かつ登録無しで音楽が作れてしまうのです。面白いですね!


詳しいリリース紹介はこちら
japan.cnet.com



詳しい使い方はこちら
gigazine.net


以上、「SONG MAKERによる自作ミュージックの紹介」でした。

Java Servlet Filter - フィルターの設定方法

HTMLからJavaへデータを送信する際にフィルタークラスを入れることが出来ます。

フィルターの設定方法

HTMLからJavaへデータの送信をするとき、フィルターなるクラスを通すことが出来ます。まさにフィルターの名前にふさわしい機能です。しかも、フィルターはJavaのクラスに紐づけて使用することが出来ます。要はすべてのクラスにフィルターを付けることも出来るし、固有なクラスに対してだけとしてもフィルターをつけることが出来るのです。それでは、具体的な設定方法をまとめます。


フィルターをかけたいプロジェクトを右クリック→新規→その他
f:id:somegoro:20180302165947p:plain


フィルター
f:id:somegoro:20180302170007p:plain


パッケージとクラス名を記述
f:id:somegoro:20180302170018p:plain


URLパターンがデフォルトではこのとおりになっています。すべての送信データに対してフィルタリングしたいなら /* と記述します。取り急ぎ私はすべてのデータに対して文字化け防止策を実施しました。
f:id:somegoro:20180302170025p:plain


完了
f:id:somegoro:20180302170039p:plain

これでフィルタークラスが出来ました。あとは出来たクラスのメソッドに対して、次のように書きます。これはコンテンツタイプを指定してます。

@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);
}

以上、「Java Servlet Filter - フィルターの設定方法」でした。

HTML(form) → Java(Servlet) で文字化けが起きてハマった話

HTML(form) → Java(Servlet) で文字化けが起きてハマりました

Webアプリを作っているときに、HTMLからJavaにデータを送ろうとして軽くハマりました。無事に解決できましたので、その方法をご紹介します。

およそ一日ハマっていたので業務上では軽くじゃ済まないんですが、人生から見たときには一日は比較的軽いものです。私は視野を広く持っています(上司はどう思うかわかりませんが)。


ではまず状況からいくと、HTMLのformで JavaのServletクラスを指定してPOSTでデータを送信しました。しかし、Javaに送られてきたのは見るも文字化けしたデータだったのです。

この解決法として、javascriptを経由すればjQueryのajaxで簡単に解決することは出来ます。しかし、いつもこの方法ばかり使っていては学習にならないのでこの構成での解決方法を模索しました。

実行環境

様々な方法が様々なブログで紹介されていたのですが、なかなか文字化けは治りませんでした。ブログ書いた人は本当に直ったの?これはおそらく環境が違うからだと思います。

私はWindows10Tomcat9サーバー立てて実施しています。おそらくブログで紹介されていた環境はLinux上にサーバー立てたりTomcatのバージョンが違ったりで実施している方が多いのでしょう。

ともあれ、私が試した方法は次のとおり。私は一日試行錯誤しましたが、みなさんはこの記事を読めば一瞬で解決することが出来ます。ラッキーですね!

私が試した方法

私が試した方法は次のとおり3つに大別することが出来ます。それぞれどんなことを考えて、具体的に何をしたのかを書いていきます。
1.HTML
2.Servlet
3.Filter

1.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'

これもダメ。これは初めて聞いたのでもしかしたらと思いましたが、状況変わらず、ダメでした。

2.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の動きを追うことが出来、大変勉強になりました。結局この方法ではダメだと結論づけて、上記障害を回復させ次第違う解決方法の模索を始めてしまったのですがこの方法で課題解決できる可能性が濃厚です。でも大丈夫、上記の方法での解決を逃してしまっても解決できる方法があります。

3.Filter

最終的に解決した方法です。恥ずかしながらHTMLからJavaへデータを送信する際にフィルターが入ることを私は知りませんでした。フィルタークラスを作成して、そこでコンテンツタイプを指定します。詳細は次の記事にあります。
somegoro.hatenablog.com
これで文字化け問題を無事に解決することができました。


以上、「HTML(form) → Java(Servlet) で文字化けが起きてハマった話」でした。

あの日あの時どこにいたのか。KMLファイルの取得方法

KMLファイルって?

KMLファイルは位置情報を管理するためのXMLです。Google EarthGoogle Mapsに読み込ませたりして、様々なことが出来ます。また、Androidを使っている人はデフォルトで自分の位置情報履歴を毎日取得してKMLファイルに保存しています。驚きましたか?今回の記事では、その位置情報履歴KMLファイルのダウンロード(エクスポート)方法をご紹介します。


手順は簡単2ステップです。
1.タイムラインを開く
2.ダウンロード

1.タイムラインを開く

まずは自分のタイムラインを開きます。「Google検索」ページに行き画面右上にあるメニューボタンからマップを選択し、Googleマップを開きます。
f:id:somegoro:20180227141144p:plain


Googleマップ」画面の画面左上にあるハンバーガーアイコンをクリックします。
f:id:somegoro:20180227141154p:plain


メニューからタイムラインを選択します。
f:id:somegoro:20180227141201p:plain


「タイムライン」画面の画面左上にある「今日」ボタンをクリックします。これで今日の自分のタイムラインを開くことが出来ました。
f:id:somegoro:20180227141212p:plain


2.ダウンロード

次はダウンロードです。「タイムライン」画面の画面右下にある「設定」ボタンをクリックします。ポップアップウィンドウから「この日のデータをKML形式でエクスポート」をクリックします。
f:id:somegoro:20180227141221p:plain


任意の場所に次のファイル名でkmlファイルがダウンロードされます。ファイル名はその日の日付となっています。
history-2018-02-26.kml


KMLファイルを取得することで、自分がいつどこにいたのかが分かるようになりました。これらの情報を集めて、「自分が普段どのような行動をしているのかを解析」したり「残業の事実を証明」したり、様々なことに利用できるかと思います。それでは、KMLファイルで楽しんでください。


KMLファイルの詳細は情報は次のGoogleのKML公式サイトにあります。
developers.google.com

Google Adsense 自動広告をはてなブログに設置してみた

Google Adsense 自動広告をはてなブログに設置してみました

Google Adsense を眺めて収益チェックしていたら、自動広告のブロックが目に入りました。何だろうこれはとチェックしてみると、Googleさんが発行したコードを指定の場所に張り付けると、自動で広告を表示するというものでした。


何でも「適切な場所に適切な内容の広告を表示すること」を売りにしているようです。最近はAIの発展も目覚ましいので、その技術を応用しているのでしょうか。私はGoogleさんの勧めるものはとりあえず乗っかっとけの精神を持ち合わせているので、さっそく自動広告を当サイトはてなブログに適用してみました。

さっそく自動広告を設置

すると、どうでしょう。文字どおり、自動で広告が設置されました。
f:id:somegoro:20180222021202p:plain


コードを組み込んだのはhead要素の中に一つだけだったのに、全然違うところに広告が表示されました。これはすごい。本当に表示されるのか不安だったのですが、コードを組み込んでから15分程度で表示されました。なので、みなさんも不安ながらもやってみてください。不安の15分の後、きっと感動することでしょう。


ちなみに、以前はこんな感じになっていました。いたって普通の注目記事のリストでした。
f:id:somegoro:20180222020923p:plain

まとめ

Googleさん凄い。自動広告にすることで、広告設置がとても簡単になります。以前はWebサイトの表示スピードを考慮したり適切な場所はどこだろうかと考えたりしていましたが、自動広告によってそういったことを考えなくてもある程度いい感じに表示してくれるようになりました。


広告設置の敷居がかなり低くなり、プログラムに詳しくない方でも気軽に広告設置できることでしょう。そうして皆が広告を表示することによってGoogleの売り上げも上がり、適切な広告によって広告を見た人にも利益がある。これは優しい世界だわ、あっぱれ。

eclipseからTomcatを操作できるようにする設定方法

1.「ウィンドウ」→「ビューの表示」→「その他」をクリックします。
f:id:somegoro:20180220145758p:plain


2.「ビューの表示」画面が出てくるので、サーバーを選択してOKします。
f:id:somegoro:20180220145812p:plain


3.探すのが面倒でしたらフィルターにサーバーと入力すると出てきます。
f:id:somegoro:20180220145826p:plain


4.eclipse画面下のビューにサーバータブが追加されました。このリンクをクリックしてサーバーの設定をしていきます。
f:id:somegoro:20180220145835p:plain


5.Tomcat v9.0を選択し次へ。
f:id:somegoro:20180220145847p:plain


6.参照ボタンからインストールしたディレクトリを選択する。
f:id:somegoro:20180220145906p:plain


7.サーバーが無事に追加されました
f:id:somegoro:20180220145918p:plain


8.起動してみましょう。
f:id:somegoro:20180220145929p:plain


9.server.xmlの設定
Tomcat9系では、このままでは画面が開かずに次のように404エラー画面になります。
f:id:somegoro:20180226004532p:plain

そんなときはserver.xmlの設定を見直しましょう。
f:id:somegoro:20180226004641p:plain

<Context docBase="C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT" path="/"/>

Host要素中の末尾に上記Context要素を追記します。そしたら再起動。


10.無事に起動できました。
f:id:somegoro:20180220151321p:plain


ちなみに。。
上記で設定したものはTomcatをインストールした際に入力した設定です。
Tomcatの設定でシステム環境変数JAVA_HOMEを設定しておかないと、Tomcatは上手く起動しません。私はこれで結構はまりました。最近のJavaはシステム環境変数のPathをインストール時に設定してくれて、インストール直後にコマンドプロンプトjava -versionとバージョンチェックするとインストールしたバージョンが出力されるんですね。しかし、JAVA_HOMEまでは設定してくれません。ですので、Javaをインストールしたら自動で設定までしてくれたと思わず、システム環境偏すにはJAVA_HOMEを追加するのです。
f:id:somegoro:20180220145954p:plain
f:id:somegoro:20180220150014p:plain
f:id:somegoro:20180220150022p:plain

Google Mapで複数個所に印をつける方法

Googleマップで複数個所に印をつける方法

今回の記事では、Googleマップで複数個所に印をつける方法をご紹介します。


Googleマップで経路経路探索をするけど、他の機能は使わない。むしろ知らないという方が多いのではないでしょうか。Googleマップでは、地理的な何かを検討するのにもってこいの機能があるのです。それが複数個所に印をつける方法「マイプレイス」です。


今回機能を使って課題を検討しましたので、その過程をご紹介します。

課題

私は今後、仕事で都内を転々とすることになりそうです。しかし、家が国立市なので都心からは遠いです。もっとも遠い千葉よりの東京までは片道で2時間程度かかってしまいます。

検討

そこで、都心へのアクセスが良い地域に引っ越しをしようと思います。お引越し先を検討するときには、Googleマップを使用します。Googleマップでよく行く場所をチェックし、そこまでのアクセスが最も容易な場所を選択します。本来は制限として考慮すべき家賃については今回は検討に含めないものとします。それでは複数地点に印をつける手順です。


まずGoogleマップにアクセスします。

マイプレイスを開く

検索バー左にあるボタンをクリックします。
f:id:somegoro:20180211155024p:plain


マイプレイスを選択します。
f:id:somegoro:20180211155009p:plain


マイプレイスが開きました。下の「地図を追加」をクリックします。
f:id:somegoro:20180211154943p:plain

マイプレイスに地点を追加する

検索バーで目的の地点を検索します。今回の記事ではでは最近勢いのある某社の地点に印を付けていきましょう。
f:id:somegoro:20180211155034p:plain


検索した地点を選択したら「地図に追加」をクリックします。
f:id:somegoro:20180211155048p:plain


こうして複数の地点を追加していきます。
f:id:somegoro:20180211160252p:plain


すると、こんな感じに記しをつけることができます。このとき、印の形や色も任意のものを選択することが出来ます。
f:id:somegoro:20180211160234p:plain


こうしてみると、都心に集中していることがわかりますね。離れて横浜にもあるので、この点も引っ越しをする際には注意したほうがよさそうです。

公式サイト

上記の方法をざっくりと説明した内容が、公式サイトにあります。
support.google.com


公式サイトは画像が無いので少々わかりづらいですが、絶対の信頼度があるので一読しておくと良いでしょう。

まとめ

以上、「Googleマップで複数個所に印をつける方法」でした。次の記事で結論をもってこようと思います。印をつけた地点からの距離と通勤時間を算出して出そうかなぁ。

一週間USキーボードを使ってみた感想

USキーボードを使ってみて

とある理由でUSキーボードを使うことになりました。USキーボードに触るのは初めてで、今週からなのでミスが多く入力が遅い状況です。作業がなかなか進まないので今まで使いなれた日本語キーボードを使ってもいいのですが、せっかくの機会なので少し使ってみようかと思います。合わないと判断したらまたJISキーボードに戻せばいいだけですし。そこで少し使ってみて見えてきた感想をまとめてみようと思います。

使ってみて驚いた点

生まれて初めてUSキーボードを使うと多くの戸惑いがあります。まるで生まれたての小鹿のように、入力がおぼつきません。これから使うひとへのメッセージとして、あるいは初めて使ってみた人への共感として本記事を楽しんでもらえたらと思います。

英数かなキーがない

これはすごく驚きました。Alt+英数かな(があった場所の)キーをクリックすると日本語入力にすることが出来ます。

Enterキーが小さい(っていうか横長)

これは端的に押しにくい。ミスってShift押しちゃう!調べてみるとUSキーボードは小指で押す思想になっているみたいですね。USキーボードのEnterキー配置としては、ホームポジション小指の隣の隣にあります。配置さえ覚えてしまうと便利かもしれませんね。ちなみにJISキーボードはUSキーボードのそのもう一個隣のボタンになります。つまり2つボタンが空きます。たったボタン一つの違いに思えますが、一つ遠くなるだけでほぼ位置関係がわからなくなります。JISキーボードのこういった事情から、狙いを定めて勢い良く「タアッッッアアーーーン」とEnterキー押す人が居るのかもしれませんね。

変換キーがない。

入力した文字を後で変換したくなったら出来ない。たぶん出来ない。(変換したい!)これは英語が変換するという概念がないからなのかな。

意外と気にならなかった点

USキーボードに日本語が印字されていないのは別に気にはならなかったかな。これこそ気になるかなと思っていましたが、意外でした。

まとめ

ということで、現状ではイケてない私のUSキーボード入力状況ですが伸びしろは大きいです。タイピングの基礎を身に着けている人であれば、利点が大きいかと思います。特に英語を入力することが多い人は利点は大きいと思います。私はまだその利点を享受できるレベルにないけれど英語入力は多いのでって感じでした。Web上では人気みたいですね、情報系の人間はUSキーボード使うべきだとか


週末はタイピングの基礎を練習だなぁ。


(追記)USキーボード最高です。もう戻れなくなってしまって、自宅のPCも英語配列のキーボードに変更しました。私が使用しているのはこちらのキーボードです。そこそこの値段しますが、QoLが爆上がりします。

国立市の積雪状況(2018年01月22日19時30分~20時30分)

国立市の積雪状況

国立市の積雪状況を伝えるニュースが見当たらなかったので、確認してきました。(2018年01月22日19時30分~20時30分)

谷保第四公園

谷保第四公園はこのような状況になっています(2018年01月22日19時30分)。大体の場所は10センチ程度の積雪、場所によっては20センチくらいの積雪でした。公園の中のほうに入ると20センチくらいのふわっふわの雪が積もっています。この公園には段差があるのですが、雪で見えなくなっていますので要注意です。
f:id:somegoro:20180122225850j:plain


公園の電車路線側に可愛い雪だるまがありました。たくさん雪が降ったので真っ白で綺麗な雪だるまが出来たようですね。国立市で積もるほどの雪が降るのは珍しいので、このように真っ白で綺麗な雪だるまをお目にかけることはとても珍しいことです。
f:id:somegoro:20180122225839j:plain

味の民芸 国立店前

味の民芸 国立店前はこのような状況になっています(2018年01月22日19時30分)。この周辺はかなり積もっていました。20センチ以上は積もっていたかと思います。人も車もほとんどいなかったので、これからどんどん積もっていくと思われます。
f:id:somegoro:20180122225853j:plain

国立富士見台第三団地

国立富士見台第三団地の周辺はこのような状況になっています(2018年01月22日19時30分)。ここらの積雪は10センチくらいでした。味の民芸 国立店前よりもさらに人や車がいないので、とても幻想的な雰囲気でした。現実的には、ここで転んでケガでもしたら助けてくれる通行人はいないのでお気を付けください。
f:id:somegoro:20180122225822j:plain


ここまで撮っていると雪が強くなってきました(2018年01月22日20時30分)。風はもともと強かったのですが、ぱらぱらだった雪がボタン雪になってきました。写真でもわかるかと思います。
f:id:somegoro:20180122225856j:plain

ということで、ここで帰宅しました。明日は晴れ予報の国立市ですが、もう少し雪が降り続きそうです。
f:id:somegoro:20180122225902j:plain


以上、国立市の積雪状況(2018年01月22日19時30分~20時30分)でした。

eclipse の画面上部(ヘッダー)にあるフォルダ名を表示しない設定

eclipse のデフォルト設定では、次の画像のように「画面上部(ヘッダー)にフォルダ名」が表示されています。

f:id:somegoro:20180115092523p:plain


今回の記事では、eclipse の画面上部(ヘッダー)にあるフォルダ名を表示しないように設定します。設定をすると次のように表示されなくなります。

f:id:somegoro:20180115092547p:plain


この表示を消すことで、PC画面を動画配信するときなどに有効かと思います。具体的には「ユーザー名が入ったフォルダ名を表示したくない」などのときに、この設定をすると良いかと思います。


それでは、設定方法の手順に入ります。

設定方法

「ウィンドウ」から「設定」をクリックして、設定画面を開きます。
f:id:somegoro:20180115092731p:plain


デフォルトでは次のような設定になっているかと思います。
f:id:somegoro:20180115092451p:plain


そうしましたら「ウィンドウ・タイトルにワークスペース・パスを表示」のチェックを外します。外したら「OK」をクリックして設定完了です。
f:id:somegoro:20180115092649p:plain


するとこのようになります。

f:id:somegoro:20180115092547p:plain

これで、eclipse の画面上部(ヘッダー)にフォルダ名が表示されなくなりました。

AWS用語の意味がわからない!?クラウドの種類/インスタンス/ストレージ/VPC/DB/AZを説明していく

AWSについて調べた

公開したいWebサービスを作ったので、AWSでサーバを借りようかと思っています。憧れのクラウドデビューです。(実際には2年くらい前にテスト環境を作ったことがありますが、どんな感じだったかすっかり忘れてしまっています)


そのため、AWSの勉強をしているのですが機能が盛り沢山で勉強することが多いですね。まだまだ初歩しか勉強していませんが、今回は忘れないように勉強した内容を記事に残しておこうと思います。ついでに、当ブログもはてなブログからAWS上に構築したWordPressに移行しようと考えています。

クラウドについて

システム構成はクラウドとオンプレミスに大別される。私は今までオンプレミスのシステム開発しかしたことがありません。官公庁系のシステム開発がメインだったので、とにかくお堅いシステムを開発していました。しかし、転職した今は官公庁系だけでなく民間のシステム開発も開発していく見通しです。そして、これからは時代の流れとして官公庁系システムでさえもクラウド上に開発することが増えてくるのではにないかと予想しています。なので、今クラウドについて勉強することは自分のサービスを公開できるだけでなく業務上でのメリットも大きいです。

オンプレミス

自社内でシステムの全てを賄う。私がずっとシステム開発してきたのはこちらの方。とにかく人的・時間的・金銭的リソースが莫大にかかる。(近年、クラウドの方がお金がかかるケースも多いという報告も入っており金銭的なメリットがあるとは一概に言えなくなってきました。)自由度が高く、使用者が無茶を言ったり知識が無くても何とかなる思い通りにシステム構築しやすいことがメリットとして上げられる。

クラウド

システムの一部を外部リソースを使用してシステムを構築する。私にとっては未知の領域。適切なインフラが整ってきた現在では、適切な知識を用いることで人的・時間的・金銭的リソースを大幅にカットできる。このことから今後さらに需要が高まると見られる。今まで大企業しか請負えなかったシステム開発クラウドサービスを上手く使用すれば零細企業でも請け負える可能性を持つ希望の星。これでシステム開発の闇「ゼネコン体質」を駆逐したい。性質としては、パブリッククラウドプライベートクラウドに大別される。


パブリッククラウド
一般的にクラウドと呼ばれる。

 
プライベートクラウド
クラウド管理部門が大量のコンピュータリソースを持ち、ユーザ部門がそれをクラウドとして使う。つまり、自社内でクラウドを作って管理、使用をすること。私の中では「オンプレミス」との違いが不明。

AWSについて

2017年現在、クラウドといえばAWSという認識が広まっている。もちろんクラウドサービスシェア1位。2位以下のクラウドリソースを全て足してもAWSクラウドリソースには遠く及ばないと、巷ではまことしやかにささやかれている。Amazonの在庫管理システムから発展した。ここからはAWSのサービスについて記載していく。

インスタンス

クラウド上のサーバーのようなもののこと。メモリ、コア、ストレージ、OSを選択できるのが一般的。インスタンスは自分の持ち物ではない。借りているだけ。だから、壊れたら破棄(返却)してまた新しいインスタンスを借りれば良い。
代表的なものはAmazon EC2

オブジェクトストレージ(クラウドストレージ)

クラウド上の巨大なハードディスク、容量無限と考えて差し支えない。保存されるデータはファイルではなくオブジェクトと呼ばれる。オブジェクトはインターネット上で公開することもできる。HTTPアクセスさせるようにすればWebサーバーのようにしても使用できる。
代表的なものはAmazon S3

企業イントラとクラウドを接続する方法

インターネットVPNという技術を使う。VPNとは、仮想プライベートネットワークのこと。企業イントラとクラウドVPN接続する。通信データが暗号化されているので、外部から傍受されても通信内容は読み取れないのでセキュリティー上は安心して使用できる。
しかし、インターネットの通信速度が遅いとこの接続方法では遅くなる。インターネットの通信速度は得てして安定しないので、このままでは懸案事項となる。この問題の解決策として、WANサービスを利用する等が考えられる。
代表的なものはAmazon VPC

データベース

一般的なクラウドではデータベースも用意されている。基本的にはインスタンスと同様の考え方で、必要だったら借りて不要になったら返却すれば良い。バッチ当ての間隔、バックアップの間隔、データの世代管理も管理画面で選択するだけで実施出来る。バッチファイルやバックアップを置く場所は見えないところで自動化されているので考えなくて大丈夫。
代表的なものはAmazon RDS

アベイラビリティゾーン(AZ)

直訳で使用可能な領域。AWSでは仮想化されたデータベースセンターにユーザーの使用可能な領域が割り当てられるため、自分が使用しているリソースが物理的にどれなのか把握できない。わかることは、リソースは物理的なデータセンターとして11個あること。これはAmazonから公表されている。これらの物理的なデータセンターを組み合わせて仮想化されたデータベースセンターいわゆるAZを作っている。
AZはAWSのサービス


以上、AWSについて調べたことを意味のわかる言葉で書いた記事でした。

HTML5/CSS3 様々なリストの作り方

リストの作り方

情報を整理して伝えるにはリスト形式が便利ですね。今回の記事では、様々なリストの作り方をご紹介します。リストは次のように3つのタイプに大別することが出来ます。

・順序の関係ないリスト(Unordered list)
・順序の関係あるリスト(Ordered list)
・定義型リスト(description list)

それではそれぞれのリストについて詳しく見ていきましょう。

順序の関係ないリスト(Unordered list)

順序の関係ないリストの中でも、3つのタイプに分類することが出来ます。

・デフォルトの場合
・ネストした場合
・type指定した場合

それでは詳しく見ていきます。

デフォルトの場合

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネストした場合

ネストするとこんな感じになります。リストがインデントされて白抜きになるんですね。

  • 最初のリスト
    • 最初のリスト
    • 真中のリスト
    • 最後のリスト
  • 真中のリスト
  • 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

type="disc"ではこのようになります。デフォルトと同じですね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="disc">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="circle"ではこのようになります。ネストしたときと同じになります。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="circle">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type="square"ではこのようになります。リストスタイルが四角になりますね。

  • 最初のリスト
  • 真中のリスト
  • 最後のリスト

<ul type="square">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>

上記のtypeはulに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係ないリスト(ul)に関わらず「順序の関係あるリスト」や「定義リスト」のliにも指定すことが出来るのです。

順序の関係あるリスト(Ordered list)

順序の関係あるリストの中で4つに分類することが出来ます。

・デフォルトの場合
・ネスト指定した場合
・type指定した場合
・value指定した場合

それぞれ見ていきましょう。

デフォルトの場合

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


ネスト指定した場合

ネストするとこんな感じになります。リストがインデントされますね。数字の階層化はされません。

  1. 最初のリスト
    1. 最初のリスト
    2. 真中のリスト
    3. 最後のリスト
  2. 真中のリスト
  3. 最後のリスト

<ul>
  <li>最初のリスト</li>
  <ul>
    <li>最初のリスト</li>
    <li>真中のリスト</li>
    <li>最後のリスト</li>
  </ul>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ul>


type指定した場合

文字の属性を指定することも出来ます。
type="a"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="a">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="A"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="A">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="i"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="i">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>


type="I"ではこのようになります。

  1. 最初のリスト
  2. 真中のリスト
  3. 最後のリスト

<ol type="I">
  <li>最初のリスト</li>
  <li>真中のリスト</li>
  <li>最後のリスト</li>
</ol>

上記のtypeはolに指定しましたが、liにも個別に指定することも出来ます。つまり、順序の関係あるリスト(ol)に関わらず「順序の関係ないリスト」や「定義リスト」のliにも指定すことが出来るのです。

value指定した場合

順番も指定できます。
・value

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
  5. リスト5

<ol>
  <li value="5">リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
  <li>リスト4</li>
  <li>リスト5</li>
</ol>


定義型リスト(description list)

定義1
定義1の説明文1
定義1の説明文2
定義2
定義2の説明文1
定義2の説明文2

<dl>
  <dt>定義1</dt>
  <dd>定義1の説明文1</dd>
  <dd>定義1の説明文2</dd>
  <dt>定義2</dt>
  <dd>定義2の説明文1</dd>
  <dd>定義2の説明文2</dd>
</dl>


アレンジを加えたリスト

次にアレンジを加えたリストを2つご紹介します。まずはランキングを構成するリストの作り方。

タヌキ
キリン
キツネ

<style>
dt.sample:before {
  counter-increment:sample;
  content:counter(sample) "位 ";
}
div.div_reset {
  counter-reset:sample;
}
</style>
<div class="div_reset">
<dl>
  <dt class="sample">タヌキ</dt>
  <dt class="sample">キリン</dt>
  <dt class="sample">キツネ</dt>
</dl>



次に章立てを構成するリストの作り方。

  1. item
  2. item
    1. item
    2. item
    3. item

<style>
#original_count ol {
/* ol要素にsectionカウンタを生成 */
  list-style-type: none;
  counter-reset: section;
}

#original_count li {
/*  list-style-type: none;*/
}

#original_count li:before {
/* section カウンタをインクリメントする */
  counter-increment: section;
/* "." で区切られた section カウンタのインスタンスの値を付加 */
  content: "第" counters(section, "-") "章 ";

}
</style>
<div id="original_count">
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
</ol>
</div>



以上、「HTML5/CSS3 様々なリストの作り方」でした。