生活情報オンライン

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

Web技術・Web情報

ここ数日AWSで学んだこと VPC/サッブネット/ファイアウォール

数日前から仕事でAWSの環境構築を始めました。約2年ぶりにAWSを触ることになりますが、AWSは瞬時に環境構築が出来て本当に楽しいです。2年前は自分のお金でAWSを使っていたのですが、今回は会社のお金で予算がしっかりあるので安心してAWSを触ることが出来…

ajaxのコードを書いて説明していくよ

以前から書こうと思っていた「ajaxソースコード」についての記事を書きます。今ではすっかり手に馴染んでスラスラかけるようになったajaxですが、その存在すらを忘れていた時期もありました。somegoro.hatenablog.com やらないと忘れてしまいますよね。当時…

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

私の英語能力は簡単な英文メールを調べながら読める程度です。しかし、外資系企業に入社したことで、英会話を習得する必要に迫られています。 ひとまずの目標は試用期間中に英文メールをスラスラ読めるようになることです。私は2月入社ですので7月末まで、残…

気になった英語を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日 どうですか?チッチッチッチッのところが良…

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

HTMLからJavaへデータを送信する際にフィルタークラスを入れることが出来ます。 フィルターの設定方法 HTMLからJavaへデータの送信をするとき、フィルターなるクラスを通すことが出来ます。まさにフィルターの名前にふさわしい機能です。しかも、フィルター…

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

HTML(form) → Java(Servlet) で文字化けが起きてハマりました Webアプリを作っているときに、HTMLからJavaにデータを送ろうとして軽くハマりました。無事に解決できましたので、その方法をご紹介します。およそ一日ハマっていたので業務上では軽くじゃ済まな…

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

KMLファイルって? KMLファイルは位置情報を管理するためのXMLです。Google EarthやGoogle Mapsに読み込ませたりして、様々なことが出来ます。また、Androidを使っている人はデフォルトで自分の位置情報履歴を毎日取得してKMLファイルに保存しています。驚き…

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

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

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

1.「ウィンドウ」→「ビューの表示」→「その他」をクリックします。 2.「ビューの表示」画面が出てくるので、サーバーを選択してOKします。 3.探すのが面倒でしたらフィルターにサーバーと入力すると出てきます。 4.eclipse画面下のビューにサーバー…

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

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

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

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

データベースとプログラムを繋ぐ仕組みを解説してみる

データベースとプログラムを繋ぐ仕組みの解説 今回の記事ではデータベースとプログラムを繋ぐ仕組みを解説します。まずは、さらっと前回までのおさらいをしましょう。 データベースとは 初回の記事では基本的な知識である次の2点について学びました。 ・デ…

クラウドの利用形態(IaaS、PaaS、SaaS)について調べてみた

クラウドの利用形態 AWS、Azureという言葉を聞くようになって久しいですね。今更ながらクラウドの利用形態について調べてみました。クラウドの利用形態は次の3つに大別されます。それぞれ詳しくみていきます。 ・IaaS ・PaaS ・SaaS 「IaaS」イァース Infra…

超便利!HTML5/CSS3の検証なら、W3Cドキュメント検証サイト!

W3Cドキュメント検証サイト 私は驚きました。なんて便利なんだ、と。W3Cのドキュメント検証サイトが便利で感動したので紹介します。 validator.w3.org このサービスでは、URLを入力するだけでそのWebサイトがW3Cの標準規格に沿ってコーディングされているか…

シークレットウィンドウとしてブラウザを開く方法 Google Chromeの場合

シークレットウィンドウとしてブラウザを開く方法 Google Chromeをシークレットウィンドウとして開く方法をご紹介します。 シークレットウィンドウとしてGoogle Chromeを開くと、次の情報がChromeに記憶(保存)されません。 ・閲覧内容 ・Cookie ・サイトの…

Tomcatのインストール方法 Java で Hello World ! を表示する(1/2)

Tomcatのインストール方法 Tomcatをインストールしてブラウザに「Hello World !」と表示させます。 ダウンロード まずはTomcatの公式サイトにアクセスします。 画面左側に各バージョンのDownloadサイトがリストで並んでいます。今回はTomcat 9をインストール…

待ち時間のローディングサンプル3

今回の記事では可愛い系サイトに合いそうなローディングサンプルのご紹介です。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに…

待ち時間のローディングサンプル2

何にでも合いそうなローディングサンプルです。前回のローディングサンプルに続き、こちらもHTML5 / CSS3 のみで作成しています。 somegoro.hatenablog.com 画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @chars…

待ち時間のローディングサンプル1

Windows10っぽいサンプルです。HTML5 / CSS3 のみで作成しています。画像やjavascriptは使用していませんので、とっても簡単にアプリに取り込むことが出来ます。 @charset "utf-8";.load-container {width: 200px;height: 200px;background: rgba(33, 150, 2…

Javaで画面遷移(リダイレクトとフォワード) HTML5 / CSS3

Javaで画面遷移する方法 Javaで画面遷移するにはどのようにすればいいのか。 基本的な方法は次の2つ。 1.リダイレクト(Redirect) 2.フォワード(Forward) 1.リダイレクト サーバ移転などの時や別システムにするときに使用する。 指定されたURLに処…

HTML5/CSS3のみで「下向き矢印」「右向き矢印」を作る方法

先日の記事で吹き出しをHTML5/CSS3を作りました。 somegoro.hatenablog.com 今回はそれを応用して、矢印を2パターン作ってみます。 下向き矢印 下向き矢印はこんな感じになります。 ソースコードです。 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> .formBalloon { padding-bott</meta></head></html>…

設計書 Tips 飛び越え線の書き方2つ in Excel

「飛び越え線」の書き方 線が交差したときに見やすくする「飛び越え線」の書き方をご紹介します。 設計書を書くときなどは何かと線が多くなりますよね。Microsoft製品のVisioなら「飛び越え線」があるのですがExcelはありません。 ですので、簡単に作成する…

HTML5/CSS3 だけで「キレイな」吹き出しを作る方法

ギザギザの吹き出し 前回の記事で、HTML5/CSS3 だけで吹き出しを作る方法をご紹介しました。 somegoro.hatenablog.com しかし、公開した後になってだんだんと気になってきてしまったのです。ここのギザギザが。。。 これは線(border)を重ねて三角に見せて…

HTML5/CSS3 だけで「吹き出し」を作る方法

今回の記事では、HTML5/CSS3 だけで「吹き出し」を作る方法をご紹介します。 記事下にあるソースコードをコピー&ペーストすると、このような「吹き出し」が出来ます。画像を使うよりも軽量かつサイズ操作が簡単なのでおススメです。 .formBalloon{padding-b…

直下の要素のみスタイル指定する方法 HTML5/CSS3

直下の要素のみスタイル指定する方法 たまに使いどころが出てくる「直下の要素のみスタイル指定」したいケースへの対応です。 「idがparentの要素」の直下である「div要素」のみ背景色をつけています。 #parent > div { background-color:#4CAF50; } #hatena…

picture要素が便利らしい / HTML5.1

HTML5.1からpictureという要素が使用可能になりました。今まで知らなかったのですが、これがなかなか便利らしいというので調べてまとめてみることにします。 ブラウザの対応状況 さて、HTML5.1から使用可能とのことでしたがブラウザの対応状況はどのような状…

javascript 即時関数の書き方

今回はjavascriptの即時関数を紹介します。 私は最初に即時関数を見たときはその記述方法に驚きました。 しかし、その機能はいたってシンプルで「定義後、即実行」する関数だというだけです。 だんだん見慣れてもきますので、もし即時関数を難しく感じても最…

javascript(jQuery)読み込みの仕組みを解説!

今回は javascript / jQuery の読み込まれる仕組みを解説します。 window.onload / ready / $(function(){}) など 色々なイベント処理があります。みなさんはフロントエンドの基本であるこれらをきちんと理解しているでしょうか。これらの理解があるかどうか…

jQueryでも高速化!メソッドチェーン/連想配列で値を設定

先日、jQueryで簡単に値を取得する方法を記載しました。その中で処理を高速化することについて少しだけ言及しました。 somegoro.hatenablog.com今回はその高速化についての記事です。 jQueryの処理はjavascriptの処理と比較して遅いと一般的に言われています…